fix: show organization details with option to switch to edit mode

frontend/src/components/Modals/OrganizationModal.vue

@@ -1,78 +1,112 @@
 <template>
-  <Dialog
+  <Dialog v-model="show" :options="dialogOptions">
-    v-model="show"
+    <template #body>
-    :options="{
+      <div class="bg-white px-4 pb-6 pt-5 sm:px-6">
-      title: editMode ? 'Edit Organization' : 'Create Organization',
+        <div class="mb-5 flex items-center justify-between">
-      size: 'xl',
+          <div>
-      actions: [
+            <h3 class="text-2xl font-semibold leading-6 text-gray-900">
-        {
+              {{ dialogOptions.title || 'Untitled' }}
-          label: editMode ? 'Update' : 'Create',
+            </h3>
-          variant: 'solid',
+          </div>
-          onClick: ({ close }) =>
+          <div class="flex items-center gap-1">
-            editMode ? updateOrganization(close) : callInsertDoc(close),
+            <Button
-        },
+              v-if="detailMode"
-      ],
+              variant="ghost"
-    }"
+              class="w-7"
-  >
+              @click="detailMode = false"
-    <template #body-content>
+            >
-      <div class="flex flex-col gap-4">
+              <EditIcon class="h-4 w-4" />
-        <FormControl
+            </Button>
-          type="text"
+            <Button variant="ghost" class="w-7" @click="show = false">
-          ref="title"
+              <FeatherIcon name="x" class="h-4 w-4" />
-          size="md"
+            </Button>
-          label="Organization name"
+          </div>
-          variant="outline"
-          v-model="_organization.organization_name"
-          placeholder="Add organization name"
-        />
-        <div class="flex gap-4">
-          <FormControl
-            class="flex-1"
-            type="text"
-            size="md"
-            label="Website"
-            variant="outline"
-            v-model="_organization.website"
-            placeholder="Add website"
-          />
-          <FormControl
-            class="flex-1"
-            type="text"
-            size="md"
-            label="Annual revenue"
-            variant="outline"
-            v-model="_organization.annual_revenue"
-            placeholder="Add annual revenue"
-          />
         </div>
-        <div class="flex gap-4">
+        <div>
-          <FormControl
+          <div v-if="detailMode" class="flex flex-col gap-3.5">
-            class="flex-1"
+            <div
-            type="select"
+              class="flex h-7 items-center gap-2"
-            :options="[
+              v-for="field in fields"
-              '1-10',
+              :key="field.name"
-              '11-50',
+            >
-              '51-200',
+              <component class="mx-1" :is="field.icon" />
-              '201-500',
+              <div>{{ field.value }}</div>
-              '501-1000',
+            </div>
-              '1001-5000',
+          </div>
-              '5001-10000',
+          <div v-else>
-              '10001+',
+            <div class="flex flex-col gap-4">
-            ]"
+              <FormControl
-            size="md"
+                type="text"
-            label="No. of employees"
+                ref="title"
-            variant="outline"
+                size="md"
-            v-model="_organization.no_of_employees"
+                label="Organization name"
-          />
+                variant="outline"
-          <Link
+                v-model="_organization.organization_name"
-            class="flex-1"
+                placeholder="Add organization name"
-            size="md"
+              />
-            label="Industry"
+              <div class="flex gap-4">
-            variant="outline"
+                <FormControl
-            v-model="_organization.industry"
+                  class="flex-1"
-            doctype="CRM Industry"
+                  type="text"
-            placeholder="Add industry"
+                  size="md"
-          />
+                  label="Website"
+                  variant="outline"
+                  v-model="_organization.website"
+                  placeholder="Add website"
+                />
+                <FormControl
+                  class="flex-1"
+                  type="text"
+                  size="md"
+                  label="Annual revenue"
+                  variant="outline"
+                  v-model="_organization.annual_revenue"
+                  placeholder="Add annual revenue"
+                />
+              </div>
+              <div class="flex gap-4">
+                <FormControl
+                  class="flex-1"
+                  type="select"
+                  :options="[
+                    '1-10',
+                    '11-50',
+                    '51-200',
+                    '201-500',
+                    '501-1000',
+                    '1001-5000',
+                    '5001-10000',
+                    '10001+',
+                  ]"
+                  size="md"
+                  label="No. of employees"
+                  variant="outline"
+                  v-model="_organization.no_of_employees"
+                />
+                <Link
+                  class="flex-1"
+                  size="md"
+                  label="Industry"
+                  variant="outline"
+                  v-model="_organization.industry"
+                  doctype="CRM Industry"
+                  placeholder="Add industry"
+                />
+              </div>
+            </div>
+          </div>
+        </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"
+          >
+            {{ action.label }}
+          </Button>
         </div>
       </div>
     </template>
@@ -80,9 +114,11 @@
 </template>
 
 <script setup>
+import EditIcon from '@/components/Icons/EditIcon.vue'
+import OrganizationsIcon from '@/components/Icons/OrganizationsIcon.vue'
 import Link from '@/components/Controls/Link.vue'
-import { FormControl, Dialog, call } from 'frappe-ui'
+import { FormControl, Dialog, call, FeatherIcon } from 'frappe-ui'
-import { ref, defineModel, nextTick, watch } from 'vue'
+import { ref, defineModel, nextTick, watch, computed } from 'vue'
 import { useRouter } from 'vue-router'
 
 const props = defineProps({
@@ -94,6 +130,7 @@ const props = defineProps({
     type: Object,
     default: {
       redirect: true,
+      detailMode: false,
       afterInsert: () => {},
     },
   },
@@ -104,6 +141,7 @@ const show = defineModel()
 const organizations = defineModel('reloadOrganizations')
 
 const title = ref(null)
+const detailMode = ref(false)
 const editMode = ref(false)
 let _organization = ref({
   organization_name: '',
@@ -113,7 +151,7 @@ let _organization = ref({
   industry: '',
 })
 
-async function updateOrganization(close) {
+async function updateOrganization() {
   const old = { ...props.organization }
   const newOrg = { ..._organization.value }
 
@@ -125,7 +163,7 @@ async function updateOrganization(close) {
   const values = newOrg
 
   if (!nameChanged && !otherFieldChanged) {
-    close()
+    show.value = false
     return
   }
 
@@ -136,7 +174,7 @@ async function updateOrganization(close) {
   if (otherFieldChanged) {
     name = await callSetValue(values)
   }
-  handleOrganizationUpdate({ name }, close)
+  handleOrganizationUpdate({ name })
 }
 
 async function callRenameDoc() {
@@ -157,7 +195,7 @@ async function callSetValue(values) {
   return d.name
 }
 
-async function callInsertDoc(close) {
+async function callInsertDoc() {
   const doc = await call('frappe.client.insert', {
     doc: {
       doctype: 'CRM Organization',
@@ -165,10 +203,10 @@ async function callInsertDoc(close) {
       website: _organization.value.website,
     },
   })
-  doc.name && handleOrganizationUpdate(doc, close)
+  doc.name && handleOrganizationUpdate(doc)
 }
 
-function handleOrganizationUpdate(doc, close) {
+function handleOrganizationUpdate(doc) {
   organizations.value?.reload()
   if (doc.name && props.options.redirect) {
     router.push({
@@ -176,15 +214,67 @@ function handleOrganizationUpdate(doc, close) {
       params: { organizationId: doc.name },
     })
   }
-  close && close()
+  show.value = false
   props.options.afterInsert && props.options.afterInsert(doc)
 }
 
+const dialogOptions = computed(() => {
+  let title = detailMode.value
+    ? _organization.value.organization_name
+    : editMode.value
+    ? 'Edit Organization'
+    : 'Create Organization'
+  let size = detailMode.value ? '' : 'xl'
+  let actions = detailMode.value
+    ? []
+    : [
+        {
+          label: editMode.value ? 'Update' : 'Create',
+          variant: 'solid',
+          onClick: () =>
+            editMode.value ? updateOrganization() : callInsertDoc(),
+        },
+      ]
+
+  return { title, size, actions }
+})
+
+const fields = computed(() => {
+  return [
+    {
+      icon: OrganizationsIcon,
+      name: 'organization_name',
+      value: _organization.value.organization_name,
+    },
+    {
+      icon: OrganizationsIcon,
+      name: 'website',
+      value: _organization.value.website,
+    },
+    {
+      icon: OrganizationsIcon,
+      name: 'annual_revenue',
+      value: _organization.value.annual_revenue,
+    },
+    {
+      icon: OrganizationsIcon,
+      name: 'no_of_employees',
+      value: _organization.value.no_of_employees,
+    },
+    {
+      icon: OrganizationsIcon,
+      name: 'industry',
+      value: _organization.value.industry,
+    },
+  ]
+})
+
 watch(
   () => show.value,
   (value) => {
     if (!value) return
     editMode.value = false
+    detailMode.value = props.options.detailMode
     nextTick(() => {
       // TODO: Issue with FormControl
       // title.value.el.focus()

frontend/src/pages/Organization.vue

@@ -113,13 +113,24 @@
                 variant="ghost"
                 label="More"
                 class="-ml-1 cursor-pointer hover:text-gray-900"
+                @click="
+                  () => {
+                    detailMode = true
+                    showOrganizationModal = true
+                  }
+                "
               />
             </div>
             <div class="mt-2 flex gap-1.5">
               <Button
                 label="Edit"
                 size="sm"
-                @click="showOrganizationModal = true"
+                @click="
+                  () => {
+                    detailMode = false
+                    showOrganizationModal = true
+                  }
+                "
               >
                 <template #prefix>
                   <EditIcon class="h-4 w-4" />
@@ -205,12 +216,13 @@
         </div>
       </template>
     </Tabs>
-    <OrganizationModal
-      v-model="showOrganizationModal"
-      v-model:reloadOrganizations="organizations"
-      :organization="organization"
-    />
   </div>
+  <OrganizationModal
+    v-model="showOrganizationModal"
+    v-model:reloadOrganizations="organizations"
+    :organization="organization"
+    :options="{ detailMode }"
+  />
 </template>
 
 <script setup>
@@ -258,6 +270,7 @@ const props = defineProps({
 
 const { organizations, getOrganization } = organizationsStore()
 const showOrganizationModal = ref(false)
+const detailMode = ref(false)
 
 const organization = computed(() => getOrganization(props.organizationId))