Fix shelving pages

src/components/FormModel.vue

@@ -84,7 +84,7 @@ onUnmounted(() => {
 const isLoading = ref(false);
 // Si elegimos observar los cambios del form significa que inicialmente las actions estaran deshabilitadas
 const hasChanges = ref(!$props.observeFormChanges);
-const originalData = ref();
+const originalData = ref({...$props.formInitialData});
 const formData = computed(() => state.get($props.model));
 const formUrl = computed(() => $props.url);
 
@@ -141,7 +141,9 @@ function reset() {
     originalData.value = JSON.parse(JSON.stringify(originalData.value));
 
     emit('onFetch', state.get($props.model));
+    if ($props.observeFormChanges) {
         hasChanges.value = false;
+    }
 }
 
 // eslint-disable-next-line vue/no-dupe-keys
@@ -166,7 +168,7 @@ watch(formUrl, async () => {
 });
 </script>
 <template>
-    <QBanner v-if="hasChanges" class="text-white bg-warning">
+    <QBanner v-if="$props.observeFormChanges && hasChanges" class="text-white bg-warning">
         <QIcon name="warning" size="md" class="q-mr-md" />
         <span>{{ t('globals.changesToSave') }}</span>
     </QBanner>

src/i18n/en/index.js

@@ -453,6 +453,7 @@ export default {
         list: {
             parking: 'Parking',
             priority: 'Priority',
+            newShelving: 'New Shelving'
         },
         summary: {
             code: 'Code',

src/i18n/es/index.js

@@ -455,6 +455,7 @@ export default {
         list: {
             parking: 'Parking',
             priority: 'Prioridad',
+            newShelving: 'Nuevo Carro'
         },
         summary: {
             code: 'Código',

src/pages/Shelving/Card/ShelvingCard.vue

@@ -15,14 +15,7 @@ const stateStore = useStateStore();
     </QDrawer>
     <QPageContainer>
         <QPage>
-            <QToolbar class="bg-vn-dark justify-end">
-                <div id="st-data"></div>
-                <QSpace />
-                <div id="st-actions"></div>
-            </QToolbar>
-            <div class="q-pa-md">
             <RouterView></RouterView>
-            </div>
         </QPage>
     </QPageContainer>
 </template>

src/pages/Shelving/Card/ShelvingForm.vue

@@ -1,30 +1,23 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
+import { ref } from 'vue';
+import { useRoute } from 'vue-router';
 import VnRow from 'components/ui/VnRow.vue';
 import FetchData from 'components/FetchData.vue';
-import { computed, ref } from 'vue';
+import FormModel from 'components/FormModel.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 route = useRoute();
+const shelvingId = route.params?.id || null;
+const isNew = Boolean(!shelvingId);
+const defaultInitialData = {
+    parkingFk: null,
+    priority: 0,
+    code: null,
+    isRecyclable: false,
+}
 
 const parkingFilter = { fields: ['id', 'code'] };
-
 const parkingList = ref([]);
 const parkingListCopy = ref([]);
 
@@ -47,20 +40,51 @@ const parkingSelectFilter = {
         );
     },
 };
+
+const shelvingFilter = {
+    include: [
+        {
+            relation: 'worker',
+            scope: {
+                fields: ['id'],
+                include: {
+                    relation: 'user',
+                    scope: { fields: ['nickname'] },
+                },
+            },
+        },
+        { relation: 'parking' },
+    ],
+};
 </script>
 <template>
+    <QToolbar class="bg-vn-dark justify-end">
+        <div id="st-data"></div>
+        <QSpace />
+        <div id="st-actions"></div>
+    </QToolbar>
     <FetchData
         url="Parkings"
         :filter="parkingFilter"
         @on-fetch="setParkingList"
         auto-load
     />
+    <FormModel
+        :url="isNew ? null : `Shelvings/${shelvingId}`"
+        :url-create="isNew ? 'Shelvings' : null"
+        :observe-form-changes="!isNew"
+        :filter="shelvingFilter"
+        model="shelving"
+        :auto-load="!isNew"
+        :form-initial-data="defaultInitialData"
+    >
+        <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')"
-                :rules="props.validate('Shelving.code')"
+                        :rules="validate('Shelving.code')"
                     />
                 </div>
                 <div class="col">
@@ -74,9 +98,9 @@ const parkingSelectFilter = {
                         map-options
                         use-input
                         @filter="
-                    (value, update) => props.filter(value, update, parkingSelectFilter)
+                            (value, update) => filter(value, update, parkingSelectFilter)
                         "
-                :rules="props.validate('Shelving.parkingFk')"
+                        :rules="validate('Shelving.parkingFk')"
                         :input-debounce="0"
                     />
                 </div>
@@ -86,15 +110,17 @@ const parkingSelectFilter = {
                     <QInput
                         v-model="data.priority"
                         :label="t('shelving.basicData.priority')"
-                :rules="props.validate('Shelving.priority')"
+                        :rules="validate('Shelving.priority')"
                     />
                 </div>
                 <div class="col">
                     <QCheckbox
                         v-model="data.isRecyclable"
                         :label="t('shelving.basicData.recyclable')"
-                :rules="props.validate('Shelving.isRecyclable')"
+                        :rules="validate('Shelving.isRecyclable')"
                     />
                 </div>
             </VnRow>
+        </template>
+    </FormModel>
 </template>

src/pages/Shelving/Card/ShelvingSummary.vue

@@ -1,11 +1,11 @@
 <script setup>
-import {computed, onMounted, onUnmounted} from 'vue';
+import { computed, onMounted, onUnmounted } from 'vue';
-import {useRoute, useRouter} from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
+import { useStateStore } from 'stores/useStateStore';
 import CardSummary from 'components/ui/CardSummary.vue';
 import VnLv from 'components/ui/VnLv.vue';
 import ShelvingFilter from 'pages/Shelving/Card/ShelvingFilter.vue';
-import { useStateStore } from 'stores/useStateStore';
 
 const $props = defineProps({
     id: {
@@ -17,10 +17,16 @@ const route = useRoute();
 const stateStore = useStateStore();
 const router = useRouter();
 const { t } = useI18n();
-onMounted(() => (stateStore.rightDrawer = false));
-onUnmounted(() => (stateStore.rightDrawer = false));
 
 const entityId = computed(() => $props.id || route.params.id);
+const isDialog = Boolean($props.id);
+const hideRightDrawer = () => {
+    if (!isDialog) {
+        stateStore.rightDrawer = false;
+    }
+}
+onMounted(hideRightDrawer);
+onUnmounted(hideRightDrawer);
 const filter = {
     include: [
         {
@@ -39,7 +45,7 @@ const filter = {
 </script>
 
 <template>
-  <template v-if="stateStore.isHeaderMounted()">
+    <template v-if="!isDialog && stateStore.isHeaderMounted()">
         <Teleport to="#actions-append">
             <div class="row q-gutter-x-sm">
                 <QBtn
@@ -56,6 +62,7 @@ const filter = {
             </div>
         </Teleport>
     </template>
+    <div class="q-pa-md">
         <CardSummary ref="summary" :url="`Shelvings/${entityId}`" :filter="filter">
             <template #header="{ entity }">
                 <div>{{ entity.code }}</div>
@@ -70,7 +77,10 @@ const filter = {
                         :label="t('shelving.summary.parking')"
                         :value="entity.parking?.code"
                     />
-                <VnLv :label="t('shelving.summary.priority')" :value="entity.priority" />
+                    <VnLv
+                        :label="t('shelving.summary.priority')"
+                        :value="entity.priority"
+                    />
                     <VnLv
                         :label="t('shelving.summary.worker')"
                         :value="entity.worker?.user?.nickname"
@@ -82,7 +92,14 @@ const filter = {
                 </QCard>
             </template>
         </CardSummary>
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+    </div>
+    <QDrawer
+        v-if="!isDialog"
+        v-model="stateStore.rightDrawer"
+        side="right"
+        :width="256"
+        show-if-above
+    >
         <QScrollArea class="fit text-grey-8">
             <ShelvingFilter
                 data-key="ShelvingList"

src/pages/Shelving/ShelvingBasicData.vue

@@ -1,38 +0,0 @@
-<script setup>
-import { useRoute } from 'vue-router';
-import FormModel from 'components/FormModel.vue';
-import ShelvingForm from "pages/Shelving/Card/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"
-        auto-load
-    >
-        <template #form="{ data, validate, filter }">
-            <ShelvingForm :data="data" :validate="validate" :filter="filter" />
-        </template>
-    </FormModel>
-</template>

src/pages/Shelving/ShelvingCreate.vue

@@ -1,69 +0,0 @@
-<script setup>
-import ShelvingForm from 'pages/Shelving/Card/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

@@ -123,7 +123,7 @@ function exprBuilder(param, value) {
             <RouterLink :to="{ name: 'ShelvingCreate' }">
                 <QBtn fab icon="add" color="primary" />
                 <QTooltip>
-                    {{ t('supplier.list.newSupplier') }}
+                    {{ t('shelving.list.newShelving') }}
                 </QTooltip>
             </RouterLink>
         </QPageSticky>

src/router/modules/shelving.js

@@ -35,7 +35,7 @@ export default {
                     meta: {
                         title: 'create',
                     },
-                    component: () => import('src/pages/Shelving/ShelvingCreate.vue'),
+                    component: () => import('src/pages/Shelving/Card/ShelvingForm.vue'),
                 },
             ],
         },
@@ -62,7 +62,7 @@ export default {
                         icon: 'vn:settings',
                         roles: ['salesPerson'],
                     },
-                    component: () => import('pages/Shelving/ShelvingBasicData.vue'),
+                    component: () => import('pages/Shelving/Card/ShelvingForm.vue'),
                 },
                 {
                     name: 'ShelvingLog',