refs #5673 feat(FormModel): basciFilter, feat: modul top toolbar

2023-08-07 12:00:42 +02:00 · 2023-08-07 12:00:42 +02:00 · 0cdd090daf
parent 35ac3afe81
commit 0cdd090daf
8 changed files with 136 additions and 163 deletions
--- 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) {
    </QBanner>
    <QForm v-if="formData" @submit="onSubmit" @reset="reset" class="q-pa-md">
        <slot name="form" :data="formData" :validate="validate" :filter="filter"></slot>
-        <div class="q-mt-lg">
-            <slot name="actions">
+    </QForm>
+    <Teleport to="#st-actions" v-if="stActionsExist">
+        <div class="row q-gutter-x-sm">
+            <slot name="moreActions" />
+            <div v-if="$props.defaultActions">
                <QBtn
                    :label="t('globals.save')"
-                    type="submit"
                    color="primary"
+                    icon="save"
+                    @click="onSubmit"
                    :disable="!hasChanges"
                />
                <QBtn
                    :label="t('globals.reset')"
-                    type="reset"
-                    class="q-ml-sm"
                    color="primary"
+                    class="q-ml-sm"
                    flat
+                    @click="reset"
                    :disable="!hasChanges"
                />
-            </slot>
+            </div>
        </div>
-    </QForm>
+    </Teleport>
    <SkeletonForm v-if="!formData" />
    <QInnerLoading
        :showing="isLoading"
--- a/src/components/common/VnSelectFilter.vue
+++ b/src/components/common/VnSelectFilter.vue
@ -1,5 +1,5 @@
 <script setup>
-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);
+    });
+};
 </script>

 <template>
    <QSelect
        v-model="modelValue"
        @update:model-value="updateValue"
-        :options="options"
+        :options="myOptions"
        :option-label="optionLabel"
        v-bind="$attrs"
        emit-value
        map-options
        use-input
-        @filter="(value, update) => filterFn(value, update)"
+        @filter="filterHandler"
    />
 </template>
--- a/src/pages/Claim/Card/ClaimCard.vue
+++ b/src/pages/Claim/Card/ClaimCard.vue
@ -64,7 +64,13 @@ onMounted(async () => {
        </QScrollArea>
    </QDrawer>
    <QPageContainer>
-        <div id="sub-toolbar"></div>
+        <QToolbar id="sub-toolbar" class="bg-dark text-white justify-end">
+            <div id="st-data">
+                {{ route.meta?.title && t(`claim.pageTitles.${route.meta.title}`) }}
+            </div>
+            <QSpace />
+            <div id="st-actions"></div>
+        </QToolbar>
        <QPage class="q-pa-md">
            <RouterView></RouterView>
        </QPage>
--- a/src/pages/Claim/Card/ClaimDevelopment.vue
+++ b/src/pages/Claim/Card/ClaimDevelopment.vue
@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import FormModel from 'components/FormModel.vue';
@ -126,16 +126,25 @@ const columns = computed(() => [
                url="ClaimDevelopments"
                :crud="true"
                :filter="developmentsFilter"
-                model="claim"
+                model="claimDevelopment"
                ref="claimDevelopmentForm"
                :data-required="{ claimFk: route.params.id }"
            >
+                <template #moreActions>
+                    <QBtn
+                        :label="t('globals.remove')"
+                        color="primary"
+                        icon="delete"
+                        @click="claimDevelopmentForm.remove(selected)"
+                        :disable="!selected.length"
+                    />
+                </template>
                <template #form="{ data }">
                    <QTable
                        :columns="columns"
                        :rows="data"
                        :pagination="{ rowsPerPage: 0 }"
-                        row-key="id"
+                        row-key="$index"
                        selection="multiple"
                        hide-pagination
                        v-model:selected="selected"
@ -147,12 +156,6 @@ const columns = computed(() => [
                                    :label="col.label"
                                    v-model="row[col.model]"
                                    :options="col.options"
-                                    @update:options="
-                                        (newOptions) => {
-                                            console.log(newOptions);
-                                            col.options = newOptions;
-                                        }
-                                    "
                                    :option-value="col.optionValue"
                                    :option-label="col.optionLabel"
                                />
@ -172,12 +175,6 @@ const columns = computed(() => [
                                                    :label="col.label"
                                                    v-model="props.row[col.model]"
                                                    :options="col.options"
-                                                    @update:options="
-                                                        (newOptions) => {
-                                                            console.log(newOptions);
-                                                            col.options = newOptions;
-                                                        }
-                                                    "
                                                    :option-value="col.optionValue"
                                                    :option-label="col.optionLabel"
                                                    dense
@ -193,17 +190,6 @@ const columns = computed(() => [
            </FormModel>
        </div>
    </div>
-    <Teleport to="#sub-toolbar">
-        <QToolbar class="bg-dark text-white justify-end">
-            <div class="row q-gutter-x-sm">
-                <QBtn
-                    color="primary"
-                    icon="delete"
-                    @click="claimDevelopmentForm.remove(selected)"
-                />
-            </div>
-        </QToolbar>
-    </Teleport>
    <QPageSticky position="bottom-right" :offset="[25, 25]">
        <QBtn fab color="primary" icon="add" @click="claimDevelopmentForm.insert()" />
    </QPageSticky>
--- a/src/pages/Claim/Card/ClaimPhoto.vue
+++ b/src/pages/Claim/Card/ClaimPhoto.vue
@ -4,7 +4,6 @@ import { ref, computed } from 'vue';
 import { useQuasar } from 'quasar';
 import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import { useStateStore } from 'stores/useStateStore';
 import { useSession } from 'composables/useSession';
 import VnConfirm from 'components/ui/VnConfirm.vue';
 import FetchData from 'components/FetchData.vue';
@ -12,7 +11,6 @@ import FetchData from 'components/FetchData.vue';
 const router = useRouter();
 const quasar = useQuasar();
 const { t } = useI18n();
-const stateStore = useStateStore();
 const session = useSession();
 const token = session.getToken();

@ -237,59 +235,20 @@ function onDrag() {
        </div>
    </div>

-    <Teleport
-        v-if="stateStore.isHeaderMounted() && !quasar.platform.is.mobile"
-        to="#actions-prepend"
-    >
-        <div class="row q-gutter-x-sm">
-            <label for="fileInput">
-                <QBtn
-                    @click="inputFile.nativeEl.click()"
-                    icon="add"
-                    color="primary"
-                    dense
-                    rounded
-                >
-                    <QInput
-                        ref="inputFile"
-                        type="file"
-                        style="display: none"
-                        multiple
-                        v-model="files"
-                        @update:model-value="create()"
-                    />
-                    <QTooltip bottom> {{ t('globals.add') }} </QTooltip>
-                </QBtn>
-            </label>
-            <QSeparator vertical />
-        </div>
-    </Teleport>
-
-    <QPageSticky
-        v-if="quasar.platform.is.mobile"
-        position="bottom"
-        :offset="[0, 0]"
-        expand
-    >
-        <QToolbar class="bg-primary text-white q-pa-none">
-            <QTabs class="full-width" align="justify" inline-label narrow-indicator>
-                <QTab
-                    @click="inputFile.nativeEl.click()"
-                    icon="add_circle"
-                    :label="t('globals.add')"
-                >
-                    <QInput
-                        ref="inputFile"
-                        type="file"
-                        style="display: none"
-                        multiple
-                        v-model="files"
-                        @update:model-value="create()"
-                    />
-                    <QTooltip bottom> {{ t('globals.add') }} </QTooltip>
-                </QTab>
-            </QTabs>
-        </QToolbar>
+    <QPageSticky position="bottom-right" :offset="[25, 25]">
+        <label for="fileInput">
+            <QBtn fab @click="inputFile.nativeEl.click()" icon="add" color="primary">
+                <QInput
+                    ref="inputFile"
+                    type="file"
+                    style="display: none"
+                    multiple
+                    v-model="files"
+                    @update:model-value="create()"
+                />
+                <QTooltip bottom> {{ t('globals.add') }} </QTooltip>
+            </QBtn>
+        </label>
    </QPageSticky>

    <!-- MULTIMEDIA DIALOG START-->
--- a/src/pages/Claim/Card/ClaimRma.vue
+++ b/src/pages/Claim/Card/ClaimRma.vue
@ -5,7 +5,6 @@ import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
 import { useRoute } from 'vue-router';
 import { useArrayData } from 'src/composables/useArrayData';
-import { useStateStore } from 'stores/useStateStore';
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import FetchData from 'components/FetchData.vue';
 import VnConfirm from 'src/components/ui/VnConfirm.vue';
@ -15,7 +14,6 @@ import { toDate } from 'src/filters';
 const quasar = useQuasar();
 const route = useRoute();
 const { t } = useI18n();
-const stateStore = useStateStore();
 const arrayData = useArrayData('ClaimRma');

 const claim = ref();
@ -147,29 +145,20 @@ async function remove({ id }) {
        </div>
    </div>

-    <Teleport
-        v-if="stateStore.isHeaderMounted() && !quasar.platform.is.mobile"
-        to="#actions-prepend"
-    >
-        <div class="row q-gutter-x-sm">
-            <QBtn @click="addRow()" icon="add" color="primary" dense rounded>
+    <QPageSticky position="bottom-right" :offset="[25, 25]">
+        <label for="fileInput">
+            <QBtn fab @click="inputFile.nativeEl.click()" icon="add" color="primary">
+                <QInput
+                    ref="inputFile"
+                    type="file"
+                    style="display: none"
+                    multiple
+                    v-model="files"
+                    @update:model-value="create()"
+                />
                <QTooltip bottom> {{ t('globals.add') }} </QTooltip>
            </QBtn>
-            <QSeparator vertical />
-        </div>
-    </Teleport>
-
-    <QPageSticky
-        v-if="quasar.platform.is.mobile"
-        position="bottom"
-        :offset="[0, 0]"
-        expand
-    >
-        <QToolbar class="bg-primary text-white q-pa-none">
-            <QTabs class="full-width" align="justify" inline-label narrow-indicator>
-                <QTab @click="addRow()" icon="add_circle" :label="t('globals.add')" />
-            </QTabs>
-        </QToolbar>
+        </label>
    </QPageSticky>
 </template>

--- a/src/pages/Customer/Card/CustomerCard.vue
+++ b/src/pages/Customer/Card/CustomerCard.vue
@ -1,11 +1,14 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
 import { useStateStore } from 'stores/useStateStore';
+import { useRoute } from 'vue-router';
 import CustomerDescriptor from './CustomerDescriptor.vue';
 import LeftMenu from 'components/LeftMenu.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';

 const stateStore = useStateStore();
+const route = useRoute();
+console.log(route);
 const { t } = useI18n();
 </script>
 <template>
@ -25,6 +28,13 @@ const { t } = useI18n();
        </QScrollArea>
    </QDrawer>
    <QPageContainer>
+        <QToolbar id="sub-toolbar" class="bg-dark text-white justify-end">
+            <div id="st-data">
+                {{ route.meta?.title && t(`customer.pageTitles.${route.meta.title}`) }}
+            </div>
+            <QSpace />
+            <div id="st-actions"></div>
+        </QToolbar>
        <QPage class="q-pa-md">
            <RouterView></RouterView>
        </QPage>
--- a/src/router/modules/claim.js
+++ b/src/router/modules/claim.js
@ -107,6 +107,7 @@ export default {
                    meta: {
                        title: 'development',
                        icon: 'vn:traceability',
+                        roles: ['claimManager'],
                    },
                    component: () => import('src/pages/Claim/Card/ClaimDevelopment.vue'),
                },