Indicators

- Replace hardcoded color values with constants
- Add remaining color styles in Indicator component
- Show Indicator in List View

model/meta.js

@@ -1,6 +1,7 @@
 const BaseDocument = require('./document');
 const frappe = require('frappejs');
 const model = require('./index')
+const indicatorColor = require('frappejs/ui/constants/indicators');
 
 module.exports = class BaseMeta extends BaseDocument {
     constructor(data) {
@@ -185,8 +186,8 @@ module.exports = class BaseMeta extends BaseDocument {
                 this.indicators = {
                     key: 'submitted',
                     colors: {
-                        0: 'gray',
-                        1: 'blue'
+                        0: indicatorColor.GRAY,
+                        1: indicatorColor.BLUE
                     }
                 }
             }
@@ -195,17 +196,17 @@ module.exports = class BaseMeta extends BaseDocument {
 
     getIndicatorColor(doc) {
         if (frappe.isDirty(this.name, doc.name)) {
-            return 'orange';
+            return indicatorColor.ORANGE;
         } else {
             if (this.indicators) {
                 let value = doc[this.indicators.key];
                 if (value) {
-                    return this.indicators.colors[value] || 'gray';
+                    return this.indicators.colors[value] || indicatorColor.GRAY;
                 } else {
-                    return 'gray';
+                    return indicatorColor.GRAY;
                 }
             } else {
-                return 'gray';
+                return indicatorColor.GRAY;
             }
         }
     }

models/doctype/ToDo/ToDo.js

@@ -1,3 +1,5 @@
+const indicatorColor = require('frappejs/ui/constants/indicators');
+
 module.exports = {
     name: "ToDo",
     label: "To Do",
@@ -14,8 +16,8 @@ module.exports = {
     indicators: {
         key: 'status',
         colors: {
-            Open: 'gray',
-            Closed: 'green'
+            Open: indicatorColor.BLUE,
+            Closed: indicatorColor.GREEN
         }
     },
     "fields": [

ui/components/Indicator.vue

@@ -2,8 +2,24 @@
     <span :class="['indicator', 'indicator-' + color]"></span>
 </template>
 <script>
+import indicatorColor from 'frappejs/ui/constants/indicators';
+
 export default {
-    props: ['color']
+    props: {
+        color: {
+            type: String,
+            required: true,
+            default: indicatorColor.GREY,
+            validator(value) {
+                const validColors = Object.values(indicatorColor);
+                const valid = validColors.includes(value);
+                if (!valid) {
+                    console.warn(`color must be one of `, validColors);
+                }
+                return valid;
+            }
+        }
+    }
 }
 </script>
 
@@ -14,11 +30,31 @@ export default {
     display: inline-block;
     width: 0.5rem;
     height: 0.5rem;
-    background-color: $gray-400;
     border-radius: 50%;
 }
 
+.indicator-grey {
+    background-color: $gray-300;
+}
 .indicator-blue {
-    background-color: $primary;
+    background-color: $blue;
+}
+.indicator-red {
+    background-color: $red;
+}
+.indicator-green {
+    background-color: $green;
+}
+.indicator-orange {
+    background-color: $orange;
+}
+.indicator-purple {
+    background-color: $purple;
+}
+.indicator-yellow {
+    background-color: $yellow;
+}
+.indicator-black {
+    background-color: $gray-800;
 }
 </style>

ui/components/List/List.vue

@@ -12,8 +12,12 @@
                     :isActive="doc.name === $route.params.name"
                     :isChecked="isChecked(doc.name)"
                     @clickItem="openForm(doc.name)"
-                    @checkItem="toggleCheck(doc.name)">
-                    {{ doc[meta.titleField || 'name'] }}
+                    @checkItem="toggleCheck(doc.name)"
+                >
+                    <indicator v-if="hasIndicator" :color="getIndicatorColor(doc)" />
+                    <span class="d-inline-block ml-2">
+                        {{ doc[meta.titleField || 'name'] }}
+                    </span>
                 </list-item>
             </ul>
         </div>
@@ -27,20 +31,23 @@ export default {
   name: 'List',
   props: ['doctype', 'filters'],
   components: {
-      ListActions,
-      ListItem
+    ListActions,
+    ListItem
   },
   data() {
-      return {
-        data: [],
-        checkList: [],
-        activeItem: ''
-      }
+    return {
+      data: [],
+      checkList: [],
+      activeItem: ''
+    };
   },
   computed: {
-      meta() {
-          return frappe.getMeta(this.doctype);
-      }
+    meta() {
+      return frappe.getMeta(this.doctype);
+    },
+    hasIndicator() {
+      return Boolean(this.meta.indicators);
+    }
   },
   created() {
     frappe.db.on(`change:${this.doctype}`, () => {
@@ -52,21 +59,29 @@ export default {
   },
   methods: {
     async newDoc() {
-        let doc = await frappe.getNewDoc(this.doctype);
-        this.$router.push(`/edit/${this.doctype}/${doc.name}`);
+      let doc = await frappe.getNewDoc(this.doctype);
+      this.$router.push(`/edit/${this.doctype}/${doc.name}`);
     },
     async updateList() {
+      const indicatorField = this.hasIndicator ? this.meta.indicators.key : null;
+      const fields = [
+        'name',
+        indicatorField,
+        this.meta.titleField,
+        ...this.meta.keywordFields
+      ].filter(Boolean);
+
       const data = await frappe.db.getAll({
         doctype: this.doctype,
-        fields: ['name', ...this.meta.keywordFields, this.meta.titleField],
+        fields,
         filters: this.filters || null
       });
 
       this.data = data;
     },
     openForm(name) {
-        this.activeItem = name;
-        this.$router.push(`/edit/${this.doctype}/${name}`);
+      this.activeItem = name;
+      this.$router.push(`/edit/${this.doctype}/${name}`);
     },
     async deleteCheckedItems() {
       await frappe.db.deleteMany(this.doctype, this.checkList);
@@ -74,31 +89,34 @@ export default {
     },
     toggleCheck(name) {
       if (this.checkList.includes(name)) {
-          this.checkList = this.checkList.filter(docname => docname !== name);
+        this.checkList = this.checkList.filter(docname => docname !== name);
       } else {
-          this.checkList = this.checkList.concat(name);
+        this.checkList = this.checkList.concat(name);
       }
     },
     isChecked(name) {
       return this.checkList.includes(name);
+    },
+    getIndicatorColor(doc) {
+      return this.meta.getIndicatorColor(doc);
     }
   }
-}
+};
 </script>
 <style lang="scss" scoped>
 @import "../../styles/variables";
 
 .list-group-item {
-    border-left: none;
-    border-right: none;
-    border-radius: 0;
+  border-left: none;
+  border-right: none;
+  border-radius: 0;
 }
 
 .list-group-item:first-child {
-    border-top: none;
+  border-top: none;
 }
 
 .list-group-item:not(.active):hover {
-    background-color: $light;
+  background-color: $light;
 }
 </style>

ui/constants/indicators.js

@@ -0,0 +1,11 @@
+module.exports = {
+    GRAY: 'grey',
+    GREY: 'grey',
+    BLUE: 'blue',
+    RED: 'red',
+    GREEN: 'green',
+    ORANGE: 'orange',
+    PURPLE: 'purple',
+    YELLOW: 'yellow',
+    BLACK: 'black',
+}