feat: refs #6825 share filters, create popup

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,

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);

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 = [];
+    const chips = [];
-    let visible = [];
+    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"
+                v-model="params"
-                @remove="(key) => console.log('HA LELGADO', key)"
             >
                 <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
+                                        <VnLv :label="`${col.label}:`">
-                                            v-if="
-                                                col.cardVisible &&
-                                                !col.isChip &&
-                                                col.field != 'tableActions'
-                                            "
-                                            :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>

src/components/common/VnTableColumn.vue

@@ -1,26 +1,29 @@
 <template>
     <VnComponent
-        v-if="column.before"
+        v-if="col.before"
-        :prop="column.before"
+        :prop="col.before"
         :components="components"
-        :value="row"
+        :value="value"
     />
+    {{ col?.component }}
     <VnComponent
-        v-if="column.component"
+        v-if="col.component"
-        :prop="column"
+        :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"
+        v-if="col.after"
-        :prop="column.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({
+const value = computed(() =>
-    column: {
+    $props.column.format ? $props.column.format($props.row) : $props.row
-        type: Object,
+);
-        required: true,
+
-    },
+const col = computed(() => {
-    row: {
+    const newColumn = { ...$props.column };
-        type: Object,
+    console.log('newColumn: ', newColumn);
-        required: true,
+    console.log('newColumn.componen: ', newColumn.component);
-    },
+    if ($props.default && !newColumn.component) newColumn.component = $props.default;
+    return newColumn;
 });
 </script>

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>

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);

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 });

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"