wbuezas
/
salix-front-mindshore-fork2
forked from verdnatura/salix-front
0
0
Fork 0
Code Pull Requests Activity

Fix shelving pages

This commit is contained in:
Kevin Martinez 2023-12-07 13:33:11 -04:00
parent 0dbb23075b
commit 4fd2b05137
10 changed files with 164 additions and 231 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/FormModel.vue
View File

@ -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>

1
src/i18n/en/index.js
View File

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

1
src/i18n/es/index.js
View File

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

9
src/pages/Shelving/Card/ShelvingCard.vue
View File

@ -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>

148
src/pages/Shelving/Card/ShelvingForm.vue
View File

@ -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>

115
src/pages/Shelving/Card/ShelvingSummary.vue
View File

@ -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"

38
src/pages/Shelving/ShelvingBasicData.vue
View File

@ -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>

69
src/pages/Shelving/ShelvingCreate.vue
View File

@ -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>

2
src/pages/Shelving/ShelvingList.vue
View File

@ -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>

4
src/router/modules/shelving.js
View File

@ -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',