175 lines
5.1 KiB
Vue
175 lines
5.1 KiB
Vue
<script setup>
|
|
import axios from 'axios';
|
|
import { useQuasar } from 'quasar';
|
|
import { useArrayData } from 'src/composables/useArrayData';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { useRouter } from 'vue-router';
|
|
import VnTable from 'src/components/VnTable/VnTable.vue';
|
|
import { computed, ref } 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');
|
|
const store = arrayData.store;
|
|
const router = useRouter();
|
|
const { t } = useI18n();
|
|
const tableRef = ref();
|
|
const filter = {
|
|
include: {
|
|
relation: 'type',
|
|
scope: {
|
|
fields: 'name',
|
|
},
|
|
},
|
|
};
|
|
|
|
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` });
|
|
}
|
|
|
|
async function remove(row) {
|
|
try {
|
|
await axios.delete(`Wagons/${row.id}`).then(async () => {
|
|
quasar.notify({
|
|
message: t('wagon.list.removeItem'),
|
|
type: 'positive',
|
|
});
|
|
store.data.splice(store.data.indexOf(row), 1);
|
|
window.location.reload();
|
|
});
|
|
} catch (error) {
|
|
//
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<QPage class="column items-center q-pa-md">
|
|
<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: () => {
|
|
tableRef.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>
|