fix(ui): show status badge on an open invoice

models/doctype/Transaction/Transaction.js

@@ -1,6 +1,6 @@
 import frappe from 'frappejs';
 import utils from '../../../accounting/utils';
-import { openQuickEdit } from '@/utils';
+import { openQuickEdit, getStatusAndColor } from '@/utils';
 import Badge from '@/components/Badge';
 
 export function getStatusColumn() {
@@ -9,16 +9,7 @@ export function getStatusColumn() {
     fieldname: 'status',
     fieldtype: 'Select',
     render(doc) {
-      let status = 'Unpaid';
-      let color = 'orange';
-      if (!doc.submitted) {
-        status = 'Draft';
-        color = 'gray';
-      }
-      if (doc.submitted === 1 && doc.outstandingAmount === 0.0) {
-        status = 'Paid';
-        color = 'green';
-      }
+      const { status, color } = getStatusAndColor(doc);
       return {
         template: `<Badge class="text-xs" color="${color}">${status}</Badge>`,
         components: { Badge },
@@ -81,6 +72,6 @@ export function getActions(doctype) {
 }
 
 export default {
-  getStatusColumn,  
-  getActions
-}
+  getStatusColumn,
+  getActions,
+};

src/pages/InvoiceForm.vue

@@ -3,6 +3,9 @@
     <PageHeader>
       <BackLink slot="title" />
       <template slot="actions">
+        <Badge class="text-xs flex-center px-3 ml-2" :color="color">{{
+          status
+        }}</Badge>
         <Button
           v-if="doc.submitted"
           class="text-gray-900 text-xs ml-2"
@@ -75,8 +78,10 @@
                   :df="meta.getField(partyField.fieldname)"
                   :value="doc[partyField.fieldname]"
                   :placeholder="partyField.label"
-                  @change="value => doc.set(partyField.fieldname, value)"
-                  @new-doc="party => doc.set(partyField.fieldname, party.name)"
+                  @change="(value) => doc.set(partyField.fieldname, value)"
+                  @new-doc="
+                    (party) => doc.set(partyField.fieldname, party.name)
+                  "
                   :read-only="doc.submitted"
                 />
                 <FormControl
@@ -85,7 +90,7 @@
                   :df="meta.getField('account')"
                   :value="doc.account"
                   :placeholder="'Account'"
-                  @change="value => doc.set('account', value)"
+                  @change="(value) => doc.set('account', value)"
                   :read-only="doc.submitted"
                 />
               </div>
@@ -95,7 +100,7 @@
                   :df="meta.getField('date')"
                   :value="doc.date"
                   :placeholder="'Date'"
-                  @change="value => doc.set('date', value)"
+                  @change="(value) => doc.set('date', value)"
                   :read-only="doc.submitted"
                 />
               </div>
@@ -107,7 +112,7 @@
               :value="doc.items"
               :showHeader="true"
               :max-rows-before-overflow="4"
-              @change="value => doc.set('items', value)"
+              @change="(value) => doc.set('items', value)"
               :read-only="doc.submitted"
             />
           </div>
@@ -123,7 +128,7 @@
               :value="doc.terms"
               :show-label="true"
               input-class="bg-gray-100"
-              @change="value => doc.set('terms', value)"
+              @change="(value) => doc.set('terms', value)"
               :read-only="doc.submitted"
             />
           </div>
@@ -142,13 +147,22 @@
                 {{
                   frappe.format(tax.amount, {
                     fieldtype: 'Currency',
-                    currency: doc.currency
+                    currency: doc.currency,
                   })
                 }}
               </div>
             </div>
             <div
-              class="flex pl-2 justify-between py-3 border-t text-green-600 font-semibold text-base"
+              class="
+                flex
+                pl-2
+                justify-between
+                py-3
+                border-t
+                text-green-600
+                font-semibold
+                text-base
+              "
             >
               <div>{{ _('Grand Total') }}</div>
               <div>{{ formattedValue('grandTotal') }}</div>
@@ -161,16 +175,17 @@
 </template>
 <script>
 import frappe from 'frappejs';
+import Badge from '@/components/Badge';
 import PageHeader from '@/components/PageHeader';
 import Button from '@/components/Button';
 import FormControl from '@/components/Controls/FormControl';
 import DropdownWithActions from '@/components/DropdownWithActions';
 import BackLink from '@/components/BackLink';
-import { openSettings } from '@/utils';
+import { openSettings, getStatusAndColor } from '@/utils';
 import {
   handleErrorWithDialog,
   getActionsForDocument,
-  showMessageDialog
+  showMessageDialog,
 } from '@/utils';
 
 export default {
@@ -178,22 +193,25 @@ export default {
   props: ['doctype', 'name'],
   components: {
     PageHeader,
+    Badge,
     Button,
     FormControl,
     DropdownWithActions,
-    BackLink
+    BackLink,
   },
   provide() {
     return {
       doctype: this.doctype,
-      name: this.name
+      name: this.name,
     };
   },
   data() {
     return {
       doc: null,
+      status: null,
+      color: null,
       printSettings: null,
-      companyName: null
+      companyName: null,
     };
   },
   computed: {
@@ -203,7 +221,7 @@ export default {
     partyField() {
       let fieldname = {
         SalesInvoice: 'customer',
-        PurchaseInvoice: 'supplier'
+        PurchaseInvoice: 'supplier',
       }[this.doctype];
       return this.meta.getField(fieldname);
     },
@@ -215,7 +233,7 @@ export default {
     },
     actions() {
       return getActionsForDocument(this.doc);
-    }
+    },
   },
   async mounted() {
     try {
@@ -238,11 +256,14 @@ export default {
       this.doc.set(this.$router.currentRoute.query.values);
     }
   },
+  updated() {
+    this.setStatus();
+  },
   methods: {
     async onSaveClick() {
       await this.doc.set(
         'items',
-        this.doc.items.filter(row => row.item)
+        this.doc.items.filter((row) => row.item)
       );
       return this.doc.insertOrUpdate().catch(this.handleError);
     },
@@ -258,13 +279,13 @@ export default {
             label: this._('Submit'),
             action: () => {
               this.doc.submit().catch(this.handleError);
-            }
+            },
           },
           {
             label: this._('Cancel'),
-            action() {}
-          }
-        ]
+            action() {},
+          },
+        ],
       });
     },
     handleError(e) {
@@ -282,7 +303,12 @@ export default {
       }
       let df = doc.meta.getField(fieldname);
       return frappe.format(doc[fieldname], df, doc);
-    }
-  }
+    },
+    setStatus() {
+      const { status, color } = getStatusAndColor(this.doc);
+      this.status = status;
+      this.color = color;
+    },
+  },
 };
 </script>

src/utils.js

@@ -264,4 +264,18 @@ export async function runWindowAction(name) {
       break;
   }
   return name;
-}
+}
+
+export function getStatusAndColor(doc) {
+  let status = 'Unpaid';
+  let color = 'orange';
+  if (!doc.submitted) {
+    status = 'Draft';
+    color = 'gray';
+  }
+  if (doc.submitted === 1 && doc.outstandingAmount === 0.0) {
+    status = 'Paid';
+    color = 'green';
+  }
+  return { status, color };
+}