forked from verdnatura/salix-front
118 lines
3.9 KiB
Vue
118 lines
3.9 KiB
Vue
<script setup>
|
|
import { useRoute } from 'vue-router';
|
|
import { computed, ref, watch } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
import VnPaginate from 'components/ui/VnPaginate.vue';
|
|
import ZoneCreateWarehouse from './ZoneCreateWarehouse.vue';
|
|
|
|
import { useVnConfirm } from 'composables/useVnConfirm';
|
|
import { useArrayData } from 'composables/useArrayData';
|
|
import axios from 'axios';
|
|
|
|
const { t } = useI18n();
|
|
const route = useRoute();
|
|
const { openConfirmationModal } = useVnConfirm();
|
|
|
|
const paginateRef = ref();
|
|
const createWarehouseDialogRef = ref(null);
|
|
|
|
const arrayData = useArrayData('ZoneWarehouses');
|
|
const store = arrayData.store;
|
|
|
|
const data = computed(() => store.data);
|
|
|
|
const urlPath = computed(() => `Zones/${route.params.id}/warehouses`);
|
|
|
|
const columns = computed(() => [
|
|
{
|
|
name: 'name',
|
|
},
|
|
{
|
|
name: 'action',
|
|
},
|
|
]);
|
|
|
|
const deleteWarehouse = async (row) => {
|
|
await axios.delete(`${urlPath.value}/${row.id}`);
|
|
fetchWarehouses();
|
|
};
|
|
|
|
const createZoneWarehouse = async (ZoneWarehouseFormData) => {
|
|
await axios.post(urlPath.value, ZoneWarehouseFormData);
|
|
fetchWarehouses();
|
|
};
|
|
|
|
watch(
|
|
() => route.params.id,
|
|
() => {
|
|
store.url = urlPath.value;
|
|
store.filter.include = 'warehouse';
|
|
fetchWarehouses();
|
|
}
|
|
);
|
|
|
|
const fetchWarehouses = () => paginateRef.value.fetch();
|
|
|
|
const openCreateWarehouseForm = () => createWarehouseDialogRef.value.show();
|
|
</script>
|
|
|
|
<template>
|
|
<QPage class="column items-center q-pa-md">
|
|
<div class="full-width" style="max-width: 400px">
|
|
<VnPaginate
|
|
ref="paginateRef"
|
|
data-key="ZoneWarehouses"
|
|
:filter="{ include: 'warehouse' }"
|
|
:url="urlPath"
|
|
auto-load
|
|
>
|
|
<template #body="{ rows }">
|
|
<QTable :rows="data" :columns="columns" hide-header>
|
|
<template #body="{ row, rowIndex }">
|
|
<QTr>
|
|
<QTd>
|
|
<span>{{ row.warehouse?.name }}</span>
|
|
</QTd>
|
|
<QTd style="width: 50px !important">
|
|
<QIcon
|
|
name="delete"
|
|
size="sm"
|
|
class="cursor-pointer"
|
|
color="primary"
|
|
@click="
|
|
openConfirmationModal(
|
|
t('warehouses.deleteTitle'),
|
|
t('warehouses.deleteSubtitle'),
|
|
() => deleteWarehouse(row, rows, rowIndex)
|
|
)
|
|
"
|
|
>
|
|
<QTooltip>
|
|
{{ t('warehouses.delete') }}
|
|
</QTooltip>
|
|
</QIcon>
|
|
</QTd>
|
|
</QTr>
|
|
</template>
|
|
</QTable>
|
|
</template>
|
|
</VnPaginate>
|
|
</div>
|
|
<QDialog ref="createWarehouseDialogRef">
|
|
<ZoneCreateWarehouse @on-submit-create-warehouse="createZoneWarehouse" />
|
|
</QDialog>
|
|
<QPageSticky position="bottom-right" :offset="[18, 18]">
|
|
<QBtn
|
|
fab
|
|
icon="add"
|
|
color="primary"
|
|
@click="openCreateWarehouseForm()"
|
|
shortcut="+"
|
|
>
|
|
<QTooltip>{{ t('warehouses.add') }}</QTooltip>
|
|
</QBtn>
|
|
</QPageSticky>
|
|
</QPage>
|
|
</template>
|