verdnatura/salix-front
verdnatura
/
salix-front
2
2
Fork 1
Code Issues Pull Requests 99 Releases Wiki Activity

Merge pull request 'Update Wagon List' (#19) from feature/ms-28-wagons into dev 

Reviewed-on: hyervoni/salix-front-mindshore#19
This commit is contained in:
Carlos Fonseca 2023-11-30 10:43:27 +00:00
parent 0d86fce3ea be66b0b549
commit cf53245bcf
4 changed files with 112 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/pages/Wagon/Type/WagonTypeCreate.vue
View File

@ -239,8 +239,8 @@ function exceedMaxHeight(pos) {
<template> <template>
<QPage class="q-pa-sm q-mx-xl"> <QPage class="q-pa-sm q-mx-xl">
<QCard class="q-pa-sm"> <QForm @submit="onSubmit()" @reset="onReset()" class="q-pa-sm">
<QForm @submit="onSubmit()" @reset="onReset()" class="q-pa-md"> <QCard class="q-pa-md">
<QInput <QInput
filled filled
v-model="name" v-model="name"
@ -248,7 +248,7 @@ function exceedMaxHeight(pos) {
:rules="[(val) => !!val || t('wagon.warnings.nameNotEmpty')]" :rules="[(val) => !!val || t('wagon.warnings.nameNotEmpty')]"
/> />
<QCheckbox class="q-mb-sm" v-model="divisible" label="Divisible" /> <QCheckbox class="q-mb-sm" v-model="divisible" label="Divisible" />
<div class="wagon-tray q-mx-xl" v-for="tray in wagon" :key="tray.id"> <div class="wagon-tray q-mx-lg" v-for="tray in wagon" :key="tray.id">
<div class="position"> <div class="position">
<QInput <QInput
autofocus autofocus
@ -309,16 +309,6 @@ function exceedMaxHeight(pos) {
<QIcon color="grey-6" name="trip_origin" size="3rem" /> <QIcon color="grey-6" name="trip_origin" size="3rem" />
<QIcon color="grey-6" name="trip_origin" size="3rem" /> <QIcon color="grey-6" name="trip_origin" size="3rem" />
</div> </div>
<div>
<QBtn :label="t('wagon.type.submit')" type="submit" color="primary" />
<QBtn
:label="t('wagon.type.reset')"
type="reset"
color="primary"
flat
class="q-ml-sm"
/>
</div>
<QDialog <QDialog
v-model="colorPickerActive" v-model="colorPickerActive"
position="right" position="right"
@ -346,8 +336,18 @@ function exceedMaxHeight(pos) {
</QCardSection> </QCardSection>
</QCard> </QCard>
</QDialog> </QDialog>
</QForm> </QCard>
</QCard> <div class="q-mt-md">
<QBtn :label="t('wagon.type.submit')" type="submit" color="primary" />
<QBtn
:label="t('wagon.type.reset')"
type="reset"
color="primary"
flat
class="q-ml-sm"
/>
</div>
</QForm>
</QPage> </QPage>
</template> </template>
@ -357,45 +357,55 @@ function exceedMaxHeight(pos) {
justify-content: center; justify-content: center;
align-items: flex-start; align-items: flex-start;
} }
.q-card {
.q-form {
width: 70%; width: 70%;
} }
.q-dialog { .q-dialog {
.q-card { .q-card {
width: 100%; width: 100%;
} }
} }
.wheels { .wheels {
margin-left: 5%; margin-left: 5%;
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
} }
.wagon-tray { .wagon-tray {
display: flex; display: flex;
height: 6rem; height: 6rem;
.position { .position {
width: 15%; width: 20%;
border-right: 1rem solid gray; border-right: 1rem solid gray;
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
justify-content: flex-end; justify-content: flex-end;
padding-right: 1rem; padding-right: 1rem;
} }
.shelving { .shelving {
display: flex; display: flex;
width: 75%; width: 75%;
.shelving-half { .shelving-half {
width: 50%; width: 50%;
height: 100%; height: 100%;
.shelving-up { .shelving-up {
height: 80%; height: 80%;
width: 100%; width: 100%;
} }
.shelving-down { .shelving-down {
height: 20%; height: 20%;
width: 100%; width: 100%;
} }
} }
.shelving-divisible { .shelving-divisible {
width: 1%; width: 1%;
height: 100%; height: 100%;
@ -403,6 +413,7 @@ function exceedMaxHeight(pos) {
border-right: 0.5rem dashed grey; border-right: 0.5rem dashed grey;
} }
} }
.action-button { .action-button {
width: 10%; width: 10%;
border-left: 1rem solid gray; border-left: 1rem solid gray;

65
src/pages/Wagon/Type/WagonTypeList.vue
View File

@ -5,6 +5,8 @@ import VnPaginate from 'src/components/ui/VnPaginate.vue';
import { useArrayData } from 'src/composables/useArrayData'; import { useArrayData } from 'src/composables/useArrayData';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import CardList2 from 'components/ui/CardList2.vue';
import VnLv from 'components/ui/VnLv.vue';
const quasar = useQuasar(); const quasar = useQuasar();
const arrayData = useArrayData('WagonTypeList'); const arrayData = useArrayData('WagonTypeList');
@ -48,43 +50,32 @@ async function remove(row) {
auto-load auto-load
> >
<template #body="{ rows }"> <template #body="{ rows }">
<QCard class="card q-mb-md" v-for="row of rows" :key="row.id"> <CardList2
<QItem v-for="row of rows"
class="q-pa-none items-start cursor-pointer q-hoverable" :key="row.id"
v-ripple :title="(row.name || '').toString()"
clickable :id="row.id"
> @click="navigate(row.id)"
<QItemSection class="q-pa-md" @click="navigate(row.id)"> >
<div class="text-h6">{{ row.name }}</div> <template #list-items>
<QItem-label caption>#{{ row.id }}</QItem-label> <VnLv label="ID" :value="row.id" />
</QItemSection> </template>
<QSeparator vertical /> <template #actions>
<QCardActions vertical class="justify-between"> <QBtn
<QBtn :label="t('components.smartCard.openCard')"
flat @click.stop="navigate(row.id)"
round color="white"
color="primary" outline
icon="arrow_circle_right" type="submit"
@click="navigate(row.id)" />
> <QBtn
<QTooltip> :label="t('wagon.list.remove')"
{{ t('components.smartCard.openCard') }} @click.stop="remove(row)"
</QTooltip> color="primary"
</QBtn> style="margin-top: 15px"
<QBtn />
flat </template>
round </CardList2>
color="primary"
icon="delete"
@click="remove(row)"
>
<QTooltip>
{{ t('wagon.list.remove') }}
</QTooltip>
</QBtn>
</QCardActions>
</QItem>
</QCard>
</template> </template>
</VnPaginate> </VnPaginate>
</div> </div>

35
src/pages/Wagon/WagonCreate.vue
View File

@ -86,9 +86,9 @@ function filterType(val, update) {
<template> <template>
<QPage class="q-pa-sm q-mx-xl"> <QPage class="q-pa-sm q-mx-xl">
<QCard class="q-pa-sm"> <QForm @submit="onSubmit()" @reset="onReset()" class="q-pa-sm">
<QForm @submit="onSubmit()" @reset="onReset()" class="q-pa-md"> <QCard class="q-pa-md">
<div class="row q-col-gutter-md q-mb-md"> <div class="row q-col-gutter-md">
<div class="col"> <div class="col">
<QInput <QInput
filled filled
@ -108,7 +108,7 @@ function filterType(val, update) {
/> />
</div> </div>
</div> </div>
<div class="row q-col-gutter-md q-mb-md"> <div class="row q-col-gutter-md">
<div class="col"> <div class="col">
<QInput <QInput
filled filled
@ -155,18 +155,18 @@ function filterType(val, update) {
</QSelect> </QSelect>
</div> </div>
</div> </div>
<div> </QCard>
<QBtn :label="t('wagon.type.submit')" type="submit" color="primary" /> <div class="q-mt-md">
<QBtn <QBtn :label="t('wagon.type.submit')" type="submit" color="primary" />
:label="t('wagon.type.reset')" <QBtn
type="reset" :label="t('wagon.type.reset')"
color="primary" type="reset"
flat color="primary"
class="q-ml-sm" flat
/> class="q-ml-sm"
</div> />
</QForm> </div>
</QCard> </QForm>
</QPage> </QPage>
</template> </template>
@ -176,7 +176,8 @@ function filterType(val, update) {
justify-content: center; justify-content: center;
align-items: flex-start; align-items: flex-start;
} }
.q-card {
.q-form {
width: 70%; width: 70%;
} }
</style> </style>

101
src/pages/Wagon/WagonList.vue
View File

@ -5,6 +5,8 @@ import VnPaginate from 'src/components/ui/VnPaginate.vue';
import { useArrayData } from 'src/composables/useArrayData'; import { useArrayData } from 'src/composables/useArrayData';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import CardList2 from 'components/ui/CardList2.vue';
import VnLv from 'components/ui/VnLv.vue';
const quasar = useQuasar(); const quasar = useQuasar();
const arrayData = useArrayData('WagonList'); const arrayData = useArrayData('WagonList');
@ -55,69 +57,42 @@ async function remove(row) {
auto-load auto-load
> >
<template #body="{ rows }"> <template #body="{ rows }">
<QCard class="card q-mb-md" v-for="row of rows" :key="row.id"> <CardList2
<QItem v-for="row of rows"
class="q-pa-none items-start cursor-pointer q-hoverable" :key="row.id"
v-ripple :title="(row.label || '').toString()"
clickable :id="row.id"
> @click="navigate(row.id)"
<QItemSection class="q-pa-md" @click="navigate(row.id)"> >
<div class="text-h6">{{ row.label }}</div> <template #list-items>
<QItemLabel caption>#{{ row.id }}</QItemLabel> <VnLv label="ID" :value="row.id" />
<QList> <VnLv
<QItem class="q-pa-none"> :label="t('wagon.list.plate')"
<QItemSection> :title-label="t('wagon.list.plate')"
<QItemLabel caption> :value="row.plate"
{{ t('wagon.list.plate') }} />
</QItemLabel> <VnLv :label="t('wagon.list.volume')" :value="row?.volume" />
<QItemLabel>{{ row.plate }}</QItemLabel> <VnLv
</QItemSection> :label="t('wagon.list.type')"
</QItem> :value="row?.type?.name"
<QItem class="q-pa-none"> />
<QItemSection> </template>
<QItemLabel caption> <template #actions>
{{ t('wagon.list.volume') }} <QBtn
</QItemLabel> :label="t('components.smartCard.openCard')"
<QItemLabel>{{ row.volume }}</QItemLabel> @click.stop="navigate(row.id)"
</QItemSection> color="white"
</QItem> outline
<QItem class="q-pa-none"> type="submit"
<QItemSection> />
<QItemLabel caption> <QBtn
{{ t('wagon.list.type') }} :label="t('wagon.list.remove')"
</QItemLabel> @click.stop="remove(row)"
<QItemLabel>{{ row.type.name }}</QItemLabel> color="primary"
</QItemSection> style="margin-top: 15px"
</QItem> />
</QList> </template>
</QItemSection> </CardList2>
<QSeparator vertical />
<QCardActions vertical class="justify-between">
<QBtn
flat
round
color="primary"
icon="arrow_circle_right"
@click="navigate(row.id)"
>
<QTooltip>
{{ t('components.smartCard.openCard') }}
</QTooltip>
</QBtn>
<QBtn
flat
round
color="primary"
icon="delete"
@click="remove(row)"
>
<QTooltip>
{{ t('wagon.list.remove') }}
</QTooltip>
</QBtn>
</QCardActions>
</QItem>
</QCard>
</template> </template>
</VnPaginate> </VnPaginate>
</div> </div>