From 3e4680abb951af06157f9bf12376e37878023eb1 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 19 Jun 2024 18:35:39 +0530
Subject: [PATCH] fix: show/hide preview quick entry & sidebar fields

---
 frontend/src/components/SectionFields.vue     |   7 +-
 .../components/Settings/QuickEntryLayout.vue  |  17 +-
 .../Settings/QuickEntryLayoutBuilder.vue      | 263 +++++++++---------
 .../Settings/SidebarFieldsLayout.vue          |  25 +-
 4 files changed, 172 insertions(+), 140 deletions(-)

diff --git a/frontend/src/components/SectionFields.vue b/frontend/src/components/SectionFields.vue
index d80868b5..80a07229 100644
--- a/frontend/src/components/SectionFields.vue
+++ b/frontend/src/components/SectionFields.vue
@@ -36,7 +36,7 @@
         <FormControl
           v-else-if="
             ['email', 'number', 'date', 'password', 'textarea'].includes(
-              field.type
+              field.type,
             )
           "
           class="form-control"
@@ -137,7 +137,10 @@ const _fields = computed(() => {
   props.fields?.forEach((field) => {
     let df = field.all_properties
     if (df?.depends_on) evaluate_depends_on(df.depends_on, field)
-    all_fields.push(field)
+    all_fields.push({
+      ...field,
+      placeholder: field.placeholder || field.label,
+    })
   })
   return all_fields
 })
diff --git a/frontend/src/components/Settings/QuickEntryLayout.vue b/frontend/src/components/Settings/QuickEntryLayout.vue
index da43525d..a043dbe9 100644
--- a/frontend/src/components/Settings/QuickEntryLayout.vue
+++ b/frontend/src/components/Settings/QuickEntryLayout.vue
@@ -27,15 +27,29 @@
             @click="saveChanges"
           />
           <Button :label="__('Reset')" @click="reload" />
+          <Button
+            :label="preview ? __('Hide Preview') : __('Show Preview')"
+            @click="preview = !preview"
+          />
         </div>
       </div>
     </div>
     <div v-if="sections?.data" class="overflow-y-auto p-8 pt-3">
-      <QuickEntryLayoutBuilder :sections="sections.data" :doctype="doctype" />
+      <div
+        class="rounded-xl h-full inline-block w-full px-4 pb-6 pt-5 sm:px-6 transform overflow-y-auto bg-white text-left align-middle shadow-xl transition-all"
+      >
+        <QuickEntryLayoutBuilder
+          v-if="!preview"
+          :sections="sections.data"
+          :doctype="doctype"
+        />
+        <Fields v-else :sections="sections.data" :data="{}" />
+      </div>
     </div>
   </div>
 </template>
 <script setup>
+import Fields from '@/components/Fields.vue'
 import QuickEntryLayoutBuilder from '@/components/Settings/QuickEntryLayoutBuilder.vue'
 import { useDebounceFn } from '@vueuse/core'
 import { Badge, call, createResource } from 'frappe-ui'
@@ -44,6 +58,7 @@ import { ref, watch, onMounted } from 'vue'
 const doctype = ref('CRM Lead')
 const loading = ref(false)
 const dirty = ref(false)
+const preview = ref(false)
 
 function getParams() {
   return { doctype: doctype.value, type: 'Quick Entry' }
diff --git a/frontend/src/components/Settings/QuickEntryLayoutBuilder.vue b/frontend/src/components/Settings/QuickEntryLayoutBuilder.vue
index f91f7a3e..30158155 100644
--- a/frontend/src/components/Settings/QuickEntryLayoutBuilder.vue
+++ b/frontend/src/components/Settings/QuickEntryLayoutBuilder.vue
@@ -1,141 +1,132 @@
 <template>
-  <div
-    class="rounded-xl h-full inline-block w-full transform overflow-y-auto bg-white text-left align-middle shadow-xl transition-all"
-  >
-    <div class="bg-white px-4 pb-6 pt-5 sm:px-6 overflow-y-auto">
-      <Draggable :list="sections" item-key="label" class="flex flex-col">
-        <template #item="{ element: section }">
-          <div
-            class="py-2 first:pt-0"
-            :class="section.hideBorder ? '' : 'border-t first:border-t-0'"
-          >
-            <div class="flex items-center justify-between pb-2">
-              <div
-                class="flex h-7 max-w-fit cursor-pointer items-center gap-2 text-base font-semibold leading-5"
-              >
-                <div
-                  v-if="!section.editingLabel"
-                  :class="section.hideLabel ? 'text-gray-400' : ''"
-                >
-                  {{ __(section.label) || __('Untitled') }}
-                </div>
-                <div v-else class="flex gap-2 items-center">
-                  <Input
-                    v-model="section.label"
-                    @keydown.enter="section.editingLabel = false"
-                    @blur="section.editingLabel = false"
-                    @click.stop
-                  />
-                  <Button
-                    v-if="section.editingLabel"
-                    icon="check"
-                    variant="ghost"
-                    @click="section.editingLabel = false"
-                  />
-                </div>
-              </div>
-              <Dropdown :options="getOptions(section)">
-                <template #default>
-                  <Button variant="ghost">
-                    <FeatherIcon name="more-horizontal" class="h-4" />
-                  </Button>
-                </template>
-              </Dropdown>
-            </div>
-            <div>
-              <Draggable
-                :list="section.fields"
-                group="fields"
-                item-key="label"
-                class="grid gap-2"
-                :class="
-                  section.columns
-                    ? 'grid-cols-' + section.columns
-                    : 'grid-cols-3'
-                "
-                handle=".cursor-grab"
-              >
-                <template #item="{ element: field }">
-                  <div
-                    class="px-1.5 py-1 border rounded text-base text-gray-800 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>
-                      <Button
-                        variant="ghost"
-                        icon="x"
-                        @click="
-                          section.fields.splice(
-                            section.fields.indexOf(field),
-                            1,
-                          )
-                        "
-                      />
-                    </div>
-                  </div>
-                </template>
-              </Draggable>
-              <Autocomplete
-                v-if="fields.data"
-                value=""
-                :options="fields.data"
-                @change="(e) => addField(section, e)"
-              >
-                <template #target="{ togglePopover }">
-                  <div
-                    class="grid gap-2 w-full"
-                    :class="
-                      section.columns
-                        ? 'grid-cols-' + section.columns
-                        : 'grid-cols-3'
-                    "
-                  >
-                    <Button
-                      class="mt-2 w-full !h-[38px] !border-gray-200"
-                      variant="outline"
-                      @click="togglePopover()"
-                      :label="__('Add Field')"
-                    >
-                      <template #prefix>
-                        <FeatherIcon name="plus" class="h-4" />
-                      </template>
-                    </Button>
-                  </div>
-                </template>
-                <template #item-label="{ option }">
-                  <div class="flex flex-col gap-1">
-                    <div>{{ option.label }}</div>
-                    <div class="text-gray-500 text-sm">
-                      {{ `${option.fieldname} - ${option.fieldtype}` }}
-                    </div>
-                  </div>
-                </template>
-              </Autocomplete>
-            </div>
-          </div>
-        </template>
-      </Draggable>
-      <div class="py-2 border-t">
-        <Button
-          class="w-full !h-[38px] !border-gray-200"
-          variant="outline"
-          :label="__('Add Section')"
-          @click="
-            sections.push({
-              label: __('New Section'),
-              opened: true,
-              fields: [],
-            })
-          "
+  <div>
+    <Draggable :list="sections" item-key="label" class="flex flex-col">
+      <template #item="{ element: section }">
+        <div
+          class="py-2 first:pt-0"
+          :class="section.hideBorder ? '' : 'border-t first:border-t-0'"
         >
-          <template #prefix>
-            <FeatherIcon name="plus" class="h-4" />
-          </template>
-        </Button>
-      </div>
+          <div class="flex items-center justify-between pb-2">
+            <div
+              class="flex h-7 max-w-fit cursor-pointer items-center gap-2 text-base font-semibold leading-5"
+            >
+              <div
+                v-if="!section.editingLabel"
+                :class="section.hideLabel ? 'text-gray-400' : ''"
+              >
+                {{ __(section.label) || __('Untitled') }}
+              </div>
+              <div v-else class="flex gap-2 items-center">
+                <Input
+                  v-model="section.label"
+                  @keydown.enter="section.editingLabel = false"
+                  @blur="section.editingLabel = false"
+                  @click.stop
+                />
+                <Button
+                  v-if="section.editingLabel"
+                  icon="check"
+                  variant="ghost"
+                  @click="section.editingLabel = false"
+                />
+              </div>
+            </div>
+            <Dropdown :options="getOptions(section)">
+              <template #default>
+                <Button variant="ghost">
+                  <FeatherIcon name="more-horizontal" class="h-4" />
+                </Button>
+              </template>
+            </Dropdown>
+          </div>
+          <div>
+            <Draggable
+              :list="section.fields"
+              group="fields"
+              item-key="label"
+              class="grid gap-2"
+              :class="
+                section.columns ? 'grid-cols-' + section.columns : 'grid-cols-3'
+              "
+              handle=".cursor-grab"
+            >
+              <template #item="{ element: field }">
+                <div
+                  class="px-1.5 py-1 border rounded text-base text-gray-800 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>
+                    <Button
+                      variant="ghost"
+                      icon="x"
+                      @click="
+                        section.fields.splice(section.fields.indexOf(field), 1)
+                      "
+                    />
+                  </div>
+                </div>
+              </template>
+            </Draggable>
+            <Autocomplete
+              v-if="fields.data"
+              value=""
+              :options="fields.data"
+              @change="(e) => addField(section, e)"
+            >
+              <template #target="{ togglePopover }">
+                <div
+                  class="grid gap-2 w-full"
+                  :class="
+                    section.columns
+                      ? 'grid-cols-' + section.columns
+                      : 'grid-cols-3'
+                  "
+                >
+                  <Button
+                    class="mt-2 w-full !h-[38px] !border-gray-200"
+                    variant="outline"
+                    @click="togglePopover()"
+                    :label="__('Add Field')"
+                  >
+                    <template #prefix>
+                      <FeatherIcon name="plus" class="h-4" />
+                    </template>
+                  </Button>
+                </div>
+              </template>
+              <template #item-label="{ option }">
+                <div class="flex flex-col gap-1">
+                  <div>{{ option.label }}</div>
+                  <div class="text-gray-500 text-sm">
+                    {{ `${option.fieldname} - ${option.fieldtype}` }}
+                  </div>
+                </div>
+              </template>
+            </Autocomplete>
+          </div>
+        </div>
+      </template>
+    </Draggable>
+    <div class="py-2 border-t">
+      <Button
+        class="w-full !h-[38px] !border-gray-200"
+        variant="outline"
+        :label="__('Add Section')"
+        @click="
+          sections.push({
+            label: __('New Section'),
+            opened: true,
+            fields: [],
+          })
+        "
+      >
+        <template #prefix>
+          <FeatherIcon name="plus" class="h-4" />
+        </template>
+      </Button>
     </div>
   </div>
 </template>
diff --git a/frontend/src/components/Settings/SidebarFieldsLayout.vue b/frontend/src/components/Settings/SidebarFieldsLayout.vue
index 0858cae0..86e8ace7 100644
--- a/frontend/src/components/Settings/SidebarFieldsLayout.vue
+++ b/frontend/src/components/Settings/SidebarFieldsLayout.vue
@@ -27,6 +27,10 @@
           @click="saveChanges"
         />
         <Button :label="__('Reset')" @click="reload" />
+        <Button
+          :label="preview ? __('Hide Preview') : __('Show Preview')"
+          @click="preview = !preview"
+        />
       </div>
     </div>
     <Resizer
@@ -37,13 +41,30 @@
     >
       <div class="flex flex-1 flex-col justify-between overflow-hidden">
         <div class="flex flex-col overflow-y-auto">
-          <SidebarLayoutBuilder :sections="sections.data" :doctype="doctype" />
+          <SidebarLayoutBuilder
+            v-if="!preview"
+            :sections="sections.data"
+            :doctype="doctype"
+          />
+          <div
+            v-else
+            v-for="(section, i) in sections.data"
+            :key="section.label"
+            class="flex flex-col p-3"
+            :class="{ 'border-b': i !== sections.data.length - 1 }"
+          >
+            <Section :is-opened="section.opened" :label="section.label">
+              <SectionFields :fields="section.fields" v-model="data" />
+            </Section>
+          </div>
         </div>
       </div>
     </Resizer>
   </div>
 </template>
 <script setup>
+import Section from '@/components/Section.vue'
+import SectionFields from '@/components/SectionFields.vue'
 import Resizer from '@/components/Resizer.vue'
 import SidebarLayoutBuilder from '@/components/Settings/SidebarLayoutBuilder.vue'
 import { useDebounceFn } from '@vueuse/core'
@@ -54,6 +75,8 @@ const parentRef = ref(null)
 const doctype = ref('CRM Lead')
 const loading = ref(false)
 const dirty = ref(false)
+const preview = ref(false)
+const data = ref({})
 
 function getParams() {
   return { doctype: doctype.value, type: 'Side Panel' }