show posting and transaction notes along with payee

ananthakumaran · Dec 12, 2023 · cdd322a · cdd322a
1 parent 070a145
commit cdd322a
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 11 deletions.
diff --git a/src/lib/components/PostingCard.svelte b/src/lib/components/PostingCard.svelte
@@ -8,6 +8,7 @@
     firstName,
     restName
   } from "$lib/utils";
+  import PostingNote from "./PostingNote.svelte";
   import PostingStatus from "./PostingStatus.svelte";
 
   export let posting: Posting;
@@ -19,6 +20,7 @@
   <div class="is-flex is-justify-content-space-between">
     <div class="has-text-grey is-size-7 truncate">
       <PostingStatus {posting} />
+      <PostingNote {posting} />
       <a class="secondary-link" href={postingUrl(posting)}>{posting.payee}</a>
     </div>
     <div class="has-text-grey min-w-[110px] has-text-right">

diff --git a/src/lib/components/PostingNote.svelte b/src/lib/components/PostingNote.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { formatTextAsHtml, type Posting } from "$lib/utils";
+  export let posting: Posting;
+</script>
+
+{#if posting.note != ""}
+  <span class="icon is-small" data-tippy-content={formatTextAsHtml(posting.note)}>
+    <i class="fa-regular fa-comment-dots" />
+  </span>
+{/if}
diff --git a/src/lib/components/Transaction.svelte b/src/lib/components/Transaction.svelte
@@ -3,6 +3,7 @@
   import Postings from "$lib/components/Postings.svelte";
   import _ from "lodash";
   import PostingStatus from "$lib/components/PostingStatus.svelte";
+  import TransactionNote from "./TransactionNote.svelte";
 
   export let compact: boolean = false;
   export let t: Transaction;
@@ -21,8 +22,9 @@
       <div class="column is-12 py-0 truncate">
         <div class="description is-size-7">
           <b>{t.date.format("DD MMM YYYY")}</b>
-          <span title={t.payee}
-            ><PostingStatus posting={t.postings[0]} />
+          <span title={t.payee}>
+            <PostingStatus posting={t.postings[0]} />
+            <TransactionNote transaction={t} />
             <a class="secondary-link" href={postingUrl(t.postings[0])}>{t.payee}</a></span
           >
         </div>
@@ -41,6 +43,7 @@
           <b>{t.date.format("DD MMM YYYY")}</b>
           <span title={t.payee}
             ><PostingStatus posting={t.postings[0]} />
+            <TransactionNote transaction={t} />
             <a class="secondary-link" href={postingUrl(t.postings[0])}>{t.payee}</a></span
           >
         </div>

diff --git a/src/lib/components/TransactionCard.svelte b/src/lib/components/TransactionCard.svelte
@@ -9,6 +9,7 @@
     type Transaction,
     firstName
   } from "$lib/utils";
+  import PostingNote from "./PostingNote.svelte";
   import PostingStatus from "./PostingStatus.svelte";
 
   export let t: Transaction;
@@ -22,6 +23,7 @@
   <div class="is-flex is-justify-content-space-between is-align-items-baseline">
     <div class="has-text-grey is-size-7 truncate">
       <PostingStatus {posting} />
+      <PostingNote {posting} />
       <a class="secondary-link" href={postingUrl(posting)}>{posting.payee}</a>
     </div>
     <div class="has-text-grey min-w-[110px] has-text-right">

diff --git a/src/lib/components/TransactionNote.svelte b/src/lib/components/TransactionNote.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { formatTextAsHtml, type Transaction } from "$lib/utils";
+  export let transaction: Transaction;
+</script>
+
+{#if transaction.note != ""}
+  <span class="icon is-small" data-tippy-content={formatTextAsHtml(transaction.note)}>
+    <i class="fa-regular fa-comment-dots" />
+  </span>
+{/if}
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
@@ -1078,3 +1078,7 @@ export function sumPostings(postings: Posting[]) {
 export function transactionTotal(transaction: Transaction) {
   return _.sumBy(transaction.postings, (t) => _.max([0, t.amount]));
 }
+
+export function formatTextAsHtml(text: string) {
+  return `<p>${_.trim(text).replaceAll("\n", "<br />")}</p>`;
+}
diff --git a/src/routes/ledger/posting/+page.svelte b/src/routes/ledger/posting/+page.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
   import { accountColorStyle } from "$lib/colors";
+  import PostingNote from "$lib/components/PostingNote.svelte";
+  import PostingStatus from "$lib/components/PostingStatus.svelte";
   import SearchQuery from "$lib/components/SearchQuery.svelte";
   import { iconText } from "$lib/icon";
   import { change } from "$lib/posting";
@@ -134,15 +136,9 @@
                 {@const c = change(p)}
                 <div>{p.date.format("DD MMM YYYY")}</div>
                 <div class="is-size-7 truncate" title={p.payee}>
-                  {#if p.status == "cleared"}
-                    <span class="icon is-small">
-                      <i class="fas fa-check"></i>
-                    </span>
-                  {:else if p.status == "pending"}
-                    <span class="icon is-small">
-                      <i class="fas fa-exclamation"></i>
-                    </span>
-                  {/if}<a class="secondary-link" href={postingUrl(p)}>{p.payee}</a>
+                  <PostingStatus posting={p} />
+                  <PostingNote posting={p} />
+                  <a class="secondary-link" href={postingUrl(p)}>{p.payee}</a>
                 </div>
                 <div class="custom-icon truncate" title={p.account}>
                   <div class="flex">