From 4fd2b05137118c22ab55e23b966e7f1d370e975f Mon Sep 17 00:00:00 2001
From: Kevin Martinez <kevin.martinez@mindshore.io>
Date: Thu, 7 Dec 2023 13:33:11 -0400
Subject: [PATCH 1/3] Fix shelving pages

---
 src/components/FormModel.vue                |   8 +-
 src/i18n/en/index.js                        |   1 +
 src/i18n/es/index.js                        |   1 +
 src/pages/Shelving/Card/ShelvingCard.vue    |   9 +-
 src/pages/Shelving/Card/ShelvingForm.vue    | 148 ++++++++++++--------
 src/pages/Shelving/Card/ShelvingSummary.vue | 115 ++++++++-------
 src/pages/Shelving/ShelvingBasicData.vue    |  38 -----
 src/pages/Shelving/ShelvingCreate.vue       |  69 ---------
 src/pages/Shelving/ShelvingList.vue         |   2 +-
 src/router/modules/shelving.js              |   4 +-
 10 files changed, 164 insertions(+), 231 deletions(-)
 delete mode 100644 src/pages/Shelving/ShelvingBasicData.vue
 delete mode 100644 src/pages/Shelving/ShelvingCreate.vue

diff --git a/src/components/FormModel.vue b/src/components/FormModel.vue
index 986358930..453b3ffe1 100644
--- a/src/components/FormModel.vue
+++ b/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>
diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index f24eb3457..d545f13be 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -453,6 +453,7 @@ export default {
         list: {
             parking: 'Parking',
             priority: 'Priority',
+            newShelving: 'New Shelving'
         },
         summary: {
             code: 'Code',
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index 5e1b999ac..93e3cf411 100644
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@@ -455,6 +455,7 @@ export default {
         list: {
             parking: 'Parking',
             priority: 'Prioridad',
+            newShelving: 'Nuevo Carro'
         },
         summary: {
             code: 'Código',
diff --git a/src/pages/Shelving/Card/ShelvingCard.vue b/src/pages/Shelving/Card/ShelvingCard.vue
index f16e0a718..221740486 100644
--- a/src/pages/Shelving/Card/ShelvingCard.vue
+++ b/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>
+            <RouterView></RouterView>
         </QPage>
     </QPageContainer>
 </template>
diff --git a/src/pages/Shelving/Card/ShelvingForm.vue b/src/pages/Shelving/Card/ShelvingForm.vue
index d919a05ba..e30ac1939 100644
--- a/src/pages/Shelving/Card/ShelvingForm.vue
+++ b/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';
-
-const props = defineProps({
-    data: {
-        type: Object,
-        default: () => ({}),
-    },
-    filter: {
-        type: Function,
-        default: () => {},
-    },
-    validate: {
-        type: Function,
-        default: () => {},
-    },
-});
-
-const data = computed(() => props.data);
+import FormModel from 'components/FormModel.vue';
 
 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">
-        <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>
+    <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="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) => 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')"
+                        :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>
diff --git a/src/pages/Shelving/Card/ShelvingSummary.vue b/src/pages/Shelving/Card/ShelvingSummary.vue
index 492c9bba2..f1f914385 100644
--- a/src/pages/Shelving/Card/ShelvingSummary.vue
+++ b/src/pages/Shelving/Card/ShelvingSummary.vue
@@ -1,11 +1,11 @@
 <script setup>
-import {computed, onMounted, onUnmounted} from 'vue';
-import {useRoute, useRouter} from 'vue-router';
+import { computed, onMounted, onUnmounted } from 'vue';
+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()">
-    <Teleport to="#actions-append">
-      <div class="row q-gutter-x-sm">
-        <QBtn
-            flat
-            @click="stateStore.toggleRightDrawer()"
-            round
-            dense
-            icon="menu"
-        >
-          <QTooltip bottom anchor="bottom right">
-            {{ t('globals.collapseMenu') }}
-          </QTooltip>
-        </QBtn>
-      </div>
-    </Teleport>
-  </template>
-    <CardSummary ref="summary" :url="`Shelvings/${entityId}`" :filter="filter">
-        <template #header="{ entity }">
-            <div>{{ entity.code }}</div>
-        </template>
-        <template #body="{ entity }">
-            <QCard class="vn-one">
-                <div class="header">
-                    {{ t('shelving.pageTitles.basicData') }}
-                </div>
-                <VnLv :label="t('shelving.summary.code')" :value="entity.code" />
-                <VnLv
-                    :label="t('shelving.summary.parking')"
-                    :value="entity.parking?.code"
-                />
-                <VnLv :label="t('shelving.summary.priority')" :value="entity.priority" />
-                <VnLv
-                    :label="t('shelving.summary.worker')"
-                    :value="entity.worker?.user?.nickname"
-                />
-                <VnLv
-                    :label="t('shelving.summary.recyclable')"
-                    :value="entity.isRecyclable"
-                />
-            </QCard>
-        </template>
-    </CardSummary>
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+    <template v-if="!isDialog && stateStore.isHeaderMounted()">
+        <Teleport to="#actions-append">
+            <div class="row q-gutter-x-sm">
+                <QBtn
+                    flat
+                    @click="stateStore.toggleRightDrawer()"
+                    round
+                    dense
+                    icon="menu"
+                >
+                    <QTooltip bottom anchor="bottom right">
+                        {{ t('globals.collapseMenu') }}
+                    </QTooltip>
+                </QBtn>
+            </div>
+        </Teleport>
+    </template>
+    <div class="q-pa-md">
+        <CardSummary ref="summary" :url="`Shelvings/${entityId}`" :filter="filter">
+            <template #header="{ entity }">
+                <div>{{ entity.code }}</div>
+            </template>
+            <template #body="{ entity }">
+                <QCard class="vn-one">
+                    <div class="header">
+                        {{ t('shelving.pageTitles.basicData') }}
+                    </div>
+                    <VnLv :label="t('shelving.summary.code')" :value="entity.code" />
+                    <VnLv
+                        :label="t('shelving.summary.parking')"
+                        :value="entity.parking?.code"
+                    />
+                    <VnLv
+                        :label="t('shelving.summary.priority')"
+                        :value="entity.priority"
+                    />
+                    <VnLv
+                        :label="t('shelving.summary.worker')"
+                        :value="entity.worker?.user?.nickname"
+                    />
+                    <VnLv
+                        :label="t('shelving.summary.recyclable')"
+                        :value="entity.isRecyclable"
+                    />
+                </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"
diff --git a/src/pages/Shelving/ShelvingBasicData.vue b/src/pages/Shelving/ShelvingBasicData.vue
deleted file mode 100644
index 8ceff57f8..000000000
--- a/src/pages/Shelving/ShelvingBasicData.vue
+++ /dev/null
@@ -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>
diff --git a/src/pages/Shelving/ShelvingCreate.vue b/src/pages/Shelving/ShelvingCreate.vue
deleted file mode 100644
index df9edf774..000000000
--- a/src/pages/Shelving/ShelvingCreate.vue
+++ /dev/null
@@ -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>
diff --git a/src/pages/Shelving/ShelvingList.vue b/src/pages/Shelving/ShelvingList.vue
index 597288ac7..8b31e90cd 100644
--- a/src/pages/Shelving/ShelvingList.vue
+++ b/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>
diff --git a/src/router/modules/shelving.js b/src/router/modules/shelving.js
index 7b28e15d1..494f286c3 100644
--- a/src/router/modules/shelving.js
+++ b/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',

From c2705ec6031476e0d82b7a1da1e889a037617a4c Mon Sep 17 00:00:00 2001
From: carlosfonseca <carlos.fonseca@mindshore.io>
Date: Thu, 7 Dec 2023 12:36:29 -0500
Subject: [PATCH 2/3] Se hacen correcciones segun solicititud para aprobacion
 del PR

---
 src/components/ui/CardList.vue | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/ui/CardList.vue b/src/components/ui/CardList.vue
index f94d670c4..50db7310e 100644
--- a/src/components/ui/CardList.vue
+++ b/src/components/ui/CardList.vue
@@ -13,7 +13,7 @@ const checkSelect = ref(false);
 
 watch(
     () => $props.isSelected,
-    (value, prevValue) => {
+    (value) => {
         checkSelect.value = value;
     }
 );
@@ -32,8 +32,8 @@ const selectedItem = (item) => {
                         <div class="title text-primary text-weight-bold text-h5">
                             {{ $props.title }}
                         </div>
-                        <QChip outline color="grey" size="sm">
-                            ID: {{ $props.id }}
+                        <QChip outline color="white" size="sm">
+                            {{ t('ID') }}: {{ $props.id }}
                         </QChip>
                     </div>
                     <QCheckbox
@@ -120,3 +120,8 @@ const selectedItem = (item) => {
     width: 75%;
 }
 </style>
+
+<i18n>
+    es:
+        ID: ID
+</i18n>

From 02027d4392a09ae9136cbd8c48ac73e3ff3ee35f Mon Sep 17 00:00:00 2001
From: carlosfonseca <carlos.fonseca@mindshore.io>
Date: Thu, 7 Dec 2023 12:43:07 -0500
Subject: [PATCH 3/3] Se corrige error por falta de importacion

---
 src/components/ui/CardList.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/ui/CardList.vue b/src/components/ui/CardList.vue
index 50db7310e..17969d817 100644
--- a/src/components/ui/CardList.vue
+++ b/src/components/ui/CardList.vue
@@ -1,5 +1,8 @@
 <script setup>
 import { ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
 
 const $props = defineProps({
     addElement: { type: Function, required: false },