fix: implemented new tabs layout

frappe-ui

@@ -1 +1 @@
-Subproject commit 6b2cdc8b6ea1f31ff9a0202433bb5d7c4df946b0
+Subproject commit ade8016b7108ed4903928661f9df9204d3ee57bf

frontend/src/components/Activities/DataFields.vue

@@ -12,7 +12,10 @@
       />
     </div>
     <div class="flex gap-1">
-      <Button v-if="isManager()" @click="showDataFieldsModal = true">
+      <Button
+        v-if="isManager() && !isMobileView"
+        @click="showDataFieldsModal = true"
+      >
         <EditIcon class="h-4 w-4" />
       </Button>
       <Button
@@ -60,6 +63,7 @@ import { Badge, createResource, createDocumentResource } from 'frappe-ui'
 import LoadingIndicator from '@/components/Icons/LoadingIndicator.vue'
 import { createToast } from '@/utils'
 import { usersStore } from '@/stores/users'
+import { isMobileView } from '@/composables/settings'
 import { ref } from 'vue'
 
 const props = defineProps({

frontend/src/components/FieldLayout.vue

@@ -6,21 +6,21 @@
       'border-outline-gray-modals': modal && hasTabs,
     }"
   >
-    <Tabs
-      v-model="tabIndex"
-      class="!h-full"
-      :tabs="_tabs"
-      v-slot="{ tab }"
-      :tablistClass="
-        !hasTabs ? 'hidden' : modal ? 'border-outline-gray-modals' : ''
-      "
-    >
+    <Tabs as="div" v-model="tabIndex" :tabs="_tabs">
+      <TabList
+        :class="!hasTabs ? 'hidden' : modal ? 'border-outline-gray-modals' : ''"
+      />
+      <TabPanel v-slot="{ tab }">
         <div
           class="sections overflow-hidden"
           :class="{ 'my-4 sm:my-6': hasTabs }"
         >
           <template v-for="(section, i) in tab.sections" :key="section.name">
-          <div v-if="section.visible" class="section" :data-name="section.name">
+            <div
+              v-if="section.visible"
+              class="section"
+              :data-name="section.name"
+            >
               <div
                 v-if="i !== firstVisibleIndex(tab.sections)"
                 class="w-full section-border"
@@ -32,7 +32,10 @@
                   'px-3 sm:px-5': hasTabs,
                   'mt-6': section.label && !section.hideLabel,
                 }"
-              :labelClass="['text-lg font-medium', { 'px-3 sm:px-5': hasTabs }]"
+                :labelClass="[
+                  'text-lg font-medium',
+                  { 'px-3 sm:px-5': hasTabs },
+                ]"
                 :label="section.label"
                 :hideLabel="section.hideLabel || !section.label"
                 :opened="section.opened"
@@ -51,7 +54,10 @@
                   >
                     {{ column.label }}
                   </div>
-                <template v-for="field in column.fields" :key="field.fieldname">
+                  <template
+                    v-for="field in column.fields"
+                    :key="field.fieldname"
+                  >
                     <div v-if="field.visible" class="field">
                       <div
                         v-if="field.fieldtype != 'Check'"
@@ -222,7 +228,9 @@
                         :value="getFormattedPercent(field.fieldname, data)"
                         :placeholder="getPlaceholder(field)"
                         :disabled="Boolean(field.read_only)"
-                      @change="data[field.fieldname] = flt($event.target.value)"
+                        @change="
+                          data[field.fieldname] = flt($event.target.value)
+                        "
                       />
                       <FormControl
                         v-else-if="field.fieldtype === 'Float'"
@@ -230,7 +238,9 @@
                         :value="getFormattedFloat(field.fieldname, data)"
                         :placeholder="getPlaceholder(field)"
                         :disabled="Boolean(field.read_only)"
-                      @change="data[field.fieldname] = flt($event.target.value)"
+                        @change="
+                          data[field.fieldname] = flt($event.target.value)
+                        "
                       />
                       <FormControl
                         v-else-if="field.fieldtype === 'Currency'"
@@ -238,7 +248,9 @@
                         :value="getFormattedCurrency(field.fieldname, data)"
                         :placeholder="getPlaceholder(field)"
                         :disabled="Boolean(field.read_only)"
-                      @change="data[field.fieldname] = flt($event.target.value)"
+                        @change="
+                          data[field.fieldname] = flt($event.target.value)
+                        "
                       />
                       <FormControl
                         v-else
@@ -254,6 +266,7 @@
             </div>
           </template>
         </div>
+      </TabPanel>
     </Tabs>
   </div>
 </template>
@@ -269,7 +282,14 @@ import { getMeta } from '@/stores/meta'
 import { usersStore } from '@/stores/users'
 import { getFormat, evaluateDependsOnValue } from '@/utils'
 import { flt } from '@/utils/numberFormat.js'
-import { Tabs, Tooltip, DatePicker, DateTimePicker } from 'frappe-ui'
+import {
+  Tabs,
+  TabList,
+  TabPanel,
+  Tooltip,
+  DatePicker,
+  DateTimePicker,
+} from 'frappe-ui'
 import { ref, computed } from 'vue'
 
 const props = defineProps({

frontend/src/components/Modals/AddressModal.vue

@@ -10,7 +10,7 @@
           </div>
           <div class="flex items-center gap-1">
             <Button
-              v-if="isManager()"
+              v-if="isManager() && !isMobileView"
               variant="ghost"
               class="w-7"
               @click="openQuickEntryModal"
@@ -53,6 +53,7 @@ import QuickEntryModal from '@/components/Modals/QuickEntryModal.vue'
 import FieldLayout from '@/components/FieldLayout.vue'
 import EditIcon from '@/components/Icons/EditIcon.vue'
 import { usersStore } from '@/stores/users'
+import { isMobileView } from '@/composables/settings'
 import { capture } from '@/telemetry'
 import { FeatherIcon, createResource, ErrorMessage } from 'frappe-ui'
 import { ref, nextTick, watch, computed } from 'vue'

frontend/src/components/Modals/ContactModal.vue

@@ -10,7 +10,7 @@
           </div>
           <div class="flex items-center gap-1">
             <Button
-              v-if="isManager()"
+              v-if="isManager() && !isMobileView"
               variant="ghost"
               class="w-7"
               @click="openQuickEntryModal"
@@ -48,6 +48,7 @@
 import FieldLayout from '@/components/FieldLayout.vue'
 import EditIcon from '@/components/Icons/EditIcon.vue'
 import { usersStore } from '@/stores/users'
+import { isMobileView } from '@/composables/settings'
 import { capture } from '@/telemetry'
 import { call, createResource } from 'frappe-ui'
 import { ref, nextTick, watch } from 'vue'

frontend/src/components/Modals/DealModal.vue

@@ -10,7 +10,7 @@
           </div>
           <div class="flex items-center gap-1">
             <Button
-              v-if="isManager()"
+              v-if="isManager() && !isMobileView"
               variant="ghost"
               class="w-7"
               @click="openQuickEntryModal"
@@ -75,6 +75,7 @@ import EditIcon from '@/components/Icons/EditIcon.vue'
 import FieldLayout from '@/components/FieldLayout.vue'
 import { usersStore } from '@/stores/users'
 import { statusesStore } from '@/stores/statuses'
+import { isMobileView } from '@/composables/settings'
 import { capture } from '@/telemetry'
 import { Switch, createResource } from 'frappe-ui'
 import { computed, ref, reactive, onMounted, nextTick, watch } from 'vue'

frontend/src/components/Modals/LeadModal.vue

@@ -10,7 +10,7 @@
           </div>
           <div class="flex items-center gap-1">
             <Button
-              v-if="isManager()"
+              v-if="isManager() && !isMobileView"
               variant="ghost"
               class="w-7"
               @click="openQuickEntryModal"
@@ -46,6 +46,7 @@ import EditIcon from '@/components/Icons/EditIcon.vue'
 import FieldLayout from '@/components/FieldLayout.vue'
 import { usersStore } from '@/stores/users'
 import { statusesStore } from '@/stores/statuses'
+import { isMobileView } from '@/composables/settings'
 import { capture } from '@/telemetry'
 import { createResource } from 'frappe-ui'
 import { computed, onMounted, ref, reactive, nextTick } from 'vue'

frontend/src/components/Modals/OrganizationModal.vue

@@ -10,7 +10,7 @@
           </div>
           <div class="flex items-center gap-1">
             <Button
-              v-if="isManager()"
+              v-if="isManager() && !isMobileView"
               variant="ghost"
               class="w-7"
               @click="openQuickEntryModal"
@@ -48,6 +48,7 @@
 import FieldLayout from '@/components/FieldLayout.vue'
 import EditIcon from '@/components/Icons/EditIcon.vue'
 import { usersStore } from '@/stores/users'
+import { isMobileView } from '@/composables/settings'
 import { capture } from '@/telemetry'
 import { call, FeatherIcon, createResource } from 'frappe-ui'
 import { ref, nextTick, watch } from 'vue'

frontend/src/components/Section.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <slot name="header" v-bind="{ opened, hide, open, close, toggle }">
-      <div v-if="!hide" class="column-header flex items-center justify-between">
+      <div v-if="!hide" class="column-header h-8 flex items-center justify-between">
         <div
           class="flex text-ink-gray-9 max-w-fit cursor-pointer items-center gap-2 text-base"
           :class="labelClass"

frontend/src/components/SidePanelLayout.vue

@@ -6,7 +6,7 @@
           v-if="i !== firstVisibleIndex()"
           class="w-full section-border h-px border-t"
         />
-        <div class="p-3">
+        <div class="p-1 sm:p-3">
           <Section
             labelClass="px-2 font-semibold"
             :label="section.label"
@@ -396,6 +396,7 @@ import UserAvatar from '@/components/UserAvatar.vue'
 import SidePanelModal from '@/components/Modals/SidePanelModal.vue'
 import { getMeta } from '@/stores/meta'
 import { usersStore } from '@/stores/users'
+import { isMobileView } from '@/composables/settings'
 import { getFormat, evaluateDependsOnValue } from '@/utils'
 import { flt } from '@/utils/numberFormat.js'
 import { Tooltip, DateTimePicker, DatePicker } from 'frappe-ui'
@@ -481,6 +482,7 @@ function parsedField(field) {
 function parsedSection(section, editButtonAdded) {
   let isContactSection = section.name == 'contacts_section'
   section.showEditButton = !(
+    isMobileView.value ||
     !isManager() ||
     isContactSection ||
     editButtonAdded

frontend/src/pages/Contact.vue

@@ -129,8 +129,8 @@
         />
       </div>
     </Resizer>
-    <Tabs class="!h-full" v-model="tabIndex" :tabs="tabs">
-      <template #tab="{ tab, selected }">
+    <Tabs as="div" v-model="tabIndex" :tabs="tabs">
+      <template #tab-item="{ tab, selected }">
         <button
           class="group flex items-center gap-2 border-b border-transparent py-2.5 text-base text-ink-gray-5 duration-300 ease-in-out hover:border-outline-gray-3 hover:text-ink-gray-9"
           :class="{ 'text-ink-gray-9': selected }"
@@ -148,7 +148,7 @@
           </Badge>
         </button>
       </template>
-      <template #default="{ tab }">
+      <template #tab-panel="{ tab }">
         <DealsListView
           v-if="tab.label === 'Deals' && rows.length"
           class="mt-4"

frontend/src/pages/Deal.vue

@@ -37,7 +37,8 @@
     </template>
   </LayoutHeader>
   <div v-if="deal.data" class="flex h-full overflow-hidden">
-    <Tabs v-model="tabIndex" :tabs="tabs" class="!h-full">
+    <Tabs as="div" v-model="tabIndex" :tabs="tabs">
+      <template #tab-panel>
         <Activities
           ref="activities"
           doctype="CRM Deal"
@@ -46,6 +47,7 @@
           v-model:tabIndex="tabIndex"
           v-model="deal"
         />
+      </template>
     </Tabs>
     <Resizer side="right" class="flex flex-col justify-between border-l">
       <div

frontend/src/pages/Lead.vue

@@ -23,9 +23,7 @@
         <template #default="{ open }">
           <Button :label="lead.data.status">
             <template #prefix>
-              <IndicatorIcon
-                :class="getLeadStatus(lead.data.status).color"
-              />
+              <IndicatorIcon :class="getLeadStatus(lead.data.status).color" />
             </template>
             <template #suffix>
               <FeatherIcon
@@ -44,7 +42,8 @@
     </template>
   </LayoutHeader>
   <div v-if="lead?.data" class="flex h-full overflow-hidden">
-    <Tabs v-model="tabIndex" class="!h-full" :tabs="tabs">
+    <Tabs as="div" v-model="tabIndex" :tabs="tabs">
+      <template #tab-panel>
         <Activities
           ref="activities"
           doctype="CRM Lead"
@@ -53,6 +52,7 @@
           v-model:tabIndex="tabIndex"
           v-model="lead"
         />
+      </template>
     </Tabs>
     <Resizer class="flex flex-col justify-between border-l" side="right">
       <div

frontend/src/pages/MobileContact.vue

@@ -103,13 +103,8 @@
         </div>
       </template>
     </FileUploader>
-    <Tabs
-      v-model="tabIndex"
-      :tabs="tabs"
-      tablistClass="!px-4"
-      class="overflow-auto"
-    >
-      <template #tab="{ tab, selected }">
+    <Tabs as="div" v-model="tabIndex" :tabs="tabs" class="overflow-auto">
+      <TabList class="!px-4" v-slot="{ tab, selected }">
         <button
           v-if="tab.name == 'Deals'"
           class="group flex items-center gap-2 border-b border-transparent py-2.5 text-base text-ink-gray-5 duration-300 ease-in-out hover:border-outline-gray-3 hover:text-ink-gray-9"
@@ -127,31 +122,20 @@
             {{ tab.count }}
           </Badge>
         </button>
-      </template>
-      <template #default="{ tab }">
+      </TabList>
+      <TabPanel v-slot="{ tab }">
         <div v-if="tab.name == 'Details'">
           <div
-            v-if="fieldsLayout.data"
+            v-if="sections.data"
             class="flex flex-1 flex-col justify-between overflow-hidden"
           >
-            <div class="flex flex-col overflow-y-auto">
-              <div
-                v-for="(section, i) in fieldsLayout.data"
-                :key="section.name"
-                class="flex flex-col px-2 py-3 sm:p-3"
-                :class="{ 'border-b': i !== fieldsLayout.data.length - 1 }"
-              >
-                <Section :label="section.label" :opened="section.opened">
             <SidePanelLayout
-                    :fields="section.columns[0].fields"
-                    :isLastSection="i == fieldsLayout.data.length - 1"
-                    doctype="Contact"
               v-model="contact.data"
+              :sections="sections.data"
+              doctype="Contact"
               @update="updateField"
+              @reload="sections.reload"
             />
-                </Section>
-              </div>
-            </div>
           </div>
         </div>
         <DealsListView
@@ -170,7 +154,7 @@
             <div>{{ __('No {0} Found', [__(tab.label)]) }}</div>
           </div>
         </div>
-      </template>
+      </TabPanel>
     </Tabs>
   </div>
   <AddressModal v-model="showAddressModal" v-model:address="_address" />
@@ -178,7 +162,6 @@
 
 <script setup>
 import Icon from '@/components/Icon.vue'
-import Section from '@/components/Section.vue'
 import SidePanelLayout from '@/components/SidePanelLayout.vue'
 import LayoutHeader from '@/components/LayoutHeader.vue'
 import DetailsIcon from '@/components/Icons/DetailsIcon.vue'
@@ -201,6 +184,8 @@ import {
   Avatar,
   FileUploader,
   Tabs,
+  TabList,
+  TabPanel,
   call,
   createResource,
   usePageMeta,
@@ -347,19 +332,19 @@ const rows = computed(() => {
   return deals.data.map((row) => getDealRowObject(row))
 })
 
-const fieldsLayout = createResource({
+const sections = createResource({
   url: 'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.get_sidepanel_sections',
   cache: ['sidePanelSections', 'Contact'],
   params: { doctype: 'Contact' },
   auto: true,
-  transform: (data) => getParsedFields(data),
+  transform: (data) => getParsedSections(data),
 })
 
-function getParsedFields(data) {
-  return data.map((section) => {
+function getParsedSections(_sections) {
+  return _sections.map((section) => {
     section.columns = section.columns.map((column) => {
       column.fields = column.fields.map((field) => {
-        if (field.name === 'email_id') {
+        if (field.fieldname === 'email_id') {
           return {
             ...field,
             type: 'dropdown',
@@ -418,7 +403,8 @@ function getParsedFields(data) {
         } else if (field.name === 'mobile_no') {
           return {
             ...field,
-            type: 'dropdown',
+            read_only: false,
+            fieldtype: 'dropdown',
             options:
               contact.data?.phone_nos?.map((phone) => {
                 return {

frontend/src/pages/MobileDeal.vue

@@ -48,13 +48,9 @@
     </div>
   </div>
   <div v-if="deal.data" class="flex h-full overflow-hidden">
-    <Tabs
-      v-model="tabIndex"
-      v-slot="{ tab }"
-      :tabs="tabs"
-      tablistClass="!px-3"
-      class="overflow-auto"
-    >
+    <Tabs as="div" v-model="tabIndex" :tabs="tabs" class="overflow-auto">
+      <TabList class="!px-3" />
+      <TabPanel v-slot="{ tab }">
         <div v-if="tab.name == 'Details'">
           <SLASection
             v-if="deal.data.sla_status"
@@ -78,7 +74,9 @@
                 class="contacts-area"
               >
                 <div
-                v-if="dealContacts?.loading && dealContacts?.data?.length == 0"
+                  v-if="
+                    dealContacts?.loading && dealContacts?.data?.length == 0
+                  "
                   class="flex min-h-20 flex-1 items-center justify-center gap-3 text-base text-ink-gray-4"
                 >
                   <LoadingIndicator class="h-4 w-4" />
@@ -89,7 +87,10 @@
                   v-for="(contact, i) in section.contacts"
                   :key="contact.name"
                 >
-                <div class="px-2 pb-2.5" :class="[i == 0 ? 'pt-5' : 'pt-2.5']">
+                  <div
+                    class="px-2 pb-2.5"
+                    :class="[i == 0 ? 'pt-5' : 'pt-2.5']"
+                  >
                     <Section :opened="contact.opened">
                       <template #header="{ opened, toggle }">
                         <div
@@ -181,6 +182,7 @@
           v-model:tabIndex="tabIndex"
           v-model="deal"
         />
+      </TabPanel>
     </Tabs>
   </div>
   <OrganizationModal
@@ -241,6 +243,8 @@ import {
   Dropdown,
   Avatar,
   Tabs,
+  TabList,
+  TabPanel,
   Breadcrumbs,
   call,
   usePageMeta,

frontend/src/pages/MobileLead.vue

@@ -53,13 +53,9 @@
     </div>
   </div>
   <div v-if="lead?.data" class="flex h-full overflow-hidden">
-    <Tabs
-      v-model="tabIndex"
-      v-slot="{ tab }"
-      :tabs="tabs"
-      tablistClass="!px-3"
-      class="overflow-auto"
-    >
+    <Tabs as="div" v-model="tabIndex" :tabs="tabs" class="overflow-auto">
+      <TabList class="!px-3" />
+      <TabPanel v-slot="{ tab }">
         <div v-if="tab.name == 'Details'">
           <SLASection
             v-if="lead.data.sla_status"
@@ -87,6 +83,7 @@
           v-model:tabIndex="tabIndex"
           v-model="lead"
         />
+      </TabPanel>
     </Tabs>
   </div>
   <Dialog
@@ -193,6 +190,8 @@ import {
   createResource,
   Dropdown,
   Tabs,
+  TabList,
+  TabPanel,
   Switch,
   Breadcrumbs,
   call,

frontend/src/pages/MobileOrganization.vue

@@ -85,13 +85,8 @@
         </div>
       </template>
     </FileUploader>
-    <Tabs
-      v-model="tabIndex"
-      :tabs="tabs"
-      tablistClass="!px-4"
-      class="overflow-auto"
-    >
-      <template #tab="{ tab, selected }">
+    <Tabs as="div" v-model="tabIndex" :tabs="tabs" class="overflow-auto">
+      <TabList class="!px-4" v-slot="{ tab, selected }">
         <button
           v-if="tab.name !== 'Details'"
           class="group flex items-center gap-2 border-b border-transparent py-2.5 text-base text-ink-gray-5 duration-300 ease-in-out hover:border-outline-gray-3 hover:text-ink-gray-9"
@@ -109,32 +104,20 @@
             {{ tab.count }}
           </Badge>
         </button>
-      </template>
-      <template #default="{ tab }">
+      </TabList>
+      <TabPanel v-slot="{ tab }">
         <div v-if="tab.name == 'Details'">
           <div
-            v-if="fieldsLayout.data"
+            v-if="sections.data"
             class="flex flex-1 flex-col justify-between overflow-hidden"
           >
-            <div class="flex flex-col overflow-y-auto">
-              <div
-                v-for="(section, i) in fieldsLayout.data"
-                :key="section.name"
-                class="flex flex-col px-2 py-3 sm:p-3"
-                :class="{ 'border-b': i !== fieldsLayout.data.length - 1 }"
-              >
-                <Section :label="section.label" :opened="section.opened">
             <SidePanelLayout
-                    v-if="section.columns?.[0].fields"
               v-model="organization.doc"
-                    :fields="section.columns[0].fields"
-                    :isLastSection="i == fieldsLayout.data.length - 1"
+              :sections="sections.data"
               doctype="CRM Organization"
               @update="updateField"
+              @reload="sections.reload"
             />
-                </Section>
-              </div>
-            </div>
           </div>
         </div>
         <DealsListView
@@ -160,14 +143,13 @@
             <div>{{ __('No {0} Found', [__(tab.label)]) }}</div>
           </div>
         </div>
-      </template>
+      </TabPanel>
     </Tabs>
   </div>
   <AddressModal v-model="showAddressModal" v-model:address="_address" />
 </template>
 
 <script setup>
-import Section from '@/components/Section.vue'
 import SidePanelLayout from '@/components/SidePanelLayout.vue'
 import Icon from '@/components/Icon.vue'
 import LayoutHeader from '@/components/LayoutHeader.vue'
@@ -191,6 +173,8 @@ import {
   FileUploader,
   Dropdown,
   Tabs,
+  TabList,
+  TabPanel,
   call,
   createListResource,
   createDocumentResource,
@@ -326,19 +310,19 @@ const showAddressModal = ref(false)
 const _organization = ref({})
 const _address = ref({})
 
-const fieldsLayout = createResource({
+const sections = createResource({
   url: 'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.get_sidepanel_sections',
   cache: ['sidePanelSections', 'CRM Organization'],
   params: { doctype: 'CRM Organization' },
   auto: true,
-  transform: (data) => getParsedFields(data),
+  transform: (data) => getParsedSections(data),
 })
 
-function getParsedFields(data) {
-  return data.map((section) => {
+function getParsedSections(_sections) {
+  return _sections.map((section) => {
     section.columns = section.columns.map((column) => {
       column.fields = column.fields.map((field) => {
-        if (field.name === 'address') {
+        if (field.fieldname === 'address') {
           return {
             ...field,
             create: (value, close) => {

frontend/src/pages/Organization.vue

@@ -114,8 +114,8 @@
         />
       </div>
     </Resizer>
-    <Tabs class="!h-full" v-model="tabIndex" :tabs="tabs">
-      <template #tab="{ tab, selected }">
+    <Tabs as="div" v-model="tabIndex" :tabs="tabs">
+      <template #tab-item="{ tab, selected }">
         <button
           class="group flex items-center gap-2 border-b border-transparent py-2.5 text-base text-ink-gray-5 duration-300 ease-in-out hover:border-outline-gray-3 hover:text-ink-gray-9"
           :class="{ 'text-ink-gray-9': selected }"
@@ -133,7 +133,7 @@
           </Badge>
         </button>
       </template>
-      <template #default="{ tab }">
+      <template #tab-panel="{ tab }">
         <DealsListView
           class="mt-4"
           v-if="tab.label === 'Deals' && rows.length"