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

Merge pull request '#6346 Wagons to VnTable' (!717) from 6346-WagonTypeToCard into dev 

Reviewed-on: verdnatura/salix-front#717
Reviewed-by: Alex Moreno <alexm@verdnatura.es>
This commit is contained in:
Jon Elias 2024-09-17 09:09:50 +00:00
parent 907e6dbf4f 58cd0b54cf
commit 162c7858ff
2 changed files with 186 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,14 +2,13 @@
import { ref, computed } from 'vue';
import axios from 'axios';
import { useQuasar } from 'quasar';
import VnPaginate from 'src/components/ui/VnPaginate.vue';
import { useArrayData } from 'src/composables/useArrayData';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import CardList from 'components/ui/CardList.vue';
import FormModelPopup from 'src/components/FormModelPopup.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnRow from 'src/components/ui/VnRow.vue';
import VnTable from 'src/components/VnTable/VnTable.vue';
const quasar = useQuasar();
const arrayData = useArrayData('WagonTypeList');
@ -17,7 +16,7 @@ const store = arrayData.store;
const dialog = ref();
const { push } = useRouter();
const { t } = useI18n();
const paginate = ref();
const tableRef = ref();
const initialData = computed(() => {
return {
@ -25,10 +24,46 @@ const initialData = computed(() => {
};
});
function reloadData() {
initialData.value.name = null;
paginate.value.fetch();
}
const columns = computed(() => [
{
align: 'left',
name: 'id',
label: t('ID'),
isId: true,
cardVisible: true,
},
{
align: 'left',
name: 'name',
label: t('Name'),
isTitle: true,
},
{
align: 'left',
name: 'divisible',
label: t('Divisible'),
cardVisible: true,
component: 'checkbox',
},
{
align: 'right',
name: 'tableActions',
actions: [
{
title: t('components.smartCard.openCard'),
icon: 'arrow_forward',
isPrimary: true,
action: (row) => navigate(row.id, row.name),
},
{
title: t('wagon.list.remove'),
icon: 'delete',
isPrimary: true,
action: (row) => remove(row),
},
],
},
]);
function navigate(id, name) {
push({ path: `/wagon/type/${id}/edit`, query: { name } });
@ -41,51 +76,25 @@ async function remove(row) {
type: 'positive',
});
store.data.splice(store.data.indexOf(row), 1);
window.location.reload();
}
</script>
<template>
<QPage class="column items-center q-pa-md">
<div class="vn-card-list">
<VnPaginate
ref="paginate"
data-key="WagonTypeList"
url="WagonTypes"
order="id DESC"
auto-load
>
<template #body="{ rows }">
<CardList
v-for="row of rows"
:key="row.id"
:title="(row.name || '').toString()"
:id="row.id"
@click="navigate(row.id, row.name)"
>
<template #list-items>
<QCheckbox
:label="t('Divisble')"
:model-value="row.divisible"
disable
/>
</template>
<template #actions>
<QBtn
:label="t('components.smartCard.openCard')"
@click.stop="navigate(row.id, row.name)"
outline
/>
<QBtn
:label="t('wagon.list.remove')"
@click.stop="remove(row)"
color="primary"
style="margin-top: 15px"
/>
</template>
</CardList>
</template>
</VnPaginate>
</div>
<VnTable
ref="tableRef"
data-key="WagonTypeList"
url="WagonTypes"
:columns="columns"
auto-load
order="id DESC"
:right-search="false"
:column-search="false"
:default-mode="'card'"
:disable-option="{ table: true }"
>
</VnTable>
<QPageSticky :offset="[18, 18]">
<QBtn @click.stop="dialog.show()" color="primary" fab icon="add" shortcut="+">
<QDialog ref="dialog">
@ -94,7 +103,7 @@ async function remove(row) {
url-create="WagonTypes"
model="WagonType"
:form-initial-data="initialData"
@on-data-saved="reloadData()"
@on-data-saved="window.location.reload()"
auto-load
>
<template #form-inputs="{ data }">

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

@ -1,12 +1,13 @@
<script setup>
import axios from 'axios';
import { useQuasar } from 'quasar';
import VnPaginate from 'src/components/ui/VnPaginate.vue';
import { useArrayData } from 'src/composables/useArrayData';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import CardList from 'components/ui/CardList.vue';
import VnLv from 'components/ui/VnLv.vue';
import VnTable from 'src/components/VnTable/VnTable.vue';
import { computed } from 'vue';
import VnSelect from 'src/components/common/VnSelect.vue';
import VnInput from 'src/components/common/VnInput.vue';
const quasar = useQuasar();
const arrayData = useArrayData('WagonList');
@ -23,14 +24,56 @@ const filter = {
},
};
const columns = computed(() => [
{
align: 'left',
name: 'label',
label: t('Label'),
isTitle: true,
},
{
align: 'left',
name: 'plate',
label: t('wagon.list.plate'),
cardVisible: true,
},
{
align: 'left',
name: 'volume',
label: t('wagon.list.volume'),
cardVisible: true,
},
{
align: 'left',
name: 'name',
label: t('wagon.list.type'),
cardVisible: true,
format: (row) => row?.type?.name,
},
{
align: 'right',
name: 'tableActions',
actions: [
{
title: t('components.smartCard.openCard'),
icon: 'arrow_forward',
isPrimary: true,
action: (row) => navigate(row.id),
},
{
title: t('wagon.list.remove'),
icon: 'delete',
isPrimary: true,
action: (row) => remove(row),
},
],
},
]);
function navigate(id) {
router.push({ path: `/wagon/${id}/edit` });
}
function create() {
router.push({ path: `/wagon/create` });
}
async function remove(row) {
try {
await axios.delete(`Wagons/${row.id}`).then(async () => {
@ -39,6 +82,7 @@ async function remove(row) {
type: 'positive',
});
store.data.splice(store.data.indexOf(row), 1);
window.location.reload();
});
} catch (error) {
//
@ -48,53 +92,83 @@ async function remove(row) {
<template>
<QPage class="column items-center q-pa-md">
<div class="vn-card-list">
<VnPaginate
data-key="WagonList"
url="/Wagons"
order="id DESC"
:filter="filter"
auto-load
>
<template #body="{ rows }">
<CardList
v-for="row of rows"
:key="row.id"
:title="(row.label || '').toString()"
:id="row.id"
@click="navigate(row.id)"
>
<template #list-items>
<VnLv
:label="t('wagon.list.plate')"
:title-label="t('wagon.list.plate')"
:value="row.plate"
/>
<VnLv :label="t('wagon.list.volume')" :value="row?.volume" />
<VnLv
:label="t('wagon.list.type')"
:value="row?.type?.name"
/>
</template>
<template #actions>
<QBtn
:label="t('components.smartCard.openCard')"
@click.stop="navigate(row.id)"
outline
/>
<QBtn
:label="t('wagon.list.remove')"
@click.stop="remove(row)"
color="primary"
style="margin-top: 15px"
/>
</template>
</CardList>
</template>
</VnPaginate>
</div>
<QPageSticky position="bottom-right" :offset="[18, 18]">
<QBtn @click="create" fab icon="add" color="primary" shortcut="+" />
</QPageSticky>
<VnTable
ref="tableRef"
data-key="WagonList"
url="Wagons"
:filter="filter"
:columns="columns"
auto-load
order="id DESC"
:right-search="false"
:column-search="false"
:default-mode="'card'"
:disable-option="{ table: true }"
:create="{
urlCreate: 'Wagons',
title: t('Create new wagon'),
onDataSaved: () => {
window.location.reload();
},
formInitialData: {},
}"
>
<template #more-create-dialog="{ data }">
<VnInput
filled
v-model="data.label"
:label="t('wagon.create.label')"
type="number"
min="0"
:rules="[(val) => !!val || t('wagon.warnings.labelNotEmpty')]"
/>
<VnInput
filled
v-model="data.plate"
:label="t('wagon.create.plate')"
:rules="[(val) => !!val || t('wagon.warnings.plateNotEmpty')]"
/>
<VnInput
filled
v-model="data.volume"
:label="t('wagon.create.volume')"
type="number"
min="0"
:rules="[(val) => !!val || t('wagon.warnings.volumeNotEmpty')]"
/>
<VnSelect
url="WagonTypes"
filled
v-model="data.typeFk"
use-input
fill-input
hide-selected
input-debounce="0"
option-label="name"
option-value="id"
emit-value
map-options
:label="t('wagon.create.type')"
:options="filteredWagonTypes"
:rules="[(val) => !!val || t('wagon.warnings.typeNotEmpty')]"
@filter="filterType"
>
<template v-if="data.typeFk" #append>
<QIcon
name="cancel"
@click.stop.prevent="data.typeFk = null"
class="cursor-pointer"
/>
</template>
<template #no-option>
<QItem>
<QItemSection class="text-grey">
{{ t('wagon.warnings.noData') }}
</QItemSection>
</QItem>
</template>
</VnSelect>
</template>
</VnTable>
</QPage>
</template>