wbuezas
/
salix-front-mindshore-fork2
forked from verdnatura/salix-front
0
0
Fork 0
Code Pull Requests Activity

feat: refs #6825 share filters, create popup

This commit is contained in:
Alex Moreno 2024-05-16 13:38:15 +02:00
parent 6f38aeba83
commit 598d116848
8 changed files with 160 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/common/VnComponent.vue
View File

@ -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,

2
src/components/common/VnSelect.vue
View File

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

63
src/components/common/VnTable.vue
View File

@ -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>

61
src/components/common/VnTableColumn.vue
View File

@ -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>

34
src/components/common/VnTableCreate.vue Normal file
View File

@ -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>

7
src/components/common/VnTableFilter.vue
View File

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

4
src/components/ui/VnFilterPanel.vue
View File

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

32
src/pages/Customer/ExtendedList/CustomerExtendedList.vue
View File

@ -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"