snapshot of https://github.com/frappe/crm.git (develop, 2026-09-18; blobs > 131072B omitted)

frontend/src/components/Controls/GridFieldsEditorModal.vue

@@ -0,0 +1,209 @@
+<template>
+  <Dialog v-model:open="show">
+    <template #title>
+      <h3
+        class="flex items-center gap-2 text-3xl-semibold leading-6 text-ink-gray-9"
+      >
+        <div>{{ __('Edit Grid Fields Layout') }}</div>
+        <Badge
+          v-if="dirty"
+          :label="__('Not Saved')"
+          variant="subtle"
+          theme="orange"
+        />
+      </h3>
+    </template>
+    <template #default>
+      <div class="mt-4">
+        <div class="text-base text-ink-gray-8 mb-2">
+          {{ __('Fields Order') }}
+        </div>
+        <Draggable
+          v-if="oldFields?.length"
+          :list="fields"
+          group="fields"
+          item-key="fieldname"
+          class="flex flex-col gap-1"
+        >
+          <template #item="{ element: field }">
+            <div
+              class="px-1 py-0.5 bg-surface-gray-2 border border-outline-elevation-2 rounded text-base text-ink-gray-8 flex items-center justify-between gap-2"
+            >
+              <div class="flex items-center gap-2">
+                <DragVerticalIcon class="h-3.5 cursor-grab" />
+                <div>{{ field.label }}</div>
+              </div>
+              <div class="flex items-center gap-2">
+                <TextInput
+                  v-model="field.columns"
+                  variant="outline"
+                  type="number"
+                  class="w-20"
+                />
+                <Button
+                  variant="ghost"
+                  icon="lucide-x"
+                  @click="removeField(field)"
+                />
+              </div>
+            </div>
+          </template>
+        </Draggable>
+        <Combobox
+          v-if="dropdownFields?.length"
+          :model-value="null"
+          :options="dropdownFields"
+          @update:selected-option="(e) => addField(e)"
+        >
+          <template #trigger="{ open, setOpen }">
+            <Button
+              class="w-full mt-2"
+              :label="__('Add Field')"
+              iconLeft="plus"
+              @click="setOpen(!open)"
+            />
+          </template>
+          <template #item-label="{ item }">
+            <div class="flex flex-col gap-1 text-ink-gray-9">
+              <div>{{ item.label }}</div>
+              <div class="text-ink-gray-4 text-sm">
+                {{ `${item.fieldname} - ${item.fieldtype}` }}
+              </div>
+            </div>
+          </template>
+        </Combobox>
+        <ErrorMessage v-if="error" class="mt-3" :message="error" />
+      </div>
+    </template>
+    <template #actions>
+      <div class="flex items-center gap-2 justify-end">
+        <Button
+          v-if="dirty"
+          class="w-full"
+          :label="__('Reset')"
+          @click="reset"
+        />
+        <Button
+          class="w-full"
+          :label="__('Save')"
+          variant="solid"
+          :loading="loading"
+          :disabled="!dirty"
+          @click="update"
+        />
+      </div>
+    </template>
+  </Dialog>
+</template>
+<script setup>
+import DragVerticalIcon from '@/components/Icons/DragVerticalIcon.vue'
+import { getMeta } from '@/stores/meta'
+import Draggable from 'vuedraggable'
+import { Combobox, Dialog, ErrorMessage } from 'frappe-ui'
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  doctype: { type: String, default: '' },
+  parentDoctype: { type: String, default: '' },
+})
+
+const restrictedFieldTypes = [
+  'Section Break',
+  'Column Break',
+  'Tab Break',
+  'Table',
+  'Table MultiSelect',
+  'Image',
+]
+
+const { getFields, getGridViewSettings, saveUserSettings } = getMeta(
+  props.doctype,
+)
+
+const show = defineModel({ type: Boolean })
+
+const loading = ref(false)
+const error = ref(null)
+
+const dirty = computed(() => {
+  return JSON.stringify(fields.value) !== JSON.stringify(oldFields.value)
+})
+
+const oldFields = computed(() => {
+  let _fields =
+    getFields({ restrictNoValueFields: false, restrictedFieldTypes }) || []
+  if (!_fields.length) return []
+
+  let gridViewSettings = getGridViewSettings(props.parentDoctype)
+
+  if (gridViewSettings.length) {
+    return gridViewSettings.map((field) => {
+      let f = _fields.find((f) => f.fieldname === field.fieldname)
+      if (f) {
+        f.columns = field.columns
+        return fieldObj(f)
+      }
+    })
+  }
+  return _fields?.filter((field) => field.in_list_view).map((f) => fieldObj(f))
+})
+
+const fields = ref(JSON.parse(JSON.stringify(oldFields.value || [])))
+
+const dropdownFields = computed(() => {
+  const _fields =
+    getFields({ restrictNoValueFields: false, restrictedFieldTypes }) || []
+  if (!_fields.length) return []
+
+  return _fields
+    .filter(
+      (field) => !fields.value.find((f) => f.fieldname === field.fieldname),
+    )
+    .map((field) => ({ ...field, value: field.fieldname }))
+})
+
+function reset() {
+  fields.value = JSON.parse(JSON.stringify(oldFields.value || []))
+}
+
+function addField(field) {
+  fields.value.push(fieldObj(field))
+}
+
+function removeField(field) {
+  const index = fields.value.findIndex((f) => f.fieldname === field.fieldname)
+  fields.value.splice(index, 1)
+}
+
+function update() {
+  loading.value = true
+
+  let updateFields = fields.value.map((field) => {
+    return {
+      fieldname: field.fieldname,
+      columns: field.columns,
+    }
+  })
+
+  if (updateFields.length === 0) {
+    error.value = __('At least one field is required')
+    return
+  }
+
+  saveUserSettings(props.parentDoctype, 'GridView', updateFields, () => {
+    loading.value = false
+    show.value = false
+  })
+}
+
+function fieldObj(field) {
+  return {
+    label: field.label,
+    fieldname: field.fieldname,
+    fieldtype: field.fieldtype,
+    options: field.options,
+    in_list_view: field.in_list_view,
+    columns: field.columns || 2,
+  }
+}
+</script>