Skip to content

Commit

Permalink
Merge branch 'prod'
Browse files Browse the repository at this point in the history
  • Loading branch information
@tugcekucukoglu
tugcekucukoglu committed Nov 6, 2023
2 parents 35834ec + fd8edc9 commit 2b268f9
Showing 1 changed file with 63 additions and 21 deletions.
84 changes: 63 additions & 21 deletions doc/datatable/LazyLoadDoc.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
:value="customers"
lazy
paginator
:first="0"
:first="first"
:rows="10"
dataKey="id"
:totalRecords="totalRecords"
Expand Down Expand Up @@ -83,6 +83,7 @@ export default {
customers: null,
selectedCustomers: null,
selectAll: false,
first: 0,
filters: {
name: { value: '', matchMode: 'contains' },
'country.name': { value: '', matchMode: 'contains' },
Expand All @@ -98,7 +99,7 @@ export default {
],
code: {
basic: `
<DataTable :value="customers" lazy paginator :first="0" :rows="10" v-model:filters="filters" ref="dt" dataKey="id"
<DataTable :value="customers" lazy paginator :first="first" :rows="10" v-model:filters="filters" ref="dt" dataKey="id"
:totalRecords="totalRecords" :loading="loading" @page="onPage($event)" @sort="onSort($event)" @filter="onFilter($event)" filterDisplay="row"
:globalFilterFields="['name','country.name', 'company', 'representative.name']"
v-model:selection="selectedCustomers" :selectAll="selectAll" @select-all-change="onSelectAllChange" @row-select="onRowSelect" @row-unselect="onRowUnselect" tableStyle="min-width: 75rem">
Expand All @@ -109,6 +110,12 @@ export default {
</template>
</Column>
<Column field="country.name" header="Country" filterField="country.name" filterMatchMode="contains" sortable>
<template #body="{ data }">
<div class="flex align-items-center gap-2">
<img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${data.country.code}\`" style="width: 24px" />
<span>{{ data.country.name }}</span>
</div>
</template>
<template #filter="{filterModel,filterCallback}">
<InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search"/>
</template>
Expand All @@ -119,6 +126,12 @@ export default {
</template>
</Column>
<Column field="representative.name" header="Representative" filterField="representative.name" sortable>
<template #body="{ data }">
<div class="flex align-items-center gap-2">
<img :alt="data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${data.representative.image}\`" style="width: 32px" />
<span>{{ data.representative.name }}</span>
</div>
</template>
<template #filter="{filterModel,filterCallback}">
<InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search"/>
</template>
Expand All @@ -128,17 +141,23 @@ export default {
options: `
<template>
<div class="card p-fluid">
<DataTable :value="customers" lazy paginator :first="0" :rows="10" v-model:filters="filters" ref="dt" dataKey="id"
:totalRecords="totalRecords" :loading="loading" @page="onPage($event)" @sort="onSort($event)" @filter="onFilter($event)" filterDisplay="row"
:globalFilterFields="['name','country.name', 'company', 'representative.name']"
v-model:selection="selectedCustomers" :selectAll="selectAll" @select-all-change="onSelectAllChange" @row-select="onRowSelect" @row-unselect="onRowUnselect" tableStyle="min-width: 75rem">
<DataTable :value="customers" lazy paginator :first="first" :rows="10" v-model:filters="filters" ref="dt" dataKey="id"
:totalRecords="totalRecords" :loading="loading" @page="onPage($event)" @sort="onSort($event)" @filter="onFilter($event)" filterDisplay="row"
:globalFilterFields="['name','country.name', 'company', 'representative.name']"
v-model:selection="selectedCustomers" :selectAll="selectAll" @select-all-change="onSelectAllChange" @row-select="onRowSelect" @row-unselect="onRowUnselect" tableStyle="min-width: 75rem">
<Column selectionMode="multiple" headerStyle="width: 3rem"></Column>
<Column field="name" header="Name" filterMatchMode="startsWith" sortable>
<template #filter="{filterModel,filterCallback}">
<InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search"/>
</template>
</Column>
<Column field="country.name" header="Country" filterField="country.name" filterMatchMode="contains" sortable>
<template #body="{ data }">
<div class="flex align-items-center gap-2">
<img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${data.country.code}\`" style="width: 24px" />
<span>{{ data.country.name }}</span>
</div>
</template>
<template #filter="{filterModel,filterCallback}">
<InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search"/>
</template>
Expand All @@ -149,6 +168,12 @@ export default {
</template>
</Column>
<Column field="representative.name" header="Representative" filterField="representative.name" sortable>
<template #body="{ data }">
<div class="flex align-items-center gap-2">
<img :alt="data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${data.representative.image}\`" style="width: 32px" />
<span>{{ data.representative.name }}</span>
</div>
</template>
<template #filter="{filterModel,filterCallback}">
<InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search"/>
</template>
Expand All @@ -168,6 +193,7 @@ export default {
customers: null,
selectedCustomers: null,
selectAll: false,
first: 0,
filters: {
'name': {value: '', matchMode: 'contains'},
'country.name': {value: '', matchMode: 'contains'},
Expand Down Expand Up @@ -199,6 +225,7 @@ export default {
methods: {
loadLazyData() {
this.loading = true;
this.lazyParams = { ...this.lazyParams, first: event?.first || this.first };
setTimeout(() => {
CustomerService.getCustomers({ lazyEvent: JSON.stringify(this.lazyParams) }).then((data) => {
Expand All @@ -210,15 +237,15 @@ export default {
},
onPage(event) {
this.lazyParams = event;
this.loadLazyData();
this.loadLazyData(event);
},
onSort(event) {
this.lazyParams = event;
this.loadLazyData();
this.loadLazyData(event);
},
onFilter() {
onFilter(event) {
this.lazyParams.filters = this.filters;
this.loadLazyData();
this.loadLazyData(event);
},
onSelectAllChange(event) {
const selectAll = event.checked;
Expand Down Expand Up @@ -248,7 +275,7 @@ export default {
composition: `
<template>
<div class="card p-fluid">
<DataTable :value="customers" lazy paginator :first="0" :rows="10" v-model:filters="filters" ref="dt" dataKey="id"
<DataTable :value="customers" lazy paginator :first="first" :rows="10" v-model:filters="filters" ref="dt" dataKey="id"
:totalRecords="totalRecords" :loading="loading" @page="onPage($event)" @sort="onSort($event)" @filter="onFilter($event)" filterDisplay="row"
:globalFilterFields="['name','country.name', 'company', 'representative.name']"
v-model:selection="selectedCustomers" :selectAll="selectAll" @select-all-change="onSelectAllChange" @row-select="onRowSelect" @row-unselect="onRowUnselect" tableStyle="min-width: 75rem">
Expand All @@ -259,6 +286,12 @@ export default {
</template>
</Column>
<Column field="country.name" header="Country" filterField="country.name" filterMatchMode="contains" sortable>
<template #body="{ data }">
<div class="flex align-items-center gap-2">
<img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${data.country.code}\`" style="width: 24px" />
<span>{{ data.country.name }}</span>
</div>
</template>
<template #filter="{filterModel,filterCallback}">
<InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search"/>
</template>
Expand All @@ -269,6 +302,12 @@ export default {
</template>
</Column>
<Column field="representative.name" header="Representative" filterField="representative.name" sortable>
<template #body="{ data }">
<div class="flex align-items-center gap-2">
<img :alt="data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${data.representative.image}\`" style="width: 32px" />
<span>{{ data.representative.name }}</span>
</div>
</template>
<template #filter="{filterModel,filterCallback}">
<InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search"/>
</template>
Expand Down Expand Up @@ -301,6 +340,7 @@ const totalRecords = ref(0);
const customers = ref();
const selectedCustomers = ref();
const selectAll = ref(false);
const first = ref(0);
const filters = ref({
'name': {value: '', matchMode: 'contains'},
'country.name': {value: '', matchMode: 'contains'},
Expand All @@ -315,8 +355,9 @@ const columns = ref([
{field: 'representative.name', header: 'Representative'}
]);
const loadLazyData = () => {
const loadLazyData = (event) => {
loading.value = true;
lazyParams.value = { ...lazyParams.value, first: event?.first || first.value };
setTimeout(() => {
CustomerService.getCustomers({ lazyEvent: JSON.stringify(lazyParams.value) }).then((data) => {
Expand All @@ -328,15 +369,15 @@ const loadLazyData = () => {
};
const onPage = (event) => {
lazyParams.value = event;
loadLazyData();
loadLazyData(event);
};
const onSort = (event) => {
lazyParams.value = event;
loadLazyData();
loadLazyData(event);
};
const onFilter = () => {
const onFilter = (event) => {
lazyParams.value.filters = filters.value ;
loadLazyData();
loadLazyData(event);
};
const onSelectAllChange = (event) => {
selectAll.value = event.checked;
Expand Down Expand Up @@ -398,8 +439,9 @@ const onRowUnselect = () => {
this.loadLazyData();
},
methods: {
loadLazyData() {
loadLazyData(event) {
this.loading = true;
this.lazyParams = { ...this.lazyParams, first: event?.first || this.first };
setTimeout(() => {
CustomerService.getCustomers({ lazyEvent: JSON.stringify(this.lazyParams) }).then((data) => {
Expand All @@ -411,15 +453,15 @@ const onRowUnselect = () => {
},
onPage(event) {
this.lazyParams = event;
this.loadLazyData();
this.loadLazyData(event);
},
onSort(event) {
this.lazyParams = event;
this.loadLazyData();
this.loadLazyData(event);
},
onFilter() {
onFilter(event) {
this.lazyParams.filters = this.filters;
this.loadLazyData();
this.loadLazyData(event);
},
onSelectAllChange(event) {
const selectAll = event.checked;
Expand Down

0 comments on commit 2b268f9

Please sign in to comment.