From 7b69dbbfb181b1440cc6c81437fa56f96a56eea6 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 14 May 2025 16:55:19 +0530
Subject: [PATCH] fix: update mandatory field indicator color and replace
 FormControl with FormattedInput for various field types

(cherry picked from commit afe828f01206c22c1f3679f9ab7663b5b9887653)
---
 frontend/src/components/Controls/Grid.vue     |  8 ++++++++
 frontend/src/components/FieldLayout/Field.vue | 11 ++++++-----
 frontend/src/components/SidePanelLayout.vue   | 13 +++++++------
 3 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/Controls/Grid.vue b/frontend/src/components/Controls/Grid.vue
index 7255c309..e08cdd7d 100644
--- a/frontend/src/components/Controls/Grid.vue
+++ b/frontend/src/components/Controls/Grid.vue
@@ -42,6 +42,14 @@
             :title="field.label"
           >
             {{ __(field.label) }}
+            <span
+              v-if="
+                field.reqd ||
+                (field.mandatory_depends_on && field.mandatory_via_depends_on)
+              "
+              class="text-ink-red-2"
+              >*</span
+            >
           </div>
         </div>
         <div class="w-12">
diff --git a/frontend/src/components/FieldLayout/Field.vue b/frontend/src/components/FieldLayout/Field.vue
index a598bb39..92ce15f8 100644
--- a/frontend/src/components/FieldLayout/Field.vue
+++ b/frontend/src/components/FieldLayout/Field.vue
@@ -7,7 +7,7 @@
           field.reqd ||
           (field.mandatory_depends_on && field.mandatory_via_depends_on)
         "
-        class="text-ink-red-3"
+        class="text-ink-red-2"
         >*</span
       >
     </div>
@@ -161,7 +161,7 @@
       :description="field.description"
       @change="fieldChange($event.target.value, field)"
     />
-    <FormControl
+    <FormattedInput
       v-else-if="['Int'].includes(field.fieldtype)"
       type="number"
       :placeholder="getPlaceholder(field)"
@@ -170,7 +170,7 @@
       :description="field.description"
       @change="fieldChange($event.target.value, field)"
     />
-    <FormControl
+    <FormattedInput
       v-else-if="field.fieldtype === 'Percent'"
       type="text"
       :value="getFormattedPercent(field.fieldname, data)"
@@ -179,7 +179,7 @@
       :description="field.description"
       @change="fieldChange(flt($event.target.value), field)"
     />
-    <FormControl
+    <FormattedInput
       v-else-if="field.fieldtype === 'Float'"
       type="text"
       :value="getFormattedFloat(field.fieldname, data)"
@@ -188,7 +188,7 @@
       :description="field.description"
       @change="fieldChange(flt($event.target.value), field)"
     />
-    <FormControl
+    <FormattedInput
       v-else-if="field.fieldtype === 'Currency'"
       type="text"
       :value="getFormattedCurrency(field.fieldname, data, parentDoc)"
@@ -209,6 +209,7 @@
   </div>
 </template>
 <script setup>
+import FormattedInput from '@/components/Controls/FormattedInput.vue'
 import EditIcon from '@/components/Icons/EditIcon.vue'
 import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
diff --git a/frontend/src/components/SidePanelLayout.vue b/frontend/src/components/SidePanelLayout.vue
index fe8f6313..6727af40 100644
--- a/frontend/src/components/SidePanelLayout.vue
+++ b/frontend/src/components/SidePanelLayout.vue
@@ -53,7 +53,7 @@
                             (field.mandatory_depends_on &&
                               field.mandatory_via_depends_on)
                           "
-                          class="text-ink-red-3"
+                          class="text-ink-red-2"
                           >*</span
                         >
                       </div>
@@ -254,7 +254,7 @@
                             @change="(v) => fieldChange(v, field)"
                           />
                         </div>
-                        <FormControl
+                        <FormattedInput
                           v-else-if="field.fieldtype === 'Percent'"
                           class="form-control"
                           type="text"
@@ -267,16 +267,16 @@
                             fieldChange(flt($event.target.value), field)
                           "
                         />
-                        <FormControl
+                        <FormattedInput
                           v-else-if="field.fieldtype === 'Int'"
                           class="form-control"
-                          type="number"
+                          type="text"
                           v-model="document.doc[field.fieldname]"
                           :placeholder="field.placeholder"
                           :debounce="500"
                           @change.stop="fieldChange($event.target.value, field)"
                         />
-                        <FormControl
+                        <FormattedInput
                           v-else-if="field.fieldtype === 'Float'"
                           class="form-control"
                           type="text"
@@ -289,7 +289,7 @@
                             fieldChange(flt($event.target.value), field)
                           "
                         />
-                        <FormControl
+                        <FormattedInput
                           v-else-if="field.fieldtype === 'Currency'"
                           class="form-control"
                           type="text"
@@ -355,6 +355,7 @@
 </template>
 
 <script setup>
+import FormattedInput from '@/components/Controls/FormattedInput.vue'
 import Section from '@/components/Section.vue'
 import NestedPopover from '@/components/NestedPopover.vue'
 import DropdownItem from '@/components/DropdownItem.vue'