refactor: move field evaluations to Base.vue

- minor style updates

src/components/Controls/Base.vue

@@ -6,6 +6,7 @@
     <input
       spellcheck="false"
       ref="input"
+      class="bg-transparent"
       :class="[inputClasses, containerClasses]"
       :type="inputType"
       :value="value"
@@ -22,6 +23,8 @@
 
 <script>
 import { isNumeric } from 'src/utils';
+import { evaluateReadOnly, evaluateRequired } from 'src/utils/doc';
+import { getIsNullOrUndef } from 'utils/index';
 
 export default {
   name: 'Base',
@@ -33,8 +36,9 @@ export default {
     placeholder: String,
     size: String,
     showLabel: Boolean,
-    readOnly: Boolean,
     autofocus: Boolean,
+    readOnly: { type: [null, Boolean], default: null },
+    required: { type: [null, Boolean], default: null },
   },
   emits: ['focus', 'input', 'change'],
   inject: {
@@ -93,7 +97,7 @@ export default {
     containerClasses() {
       /**
        * Used to accomodate extending compoents where the input is contained in
-       * a div eg * AutoComplete
+       * a div eg AutoComplete
        */
       const classes = ['rounded'];
       if (!this.isReadOnly) {
@@ -101,7 +105,7 @@ export default {
       }
 
       if (this.border) {
-        classes.push('bg-gray-50');
+        classes.push('bg-gray-50 border border-gray-200');
       }
 
       return classes;
@@ -109,12 +113,33 @@ export default {
     inputPlaceholder() {
       return this.placeholder || this.df.placeholder || this.df.label;
     },
+    showMandatory() {
+      return this.isEmpty && this.isRequired;
+    },
+    isEmpty() {
+      if (typeof this.value === 'string' && !this.value) {
+        return true;
+      }
+
+      if (getIsNullOrUndef(this.value)) {
+        return true;
+      }
+
+      return false;
+    },
     isReadOnly() {
-      if (this.readOnly != null) {
+      if (typeof this.readOnly === 'boolean') {
         return this.readOnly;
       }
 
-      return this.df.readOnly;
+      return evaluateReadOnly(this.df, this.doc);
+    },
+    isRequired() {
+      if (typeof this.required === 'boolean') {
+        return this.required;
+      }
+
+      return evaluateRequired(this.df, this.doc);
     },
   },
   methods: {

src/components/Controls/Currency.vue

@@ -63,6 +63,10 @@ export default {
       this.triggerChange(value);
     },
     activateInput() {
+      if (this.isReadOnly) {
+        return;
+      }
+
       this.showInput = true;
       nextTick(() => {
         this.focus();

src/components/Controls/Date.vue

@@ -1,16 +1,12 @@
 <template>
-  <div :class="containerClasses">
+  <div>
     <div class="text-gray-600 text-sm mb-1" v-if="showLabel">
       {{ df.label }}
     </div>
 
     <DatePicker
       ref="input"
-      :input-class="[
-        'cursor-text bg-transparent',
-        inputClasses,
-        containerClasses,
-      ]"
+      :input-class="['bg-transparent', inputClasses, containerClasses]"
       :value="value"
       :placeholder="inputPlaceholder"
       :readonly="isReadOnly"

src/components/Controls/TableRow.vue

@@ -5,7 +5,7 @@
       w-full
       px-2
       border-b
-      hover:bg-gray-50
+      hover:bg-gray-25
       group
       flex
       items-center
@@ -32,8 +32,6 @@
     <FormControl
       v-for="df in tableFields"
       :size="size"
-      :read-only="readOnly"
-      input-class="bg-transparent"
       :key="df.fieldname"
       :df="df"
       :value="row[df.fieldname]"

src/components/TwoColumnForm.vue

@@ -9,7 +9,6 @@
         size="small"
         :df="df"
         :value="doc[df.fieldname]"
-        :read-only="evaluateReadOnly(df)"
         @change="async (value) => await onChange(df, value)"
       />
 
@@ -79,7 +78,6 @@
             :df="df"
             :value="getRegularValue(df)"
             :class="{ 'p-2': df.fieldtype === 'Check' }"
-            :read-only="evaluateReadOnly(df)"
             @change="async (value) => await onChange(df, value)"
             @focus="activateInlineEditing(df)"
             @new-doc="async (newdoc) => await onChange(df, newdoc.name)"
@@ -102,7 +100,7 @@ import FormControl from 'src/components/Controls/FormControl.vue';
 import { handleErrorWithDialog } from 'src/errorHandling';
 import { fyo } from 'src/initFyo';
 import { getErrorMessage } from 'src/utils';
-import { evaluateHidden, evaluateReadOnly } from 'src/utils/doc';
+import { evaluateHidden } from 'src/utils/doc';
 
 export default {
   name: 'TwoColumnForm',
@@ -182,9 +180,6 @@ export default {
         this.inlineEditField?.fieldname === df?.fieldname && this.inlineEditDoc
       );
     },
-    evaluateReadOnly(df) {
-      return evaluateReadOnly(df, this.doc);
-    },
     async onChange(df, value) {
       if (df.inline) {
         return;

src/pages/Report.vue

@@ -14,7 +14,7 @@
     </PageHeader>
 
     <!-- Filters -->
-    <div v-if="report" class="grid grid-cols-5 gap-2 p-4 border-b">
+    <div v-if="report" class="grid grid-cols-5 gap-4 p-4 border-b">
       <FormControl
         v-for="field in report.filters"
         :border="true"

src/utils/doc.ts

@@ -1,42 +1,46 @@
 import { Doc } from 'fyo/model/doc';
 import { Field } from 'schemas/types';
 
-export function evaluateReadOnly(field: Field, doc: Doc) {
-  if (field.fieldname === 'numberSeries' && !doc.notInserted) {
+export function evaluateReadOnly(field: Field, doc?: Doc) {
+  if (field.fieldname === 'numberSeries' && !doc?.notInserted) {
     return true;
   }
 
-  if (doc.isSubmitted || doc.parentdoc?.isSubmitted) {
+  if (doc?.isSubmitted || doc?.parentdoc?.isSubmitted) {
     return true;
   }
 
-  if (doc.isCancelled || doc.parentdoc?.isCancelled) {
+  if (doc?.isCancelled || doc?.parentdoc?.isCancelled) {
     return true;
   }
 
   return evaluateFieldMeta(field, doc, 'readOnly');
 }
 
-export function evaluateHidden(field: Field, doc: Doc) {
+export function evaluateHidden(field: Field, doc?: Doc) {
   return evaluateFieldMeta(field, doc, 'hidden');
 }
 
-export function evaluateRequired(field: Field, doc: Doc) {
+export function evaluateRequired(field: Field, doc?: Doc) {
   return evaluateFieldMeta(field, doc, 'required');
 }
 
 function evaluateFieldMeta(
   field: Field,
-  doc: Doc,
-  meta: 'required' | 'hidden' | 'readOnly',
+  doc?: Doc,
+  meta?: 'required' | 'hidden' | 'readOnly',
   defaultValue: boolean = false
 ) {
+  if (meta === undefined) {
+    return defaultValue;
+  }
+
   const value = field[meta];
   if (value !== undefined) {
     return value;
   }
 
-  const hiddenFunction = doc[meta][field.fieldname];
+  const hiddenFunction = doc?.[meta]?.[field.fieldname];
   if (hiddenFunction !== undefined) {
     return hiddenFunction();
   }