97 lines
2.7 KiB
Vue
97 lines
2.7 KiB
Vue
<script setup>
|
|
import { useI18n } from 'vue-i18n';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
|
|
import { date } from 'quasar';
|
|
|
|
import VnPaginate from 'src/components/ui/VnPaginate.vue';
|
|
|
|
const { t } = useI18n();
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
|
|
const noteFilter = {
|
|
order: 'created DESC',
|
|
where: {
|
|
clientFk: `${route.params.id}`,
|
|
},
|
|
};
|
|
|
|
const toCustomerNoteCreate = () => {
|
|
router.push({ name: 'CustomerNoteCreate' });
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<QCard class="q-pa-lg">
|
|
<VnPaginate
|
|
data-key="CustomerNotes"
|
|
:url="'clientObservations'"
|
|
auto-load
|
|
:filter="noteFilter"
|
|
>
|
|
<template #body="{ rows }">
|
|
<div v-if="rows.length">
|
|
<QCard
|
|
v-for="(item, index) in rows"
|
|
:key="index"
|
|
:class="{
|
|
'q-pa-md': true,
|
|
'q-rounded': true,
|
|
'custom-border': true,
|
|
'q-mb-md': index < rows.length - 1,
|
|
}"
|
|
>
|
|
<div class="flex justify-between">
|
|
<p class="label-color">{{ item.worker.user.nickname }}</p>
|
|
<p class="label-color">
|
|
{{
|
|
date.formatDate(item?.created, 'DD-MM-YYYY HH:mm:ss')
|
|
}}
|
|
</p>
|
|
</div>
|
|
<h6 class="q-mt-xs q-mb-none">{{ item.text }}</h6>
|
|
</QCard>
|
|
</div>
|
|
|
|
<div v-else>
|
|
<h5 class="flex justify-center label-color">
|
|
{{ t('globals.noResults') }}
|
|
</h5>
|
|
</div>
|
|
|
|
<QPageSticky :offset="[18, 18]">
|
|
<QBtn
|
|
@click.stop="toCustomerNoteCreate()"
|
|
color="primary"
|
|
fab
|
|
icon="add"
|
|
/>
|
|
<QTooltip>
|
|
{{ t('New consignee') }}
|
|
</QTooltip>
|
|
</QPageSticky>
|
|
</template>
|
|
</VnPaginate>
|
|
</QCard>
|
|
|
|
<QPageSticky :offset="[18, 18]">
|
|
<QBtn @click.stop="toCustomerNoteCreate()" color="primary" fab icon="add" />
|
|
<QTooltip>
|
|
{{ t('New consignee') }}
|
|
</QTooltip>
|
|
</QPageSticky>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.custom-border {
|
|
border: 2px solid var(--vn-light-gray);
|
|
border-radius: 10px;
|
|
padding: 10px;
|
|
}
|
|
|
|
.label-color {
|
|
color: var(--vn-label);
|
|
}
|
|
</style>
|