+
+ dataKey="id" :filters="filters" filterDisplay="row" :loading="loading">
-
Filter Row
+Filters are displayed inline within a separate row.
- List of Customers
-
+
@@ -42,17 +43,17 @@
{{slotProps.data.country.name}}
-
-
+
- Representative
+ Agent
![]()
{{slotProps.data.representative.name}}
-
+
![]()
@@ -62,35 +63,26 @@
-
-
- Date
- {{slotProps.data.date}}
-
-
-
-
+
Status
{{slotProps.data.status}}
-
+
{{slotProps.option}}
-
+
- Activity
-
@@ -100,159 +92,12 @@
-
@@ -263,13 +108,20 @@ export default {
+
@@ -32,7 +33,7 @@
{{slotProps.data.name}}
-
-
-<DataTable :value="customers" :paginator="true" class="p-datatable-customers" :rows="10"
- dataKey="id" :filters="filters" :loading="loading">
- <template #header>
- <div class="table-header">
- List of Customers
- <span class="p-input-icon-left">
- <i class="pi pi-search" />
- <InputText v-model="filters['global']" placeholder="Global Search" />
- </span>
- </div>
- </template>
- <template #empty>
- No customers found.
- </template>
- <template #loading>
- Loading customers data. Please wait.
- </template>
- <Column field="name" header="Name">
- <template #body="slotProps">
- <span class="p-column-title">Name</span>
- {{slotProps.data.name}}
- </template>
- <template #filter>
- <InputText type="text" v-model="filters['name']" class="p-column-filter" placeholder="Search by name"/>
- </template>
- </Column>
- <Column header="Country" filterField="country.name" filterMatchMode="contains">
- <template #body="slotProps">
- <span class="p-column-title">Country</span>
- <img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" />
- <span class="image-text">{{slotProps.data.country.name}}</span>
- </template>
- <template #filter>
- <InputText type="text" v-model="filters['country.name']" class="p-column-filter" placeholder="Search by country"/>
- </template>
- </Column>
- <Column header="Representative" filterField="representative.name" filterMatchMode="in">
- <template #body="slotProps">
- <span class="p-column-title">Representative</span>
- <img :alt="slotProps.data.representative.name" :src="'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
- <span class="image-text">{{slotProps.data.representative.name}}</span>
- </template>
- <template #filter>
- <MultiSelect v-model="filters['representative.name']" :options="representatives" optionLabel="name" optionValue="name" placeholder="All" class="p-column-filter">
- <template #option="slotProps">
- <div class="p-multiselect-representative-option">
- <img :alt="slotProps.option.name" :src="'demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
- <span class="image-text">{{slotProps.option.name}}</span>
- </div>
- </template>
- </MultiSelect>
- </template>
- </Column>
- <Column field="date" header="Date" filterMatchMode="custom" :filterFunction="filterDate">
- <template #body="slotProps">
- <span class="p-column-title">Date</span>
- <span>{{slotProps.data.date}}</span>
- </template>
- <template #filter>
- <Calendar v-model="filters['date']" dateFormat="yy-mm-dd" class="p-column-filter" placeholder="Registration Date"/>
- </template>
- </Column>
- <Column field="status" header="Status" filterMatchMode="equals">
- <template #body="slotProps">
- <span class="p-column-title">Status</span>
- <span :class="'customer-badge status-' + slotProps.data.status">{{slotProps.data.status}}</span>
- </template>
- <template #filter>
- <Dropdown v-model="filters['status']" :options="statuses" placeholder="Select a Status" class="p-column-filter" :showClear="true">
- <template #option="slotProps">
- <span :class="'customer-badge status-' + slotProps.option">{{slotProps.option}}</span>
- </template>
- </Dropdown>
- </template>
- </Column>
- <Column field="activity" header="Activity" filterMatchMode="gte">
- <template #body="slotProps">
- <span class="p-column-title">Activity</span>
- <ProgressBar :value="slotProps.data.activity" :showValue="false" />
- </template>
- <template #filter>
- <InputText type="text" v-model="filters['activity']" class="p-column-filter" placeholder="Minimum"/>
- </template>
- </Column>
-</DataTable>
+
-import CustomerService from '../../service/CustomerService';
-
-export default {
- data() {
- return {
- customers: null,
- filters: {},
- loading: true,
- representatives: [
- {name: "Amy Elsner", image: 'amyelsner.png'},
- {name: "Anna Fali", image: 'annafali.png'},
- {name: "Asiya Javayant", image: 'asiyajavayant.png'},
- {name: "Bernardo Dominic", image: 'bernardodominic.png'},
- {name: "Elwin Sharvill", image: 'elwinsharvill.png'},
- {name: "Ioni Bowcher", image: 'ionibowcher.png'},
- {name: "Ivan Magalhaes",image: 'ivanmagalhaes.png'},
- {name: "Onyama Limba", image: 'onyamalimba.png'},
- {name: "Stephen Shaw", image: 'stephenshaw.png'},
- {name: "XuXue Feng", image: 'xuxuefeng.png'}
- ],
- statuses: [
- 'unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal'
- ]
- }
- },
- created() {
- this.customerService = new CustomerService();
- },
- mounted() {
- this.customerService.getCustomersLarge().then(data => this.customers = data);
- this.loading = false;
- },
- methods: {
- filterDate(value, filter) {
- if (filter === undefined || filter === null || (typeof filter === 'string' && filter.trim() === '')) {
- return true;
- }
-
- if (value === undefined || value === null) {
- return false;
- }
-
- return value === this.formatDate(filter);
- },
- formatDate(date) {
- let month = date.getMonth() + 1;
- let day = date.getDate();
-
- if (month < 10) {
- month = '0' + month;
- }
-
- if (day < 10) {
- day = '0' + day;
- }
-
- return date.getFullYear() + '-' + month + '-' + day;
- }
- }
-}