P
CUI v1.20.1177
Documentation and examples in using Overlay Template Search with PCUI
<pcui_search_overlay_template ref="overlayDemo"
complex-table-ref="tableSample"
overlay-attribute="overlaySample"
overlay-class-width="width-right-40"
v-bind:headers="tableHeaders"
v-bind:filterbuttons="filterbuttons"
v-bind:search-button-callback="templateSearch"
v-bind:error-view-button-callback="templateError"
v-bind:clear-search-button-callback="clearSearch"
v-bind:filter-button-callback="openFilter"
search-placeholder="Search"
error-view-ref="loadingError"
error-view-headline-text="Something went wrong - sorry about that."
error-view-supporting-text="Try checking your internet connection, or reloading this page."
error-view-button-text="Reload"
no-data-ref="noData"
no-data-label="To get started, search by company name, station name, or station code."
loading-spinner-ref="loadingSpinner"
filter="true"
simple-table="false">
</pcui_search_overlay_template>
<button class="ui button button-default toggle-overlay" overlay="overlaySample">
Open Search Overlay
</button>
var overlaySearchTemplateDemoDOM = new Vue({
el: '#overlay-search-template-demo',
name: 'Overlay Search Template Demo',
data: function () {
return {
tableHeaders: [
{
text: 'Job',
value: 'job',
width: '100px'
},
{
text: 'Status',
value: 'status'
},
{
text: 'Job location',
value: 'jobLocation'
},
{
text: 'Job start',
value: 'jobStart'
},
{
text: 'Action',
value: 'action',
width: '120px'
}
],
demoRows: [
{
job: {
type: 'text',
text: 'Job One'
},
action: {
type: 'text',
text: 'Default'
},
status: {
type: 'text',
text: '30 / 100 complete'
},
jobStart: {
type: 'date',
text: '2019-12-12 18:09:00',
callback: ''
},
jobLocation: {
type: 'text',
text: 'Locked'
},
identifier: '1'
}
],
emptyDemoRows: [],
filterbuttons: [
{
classes: 'fas fa-cloud-download-alt',
id: 'sample2',
method: this.customFilterIconTrigger2,
disabledWhileLoading: true
}
],
};
},
components: {
pcui_search_overlay_template: PCUIOverlaySearchComponent
},
methods: {
customFilterIconTrigger: function () {
console.log('Custom filter icon trigger');
},
customFilterIconTrigger2: function () {
console.log('Custom filter icon trigger');
},
templateSearch: function () {
var self = this;
self.$refs['overlayDemo'].hideNodataView();
setTimeout(function () {
self.$refs['overlayDemo'].hideLoadingSpinner();
}, 2000);
self.$refs['overlayDemo'].showLoadingSpinner();
self.$refs['overlayDemo'].handleSearch(self.demoRows);
console.log('Template search trigger');
},
templateError: function () {
console.log('Error view reload button trigger');
},
clearSearch: function () {
this.$refs['overlayDemo'].handleSearch(this.emptyDemoRows);
this.$refs['overlayDemo'].showNodataView();
this.$refs['overlayDemo'].hideLoadingSpinner();
console.log('Clear search trigger');
},
openFilter: function () {
console.log('Open filter overlay trigger');
}
}
});
<pcui_search_overlay_template ref="overlayDemo2"
simple-table-ref="tableSample2"
overlay-attribute="overlaySample2"
overlay-class-width="width-right-40"
v-bind:headers="tableHeaders"
v-bind:filterbuttons="filterbuttons"
v-bind:search-button-callback="templateSearch2"
v-bind:error-view-button-callback="templateError"
v-bind:clear-search-button-callback="clearSearch2"
v-bind:filter-button-callback="openFilter"
search-placeholder="Search"
error-view-ref="loadingError"
error-view-headline-text="Something went wrong - sorry about that."
error-view-supporting-text="Try checking your internet connection, or reloading this page."
error-view-button-text="Reload"
no-data-ref="noData"
no-data-label="To get started, search by company name, station name, or station code."
loading-spinner-ref="loadingSpinner"
filter="true"
simple-table="true">
</pcui_search_overlay_template>
<button class="ui button button-default toggle-overlay" overlay="overlaySample2">
Open Search Overlay
</button>
var overlaySearchTemplateDemoDOM = new Vue({
el: '#overlay-search-template-demo',
name: 'Overlay Search Template Demo',
data: function () {
return {
emptyDemoRows: [],
filterbuttons: [
{
classes: 'fas fa-cloud-download-alt',
id: 'sample2',
method: this.customFilterIconTrigger2,
disabledWhileLoading: true
}
],
demoRows2: [
{
identifier: '10',
mainColumn: {
mainText: '302891',
additionalText: '3/28 High Street, Glenholme, Rotorua 3010',
subItems: [
{
type: 'progress',
theme: 'success',
text: '6/9 Ready for work',
value: '50'
},
{
type: 'text',
text: '06 Reference text goes here',
formatting: 'italic'
}
]
},
subColumns: [
{
type: 'text',
name: 'Created by',
text:
'Jacinta 10 BurnsdottirDieWalkurie-oftheSuperLongAndTruncatingStringwithEllipsesAppe'
},
{
type: 'text',
name: 'Created on',
text: '24 Oct 2017, 03:26pm'
},
{
type: 'text',
name: 'Job Start',
text: '16 Nov 2017'
},
{
type: 'button',
text: 'View'
}
]
}
]
};
},
components: {
pcui_search_overlay_template: PCUIOverlaySearchComponent
},
methods: {
customFilterIconTrigger: function () {
console.log('Custom filter icon trigger');
},
customFilterIconTrigger2: function () {
console.log('Custom filter icon trigger');
},
templateSearch2: function () {
var self = this;
self.$refs['overlayDemo2'].hideNodataView();
setTimeout(function () {
self.$refs['overlayDemo2'].hideLoadingSpinner();
}, 2000);
self.$refs['overlayDemo2'].showLoadingSpinner();
self.$refs['overlayDemo2'].handleSearch(self.demoRows2);
console.log('Template search trigger');
},
templateError: function () {
console.log('Error view reload button trigger');
},
clearSearch2: function () {
this.$refs['overlayDemo2'].handleSearch(this.emptyDemoRows);
this.$refs['overlayDemo2'].showNodataView();
this.$refs['overlayDemo2'].hideLoadingSpinner();
console.log('Clear search trigger');
},
openFilter: function () {
console.log('Open filter overlay trigger');
}
}
});