From b6006ce22fc1479df1322063eb131e891b4b9696 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Tue, 10 Dec 2024 17:17:58 +0530
Subject: [PATCH] fix: removed detailMode code from Organization modal

---
 frontend/src/components/Controls/Link.vue     |   2 +-
 .../components/Modals/OrganizationModal.vue   | 115 ++++--------------
 frontend/src/pages/Organizations.vue          |  12 +-
 3 files changed, 29 insertions(+), 100 deletions(-)

diff --git a/frontend/src/components/Controls/Link.vue b/frontend/src/components/Controls/Link.vue
index c95948eb..6f995f70 100644
--- a/frontend/src/components/Controls/Link.vue
+++ b/frontend/src/components/Controls/Link.vue
@@ -34,7 +34,7 @@
             variant="ghost"
             class="w-full !justify-start"
             :label="__('Create New')"
-            @click="attrs.onCreate(value, close)"
+            @click="() => attrs.onCreate(value, close)"
           >
             <template #prefix>
               <FeatherIcon name="plus" class="h-4" />
diff --git a/frontend/src/components/Modals/OrganizationModal.vue b/frontend/src/components/Modals/OrganizationModal.vue
index e5f1d589..8f62b587 100644
--- a/frontend/src/components/Modals/OrganizationModal.vue
+++ b/frontend/src/components/Modals/OrganizationModal.vue
@@ -10,10 +10,10 @@
           </div>
           <div class="flex items-center gap-1">
             <Button
-              v-if="isManager() || detailMode"
+              v-if="isManager()"
               variant="ghost"
               class="w-7"
-              @click="detailMode ? (detailMode = false) : openQuickEntryModal()"
+              @click="openQuickEntryModal"
             >
               <EditIcon class="h-4 w-4" />
             </Button>
@@ -23,55 +23,42 @@
           </div>
         </div>
         <div>
-          <div v-if="detailMode" class="flex flex-col gap-3.5">
-            <div
-              class="flex h-7 items-center gap-2 text-base text-ink-gray-8"
-              v-for="field in fields"
-              :key="field.name"
-            >
-              <div class="grid w-7 place-content-center">
-                <component :is="field.icon" />
-              </div>
-              <div>{{ field.value }}</div>
-            </div>
-          </div>
           <FieldLayout
-            v-else-if="filteredSections.length"
+            v-if="filteredSections.length"
             :tabs="filteredSections"
             :data="_organization"
           />
         </div>
       </div>
-      <div v-if="!detailMode" class="px-4 pb-7 pt-4 sm:px-6">
-        <div class="space-y-2">
-          <Button
-            class="w-full"
-            v-for="action in dialogOptions.actions"
-            :key="action.label"
-            v-bind="action"
-            :label="__(action.label)"
-            :loading="loading"
-          />
-        </div>
+      <div class="px-4 pb-7 pt-4 sm:px-6">
+        <Button
+          class="w-full"
+          v-for="action in dialogOptions.actions"
+          :key="action.label"
+          v-bind="action"
+          :label="__(action.label)"
+          :loading="loading"
+        />
       </div>
     </template>
   </Dialog>
   <AddressModal v-model="showAddressModal" v-model:address="_address" />
+  <QuickEntryModal
+    v-if="showQuickEntryModal"
+    v-model="showQuickEntryModal"
+    doctype="CRM Organization"
+  />
 </template>
 
 <script setup>
+import QuickEntryModal from '@/components/Modals/QuickEntryModal.vue'
 import FieldLayout from '@/components/FieldLayout.vue'
 import AddressModal from '@/components/Modals/AddressModal.vue'
 import EditIcon from '@/components/Icons/EditIcon.vue'
-import MoneyIcon from '@/components/Icons/MoneyIcon.vue'
-import WebsiteIcon from '@/components/Icons/WebsiteIcon.vue'
-import OrganizationsIcon from '@/components/Icons/OrganizationsIcon.vue'
-import TerritoryIcon from '@/components/Icons/TerritoryIcon.vue'
 import { usersStore } from '@/stores/users'
-import { formatNumberIntoCurrency } from '@/utils'
 import { capture } from '@/telemetry'
 import { call, FeatherIcon, createResource } from 'frappe-ui'
-import { ref, nextTick, watch, computed, h } from 'vue'
+import { ref, nextTick, watch, computed } from 'vue'
 import { useRouter } from 'vue-router'
 
 const props = defineProps({
@@ -79,7 +66,6 @@ const props = defineProps({
     type: Object,
     default: {
       redirect: true,
-      detailMode: false,
       afterInsert: () => {},
     },
   },
@@ -93,7 +79,6 @@ const organization = defineModel('organization')
 
 const loading = ref(false)
 const title = ref(null)
-const detailMode = ref(false)
 const editMode = ref(false)
 let _address = ref({})
 let _organization = ref({
@@ -186,59 +171,16 @@ const dialogOptions = computed(() => {
   let title = !editMode.value
     ? __('New Organization')
     : __(_organization.value.organization_name)
-  let size = detailMode.value ? '' : 'xl'
-  let actions = detailMode.value
-    ? []
-    : [
-        {
-          label: editMode.value ? __('Save') : __('Create'),
-          variant: 'solid',
-          onClick: () =>
-            editMode.value ? updateOrganization() : callInsertDoc(),
-        },
-      ]
-
-  return { title, size, actions }
-})
-
-const fields = computed(() => {
-  let details = [
+  let size = 'xl'
+  let actions = [
     {
-      icon: OrganizationsIcon,
-      name: 'organization_name',
-      value: _organization.value.organization_name,
-    },
-    {
-      icon: WebsiteIcon,
-      name: 'website',
-      value: _organization.value.website,
-    },
-    {
-      icon: TerritoryIcon,
-      name: 'territory',
-      value: _organization.value.territory,
-    },
-    {
-      icon: MoneyIcon,
-      name: 'annual_revenue',
-      value: formatNumberIntoCurrency(
-        _organization.value.annual_revenue,
-        _organization.value.currency,
-      ),
-    },
-    {
-      icon: h(FeatherIcon, { name: 'hash', class: 'h-4 w-4' }),
-      name: 'no_of_employees',
-      value: _organization.value.no_of_employees,
-    },
-    {
-      icon: h(FeatherIcon, { name: 'briefcase', class: 'h-4 w-4' }),
-      name: 'industry',
-      value: _organization.value.industry,
+      label: editMode.value ? __('Save') : __('Create'),
+      variant: 'solid',
+      onClick: () => (editMode.value ? updateOrganization() : callInsertDoc()),
     },
   ]
 
-  return details.filter((field) => field.value)
+  return { title, size, actions }
 })
 
 const tabs = createResource({
@@ -280,7 +222,6 @@ watch(
   (value) => {
     if (!value) return
     editMode.value = false
-    detailMode.value = props.options.detailMode
     nextTick(() => {
       // TODO: Issue with FormControl
       // title.value.el.focus()
@@ -293,12 +234,10 @@ watch(
   },
 )
 
-const showQuickEntryModal = defineModel('quickEntry')
+const showQuickEntryModal = ref(false)
 
 function openQuickEntryModal() {
   showQuickEntryModal.value = true
-  nextTick(() => {
-    show.value = false
-  })
+  nextTick(() => (show.value = false))
 }
 </script>
diff --git a/frontend/src/pages/Organizations.vue b/frontend/src/pages/Organizations.vue
index 9474af27..60a2204b 100644
--- a/frontend/src/pages/Organizations.vue
+++ b/frontend/src/pages/Organizations.vue
@@ -59,15 +59,7 @@
       </Button>
     </div>
   </div>
-  <OrganizationModal
-    v-model="showOrganizationModal"
-    v-model:quickEntry="showQuickEntryModal"
-  />
-  <QuickEntryModal
-    v-if="showQuickEntryModal"
-    v-model="showQuickEntryModal"
-    doctype="CRM Organization"
-  />
+  <OrganizationModal v-model="showOrganizationModal" />
 </template>
 <script setup>
 import ViewBreadcrumbs from '@/components/ViewBreadcrumbs.vue'
@@ -75,7 +67,6 @@ import CustomActions from '@/components/CustomActions.vue'
 import OrganizationsIcon from '@/components/Icons/OrganizationsIcon.vue'
 import LayoutHeader from '@/components/LayoutHeader.vue'
 import OrganizationModal from '@/components/Modals/OrganizationModal.vue'
-import QuickEntryModal from '@/components/Modals/QuickEntryModal.vue'
 import OrganizationsListView from '@/components/ListViews/OrganizationsListView.vue'
 import ViewControls from '@/components/ViewControls.vue'
 import { formatDate, timeAgo, website, formatNumberIntoCurrency } from '@/utils'
@@ -83,7 +74,6 @@ import { ref, computed } from 'vue'
 
 const organizationsListView = ref(null)
 const showOrganizationModal = ref(false)
-const showQuickEntryModal = ref(false)
 
 // organizations data is loaded in the ViewControls component
 const organizations = ref({})