Merge pull request frappe#435 from shariquerik/contact-organization-page

metalmon · Oct 31, 2024 · bb8c232 · bb8c232
2 parents 0698fd6 + 9875496
commit bb8c232
Show file tree

Hide file tree

Showing 19 changed files with 2,028 additions and 714 deletions.
diff --git a/crm/install.py b/crm/install.py
@@ -144,6 +144,14 @@ def add_default_fields_layout(force=False):
 			"doctype": "CRM Deal",
 			"layout": '[{"label":"Contacts","name":"contacts_section","opened":true,"editable":false,"contacts":[]},{"label":"Organization Details","name":"organization_tab","opened":true,"fields":["organization","website","territory","annual_revenue","close_date","probability","next_step","deal_owner"]}]'
 		},
+		"Contact-Side Panel": {
+			"doctype": "Contact",
+			"layout": '[{"label":"Details","name":"details","opened":true,"fields":["salutation","first_name","last_name","email_id","mobile_no","gender","company_name","designation","address"]}]'
+		},
+		"CRM Organization-Side Panel": {
+			"doctype": "CRM Organization",
+			"layout": '[{"label":"Details","name":"details","opened":true,"fields":["organization_name","website","territory","industry","no_of_employees","address"]}]'
+		},
 	}
 
 	for layout in quick_entry_layouts:

diff --git a/crm/patches.txt b/crm/patches.txt
@@ -6,6 +6,6 @@ crm.patches.v1_0.move_crm_note_data_to_fcrm_note
 [post_model_sync]
 # Patches added in this section will be executed after doctypes are migrated
 crm.patches.v1_0.create_email_template_custom_fields
-crm.patches.v1_0.create_default_fields_layout #13/09/2024
+crm.patches.v1_0.create_default_fields_layout #31/10/2024
 crm.patches.v1_0.create_default_sidebar_fields_layout
 crm.patches.v1_0.update_deal_quick_entry_layout
diff --git a/frontend/src/components/DropdownItem.vue b/frontend/src/components/DropdownItem.vue
@@ -2,7 +2,7 @@
   <div
     class="group flex w-full items-center justify-between rounded bg-transparent p-1 pl-2 text-base text-gray-800 transition-colors hover:bg-gray-200 active:bg-gray-300"
   >
-    <div class="flex items-center justify-between gap-7">
+    <div class="flex flex-1 items-center justify-between gap-7">
       <div v-show="!editMode">{{ option.value }}</div>
       <TextInput
         ref="inputRef"
@@ -15,6 +15,14 @@
       />
 
       <div class="actions flex items-center justify-center">
+        <Button
+          v-if="editMode"
+          variant="ghost"
+          :label="__('Save')"
+          size="sm"
+          class="opacity-0 hover:bg-gray-300 group-hover:opacity-100"
+          @click="saveOption"
+        />
         <Tooltip text="Set As Primary" v-if="!isNew && !option.selected">
           <div>
             <Button
@@ -27,7 +35,7 @@
             </Button>
           </div>
         </Tooltip>
-        <Tooltip text="Edit">
+        <Tooltip v-if="!editMode" text="Edit">
           <div>
             <Button
               variant="ghost"
@@ -52,13 +60,8 @@
         </Tooltip>
       </div>
     </div>
-    <div>
-      <FeatherIcon
-        v-if="option.selected"
-        name="check"
-        class="text-primary-500 h-4 w-6"
-        size="sm"
-      />
+    <div v-if="option.selected">
+      <FeatherIcon name="check" class="text-primary-500 h-4 w-6" size="sm" />
     </div>
   </div>
 </template>
@@ -93,7 +96,8 @@ const toggleEditMode = () => {
   editMode.value && nextTick(() => inputRef.value.el.focus())
 }
 
-const saveOption = () => {
+const saveOption = (e) => {
+  if (!e.target.value) return
   toggleEditMode()
   props.option.onSave(props.option, isNew.value)
   isNew.value = false

diff --git a/frontend/src/components/Fields.vue b/frontend/src/components/Fields.vue
@@ -130,55 +130,6 @@
                 </Tooltip>
               </template>
             </Link>
-            <div v-else-if="field.type === 'Dropdown'">
-              <NestedPopover>
-                <template #target="{ open }">
-                  <Button
-                    :label="data[field.name]"
-                    class="dropdown-button flex w-full items-center justify-between rounded border border-gray-100 bg-gray-100 px-2 py-1.5 text-base text-gray-800 placeholder-gray-500 transition-colors hover:border-gray-200 hover:bg-gray-200 focus:border-gray-500 focus:bg-white focus:shadow-sm focus:outline-none focus:ring-0 focus-visible:ring-2 focus-visible:ring-gray-400"
-                  >
-                    <div class="truncate">{{ data[field.name] }}</div>
-                    <template #suffix>
-                      <FeatherIcon
-                        :name="open ? 'chevron-up' : 'chevron-down'"
-                        class="h-4 text-gray-600"
-                      />
-                    </template>
-                  </Button>
-                </template>
-                <template #body>
-                  <div
-                    class="my-2 space-y-1.5 divide-y rounded-lg border border-gray-100 bg-white p-1.5 shadow-xl"
-                  >
-                    <div>
-                      <DropdownItem
-                        v-if="field.options?.length"
-                        v-for="option in field.options"
-                        :key="option.name"
-                        :option="option"
-                      />
-                      <div v-else>
-                        <div class="p-1.5 px-7 text-base text-gray-500">
-                          {{ __('No {0} Available', [field.label]) }}
-                        </div>
-                      </div>
-                    </div>
-                    <div class="pt-1.5">
-                      <Button
-                        variant="ghost"
-                        class="w-full !justify-start"
-                        :label="__('Create New')"
-                        @click="field.create()"
-                      >
-                        <template #prefix>
-                          <FeatherIcon name="plus" class="h-4" />
-                        </template>
-                      </Button>
-                    </div>
-                  </div>
-                </template>
-              </NestedPopover>
-            </div>
             <DateTimePicker
               v-else-if="field.type === 'Datetime'"
               v-model="data[field.name]"
@@ -221,8 +172,6 @@
 
 <script setup>
 import EditIcon from '@/components/Icons/EditIcon.vue'
-import NestedPopover from '@/components/NestedPopover.vue'
-import DropdownItem from '@/components/DropdownItem.vue'
 import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
 import Link from '@/components/Controls/Link.vue'

diff --git a/frontend/src/components/Icons/DetailsIcon.vue b/frontend/src/components/Icons/DetailsIcon.vue
@@ -1,20 +1,16 @@
 <template>
   <svg
-    xmlns="http://www.w3.org/2000/svg"
     width="16"
     height="16"
-    viewBox="0 0 24 24"
+    viewBox="0 0 16 16"
     fill="none"
-    stroke="currentColor"
-    stroke-width="1.5"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    class="lucide lucide-list-collapse"
+    xmlns="http://www.w3.org/2000/svg"
   >
-    <path d="m3 10 2.5-2.5L3 5" />
-    <path d="m3 19 2.5-2.5L3 14" />
-    <path d="M10 6h11" />
-    <path d="M10 12h11" />
-    <path d="M10 18h11" />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M11.7499 2H4.24988C3.42145 2 2.74988 2.67157 2.74988 3.5V12.5C2.74988 13.3284 3.42145 14 4.24988 14H11.7499C12.5783 14 13.2499 13.3284 13.2499 12.5V3.5C13.2499 2.67157 12.5783 2 11.7499 2ZM4.24988 1C2.86917 1 1.74988 2.11929 1.74988 3.5V12.5C1.74988 13.8807 2.86917 15 4.24988 15H11.7499C13.1306 15 14.2499 13.8807 14.2499 12.5V3.5C14.2499 2.11929 13.1306 1 11.7499 1H4.24988ZM5.99997 8.125C5.99997 8.47018 5.72015 8.75 5.37497 8.75C5.02979 8.75 4.74997 8.47018 4.74997 8.125C4.74997 7.77982 5.02979 7.5 5.37497 7.5C5.72015 7.5 5.99997 7.77982 5.99997 8.125ZM5.37497 5.75C5.72015 5.75 5.99997 5.47018 5.99997 5.125C5.99997 4.77982 5.72015 4.5 5.37497 4.5C5.02979 4.5 4.74997 4.77982 4.74997 5.125C4.74997 5.47018 5.02979 5.75 5.37497 5.75ZM5.99997 11.125C5.99997 11.4702 5.72015 11.75 5.37497 11.75C5.02979 11.75 4.74997 11.4702 4.74997 11.125C4.74997 10.7798 5.02979 10.5 5.37497 10.5C5.72015 10.5 5.99997 10.7798 5.99997 11.125ZM7.24997 4.625C6.97383 4.625 6.74997 4.84886 6.74997 5.125C6.74997 5.40114 6.97383 5.625 7.24997 5.625H11.25C11.5261 5.625 11.75 5.40114 11.75 5.125C11.75 4.84886 11.5261 4.625 11.25 4.625H7.24997ZM6.74997 8.125C6.74997 7.84886 6.97383 7.625 7.24997 7.625H11.25C11.5261 7.625 11.75 7.84886 11.75 8.125C11.75 8.40114 11.5261 8.625 11.25 8.625H7.24997C6.97383 8.625 6.74997 8.40114 6.74997 8.125ZM7.24997 10.625C6.97383 10.625 6.74997 10.8489 6.74997 11.125C6.74997 11.4011 6.97383 11.625 7.24997 11.625H11.25C11.5261 11.625 11.75 11.4011 11.75 11.125C11.75 10.8489 11.5261 10.625 11.25 10.625H7.24997Z"
+      fill="currentColor"
+    />
   </svg>
 </template>
diff --git a/frontend/src/components/Icons/MenuIcon.vue b/frontend/src/components/Icons/MenuIcon.vue
@@ -0,0 +1,16 @@
+<template>
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M2.5 3.2002C2.5 2.92405 2.72386 2.7002 3 2.7002H13C13.2761 2.7002 13.5 2.92405 13.5 3.2002C13.5 3.47634 13.2761 3.7002 13 3.7002H3C2.72386 3.7002 2.5 3.47634 2.5 3.2002ZM2.5 8.00024C2.5 7.7241 2.72386 7.50024 3 7.50024H13C13.2761 7.50024 13.5 7.7241 13.5 8.00024C13.5 8.27639 13.2761 8.50024 13 8.50024H3C2.72386 8.50024 2.5 8.27639 2.5 8.00024ZM3 12.3003C2.72386 12.3003 2.5 12.5242 2.5 12.8003C2.5 13.0764 2.72386 13.3003 3 13.3003H13C13.2761 13.3003 13.5 13.0764 13.5 12.8003C13.5 12.5242 13.2761 12.3003 13 12.3003H3Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
diff --git a/frontend/src/components/LayoutHeader.vue b/frontend/src/components/LayoutHeader.vue
@@ -1,7 +1,7 @@
 <template>
   <Teleport to="#app-header" v-if="showHeader">
     <slot>
-      <header class="flex h-10.5 items-center justify-between py-[7px] pl-5">
+      <header class="flex h-10.5 items-center justify-between py-[7px] sm:pl-5 pl-2">
         <div class="flex items-center gap-2">
           <slot name="left-header" />
         </div>

diff --git a/frontend/src/components/Mobile/MobileAppHeader.vue b/frontend/src/components/Mobile/MobileAppHeader.vue
@@ -1,8 +1,12 @@
 <template>
-  <div class="flex border-b pr-3">
-    <div class="z-20 -mr-4 ml-1 flex items-center justify-center">
-      <Button variant="ghosted" @click="sidebarOpened = !sidebarOpened">
-        <FeatherIcon name="menu" class="size-4" />
+  <div class="flex pr-3">
+    <div class="z-20 ml-2 flex items-center justify-center">
+      <Button
+        class="size-7"
+        variant="ghosted"
+        @click="sidebarOpened = !sidebarOpened"
+      >
+        <MenuIcon class="h-4" />
       </Button>
     </div>
     <div id="app-header" class="flex-1" />
@@ -11,6 +15,7 @@
 </template>
 
 <script setup>
+import MenuIcon from '@/components/Icons/MenuIcon.vue'
 import CallUI from '@/components/CallUI.vue'
 import { mobileSidebarOpened as sidebarOpened } from '@/composables/settings'
 </script>