test/jcrm
1
0
Fork 0
forked from test/crm
Code Pull Requests Activity

style: fine tunning lead details section

Browse Source
This commit is contained in:
Shariq Ansari 2023-08-24 02:19:27 +05:30
parent 55c15f3a21
commit 8879f0fdd4
1 changed files with 35 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -101,7 +101,7 @@
</div> </div>
</div> </div>
<div class="flex-1 flex flex-col justify-between overflow-hidden"> <div class="flex-1 flex flex-col justify-between overflow-hidden">
<div class="flex flex-col gap-6.5 p-3 overflow-y-auto"> <div class="flex flex-col gap-6 p-3 overflow-y-auto">
<div <div
v-for="section in detailSections" v-for="section in detailSections"
:key="section.label" :key="section.label"
@ -127,21 +127,22 @@
enter-from-class="max-h-0 overflow-hidden" enter-from-class="max-h-0 overflow-hidden"
leave-to-class="max-h-0 overflow-hidden" leave-to-class="max-h-0 overflow-hidden"
> >
<div v-if="opened" class="flex flex-col gap-3"> <div v-if="opened" class="flex flex-col gap-1.5">
<div <div
v-for="field in section.fields" v-for="field in section.fields"
:key="field.label" :key="field.label"
class="flex items-center px-3 gap-2 text-base leading-5 first:mt-4.5" class="flex items-center px-3 gap-2 text-base leading-5 first:mt-3"
> >
<div class="text-gray-600 w-[106px]"> <div class="text-gray-600 w-[106px]">
{{ field.label }} {{ field.label }}
</div> </div>
<div class="flex-1 w-full"> <div class="flex-1">
<FormControl <FormControl
v-if="field.type === 'select'" v-if="field.type === 'select'"
type="select" type="select"
:options="field.options" :options="field.options"
v-model="lead.data[field.name]" v-model="lead.data[field.name]"
class="form-control cursor-pointer [&_select]:cursor-pointer"
> >
<template #prefix> <template #prefix>
<IndicatorIcon <IndicatorIcon
@ -152,6 +153,7 @@
<FormControl <FormControl
v-else-if="field.type === 'email'" v-else-if="field.type === 'email'"
type="email" type="email"
class="form-control"
v-model="lead.data[field.name]" v-model="lead.data[field.name]"
/> />
<Autocomplete <Autocomplete
@ -161,14 +163,23 @@
@change=" @change="
(option) => (lead.data[field.name] = option.email) (option) => (lead.data[field.name] = option.email)
" "
class="form-control"
placeholder="Lead owner" placeholder="Lead owner"
> >
<template #prefix> <template #target="{ togglePopover }">
<UserAvatar <Button
class="mr-2" variant="ghost"
:user="lead.data[field.name]" @click="togglePopover()"
size="sm" :label="getUser(lead.data[field.name]).full_name"
/> class="!justify-start w-full"
>
<template #prefix>
<UserAvatar
:user="lead.data[field.name]"
size="sm"
/>
</template>
</Button>
</template> </template>
<template #item-prefix="{ option }"> <template #item-prefix="{ option }">
<UserAvatar <UserAvatar
@ -209,6 +220,7 @@
v-else v-else
type="text" type="text"
v-model="lead.data[field.name]" v-model="lead.data[field.name]"
class="form-control"
/> />
</div> </div>
</div> </div>
@ -418,7 +430,7 @@ const detailSections = computed(() => {
options: statusDropdownOptions, options: statusDropdownOptions,
}, },
{ {
label: 'Lead Owner', label: 'Lead owner',
type: 'link', type: 'link',
name: 'lead_owner', name: 'lead_owner',
}, },
@ -439,12 +451,12 @@ const detailSections = computed(() => {
opened: true, opened: true,
fields: [ fields: [
{ {
label: 'First Name', label: 'First name',
type: 'data', type: 'data',
name: 'first_name', name: 'first_name',
}, },
{ {
label: 'Last Name', label: 'Last name',
type: 'data', type: 'data',
name: 'last_name', name: 'last_name',
}, },
@ -454,7 +466,7 @@ const detailSections = computed(() => {
name: 'email', name: 'email',
}, },
{ {
label: 'Mobile No.', label: 'Mobile no.',
type: 'phone', type: 'phone',
name: 'mobile_no', name: 'mobile_no',
}, },
@ -477,3 +489,12 @@ const activeAgents = computed(() => {
}) })
}) })
</script> </script>
<style scoped>
:deep(.form-control input),
:deep(.form-control select),
:deep(.form-control button) {
border-color: transparent;
background: white;
}
</style>