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

fix: created ListRowItem component to render different type of row item using single component

Browse Source
This commit is contained in:
Shariq Ansari 2023-08-03 21:41:53 +05:30
parent a399cf87c6
commit aadcec3897
2 changed files with 42 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
frontend/src/components/ListRowItem.vue Normal file
View File

@ -0,0 +1,15 @@
<template>
<slot name="prefix"></slot>
<slot v-if="$slots.default" />
<div v-else class="text-base text-gray-900 truncate">
{{ value }}
</div>
</template>
<script setup>
const props = defineProps({
value: {
type: String,
default: null,
},
})
</script>

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

@ -77,31 +77,32 @@
class="flex items-center space-x-2.5"
:class="[column.size, column.align]"
>
<div v-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 === 'indicator'">
<IndicatorIcon :class="getValue(row[column.key]).color" />
</div>
<div class="text-base text-gray-900 truncate">
{{ getValue(row[column.key]).label }}
</div>
<ListRowItem :value="getValue(row[column.key]).label">
<template #prefix>
<div v-if="column.type === 'indicator'">
<IndicatorIcon :class="getValue(row[column.key]).color" />
</div>
<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>
</template>
</ListRowItem>
</div>
</router-link>
</div>
@ -156,6 +157,7 @@ import IndicatorIcon from './Icons/IndicatorIcon.vue'
import { reactive, ref, computed } from 'vue'
import LayoutHeader from './LayoutHeader.vue'
import Breadcrumbs from './Breadcrumbs.vue'
import ListRowItem from './ListRowItem.vue'
const props = defineProps({
list: {