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));
-    hasChanges.value = false;
+    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">
+            <RouterView></RouterView>
-                <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,54 +40,87 @@ 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
     />
-    <VnRow class="row q-gutter-md q-mb-md">
+    <FormModel
-        <div class="col">
+        :url="isNew ? null : `Shelvings/${shelvingId}`"
-            <QInput
+        :url-create="isNew ? 'Shelvings' : null"
-                v-model="data.code"
+        :observe-form-changes="!isNew"
-                :label="t('shelving.basicData.code')"
+        :filter="shelvingFilter"
-                :rules="props.validate('Shelving.code')"
+        model="shelving"
-            />
+        :auto-load="!isNew"
-        </div>
+        :form-initial-data="defaultInitialData"
-        <div class="col">
+    >
-            <QSelect
+        <template #form="{ data, validate, filter }">
-                v-model="data.parkingFk"
+            <VnRow class="row q-gutter-md q-mb-md">
-                :options="parkingList"
+                <div class="col">
-                option-value="id"
+                    <QInput
-                option-label="code"
+                        v-model="data.code"
-                emit-value
+                        :label="t('shelving.basicData.code')"
-                :label="t('shelving.basicData.parking')"
+                        :rules="validate('Shelving.code')"
-                map-options
+                    />
-                use-input
+                </div>
-                @filter="
+                <div class="col">
-                    (value, update) => props.filter(value, update, parkingSelectFilter)
+                    <QSelect
-                "
+                        v-model="data.parkingFk"
-                :rules="props.validate('Shelving.parkingFk')"
+                        :options="parkingList"
-                :input-debounce="0"
+                        option-value="id"
-            />
+                        option-label="code"
-        </div>
+                        emit-value
-    </VnRow>
+                        :label="t('shelving.basicData.parking')"
-    <VnRow class="row q-gutter-md q-mb-md">
+                        map-options
-        <div class="col">
+                        use-input
-            <QInput
+                        @filter="
-                v-model="data.priority"
+                            (value, update) => filter(value, update, parkingSelectFilter)
-                :label="t('shelving.basicData.priority')"
+                        "
-                :rules="props.validate('Shelving.priority')"
+                        :rules="validate('Shelving.parkingFk')"
-            />
+                        :input-debounce="0"
-        </div>
+                    />
-        <div class="col">
+                </div>
-            <QCheckbox
+            </VnRow>
-                v-model="data.isRecyclable"
+            <VnRow class="row q-gutter-md q-mb-md">
-                :label="t('shelving.basicData.recyclable')"
+                <div class="col">
-                :rules="props.validate('Shelving.isRecyclable')"
+                    <QInput
-            />
+                        v-model="data.priority"
-        </div>
+                        :label="t('shelving.basicData.priority')"
-    </VnRow>
+                        :rules="validate('Shelving.priority')"
+                    />
+                </div>
+                <div class="col">
+                    <QCheckbox
+                        v-model="data.isRecyclable"
+                        :label="t('shelving.basicData.recyclable')"
+                        :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,50 +45,61 @@ const filter = {
 </script>
 
 <template>
-  <template v-if="stateStore.isHeaderMounted()">
+    <template v-if="!isDialog && stateStore.isHeaderMounted()">
-    <Teleport to="#actions-append">
+        <Teleport to="#actions-append">
-      <div class="row q-gutter-x-sm">
+            <div class="row q-gutter-x-sm">
-        <QBtn
+                <QBtn
-            flat
+                    flat
-            @click="stateStore.toggleRightDrawer()"
+                    @click="stateStore.toggleRightDrawer()"
-            round
+                    round
-            dense
+                    dense
-            icon="menu"
+                    icon="menu"
-        >
+                >
-          <QTooltip bottom anchor="bottom right">
+                    <QTooltip bottom anchor="bottom right">
-            {{ t('globals.collapseMenu') }}
+                        {{ t('globals.collapseMenu') }}
-          </QTooltip>
+                    </QTooltip>
-        </QBtn>
+                </QBtn>
-      </div>
+            </div>
-    </Teleport>
+        </Teleport>
-  </template>
+    </template>
-    <CardSummary ref="summary" :url="`Shelvings/${entityId}`" :filter="filter">
+    <div class="q-pa-md">
-        <template #header="{ entity }">
+        <CardSummary ref="summary" :url="`Shelvings/${entityId}`" :filter="filter">
-            <div>{{ entity.code }}</div>
+            <template #header="{ entity }">
-        </template>
+                <div>{{ entity.code }}</div>
-        <template #body="{ entity }">
+            </template>
-            <QCard class="vn-one">
+            <template #body="{ entity }">
-                <div class="header">
+                <QCard class="vn-one">
-                    {{ t('shelving.pageTitles.basicData') }}
+                    <div class="header">
-                </div>
+                        {{ t('shelving.pageTitles.basicData') }}
-                <VnLv :label="t('shelving.summary.code')" :value="entity.code" />
+                    </div>
-                <VnLv
+                    <VnLv :label="t('shelving.summary.code')" :value="entity.code" />
-                    :label="t('shelving.summary.parking')"
+                    <VnLv
-                    :value="entity.parking?.code"
+                        :label="t('shelving.summary.parking')"
-                />
+                        :value="entity.parking?.code"
-                <VnLv :label="t('shelving.summary.priority')" :value="entity.priority" />
+                    />
-                <VnLv
+                    <VnLv
-                    :label="t('shelving.summary.worker')"
+                        :label="t('shelving.summary.priority')"
-                    :value="entity.worker?.user?.nickname"
+                        :value="entity.priority"
-                />
+                    />
-                <VnLv
+                    <VnLv
-                    :label="t('shelving.summary.recyclable')"
+                        :label="t('shelving.summary.worker')"
-                    :value="entity.isRecyclable"
+                        :value="entity.worker?.user?.nickname"
-                />
+                    />
-            </QCard>
+                    <VnLv
-        </template>
+                        :label="t('shelving.summary.recyclable')"
-    </CardSummary>
+                        :value="entity.isRecyclable"
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+                    />
+                </QCard>
+            </template>
+        </CardSummary>
+    </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',