Translations

src/i18n/en/index.js

@@ -65,13 +65,46 @@ export default {
             claims: 'Claims',
             list: 'List',
             createClaim: 'Create claim',
+            summary: 'Summary',
             basicData: 'Basic Data'
         },
         list: {
             customer: 'Customer',
-            assigned: 'Assigned',
+            assignedTo: 'Assigned',
             created: 'Created',
             state: 'State'
+        },
+        card: {
+            claimId: 'Claim ID',
+            assignedTo: 'Assigned',
+            created: 'Created',
+            state: 'State',
+            ticketId: 'Ticket ID',
+            customerSummary: 'Customer summary',
+            claimedTicket: 'Claimed ticket'
+        },
+        basicData: {
+            customer: 'Customer',
+            assignedTo: 'Assigned',
+            created: 'Created',
+            state: 'State',
+            packages: 'Packages',
+            picked: 'Picked',
+        },
+        summary: {
+            customer: 'Customer',
+            assignedTo: 'Assigned',
+            attendedBy: 'Attended by',
+            created: 'Created',
+            state: 'State',
+            details: {
+                title: 'Details',
+                columns: {
+                    item: 'Item',
+                    landed: 'Delivered',
+                    quantity: 'Quantity'
+                }
+            },
         }
     },
     components: {

src/i18n/es/index.js

@@ -13,7 +13,8 @@ export default {
         logOut: 'Cerrar sesión',
         dataSaved: 'Datos guardados',
         save: 'Guardar',
-        reset: 'Restaurar'
+        reset: 'Restaurar',
+        noChanges: 'Sin cambios que guardar'
     },
     moduleIndex: {
         allModules: 'Todos los módulos'
@@ -60,6 +61,53 @@ export default {
             basicData: 'Datos básicos'
         }
     },
+    claim: {
+        pageTitles: {
+            claims: 'Reclamaciones',
+            list: 'Listado',
+            createClaim: 'Crear reclamación',
+            summary: 'Resumen',
+            basicData: 'Datos básicos'
+        },
+        list: {
+            customer: 'Cliente',
+            assignedTo: 'Asignada a',
+            created: 'Creada',
+            state: 'Estado'
+        },
+        card: {
+            claimId: 'ID reclamación',
+            assignedTo: 'Asignada a',
+            created: 'Creada',
+            state: 'Estado',
+            ticketId: 'ID ticket',
+            customerSummary: 'Resumen del cliente',
+            claimedTicket: 'Ticket reclamado'
+        },
+        basicData: {
+            customer: 'Cliente',
+            assignedTo: 'Asignada a',
+            created: 'Creada',
+            state: 'Estado',
+            packages: 'Bultos',
+            picked: 'Recogida',
+        },
+        summary: {
+            customer: 'Cliente',
+            assignedTo: 'Asignada a',
+            attendedBy: 'Atendida por',
+            created: 'Creada',
+            state: 'Estado',
+            details: {
+                title: 'Detalles',
+                columns: {
+                    item: 'Artículo2',
+                    landed: 'Entregado',
+                    quantity: 'Cantidad'
+                }
+            },
+        }
+    },
     components: {
         topbar: {},
         userPanel: {

src/pages/Claim/Card/ClaimBasicData.vue

@@ -1,7 +1,8 @@
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, watch } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
+import { useQuasar } from 'quasar';
 import axios from 'axios';
 import { useSession } from 'src/composables/useSession';
 import { useValidator } from 'src/composables/useValidator';
@@ -13,6 +14,7 @@ onMounted(() => {
 });
 
 const route = useRoute();
+const quasar = useQuasar();
 const { t } = useI18n();
 const { validate } = useValidator();
 const session = useSession();
@@ -20,6 +22,8 @@ const token = session.getToken();
 
 const claim = ref(null);
 const claimCopy = ref(null);
+const hasChanges = ref(false);
+
 function fetch() {
     const id = route.params.id;
     const filter = {
@@ -36,6 +40,8 @@ function fetch() {
     axios.get(`Claims/${id}`, options).then(({ data }) => {
         claim.value = data;
         claimCopy.value = Object.assign({}, data);
+
+        watch(claim.value, () => (hasChanges.value = true));
     });
 }
 
@@ -109,11 +115,19 @@ function save() {
     const id = route.params.id;
     const formData = claim.value;
 
-    axios.patch(`Claims/${id}`, formData);
+    if (!hasChanges.value) {
+        return quasar.notify({
+            type: 'negative',
+            message: t('globals.noChanges'),
+        });
+    }
+
+    axios.patch(`Claims/${id}`, formData).then((hasChanges.value = false));
 }
 
 function onReset() {
     claim.value = claimCopy.value;
+    hasChanges.value = false;
 }
 </script>
 <template>
@@ -123,7 +137,7 @@ function onReset() {
                 <q-form v-if="claim" @submit="save" @reset="onReset" greedy>
                     <div class="row q-gutter-md q-mb-md">
                         <div class="col">
-                            <q-input v-model="claim.client.name" label="Client" disable />
+                            <q-input v-model="claim.client.name" :label="t('claim.basicData.customer')" disable />
                         </div>
                         <div class="col">
                             <q-input v-model="claim.created" mask="####-##-##" fill-mask="_">
@@ -149,7 +163,7 @@ function onReset() {
                                 option-value="id"
                                 option-label="name"
                                 emit-value
-                                label="Assigned"
+                                :label="t('claim.basicData.assignedTo')"
                                 map-options
                                 use-input
                                 @filter="filterWorkers"
@@ -174,7 +188,7 @@ function onReset() {
                                 option-value="id"
                                 option-label="description"
                                 emit-value
-                                label="State"
+                                :label="t('claim.basicData.state')"
                                 map-options
                                 use-input
                                 @filter="filterStates"
@@ -186,12 +200,16 @@ function onReset() {
                     </div>
                     <div class="row q-gutter-md q-mb-md">
                         <div class="col">
-                            <q-input v-model="claim.packages" label="Packages" :rules="validate('claim.packages')" />
+                            <q-input
+                                v-model="claim.packages"
+                                :label="t('claim.basicData.packages')"
+                                :rules="validate('claim.packages')"
+                            />
                         </div>
                     </div>
                     <div class="row q-gutter-md q-mb-md">
                         <div class="col">
-                            <q-checkbox v-model="claim.hasToPickUp" label="Picked" />
+                            <q-checkbox v-model="claim.hasToPickUp" :label="t('claim.basicData.picked')" />
                         </div>
                     </div>
                     <div>

src/pages/Claim/Card/ClaimCard.vue

@@ -1,13 +1,13 @@
 <script setup>
 import { ref, onMounted } from 'vue';
 import { useRoute } from 'vue-router';
-// import { useI18n } from 'vue-i18n';
+import { useI18n } from 'vue-i18n';
 import axios from 'axios';
 import { useState } from 'src/composables/useState';
 import { toDate } from 'src/filters/index';
 
 const route = useRoute();
-// const { t } = useI18n();
+const { t } = useI18n();
 const state = useState();
 
 onMounted(async () => {
@@ -55,7 +55,7 @@ function stateColor(code) {
                 </router-link>
                 <router-link :to="{ name: 'ClaimSummary', params: { id: route.params.id } }">
                     <q-btn round flat dense size="md" icon="launch" color="white">
-                        <q-tooltip>Claim preview</q-tooltip>
+                        <q-tooltip>Claim summary</q-tooltip>
                     </q-btn>
                 </router-link>
 
@@ -75,21 +75,21 @@ function stateColor(code) {
                 <q-list>
                     <q-item>
                         <q-item-section>
-                            <q-item-label caption>Claim ID</q-item-label>
+                            <q-item-label caption>{{ t('claim.card.claimId') }}</q-item-label>
                             <q-item-label>#{{ claim.id }}</q-item-label>
                         </q-item-section>
                         <q-item-section>
-                            <q-item-label caption>Created</q-item-label>
+                            <q-item-label caption>{{ t('claim.card.created') }}</q-item-label>
                             <q-item-label>{{ toDate(claim.created) }}</q-item-label>
                         </q-item-section>
                     </q-item>
                     <q-item>
                         <q-item-section>
-                            <q-item-label caption>Assigned</q-item-label>
+                            <q-item-label caption>{{ t('claim.card.assignedTo') }}</q-item-label>
                             <q-item-label>{{ claim.worker.user.name }}</q-item-label>
                         </q-item-section>
                         <q-item-section>
-                            <q-item-label caption>State</q-item-label>
+                            <q-item-label caption>{{ t('claim.card.state') }}</q-item-label>
                             <q-item-label>
                                 <q-chip :color="stateColor(claim.claimState.code)" dense>
                                     {{ claim.claimState.description }}
@@ -99,7 +99,7 @@ function stateColor(code) {
                     </q-item>
                     <q-item>
                         <q-item-section>
-                            <q-item-label caption>Ticket ID</q-item-label>
+                            <q-item-label caption>{{ t('claim.card.ticketId') }}</q-item-label>
                             <q-item-label>{{ claim.ticketFk }}</q-item-label>
                         </q-item-section>
                     </q-item>
@@ -111,7 +111,7 @@ function stateColor(code) {
                         color="primary"
                         :to="{ name: 'CustomerCard', params: { id: claim.clientFk } }"
                     >
-                        <q-tooltip>Client preview</q-tooltip>
+                        <q-tooltip>{{ t('claim.card.customerSummary') }}</q-tooltip>
                     </q-btn>
                     <q-btn
                         size="md"
@@ -119,7 +119,7 @@ function stateColor(code) {
                         color="primary"
                         :to="{ name: 'TicketCard', params: { id: claim.ticketFk } }"
                     >
-                        <q-tooltip>Claimed ticket</q-tooltip>
+                        <q-tooltip>{{ t('claim.card.claimedTicket') }}</q-tooltip>
                     </q-btn>
                 </q-card-actions>
             </div>
@@ -148,7 +148,7 @@ function stateColor(code) {
                     <q-item-section avatar>
                         <q-icon name="vn:settings" />
                     </q-item-section>
-                    <q-item-section>Basic data</q-item-section>
+                    <q-item-section>{{ t('claim.pageTitles.basicData') }}</q-item-section>
                 </q-item>
             </q-list>
         </q-scroll-area>

src/pages/Claim/Card/ClaimSummary.vue

@@ -1,15 +1,14 @@
 <script setup>
 import { onMounted, defineProps, ref, computed } from 'vue';
 import { useRoute } from 'vue-router';
-// import { useI18n } from 'vue-i18n';
+import { useI18n } from 'vue-i18n';
 import axios from 'axios';
 import { toDate } from 'src/filters';
 
-onMounted(() => {
+onMounted(() => fetch());
-    fetch();
-});
 
 const route = useRoute();
+const { t } = useI18n();
 
 const $props = defineProps({
     claimId: {
@@ -30,23 +29,23 @@ function fetch() {
     });
 }
 
-const detailsColumns = [
+const detailsColumns = ref([
     {
         name: 'item',
-        label: 'Item',
+        label: t('claim.summary.details.columns.item'),
         field: (row) => row.sale.itemFk,
         sortable: true,
     },
     {
         name: 'landed',
-        label: 'Landed',
+        label: t('claim.summary.details.columns.landed'),
         field: (row) => row.sale.ticket.landed,
         format: (value) => toDate(value),
         sortable: true,
     },
     {
         name: 'quantity',
-        label: 'Quantity',
+        label: t('claim.summary.details.columns.quantity'),
         field: (row) => row.sale.quantity,
         sortable: true,
     },
@@ -80,7 +79,7 @@ const detailsColumns = [
         field: ({ sale }) => sale.quantity * sale.price * ((100 - sale.discount) / 100),
         sortable: true,
     },
-];
+]);
 
 function stateColor(code) {
     if (code === 'pending') return 'green';
@@ -97,11 +96,11 @@ function stateColor(code) {
                 <q-list>
                     <q-item>
                         <q-item-section>
-                            <q-item-label caption>Created</q-item-label>
+                            <q-item-label caption>{{ t('claim.summary.created') }}</q-item-label>
                             <q-item-label>{{ toDate(claim.created) }}</q-item-label>
                         </q-item-section>
                         <q-item-section>
-                            <q-item-label caption>State</q-item-label>
+                            <q-item-label caption>{{ t('claim.summary.state') }}</q-item-label>
                             <q-item-label>
                                 <q-chip :color="stateColor(claim.claimState.code)" dense>
                                     {{ claim.claimState.description }}
@@ -111,17 +110,17 @@ function stateColor(code) {
                     </q-item>
                     <q-item>
                         <q-item-section>
-                            <q-item-label caption>Assigned</q-item-label>
+                            <q-item-label caption>{{ t('claim.summary.assignedTo') }}</q-item-label>
                             <q-item-label>{{ claim.worker.user.nickname }}</q-item-label>
                         </q-item-section>
                         <q-item-section>
-                            <q-item-label caption>Attended by</q-item-label>
+                            <q-item-label caption>{{ t('claim.summary.attendedBy') }}</q-item-label>
                             <q-item-label>{{ claim.client.salesPersonUser.name }}</q-item-label>
                         </q-item-section>
                     </q-item>
                 </q-list>
                 <q-card-section class="q-pa-md">
-                    <h6>Details</h6>
+                    <h6>{{ t('claim.summary.details.title') }}</h6>
                     <q-table :columns="detailsColumns" :rows="salesClaimed" flat></q-table>
                 </q-card-section>
                 <q-card-section class="q-pa-md">