93 lines
2.7 KiB
Vue
93 lines
2.7 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue';
|
|
import { storeToRefs } from 'pinia';
|
|
import { QTableSlots } from 'quasar';
|
|
import { CreditNote, useCreditNote } from 'src/stores/credit-note';
|
|
|
|
import { columns } from './constants';
|
|
import KebabAction from 'src/components/shared/KebabAction.vue';
|
|
|
|
const creditNote = useCreditNote();
|
|
const { data, page } = storeToRefs(creditNote);
|
|
|
|
const prop = defineProps<{
|
|
grid: boolean;
|
|
visibleColumns: string[];
|
|
hideDelete: boolean;
|
|
}>();
|
|
defineEmits<{ (evt: 'view' | 'delete', val: CreditNote): void }>();
|
|
|
|
const visible = computed(() =>
|
|
columns.filter(
|
|
(v) => prop.visibleColumns.includes(v.name) || v.name === '#action',
|
|
),
|
|
);
|
|
</script>
|
|
<template>
|
|
<q-table
|
|
:rows-per-page-options="[0]"
|
|
:rows="data.map((item, i) => ({ ...item, _index: i, _page: page }))"
|
|
:columns="visible"
|
|
:grid
|
|
hide-bottom
|
|
bordered
|
|
flat
|
|
hide-pagination
|
|
selection="multiple"
|
|
card-container-class="q-col-gutter-sm"
|
|
class="full-width"
|
|
>
|
|
<template v-slot:header="props">
|
|
<q-tr
|
|
style="background-color: hsla(var(--info-bg) / 0.07)"
|
|
:props="props"
|
|
>
|
|
<q-th v-for="col in visible" :key="col.name" :props="props">
|
|
<template v-if="!col.name.startsWith('#')">
|
|
{{ $t(col.label) }}
|
|
</template>
|
|
</q-th>
|
|
</q-tr>
|
|
</template>
|
|
|
|
<template
|
|
v-slot:body="props: {
|
|
row: CreditNote & { _index: number; _page: number };
|
|
} & Omit<Parameters<QTableSlots['body']>[0], 'row'>"
|
|
>
|
|
<q-tr :class="{ dark: $q.dark.isActive }" class="text-center">
|
|
<q-td v-for="(col, i) in visible" :align="col.align" :key="i">
|
|
<!-- NOTE: custom column will starts with # -->
|
|
<template v-if="!col.name.startsWith('#')">
|
|
<span v-if="col.name !== 'quotationPayment'">
|
|
{{
|
|
typeof col.field === 'string'
|
|
? props.row[col.field as keyof CreditNote]
|
|
: col.field(props.row)
|
|
}}
|
|
</span>
|
|
|
|
<span v-if="col.name === 'quotationPayment'">
|
|
{{ $t(`quotation.type.${col.field(props.row)}`) }}
|
|
</span>
|
|
</template>
|
|
|
|
<template v-if="col.name === '#action'">
|
|
<KebabAction
|
|
:id-name="`btn-kebab-${props.row.quotation.workName}`"
|
|
hide-edit
|
|
hide-toggle
|
|
:hide-delete
|
|
@delete="$emit('delete', props.row)"
|
|
@view="$emit('view', props.row)"
|
|
/>
|
|
</template>
|
|
</q-td>
|
|
</q-tr>
|
|
</template>
|
|
|
|
<template v-slot:item="props: { row: CreditNote }">
|
|
<slot name="grid" :item="props" />
|
|
</template>
|
|
</q-table>
|
|
</template>
|