138 lines
3.3 KiB
Vue
138 lines
3.3 KiB
Vue
<template>
|
|
<ListView
|
|
:columns="columns"
|
|
:rows="rows"
|
|
:options="{
|
|
getRowRoute: (row) => ({ name: 'Deal', params: { dealId: row.name } }),
|
|
selectable: options.selectable,
|
|
}"
|
|
row-key="name"
|
|
>
|
|
<ListHeader class="mx-5" />
|
|
<ListRows>
|
|
<ListRow
|
|
class="mx-5"
|
|
v-for="row in rows"
|
|
:key="row.name"
|
|
v-slot="{ column, item }"
|
|
:row="row"
|
|
>
|
|
<div v-if="column.key === '_assign'" class="flex items-center">
|
|
<MultipleAvatar :avatars="item" />
|
|
</div>
|
|
<ListRowItem v-else :item="item">
|
|
<template #prefix>
|
|
<div v-if="column.key === 'status'">
|
|
<IndicatorIcon :class="item.color" />
|
|
</div>
|
|
<div v-else-if="column.key === 'organization'">
|
|
<Avatar
|
|
v-if="item.label"
|
|
class="flex items-center"
|
|
:image="item.logo"
|
|
:label="item.label"
|
|
size="sm"
|
|
/>
|
|
</div>
|
|
<div v-else-if="column.key === 'deal_owner'">
|
|
<Avatar
|
|
v-if="item.full_name"
|
|
class="flex items-center"
|
|
:image="item.user_image"
|
|
:label="item.full_name"
|
|
size="sm"
|
|
/>
|
|
</div>
|
|
<div v-else-if="column.key === 'mobile_no'">
|
|
<PhoneIcon class="h-4 w-4" />
|
|
</div>
|
|
</template>
|
|
<div
|
|
v-if="
|
|
[
|
|
'modified',
|
|
'creation',
|
|
'first_response_time',
|
|
'first_responded_on',
|
|
'response_by',
|
|
].includes(column.key)
|
|
"
|
|
class="truncate text-base"
|
|
>
|
|
{{ item.timeAgo }}
|
|
</div>
|
|
<div
|
|
v-else-if="column.key === 'sla_status'"
|
|
class="truncate text-base"
|
|
>
|
|
<Badge
|
|
v-if="item.value"
|
|
:variant="'subtle'"
|
|
:theme="item.color"
|
|
size="md"
|
|
:label="item.value"
|
|
/>
|
|
</div>
|
|
<div v-else-if="column.type === 'Check'">
|
|
<FormControl
|
|
type="checkbox"
|
|
:modelValue="item"
|
|
:disabled="true"
|
|
class="text-gray-900"
|
|
/>
|
|
</div>
|
|
</ListRowItem>
|
|
</ListRow>
|
|
</ListRows>
|
|
<ListSelectBanner />
|
|
</ListView>
|
|
<ListFooter
|
|
class="border-t px-5 py-2"
|
|
v-model="pageLengthCount"
|
|
:options="{
|
|
rowCount: options.rowCount,
|
|
totalCount: options.totalCount,
|
|
}"
|
|
@loadMore="emit('loadMore')"
|
|
/>
|
|
</template>
|
|
|
|
<script setup>
|
|
import MultipleAvatar from '@/components/MultipleAvatar.vue'
|
|
import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
|
|
import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
|
|
import {
|
|
Avatar,
|
|
ListView,
|
|
ListHeader,
|
|
ListRows,
|
|
ListRow,
|
|
ListRowItem,
|
|
ListSelectBanner,
|
|
ListFooter,
|
|
} from 'frappe-ui'
|
|
|
|
const props = defineProps({
|
|
rows: {
|
|
type: Array,
|
|
required: true,
|
|
},
|
|
columns: {
|
|
type: Array,
|
|
required: true,
|
|
},
|
|
options: {
|
|
type: Object,
|
|
default: () => ({
|
|
selectable: true,
|
|
totalCount: 0,
|
|
rowCount: 0,
|
|
}),
|
|
},
|
|
})
|
|
|
|
const emit = defineEmits(['loadMore'])
|
|
|
|
const pageLengthCount = defineModel()
|
|
</script>
|