fix: using frappeui Tabs component in Lead/Deal
This commit is contained in:
Shariq Ansari
parent
afa7f61599
commit
7e8f6d1c64
@ -1 +1 @@
|
||||
Subproject commit 8762f85ef72c01c2dbf9fbe2bd7417911d347ac3
|
||||
Subproject commit 167ff453cb525674f976d53b126900b80b9a80a2
|
||||
8
frontend/.gitignore
vendored
8
frontend/.gitignore
vendored
@ -2,10 +2,4 @@ node_modules
|
||||
.DS_Store
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
*.pyc
|
||||
*.egg-info
|
||||
*.swp
|
||||
tags
|
||||
crm/public/frontend
|
||||
__pycache__
|
||||
*.local
|
||||
@ -16,7 +16,7 @@
|
||||
"@vueuse/integrations": "^10.3.0",
|
||||
"autoprefixer": "^10.4.14",
|
||||
"feather-icons": "^4.28.0",
|
||||
"frappe-ui": "^0.1.5",
|
||||
"frappe-ui": "^0.1.6",
|
||||
"pinia": "^2.0.33",
|
||||
"postcss": "^8.4.5",
|
||||
"socket.io-client": "^4.7.2",
|
||||
|
||||
@ -36,43 +36,9 @@
|
||||
</template>
|
||||
</LayoutHeader>
|
||||
<div v-if="deal.data" class="flex h-full overflow-hidden">
|
||||
<TabGroup as="div" class="flex flex-1 flex-col" @change="onTabChange">
|
||||
<TabList class="relative flex items-center gap-6 border-b pl-5">
|
||||
<Tab
|
||||
ref="tabRef"
|
||||
as="template"
|
||||
v-for="tab in tabs"
|
||||
:key="tab.label"
|
||||
v-slot="{ selected }"
|
||||
>
|
||||
<button
|
||||
class="-mb-[1px] flex items-center gap-2 border-b border-transparent py-2.5 text-base text-gray-600 transition-all duration-300 ease-in-out hover:border-gray-400 hover:text-gray-900"
|
||||
:class="{ 'text-gray-900': selected }"
|
||||
>
|
||||
<component v-if="tab.icon" :is="tab.icon" class="h-5" />
|
||||
{{ tab.label }}
|
||||
</button>
|
||||
</Tab>
|
||||
<div
|
||||
ref="indicator"
|
||||
class="absolute -bottom-[1px] h-[1px] w-[82px] bg-gray-900"
|
||||
:style="{ left: `${indicatorLeftValue}px` }"
|
||||
/>
|
||||
</TabList>
|
||||
<TabPanels class="flex flex-1 overflow-hidden">
|
||||
<TabPanel
|
||||
class="flex flex-1 flex-col overflow-y-auto"
|
||||
v-for="tab in tabs"
|
||||
:key="tab.label"
|
||||
>
|
||||
<Activities
|
||||
:title="tab.label"
|
||||
v-model:reload="reload"
|
||||
v-model="deal"
|
||||
/>
|
||||
</TabPanel>
|
||||
</TabPanels>
|
||||
</TabGroup>
|
||||
<Tabs v-model="tabIndex" v-slot="{ tab }" :tabs="tabs">
|
||||
<Activities :title="tab.label" v-model:reload="reload" v-model="deal" />
|
||||
</Tabs>
|
||||
<div class="flex w-[352px] flex-col justify-between border-l">
|
||||
<div
|
||||
class="flex h-[41px] items-center border-b px-5 py-2.5 text-lg font-semibold"
|
||||
@ -352,8 +318,6 @@ import Toggler from '@/components/Toggler.vue'
|
||||
import Activities from '@/components/Activities.vue'
|
||||
import Breadcrumbs from '@/components/Breadcrumbs.vue'
|
||||
import UserAvatar from '@/components/UserAvatar.vue'
|
||||
import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue'
|
||||
import { TransitionPresets, useTransition } from '@vueuse/core'
|
||||
import {
|
||||
dealStatuses,
|
||||
statusDropdownOptions,
|
||||
@ -372,6 +336,7 @@ import {
|
||||
Dropdown,
|
||||
Tooltip,
|
||||
Avatar,
|
||||
Tabs,
|
||||
} from 'frappe-ui'
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
@ -434,6 +399,7 @@ const breadcrumbs = computed(() => {
|
||||
return items
|
||||
})
|
||||
|
||||
const tabIndex = ref(0)
|
||||
const tabs = [
|
||||
{
|
||||
label: 'Activity',
|
||||
@ -469,21 +435,6 @@ function validateFile(file) {
|
||||
}
|
||||
}
|
||||
|
||||
const tabRef = ref([])
|
||||
const indicator = ref(null)
|
||||
|
||||
let indicatorLeft = ref(20)
|
||||
const indicatorLeftValue = useTransition(indicatorLeft, {
|
||||
duration: 250,
|
||||
ease: TransitionPresets.easeOutCubic,
|
||||
})
|
||||
|
||||
function onTabChange(index) {
|
||||
const selectedTab = tabRef.value[index].el
|
||||
indicator.value.style.width = `${selectedTab.offsetWidth}px`
|
||||
indicatorLeft.value = selectedTab.offsetLeft
|
||||
}
|
||||
|
||||
const detailSections = computed(() => {
|
||||
return [
|
||||
{
|
||||
|
||||
@ -39,43 +39,9 @@
|
||||
</template>
|
||||
</LayoutHeader>
|
||||
<div v-if="lead?.data" class="flex h-full overflow-hidden">
|
||||
<TabGroup as="div" class="flex flex-1 flex-col" @change="onTabChange">
|
||||
<TabList class="relative flex items-center gap-6 border-b pl-5">
|
||||
<Tab
|
||||
ref="tabRef"
|
||||
as="template"
|
||||
v-for="tab in tabs"
|
||||
:key="tab.label"
|
||||
v-slot="{ selected }"
|
||||
>
|
||||
<button
|
||||
class="-mb-[1px] flex items-center gap-2 border-b border-transparent py-2.5 text-base text-gray-600 transition-all duration-300 ease-in-out hover:border-gray-400 hover:text-gray-900"
|
||||
:class="{ 'text-gray-900': selected }"
|
||||
>
|
||||
<component v-if="tab.icon" :is="tab.icon" class="h-5" />
|
||||
{{ tab.label }}
|
||||
</button>
|
||||
</Tab>
|
||||
<div
|
||||
ref="indicator"
|
||||
class="absolute -bottom-[1px] h-[1px] w-[82px] bg-gray-900"
|
||||
:style="{ left: `${indicatorLeftValue}px` }"
|
||||
/>
|
||||
</TabList>
|
||||
<TabPanels class="flex flex-1 overflow-hidden">
|
||||
<TabPanel
|
||||
class="flex flex-1 flex-col overflow-y-auto"
|
||||
v-for="tab in tabs"
|
||||
:key="tab.label"
|
||||
>
|
||||
<Activities
|
||||
:title="tab.label"
|
||||
v-model:reload="reload"
|
||||
v-model="lead"
|
||||
/>
|
||||
</TabPanel>
|
||||
</TabPanels>
|
||||
</TabGroup>
|
||||
<Tabs v-model="tabIndex" v-slot="{ tab }" :tabs="tabs">
|
||||
<Activities :title="tab.label" v-model:reload="reload" v-model="lead" />
|
||||
</Tabs>
|
||||
<div class="flex w-[352px] flex-col justify-between border-l">
|
||||
<div
|
||||
class="flex h-[41px] items-center border-b px-5 py-2.5 text-lg font-semibold"
|
||||
@ -323,8 +289,6 @@ import Toggler from '@/components/Toggler.vue'
|
||||
import Activities from '@/components/Activities.vue'
|
||||
import Breadcrumbs from '@/components/Breadcrumbs.vue'
|
||||
import UserAvatar from '@/components/UserAvatar.vue'
|
||||
import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue'
|
||||
import { TransitionPresets, useTransition } from '@vueuse/core'
|
||||
import {
|
||||
leadStatuses,
|
||||
statusDropdownOptions,
|
||||
@ -343,12 +307,12 @@ import {
|
||||
Dropdown,
|
||||
Tooltip,
|
||||
Avatar,
|
||||
Tabs,
|
||||
} from 'frappe-ui'
|
||||
import { ref, computed } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import CameraIcon from '../components/Icons/CameraIcon.vue'
|
||||
|
||||
|
||||
const { getUser, users } = usersStore()
|
||||
const { contacts } = contactsStore()
|
||||
const router = useRouter()
|
||||
@ -412,6 +376,7 @@ const breadcrumbs = computed(() => {
|
||||
return items
|
||||
})
|
||||
|
||||
const tabIndex = ref(0)
|
||||
const tabs = [
|
||||
{
|
||||
label: 'Activity',
|
||||
@ -447,21 +412,6 @@ function validateFile(file) {
|
||||
}
|
||||
}
|
||||
|
||||
const tabRef = ref([])
|
||||
const indicator = ref(null)
|
||||
|
||||
let indicatorLeft = ref(20)
|
||||
const indicatorLeftValue = useTransition(indicatorLeft, {
|
||||
duration: 250,
|
||||
ease: TransitionPresets.easeOutCubic,
|
||||
})
|
||||
|
||||
function onTabChange(index) {
|
||||
const selectedTab = tabRef.value[index].el
|
||||
indicator.value.style.width = `${selectedTab.offsetWidth}px`
|
||||
indicatorLeft.value = selectedTab.offsetLeft
|
||||
}
|
||||
|
||||
const detailSections = computed(() => {
|
||||
return [
|
||||
{
|
||||
|
||||
1261
frontend/yarn.lock
1261
frontend/yarn.lock
File diff suppressed because it is too large
Load Diff
@ -1,6 +1,6 @@
|
||||
{
|
||||
"private": true,
|
||||
"workspaces": ["frappe-ui", "frontend"],
|
||||
"aworkspaces": ["frappe-ui", "frontend"],
|
||||
"scripts": {
|
||||
"postinstall": "cd frontend && yarn install",
|
||||
"dev": "cd frontend && yarn dev",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user