Status indicator in list

models/doctype/Invoice/InvoiceList.js

@@ -1,4 +1,5 @@
 import { _ } from 'frappejs/utils';
+import indicators from 'frappejs/ui/constants/indicators';
 
 export default {
   doctype: 'Invoice',
@@ -8,7 +9,16 @@ export default {
     {
       label: 'Status',
       getValue(doc) {
-        return doc.submitted ? 'Paid' : 'Pending';
+        if (doc.submitted === 1 && doc.outstandingAmount === 0.0) {
+          return 'Paid';
+        }
+        return 'Pending';
+      },
+      getIndicator(doc) {
+        if (doc.submitted === 1 && doc.outstandingAmount === 0.0) {
+          return indicators.GREEN;
+        }
+        return indicators.ORANGE;
       }
     },
     'grandTotal',

src/pages/ListView/List.vue

@@ -6,8 +6,9 @@
       </list-cell>
     </list-row>
     <list-row v-for="doc in data" :key="doc.name" @click.native="openForm(doc.name)">
-      <list-cell v-for="column in columns" :key="column.label">
-        {{ frappe.format(column.getValue(doc), column.fieldtype || {}) }}
+      <list-cell v-for="column in columns" :key="column.label" class="d-flex align-items-center">
+        <indicator v-if="column.getIndicator" :color="column.getIndicator(doc)" class="mr-2" />
+        <span>{{ frappe.format(column.getValue(doc), column.fieldtype || {}) }}</span>
       </list-cell>
     </list-row>
   </div>