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

fix: listview layout

Browse Source
This commit is contained in:
Shariq Ansari 2023-09-20 19:08:24 +05:30
parent 95639b07f6
commit 78be1a809a
5 changed files with 71 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

129
frontend/src/components/ListView.vue
View File

@ -3,7 +3,7 @@
<div class="flex flex-col overflow-y-hidden w-max min-w-full"> <div class="flex flex-col overflow-y-hidden w-max min-w-full">
<div <div
id="list-header" id="list-header"
class="flex space-x-4 items-center px-5 py-2 border-b" class="flex space-x-4 items-center mx-5 mb-2 p-2 rounded bg-gray-100"
> >
<Checkbox <Checkbox
class="duration-300 cursor-pointer" class="duration-300 cursor-pointer"
@ -13,7 +13,7 @@
<div <div
v-for="column in columns" v-for="column in columns"
:key="column" :key="column"
class="text-sm text-gray-600" class="text-base text-gray-600"
:class="[column.size, column.align]" :class="[column.size, column.align]"
> >
{{ column.label }} {{ column.label }}
@ -24,74 +24,79 @@
v-for="row in rows" v-for="row in rows"
:key="row[rowKey]" :key="row[rowKey]"
:to="$router.currentRoute.value.path + '/' + row[rowKey]" :to="$router.currentRoute.value.path + '/' + row[rowKey]"
class="flex space-x-4 items-center mx-2 px-3 py-2 border-b cursor-pointer transition-all duration-300 ease-in-out" class="flex flex-col mx-5 cursor-pointer transition-all duration-300 ease-in-out"
:class="
selections.has(row[rowKey])
? 'bg-gray-100 hover:bg-gray-200'
: 'hover:bg-gray-50'
"
> >
<Checkbox
:modelValue="selections.has(row[rowKey])"
@click.stop="toggleRow(row[rowKey])"
class="duration-300 cursor-pointer"
/>
<div <div
v-for="column in columns" class="flex space-x-4 items-center px-2 py-2.5 rounded"
:key="column.key" :class="
:class="[column.size, column.align]" selections.has(row[rowKey])
? 'bg-gray-100 hover:bg-gray-200'
: 'hover:bg-gray-50'
"
> >
<ListRowItem <Checkbox
:value="getValue(row[column.key]).label" :modelValue="selections.has(row[rowKey])"
:type="column.type" @click.stop="toggleRow(row[rowKey])"
:align="column.align" class="duration-300 cursor-pointer"
/>
<div
v-for="column in columns"
:key="column.key"
:class="[column.size, column.align]"
> >
<template #prefix> <ListRowItem
<div v-if="column.type === 'indicator'"> :value="getValue(row[column.key]).label"
<IndicatorIcon :class="getValue(row[column.key]).color" /> :type="column.type"
</div> :align="column.align"
<div v-else-if="column.type === 'avatar'"> >
<Avatar <template #prefix>
v-if="getValue(row[column.key]).label" <div v-if="column.type === 'indicator'">
class="flex items-center" <IndicatorIcon :class="getValue(row[column.key]).color" />
:image="getValue(row[column.key]).image" </div>
:label="getValue(row[column.key]).image_label" <div v-else-if="column.type === 'avatar'">
<Avatar
v-if="getValue(row[column.key]).label"
class="flex items-center"
:image="getValue(row[column.key]).image"
:label="getValue(row[column.key]).image_label"
size="md"
/>
</div>
<div v-else-if="column.type === 'logo'">
<Avatar
v-if="getValue(row[column.key]).label"
class="flex items-center"
:image="getValue(row[column.key]).logo"
:label="getValue(row[column.key]).image_label"
size="md"
shape="square"
/>
</div>
<div v-else-if="column.type === 'icon'">
<FeatherIcon
:name="getValue(row[column.key]).icon"
class="h-3 w-3"
/>
</div>
<div v-else-if="column.type === 'email'">
<FeatherIcon name="mail" class="h-3 w-3" />
</div>
<div v-else-if="column.type === 'phone'">
<FeatherIcon name="phone" class="h-3 w-3" />
</div>
</template>
<div v-if="column.type === 'badge'">
<Badge
:variant="'subtle'"
:theme="row[column.key].color"
size="md" size="md"
:label="row[column.key].label"
/> />
</div> </div>
<div v-else-if="column.type === 'logo'"> </ListRowItem>
<Avatar </div>
v-if="getValue(row[column.key]).label"
class="flex items-center"
:image="getValue(row[column.key]).logo"
:label="getValue(row[column.key]).image_label"
size="md"
shape="square"
/>
</div>
<div v-else-if="column.type === 'icon'">
<FeatherIcon
:name="getValue(row[column.key]).icon"
class="h-3 w-3"
/>
</div>
<div v-else-if="column.type === 'email'">
<FeatherIcon name="mail" class="h-3 w-3" />
</div>
<div v-else-if="column.type === 'phone'">
<FeatherIcon name="phone" class="h-3 w-3" />
</div>
</template>
<div v-if="column.type === 'badge'">
<Badge
:variant="'subtle'"
:theme="row[column.key].color"
size="md"
:label="row[column.key].label"
/>
</div>
</ListRowItem>
</div> </div>
<div class="mx-2 h-px border-t border-gray-200"></div>
</router-link> </router-link>
</div> </div>
<transition <transition

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

@ -4,7 +4,7 @@
<Breadcrumbs :items="[{ label: list.title }]" /> <Breadcrumbs :items="[{ label: list.title }]" />
</template> </template>
</LayoutHeader> </LayoutHeader>
<div class="flex justify-between items-center px-5 pb-2.5 border-b"> <div class="flex justify-between items-center px-5 pt-3 pb-4">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<Button label="Sort"> <Button label="Sort">
<template #prefix><SortIcon class="h-4" /></template> <template #prefix><SortIcon class="h-4" /></template>

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

@ -9,7 +9,7 @@
</Button> </Button>
</template> </template>
</LayoutHeader> </LayoutHeader>
<div class="flex justify-between items-center px-5 pb-2.5 border-b"> <div class="flex justify-between items-center px-5 pt-3 pb-4">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<Dropdown :options="viewsDropdownOptions"> <Dropdown :options="viewsDropdownOptions">
<template #default="{ open }"> <template #default="{ open }">

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

@ -9,7 +9,7 @@
</Button> </Button>
</template> </template>
</LayoutHeader> </LayoutHeader>
<div class="flex justify-between items-center px-5 pb-2.5"> <div class="flex justify-between items-center px-5 pt-3 pb-4">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<Dropdown :options="viewsDropdownOptions"> <Dropdown :options="viewsDropdownOptions">
<template #default="{ open }"> <template #default="{ open }">

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

@ -9,7 +9,7 @@
</Button> </Button>
</template> </template>
</LayoutHeader> </LayoutHeader>
<div class="flex justify-between items-center px-5 pb-2.5"> <div class="flex justify-between items-center px-5 pt-3 pb-4">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<Dropdown :options="viewsDropdownOptions"> <Dropdown :options="viewsDropdownOptions">
<template #default="{ open }"> <template #default="{ open }">