diff --git a/src/boot/keyShortcut.js b/src/boot/keyShortcut.js index 5afb5b74a..6da06c8bf 100644 --- a/src/boot/keyShortcut.js +++ b/src/boot/keyShortcut.js @@ -1,6 +1,6 @@ export default { - mounted: function (el, binding) { - const shortcut = binding.value ?? '+'; + mounted(el, binding) { + const shortcut = binding.value || '+'; const { key, ctrl, alt, callback } = typeof shortcut === 'string' @@ -8,25 +8,24 @@ export default { key: shortcut, ctrl: true, alt: true, - callback: () => - document - .querySelector(`button[shortcut="${shortcut}"]`) - ?.click(), + callback: () => el?.click(), } : binding.value; + if (!el.hasAttribute('shortcut')) { + el.setAttribute('shortcut', key); + } + const handleKeydown = (event) => { if (event.key === key && (!ctrl || event.ctrlKey) && (!alt || event.altKey)) { callback(); } }; - // Attach the event listener to the window window.addEventListener('keydown', handleKeydown); - el._handleKeydown = handleKeydown; }, - unmounted: function (el) { + unmounted(el) { if (el._handleKeydown) { window.removeEventListener('keydown', el._handleKeydown); } diff --git a/src/components/CreateBankEntityForm.vue b/src/components/CreateBankEntityForm.vue index 2da3aa994..7c4b94a6a 100644 --- a/src/components/CreateBankEntityForm.vue +++ b/src/components/CreateBankEntityForm.vue @@ -14,7 +14,7 @@ const { t } = useI18n(); const bicInputRef = ref(null); const state = useState(); -const customer = computed(() => state.get('customer')); +const customer = computed(() => state.get('Customer')); const countriesFilter = { fields: ['id', 'name', 'code'], diff --git a/src/components/FormModel.vue b/src/components/FormModel.vue index 2e580257c..59141d374 100644 --- a/src/components/FormModel.vue +++ b/src/components/FormModel.vue @@ -84,7 +84,7 @@ const $props = defineProps({ }, reload: { type: Boolean, - default: false, + default: true, }, defaultTrim: { type: Boolean, @@ -97,7 +97,7 @@ const $props = defineProps({ }); const emit = defineEmits(['onFetch', 'onDataSaved']); const modelValue = computed( - () => $props.model ?? `formModel_${route?.meta?.title ?? route.name}` + () => $props.model ?? `formModel_${route?.meta?.title ?? route.name}`, ).value; const componentIsRendered = ref(false); const arrayData = useArrayData(modelValue); @@ -105,8 +105,8 @@ const isLoading = ref(false); // Si elegimos observar los cambios del form significa que inicialmente las actions estaran deshabilitadas const isResetting = ref(false); const hasChanges = ref(!$props.observeFormChanges); -const originalData = ref({}); -const formData = computed(() => state.get(modelValue)); +const originalData = computed(() => state.get(modelValue)); +const formData = ref({}); const defaultButtons = computed(() => ({ save: { dataCy: 'saveDefaultBtn', @@ -127,8 +127,6 @@ const defaultButtons = computed(() => ({ })); onMounted(async () => { - originalData.value = JSON.parse(JSON.stringify($props.formInitialData ?? {})); - nextTick(() => (componentIsRendered.value = true)); // Podemos enviarle al form la estructura de data inicial sin necesidad de fetchearla @@ -148,7 +146,7 @@ onMounted(async () => { JSON.stringify(newVal) !== JSON.stringify(originalData.value); isResetting.value = false; }, - { deep: true } + { deep: true }, ); } }); @@ -156,16 +154,24 @@ onMounted(async () => { if (!$props.url) watch( () => arrayData.store.data, - (val) => updateAndEmit('onFetch', val) + (val) => updateAndEmit('onFetch', val), ); +watch( + originalData, + (val) => { + if (val) formData.value = JSON.parse(JSON.stringify(val)); + }, + { immediate: true }, +); + watch( () => [$props.url, $props.filter], async () => { - originalData.value = null; + state.set(modelValue, null); reset(); await fetch(); - } + }, ); onBeforeRouteLeave((to, from, next) => { @@ -197,7 +203,6 @@ async function fetch() { updateAndEmit('onFetch', data); } catch (e) { state.set(modelValue, {}); - originalData.value = {}; throw e; } } @@ -236,6 +241,7 @@ async function saveAndGo() { } function reset() { + formData.value = JSON.parse(JSON.stringify(originalData.value)); updateAndEmit('onFetch', originalData.value); if ($props.observeFormChanges) { hasChanges.value = false; @@ -254,13 +260,12 @@ function filter(value, update, filterOptions) { (ref) => { ref.setOptionIndex(-1); ref.moveOptionSelection(1, true); - } + }, ); } function updateAndEmit(evt, val, res) { state.set(modelValue, val); - originalData.value = val && JSON.parse(JSON.stringify(val)); if (!$props.url) arrayData.store.data = val; emit(evt, state.get(modelValue), res); diff --git a/src/components/ItemsFilterPanel.vue b/src/components/ItemsFilterPanel.vue index dc2a34435..48f607a30 100644 --- a/src/components/ItemsFilterPanel.vue +++ b/src/components/ItemsFilterPanel.vue @@ -282,7 +282,7 @@ const setCategoryList = (data) => { @@ -648,7 +648,7 @@ function handleSelection({ evt, added, rows: selectedRows }, rows) { color="primary" fab icon="add" - shortcut="+" + v-shortcut="'+'" data-cy="vnTableCreateBtn" /> diff --git a/src/components/__tests__/FormModel.spec.js b/src/components/__tests__/FormModel.spec.js index e35684bc3..17812f146 100644 --- a/src/components/__tests__/FormModel.spec.js +++ b/src/components/__tests__/FormModel.spec.js @@ -93,7 +93,7 @@ describe('FormModel', () => { it('should call axios.patch with the right data', async () => { const spy = vi.spyOn(axios, 'patch').mockResolvedValue({ data: {} }); - const { vm } = mount({ propsData: { url, model, formInitialData } }); + const { vm } = mount({ propsData: { url, model } }); vm.formData.mockKey = 'newVal'; await vm.$nextTick(); await vm.save(); @@ -106,6 +106,7 @@ describe('FormModel', () => { const { vm } = mount({ propsData: { url, model, formInitialData, urlCreate: 'mockUrlCreate' }, }); + await vm.$nextTick(); vm.formData.mockKey = 'newVal'; await vm.$nextTick(); await vm.save(); @@ -119,7 +120,7 @@ describe('FormModel', () => { }); const spyPatch = vi.spyOn(axios, 'patch').mockResolvedValue({ data: {} }); const spySaveFn = vi.spyOn(vm.$props, 'saveFn'); - + await vm.$nextTick(); vm.formData.mockKey = 'newVal'; await vm.$nextTick(); await vm.save(); diff --git a/src/components/common/VnCard.vue b/src/components/common/VnCard.vue index 0d80f43ce..44002c22a 100644 --- a/src/components/common/VnCard.vue +++ b/src/components/common/VnCard.vue @@ -10,11 +10,11 @@ import LeftMenu from 'components/LeftMenu.vue'; import RightMenu from 'components/common/RightMenu.vue'; const props = defineProps({ dataKey: { type: String, required: true }, - baseUrl: { type: String, default: undefined }, - customUrl: { type: String, default: undefined }, + url: { type: String, default: undefined }, filter: { type: Object, default: () => {} }, descriptor: { type: Object, required: true }, filterPanel: { type: Object, default: undefined }, + idInWhere: { type: Boolean, default: false }, searchDataKey: { type: String, default: undefined }, searchbarProps: { type: Object, default: undefined }, redirectOnError: { type: Boolean, default: false }, @@ -23,25 +23,20 @@ const props = defineProps({ const stateStore = useStateStore(); const route = useRoute(); const router = useRouter(); -const url = computed(() => { - if (props.baseUrl) { - return `${props.baseUrl}/${route.params.id}`; - } - return props.customUrl; -}); const searchRightDataKey = computed(() => { if (!props.searchDataKey) return route.name; return props.searchDataKey; }); + const arrayData = useArrayData(props.dataKey, { - url: url.value, - filter: props.filter, + url: props.url, + userFilter: props.filter, + oneRecord: true, }); onBeforeMount(async () => { try { - if (!props.baseUrl) arrayData.store.filter.where = { id: route.params.id }; - await arrayData.fetch({ append: false, updateRouter: false }); + await fetch(route.params.id); } catch { const { matched: matches } = router.currentRoute.value; const { path } = matches.at(-1); @@ -49,13 +44,17 @@ onBeforeMount(async () => { } }); -if (props.baseUrl) { - onBeforeRouteUpdate(async (to, from) => { - if (to.params.id !== from.params.id) { - arrayData.store.url = `${props.baseUrl}/${to.params.id}`; - await arrayData.fetch({ append: false, updateRouter: false }); - } - }); +onBeforeRouteUpdate(async (to, from) => { + const id = to.params.id; + if (id !== from.params.id) await fetch(id, true); +}); + +async function fetch(id, append = false) { + const regex = /\/(\d+)/; + if (props.idInWhere) arrayData.store.filter.where = { id }; + else if (!regex.test(props.url)) arrayData.store.url = `${props.url}/${id}`; + else arrayData.store.url = props.url.replace(regex, `/${id}`); + await arrayData.fetch({ append, updateRouter: false }); }