From 0cdd090daf7afb0a8e72e7059ddfbc50e26bdf9c Mon Sep 17 00:00:00 2001 From: alexm Date: Mon, 7 Aug 2023 12:00:42 +0200 Subject: [PATCH] refs #5673 feat(FormModel): basciFilter, feat: modul top toolbar --- src/components/FormModel.vue | 85 ++++++++++++++--------- src/components/common/VnSelectFilter.vue | 53 +++++++------- src/pages/Claim/Card/ClaimCard.vue | 8 ++- src/pages/Claim/Card/ClaimDevelopment.vue | 38 ++++------ src/pages/Claim/Card/ClaimPhoto.vue | 69 ++++-------------- src/pages/Claim/Card/ClaimRma.vue | 35 ++++------ src/pages/Customer/Card/CustomerCard.vue | 10 +++ src/router/modules/claim.js | 1 + 8 files changed, 136 insertions(+), 163 deletions(-) diff --git a/src/components/FormModel.vue b/src/components/FormModel.vue index 0b22dd3b7..ef0ce173b 100644 --- a/src/components/FormModel.vue +++ b/src/components/FormModel.vue @@ -41,20 +41,10 @@ const $props = defineProps({ type: Object, default: null, }, -}); - -const emit = defineEmits(['onFetch']); - -defineExpose({ - save, - insert, - remove, -}); - -onMounted(async () => await fetch()); - -onUnmounted(() => { - state.unset($props.model); + defaultActions: { + type: Boolean, + default: true, + }, }); const isLoading = ref(false); @@ -62,12 +52,38 @@ const hasChanges = ref(false); const formData = computed(() => state.get($props.model)); const originalData = ref(); const formUrl = computed(() => $props.url); +const stActionsExist = ref(false); + +const emit = defineEmits(['onFetch']); + +defineExpose({ + save, + insert, + remove, + onSubmit, + reset, + hasChanges, +}); + +onMounted(async () => { + await fetch(); + stActionsExist.value = !!document.querySelector('#st-actions'); +}); + +onUnmounted(() => { + state.unset($props.model); +}); async function fetch() { const { data } = await axios.get($props.url, { params: { filter: $props.filter }, }); + if (Array.isArray(data)) { + let $index = 0; + data.map((d) => (d.$index = $index++)); + } + state.set($props.model, data); originalData.value = JSON.parse(JSON.stringify(data)); @@ -84,7 +100,11 @@ async function save() { }); } isLoading.value = true; - await axios.patch($props.urlUpdate || $props.url, formData.value); + try { + await axios.patch($props.urlUpdate || $props.url, formData.value); + } catch { + return (isLoading.value = false); + } originalData.value = JSON.parse(JSON.stringify(formData.value)); hasChanges.value = false; @@ -93,6 +113,7 @@ async function save() { function reset() { state.set($props.model, originalData.value); + watch(formData.value, () => (hasChanges.value = true)); hasChanges.value = false; } // eslint-disable-next-line vue/no-dupe-keys @@ -118,28 +139,25 @@ async function crudSave() { }); } isLoading.value = true; - const changes = getChanges(); - await saveChanges(changes); - if (changes.creates?.length) await fetch(); + await saveChanges(); } -async function saveChanges(changes) { +async function saveChanges() { + const changes = getChanges(); try { await axios.post($props.urlUpdate || $props.url + '/crud', changes); } catch (e) { - quasar.notify({ - type: 'negative', - message: 'Some fields are invalid', - }); + return (isLoading.value = false); } originalData.value = JSON.parse(JSON.stringify(formData.value)); hasChanges.value = false; isLoading.value = false; + if (changes.creates?.length) await fetch(); } async function insert() { - const $index = formData.value.length + 1; + const $index = formData.value[formData.value.length - 1].$index + 1; formData.value.push(Object.assign({ $index }, $props.dataRequired)); hasChanges.value = true; } @@ -156,6 +174,7 @@ async function insert() { // } async function remove(data) { + console.log(data); if (!data.length) return quasar.notify({ type: 'warning', @@ -253,25 +272,29 @@ function isEmpty(obj) { -
- + + +
+ +
- +
- + -import { ref, watch, toRefs } from 'vue'; +import { ref, toRefs } from 'vue'; const emit = defineEmits(['update:modelValue', 'update:options']); const $props = defineProps({ @@ -18,43 +18,42 @@ const $props = defineProps({ }); const updateValue = (newValue) => emit('update:modelValue', newValue); -const { modelValue, options, optionLabel } = toRefs($props); +const { modelValue, optionLabel, options } = toRefs($props); +const myOptions = ref(JSON.parse(JSON.stringify(options.value))); +const myOptionsOriginal = ref(JSON.parse(JSON.stringify(options.value))); -function filterFn(val, update) { - update( - () => { - const needle = val.toLowerCase(); - // $props.options.value = options.value.filter( - // (v) => v[$props.optionLabel.value].toLowerCase().indexOf(needle) > -1 - // ); - // updateOptions( - // $props.options.filter( - // (v) => v[$props.optionLabel].toLowerCase().indexOf(needle) > -1 - // ) - // ); - const filteredOptions = options.value.filter( - (v) => v[optionLabel.value].toLowerCase().indexOf(needle) > -1 - ); - emit('update:options', filteredOptions); - }, - (ref) => { - ref.setOptionIndex(-1); - ref.moveOptionSelection(1, true); - } - ); -} +const filter = (val, options) => { + const search = val.toLowerCase(); + + if (val === '') return options; + return options.filter((row) => { + const id = row.id; + const name = row[$props.optionLabel].toLowerCase(); + + const idMatches = id == search; + const nameMatches = name.indexOf(search) > -1; + + return idMatches || nameMatches; + }); +}; + +const filterHandler = (val, update) => { + update(() => { + myOptions.value = filter(val, myOptionsOriginal.value); + }); +}; diff --git a/src/pages/Claim/Card/ClaimCard.vue b/src/pages/Claim/Card/ClaimCard.vue index b77f95d38..141b6e258 100644 --- a/src/pages/Claim/Card/ClaimCard.vue +++ b/src/pages/Claim/Card/ClaimCard.vue @@ -64,7 +64,13 @@ onMounted(async () => { -
+ +
+ {{ route.meta?.title && t(`claim.pageTitles.${route.meta.title}`) }} +
+ +
+ diff --git a/src/pages/Claim/Card/ClaimDevelopment.vue b/src/pages/Claim/Card/ClaimDevelopment.vue index 09a655d3c..da297cd81 100644 --- a/src/pages/Claim/Card/ClaimDevelopment.vue +++ b/src/pages/Claim/Card/ClaimDevelopment.vue @@ -1,5 +1,5 @@