feat: refs #6825 share filters, create popup

2024-05-16 13:38:15 +02:00 · 2024-05-16 13:38:15 +02:00 · 598d116848
parent 6f38aeba83
commit 598d116848
8 changed files with 160 additions and 54 deletions
--- a/src/components/common/VnComponent.vue
+++ b/src/components/common/VnComponent.vue
@ -5,13 +5,20 @@
            :is="
                (components && components[toComponent.component]) ?? toComponent.component
            "
-            v-bind="toComponent.props && toComponent.props(value)"
+            v-bind="
+                typeof toComponent.attrs == 'function'
+                    ? toComponent.attrs(value)
+                    : toComponent.attrs
+            "
            @click="toComponent.event && toComponent.event(value)"
+            v-model="model"
        />
    </span>
 </template>
 <script setup>
-import { computed } from 'vue';
+import { computed, defineModel } from 'vue';
+
+const model = defineModel();
 const $props = defineProps({
    prop: {
        type: Object,
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@ -111,7 +111,7 @@ async function fetchFilter(val) {

    if (new RegExp(/\d/g).test(val)) key = optionValue.value;

-    const where = { [key]: { like: `%${val}%` } };
+    const where = { ...{ [key]: { like: `%${val}%` } }, ...$props.where };
    const fetchOptions = { where, order: sortBy, limit };
    if (fields) fetchOptions.fields = fields;
    return dataRef.value.fetch(fetchOptions);
--- a/src/components/common/VnTable.vue
+++ b/src/components/common/VnTable.vue
@ -10,6 +10,7 @@ import VnLv from 'components/ui/VnLv.vue';

 import VnTableColumn from 'components/common/VnTableColumn.vue';
 import VnTableFilter from 'components/common/VnTableFilter.vue';
+import VnTableCreate from 'components/common/VnTableCreate.vue';

 const $props = defineProps({
    columns: {
@ -44,6 +45,10 @@ const $props = defineProps({
        type: String,
        default: null,
    },
+    create: {
+        type: Object,
+        default: null,
+    },
 });
 const { t } = useI18n();
 const stateStore = useStateStore();
@ -53,6 +58,7 @@ const mode = ref('card');
 const selected = ref([]);
 const params = ref({});
 const VnPaginateRef = ref();
+const showForm = ref(false);
 const tableModes = [
    {
        icon: 'view_column',
@ -73,26 +79,27 @@ onMounted(() => {
 });

 const cardTemplate = computed(() => {
-    let chips = [];
-    let visible = [];
+    const chips = [];
+    const visible = [];
+    const create = [];
    let title;
    let actions;
    for (const col of $props.columns) {
        if (col.field == 'tableActions') {
            actions = col;
-            continue;
        }
        if (col.chip) {
            chips.push(col);
-            continue;
        }
        if (col.isTitle) {
            title = col;
-            continue;
+        }
+        if (col.create) {
+            create.push(col);
        }
        if (col.cardVisible) visible.push(col);
    }
-    return { chips, title, visible, actions };
+    return { chips, title, visible, actions, create };
 });

 const rowClickFunction = computed(() => {
@ -105,12 +112,10 @@ const rowClickFunction = computed(() => {
 <template>
    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
        <QScrollArea class="fit text-grey-8">
-            {{ params }}
            <VnFilterPanel
                :data-key="$attrs['data-key']"
                :search-button="true"
-                v-model:params="params"
-                @remove="(key) => console.log('HA LELGADO', key)"
+                v-model="params"
            >
                <template #body>
                    <VnTableFilter
@ -118,9 +123,10 @@ const rowClickFunction = computed(() => {
                        :data-key="$attrs['data-key']"
                        v-for="col of columns"
                        :key="col.id"
-                        v-model="params[col.field]"
+                        v-model="params[col.columnFilter?.field ?? col.field]"
                    />
                </template>
+                <slot name="moreFilterPanel" :params="params" :columns="columns" />
            </VnFilterPanel>
        </QScrollArea>
    </QDrawer>
@ -203,7 +209,7 @@ const rowClickFunction = computed(() => {
                            bordered
                            flat
                            class="row no-wrap justify-between cursor-pointer"
-                            @row-click="
+                            @click="
                                (_, row) => {
                                    $props.rowClick && $props.rowClick(row);
                                }
@ -254,20 +260,15 @@ const rowClickFunction = computed(() => {
                                    {{ row[cardTemplate.title.field] }}
                                </QCardSection>
                                <!-- Fields -->
-                                <QCardSection class="q-pl-sm q-pr-lg q-py-xs flex-one">
+                                <QCardSection
+                                    class="q-pl-sm q-pr-lg q-py-xs flex-one no-pointer-events"
+                                >
                                    <div
                                        v-for="col of cardTemplate.visible"
                                        :key="col.field"
                                        class="fields"
                                    >
-                                        <VnLv
-                                            v-if="
-                                                col.cardVisible &&
-                                                !col.isChip &&
-                                                col.field != 'tableActions'
-                                            "
-                                            :label="`${col.label}:`"
-                                        >
+                                        <VnLv :label="`${col.label}:`">
                                            <template #value>
                                                <VnTableColumn :column="col" :row />
                                            </template>
@ -297,6 +298,23 @@ const rowClickFunction = computed(() => {
            </QTable>
        </template>
    </VnPaginate>
+    <!-- AÑADIR EN EL OBJETO LA POSIBILIDAD DE PONER QUE ESE CAMPO SIRVE PARA LA CREACION Y MOSTARLO EN UN POPUP-->
+    <!-- AÑADIR SLOT PARA AÑADIR MAS CAMPOS -->
+    <!-- AÑADIR SLOT SETEAR EL POPUP -->
+    <QPageSticky v-if="create" :offset="[20, 20]">
+        <QBtn @click="showForm = !showForm" color="primary" fab icon="add" />
+        <!-- <QTooltip>
+            {{ t('New client') }}
+        </QTooltip> -->
+    </QPageSticky>
+    <QDialog v-model="showForm" transition-show="scale" transition-hide="scale">
+        <VnTableCreate
+            :columns="cardTemplate.create"
+            :model="$attrs['data-key'] + 'Create'"
+            :create="create"
+        />
+        <!--  v-bind="$attrs.create" -->
+    </QDialog>
 </template>
 <style lang="scss">
 * {
@ -421,4 +439,9 @@ const rowClickFunction = computed(() => {
 .w-20 {
    width: 20%;
 }
+
+.cursor-text {
+    pointer-events: all;
+    cursor: text;
+}
 </style>
--- a/src/components/common/VnTableColumn.vue
+++ b/src/components/common/VnTableColumn.vue
@ -1,26 +1,29 @@
 <template>
    <VnComponent
-        v-if="column.before"
-        :prop="column.before"
+        v-if="col.before"
+        :prop="col.before"
        :components="components"
-        :value="row"
+        :value="value"
    />
+    {{ col?.component }}
    <VnComponent
-        v-if="column.component"
-        :prop="column"
+        v-if="col.component"
+        :prop="col"
        :components="components"
-        :value="row"
+        :value="value"
+        v-model="model"
    />
-    <span v-else>{{ dashIfEmpty(row[column.field]) }}</span>
+    <!--  ?? [defaultComponent]  -->
+    <span v-else>{{ dashIfEmpty(row[col.field]) }}</span>
    <VnComponent
-        v-if="column.after"
-        :prop="column.after"
+        v-if="col.after"
+        :prop="col.after"
        :components="components"
-        :value="row"
+        :value="value"
    />
 </template>
 <script setup>
-import { markRaw } from 'vue';
+import { markRaw, computed, defineModel } from 'vue';
 import { QIcon, QCheckbox } from 'quasar';
 import { dashIfEmpty } from 'src/filters';

@ -30,6 +33,23 @@ import VnInput from 'components/common/VnInput.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
 import VnComponent from 'components/common/VnComponent.vue';

+const model = defineModel();
+const $props = defineProps({
+    column: {
+        type: Object,
+        required: true,
+    },
+    row: {
+        type: Object,
+        required: true,
+    },
+    default: {
+        type: [Object, String],
+        required: false,
+        default: null,
+    },
+});
+
 const components = {
    input: markRaw(VnInput),
    number: markRaw(VnInput),
@ -39,14 +59,15 @@ const components = {
    icon: markRaw(QIcon),
 };

-defineProps({
-    column: {
-        type: Object,
-        required: true,
-    },
-    row: {
-        type: Object,
-        required: true,
-    },
+const value = computed(() =>
+    $props.column.format ? $props.column.format($props.row) : $props.row
+);
+
+const col = computed(() => {
+    const newColumn = { ...$props.column };
+    console.log('newColumn: ', newColumn);
+    console.log('newColumn.componen: ', newColumn.component);
+    if ($props.default && !newColumn.component) newColumn.component = $props.default;
+    return newColumn;
 });
 </script>
--- a/src/components/common/VnTableCreate.vue
+++ b/src/components/common/VnTableCreate.vue
@ -0,0 +1,34 @@
+<script setup>
+import FormModelPopup from 'components/FormModelPopup.vue';
+import VnTableColumn from 'components/common/VnTableColumn.vue';
+
+const $props = defineProps({
+    columns: {
+        type: Object,
+        required: true,
+    },
+    create: {
+        type: Object,
+        required: true,
+    },
+});
+</script>
+<template>
+    <FormModelPopup v-bind="{ ...$attrs, ...$props.create }">
+        <template #form-inputs="{ data }">
+            <VnTableColumn
+                v-for="column of $props.columns"
+                :key="column.field"
+                :column="{
+                    ...(column ?? column.create),
+                    ...{
+                        attrs: column,
+                    },
+                }"
+                :row="{}"
+                default="input"
+                v-model="data[column.field]"
+            />
+        </template>
+    </FormModelPopup>
+</template>
--- a/src/components/common/VnTableFilter.vue
+++ b/src/components/common/VnTableFilter.vue
@ -1,5 +1,4 @@
 <template>
-    {{ model }}
    <div
        v-if="showTitle && column"
        class="q-pt-sm q-px-sm ellipsis"
@ -16,7 +15,7 @@
            v-if="columnFilter?.component"
            :is="isBasicComponent?.component ?? columnFilter.component"
            v-model="model"
-            v-bind="{ ...columnFilter.attrs, ...isBasicComponent?.attrs }"
+            v-bind="{ ...isBasicComponent?.attrs, ...columnFilter.attrs }"
            v-on="isBasicComponent?.event ?? columnFilter.event"
            dense
        />
@ -57,10 +56,6 @@ const $props = defineProps({
        type: String,
        required: true,
    },
-    addModel: {
-        type: Object,
-        default: () => {},
-    },
 });
 const model = defineModel();
 const arrayData = useArrayData($props.dataKey);
--- a/src/components/ui/VnFilterPanel.vue
+++ b/src/components/ui/VnFilterPanel.vue
@ -8,7 +8,7 @@ import useRedirect from 'src/composables/useRedirect';
 import VnFilterPanelChip from 'components/ui/VnFilterPanelChip.vue';

 const { t } = useI18n();
-const params = defineModel('params');
+const params = defineModel();
 const props = defineProps({
    dataKey: {
        type: String,
@ -165,7 +165,7 @@ const customTags = computed(() =>

 async function remove(key) {
    userParams.value[key] = null;
-    delete params.value[key];
+    params.value[key] = undefined;
    console.log('key: ', key);
    console.log('params: ', params.value);
    await arrayData.applyFilter({ params: userParams.value });
--- a/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
+++ b/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
@ -292,6 +292,7 @@ const columns = computed(() => [
        label: t('customer.extendedList.tableVisibleColumns.name'),
        name: 'name',
        isTitle: true,
+        create: true,
    },
    {
        align: 'left',
@ -301,9 +302,25 @@ const columns = computed(() => [
    },
    {
        align: 'left',
-        field: 'salesPerson',
+        field: 'salesPersonFk',
        label: t('customer.extendedList.tableVisibleColumns.salesPersonFk'),
        name: 'salesPersonFk',
+        columnFilter: {
+            component: 'select',
+            attrs: {
+                url: 'Workers/activeWithInheritedRole',
+                fields: ['id', 'name'],
+                where: { role: 'salesPerson' },
+            },
+        },
+        create: {
+            component: 'select',
+            attrs: {
+                url: 'Workers/activeWithInheritedRole',
+                fields: ['id', 'name'],
+                where: { role: 'salesPerson' },
+            },
+        },
    },
    {
        align: 'left',
@ -379,7 +396,7 @@ const columns = computed(() => [
        field: 'created',
        label: t('customer.extendedList.tableVisibleColumns.created'),
        name: 'created',
-        format: (value) => toDate(value),
+        format: ({ created }) => toDate(created),
    },
    {
        align: 'left',
@ -541,11 +558,20 @@ const selectSalesPersonId = (id) => (selectedSalesPersonId.value = id);
    <VnTable
        data-key="CustomerExtendedList"
        url="Clients/extendedListFilter"
+        url-create="Clients/createWithUser"
+        :create="{
+            urlCreate: 'Clients/createWithUser',
+            title: 'Create client',
+            formInitialData: {
+                active: true,
+                isEqualizated: false,
+            },
+        }"
        order="id DESC"
        :columns="columns"
        default-mode="card"
-        auto-load
        redirect="customer"
+        auto-load
    >
        <!--
            default-mode="table"