fix(ui): show draft status for JE and non-submitables, set Cash as default

models/doctype/Payment/Payment.js

@@ -74,6 +74,7 @@ export default {
       placeholder: 'Payment Method',
       fieldtype: 'Select',
       options: ['', 'Cash', 'Cheque', 'Transfer'],
+      default: 'Cash',
       required: 1,
     },
     {

models/doctype/Transaction/Transaction.js

@@ -1,6 +1,6 @@
 import frappe from 'frappejs';
 import utils from '../../../accounting/utils';
-import { openQuickEdit, getStatusAndColor } from '@/utils';
+import { openQuickEdit, getInvoiceStatus, statusColor } from '@/utils';
 import Badge from '@/components/Badge';
 
 export function getStatusColumn() {
@@ -9,7 +9,8 @@ export function getStatusColumn() {
     fieldname: 'status',
     fieldtype: 'Select',
     render(doc) {
-      const { status, color } = getStatusAndColor(doc);
+      const status = getInvoiceStatus(doc);
+      const color = statusColor[status];
       return {
         template: `<Badge class="text-xs" color="${color}">${status}</Badge>`,
         components: { Badge },

src/components/StatusBadge.vue

@@ -0,0 +1,23 @@
+<template>
+  <Badge class="text-xs flex-center px-3 ml-2" :color="color" v-if="status">{{
+    status
+  }}</Badge>
+</template>
+<script>
+import frappe from 'frappejs';
+import { statusColor } from '@/utils';
+import Badge from '@/components/Badge';
+
+export default {
+  name: 'StatusBadge',
+  props: ['status'],
+  components: {
+    Badge,
+  },
+  computed: {
+    color() {
+      return statusColor[this.status];
+    },
+  },
+};
+</script>

src/pages/InvoiceForm.vue

@@ -3,9 +3,7 @@
     <PageHeader>
       <BackLink slot="title" />
       <template slot="actions">
-        <Badge class="text-xs flex-center px-3 ml-2" :color="color">{{
+        <StatusBadge :status="status" />
-          status
-        }}</Badge>
         <Button
           v-if="doc.submitted"
           class="text-gray-900 text-xs ml-2"
@@ -175,16 +173,17 @@
 </template>
 <script>
 import frappe from 'frappejs';
-import Badge from '@/components/Badge';
+import StatusBadge from '@/components/StatusBadge';
 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, getStatusAndColor } from '@/utils';
 import {
+  openSettings,
   handleErrorWithDialog,
   getActionsForDocument,
+  getInvoiceStatus,
   showMessageDialog,
 } from '@/utils';
 
@@ -193,7 +192,7 @@ export default {
   props: ['doctype', 'name'],
   components: {
     PageHeader,
-    Badge,
+    StatusBadge,
     Button,
     FormControl,
     DropdownWithActions,
@@ -255,9 +254,10 @@ export default {
     if (query.values && query.doctype === this.doctype) {
       this.doc.set(this.$router.currentRoute.query.values);
     }
+    this.status = getInvoiceStatus(this.doc);
   },
   updated() {
-    this.setStatus();
+    this.status = getInvoiceStatus(this.doc);
   },
   methods: {
     async onSaveClick() {
@@ -304,11 +304,6 @@ 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/pages/JournalEntryForm.vue

@@ -3,6 +3,7 @@
     <PageHeader>
       <BackLink slot="title" />
       <template slot="actions" v-if="doc">
+        <StatusBadge :status="status" />
         <DropdownWithActions class="ml-2" :actions="actions" />
         <Button
           v-if="doc._notInserted || doc._dirty"
@@ -38,7 +39,7 @@
                   :df="meta.getField('entryType')"
                   :value="doc.entryType"
                   placeholder="Entry Type"
-                  @change="value => doc.set('entryType', value)"
+                  @change="(value) => doc.set('entryType', value)"
                   input-class="bg-gray-100 px-3 py-2 text-base"
                   :show-label="true"
                   :read-only="doc.submitted"
@@ -49,7 +50,7 @@
                   :df="meta.getField('date')"
                   :value="doc.date"
                   :placeholder="'Date'"
-                  @change="value => doc.set('date', value)"
+                  @change="(value) => doc.set('date', value)"
                   input-class="bg-gray-100 px-3 py-2 text-base"
                   :show-label="true"
                   :read-only="doc.submitted"
@@ -61,7 +62,7 @@
                   :df="meta.getField('referenceNumber')"
                   :value="doc.referenceNumber"
                   :placeholder="'Reference Number'"
-                  @change="value => doc.set('referenceNumber', value)"
+                  @change="(value) => doc.set('referenceNumber', value)"
                   input-class="bg-gray-100 p-2 text-base"
                   :show-label="true"
                   :read-only="doc.submitted"
@@ -72,7 +73,7 @@
                   :df="meta.getField('referenceDate')"
                   :value="doc.date"
                   :placeholder="'Reference Date'"
-                  @change="value => doc.set('referenceDate', value)"
+                  @change="(value) => doc.set('referenceDate', value)"
                   input-class="bg-gray-100 px-3 py-2 text-base"
                   :show-label="true"
                   :read-only="doc.submitted"
@@ -87,7 +88,7 @@
               :value="doc.accounts"
               :showHeader="true"
               :max-rows-before-overflow="4"
-              @change="value => doc.set('accounts', value)"
+              @change="(value) => doc.set('accounts', value)"
               :read-only="doc.submitted"
             />
           </div>
@@ -101,7 +102,7 @@
               <FormControl
                 :df="meta.getField('userRemark')"
                 :value="doc.userRemark"
-                @change="value => doc.set('userRemark', value)"
+                @change="(value) => doc.set('userRemark', value)"
                 :class="doc.submitted && 'pointer-events-none'"
                 :read-only="doc.submitted"
               />
@@ -125,6 +126,7 @@ import Button from '@/components/Button';
 import DropdownWithActions from '@/components/DropdownWithActions';
 import FormControl from '@/components/Controls/FormControl';
 import BackLink from '@/components/BackLink';
+import StatusBadge from '@/components/StatusBadge';
 import { handleErrorWithDialog, getActionsForDocument } from '@/utils';
 
 export default {
@@ -134,25 +136,33 @@ export default {
     PageHeader,
     Button,
     DropdownWithActions,
+    StatusBadge,
     FormControl,
-    BackLink
+    BackLink,
   },
   provide() {
     return {
       doctype: 'JournalEntry',
-      name: this.name
+      name: this.name,
     };
   },
   data() {
     return {
       doctype: 'JournalEntry',
-      doc: null
+      doc: null,
     };
   },
   computed: {
     meta() {
       return frappe.getMeta(this.doctype);
     },
+    status() {
+      if (this.doc._notInserted || !this.doc.submitted) {
+        return 'Draft';
+      }
+
+      return '';
+    },
     totalDebit() {
       let value = 0;
       if (this.doc.accounts) {
@@ -169,7 +179,7 @@ export default {
     },
     actions() {
       return getActionsForDocument(this.doc);
-    }
+    },
   },
   async mounted() {
     try {
@@ -192,7 +202,7 @@ export default {
     },
     handleError(e) {
       handleErrorWithDialog(e, this.doc);
-    }
+    },
-  }
+  },
 };
 </script>

src/pages/QuickEditForm.vue

@@ -11,6 +11,7 @@
       </div>
       <div class="flex items-stretch">
         <DropdownWithActions :actions="actions" />
+        <StatusBadge :status="status" />
         <Button
           :icon="true"
           @click="insertDoc"
@@ -78,6 +79,7 @@
 import frappe from 'frappejs';
 import { _ } from 'frappejs';
 import Button from '@/components/Button';
+import StatusBadge from '@/components/StatusBadge';
 import FormControl from '@/components/Controls/FormControl';
 import TwoColumnForm from '@/components/TwoColumnForm';
 import DropdownWithActions from '@/components/DropdownWithActions';
@@ -93,6 +95,7 @@ export default {
   components: {
     Button,
     FormControl,
+    StatusBadge,
     TwoColumnForm,
     DropdownWithActions,
   },
@@ -121,6 +124,12 @@ export default {
     meta() {
       return frappe.getMeta(this.doctype);
     },
+    status() {
+      if (this.doc && this.doc._notInserted) {
+        return "Draft";
+      }
+      return "";
+    },
     fields() {
       return this.meta
         .getQuickEditFields()

src/utils.js

@@ -266,16 +266,19 @@ export async function runWindowAction(name) {
   return name;
 }
 
-export function getStatusAndColor(doc) {
+export const statusColor = {
+  Draft: 'gray',
+  Unpaid: 'orange',
+  Paid: 'green',
+};
+
+export function getInvoiceStatus(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 };
+  return status;
 }