forked from verdnatura/salix-front
Update Wagon List styles
This commit is contained in:
parent
ce4f7d79ed
commit
36028afa37
|
@ -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
|
||||||
|
@ -374,7 +374,7 @@ function exceedMaxHeight(pos) {
|
||||||
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;
|
||||||
|
|
|
@ -5,6 +5,7 @@ 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";
|
||||||
|
|
||||||
const quasar = useQuasar();
|
const quasar = useQuasar();
|
||||||
const arrayData = useArrayData('WagonTypeList');
|
const arrayData = useArrayData('WagonTypeList');
|
||||||
|
@ -48,43 +49,28 @@ 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)">
|
<template #actions>
|
||||||
<div class="text-h6">{{ row.name }}</div>
|
|
||||||
<QItem-label caption>#{{ row.id }}</QItem-label>
|
|
||||||
</QItemSection>
|
|
||||||
<QSeparator vertical />
|
|
||||||
<QCardActions vertical class="justify-between">
|
|
||||||
<QBtn
|
<QBtn
|
||||||
flat
|
:label="t('components.smartCard.openCard')"
|
||||||
round
|
@click.stop="navigate(row.id)"
|
||||||
color="primary"
|
color="primary"
|
||||||
icon="arrow_circle_right"
|
type="submit"
|
||||||
@click="navigate(row.id)"
|
/>
|
||||||
>
|
|
||||||
<QTooltip>
|
|
||||||
{{ t('components.smartCard.openCard') }}
|
|
||||||
</QTooltip>
|
|
||||||
</QBtn>
|
|
||||||
<QBtn
|
<QBtn
|
||||||
flat
|
:label="t('wagon.list.remove')"
|
||||||
round
|
@click.stop="remove(row)"
|
||||||
color="primary"
|
color="primary"
|
||||||
icon="delete"
|
flat
|
||||||
@click="remove(row)"
|
style="margin-top: 15px"
|
||||||
>
|
/>
|
||||||
<QTooltip>
|
</template>
|
||||||
{{ t('wagon.list.remove') }}
|
</CardList2>
|
||||||
</QTooltip>
|
|
||||||
</QBtn>
|
|
||||||
</QCardActions>
|
|
||||||
</QItem>
|
|
||||||
</QCard>
|
|
||||||
</template>
|
</template>
|
||||||
</VnPaginate>
|
</VnPaginate>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -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,43 @@ 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)">
|
<template #list-items>
|
||||||
<div class="text-h6">{{ row.label }}</div>
|
<VnLv
|
||||||
<QItemLabel caption>#{{ row.id }}</QItemLabel>
|
:label="t('wagon.list.plate')"
|
||||||
<QList>
|
:title-label="t('wagon.list.plate')"
|
||||||
<QItem class="q-pa-none">
|
:value="row.plate"
|
||||||
<QItemSection>
|
/>
|
||||||
<QItemLabel caption>
|
<VnLv
|
||||||
{{ t('wagon.list.plate') }}
|
:label="t('wagon.list.volume')"
|
||||||
</QItemLabel>
|
:value="row?.volume"
|
||||||
<QItemLabel>{{ row.plate }}</QItemLabel>
|
/>
|
||||||
</QItemSection>
|
<VnLv
|
||||||
</QItem>
|
:label="t('wagon.list.type')"
|
||||||
<QItem class="q-pa-none">
|
:value="row?.type?.name"
|
||||||
<QItemSection>
|
/>
|
||||||
<QItemLabel caption>
|
</template>
|
||||||
{{ t('wagon.list.volume') }}
|
<template #actions>
|
||||||
</QItemLabel>
|
|
||||||
<QItemLabel>{{ row.volume }}</QItemLabel>
|
|
||||||
</QItemSection>
|
|
||||||
</QItem>
|
|
||||||
<QItem class="q-pa-none">
|
|
||||||
<QItemSection>
|
|
||||||
<QItemLabel caption>
|
|
||||||
{{ t('wagon.list.type') }}
|
|
||||||
</QItemLabel>
|
|
||||||
<QItemLabel>{{ row.type.name }}</QItemLabel>
|
|
||||||
</QItemSection>
|
|
||||||
</QItem>
|
|
||||||
</QList>
|
|
||||||
</QItemSection>
|
|
||||||
<QSeparator vertical />
|
|
||||||
<QCardActions vertical class="justify-between">
|
|
||||||
<QBtn
|
<QBtn
|
||||||
flat
|
:label="t('components.smartCard.openCard')"
|
||||||
round
|
@click.stop="navigate(row.id)"
|
||||||
color="primary"
|
color="primary"
|
||||||
icon="arrow_circle_right"
|
type="submit"
|
||||||
@click="navigate(row.id)"
|
/>
|
||||||
>
|
|
||||||
<QTooltip>
|
|
||||||
{{ t('components.smartCard.openCard') }}
|
|
||||||
</QTooltip>
|
|
||||||
</QBtn>
|
|
||||||
<QBtn
|
<QBtn
|
||||||
flat
|
:label="t('wagon.list.remove')"
|
||||||
round
|
@click.stop="remove(row)"
|
||||||
color="primary"
|
color="primary"
|
||||||
icon="delete"
|
flat
|
||||||
@click="remove(row)"
|
style="margin-top: 15px"
|
||||||
>
|
/>
|
||||||
<QTooltip>
|
</template>
|
||||||
{{ t('wagon.list.remove') }}
|
</CardList2>
|
||||||
</QTooltip>
|
|
||||||
</QBtn>
|
|
||||||
</QCardActions>
|
|
||||||
</QItem>
|
|
||||||
</QCard>
|
|
||||||
</template>
|
</template>
|
||||||
</VnPaginate>
|
</VnPaginate>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue