fix: better placeholder in modal, also show placeholder for select fi…

…eld in side panel
metalmon · Sep 30, 2024 · e5fd005 · e5fd005
1 parent 8170c83
commit e5fd005
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 11 deletions.
diff --git a/crm/api/doc.py b/crm/api/doc.py
@@ -617,6 +617,7 @@ def get_field_obj(field):
 		obj["placeholder"] = field.get("placeholder") or "Select " + field.label + "..."
 		obj["doctype"] = field.options
 	elif field.fieldtype == "Select" and field.options:
+		obj["placeholder"] = field.get("placeholder") or "Select " + field.label + "..."
 		obj["options"] = [{"label": option, "value": option} for option in field.options.split("\n")]
 
 	if field.read_only:

diff --git a/frontend/src/components/Fields.vue b/frontend/src/components/Fields.vue
@@ -48,7 +48,7 @@
             <FormControl
               v-if="field.read_only && field.type !== 'Check'"
               type="text"
-              :placeholder="__(field.placeholder || field.label)"
+              :placeholder="getPlaceholder(field)"
               v-model="data[field.name]"
               :disabled="true"
             />
@@ -59,7 +59,7 @@
               :class="field.prefix ? 'prefix' : ''"
               :options="field.options"
               v-model="data[field.name]"
-              :placeholder="__(field.placeholder || field.label)"
+              :placeholder="getPlaceholder(field)"
             >
               <template v-if="field.prefix" #prefix>
                 <IndicatorIcon :class="field.prefix" />
@@ -91,7 +91,7 @@
                 :doctype="field.options"
                 :filters="field.filters"
                 @change="(v) => (data[field.name] = v)"
-                :placeholder="__(field.placeholder || field.label)"
+                :placeholder="getPlaceholder(field)"
                 :onCreate="field.create"
               />
               <Button
@@ -113,7 +113,7 @@
               :doctype="field.options"
               :filters="field.filters"
               @change="(v) => (data[field.name] = v)"
-              :placeholder="__(field.placeholder || field.label)"
+              :placeholder="getPlaceholder(field)"
               :hideMe="true"
             >
               <template #prefix>
@@ -182,33 +182,33 @@
             <DateTimePicker
               v-else-if="field.type === 'Datetime'"
               v-model="data[field.name]"
-              :placeholder="__(field.placeholder || field.label)"
+              :placeholder="getPlaceholder(field)"
               input-class="border-none"
             />
             <DatePicker
               v-else-if="field.type === 'Date'"
               v-model="data[field.name]"
-              :placeholder="__(field.placeholder || field.label)"
+              :placeholder="getPlaceholder(field)"
               input-class="border-none"
             />
             <FormControl
               v-else-if="
                 ['Small Text', 'Text', 'Long Text'].includes(field.type)
               "
               type="textarea"
-              :placeholder="__(field.placeholder || field.label)"
+              :placeholder="getPlaceholder(field)"
               v-model="data[field.name]"
             />
             <FormControl
               v-else-if="['Int'].includes(field.type)"
               type="number"
-              :placeholder="__(field.placeholder || field.label)"
+              :placeholder="getPlaceholder(field)"
               v-model="data[field.name]"
             />
             <FormControl
               v-else
               type="text"
-              :placeholder="__(field.placeholder || field.label)"
+              :placeholder="getPlaceholder(field)"
               v-model="data[field.name]"
               :disabled="Boolean(field.read_only)"
             />
@@ -235,6 +235,17 @@ const props = defineProps({
   sections: Array,
   data: Object,
 })
+
+const getPlaceholder = (field) => {
+  if (field.placeholder) {
+    return __(field.placeholder)
+  }
+  if (['Select', 'Link'].includes(field.type)) {
+    return __('Select {0}', [__(field.label)])
+  } else {
+    return __('Enter {0}', [__(field.label)])
+  }
+}
 </script>
 
 <style scoped>

diff --git a/frontend/src/components/SectionFields.vue b/frontend/src/components/SectionFields.vue
@@ -55,9 +55,9 @@
           v-else-if="field.type === 'select'"
           class="form-control cursor-pointer [&_select]:cursor-pointer"
           type="select"
-          :value="data[field.name]"
+          v-model="data[field.name]"
           :options="field.options"
-          :debounce="500"
+          :placeholder="field.placeholder"
           @change.stop="emit('update', field.name, $event.target.value)"
         />
         <Link