diff --git a/src/components/common/VnTable.vue b/src/components/common/VnTable.vue index 0216c0063..1b8f0b2ea 100644 --- a/src/components/common/VnTable.vue +++ b/src/components/common/VnTable.vue @@ -1,5 +1,5 @@ <script setup> -import { ref, onMounted, computed } from 'vue'; +import { ref, onMounted, computed, defineModel } from 'vue'; import { useI18n } from 'vue-i18n'; import { useRouter } from 'vue-router'; @@ -11,17 +11,10 @@ import VnLv from 'components/ui/VnLv.vue'; import VnTableColumn from 'components/common/VnTableColumn.vue'; import VnTableFilter from 'components/common/VnTableFilter.vue'; -import VnTableCreate from 'components/common/VnTableCreate.vue'; +import VnTableChip from 'components/common/VnTableChip.vue'; +const columns = defineModel(); const $props = defineProps({ - columns: { - type: Array, - required: true, - }, - columnsTable: { - type: Array, - default: () => [], - }, defaultMode: { type: String, default: 'card', // 'table', 'card' @@ -85,11 +78,12 @@ const cardTemplate = computed(() => { const create = []; let title; let actions; - for (const col of $props.columns) { + for (const col of columns.value) { if (col.field == 'tableActions') { actions = col; } if (col.chip) { + if (!chips.length) setChipColumn(); chips.push(col); } if (col.isTitle) { @@ -110,10 +104,22 @@ const rowClickFunction = computed(() => { return () => {}; }); -const stopEventPropagation = (event) => { +function stopEventPropagation(event) { event.preventDefault(); event.stopPropagation(); -}; +} + +function setChipColumn() { + console.log('SETTING', columns.value); + columns.value.unshift({ + align: 'left', + field: 'status', + label: t('status'), + name: 'status', + customFilter: false, + }); + console.log('SETTING', columns.value); +} </script> <template> <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above> @@ -199,7 +205,15 @@ const stopEventPropagation = (event) => { /> </QTh> </template> - + <template #body-cell-chips="{ col }"> + <QTd auto-width :class="`text-${col.align ?? 'left'}`"> + <VnTableChip :columns="cardTemplate.chips" :row="row"> + <template #afterChip> + <slot name="afterChip" :row="row"></slot> + </template> + </VnTableChip> + </QTd> + </template> <template #body-cell="{ col, row }"> <!-- Columns --> <QTd auto-width :class="`text-${col.align ?? 'left'}`"> @@ -232,35 +246,11 @@ const stopEventPropagation = (event) => { v-if="cardTemplate.chips.length" class="no-margin q-px-xs q-py-none" > - <span - v-for="col of cardTemplate.chips" - :key="col.field" - @click="stopEventPropagation($event)" - class="cursor-text" - > - <QChip - v-if="col.chip.condition(row[col.field], row)" - :title="t(col.label)" - :class=" - col.chip.color - ? col.chip.color(row) - : !col.chip.icon && - 'bg-chip-secondary' - " - dense - square - > - <span v-if="!col.chip.icon">{{ - row[col.field] - }}</span> - <QIcon - v-else - :name="col.chip.icon" - color="primary-light" - /> - </QChip> - </span> - <slot name="afterChip" :row="row"></slot> + <VnTableChip :columns="cardTemplate.chips" :row="row"> + <template #afterChip> + <slot name="afterChip" :row="row"></slot> + </template> + </VnTableChip> </QCardSection> <!-- Title --> <QCardSection diff --git a/src/components/common/VnTableChip.vue b/src/components/common/VnTableChip.vue new file mode 100644 index 000000000..c4a5a602a --- /dev/null +++ b/src/components/common/VnTableChip.vue @@ -0,0 +1,53 @@ +<script setup> +defineProps({ + columns: { + type: Array, + required: true, + }, + row: { + type: Object, + default: null, + }, +}); + +function stopEventPropagation(event) { + event.preventDefault(); + event.stopPropagation(); +} +</script> +<template> + <span + v-for="col of columns" + :key="col.field" + @click="stopEventPropagation($event)" + class="cursor-text" + > + <QChip + v-if="col.chip.condition(row[col.field], row)" + :title="col.label" + :class=" + col.chip.color + ? col.chip.color(row) + : !col.chip.icon && 'bg-chip-secondary' + " + dense + square + > + <span v-if="!col.chip.icon">{{ row[col.field] }}</span> + <QIcon v-else :name="col.chip.icon" color="primary-light" /> + </QChip> + </span> + <slot name="afterChip" :row="row"></slot> +</template> +<style lang="scss"> +.bg-chip-secondary { + background-color: var(--vn-page-color); + color: var(--vn-text-color); +} + +.cursor-text { + pointer-events: all; + cursor: text; + user-select: all; +} +</style> diff --git a/src/components/common/VnTableColumn.vue b/src/components/common/VnTableColumn.vue index 2f8712b1a..62db2a76a 100644 --- a/src/components/common/VnTableColumn.vue +++ b/src/components/common/VnTableColumn.vue @@ -1,27 +1,3 @@ -<template> - <VnComponent - v-if="col.before" - :prop="col.before" - :components="components" - :value="value" - v-model="model" - /> - <VnComponent - v-if="col.component" - :prop="col" - :components="components" - :value="value" - v-model="model" - /> - <span :title="row[col.field]" v-else>{{ dashIfEmpty(row[col.field]) }}</span> - <VnComponent - v-if="col.after" - :prop="col.after" - :components="components" - :value="value" - v-model="model" - /> -</template> <script setup> import { markRaw, computed, defineModel } from 'vue'; import { QIcon, QCheckbox } from 'quasar'; @@ -127,3 +103,27 @@ const col = computed(() => { const components = computed(() => $props.components ?? defaultComponents); </script> +<template> + <VnComponent + v-if="col.before" + :prop="col.before" + :components="components" + :value="value" + v-model="model" + /> + <VnComponent + v-if="col.component" + :prop="col" + :components="components" + :value="value" + v-model="model" + /> + <span :title="row[col.field]" v-else>{{ dashIfEmpty(row[col.field]) }}</span> + <VnComponent + v-if="col.after" + :prop="col.after" + :components="components" + :value="value" + v-model="model" + /> +</template> diff --git a/src/components/common/VnTableCreate.vue b/src/components/common/VnTableCreate.vue deleted file mode 100644 index fb6504f56..000000000 --- a/src/components/common/VnTableCreate.vue +++ /dev/null @@ -1,29 +0,0 @@ -<script setup> -import FormModelPopup from 'components/FormModelPopup.vue'; -import VnTableColumn from 'components/common/VnTableColumn.vue'; - -const $props = defineProps({ - columns: { - type: Object, - required: true, - }, - create: { - type: Object, - required: true, - }, -}); -</script> -<template> - <FormModelPopup v-bind="{ ...$attrs, ...$props.create }"> - <template #form-inputs="{ data }"> - <VnTableColumn - v-for="column of $props.columns" - :key="column.field" - :column="column" - :row="{}" - default="input" - v-model="data[column.field]" - /> - </template> - </FormModelPopup> -</template> diff --git a/src/pages/Customer/ExtendedList/CustomerExtendedList.vue b/src/pages/Customer/ExtendedList/CustomerExtendedList.vue index b96b19044..f68a4e6a9 100644 --- a/src/pages/Customer/ExtendedList/CustomerExtendedList.vue +++ b/src/pages/Customer/ExtendedList/CustomerExtendedList.vue @@ -581,7 +581,7 @@ function handleLocation(data, location) { }, }" order="id DESC" - :columns="columns" + v-model="columns" default-mode="table" redirect="customer" auto-load