refactor: move color stuff to colors.js

models/doctype/Transaction/Transaction.js

@@ -1,7 +1,8 @@
+import Badge from '@/components/Badge';
+import { getInvoiceStatus, openQuickEdit, routeTo } from '@/utils';
 import frappe from 'frappejs';
 import utils from '../../../accounting/utils';
-import { openQuickEdit, getInvoiceStatus, statusColor, routeTo } from '@/utils';
-import Badge from '@/components/Badge';
+import { statusColor } from '../../../src/colors';
 
 export function getStatusColumn() {
   return {

src/colors.js

@@ -0,0 +1,26 @@
+export const statusColor = {
+  Draft: 'gray',
+  Unpaid: 'orange',
+  Paid: 'green',
+  Cancelled: 'red',
+};
+
+const getValidColor = (color) => {
+  const isValid = ['gray', 'orange', 'green', 'red', 'yellow', 'blue'].includes(
+    color
+  );
+  return isValid ? color : 'gray';
+};
+
+export function getBgColorClass(color) {
+  return `bg-${getValidColor(color)}-100`;
+}
+export function getTextColorClass(color) {
+  return `text-${getValidColor(color)}-600`;
+}
+
+export function getColorClass(color) {
+  const bg = getBgColorClass(color);
+  const text = getTextColorClass(color);
+  return [bg, text].join(' ');
+}

src/components/Badge.vue

@@ -1,31 +1,23 @@
 <template>
-  <div
-    class="inline-block rounded-md px-2 py-1 truncate"
-    :class="getColorClass"
-  >
+  <div class="inline-block rounded-md px-2 py-1 truncate" :class="colorClass">
     <slot></slot>
   </div>
 </template>
 
 <script>
+import { getColorClass } from '../colors';
+
 export default {
   name: 'Badge',
   props: {
     color: {
-      default: 'gray'
-    }
+      default: 'gray',
+    },
   },
   computed: {
-    getColorClass() {
-      return {
-        gray: 'bg-gray-100 text-gray-600',
-        red: 'bg-red-100 text-red-600',
-        yellow: 'bg-yellow-100 text-yellow-600',
-        orange: 'bg-orange-100 text-orange-600',
-        blue: 'bg-blue-100 text-blue-600',
-        green: 'bg-green-100 text-green-600'
-      }[this.color];
-    }
-  }
+    colorClass() {
+      return getColorClass(this.color);
+    },
+  },
 };
 </script>

src/components/StatusBadge.vue

@@ -4,7 +4,7 @@
   }}</Badge>
 </template>
 <script>
-import { statusColor } from '@/utils';
+import { statusColor } from '../colors';
 import Badge from '@/components/Badge';
 
 export default {

src/utils.js

@@ -257,13 +257,6 @@ export async function runWindowAction(name) {
   return name;
 }
 
-export const statusColor = {
-  Draft: 'gray',
-  Unpaid: 'orange',
-  Paid: 'green',
-  Cancelled: 'red',
-};
-
 export function getInvoiceStatus(doc) {
   let status = 'Unpaid';
   if (!doc.submitted) {
@@ -349,6 +342,7 @@ export function showToast(props) {
     },
   });
 }
+window.showToast = showToast;
 
 export function titleCase(phrase) {
   return phrase