138 lines
3.7 KiB
TypeScript
138 lines
3.7 KiB
TypeScript
import { type Ref, defineComponent, inject, onMounted, ref, watch } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
import { useAlertService } from '@/shared/alert/alert.service';
|
|
import { useDateFormat } from '@/shared/composables';
|
|
import { type IPrenotazione } from '@/shared/model/prenotazione.model';
|
|
|
|
import PrenotazioneService from './prenotazione.service';
|
|
|
|
export default defineComponent({
|
|
name: 'Prenotazione',
|
|
setup() {
|
|
const { t: t$ } = useI18n();
|
|
const dateFormat = useDateFormat();
|
|
const prenotazioneService = inject('prenotazioneService', () => new PrenotazioneService());
|
|
const alertService = inject('alertService', () => useAlertService(), true);
|
|
|
|
const itemsPerPage = ref(20);
|
|
const queryCount: Ref<number> = ref(null);
|
|
const page: Ref<number> = ref(1);
|
|
const propOrder = ref('id');
|
|
const reverse = ref(false);
|
|
const totalItems = ref(0);
|
|
|
|
const prenotaziones: Ref<IPrenotazione[]> = ref([]);
|
|
|
|
const isFetching = ref(false);
|
|
|
|
const clear = () => {
|
|
page.value = 1;
|
|
};
|
|
|
|
const sort = (): Array<any> => {
|
|
const result = [`${propOrder.value},${reverse.value ? 'desc' : 'asc'}`];
|
|
if (propOrder.value !== 'id') {
|
|
result.push('id');
|
|
}
|
|
return result;
|
|
};
|
|
|
|
const retrievePrenotaziones = async () => {
|
|
isFetching.value = true;
|
|
try {
|
|
const paginationQuery = {
|
|
page: page.value - 1,
|
|
size: itemsPerPage.value,
|
|
sort: sort(),
|
|
};
|
|
const res = await prenotazioneService().retrieve(paginationQuery);
|
|
totalItems.value = Number(res.headers['x-total-count']);
|
|
queryCount.value = totalItems.value;
|
|
prenotaziones.value = res.data;
|
|
} catch (err) {
|
|
alertService.showHttpError(err.response);
|
|
} finally {
|
|
isFetching.value = false;
|
|
}
|
|
};
|
|
|
|
const handleSyncList = () => {
|
|
retrievePrenotaziones();
|
|
};
|
|
|
|
onMounted(async () => {
|
|
await retrievePrenotaziones();
|
|
});
|
|
|
|
const removeId: Ref<number> = ref(null);
|
|
const removeEntity = ref<any>(null);
|
|
const prepareRemove = (instance: IPrenotazione) => {
|
|
removeId.value = instance.id;
|
|
removeEntity.value.show();
|
|
};
|
|
const closeDialog = () => {
|
|
removeEntity.value.hide();
|
|
};
|
|
const removePrenotazione = async () => {
|
|
try {
|
|
await prenotazioneService().delete(removeId.value);
|
|
const message = t$('smartbookingApp.prenotazione.deleted', { param: removeId.value }).toString();
|
|
alertService.showInfo(message, { variant: 'danger' });
|
|
removeId.value = null;
|
|
retrievePrenotaziones();
|
|
closeDialog();
|
|
} catch (error) {
|
|
alertService.showHttpError(error.response);
|
|
}
|
|
};
|
|
|
|
const changeOrder = (newOrder: string) => {
|
|
if (propOrder.value === newOrder) {
|
|
reverse.value = !reverse.value;
|
|
} else {
|
|
reverse.value = false;
|
|
}
|
|
propOrder.value = newOrder;
|
|
};
|
|
|
|
// Whenever order changes, reset the pagination
|
|
watch([propOrder, reverse], async () => {
|
|
if (page.value === 1) {
|
|
// first page, retrieve new data
|
|
await retrievePrenotaziones();
|
|
} else {
|
|
// reset the pagination
|
|
clear();
|
|
}
|
|
});
|
|
|
|
// Whenever page changes, switch to the new page.
|
|
watch(page, async () => {
|
|
await retrievePrenotaziones();
|
|
});
|
|
|
|
return {
|
|
prenotaziones,
|
|
handleSyncList,
|
|
isFetching,
|
|
retrievePrenotaziones,
|
|
clear,
|
|
...dateFormat,
|
|
removeId,
|
|
removeEntity,
|
|
prepareRemove,
|
|
closeDialog,
|
|
removePrenotazione,
|
|
itemsPerPage,
|
|
queryCount,
|
|
page,
|
|
propOrder,
|
|
reverse,
|
|
totalItems,
|
|
changeOrder,
|
|
t$,
|
|
};
|
|
},
|
|
});
|