Added claim RMA section

src/components/SmartCard.vue

@@ -33,6 +33,7 @@ const $props = defineProps({
 });
 
 defineEmits(['onNavigate']);
+defineExpose({ fetch });
 
 const isLoading = ref(false);
 const hasMoreData = ref(false);

src/i18n/en/index.js

@@ -166,8 +166,10 @@ export default {
             claims: 'Claims',
             list: 'List',
             createClaim: 'Create claim',
+            rmaList: 'RMA',
             summary: 'Summary',
-            basicData: 'Basic Data'
+            basicData: 'Basic Data',
+            rma: 'RMA'
         },
         list: {
             customer: 'Customer',
@@ -206,6 +208,7 @@ export default {
             state: 'State',
             packages: 'Packages',
             picked: 'Picked',
+            returnOfMaterial: 'Return of material authorization (RMA)'
         },
     },
     components: {

src/i18n/es/index.js

@@ -190,6 +190,7 @@ export default {
             state: 'Estado',
             packages: 'Bultos',
             picked: 'Recogida',
+            returnOfMaterial: 'Autorización de retorno de materiales (RMA)'
         },
         summary: {
             customer: 'Cliente',

src/layouts/MainLayout.vue

@@ -3,7 +3,7 @@ import Navbar from 'src/components/Navbar.vue';
 </script>
 
 <template>
-    <q-layout view="hHh lpR fFf">
+    <q-layout view="hHh LpR fFf">
         <Navbar />
         <router-view></router-view>
     </q-layout>

src/pages/Claim/Card/ClaimBasicData.vue

@@ -208,6 +208,13 @@ function onReset() {
                                 :rules="validate('claim.packages')"
                             />
                         </div>
+                        <div class="col">
+                            <q-input
+                                v-model="claim.rma"
+                                :label="t('claim.basicData.returnOfMaterial')"
+                                :rules="validate('claim.rma')"
+                            />
+                        </div>
                     </div>
                     <div class="row q-gutter-md q-mb-md">
                         <div class="col">

src/pages/Claim/Card/ClaimCard.vue

@@ -153,11 +153,17 @@ function stateColor(code) {
                     </q-item-section>
                     <q-item-section>{{ t('claim.pageTitles.basicData') }}</q-item-section>
                 </q-item>
+                <q-item :to="{ name: 'ClaimRma' }" clickable v-ripple>
+                    <q-item-section avatar>
+                        <q-icon name="vn:barcode" />
+                    </q-item-section>
+                    <q-item-section>{{ t('claim.pageTitles.rma') }}</q-item-section>
+                </q-item>
             </q-list>
         </q-scroll-area>
     </q-drawer>
     <q-page-container>
-        <router-view></router-view>
+        <router-view v-if="claim.id" :claim="claim"></router-view>
     </q-page-container>
 </template>
 

src/pages/Claim/Card/ClaimRma.vue

@@ -0,0 +1,80 @@
+<script setup>
+import { onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+// import { useQuasar } from 'quasar';
+// import axios from 'axios';
+import SmartCard from 'src/components/SmartCard.vue';
+
+onMounted(() => fetch());
+
+const $props = defineProps({
+    claim: {
+        type: Object,
+        required: true,
+    },
+});
+
+const filter = {
+    where: {
+        code: $props.claim.rma,
+    },
+};
+
+function fetch() {
+    //console.log($props.claim);
+}
+
+// const route = useRoute();
+// const quasar = useQuasar();
+const { t } = useI18n();
+</script>
+<template>
+    <q-page class="q-pa-md column items-center" style="padding-top: 66px">
+        <q-page-sticky expand position="top">
+            <q-toolbar class="bg-primary z-top" style="text-align: right">
+                <q-btn icon="add" label="Add" color="dark" />
+            </q-toolbar>
+        </q-page-sticky>
+
+        <div class="card-list">
+            <!-- <q-card class="q-mb-md" style="position: sticky:top:0">
+                <q-card-actions align="right">
+                    <q-btn icon="add" label="Add" color="primary" />
+                </q-card-actions>
+            </q-card> -->
+
+            <smart-card ref="card" url="/ClaimRmas" :filter="filter" sort-by="id DESC" auto-load>
+                <template #labels="{ row }">
+                    <q-list>
+                        <q-item class="q-pa-none">
+                            <q-item-section>
+                                <q-item-label caption>{{ t('claim.rma.code') }}</q-item-label>
+                                <q-item-label>{{ row.code }}</q-item-label>
+                            </q-item-section>
+                        </q-item>
+                    </q-list>
+                    <q-list>
+                        <q-item class="q-pa-none">
+                            <q-item-section>
+                                <q-item-label caption>{{ t('claim.rma.worker') }}</q-item-label>
+                                <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>
+</template>
+
+<style lang="scss">
+.card-list {
+    width: 100%;
+    max-width: 60em;
+}
+</style>

src/pages/Claim/ClaimRmaList.vue

@@ -0,0 +1,106 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useQuasar } from 'quasar';
+import axios from 'axios';
+import SmartCard from 'src/components/SmartCard.vue';
+
+const quasar = useQuasar();
+const { t } = useI18n();
+
+const card = ref(null);
+const newRma = ref({
+    code: '',
+    crated: new Date(),
+});
+
+function submit() {
+    const formData = newRma.value;
+    if (formData.code === '') return;
+
+    axios
+        .post('ClaimRmas', formData)
+        .then(() => {
+            newRma.value = {
+                code: '',
+                crated: new Date(),
+            };
+        })
+        .then(() => card.value.fetch());
+}
+
+const confirmShown = ref(false);
+const rmaId = ref(null);
+function confirm(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: 'Entry deleted',
+            icon: 'check',
+        });
+    });
+}
+
+function hide() {
+    rmaId.value = null;
+}
+</script>
+
+<template>
+    <q-page class="q-pa-md column items-center">
+        <div class="card-list">
+            <q-card class="q-pa-md q-mb-md">
+                <q-form @submit="submit">
+                    <q-input v-model="newRma.code" label="New RMA..."></q-input>
+                </q-form>
+            </q-card>
+
+            <smart-card ref="card" url="/ClaimRmas" sort-by="id DESC" auto-load>
+                <template #labels="{ row }">
+                    <q-list>
+                        <q-item class="q-pa-none">
+                            <q-item-section>
+                                <q-item-label caption>{{ t('claim.rma.code') }}</q-item-label>
+                                <q-item-label>{{ row.code }}</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">You are about to delete this entry. Are you sure?</span>
+            </q-card-section>
+
+            <q-card-actions align="right">
+                <q-btn flat label="Cancel" color="primary" v-close-popup />
+                <q-btn flat label="Yes" color="primary" @click="remove()" autofocus />
+            </q-card-actions>
+        </q-card>
+    </q-dialog>
+</template>
+
+<style lang="scss">
+.card-list {
+    width: 100%;
+    max-width: 60em;
+}
+</style>

src/router/modules/claim.js

@@ -25,6 +25,16 @@ export default {
                     },
                     component: () => import('src/pages/Claim/ClaimList.vue'),
                 },
+                {
+                    name: 'ClaimRmaList',
+                    path: 'rma',
+                    meta: {
+                        title: 'rmaList',
+                        icon: 'vn:barcode',
+                        roles: ['claimManager']
+                    },
+                    component: () => import('src/pages/Claim/ClaimRmaList.vue'),
+                },
                 {
                     name: 'ClaimCreate',
                     path: 'create',
@@ -33,7 +43,7 @@ export default {
                         icon: 'vn:addperson',
                     },
                     component: () => import('src/pages/Claim/ClaimCreate.vue'),
-                },
+                }
             ]
         },
         {
@@ -58,6 +68,16 @@ export default {
                         roles: ['salesPerson']
                     },
                     component: () => import('src/pages/Claim/Card/ClaimBasicData.vue'),
+                },
+                {
+                    name: 'ClaimRma',
+                    path: 'rma',
+                    meta: {
+                        title: 'rma',
+                        roles: ['claimManager']
+                    },
+                    component: () => import('src/pages/Claim/Card/ClaimRma.vue'),
+                    props: { claim: true }
                 }
             ]
         },