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