Merge pull request 'Add Create shelving page' (#10) from feature/ms-18-shelving-list into dev

Reviewed-on: hyervoni/salix-front-mindshore#10

src/components/FetchData.vue

@@ -46,7 +46,7 @@ async function fetch() {
         if ($props.limit) filter.limit = $props.limit;
 
         const { data } = await axios.get($props.url, {
-            params: { filter },
+            params: { filter: JSON.stringify(filter) },
         });
 
         emit('onFetch', data);

src/components/FormModel.vue

@@ -61,7 +61,7 @@ function tMobile(...args) {
 
 async function fetch() {
     const { data } = await axios.get($props.url, {
-        params: { filter: $props.filter },
+        params: { filter: JSON.stringify($props.filter) },
     });
 
     state.set($props.model, data);

src/i18n/en/index.js

@@ -428,7 +428,7 @@ export default {
         pageTitles: {
             shelving: 'Shelving',
             shelvingList: 'Shelving List',
-            createShelving: 'Create shelving',
+            create: 'Create',
             summary: 'Summary',
             basicData: 'Basic Data',
         },

src/i18n/es/index.js

@@ -430,7 +430,7 @@ export default {
         pageTitles: {
             shelving: 'Carros',
             shelvingList: 'Listado de carros',
-            createShelving: 'Crear carro',
+            create: 'Crear',
             summary: 'Resumen',
             basicData: 'Datos básicos',
         },

src/pages/Shelving/ShelvingBasicData.vue

@@ -0,0 +1,37 @@
+<script setup>
+import { useRoute } from 'vue-router';
+import FormModel from 'components/FormModel.vue';
+import ShelvingForm from "pages/Shelving/components/ShelvingForm.vue";
+
+const route = useRoute();
+
+const shelvingId = route.params?.id || null;
+
+const shelvingFilter = {
+    include: [
+        {
+            relation: 'worker',
+            scope: {
+                fields: ['id'],
+                include: {
+                    relation: 'user',
+                    scope: { fields: ['nickname'] },
+                },
+            },
+        },
+        { relation: 'parking' },
+    ],
+};
+</script>
+<template>
+    <FormModel
+        :url="`Shelvings/${shelvingId}`"
+        :url-update="`Shelvings/${shelvingId}`"
+        :filter="shelvingFilter"
+        model="shelving"
+    >
+        <template #form="{ data, validate, filter }">
+            <ShelvingForm :data="data" :validate="validate" :filter="filter" />
+        </template>
+    </FormModel>
+</template>

src/pages/Shelving/ShelvingCreate.vue

@@ -0,0 +1,69 @@
+<script setup>
+import ShelvingForm from 'pages/Shelving/components/ShelvingForm.vue';
+import { useI18n } from 'vue-i18n';
+import { useValidator } from 'composables/useValidator';
+import { ref } from 'vue';
+import axios from 'axios';
+import {useRouter} from "vue-router";
+
+const { t } = useI18n();
+const { validate } = useValidator();
+
+const isLoading = ref(false);
+const formData = ref({});
+const router = useRouter();
+
+async function save() {
+    isLoading.value = true;
+    try {
+        await axios.patch('Shelvings', formData.value);
+    } catch (e) { /* empty */ }
+    isLoading.value = false;
+}
+
+function filter(value, update, filterOptions) {
+    update(
+        () => {
+            const { options, filterFn } = filterOptions;
+
+            options.value = filterFn(options, value);
+        },
+        (ref) => {
+            ref.setOptionIndex(-1);
+            ref.moveOptionSelection(1, true);
+        }
+    );
+}
+</script>
+<template>
+    <div class="column items-center">
+        <QForm v-if="formData" @submit.prevent class="q-pa-md" id="formModel">
+            <QCard>
+                <ShelvingForm :data="formData" :validate="validate" :filter="filter" />
+            </QCard>
+            <QBtn
+                :label="t('globals.create')"
+                type="submit"
+                color="primary"
+                class="q-mt-md"
+                @click="save()"
+            />
+            <QBtn :label="t('globals.cancel')" class="q-mt-md q-ml-md" flat @click.stop="router.push({ name: 'ShelvingList' })" />
+        </QForm>
+    </div>
+    <QInnerLoading
+        :showing="isLoading"
+        :label="t('globals.pleaseWait')"
+        color="primary"
+    />
+</template>
+<style lang="scss" scoped>
+#formModel {
+    max-width: 800px;
+    width: 100%;
+}
+
+.q-card {
+    padding: 32px;
+}
+</style>

src/pages/Shelving/ShelvingList.vue

@@ -7,7 +7,7 @@ import CardList2 from 'components/ui/CardList2.vue';
 import VnLv from 'components/ui/VnLv.vue';
 import { useQuasar } from 'quasar';
 import { useRouter } from 'vue-router';
-import ShelvingFilter from 'pages/Shelving/ShelvingFilter.vue';
+import ShelvingFilter from 'pages/Shelving/components/ShelvingFilter.vue';
 import ShelvingSummaryDialog from 'pages/Shelving/Summary/ShelvingSummaryDialog.vue';
 import ShelvingSearchbar from 'pages/Shelving/components/ShelvingSearchbar.vue';
 
@@ -109,6 +109,14 @@ function viewSummary(id) {
                 </template>
             </VnPaginate>
         </div>
+        <QPageSticky :offset="[20, 20]">
+            <RouterLink :to="{name: 'ShelvingCreate'}">
+                <QBtn fab icon="add" color="primary" />
+                <QTooltip>
+                    {{ t('supplier.list.newSupplier') }}
+                </QTooltip>
+            </RouterLink>
+        </QPageSticky>
     </QPage>
 </template>
 

src/pages/Shelving/Summary/ShelvingBasicData.vue

@@ -1,105 +0,0 @@
-<script setup>
-import { useRoute } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-import FormModel from 'components/FormModel.vue';
-import VnRow from 'components/ui/VnRow.vue';
-import FetchData from 'components/FetchData.vue';
-import { ref } from 'vue';
-
-const route = useRoute();
-const { t } = useI18n();
-
-const shelvingFilter = {
-    include: [
-        {
-            relation: 'worker',
-            scope: {
-                fields: ['id'],
-                include: {
-                    relation: 'user',
-                    scope: { fields: ['nickname'] },
-                },
-            },
-        },
-        { relation: 'parking' },
-    ],
-};
-
-const parkingFilter = { fields: ['id', 'code'] };
-
-const parkingList = ref([]);
-const parkingListCopy = ref([]);
-
-const setParkingList = (data) => {
-    parkingList.value = data;
-    parkingListCopy.value = data;
-};
-
-const parkingSelectFilter = {
-    options: parkingList,
-    filterFn: (options, value) => {
-        const search = value.trim().toLowerCase();
-
-        if (!search || search === '') {
-            return parkingListCopy.value;
-        }
-
-        return options.value.filter((option) =>
-            option.code.toLowerCase().startsWith(search)
-        );
-    },
-};
-</script>
-<template>
-    <FetchData
-        url="Parkings"
-        :filter="parkingFilter"
-        @on-fetch="setParkingList"
-        auto-load
-    />
-    <FormModel
-        :url="`Shelvings/${route.params.id}`"
-        :url-update="`Shelvings/${route.params.id}`"
-        :filter="shelvingFilter"
-        model="shelving"
-    >
-        <template #form="{ data, validate, filter }">
-            <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <QInput v-model="data.code" :label="t('shelving.basicData.code')" />
-                </div>
-                <div class="col">
-                    <QSelect
-                        v-model="data.parkingFk"
-                        :options="parkingList"
-                        option-value="id"
-                        option-label="code"
-                        emit-value
-                        :label="t('shelving.basicData.parking')"
-                        map-options
-                        use-input
-                        @filter="
-                            (value, update) => filter(value, update, parkingSelectFilter)
-                        "
-                        :rules="validate('shelving.parkingFk')"
-                        :input-debounce="0"
-                    />
-                </div>
-            </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <QInput
-                        v-model="data.priority"
-                        :label="t('shelving.basicData.priority')"
-                    />
-                </div>
-                <div class="col">
-                    <QCheckbox
-                        v-model="data.isRecyclable"
-                        :label="t('shelving.basicData.recyclable')"
-                    />
-                </div>
-            </VnRow>
-        </template>
-    </FormModel>
-</template>

src/pages/Shelving/components/ShelvingForm.vue

@@ -0,0 +1,100 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import VnRow from 'components/ui/VnRow.vue';
+import FetchData from 'components/FetchData.vue';
+import { computed, ref } from 'vue';
+
+const props = defineProps({
+    data: {
+        type: Object,
+        default: () => ({}),
+    },
+    filter: {
+        type: Function,
+        default: () => {},
+    },
+    validate: {
+        type: Function,
+        default: () => {},
+    },
+});
+
+const data = computed(() => props.data);
+
+const { t } = useI18n();
+
+const parkingFilter = { fields: ['id', 'code'] };
+
+const parkingList = ref([]);
+const parkingListCopy = ref([]);
+
+const setParkingList = (data) => {
+    parkingList.value = data;
+    parkingListCopy.value = data;
+};
+
+const parkingSelectFilter = {
+    options: parkingList,
+    filterFn: (options, value) => {
+        const search = value.trim().toLowerCase();
+
+        if (!search || search === '') {
+            return parkingListCopy.value;
+        }
+
+        return options.value.filter((option) =>
+            option.code.toLowerCase().startsWith(search)
+        );
+    },
+};
+</script>
+<template>
+    <FetchData
+        url="Parkings"
+        :filter="parkingFilter"
+        @on-fetch="setParkingList"
+        auto-load
+    />
+    <VnRow class="row q-gutter-md q-mb-md">
+        <div class="col">
+            <QInput
+                v-model="data.code"
+                :label="t('shelving.basicData.code')"
+                :rules="props.validate('Shelving.code')"
+            />
+        </div>
+        <div class="col">
+            <QSelect
+                v-model="data.parkingFk"
+                :options="parkingList"
+                option-value="id"
+                option-label="code"
+                emit-value
+                :label="t('shelving.basicData.parking')"
+                map-options
+                use-input
+                @filter="
+                    (value, update) => props.filter(value, update, parkingSelectFilter)
+                "
+                :rules="props.validate('Shelving.parkingFk')"
+                :input-debounce="0"
+            />
+        </div>
+    </VnRow>
+    <VnRow class="row q-gutter-md q-mb-md">
+        <div class="col">
+            <QInput
+                v-model="data.priority"
+                :label="t('shelving.basicData.priority')"
+                :rules="props.validate('Shelving.priority')"
+            />
+        </div>
+        <div class="col">
+            <QCheckbox
+                v-model="data.isRecyclable"
+                :label="t('shelving.basicData.recyclable')"
+                :rules="props.validate('Shelving.isRecyclable')"
+            />
+        </div>
+    </VnRow>
+</template>

src/router/modules/shelving.js

@@ -25,10 +25,18 @@ export default {
                     name: 'ShelvingList',
                     meta: {
                         title: 'shelvingList',
-                        icon: 'vn:trolley',
+                        icon: 'view_list',
                     },
                     component: () => import('src/pages/Shelving/ShelvingList.vue'),
                 },
+                {
+                    path: 'create',
+                    name: 'ShelvingCreate',
+                    meta: {
+                        title: 'create',
+                    },
+                    component: () => import('src/pages/Shelving/ShelvingCreate.vue'),
+                },
             ],
         },
         {
@@ -54,7 +62,7 @@ export default {
                         icon: 'vn:settings',
                         roles: ['salesPerson'],
                     },
-                    component: () => import('src/pages/Shelving/Summary/ShelvingBasicData.vue'),
+                    component: () => import('pages/Shelving/ShelvingBasicData.vue'),
                 },
             ],
         },