feat: add ClaimSummaryAction

src/components/VnTable/VnFilter.vue

@@ -138,14 +138,6 @@ const showFilter = computed(
 );
 </script>
 <template>
-    <div
-        v-if="showTitle"
-        class="q-pt-sm q-px-sm ellipsis"
-        :class="`text-${column?.align ?? 'left'}`"
-        :style="!showFilter ? { 'min-height': 72 + 'px' } : ''"
-    >
-        {{ column?.label }}
-    </div>
     <div v-if="showFilter" class="full-width" :class="alignRow()">
         <VnTableColumn
             :column="$props.column"

src/components/VnTable/VnTable.vue

@@ -67,6 +67,10 @@ const $props = defineProps({
         type: Object,
         default: () => ({ card: false, table: false }),
     },
+    withoutHeader: {
+        type: Boolean,
+        default: false,
+    },
 });
 const { t } = useI18n();
 const stateStore = useStateStore();
@@ -268,10 +272,10 @@ defineExpose({
                     @row-click="(_, row) => rowClickFunction(row)"
                     @update:selected="emit('update:selected', $event)"
                 >
-                    <template #top-left>
+                    <template #top-left v-if="!$props.withoutHeader">
                         <slot name="top-left"></slot>
                     </template>
-                    <template #top-right>
+                    <template #top-right v-if="!$props.withoutHeader">
                         <!-- <QBtn
                         icon="visibility"
                         title="asd"
@@ -292,15 +296,22 @@ defineExpose({
                             class="bg-vn-section-color q-ml-md"
                             dense
                             @click="stateStore.toggleRightDrawer()"
+                            v-if="$props.rightSearch"
                         />
                     </template>
                     <template #header-cell="{ col }">
-                        <QTh
+                        <QTh auto-width style="min-width: 100px">
-                            auto-width
+                            <div
-                            style="min-width: 100px"
+                                class="q-pt-sm q-px-sm ellipsis"
-                            v-if="$props.columnSearch"
+                                :class="`text-${col?.align ?? 'left'}`"
+                                :style="
+                                    $props.columnSearch ? { 'min-height': 72 + 'px' } : ''
+                                "
                             >
+                                {{ col?.label }}
+                            </div>
                             <VnTableFilter
+                                v-if="$props.columnSearch"
                                 :column="col"
                                 :show-title="true"
                                 :data-key="$attrs['data-key']"

src/pages/Claim/Card/ClaimNotes.vue

@@ -9,7 +9,7 @@ const state = useState();
 const user = state.getUser();
 
 const $props = defineProps({
-    id: { type: Number, default: null },
+    id: { type: [Number, String], default: null },
     addNote: { type: Boolean, default: true },
 });
 const claimId = computed(() => $props.id || route.params.id);

src/pages/Claim/Card/ClaimSummary.vue

@@ -15,6 +15,7 @@ import VnTitle from 'src/components/common/VnTitle.vue';
 import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
 import axios from 'axios';
 import dashIfEmpty from 'src/filters/dashIfEmpty';
+import ClaimSummaryAction from 'src/pages/Claim/Card/ClaimSummaryAction.vue';
 
 const route = useRoute();
 const router = useRouter();
@@ -50,26 +51,26 @@ onMounted(async () => {
 const detailsColumns = ref([
     {
         name: 'item',
-        label: 'claim.summary.item',
+        label: 'claim.item',
         field: (row) => row.sale.itemFk,
         sortable: true,
     },
     {
         name: 'landed',
-        label: 'claim.summary.landed',
+        label: 'claim.landed',
         field: (row) => row.sale.ticket.landed,
         format: (value) => toDate(value),
         sortable: true,
     },
     {
         name: 'quantity',
-        label: 'claim.summary.quantity',
+        label: 'claim.quantity',
         field: (row) => row.sale.quantity,
         sortable: true,
     },
     {
         name: 'claimed',
-        label: 'claim.summary.claimed',
+        label: 'claim.claimed',
         field: (row) => row.quantity,
         sortable: true,
     },
@@ -80,20 +81,20 @@ const detailsColumns = ref([
     },
     {
         name: 'price',
-        label: 'claim.summary.price',
+        label: 'claim.price',
         field: (row) => row.sale.price,
         sortable: true,
     },
     {
         name: 'discount',
-        label: 'claim.summary.discount',
+        label: 'claim.discount',
         field: (row) => row.sale.discount,
         format: (value) => `${value} %`,
         sortable: true,
     },
     {
         name: 'total',
-        label: 'claim.summary.total',
+        label: 'claim.total',
         field: ({ sale }) =>
             toCurrency(sale.quantity * sale.price * ((100 - sale.discount) / 100)),
         sortable: true,
@@ -113,31 +114,31 @@ function stateColor(code) {
 const developmentColumns = ref([
     {
         name: 'claimReason',
-        label: 'claim.summary.reason',
+        label: 'claim.reason',
         field: (row) => row.claimReason.description,
         sortable: true,
     },
     {
         name: 'claimResult',
-        label: 'claim.summary.result',
+        label: 'claim.result',
         field: (row) => row.claimResult.description,
         sortable: true,
     },
     {
         name: 'claimResponsible',
-        label: 'claim.summary.responsible',
+        label: 'claim.responsible',
         field: (row) => row.claimResponsible.description,
         sortable: true,
     },
     {
         name: 'worker',
-        label: 'claim.summary.worker',
+        label: 'claim.worker',
         field: (row) => row.worker?.user.nickname,
         sortable: true,
     },
     {
         name: 'claimRedelivery',
-        label: 'claim.summary.redelivery',
+        label: 'claim.redelivery',
         field: (row) => row.claimRedelivery.description,
         sortable: true,
     },
@@ -221,16 +222,13 @@ async function changeState(value) {
             </QBtnDropdown>
         </template>
         <template #body="{ entity: { claim, salesClaimed, developments } }">
-            <QCard class="vn-one">
+            <QCard class="vn-one" v-if="$route.name != 'ClaimSummary'">
                 <VnTitle
                     :url="`#/claim/${entityId}/basic-data`"
                     :text="t('globals.pageTitles.basicData')"
                 />
-                <VnLv
+                <VnLv :label="t('claim.created')" :value="toDate(claim.created)" />
-                    :label="t('claim.summary.created')"
+                <VnLv :label="t('claim.state')">
-                    :value="toDate(claim.created)"
-                />
-                <VnLv :label="t('claim.summary.state')">
                     <template #value>
                         <QChip :color="stateColor(claim.claimState.code)" dense>
                             {{ claim.claimState.description }}
@@ -245,7 +243,7 @@ async function changeState(value) {
                         />
                     </template>
                 </VnLv>
-                <VnLv :label="t('claim.summary.attendedBy')">
+                <VnLv :label="t('claim.attendedBy')">
                     <template #value>
                         <VnUserLink
                             :name="claim.worker?.user?.nickname"
@@ -253,7 +251,7 @@ async function changeState(value) {
                         />
                     </template>
                 </VnLv>
-                <VnLv :label="t('claim.summary.customer')">
+                <VnLv :label="t('claim.customer')">
                     <template #value>
                         <span class="link cursor-pointer">
                             {{ claim.client?.name }}
@@ -262,15 +260,12 @@ async function changeState(value) {
                     </template>
                 </VnLv>
                 <VnLv
-                    :label="t('claim.basicData.pickup')"
+                    :label="t('claim.pickup')"
                     :value="`${dashIfEmpty(claim.pickup)}`"
                 />
             </QCard>
-            <QCard class="vn-three">
+            <QCard class="vn-two">
-                <VnTitle
+                <VnTitle :url="`#/claim/${entityId}/notes`" :text="t('claim.notes')" />
-                    :url="`#/claim/${entityId}/notes`"
-                    :text="t('claim.summary.notes')"
-                />
                 <ClaimNotes
                     :id="entityId"
                     :add-note="false"
@@ -278,53 +273,8 @@ async function changeState(value) {
                     order="created ASC"
                 />
             </QCard>
-            <QCard class="vn-two" v-if="salesClaimed.length > 0">
-                <VnTitle
-                    :url="`#/claim/${entityId}/lines`"
-                    :text="t('claim.summary.details')"
-                />
-                <QTable
-                    :columns="detailsColumns"
-                    :rows="salesClaimed"
-                    flat
-                    dense
-                    :rows-per-page-options="[0]"
-                    hide-bottom
-                >
-                    <template #header="props">
-                        <QTr :props="props">
-                            <QTh v-for="col in props.cols" :key="col.name" :props="props">
-                                {{ t(col.label) }}
-                            </QTh>
-                        </QTr>
-                    </template>
-                    <template #body="props">
-                        <QTr :props="props">
-                            <QTh v-for="col in props.cols" :key="col.name" :props="props">
-                                <span v-if="col.name != 'description'">{{
-                                    t(col.value)
-                                }}</span>
-                                <QBtn
-                                    v-if="col.name == 'description'"
-                                    flat
-                                    color="blue"
-                                    >{{ col.value }}</QBtn
-                                >
-                                <ItemDescriptorProxy
-                                    v-if="col.name == 'description'"
-                                    :id="props.row.sale.itemFk"
-                                    :sale-fk="props.row.saleFk"
-                                ></ItemDescriptorProxy>
-                            </QTh>
-                        </QTr>
-                    </template>
-                </QTable>
-            </QCard>
             <QCard class="vn-two" v-if="claimDms.length > 0">
-                <VnTitle
+                <VnTitle :url="`#/claim/${entityId}/photos`" :text="t('claim.photos')" />
-                    :url="`#/claim/${entityId}/photos`"
-                    :text="t('claim.summary.photos')"
-                />
                 <div class="container">
                     <div
                         class="multimedia-container"
@@ -362,11 +312,47 @@ async function changeState(value) {
                     </div>
                 </div>
             </QCard>
+            <QCard class="vn-two" v-if="salesClaimed.length > 0">
+                <VnTitle :url="`#/claim/${entityId}/lines`" :text="t('claim.details')" />
+                <QTable
+                    :columns="detailsColumns"
+                    :rows="salesClaimed"
+                    flat
+                    dense
+                    :rows-per-page-options="[0]"
+                    hide-bottom
+                >
+                    <template #header="props">
+                        <QTr :props="props">
+                            <QTh v-for="col in props.cols" :key="col.name" :props="props">
+                                {{ t(col.label) }}
+                            </QTh>
+                        </QTr>
+                    </template>
+                    <template #body="props">
+                        <QTr :props="props">
+                            <QTh v-for="col in props.cols" :key="col.name" :props="props">
+                                <span v-if="col.name != 'description'">{{
+                                    t(col.value)
+                                }}</span>
+                                <QBtn
+                                    v-if="col.name == 'description'"
+                                    flat
+                                    color="blue"
+                                    >{{ col.value }}</QBtn
+                                >
+                                <ItemDescriptorProxy
+                                    v-if="col.name == 'description'"
+                                    :id="props.row.sale.itemFk"
+                                    :sale-fk="props.row.saleFk"
+                                ></ItemDescriptorProxy>
+                            </QTh>
+                        </QTr>
+                    </template>
+                </QTable>
+            </QCard>
             <QCard class="vn-two" v-if="developments.length > 0">
-                <VnTitle
+                <VnTitle :url="claimUrl + 'development'" :text="t('claim.development')" />
-                    :url="claimUrl + 'development'"
-                    :text="t('claim.summary.development')"
-                />
                 <QTable
                     :columns="developmentColumns"
                     :rows="developments"
@@ -385,24 +371,25 @@ async function changeState(value) {
                 </QTable>
             </QCard>
             <QCard class="vn-max">
-                <VnTitle :url="claimUrl + 'action'" :text="t('claim.summary.actions')" />
+                <VnTitle :url="claimUrl + 'action'" :text="t('claim.actions')" />
                 <div id="slider-container" class="q-px-xl q-py-md">
                     <QSlider
                         v-model="claim.responsibility"
                         label
-                        :label-value="t('claim.summary.responsibility')"
+                        :label-value="t('claim.responsibility')"
                         label-always
                         color="var()"
                         markers
                         :marker-labels="[
-                            { value: 1, label: t('claim.summary.company') },
+                            { value: 1, label: t('claim.company') },
-                            { value: 5, label: t('claim.summary.person') },
+                            { value: 5, label: t('claim.person') },
                         ]"
                         :min="1"
                         :max="5"
                         readonly
                     />
                 </div>
+                <ClaimSummaryAction :id="entityId" />
             </QCard>
             <QDialog
                 v-model="multimediaDialog"

src/pages/Claim/Card/ClaimSummaryAction.vue

@@ -1,86 +1,71 @@
 <script setup>
-import { ref, computed, onMounted } from 'vue';
-import { useQuasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
+import { toDate, toPercentage } from 'filters/index';
-import axios from 'axios';
-import { useStateStore } from 'src/stores/useStateStore';
-import { toDate, toPercentage, toCurrency } from 'filters/index';
 import VnTable from 'src/components/VnTable/VnTable.vue';
-import FetchData from 'src/components/FetchData.vue';
-import VnSelect from 'src/components/common/VnSelect.vue';
 import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
 import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
-import { useArrayData } from 'composables/useArrayData';
 
 const { t } = useI18n();
-const quasar = useQuasar();
 
 const $props = defineProps({
     id: {
-        type: Number,
+        type: [Number, String],
         required: true,
     },
 });
 
-const columns = computed(() => [
+const columns = [
     {
-        name: 'id',
+        name: 'itemFk',
         label: t('Id item'),
-        field: (row) => row.itemFk,
+        columnFilter: false,
+        align: 'left',
     },
     {
         name: 'ticketFk',
         label: t('Ticket'),
-        align: 'center',
+        columnFilter: false,
-    },
-    {
-        name: 'destination',
-        label: t('Destination'),
-        field: (row) => row.claimDestinationFk,
         align: 'left',
     },
     {
-        name: 'Landed',
+        name: 'claimDestinationFk',
+        label: t('Destination'),
+        columnFilter: false,
+        align: 'left',
+    },
+    {
+        name: 'landed',
         label: t('Landed'),
-        field: (row) => toDate(row.landed),
+        format: (row) => toDate(row.landed),
+        align: 'left',
     },
     {
         name: 'quantity',
         label: t('Quantity'),
-        field: (row) => row.quantity,
+        align: 'left',
     },
     {
         name: 'concept',
         label: t('Description'),
-        field: (row) => row.concept,
         align: 'left',
     },
     {
         name: 'price',
         label: t('Price'),
-        field: (row) => row.price,
+        align: 'left',
-        format: (value) => value,
-        align: 'center',
     },
     {
         name: 'discount',
         label: t('Discount'),
-        field: (row) => row.discount,
+        format: ({ discount }) => toPercentage(discount / 100),
-        format: (value) => toPercentage(value / 100),
         align: 'left',
     },
     {
         name: 'total',
         label: t('Total'),
-        field: (row) => row.total,
+        align: 'left',
-        format: (value) => value,
-        align: 'center',
     },
-    {
+];
-        name: 'delete',
-    },
-]);
 </script>
 <template>
     <VnTable
@@ -94,6 +79,20 @@ const columns = computed(() => [
         :filter="{ where: { claimFk: $props.id } }"
         :columns="columns"
         :limit="0"
+        :without-header="true"
         auto-load
-    />
+    >
+        <template #column-itemFk="{ row }">
+            <span class="link">
+                {{ row.itemFk }}
+                <ItemDescriptorProxy :id="row.itemFk" />
+            </span>
+        </template>
+        <template #column-ticketFk="{ row }">
+            <span class="link">
+                {{ row.ticketFk }}
+                <TicketDescriptorProxy :id="row.ticketFk" />
+            </span>
+        </template>
+    </VnTable>
 </template>

src/pages/Customer/Card/CustomerDescriptor.vue

@@ -32,7 +32,7 @@ const entityId = computed(() => {
 });
 
 const data = ref(useCardDescription());
-const setData = (entity) => (data.value = useCardDescription(entity.name, entity.id));
+const setData = (entity) => (data.value = useCardDescription(entity?.name, entity?.id));
 </script>
 
 <template>