From 7e3a2f9fb725ebe38cac17899f398bb062be2254 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 19 Jun 2024 15:35:28 +0530
Subject: [PATCH] fix: load sections and fields in quick entry layout builder

---
 .../components/Settings/QuickEntryLayout.vue  | 71 ++++++++++++++++++-
 .../Settings/QuickEntryLayoutBuilder.vue      | 33 +++++++++
 2 files changed, 103 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/Settings/QuickEntryLayoutBuilder.vue

diff --git a/frontend/src/components/Settings/QuickEntryLayout.vue b/frontend/src/components/Settings/QuickEntryLayout.vue
index 46f7e1e9..9fae4596 100644
--- a/frontend/src/components/Settings/QuickEntryLayout.vue
+++ b/frontend/src/components/Settings/QuickEntryLayout.vue
@@ -1,3 +1,72 @@
 <template>
-  <div>Quick Entry Layout</div>
+  <div ref="parentRef" class="flex flex-col p-8 overflow-hidden">
+    <h2 class="flex gap-2 text-xl font-semibold leading-none h-5 mb-4">
+      <div>{{ __('Quick Entry Layout') }}</div>
+      <Badge
+        v-if="dirty"
+        :label="__('Not Saved')"
+        variant="subtle"
+        theme="orange"
+      />
+    </h2>
+    <div class="flex-1 flex flex-col justify-between -m-3 p-3 gap-6 overflow-y-auto">
+      <div class="flex gap-6 items-end">
+        <FormControl
+          class="flex-1"
+          type="select"
+          v-model="doctype"
+          :label="__('DocType')"
+          :options="['CRM Lead', 'CRM Deal', 'Contact', 'CRM Organization']"
+          @change="reload"
+        />
+        <div class="flex flex-row-reverse gap-2">
+          <Button
+            :loading="loading"
+            :label="__('Save')"
+            variant="solid"
+            @click="saveChanges"
+          />
+          <Button :label="__('Reset')" @click="reload" />
+        </div>
+      </div>
+      <div v-if="sections?.data" class="">
+        <QuickEntryLayoutBuilder :sections="sections.data" :doctype="doctype" />
+      </div>
+    </div>
+  </div>
 </template>
+<script setup>
+import QuickEntryLayoutBuilder from '@/components/Settings/QuickEntryLayoutBuilder.vue'
+import { useDebounceFn } from '@vueuse/core'
+import { Badge, createResource } from 'frappe-ui'
+import { ref, onMounted } from 'vue'
+
+const parentRef = ref(null)
+const doctype = ref('CRM Lead')
+const loading = ref(false)
+const dirty = ref(false)
+
+function getParams() {
+  return { doctype: doctype.value, type: 'Quick Entry' }
+}
+
+const sections = createResource({
+  url: 'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.get_fields_layout',
+  cache: ['quick-entry-sections', doctype.value],
+  params: getParams(),
+  onSuccess(data) {
+    sections.originalData = JSON.parse(JSON.stringify(data))
+  },
+})
+
+onMounted(() => useDebounceFn(reload, 100)())
+
+function reload() {
+  sections.params = getParams()
+  sections.reload()
+}
+
+function saveChanges() {
+  // TODO: Save changes
+}
+</script>
diff --git a/frontend/src/components/Settings/QuickEntryLayoutBuilder.vue b/frontend/src/components/Settings/QuickEntryLayoutBuilder.vue
new file mode 100644
index 00000000..0353f60e
--- /dev/null
+++ b/frontend/src/components/Settings/QuickEntryLayoutBuilder.vue
@@ -0,0 +1,33 @@
+<template>
+  <div
+    class="border rounded-xl h-full inline-block w-full transform overflow-hidden bg-white text-left align-middle shadow-xl transition-all"
+  >
+    <div class="bg-white px-4 pb-6 pt-5 sm:px-6">
+      <div class="mb-6 flex items-center justify-between">
+        <div class="flex items-center space-x-2">
+          <header>
+            <h3 class="text-2xl font-semibold leading-6 text-gray-900">
+              {{ __('Create Lead') }}
+            </h3>
+          </header>
+        </div>
+        <Button icon="x" disabled variant="ghost" />
+      </div>
+      <div>
+        <div v-for="section in sections">
+          <div>{{ section.label }}</div>
+          <div v-for="field in section.fields">
+            <div>{{ field.label }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- <div class="px-4 pb-7 pt-4 sm:px-6">Actions</div> -->
+  </div>
+</template>
+<script setup>
+const props = defineProps({
+  sections: Object,
+  doctype: String,
+})
+</script>