import { computed, ref, watch } from 'vue'; import { useStore } from 'vuex'; import { useRoute } from 'vue-router'; import { isEmpty } from 'lodash'; import { useI18n } from 'vue-i18n'; import { useToast } from 'primevue/usetoast'; export function useDatatableUpdate (servicePrefix) { const moduleName = servicePrefix.toLowerCase(); const store = useStore(); const route = useRoute(); const { t } = useI18n(); const toast = useToast(); const isLoading = computed(() => store.getters[`${moduleName}/isLoading`]); const item = ref({}); async function retrieve () { let id = route.params.id; if (isEmpty(id)) { id = route.query.id; } if (isEmpty(id)) { return; } await store.dispatch(`${moduleName}/load`, decodeURIComponent(id)); } const retrievedItem = computed(() => { let id = route.params.id; if (isEmpty(id)) { id = route.query.id; } if (isEmpty(id)) { return null; } return store.getters[`${moduleName}/find`](id); }); watch( retrievedItem, (newValue) => { item.value = newValue; } ); async function updateItem (item) { await store.dispatch(`${moduleName}/update`, item); } const updated = computed(() => store.state[moduleName].updated); watch( updated, (newValue) => { if (!newValue) { return; } onUpdated(item); } ); async function updateItemWithFormData (item) { await store.dispatch(`${moduleName}/updateWithFormData`, item); } function onUpdated (item) { toast.add({ severity: 'success', detail: t('{resource} updated', { 'resource': item['@id'], }), life: 3500, }); } return { isLoading, item, retrieve, retrievedItem, updateItem, updateItemWithFormData, updated, onUpdated, }; }