Merge pull request #518 from shariquerik/tabs-component-layout
This commit is contained in:
Shariq Ansari
GitHub
commit
1ab2773ebc
@ -1 +1 @@
|
||||
Subproject commit 6b2cdc8b6ea1f31ff9a0202433bb5d7c4df946b0
|
||||
Subproject commit 8d26147237330c292c29e8600eeb1237c2e11555
|
||||
@ -14,7 +14,7 @@
|
||||
"@vueuse/core": "^10.3.0",
|
||||
"@vueuse/integrations": "^10.3.0",
|
||||
"feather-icons": "^4.28.0",
|
||||
"frappe-ui": "^0.1.98",
|
||||
"frappe-ui": "^0.1.99",
|
||||
"gemoji": "^8.1.0",
|
||||
"lodash": "^4.17.21",
|
||||
"mime": "^4.0.1",
|
||||
|
||||
@ -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({
|
||||
|
||||
@ -6,254 +6,267 @@
|
||||
'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' : ''
|
||||
"
|
||||
>
|
||||
<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">
|
||||
<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="i !== firstVisibleIndex(tab.sections)"
|
||||
class="w-full section-border"
|
||||
:class="[section.hideBorder ? 'mt-4' : 'h-px border-t my-5']"
|
||||
/>
|
||||
<Section
|
||||
class="flex sm:flex-row flex-col gap-4 text-lg font-medium"
|
||||
:class="{
|
||||
'px-3 sm:px-5': hasTabs,
|
||||
'mt-6': section.label && !section.hideLabel,
|
||||
}"
|
||||
:labelClass="['text-lg font-medium', { 'px-3 sm:px-5': hasTabs }]"
|
||||
:label="section.label"
|
||||
:hideLabel="section.hideLabel || !section.label"
|
||||
:opened="section.opened"
|
||||
:collapsible="section.collapsible"
|
||||
collapseIconPosition="right"
|
||||
v-if="section.visible"
|
||||
class="section"
|
||||
:data-name="section.name"
|
||||
>
|
||||
<div
|
||||
class="column flex flex-col gap-4 w-full"
|
||||
v-for="column in section.columns"
|
||||
:key="column.name"
|
||||
:data-name="column.name"
|
||||
v-if="i !== firstVisibleIndex(tab.sections)"
|
||||
class="w-full section-border"
|
||||
:class="[section.hideBorder ? 'mt-4' : 'h-px border-t my-5']"
|
||||
/>
|
||||
<Section
|
||||
class="flex sm:flex-row flex-col gap-4 text-lg font-medium"
|
||||
:class="{
|
||||
'px-3 sm:px-5': hasTabs,
|
||||
'mt-6': section.label && !section.hideLabel,
|
||||
}"
|
||||
:labelClass="[
|
||||
'text-lg font-medium',
|
||||
{ 'px-3 sm:px-5': hasTabs },
|
||||
]"
|
||||
:label="section.label"
|
||||
:hideLabel="section.hideLabel || !section.label"
|
||||
:opened="section.opened"
|
||||
:collapsible="section.collapsible"
|
||||
collapseIconPosition="right"
|
||||
>
|
||||
<div
|
||||
v-if="column.label && !column.hideLabel"
|
||||
class="text-ink-gray-9 max-w-fit text-base"
|
||||
class="column flex flex-col gap-4 w-full"
|
||||
v-for="column in section.columns"
|
||||
:key="column.name"
|
||||
:data-name="column.name"
|
||||
>
|
||||
{{ column.label }}
|
||||
</div>
|
||||
<template v-for="field in column.fields" :key="field.fieldname">
|
||||
<div v-if="field.visible" class="field">
|
||||
<div
|
||||
v-if="field.fieldtype != 'Check'"
|
||||
class="mb-2 text-sm text-ink-gray-5"
|
||||
>
|
||||
{{ __(field.label) }}
|
||||
<span
|
||||
v-if="
|
||||
field.reqd ||
|
||||
(field.mandatory_depends_on &&
|
||||
field.mandatory_via_depends_on)
|
||||
"
|
||||
class="text-ink-red-3"
|
||||
>*</span
|
||||
>
|
||||
</div>
|
||||
<FormControl
|
||||
v-if="field.read_only && field.fieldtype !== 'Check'"
|
||||
type="text"
|
||||
:placeholder="getPlaceholder(field)"
|
||||
v-model="data[field.fieldname]"
|
||||
:disabled="true"
|
||||
/>
|
||||
<Grid
|
||||
v-else-if="field.fieldtype === 'Table'"
|
||||
v-model="data[field.fieldname]"
|
||||
:doctype="field.options"
|
||||
:parentDoctype="doctype"
|
||||
/>
|
||||
<FormControl
|
||||
v-else-if="field.fieldtype === 'Select'"
|
||||
type="select"
|
||||
class="form-control"
|
||||
:class="field.prefix ? 'prefix' : ''"
|
||||
:options="field.options"
|
||||
v-model="data[field.fieldname]"
|
||||
:placeholder="getPlaceholder(field)"
|
||||
>
|
||||
<template v-if="field.prefix" #prefix>
|
||||
<IndicatorIcon :class="field.prefix" />
|
||||
</template>
|
||||
</FormControl>
|
||||
<div
|
||||
v-else-if="field.fieldtype == 'Check'"
|
||||
class="flex items-center gap-2"
|
||||
>
|
||||
<FormControl
|
||||
class="form-control"
|
||||
type="checkbox"
|
||||
v-model="data[field.fieldname]"
|
||||
@change="
|
||||
(e) => (data[field.fieldname] = e.target.checked)
|
||||
"
|
||||
:disabled="Boolean(field.read_only)"
|
||||
/>
|
||||
<label
|
||||
class="text-sm text-ink-gray-5"
|
||||
@click="
|
||||
() => {
|
||||
if (!Boolean(field.read_only)) {
|
||||
data[field.fieldname] = !data[field.fieldname]
|
||||
}
|
||||
}
|
||||
"
|
||||
<div
|
||||
v-if="column.label && !column.hideLabel"
|
||||
class="text-ink-gray-9 max-w-fit text-base"
|
||||
>
|
||||
{{ column.label }}
|
||||
</div>
|
||||
<template
|
||||
v-for="field in column.fields"
|
||||
:key="field.fieldname"
|
||||
>
|
||||
<div v-if="field.visible" class="field">
|
||||
<div
|
||||
v-if="field.fieldtype != 'Check'"
|
||||
class="mb-2 text-sm text-ink-gray-5"
|
||||
>
|
||||
{{ __(field.label) }}
|
||||
<span class="text-ink-red-3" v-if="field.mandatory"
|
||||
<span
|
||||
v-if="
|
||||
field.reqd ||
|
||||
(field.mandatory_depends_on &&
|
||||
field.mandatory_via_depends_on)
|
||||
"
|
||||
class="text-ink-red-3"
|
||||
>*</span
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="flex gap-1"
|
||||
v-else-if="field.fieldtype === 'Link'"
|
||||
>
|
||||
</div>
|
||||
<FormControl
|
||||
v-if="field.read_only && field.fieldtype !== 'Check'"
|
||||
type="text"
|
||||
:placeholder="getPlaceholder(field)"
|
||||
v-model="data[field.fieldname]"
|
||||
:disabled="true"
|
||||
/>
|
||||
<Grid
|
||||
v-else-if="field.fieldtype === 'Table'"
|
||||
v-model="data[field.fieldname]"
|
||||
:doctype="field.options"
|
||||
:parentDoctype="doctype"
|
||||
/>
|
||||
<FormControl
|
||||
v-else-if="field.fieldtype === 'Select'"
|
||||
type="select"
|
||||
class="form-control"
|
||||
:class="field.prefix ? 'prefix' : ''"
|
||||
:options="field.options"
|
||||
v-model="data[field.fieldname]"
|
||||
:placeholder="getPlaceholder(field)"
|
||||
>
|
||||
<template v-if="field.prefix" #prefix>
|
||||
<IndicatorIcon :class="field.prefix" />
|
||||
</template>
|
||||
</FormControl>
|
||||
<div
|
||||
v-else-if="field.fieldtype == 'Check'"
|
||||
class="flex items-center gap-2"
|
||||
>
|
||||
<FormControl
|
||||
class="form-control"
|
||||
type="checkbox"
|
||||
v-model="data[field.fieldname]"
|
||||
@change="
|
||||
(e) => (data[field.fieldname] = e.target.checked)
|
||||
"
|
||||
:disabled="Boolean(field.read_only)"
|
||||
/>
|
||||
<label
|
||||
class="text-sm text-ink-gray-5"
|
||||
@click="
|
||||
() => {
|
||||
if (!Boolean(field.read_only)) {
|
||||
data[field.fieldname] = !data[field.fieldname]
|
||||
}
|
||||
}
|
||||
"
|
||||
>
|
||||
{{ __(field.label) }}
|
||||
<span class="text-ink-red-3" v-if="field.mandatory"
|
||||
>*</span
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="flex gap-1"
|
||||
v-else-if="field.fieldtype === 'Link'"
|
||||
>
|
||||
<Link
|
||||
class="form-control flex-1 truncate"
|
||||
:value="data[field.fieldname]"
|
||||
:doctype="field.options"
|
||||
:filters="field.filters"
|
||||
@change="(v) => (data[field.fieldname] = v)"
|
||||
:placeholder="getPlaceholder(field)"
|
||||
:onCreate="field.create"
|
||||
/>
|
||||
<Button
|
||||
v-if="data[field.fieldname] && field.edit"
|
||||
class="shrink-0"
|
||||
:label="__('Edit')"
|
||||
@click="field.edit(data[field.fieldname])"
|
||||
>
|
||||
<template #prefix>
|
||||
<EditIcon class="h-4 w-4" />
|
||||
</template>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Link
|
||||
class="form-control flex-1 truncate"
|
||||
:value="data[field.fieldname]"
|
||||
v-else-if="field.fieldtype === 'User'"
|
||||
class="form-control"
|
||||
:value="
|
||||
data[field.fieldname] &&
|
||||
getUser(data[field.fieldname]).full_name
|
||||
"
|
||||
:doctype="field.options"
|
||||
:filters="field.filters"
|
||||
@change="(v) => (data[field.fieldname] = v)"
|
||||
:placeholder="getPlaceholder(field)"
|
||||
:onCreate="field.create"
|
||||
/>
|
||||
<Button
|
||||
v-if="data[field.fieldname] && field.edit"
|
||||
class="shrink-0"
|
||||
:label="__('Edit')"
|
||||
@click="field.edit(data[field.fieldname])"
|
||||
:hideMe="true"
|
||||
>
|
||||
<template #prefix>
|
||||
<EditIcon class="h-4 w-4" />
|
||||
<UserAvatar
|
||||
v-if="data[field.fieldname]"
|
||||
class="mr-2"
|
||||
:user="data[field.fieldname]"
|
||||
size="sm"
|
||||
/>
|
||||
</template>
|
||||
</Button>
|
||||
<template #item-prefix="{ option }">
|
||||
<UserAvatar
|
||||
class="mr-2"
|
||||
:user="option.value"
|
||||
size="sm"
|
||||
/>
|
||||
</template>
|
||||
<template #item-label="{ option }">
|
||||
<Tooltip :text="option.value">
|
||||
<div class="cursor-pointer">
|
||||
{{ getUser(option.value).full_name }}
|
||||
</div>
|
||||
</Tooltip>
|
||||
</template>
|
||||
</Link>
|
||||
<DateTimePicker
|
||||
v-else-if="field.fieldtype === 'Datetime'"
|
||||
v-model="data[field.fieldname]"
|
||||
icon-left=""
|
||||
:formatter="(date) => getFormat(date, '', true, true)"
|
||||
:placeholder="getPlaceholder(field)"
|
||||
input-class="border-none"
|
||||
/>
|
||||
<DatePicker
|
||||
v-else-if="field.fieldtype === 'Date'"
|
||||
icon-left=""
|
||||
v-model="data[field.fieldname]"
|
||||
:formatter="(date) => getFormat(date, '', true)"
|
||||
:placeholder="getPlaceholder(field)"
|
||||
input-class="border-none"
|
||||
/>
|
||||
<FormControl
|
||||
v-else-if="
|
||||
['Small Text', 'Text', 'Long Text', 'Code'].includes(
|
||||
field.fieldtype,
|
||||
)
|
||||
"
|
||||
type="textarea"
|
||||
:placeholder="getPlaceholder(field)"
|
||||
v-model="data[field.fieldname]"
|
||||
/>
|
||||
<FormControl
|
||||
v-else-if="['Int'].includes(field.fieldtype)"
|
||||
type="number"
|
||||
:placeholder="getPlaceholder(field)"
|
||||
v-model="data[field.fieldname]"
|
||||
/>
|
||||
<FormControl
|
||||
v-else-if="field.fieldtype === 'Percent'"
|
||||
type="text"
|
||||
:value="getFormattedPercent(field.fieldname, data)"
|
||||
:placeholder="getPlaceholder(field)"
|
||||
:disabled="Boolean(field.read_only)"
|
||||
@change="
|
||||
data[field.fieldname] = flt($event.target.value)
|
||||
"
|
||||
/>
|
||||
<FormControl
|
||||
v-else-if="field.fieldtype === 'Float'"
|
||||
type="text"
|
||||
:value="getFormattedFloat(field.fieldname, data)"
|
||||
:placeholder="getPlaceholder(field)"
|
||||
:disabled="Boolean(field.read_only)"
|
||||
@change="
|
||||
data[field.fieldname] = flt($event.target.value)
|
||||
"
|
||||
/>
|
||||
<FormControl
|
||||
v-else-if="field.fieldtype === 'Currency'"
|
||||
type="text"
|
||||
:value="getFormattedCurrency(field.fieldname, data)"
|
||||
:placeholder="getPlaceholder(field)"
|
||||
:disabled="Boolean(field.read_only)"
|
||||
@change="
|
||||
data[field.fieldname] = flt($event.target.value)
|
||||
"
|
||||
/>
|
||||
<FormControl
|
||||
v-else
|
||||
type="text"
|
||||
:placeholder="getPlaceholder(field)"
|
||||
v-model="data[field.fieldname]"
|
||||
:disabled="Boolean(field.read_only)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Link
|
||||
v-else-if="field.fieldtype === 'User'"
|
||||
class="form-control"
|
||||
:value="
|
||||
data[field.fieldname] &&
|
||||
getUser(data[field.fieldname]).full_name
|
||||
"
|
||||
:doctype="field.options"
|
||||
:filters="field.filters"
|
||||
@change="(v) => (data[field.fieldname] = v)"
|
||||
:placeholder="getPlaceholder(field)"
|
||||
:hideMe="true"
|
||||
>
|
||||
<template #prefix>
|
||||
<UserAvatar
|
||||
v-if="data[field.fieldname]"
|
||||
class="mr-2"
|
||||
:user="data[field.fieldname]"
|
||||
size="sm"
|
||||
/>
|
||||
</template>
|
||||
<template #item-prefix="{ option }">
|
||||
<UserAvatar
|
||||
class="mr-2"
|
||||
:user="option.value"
|
||||
size="sm"
|
||||
/>
|
||||
</template>
|
||||
<template #item-label="{ option }">
|
||||
<Tooltip :text="option.value">
|
||||
<div class="cursor-pointer">
|
||||
{{ getUser(option.value).full_name }}
|
||||
</div>
|
||||
</Tooltip>
|
||||
</template>
|
||||
</Link>
|
||||
<DateTimePicker
|
||||
v-else-if="field.fieldtype === 'Datetime'"
|
||||
v-model="data[field.fieldname]"
|
||||
icon-left=""
|
||||
:formatter="(date) => getFormat(date, '', true, true)"
|
||||
:placeholder="getPlaceholder(field)"
|
||||
input-class="border-none"
|
||||
/>
|
||||
<DatePicker
|
||||
v-else-if="field.fieldtype === 'Date'"
|
||||
icon-left=""
|
||||
v-model="data[field.fieldname]"
|
||||
:formatter="(date) => getFormat(date, '', true)"
|
||||
:placeholder="getPlaceholder(field)"
|
||||
input-class="border-none"
|
||||
/>
|
||||
<FormControl
|
||||
v-else-if="
|
||||
['Small Text', 'Text', 'Long Text', 'Code'].includes(
|
||||
field.fieldtype,
|
||||
)
|
||||
"
|
||||
type="textarea"
|
||||
:placeholder="getPlaceholder(field)"
|
||||
v-model="data[field.fieldname]"
|
||||
/>
|
||||
<FormControl
|
||||
v-else-if="['Int'].includes(field.fieldtype)"
|
||||
type="number"
|
||||
:placeholder="getPlaceholder(field)"
|
||||
v-model="data[field.fieldname]"
|
||||
/>
|
||||
<FormControl
|
||||
v-else-if="field.fieldtype === 'Percent'"
|
||||
type="text"
|
||||
:value="getFormattedPercent(field.fieldname, data)"
|
||||
:placeholder="getPlaceholder(field)"
|
||||
:disabled="Boolean(field.read_only)"
|
||||
@change="data[field.fieldname] = flt($event.target.value)"
|
||||
/>
|
||||
<FormControl
|
||||
v-else-if="field.fieldtype === 'Float'"
|
||||
type="text"
|
||||
:value="getFormattedFloat(field.fieldname, data)"
|
||||
:placeholder="getPlaceholder(field)"
|
||||
:disabled="Boolean(field.read_only)"
|
||||
@change="data[field.fieldname] = flt($event.target.value)"
|
||||
/>
|
||||
<FormControl
|
||||
v-else-if="field.fieldtype === 'Currency'"
|
||||
type="text"
|
||||
:value="getFormattedCurrency(field.fieldname, data)"
|
||||
:placeholder="getPlaceholder(field)"
|
||||
:disabled="Boolean(field.read_only)"
|
||||
@change="data[field.fieldname] = flt($event.target.value)"
|
||||
/>
|
||||
<FormControl
|
||||
v-else
|
||||
type="text"
|
||||
:placeholder="getPlaceholder(field)"
|
||||
v-model="data[field.fieldname]"
|
||||
:disabled="Boolean(field.read_only)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</Section>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</Section>
|
||||
</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({
|
||||
|
||||
@ -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'
|
||||
|
||||
@ -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'
|
||||
|
||||
@ -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'
|
||||
|
||||
@ -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'
|
||||
|
||||
@ -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'
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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"
|
||||
@ -97,11 +97,11 @@
|
||||
<NestedPopover>
|
||||
<template #target="{ open }">
|
||||
<Button
|
||||
:label="data[field.name]"
|
||||
:label="data[field.fieldname]"
|
||||
class="dropdown-button flex w-full items-center justify-between rounded border border-gray-100 bg-surface-gray-2 px-2 py-1.5 text-base text-ink-gray-8 placeholder-ink-gray-4 transition-colors hover:border-outline-gray-modals hover:bg-surface-gray-3 focus:border-outline-gray-4 focus:bg-surface-white focus:shadow-sm focus:outline-none focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3"
|
||||
>
|
||||
<div v-if="data[field.name]" class="truncate">
|
||||
{{ data[field.name] }}
|
||||
<div v-if="data[field.fieldname]" class="truncate">
|
||||
{{ data[field.fieldname] }}
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
@ -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
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -37,15 +37,17 @@
|
||||
</template>
|
||||
</LayoutHeader>
|
||||
<div v-if="deal.data" class="flex h-full overflow-hidden">
|
||||
<Tabs v-model="tabIndex" :tabs="tabs" class="!h-full">
|
||||
<Activities
|
||||
ref="activities"
|
||||
doctype="CRM Deal"
|
||||
:tabs="tabs"
|
||||
v-model:reload="reload"
|
||||
v-model:tabIndex="tabIndex"
|
||||
v-model="deal"
|
||||
/>
|
||||
<Tabs as="div" v-model="tabIndex" :tabs="tabs">
|
||||
<template #tab-panel>
|
||||
<Activities
|
||||
ref="activities"
|
||||
doctype="CRM Deal"
|
||||
:tabs="tabs"
|
||||
v-model:reload="reload"
|
||||
v-model:tabIndex="tabIndex"
|
||||
v-model="deal"
|
||||
/>
|
||||
</template>
|
||||
</Tabs>
|
||||
<Resizer side="right" class="flex flex-col justify-between border-l">
|
||||
<div
|
||||
|
||||
@ -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,15 +42,17 @@
|
||||
</template>
|
||||
</LayoutHeader>
|
||||
<div v-if="lead?.data" class="flex h-full overflow-hidden">
|
||||
<Tabs v-model="tabIndex" class="!h-full" :tabs="tabs">
|
||||
<Activities
|
||||
ref="activities"
|
||||
doctype="CRM Lead"
|
||||
:tabs="tabs"
|
||||
v-model:reload="reload"
|
||||
v-model:tabIndex="tabIndex"
|
||||
v-model="lead"
|
||||
/>
|
||||
<Tabs as="div" v-model="tabIndex" :tabs="tabs">
|
||||
<template #tab-panel>
|
||||
<Activities
|
||||
ref="activities"
|
||||
doctype="CRM Lead"
|
||||
:tabs="tabs"
|
||||
v-model:reload="reload"
|
||||
v-model:tabIndex="tabIndex"
|
||||
v-model="lead"
|
||||
/>
|
||||
</template>
|
||||
</Tabs>
|
||||
<Resizer class="flex flex-col justify-between border-l" side="right">
|
||||
<div
|
||||
|
||||
@ -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"
|
||||
@update="updateField"
|
||||
/>
|
||||
</Section>
|
||||
</div>
|
||||
</div>
|
||||
<SidePanelLayout
|
||||
v-model="contact.data"
|
||||
:sections="sections.data"
|
||||
doctype="Contact"
|
||||
@update="updateField"
|
||||
@reload="sections.reload"
|
||||
/>
|
||||
</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 {
|
||||
|
||||
@ -48,139 +48,141 @@
|
||||
</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"
|
||||
>
|
||||
<div v-if="tab.name == 'Details'">
|
||||
<SLASection
|
||||
v-if="deal.data.sla_status"
|
||||
v-model="deal.data"
|
||||
@updateField="updateField"
|
||||
/>
|
||||
<div
|
||||
v-if="sections.data"
|
||||
class="flex flex-1 flex-col justify-between overflow-hidden"
|
||||
>
|
||||
<SidePanelLayout
|
||||
<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"
|
||||
v-model="deal.data"
|
||||
:sections="sections.data"
|
||||
doctype="CRM Deal"
|
||||
v-slot="{ section }"
|
||||
@update="updateField"
|
||||
@reload="sections.reload"
|
||||
@updateField="updateField"
|
||||
/>
|
||||
<div
|
||||
v-if="sections.data"
|
||||
class="flex flex-1 flex-col justify-between overflow-hidden"
|
||||
>
|
||||
<div
|
||||
v-if="section.name == 'contacts_section'"
|
||||
class="contacts-area"
|
||||
<SidePanelLayout
|
||||
v-model="deal.data"
|
||||
:sections="sections.data"
|
||||
doctype="CRM Deal"
|
||||
v-slot="{ section }"
|
||||
@update="updateField"
|
||||
@reload="sections.reload"
|
||||
>
|
||||
<div
|
||||
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"
|
||||
v-if="section.name == 'contacts_section'"
|
||||
class="contacts-area"
|
||||
>
|
||||
<LoadingIndicator class="h-4 w-4" />
|
||||
<span>{{ __('Loading...') }}</span>
|
||||
</div>
|
||||
<div
|
||||
v-else-if="section.contacts.length"
|
||||
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']">
|
||||
<Section :opened="contact.opened">
|
||||
<template #header="{ opened, toggle }">
|
||||
<div
|
||||
class="flex cursor-pointer items-center justify-between gap-2 pr-1 text-base leading-5 text-ink-gray-7"
|
||||
>
|
||||
<div
|
||||
class="flex h-7 items-center gap-2 truncate"
|
||||
@click="toggle()"
|
||||
>
|
||||
<Avatar
|
||||
:label="contact.full_name"
|
||||
:image="contact.image"
|
||||
size="md"
|
||||
/>
|
||||
<div class="truncate">
|
||||
{{ contact.full_name }}
|
||||
</div>
|
||||
<Badge
|
||||
v-if="contact.is_primary"
|
||||
class="ml-2"
|
||||
variant="outline"
|
||||
:label="__('Primary')"
|
||||
theme="green"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<Dropdown :options="contactOptions(contact.name)">
|
||||
<Button
|
||||
icon="more-horizontal"
|
||||
class="text-ink-gray-5"
|
||||
variant="ghost"
|
||||
/>
|
||||
</Dropdown>
|
||||
<Button
|
||||
variant="ghost"
|
||||
@click="
|
||||
router.push({
|
||||
name: 'Contact',
|
||||
params: { contactId: contact.name },
|
||||
})
|
||||
"
|
||||
>
|
||||
<ArrowUpRightIcon class="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="ghost" @click="toggle()">
|
||||
<FeatherIcon
|
||||
name="chevron-right"
|
||||
class="h-4 w-4 text-ink-gray-9 transition-all duration-300 ease-in-out"
|
||||
:class="{ 'rotate-90': opened }"
|
||||
/>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div
|
||||
class="flex flex-col gap-1.5 text-base text-ink-gray-8"
|
||||
>
|
||||
<div class="flex items-center gap-3 pb-1.5 pl-1 pt-4">
|
||||
<Email2Icon class="h-4 w-4" />
|
||||
{{ contact.email }}
|
||||
</div>
|
||||
<div class="flex items-center gap-3 p-1 py-1.5">
|
||||
<PhoneIcon class="h-4 w-4" />
|
||||
{{ contact.mobile_no }}
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
<div
|
||||
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" />
|
||||
<span>{{ __('Loading...') }}</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="i != section.contacts.length - 1"
|
||||
class="mx-2 h-px border-t border-outline-gray-modals"
|
||||
/>
|
||||
v-else-if="section.contacts.length"
|
||||
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']"
|
||||
>
|
||||
<Section :opened="contact.opened">
|
||||
<template #header="{ opened, toggle }">
|
||||
<div
|
||||
class="flex cursor-pointer items-center justify-between gap-2 pr-1 text-base leading-5 text-ink-gray-7"
|
||||
>
|
||||
<div
|
||||
class="flex h-7 items-center gap-2 truncate"
|
||||
@click="toggle()"
|
||||
>
|
||||
<Avatar
|
||||
:label="contact.full_name"
|
||||
:image="contact.image"
|
||||
size="md"
|
||||
/>
|
||||
<div class="truncate">
|
||||
{{ contact.full_name }}
|
||||
</div>
|
||||
<Badge
|
||||
v-if="contact.is_primary"
|
||||
class="ml-2"
|
||||
variant="outline"
|
||||
:label="__('Primary')"
|
||||
theme="green"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<Dropdown :options="contactOptions(contact.name)">
|
||||
<Button
|
||||
icon="more-horizontal"
|
||||
class="text-ink-gray-5"
|
||||
variant="ghost"
|
||||
/>
|
||||
</Dropdown>
|
||||
<Button
|
||||
variant="ghost"
|
||||
@click="
|
||||
router.push({
|
||||
name: 'Contact',
|
||||
params: { contactId: contact.name },
|
||||
})
|
||||
"
|
||||
>
|
||||
<ArrowUpRightIcon class="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="ghost" @click="toggle()">
|
||||
<FeatherIcon
|
||||
name="chevron-right"
|
||||
class="h-4 w-4 text-ink-gray-9 transition-all duration-300 ease-in-out"
|
||||
:class="{ 'rotate-90': opened }"
|
||||
/>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div
|
||||
class="flex flex-col gap-1.5 text-base text-ink-gray-8"
|
||||
>
|
||||
<div class="flex items-center gap-3 pb-1.5 pl-1 pt-4">
|
||||
<Email2Icon class="h-4 w-4" />
|
||||
{{ contact.email }}
|
||||
</div>
|
||||
<div class="flex items-center gap-3 p-1 py-1.5">
|
||||
<PhoneIcon class="h-4 w-4" />
|
||||
{{ contact.mobile_no }}
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
</div>
|
||||
<div
|
||||
v-if="i != section.contacts.length - 1"
|
||||
class="mx-2 h-px border-t border-outline-gray-modals"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="flex h-20 items-center justify-center text-base text-ink-gray-5"
|
||||
>
|
||||
{{ __('No contacts added') }}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="flex h-20 items-center justify-center text-base text-ink-gray-5"
|
||||
>
|
||||
{{ __('No contacts added') }}
|
||||
</div>
|
||||
</div>
|
||||
</SidePanelLayout>
|
||||
</SidePanelLayout>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Activities
|
||||
v-else
|
||||
doctype="CRM Deal"
|
||||
:tabs="tabs"
|
||||
v-model:reload="reload"
|
||||
v-model:tabIndex="tabIndex"
|
||||
v-model="deal"
|
||||
/>
|
||||
<Activities
|
||||
v-else
|
||||
doctype="CRM Deal"
|
||||
:tabs="tabs"
|
||||
v-model:reload="reload"
|
||||
v-model:tabIndex="tabIndex"
|
||||
v-model="deal"
|
||||
/>
|
||||
</TabPanel>
|
||||
</Tabs>
|
||||
</div>
|
||||
<OrganizationModal
|
||||
@ -241,6 +243,8 @@ import {
|
||||
Dropdown,
|
||||
Avatar,
|
||||
Tabs,
|
||||
TabList,
|
||||
TabPanel,
|
||||
Breadcrumbs,
|
||||
call,
|
||||
usePageMeta,
|
||||
|
||||
@ -53,40 +53,37 @@
|
||||
</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"
|
||||
>
|
||||
<div v-if="tab.name == 'Details'">
|
||||
<SLASection
|
||||
v-if="lead.data.sla_status"
|
||||
v-model="lead.data"
|
||||
@updateField="updateField"
|
||||
/>
|
||||
<div
|
||||
v-if="sections.data"
|
||||
class="flex flex-1 flex-col justify-between overflow-hidden"
|
||||
>
|
||||
<SidePanelLayout
|
||||
<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"
|
||||
v-model="lead.data"
|
||||
:sections="sections.data"
|
||||
doctype="CRM Lead"
|
||||
@update="updateField"
|
||||
@reload="sections.reload"
|
||||
@updateField="updateField"
|
||||
/>
|
||||
<div
|
||||
v-if="sections.data"
|
||||
class="flex flex-1 flex-col justify-between overflow-hidden"
|
||||
>
|
||||
<SidePanelLayout
|
||||
v-model="lead.data"
|
||||
:sections="sections.data"
|
||||
doctype="CRM Lead"
|
||||
@update="updateField"
|
||||
@reload="sections.reload"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Activities
|
||||
v-else
|
||||
doctype="CRM Lead"
|
||||
:tabs="tabs"
|
||||
v-model:reload="reload"
|
||||
v-model:tabIndex="tabIndex"
|
||||
v-model="lead"
|
||||
/>
|
||||
<Activities
|
||||
v-else
|
||||
doctype="CRM Lead"
|
||||
:tabs="tabs"
|
||||
v-model:reload="reload"
|
||||
v-model:tabIndex="tabIndex"
|
||||
v-model="lead"
|
||||
/>
|
||||
</TabPanel>
|
||||
</Tabs>
|
||||
</div>
|
||||
<Dialog
|
||||
@ -193,6 +190,8 @@ import {
|
||||
createResource,
|
||||
Dropdown,
|
||||
Tabs,
|
||||
TabList,
|
||||
TabPanel,
|
||||
Switch,
|
||||
Breadcrumbs,
|
||||
call,
|
||||
|
||||
@ -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"
|
||||
doctype="CRM Organization"
|
||||
@update="updateField"
|
||||
/>
|
||||
</Section>
|
||||
</div>
|
||||
</div>
|
||||
<SidePanelLayout
|
||||
v-model="organization.doc"
|
||||
:sections="sections.data"
|
||||
doctype="CRM Organization"
|
||||
@update="updateField"
|
||||
@reload="sections.reload"
|
||||
/>
|
||||
</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) => {
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -2388,10 +2388,10 @@ fraction.js@^4.3.7:
|
||||
resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.3.7.tgz#06ca0085157e42fda7f9e726e79fefc4068840f7"
|
||||
integrity sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==
|
||||
|
||||
frappe-ui@^0.1.98:
|
||||
version "0.1.98"
|
||||
resolved "https://registry.yarnpkg.com/frappe-ui/-/frappe-ui-0.1.98.tgz#57bac80f2172239a7e9fbeff1223184ca1b0b568"
|
||||
integrity sha512-uMdzjyCFWLJltwbcubJpdjlGsnE1qRALe2AUMWf1DRCYqpoULBNJkpu6YXLwoEiLMxhAUFy7HmdgdgUc9Y89xg==
|
||||
frappe-ui@^0.1.99:
|
||||
version "0.1.99"
|
||||
resolved "https://registry.yarnpkg.com/frappe-ui/-/frappe-ui-0.1.99.tgz#66400c432856531493b81abd31dda2b7985e60a6"
|
||||
integrity sha512-EEEeO4VfEW2bpimNgVvuTHiGa/du4qrt7/aCuaHkBt2p26GZcEiwZGeI+FHJERs2vsZ2PcIG4M8n4S8XU+KFPQ==
|
||||
dependencies:
|
||||
"@headlessui/vue" "^1.7.14"
|
||||
"@popperjs/core" "^2.11.2"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user