test/crm
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Added collapseIconPostion & updated isOpened prop to opened

Browse Source
This commit is contained in:
Shariq Ansari 2024-12-05 17:47:59 +05:30
parent 36beae35ca
commit 94d5dc6870
13 changed files with 51 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/components/DocFields.vue
View File

@ -2,7 +2,7 @@
<div
class="my-3 flex items-center justify-between text-lg font-medium sm:mb-4 sm:mt-8"
>
<div class="flex h-8 items-center text-xl font-semibold text-gray-800">
<div class="flex h-8 items-center text-xl font-semibold text-ink-gray-8 ">
{{ __('Data') }}
<Badge
v-if="data.isDirty"
@ -33,7 +33,7 @@
</div>
<div
v-else
class="flex flex-col gap-3 mb-3 border border-outline-gray-1 p-3 sm:p-5 rounded-lg"
class="flex flex-col gap-3 border border-outline-gray-1 rounded-lg"
>
<Fields v-if="sections.data" :sections="sections.data" :data="data.doc" />
</div>

2
frontend/src/components/Layouts/AppSidebar.vue
View File

@ -37,7 +37,7 @@
<Section
:label="view.name"
:hideLabel="view.hideLabel"
:isOpened="view.opened"
:opened="view.opened"
>
<template #header="{ opened, hide, toggle }">
<div

2
frontend/src/components/Mobile/MobileSidebar.vue
View File

@ -38,7 +38,7 @@
<Section
:label="view.name"
:hideLabel="view.hideLabel"
:isOpened="view.opened"
:opened="view.opened"
>
<template #header="{ opened, hide, toggle }">
<div

30
frontend/src/components/Section.vue
View File

@ -2,15 +2,25 @@
<slot name="header" v-bind="{ opened, hide, open, close, toggle }">
<div v-if="!hide" class="flex items-center justify-between">
<div
class="flex h-7 text-ink-gray-9 max-w-fit cursor-pointer items-center gap-2 pl-2 pr-3 text-base font-semibold leading-5"
class="flex text-ink-gray-9 max-w-fit cursor-pointer items-center gap-2 text-base"
v-bind="$attrs"
@click="toggle()"
>
<FeatherIcon
v-if="collapseIconPosition === 'left'"
name="chevron-right"
class="h-4 transition-all duration-300 ease-in-out"
:class="{ 'rotate-90': opened }"
/>
<span>
{{ __(label) || __('Untitled') }}
</span>
<FeatherIcon
v-if="collapseIconPosition === 'right'"
name="chevron-right"
class="h-4 transition-all duration-300 ease-in-out"
:class="{ 'rotate-90': opened }"
/>
{{ __(label) || __('Untitled') }}
</div>
<slot name="actions"></slot>
</div>
@ -23,13 +33,14 @@
enter-from-class="max-h-0 overflow-hidden"
leave-to-class="max-h-0 overflow-hidden"
>
<div v-if="opened">
<div v-show="opened">
<slot v-bind="{ opened, open, close, toggle }" />
</div>
</transition>
</template>
<script setup>
import { ref } from 'vue'
const props = defineProps({
label: {
type: String,
@ -39,11 +50,19 @@ const props = defineProps({
type: Boolean,
default: false,
},
isOpened: {
opened: {
type: Boolean,
default: true,
},
collapseIconPosition: {
type: String,
default: 'left',
},
})
const hide = ref(props.hideLabel)
const opened = ref(props.opened)
function toggle() {
opened.value = !opened.value
}
@ -55,7 +74,4 @@ function open() {
function close() {
opened.value = false
}
let opened = ref(props.isOpened)
let hide = ref(props.hideLabel)
</script>

6
frontend/src/components/Settings/SidePanelModal.vue
View File

@ -42,7 +42,11 @@
class="flex flex-col py-1.5 px-1"
:class="{ 'border-b': i !== sections.data?.length - 1 }"
>
<Section :is-opened="section.opened" :label="section.label">
<Section
class="p-2"
:label="section.label"
:opened="section.opened"
>
<SectionFields
:fields="section.fields"
:isLastSection="i == section.data?.length - 1"

6
frontend/src/pages/Contact.vue
View File

@ -60,9 +60,7 @@
clip-path: inset(22px 0 0 0);
"
>
<CameraIcon
class="h-6 w-6 cursor-pointer text-white"
/>
<CameraIcon class="h-6 w-6 cursor-pointer text-white" />
</div>
</component>
</div>
@ -129,7 +127,7 @@
class="flex flex-col p-3"
:class="{ 'border-b': i !== fieldsLayout.data.length - 1 }"
>
<Section :is-opened="section.opened" :label="section.label">
<Section :label="section.label" :opened="section.opened">
<template #actions>
<Button
v-if="i == 0 && isManager()"

8
frontend/src/pages/Deal.vue
View File

@ -124,7 +124,11 @@
class="section flex flex-col p-3"
:class="{ 'border-b': i !== fieldsLayout.data.length - 1 }"
>
<Section :is-opened="section.opened" :label="section.label">
<Section
class="px-2 font-semibold"
:label="section.label"
:opened="section.opened"
>
<template #actions>
<div v-if="section.contacts" class="pr-2">
<Link
@ -189,7 +193,7 @@
class="px-2 pb-2.5"
:class="[i == 0 ? 'pt-5' : 'pt-2.5']"
>
<Section :is-opened="contact.opened">
<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"

6
frontend/src/pages/Lead.vue
View File

@ -177,7 +177,11 @@
class="flex flex-col p-3"
:class="{ 'border-b': i !== fieldsLayout.data.length - 1 }"
>
<Section :is-opened="section.opened" :label="section.label">
<Section
class="px-2 font-semibold"
:label="section.label"
:opened="section.opened"
>
<SectionFields
:fields="section.fields"
:isLastSection="i == fieldsLayout.data.length - 1"

2
frontend/src/pages/MobileContact.vue
View File

@ -141,7 +141,7 @@
class="flex flex-col px-2 py-3 sm:p-3"
:class="{ 'border-b': i !== fieldsLayout.data.length - 1 }"
>
<Section :is-opened="section.opened" :label="section.label">
<Section :label="section.label" :opened="section.opened">
<SectionFields
:fields="section.fields"
:isLastSection="i == fieldsLayout.data.length - 1"

4
frontend/src/pages/MobileDeal.vue
View File

@ -69,7 +69,7 @@
class="flex flex-col px-2 py-3 sm:p-3"
:class="{ 'border-b': i !== fieldsLayout.data.length - 1 }"
>
<Section :is-opened="section.opened" :label="section.label">
<Section :label="section.label" :opened="section.opened">
<template #actions>
<div v-if="section.contacts" class="pr-2">
<Link
@ -124,7 +124,7 @@
class="px-2 pb-2.5"
:class="[i == 0 ? 'pt-5' : 'pt-2.5']"
>
<Section :is-opened="contact.opened">
<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"

2
frontend/src/pages/MobileLead.vue
View File

@ -74,7 +74,7 @@
class="flex flex-col px-2 py-3 sm:p-3"
:class="{ 'border-b': i !== fieldsLayout.data.length - 1 }"
>
<Section :is-opened="section.opened" :label="section.label">
<Section :label="section.label" :opened="section.opened">
<SectionFields
:fields="section.fields"
:isLastSection="i == fieldsLayout.data.length - 1"

2
frontend/src/pages/MobileOrganization.vue
View File

@ -123,7 +123,7 @@
class="flex flex-col px-2 py-3 sm:p-3"
:class="{ 'border-b': i !== fieldsLayout.data.length - 1 }"
>
<Section :is-opened="section.opened" :label="section.label">
<Section :label="section.label" :opened="section.opened">
<SectionFields
:fields="section.fields"
:isLastSection="i == fieldsLayout.data.length - 1"

2
frontend/src/pages/Organization.vue
View File

@ -112,7 +112,7 @@
class="flex flex-col p-3"
:class="{ 'border-b': i !== fieldsLayout.data.length - 1 }"
>
<Section :is-opened="section.opened" :label="section.label">
<Section :label="section.label" :opened="section.opened">
<template #actions>
<Button
v-if="i == 0 && isManager()"