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

fix: customerNotifications filter

This commit is contained in:
Alex Moreno 2024-07-19 07:58:34 +02:00
parent 3fe566796b
commit 9b1636355d
4 changed files with 39 additions and 164 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/VnTable/VnTable.vue
View File

@ -355,7 +355,7 @@ defineExpose({
/>
</template>
<template #header-cell="{ col }">
<QTh v-if="col.visible ?? true" :class="[col.columnClass]">
<QTh v-if="col.visible ?? true">
<div
class="column self-start q-ml-xs ellipsis"
:class="`text-${col?.align ?? 'left'}`"

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

@ -27,7 +27,7 @@ const $props = defineProps({
},
url: {
type: String,
default: '',
default: null,
},
filterOptions: {
type: [Array],
@ -113,7 +113,7 @@ function setOptions(data) {
}
function filter(val, options) {
const search = val.toString().toLowerCase();
const search = val?.toString()?.toLowerCase();
if (!search) return options;

52
src/pages/Customer/Notifications/CustomerNotifications.vue
View File

@ -1,27 +1,23 @@
<script setup>
import { ref, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { QBtn } from 'quasar';
import CustomerNotificationsFilter from './CustomerNotificationsFilter.vue';
import CustomerDescriptorProxy from '../Card/CustomerDescriptorProxy.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import CustomerNotificationsCampaignConsumption from './CustomerNotificationsCampaignConsumption.vue';
import RightMenu from 'src/components/common/RightMenu.vue';
import VnTable from 'src/components/VnTable/VnTable.vue';
const { t } = useI18n();
const dataKey = 'CustomerNotifications';
const selected = ref([]);
const columns = computed(() => [
{
align: 'left',
field: 'id',
label: t('Identifier'),
name: 'id',
columnClass: 'shrink',
},
{
align: 'left',
field: 'socialName',
label: t('Social name'),
name: 'socialName',
columnFilter: {
@ -37,34 +33,58 @@ const columns = computed(() => [
},
{
align: 'left',
field: 'city',
label: t('City'),
name: 'city',
columnFilter: {
component: 'select',
attrs: {
url: 'Towns',
},
},
cardVisible: true,
},
{
align: 'left',
field: 'phone',
label: t('Phone'),
name: 'phone',
cardVisible: true,
},
{
align: 'left',
field: 'email',
label: t('Email'),
name: 'email',
cardVisible: true,
},
{
align: 'left',
name: 'fi',
label: t('Fi'),
visible: false,
},
{
align: 'left',
name: 'postcode',
label: t('Postcode'),
visible: false,
},
{
align: 'left',
label: t('customer.extendedList.tableVisibleColumns.salesPersonFk'),
name: 'salesPersonFk',
component: 'select',
attrs: {
url: 'Workers/activeWithInheritedRole',
fields: ['id', 'name'],
where: { role: 'salesPerson' },
optionFilter: 'firstName',
useLike: false,
},
visible: false,
},
]);
</script>
<template>
<RightMenu>
<template #right-panel>
<CustomerNotificationsFilter data-key="CustomerNotifications" />
</template>
</RightMenu>
<VnSubToolbar class="justify-end">
<template #st-actions>
<CustomerNotificationsCampaignConsumption
@ -75,14 +95,14 @@ const columns = computed(() => [
</template>
</VnSubToolbar>
<VnTable
data-key="CustomerNotifications"
:data-key="dataKey"
url="Clients"
:table="{
'row-key': 'id',
selection: 'multiple',
}"
v-model:selected="selected"
:right-search="false"
:right-search="true"
:columns="columns"
:use-model="true"
auto-load

145
src/pages/Customer/Notifications/CustomerNotificationsFilter.vue
View File

@ -1,145 +0,0 @@
<script setup>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import FetchData from 'components/FetchData.vue';
import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnSelect from 'components/common/VnSelect.vue';
const { t } = useI18n();
const props = defineProps({
dataKey: {
type: String,
required: true,
},
});
const cities = ref();
const clients = ref();
</script>
<template>
<FetchData
:filter="{ where: { role: 'socialName' } }"
@on-fetch="(data) => (clients = data)"
auto-load
url="Clients"
/>
<FetchData @on-fetch="(data) => (cities = data)" auto-load url="Towns" />
<VnFilterPanel :data-key="props.dataKey" :search-button="true">
<template #tags="{ tag, formatFn }">
<div class="q-gutter-x-xs">
<strong>{{ t(`params.${tag.label}`) }}: </strong>
<span>{{ formatFn(tag.value) }}</span>
</div>
</template>
<template #body="{ params, searchFn }">
<QItem class="q-mb-sm q-mt-sm">
<QItemSection>
<VnInput
:label="t('Identifier')"
clearable
is-outlined
v-model="params.identifier"
/>
</QItemSection>
</QItem>
<QItem class="q-mb-sm">
<QItemSection v-if="!clients">
<QSkeleton type="QInput" class="full-width" />
</QItemSection>
<QItemSection v-if="clients">
<VnSelect
:input-debounce="0"
:label="t('Social name')"
:options="clients"
@update:model-value="searchFn()"
dense
emit-value
hide-selected
map-options
option-label="socialName"
option-value="socialName"
outlined
rounded
use-input
v-model="params.socialName"
/>
</QItemSection>
</QItem>
<QItem class="q-mb-sm">
<QItemSection v-if="!cities">
<QSkeleton type="QInput" class="full-width" />
</QItemSection>
<QItemSection v-if="cities">
<VnSelect
:input-debounce="0"
:label="t('City')"
:options="cities"
@update:model-value="searchFn()"
dense
emit-value
hide-selected
map-options
option-label="name"
option-value="name"
outlined
rounded
use-input
v-model="params.city"
/>
</QItemSection>
</QItem>
<QItem class="q-mb-sm">
<QItemSection>
<VnInput
:label="t('Phone')"
clearable
is-outlined
v-model="params.phone"
/>
</QItemSection>
</QItem>
<QItem class="q-mb-sm">
<QItemSection>
<VnInput
:label="t('Email')"
clearable
is-outlined
type="email"
v-model="params.email"
/>
</QItemSection>
</QItem>
<QSeparator />
</template>
</VnFilterPanel>
</template>
<i18n>
en:
params:
identifier: Identifier
socialName: Social name
city: City
phone: Phone
email: Email
es:
params:
identifier: Identificador
socialName: Razón social
city: Población
phone: Teléfono
email: Email
Identifier: Identificador
Social name: Razón social
City: Población
Phone: Teléfono
Email: Email
</i18n>