135 lines
3.1 KiB
Vue
135 lines
3.1 KiB
Vue
<script setup>
|
|
import { ref, computed } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
import CustomerDescriptorProxy from '../Card/CustomerDescriptorProxy.vue';
|
|
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
|
|
import CustomerNotificationsCampaignConsumption from './CustomerNotificationsCampaignConsumption.vue';
|
|
import VnTable from 'src/components/VnTable/VnTable.vue';
|
|
|
|
const { t } = useI18n();
|
|
const dataKey = 'CustomerNotifications';
|
|
const selected = ref([]);
|
|
const columns = computed(() => [
|
|
{
|
|
align: 'left',
|
|
label: t('Identifier'),
|
|
name: 'id',
|
|
columnClass: 'shrink',
|
|
},
|
|
{
|
|
align: 'left',
|
|
label: t('Social name'),
|
|
name: 'socialName',
|
|
columnFilter: {
|
|
component: 'select',
|
|
attrs: {
|
|
url: 'Clients',
|
|
fields: ['id', 'socialName'],
|
|
optionLabel: 'socialName',
|
|
},
|
|
},
|
|
columnClass: 'expand',
|
|
isTitle: true,
|
|
},
|
|
{
|
|
align: 'left',
|
|
label: t('City'),
|
|
name: 'city',
|
|
columnFilter: {
|
|
component: 'select',
|
|
attrs: {
|
|
url: 'Towns',
|
|
},
|
|
},
|
|
cardVisible: true,
|
|
},
|
|
{
|
|
align: 'left',
|
|
label: t('Phone'),
|
|
name: 'phone',
|
|
cardVisible: true,
|
|
},
|
|
{
|
|
align: 'left',
|
|
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',
|
|
name: 'departmentFk',
|
|
label: t('customer.summary.team'),
|
|
component: 'select',
|
|
attrs: {
|
|
url: 'Departments',
|
|
},
|
|
columnField: {
|
|
component: null,
|
|
},
|
|
format: (row, dashIfEmpty) => dashIfEmpty(row.departmentName),
|
|
},
|
|
]);
|
|
</script>
|
|
|
|
<template>
|
|
<VnSubToolbar class="justify-end">
|
|
<template #st-actions>
|
|
<CustomerNotificationsCampaignConsumption
|
|
:selected-rows="selected.length > 0"
|
|
:clients="selected"
|
|
:promise="refreshData"
|
|
/>
|
|
</template>
|
|
</VnSubToolbar>
|
|
<VnTable
|
|
:data-key="dataKey"
|
|
url="Clients/filter"
|
|
:table="{
|
|
'row-key': 'id',
|
|
selection: 'multiple',
|
|
}"
|
|
v-model:selected="selected"
|
|
:right-search="true"
|
|
:columns="columns"
|
|
:use-model="true"
|
|
auto-load
|
|
>
|
|
<template #column-id="{ row }">
|
|
<span class="link">
|
|
{{ row.id }}
|
|
<CustomerDescriptorProxy :id="row.id" />
|
|
</span>
|
|
</template>
|
|
</VnTable>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.col-content {
|
|
border-radius: 4px;
|
|
padding: 6px;
|
|
}
|
|
</style>
|
|
|
|
<i18n>
|
|
es:
|
|
Identifier: Identificador
|
|
Social name: Razón social
|
|
Phone: Teléfono
|
|
Postcode: Código postal
|
|
City: Población
|
|
Email: Email
|
|
Campaign consumption: Consumo campaña
|
|
</i18n>
|