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

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

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

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

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

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

@ -11,12 +11,12 @@
<h3 class="first">Default</h3> <h3 class="first">Default</h3>
<DataView :value="cars" :layout="layout" paginatorPosition='both' :paginator="true" :rows="20" :sortOrder="sortOrder" :sortField="sortField"> <DataView :value="cars" :layout="layout" paginatorPosition='both' :paginator="true" :rows="20" :sortOrder="sortOrder" :sortField="sortField">
<template #header> <template #header>
<div class="p-grid"> <div class="p-grid p-nogutter">
<div class="p-col-6" style="text-align: left"> <div class="p-col-6" style="text-align: left">
<Dropdown v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By" @change="onSortChange($event)"/> <Dropdown v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By" @change="onSortChange($event)"/>
</div> </div>
<div class="p-col-6" style="text-align: right"> <div class="p-col-6" style="text-align: right">
<DataViewLayoutOptions :layout="layout" @change="changeMode"></DataViewLayoutOptions> <DataViewLayoutOptions v-model="layout" />
</div> </div>
</div> </div>
</template> </template>
@ -61,55 +61,52 @@
</template> </template>
<script> <script>
import CarService from '../../service/CarService'; import CarService from '../../service/CarService';
import DataViewDoc from './DataViewDoc'; import DataViewDoc from './DataViewDoc';
export default { export default {
data() { data() {
return { return {
cars: null, cars: null,
layout: 'list', layout: 'list',
sortKey: null, sortKey: null,
sortOrder: null, sortOrder: null,
sortField: null, sortField: null,
sortOptions: [ sortOptions: [
{label: 'Newest First', value: '!year'}, {label: 'Newest First', value: '!year'},
{label: 'Oldest First', value: 'year'}, {label: 'Oldest First', value: 'year'},
{label: 'Brand', value: 'brand'} {label: 'Brand', value: 'brand'}
] ]
} }
}, },
carService: null, carService: null,
created() { created() {
this.carService = new CarService(); this.carService = new CarService();
}, },
mounted() { mounted() {
this.carService.getCarsLarge().then(data => this.cars = data); this.carService.getCarsLarge().then(data => this.cars = data);
}, },
methods: { methods: {
changeMode(event) { onSortChange(event){
this.layout = event.value; const value = event.value.value;
}, const sortValue = event.value;
onSortChange(event){
const value = event.value.value;
const sortValue = event.value;
if (value.indexOf('!') === 0) { if (value.indexOf('!') === 0) {
this.sortOrder = -1; this.sortOrder = -1;
this.sortField = value.substring(1, value.length); this.sortField = value.substring(1, value.length);
this.sortKey = sortValue; this.sortKey = sortValue;
} }
else { else {
this.sortOrder = 1; this.sortOrder = 1;
this.sortField = value; this.sortField = value;
this.sortKey = sortValue; this.sortKey = sortValue;
} }
} }
}, },
components: { components: {
'DataViewDoc': DataViewDoc 'DataViewDoc': DataViewDoc
} }
} }
</script> </script>
<style lang="scss"> <style lang="scss">

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

@ -349,16 +349,16 @@ mounted() {
&lt;/div&gt; &lt;/div&gt;
&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;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;DataView :value="cars" :layout="layout" paginatorPosition='both' :paginator="true" :rows="20" :sortOrder="sortOrder" :sortField="sortField"&gt;
&lt;template #header&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;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;Dropdown v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By" @change="onSortChange($event)"/&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="p-col-6" style="text-align: right"&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;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
@ -368,13 +368,17 @@ mounted() {
&lt;div class="p-col-12 p-md-3"&gt; &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;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="p-col-12 p-md-8 car-data"&gt; &lt;div class="p-col-12 p-md-8 car-details"&gt;
&lt;div&gt;Vin: &lt;b&gt;{{slotProps.data.vin}}&lt;/b&gt;&lt;/div&gt; &lt;div class="p-grid"&gt;
&lt;div&gt;Year: &lt;b&gt;{{slotProps.data.year}}&lt;/b&gt;&lt;/div&gt; &lt;div class="p-col-12"&gt;Vin: &lt;b&gt;{{slotProps.data.vin}}&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"&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;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;Button icon="pi pi-search"&gt;&lt;/Button&gt;
&lt;/div&gt; &lt;/div&gt;
@ -399,51 +403,50 @@ mounted() {
</CodeHighlight> </CodeHighlight>
<CodeHighlight lang="javascript"> <CodeHighlight lang="javascript">
<script>
import CarService from '../../service/CarService'; import CarService from '../../service/CarService';
export default { export default {
data() { data() {
return { return {
cars: null, cars: null,
layout: 'list', layout: 'list',
sortKey: null, sortKey: null,
sortOrder: null, sortOrder: null,
sortField: null, sortField: null,
sortOptions: [ sortOptions: [
{label: 'Newest First', value: '!year'}, {label: 'Newest First', value: '!year'},
{label: 'Oldest First', value: 'year'}, {label: 'Oldest First', value: 'year'},
{label: 'Brand', value: 'brand'} {label: 'Brand', value: 'brand'}
] ]
} }
}, },
carService: null, carService: null,
created() { created() {
this.carService = new CarService(); this.carService = new CarService();
}, },
mounted() { mounted() {
this.carService.getCarsLarge().then(data => this.cars = data); this.carService.getCarsLarge().then(data => this.cars = data);
}, },
methods: { methods: {
changeMode(event) { onSortChange(event){
this.layout = event.value; const value = event.value.value;
}, const sortValue = event.value;
onSortChange(event){
const value = event.value.value;
const sortValue = event.value;
if (value.indexOf('!') === 0) { if (value.indexOf('!') === 0) {
this.sortOrder = -1; this.sortOrder = -1;
this.sortField = value.substring(1, value.length); this.sortField = value.substring(1, value.length);
this.sortKey = sortValue; this.sortKey = sortValue;
} }
else { else {
this.sortOrder = 1; this.sortOrder = 1;
this.sortField = value; this.sortField = value;
this.sortKey = sortValue; this.sortKey = sortValue;
} }
} }
} }
} }
</script>
</CodeHighlight> </CodeHighlight>
<CodeHighlight lang="css"> <CodeHighlight lang="css">

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

@ -77,9 +77,9 @@ import Paginator from 'primevue/paginator';
</CodeHighlight> </CodeHighlight>
<h3>Page Change Event</h3> <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> <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>
<CodeHighlight lang="javascript"> <CodeHighlight lang="javascript">
@ -161,7 +161,7 @@ onPage(event) {
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>page-change</td> <td>page</td>
<td>event.page: New page number <br/> <td>event.page: New page number <br/>
event.first: Index of first record <br/> event.first: Index of first record <br/>
event.rows: Number of rows to display in new page <br/> event.rows: Number of rows to display in new page <br/>