vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Refactored DataView

pull/12/head
cagataycivici 2019-05-24 12:06:23 +03:00
parent 6559b8b426
commit bd3bb4e35e
6 changed files with 167 additions and 171 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
src/components/dataview/DataView.vue
View File

@ -3,8 +3,8 @@
<div class="p-dataview-header" v-if="$scopedSlots.header">
<slot name="header"></slot>
</div>
<Paginator v-if="paginatorTop" :rows.sync="rows" :first.sync="firstRecord" :totalRecords="getTotalRecords" :pageLinkSize="pageLinkSize" :template="paginatorTemplate" :rowsPerPageOptions="rowsPerPageOptions"
:currentPageReportTemplate="currentPageReportTemplate" :class="{'p-paginator-top': paginatorTop}">
<Paginator v-if="paginatorTop" :rows="rows" :first="first" :totalRecords="getTotalRecords" :pageLinkSize="pageLinkSize" :template="paginatorTemplate" :rowsPerPageOptions="rowsPerPageOptions"
:currentPageReportTemplate="currentPageReportTemplate" :class="{'p-paginator-top': paginatorTop}" @page="onPage($event)">
<template #left v-if="$scopedSlots.paginatorLeft">
<slot name="paginatorLeft"></slot>
</template>
@ -14,15 +14,15 @@
</Paginator>
<div class="p-dataview-content">
<div class="p-grid">
<template v-for="(data,index) of (templateItems)">
<slot v-if="$scopedSlots.listItem && layout === 'list'" name="listItem" :data="data" :index="index"></slot>
<slot v-if="$scopedSlots.gridItem && layout === 'grid'" name="gridItem" :data="data" :index="index"></slot>
<template v-for="(item,index) of items">
<slot v-if="$scopedSlots.listItem && layout === 'list'" name="listItem" :data="item" :index="index"></slot>
<slot v-if="$scopedSlots.gridItem && layout === 'grid'" name="gridItem" :data="item" :index="index"></slot>
</template>
<div v-if="isEmpty" class="p-col-12">{{emptyMessage}}</div>
</div>
</div>
<Paginator v-if="paginatorBottom" :rows.sync="rows" :first.sync="firstRecord" :totalRecords="getTotalRecords" :pageLinkSize="pageLinkSize" :template="paginatorTemplate" :rowsPerPageOptions="rowsPerPageOptions"
:currentPageReportTemplate="currentPageReportTemplate" :class="{'p-paginator-bottom': paginatorBottom}">
<Paginator v-if="paginatorBottom" :rows="rows" :first="first" :totalRecords="getTotalRecords" :pageLinkSize="pageLinkSize" :template="paginatorTemplate" :rowsPerPageOptions="rowsPerPageOptions"
:currentPageReportTemplate="currentPageReportTemplate" :class="{'p-paginator-bottom': paginatorBottom}" @page="onPage($event)">
<template #left v-if="$scopedSlots.paginatorLeft">
<slot name="paginatorLeft"></slot>
</template>
@ -49,7 +49,7 @@
},
rows: {
type: Number,
default: null
default: 0
},
first: {
type: Number,
@ -57,7 +57,7 @@
},
totalRecords: {
type: Number,
default: null
default: 0
},
paginator: {
type: Boolean,
@ -73,7 +73,7 @@
},
paginatorTemplate: {
type: String,
default: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink'
default: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown'
},
pageLinkSize: {
type: Number,
@ -98,28 +98,30 @@
sortOrder: {
type: Number,
default: null
},
lazy: {
type: Boolean,
default: false
}
},
data() {
return {
firstRecord: this.first ? this.first : 0
d_first: this.first,
d_rows: this.rows
}
},
watch: {
first(newValue) {
this.d_first = newValue;
},
rows(newValue) {
this.d_rows = newValue;
}
},
methods: {
processData() {
let data = this.value;
onPage(event) {
this.d_first = event.first;
this.d_rows = event.rows;
if (data && data.length) {
if (this.sortField) {
data = this.sort();
}
}
return data;
this.$emit('update:first', this.d_first);
this.$emit('update:rows', this.d_rows);
this.$emit('page', event);
},
sort() {
if (this.value) {
@ -169,40 +171,36 @@
return (!this.value || this.value.length === 0);
},
paginatorTop() {
if(this.paginatorPosition && (this.paginatorPosition !== 'bottom' || this.paginatorPosition === 'both')) {
if (this.paginatorPosition && (this.paginatorPosition !== 'bottom' || this.paginatorPosition === 'both')) {
return true
}
else
return null;
},
paginatorBottom() {
if(this.paginatorPosition && (this.paginatorPosition !== 'top' || this.paginatorPosition === 'both')) {
if (this.paginatorPosition && (this.paginatorPosition !== 'top' || this.paginatorPosition === 'both')) {
return true
}
else
return null;
},
templateItems (){
let value = this.processData();
items() {
if (this.value && this.value.length) {
let data = this.value;
if (value && value.length) {
if (this.paginator) {
const rows = this.rows;
const first = this.lazy ? 0 : this.firstRecord;
const last = rows + first;
let items = [];
for (let i = first; i < last; i++) {
items.push(value[i]);
if (data && data.length && this.sortField) {
data = this.sort();
}
return items;
if (this.paginator)
return data.slice(this.d_first, this.d_first + this.d_rows);
else
return data;
}
else {
return value;
return null;
}
}
else return null;
}
}
}
</script>

20
src/components/dataview/DataViewLayoutOptions.vue
View File

@ -1,40 +1,38 @@
<template>
<div class="p-dataview-layout-options p-selectbutton p-buttonset">
<button :class="buttonListClass" @click="changeLayout($event,'list')">
<button :class="buttonListClass" @click="changeLayout('list')">
<i class="pi pi-bars p-button-icon-left"></i>
<span class="p-button-text p-clickable">p-btn</span>
</button>
<button :class="buttonGridClass" @click="changeLayout($event,'grid')">
<button :class="buttonGridClass" @click="changeLayout('grid')">
<i class="pi pi-th-large p-button-icon-left"></i>
<span class="p-button-text p-clickable">p-btn</span>
</button>
</div>
</template>
<script>
export default {
props: {
layout: {
type: String,
default: null
}
value: String
},
computed: {
buttonListClass(){
return [
'p-button p-button-icon-only',
{'p-highlight': this.layout === 'list'}
{'p-highlight': this.value === 'list'}
]
},
buttonGridClass(){
buttonGridClass() {
return [
'p-button p-button-icon-only',
{'p-highlight': this.layout === 'grid'}
{'p-highlight': this.value === 'grid'}
]
}
},
methods: {
changeLayout(event, layoutMode){
this.$emit('change', {originalEvent: event, value: layoutMode});
changeLayout(layout){
this.$emit('input', layout);
}
}
}

2
src/components/paginator/Paginator.vue
View File

@ -87,7 +87,7 @@ export default {
this.$emit('update:first', this.d_first);
this.$emit('update:rows', this.d_rows);
this.$emit('page-change', state);
this.$emit('page', state);
}
},
changePageToFirst(event) {

15
src/views/dataview/DataViewDemo.vue
View File

@ -11,12 +11,12 @@
<h3 class="first">Default</h3>
<DataView :value="cars" :layout="layout" paginatorPosition='both' :paginator="true" :rows="20" :sortOrder="sortOrder" :sortField="sortField">
<template #header>
<div class="p-grid">
<div class="p-grid p-nogutter">
<div class="p-col-6" style="text-align: left">
<Dropdown v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By" @change="onSortChange($event)"/>
</div>
<div class="p-col-6" style="text-align: right">
<DataViewLayoutOptions :layout="layout" @change="changeMode"></DataViewLayoutOptions>
<DataViewLayoutOptions v-model="layout" />
</div>
</div>
</template>
@ -61,10 +61,10 @@
</template>
<script>
import CarService from '../../service/CarService';
import DataViewDoc from './DataViewDoc';
import CarService from '../../service/CarService';
import DataViewDoc from './DataViewDoc';
export default {
export default {
data() {
return {
cars: null,
@ -87,9 +87,6 @@
this.carService.getCarsLarge().then(data => this.cars = data);
},
methods: {
changeMode(event) {
this.layout = event.value;
},
onSortChange(event){
const value = event.value.value;
const sortValue = event.value;
@ -109,7 +106,7 @@
components: {
'DataViewDoc': DataViewDoc
}
}
}
</script>
<style lang="scss">

27
src/views/dataview/DataViewDoc.vue
View File

@ -349,16 +349,16 @@ mounted() {
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="content-section implementation"&gt;
&lt;div class="content-section implementation dataview-demo"&gt;
&lt;h3 class="first"&gt;Default&lt;/h3&gt;
&lt;DataView :value="cars" :layout="layout" paginatorPosition='both' :paginator="true" :rows="20" :sortOrder="sortOrder" :sortField="sortField"&gt;
&lt;template #header&gt;
&lt;div class="p-grid"&gt;
&lt;div class="p-grid p-nogutter"&gt;
&lt;div class="p-col-6" style="text-align: left"&gt;
&lt;Dropdown v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By" @change="onSortChange($event)"/&gt;
&lt;/div&gt;
&lt;div class="p-col-6" style="text-align: right"&gt;
&lt;DataViewLayoutOptions :layout="layout" @change="changeMode"&gt;&lt;/DataViewLayoutOptions&gt;
&lt;DataViewLayoutOptions v-model="layout" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
@ -368,13 +368,17 @@ mounted() {
&lt;div class="p-col-12 p-md-3"&gt;
&lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-8 car-data"&gt;
&lt;div&gt;Vin: &lt;b&gt;{{slotProps.data.vin}}&lt;/b&gt;&lt;/div&gt;
&lt;div&gt;Year: &lt;b&gt;{{slotProps.data.year}}&lt;/b&gt;&lt;/div&gt;
&lt;div&gt;Brand: &lt;b&gt;{{slotProps.data.brand}}&lt;/b&gt;&lt;/div&gt;
&lt;div&gt;Color: &lt;b&gt;{{slotProps.data.color}}&lt;/b&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-8 car-details"&gt;
&lt;div class="p-grid"&gt;
&lt;div class="p-col-12"&gt;Vin: &lt;b&gt;{{slotProps.data.vin}}&lt;/b&gt;&lt;/div&gt;
&lt;div class="p-col-12"&gt;Year: &lt;b&gt;{{slotProps.data.year}}&lt;/b&gt;&lt;/div&gt;
&lt;div class="p-col-12"&gt;Brand: &lt;b&gt;{{slotProps.data.brand}}&lt;/b&gt;&lt;/div&gt;
&lt;div class="p-col-12"&gt;Color: &lt;b&gt;{{slotProps.data.color}}&lt;/b&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-1 search-icon" style="margin-top: 40px"&gt;
&lt;Button icon="pi pi-search"&gt;&lt;/Button&gt;
&lt;/div&gt;
@ -399,6 +403,7 @@ mounted() {
</CodeHighlight>
<CodeHighlight lang="javascript">
<script>
import CarService from '../../service/CarService';
export default {
@ -424,9 +429,6 @@ export default {
this.carService.getCarsLarge().then(data => this.cars = data);
},
methods: {
changeMode(event) {
this.layout = event.value;
},
onSortChange(event){
const value = event.value.value;
const sortValue = event.value;
@ -444,6 +446,7 @@ export default {
}
}
}
</script>
</CodeHighlight>
<CodeHighlight lang="css">

6
src/views/paginator/PaginatorDoc.vue
View File

@ -77,9 +77,9 @@ import Paginator from 'primevue/paginator';
</CodeHighlight>
<h3>Page Change Event</h3>
<p>Paginator provides only one event called <i>page-change</i> that passes all the information about the change event.</p>
<p>Paginator provides only one event called <i>page</i> that passes all the information about the change event.</p>
<CodeHighlight>
&lt;Paginator :rows="10" :totalRecords="totalItemsCount" @page-change="onPage($event)"&gt;&lt;/Paginator&gt;
&lt;Paginator :rows="10" :totalRecords="totalItemsCount" @page="onPage($event)"&gt;&lt;/Paginator&gt;
</CodeHighlight>
<CodeHighlight lang="javascript">
@ -161,7 +161,7 @@ onPage(event) {
</thead>
<tbody>
<tr>
<td>page-change</td>
<td>page</td>
<td>event.page: New page number <br/>
event.first: Index of first record <br/>
event.rows: Number of rows to display in new page <br/>