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

refs #5056 working on section wagonTypeCreate

This commit is contained in:
Alexandre Riera 2023-03-14 14:20:37 +01:00
parent c5625ad97b
commit 31c0a58cec
9 changed files with 380 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -386,6 +386,20 @@ export default {
},
imageNotFound: 'Image not found',
},
wagon: {
pageTitles: {
wagons: 'Wagons',
list: 'List'
},
type: {
name: 'Name',
nameNotEmpty: 'Name can not be empty',
maxTrays: 'You have reached the max number of trays',
saveMessage: 'Wagon type successfully saved',
submit: 'Submit',
reset: 'Reset'
}
},
components: {
topbar: {},
userPanel: {

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

@ -386,6 +386,20 @@ export default {
},
imageNotFound: 'No se ha encontrado la imagen',
},
wagon: {
pageTitles: {
wagons: 'Vagones',
list: 'Listado'
},
type: {
name: 'Nombre',
nameNotEmpty: 'El nombre no puede estar vacío',
maxTrays: 'Has alcanzado el número máximo de bandejas',
saveMessage: 'Tipo de vagón guardado correctamente',
submit: 'Guardar',
reset: 'Deshacer cambios'
}
},
components: {
topbar: {},
userPanel: {

17
src/pages/Wagon/WagonMain.vue Normal file
View File

@ -0,0 +1,17 @@
<script setup>
import { useStateStore } from 'stores/useStateStore';
import LeftMenu from 'src/components/LeftMenu.vue';
const stateStore = useStateStore();
</script>
<template>
<q-drawer v-model="stateStore.leftDrawer" show-if-above :width="256">
<q-scroll-area class="fit text-grey-8">
<LeftMenu />
</q-scroll-area>
</q-drawer>
<q-page-container>
<router-view></router-view>
</q-page-container>
</template>

103
src/pages/Wagon/WagonTray.vue Normal file
View File

@ -0,0 +1,103 @@
<script setup>
const props = defineProps({
position: {
type: Number,
required: true,
},
color: {
type: Object,
required: true,
},
action: {
type: String,
required: true,
},
divisible: {
type: Boolean,
required: true,
},
});
const emit = defineEmits(['add-tray', 'delete-tray']);
function doAction() {
if (props.action == 'add') {
emit('add-tray');
} else {
emit('delete-tray', props.position);
}
}
</script>
<template>
<div class="wagon-tray q-mx-xl">
<div class="position">{{ position }}</div>
<div class="shelving">
<div class="shelving-half">
<div class="shelving-up"></div>
<div
class="shelving-down"
:style="{ backgroundColor: props.color.rgb }"
></div>
</div>
<div
class="shelving-divisible"
:class="{ isDivisible: !props.divisible }"
></div>
<div class="shelving-half">
<div class="shelving-up"></div>
<div
class="shelving-down"
:style="{ backgroundColor: props.color.rgb }"
></div>
</div>
</div>
<div class="action-button">
<q-btn flat round color="primary" :icon="action" @click="doAction()" />
</div>
</div>
</template>
<style lang="scss" scoped>
.wagon-tray {
display: flex;
height: 6rem;
.position {
width: 10%;
border-right: 1rem solid gray;
display: flex;
align-items: flex-end;
justify-content: flex-end;
padding-right: 1rem;
}
.shelving {
display: flex;
width: 80%;
.shelving-half {
width: 50%;
height: 100%;
.shelving-up {
height: 80%;
width: 100%;
}
.shelving-down {
height: 20%;
width: 100%;
}
}
.shelving-divisible {
width: 1%;
height: 100%;
border-left: 0.5rem dashed grey;
border-right: 0.5rem dashed grey;
}
.isDivisible {
display: none;
}
}
.action-button {
width: 10%;
border-left: 1rem solid gray;
display: flex;
align-items: flex-end;
justify-content: flex-start;
padding-left: 1rem;
}
}
</style>

191
src/pages/Wagon/WagonTypeCreate.vue Normal file
View File

@ -0,0 +1,191 @@
<!-- <script setup>
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import { useQuasar } from 'quasar';
import { useStateStore } from 'stores/useStateStore';
import Paginate from 'src/components/PaginateData.vue';
import WorkerSummaryDialog from 'src/pages/Worker/Card/WorkerSummaryDialog.vue';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
import WorkerFilter from 'src/pages/Worker/WorkerFilter.vue';
const stateStore = useStateStore();
const router = useRouter();
const { t } = useI18n();
const quasar = useQuasar();
function navigate(id) {
router.push({ path: `/worker/${id}` });
}
function viewSummary(id) {
quasar.dialog({
component: WorkerSummaryDialog,
componentProps: {
id,
},
});
}
</script> -->
<script setup>
import axios from 'axios';
import FetchData from 'components/FetchData.vue';
import { useQuasar } from 'quasar';
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import WagonTray from './WagonTray.vue';
const { t } = useI18n();
const quasar = useQuasar();
const wagonConfig = ref([]);
const wagonTypeColors = ref([]);
const wagon = ref([]);
const divisible = ref(false);
const name = ref('');
let currentPosition = 0;
function addTray() {
if (wagon.value.length < wagonConfig.value.maxTrays - 1) {
currentPosition += wagonConfig.value.trayStep;
wagon.value.unshift({
position: currentPosition,
color: {
id: 1,
rgb: 'blue',
},
});
} else {
quasar.notify({
message: t('wagon.type.maxTrays'),
type: 'warning',
});
}
}
function deleteTray(position) {
currentPosition = 0;
wagon.value = wagon.value.filter((tray) => tray.position !== position);
for (let i = wagon.value.length - 1; i >= 0; i--) {
currentPosition += wagonConfig.value.trayStep;
wagon.value[i].position = currentPosition;
}
}
async function onSubmit() {
try {
await axios
.post('WagonTypes', {
name: name.value,
})
.then((res) => {
wagon.value.forEach(async (tray) => {
await axios.post('WagonTypeTrays', {
typeFk: res.data.id,
height: tray.position,
colorFk: tray.color.id,
});
});
});
quasar.notify({
message: t('wagon.type.saveMessage'),
type: 'positive',
});
} catch (error) {
//
}
}
async function onReset() {
name.value = null;
divisible.value = false;
wagon.value = [];
currentPosition = 0;
}
</script>
<template>
<fetch-data
url="WagonConfigs"
@on-fetch="(data) => (wagonConfig = data[0])"
auto-load
/>
<fetch-data
url="WagonTypeColors"
@on-fetch="(data) => (wagonTypeColors = data)"
auto-load
/>
<q-page class="q-pa-sm q-mx-xl">
<q-card class="q-pa-sm">
<q-form @submit="onSubmit" @reset="onReset" class="q-pa-md">
<q-input
filled
v-model="name"
:label="t('wagon.type.name')"
:rules="[(val) => !!val || t('wagon.type.nameNotEmpty')]"
/>
<q-checkbox class="q-mb-sm" v-model="divisible" label="Divisible" />
<div v-for="tray in wagon" :key="tray.position">
<WagonTray
action="delete"
@delete-tray="deleteTray"
:position="tray.position"
:color="{ rgb: 'blue' }"
:divisible="divisible"
></WagonTray>
</div>
<WagonTray
v-if="wagonTypeColors.values"
action="add"
@add-tray="addTray"
:color="{ rgb: 'blue' }"
:divisible="divisible"
></WagonTray>
<div class="q-mb-sm wheels">
<q-icon color="grey-6" name="trip_origin" size="3rem" />
<q-icon color="grey-6" name="trip_origin" size="3rem" />
</div>
<div>
<q-btn
:label="t('wagon.type.submit')"
type="submit"
color="primary"
/>
<q-btn
:label="t('wagon.type.reset')"
type="reset"
color="primary"
flat
class="q-ml-sm"
/>
<!-- <q-color
flat
v-model="hex"
no-header
no-footer
default-view="palette"
:palette="
wagonTypeColors.map((color) => {
return color.rgb;
})
"
/> -->
</div>
</q-form>
</q-card>
</q-page>
</template>
<style lang="scss" scoped>
.q-page {
display: flex;
justify-content: center;
align-items: flex-start;
}
.q-card {
width: 50%;
}
.wheels {
display: flex;
justify-content: space-around;
}
</style>

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

@ -3,11 +3,13 @@ import Ticket from './ticket';
import Claim from './claim';
import InvoiceOut from './invoiceOut';
import Worker from './worker';
import Wagon from './wagon';
export default [
Customer,
Ticket,
Claim,
InvoiceOut,
Worker
Worker,
Wagon
]

35
src/router/modules/wagon.js Normal file
View File

@ -0,0 +1,35 @@
import { RouterView } from 'vue-router';
export default {
path: '/wagon',
name: 'Wagon',
meta: {
title: 'wagons',
icon: 'contact_support',
},
component: RouterView,
redirect: { name: 'WagonMain' },
menus: {
main: ['WagonTypeList'],
card: [],
},
children: [
{
path: '',
name: 'WagonMain',
component: () => import('src/pages/Wagon/WagonMain.vue'),
redirect: { name: 'WagonTypeList' },
children: [
{
path: 'list',
name: 'WagonTypeCreate',
meta: {
title: 'list',
icon: 'view_list',
},
component: () => import('src/pages/Wagon/WagonTypeCreate.vue'),
},
],
}
],
};

2
src/router/routes.js
View File

@ -3,6 +3,7 @@ import ticket from './modules/ticket';
import claim from './modules/claim';
import worker from './modules/worker';
import invoiceOut from './modules/invoiceOut';
import wagon from './modules/wagon';
const routes = [
{
@ -34,6 +35,7 @@ const routes = [
name: 'NotFound',
component: () => import('../pages/NotFound.vue'),
},
wagon
],
},
];

2
src/stores/useNavigationStore.js
View File

@ -6,7 +6,7 @@ import { useRole } from 'src/composables/useRole';
import routes from 'src/router/modules';
export const useNavigationStore = defineStore('navigationStore', () => {
const modules = ['customer', 'claim', 'ticket', 'invoiceOut', 'worker'];
const modules = ['customer', 'claim', 'ticket', 'invoiceOut', 'worker', 'wagon'];
const pinnedModules = ref([]);
const role = useRole();