Claim RMA section

src/App.vue

@@ -67,7 +67,7 @@ function responseError(error) {
 axios.interceptors.response.use((response) => {
     const { method } = response.config;
 
-    const isSaveRequest = method === 'post' || method === 'patch';
+    const isSaveRequest = method === 'patch';
     if (isSaveRequest) {
         quasar.notify({
             message: t('globals.dataSaved'),

src/components/SmartCard.vue

@@ -43,10 +43,11 @@ const pagination = ref({
     page: 1,
 });
 
-const rows = ref([]);
+const rows = ref(null);
 
 onMounted(() => {
     if ($props.autoLoad) fetch();
+    else rows.value = [];
 });
 
 async function fetch() {
@@ -74,6 +75,7 @@ async function fetch() {
 
     hasMoreData.value = data.length === rowsPerPage;
 
+    if (!rows.value) rows.value = [];
     for (const row of data) rows.value.push(row);
 
     pagination.value.rowsNumber = rows.value.length;
@@ -87,7 +89,7 @@ async function fetch() {
 
 async function onLoad(...params) {
     const done = params[1];
-    if (rows.value.length === 0) return done(false);
+    if (!rows.value || rows.value.length === 0) return done(false);
 
     pagination.value.page = pagination.value.page + 1;
 
@@ -100,7 +102,7 @@ async function onLoad(...params) {
 
 <template>
     <q-infinite-scroll @load="onLoad" :offset="offset" class="column items-center">
-        <div class="card-list q-gutter-y-md">
+        <div v-if="rows" class="card-list q-gutter-y-md">
             <q-card class="card" v-for="row of rows" :key="row.id">
                 <q-item v-ripple class="q-pa-none items-start cursor-pointer q-hoverable">
                     <q-item-section class="q-pa-md" @click="$emit('onNavigate', row.id)">
@@ -138,6 +140,25 @@ async function onLoad(...params) {
                 <q-spinner color="orange" size="md" />
             </div>
         </div>
+        <div v-if="!rows" class="card-list q-gutter-y-md">
+            <q-card class="card" v-for="$index in $props.rowsPerPage" :key="$index">
+                <q-item v-ripple class="q-pa-none items-start cursor-pointer q-hoverable">
+                    <q-item-section class="q-pa-md">
+                        <q-skeleton type="rect" class="q-mb-md" square />
+                        <q-skeleton type="text" square />
+                        <q-skeleton type="text" class="q-mb-md" square />
+                        <q-skeleton type="text" square />
+                        <q-skeleton type="text" square />
+                    </q-item-section>
+                    <q-separator vertical />
+                    <q-card-actions vertical class="justify-between">
+                        <q-skeleton type="QBtn" class="q-mb-md" size="40px" />
+                        <q-skeleton type="QBtn" class="q-mb-md" size="40px" />
+                        <q-skeleton type="QBtn" class="q-mb-md" size="40px" />
+                    </q-card-actions>
+                </q-item>
+            </q-card>
+        </div>
     </q-infinite-scroll>
 </template>
 

src/components/UserPanel.vue

@@ -63,7 +63,6 @@ async function saveDarkMode(value) {
 }
 
 async function saveLanguage(value) {
-    console.log(value);
     const query = `/Accounts/${user.value.id}`;
     await axios.patch(query, {
         lang: value,

src/filters/toDate.js

@@ -1,10 +1,12 @@
 import { useI18n } from 'vue-i18n';
 
-export default function (value) {
+export default function (value, options = {}) {
     if (!value) return;
 
+    if (!options.dateStyle) options.dateStyle = 'short';
+
     const { locale } = useI18n();
     const date = new Date(value);
 
-    return new Intl.DateTimeFormat(locale.value).format(date)
+    return new Intl.DateTimeFormat(locale.value, options).format(date)
 }

src/i18n/en/index.js

@@ -12,9 +12,18 @@ export default {
         theme: 'Theme',
         logOut: 'Log out',
         dataSaved: 'Data saved',
+        add: 'Add',
+        create: 'Create',
         save: 'Save',
+        remove: 'Remove',
         reset: 'Reset',
-        noChanges: 'No changes to save'
+        cancel: 'Cancel',
+        yes: 'Yes',
+        no: 'No',
+        noChanges: 'No changes to save',
+        confirmRemove: 'You are about to delete this row. Are you sure?',
+        rowAdded: 'Row added',
+        rowRemoved: 'Row removed'
     },
     moduleIndex: {
         allModules: 'All modules'
@@ -177,6 +186,14 @@ export default {
             created: 'Created',
             state: 'State'
         },
+        rmaList: {
+            code: 'Code',
+            newRma: 'New RMA...'
+        },
+        rma: {
+            user: 'User',
+            created: 'Created'
+        },
         card: {
             claimId: 'Claim ID',
             assignedTo: 'Assigned',

src/i18n/es/index.js

@@ -12,9 +12,18 @@ export default {
         theme: 'Tema',
         logOut: 'Cerrar sesión',
         dataSaved: 'Datos guardados',
+        add: 'Añadir',
+        create: 'Crear',
         save: 'Guardar',
+        remove: 'Eliminar',
         reset: 'Restaurar',
-        noChanges: 'Sin cambios que guardar'
+        cancel: 'Cancelar',
+        yes: 'Si',
+        no: 'No',
+        noChanges: 'Sin cambios que guardar',
+        confirmRemove: 'Vas a eliminar este registro. ¿Continuar?',
+        rowAdded: 'Fila añadida',
+        rowRemoved: 'Fila eliminada'
     },
     moduleIndex: {
         allModules: 'Todos los módulos'
@@ -165,8 +174,10 @@ export default {
             claims: 'Reclamaciones',
             list: 'Listado',
             createClaim: 'Crear reclamación',
+            rmaList: 'RMA',
             summary: 'Resumen',
-            basicData: 'Datos básicos'
+            basicData: 'Datos básicos',
+            rma: 'RMA'
         },
         list: {
             customer: 'Cliente',
@@ -174,6 +185,14 @@ export default {
             created: 'Creada',
             state: 'Estado'
         },
+        rmaList: {
+            code: 'Código',
+            newRma: 'Nuevo RMA...'
+        },
+        rma: {
+            user: 'Usuario',
+            created: 'Creado'
+        },
         card: {
             claimId: 'ID reclamación',
             assignedTo: 'Asignada a',

src/pages/Claim/Card/ClaimRma.vue

@@ -1,9 +1,10 @@
 <script setup>
-import { onMounted } from 'vue';
+import { onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-// import { useQuasar } from 'quasar';
+import { useQuasar } from 'quasar';
-// import axios from 'axios';
+import axios from 'axios';
 import SmartCard from 'src/components/SmartCard.vue';
+import { toDate } from 'src/filters';
 
 onMounted(() => fetch());
 
@@ -14,7 +15,18 @@ const $props = defineProps({
     },
 });
 
+const quasar = useQuasar();
+const { t } = useI18n();
+
 const filter = {
+    include: {
+        relation: 'worker',
+        scope: {
+            include: {
+                relation: 'user',
+            },
+        },
+    },
     where: {
         code: $props.claim.rma,
     },
@@ -24,57 +36,101 @@ function fetch() {
     //console.log($props.claim);
 }
 
-// const route = useRoute();
+function addRow() {
-// const quasar = useQuasar();
+    const formData = {
-const { t } = useI18n();
+        code: $props.claim.rma,
+    };
+
+    axios.post(`ClaimRmas`, formData).then(() => {
+        quasar.notify({
+            type: 'positive',
+            message: t('globals.rowAdded'),
+            icon: 'check',
+        });
+    });
+}
+
+const confirmShown = ref(false);
+const rmaId = ref(null);
+function confirmRemove(id) {
+    confirmShown.value = true;
+    rmaId.value = id;
+}
+
+function remove() {
+    const id = rmaId.value;
+    axios.delete(`ClaimRmas/${id}`).then(() => {
+        confirmShown.value = false;
+
+        quasar.notify({
+            type: 'positive',
+            message: t('globals.rowRemoved'),
+            icon: 'check',
+        });
+    });
+}
+
+function hide() {
+    rmaId.value = null;
+}
 </script>
 <template>
-    <q-page class="q-pa-md column items-center" style="padding-top: 66px">
+    <q-page class="q-pa-md sticky">
         <q-page-sticky expand position="top">
-            <q-toolbar class="bg-primary z-top" style="text-align: right">
+            <q-toolbar class="bg-grey-9">
-                <q-btn icon="add" label="Add" color="dark" />
+                <q-space />
+                <div class="q-gutter-md">
+                    <q-btn icon="add" :label="t('globals.add')" color="primary" @click="addRow()" />
+                </div>
             </q-toolbar>
         </q-page-sticky>
 
-        <div class="card-list">
+        <smart-card ref="card" url="/ClaimRmas" :filter="filter" sort-by="id DESC" auto-load>
-            <!-- <q-card class="q-mb-md" style="position: sticky:top:0">
+            <template #header="{ row }">
-                <q-card-actions align="right">
+                <q-item-label caption>{{ t('claim.rma.user') }}</q-item-label>
-                    <q-btn icon="add" label="Add" color="primary" />
+                <q-item-label>{{ row.worker.user.name }}</q-item-label>
-                </q-card-actions>
+            </template>
-            </q-card> -->
+            <template #labels="{ row }">
-
+                <q-list>
-            <smart-card ref="card" url="/ClaimRmas" :filter="filter" sort-by="id DESC" auto-load>
+                    <q-item class="q-pa-none">
-                <template #labels="{ row }">
+                        <q-item-section>
-                    <q-list>
+                            <q-item-label caption>{{ t('claim.rma.created') }}</q-item-label>
-                        <q-item class="q-pa-none">
+                            <q-item-label>{{ toDate(row.created, { timeStyle: 'medium' }) }}</q-item-label>
-                            <q-item-section>
+                        </q-item-section>
-                                <q-item-label caption>{{ t('claim.rma.code') }}</q-item-label>
+                    </q-item>
-                                <q-item-label>{{ row.code }}</q-item-label>
+                </q-list>
-                            </q-item-section>
+            </template>
-                        </q-item>
+            <template #actions="{ row }">
-                    </q-list>
+                <q-btn flat round color="orange" icon="vn:bin" @click="confirmRemove(row.id)">
-                    <q-list>
+                    <q-tooltip>{{ t('globals.remove') }}</q-tooltip>
-                        <q-item class="q-pa-none">
+                </q-btn>
-                            <q-item-section>
+            </template>
-                                <q-item-label caption>{{ t('claim.rma.worker') }}</q-item-label>
+        </smart-card>
-                                <q-item-label>{{ row.workerFk }}</q-item-label>
-                            </q-item-section>
-                        </q-item>
-                    </q-list>
-                </template>
-                <template #actions="{ row }">
-                    <q-btn flat round color="orange" icon="vn:bin" @click="confirm(row.id)">
-                        <q-tooltip>{{ t('claim.rma.remove') }}</q-tooltip>
-                    </q-btn>
-                </template>
-            </smart-card>
-        </div>
     </q-page>
+    <q-dialog v-model="confirmShown" persistent @hide="hide">
+        <q-card>
+            <q-card-section class="row items-center">
+                <q-avatar icon="warning" color="primary" text-color="white" />
+                <span class="q-ml-sm">{{ t('globals.confirmRemove') }}</span>
+            </q-card-section>
+
+            <q-card-actions align="right">
+                <q-btn flat :label="t('globals.no')" color="primary" v-close-popup autofocus />
+                <q-btn flat :label="t('globals.yes')" color="primary" @click="remove()" />
+            </q-card-actions>
+        </q-card>
+    </q-dialog>
 </template>
 
-<style lang="scss">
+<style lang="scss" scoped>
-.card-list {
+.q-toolbar {
-    width: 100%;
+    background-color: $grey-9;
-    max-width: 60em;
+}
+.sticky {
+    padding-top: 66px;
+}
+
+.q-page-sticky {
+    z-index: 2998;
 }
 </style>

src/pages/Claim/ClaimRmaList.vue

@@ -55,52 +55,61 @@ function hide() {
 </script>
 
 <template>
-    <q-page class="q-pa-md column items-center">
+    <q-page class="q-pa-md sticky">
-        <div class="card-list">
+        <q-page-sticky expand position="top" :offset="[16, 16]">
-            <q-card class="q-pa-md q-mb-md">
+            <q-card class="card q-pa-md">
                 <q-form @submit="submit">
-                    <q-input v-model="newRma.code" label="New RMA..."></q-input>
+                    <q-input v-model="newRma.code" :label="t('claim.rmaList.newRma')" class="q-mb-md" />
+                    <div class="text-caption">$(0) entries</div>
                 </q-form>
             </q-card>
+        </q-page-sticky>
 
-            <smart-card ref="card" url="/ClaimRmas" sort-by="id DESC" auto-load>
+        <smart-card ref="card" url="/ClaimRmas" sort-by="id DESC" auto-load>
-                <template #labels="{ row }">
+            <template #labels="{ row }">
-                    <q-list>
+                <q-list>
-                        <q-item class="q-pa-none">
+                    <q-item class="q-pa-none">
-                            <q-item-section>
+                        <q-item-section>
-                                <q-item-label caption>{{ t('claim.rma.code') }}</q-item-label>
+                            <q-item-label caption>{{ t('claim.rmaList.code') }}</q-item-label>
-                                <q-item-label>{{ row.code }}</q-item-label>
+                            <q-item-label>{{ row.code }}</q-item-label>
-                            </q-item-section>
+                        </q-item-section>
-                        </q-item>
+                    </q-item>
-                    </q-list>
+                </q-list>
-                </template>
+            </template>
-                <template #actions="{ row }">
+            <template #actions="{ row }">
-                    <q-btn flat round color="orange" icon="vn:bin" @click="confirm(row.id)">
+                <q-btn flat round color="primary" icon="vn:bin" @click="confirm(row.id)">
-                        <q-tooltip>{{ t('claim.rma.remove') }}</q-tooltip>
+                    <q-tooltip>{{ t('globals.remove') }}</q-tooltip>
-                    </q-btn>
+                </q-btn>
-                </template>
+            </template>
-            </smart-card>
+        </smart-card>
-        </div>
     </q-page>
 
     <q-dialog v-model="confirmShown" persistent @hide="hide">
         <q-card>
             <q-card-section class="row items-center">
                 <q-avatar icon="warning" color="primary" text-color="white" />
-                <span class="q-ml-sm">You are about to delete this entry. Are you sure?</span>
+                <span class="q-ml-sm">{{ t('globals.confirmRemove') }}</span>
             </q-card-section>
 
             <q-card-actions align="right">
-                <q-btn flat label="Cancel" color="primary" v-close-popup />
+                <q-btn flat :label="t('globals.no')" color="primary" v-close-popup autofocus />
-                <q-btn flat label="Yes" color="primary" @click="remove()" autofocus />
+                <q-btn flat :label="t('globals.yes')" color="primary" @click="remove()" />
             </q-card-actions>
         </q-card>
     </q-dialog>
 </template>
 
-<style lang="scss">
+<style lang="scss" scoped>
-.card-list {
+.sticky {
+    padding-top: 156px;
+}
+
+.card {
     width: 100%;
     max-width: 60em;
 }
+
+.q-page-sticky {
+    z-index: 2998;
+}
 </style>