fix: show/hide preview quick entry & sidebar fields

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
 })

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' }

frontend/src/components/Settings/QuickEntryLayoutBuilder.vue

@@ -1,8 +1,5 @@
 <template>
-  <div
+  <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
@@ -49,9 +46,7 @@
               item-key="label"
               class="grid gap-2"
               :class="
-                  section.columns
+                section.columns ? 'grid-cols-' + section.columns : 'grid-cols-3'
-                    ? 'grid-cols-' + section.columns
-                    : 'grid-cols-3'
               "
               handle=".cursor-grab"
             >
@@ -68,10 +63,7 @@
                       variant="ghost"
                       icon="x"
                       @click="
-                          section.fields.splice(
+                        section.fields.splice(section.fields.indexOf(field), 1)
-                            section.fields.indexOf(field),
-                            1,
-                          )
                       "
                     />
                   </div>
@@ -137,7 +129,6 @@
       </Button>
     </div>
   </div>
-  </div>
 </template>
 <script setup>
 import Autocomplete from '@/components/frappe-ui/Autocomplete.vue'

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' }