P
CUI v1.20.1177
Documentation and examples in using Search User template with PCUI
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons" rel="stylesheet" />
<link href="~/PCUIAssets/Bundles/css/TextFields.min.css" rel="stylesheet" />
<link href="~/PCUIAssets/PCUI/Elements/OverlayContainerSliding/css/OverlayContainerSliding.min.css" rel="stylesheet" />
<link href="~/PCUIAssets/PCUI/Components/HeaderSection/css/HeaderSection.min.css" rel="stylesheet" />
<link href="~/PCUIAssets/PCUI/Components/StandardView/css/StandardView.min.css" rel="stylesheet" />
<link href="~/PCUIAssets/PCUI/Components/Tables/css/Tables.min.css" rel="stylesheet" />
<link href="~/PCUIAssets/PCUI/Templates/SearchUser/css/SearchUser.min.css" rel="stylesheet" />
<script src="~/PCUIAssets/Bundles/js/TextFields.min.js"></script>
<script src="~/PCUIAssets/PCUI/Elements/ChangeTracker/js/ChangeTracker.js"></script>
<script src="~/PCUIAssets/PCUI/Elements/OverlayContainerSliding/js/OverlayContainerSliding.js"></script>
<script src="~/PCUIAssets/PCUI/Components/StandardView/js/StandardView.js"></script>
<script src="~/PCUIAssets/PCUI/Components/Tables/js/ComplexTable.js"></script>
<script src="~/PCUIAssets/PCUI/Templates/SearchUser/js/SearchUser.js"></script>
<div id="search-user" class="pcui">
<search_user_template ref="search-user"
v-bind="searchUserTemplateProps">
</search_user_template>
</div>
var searchUserDOM = new Vue({
el: '#search-user',
name: 'Search User',
data: {
searchUserTemplateData: {
table: {
ajaxRequest: null,
rows: [
{
id: {
type: 'text',
text: '304041'
},
name: {
type: 'text',
text: 'Roniel Maramot'
},
company: {
type: 'text',
text: 'Pragtechnologies Corp.'
},
phone: {
type: 'text',
text: '029222225'
},
mobile: {
type: 'text',
text: ''
},
email: {
type: 'text',
text: 'roniel.maramot@pelicancorp.com'
},
identifier: '1'
},
{
id: {
type: 'text',
text: '304041'
},
name: {
type: 'text',
text: 'Roniel Maramot'
},
company: {
type: 'text',
text: 'Pragtechnologies Corp.'
},
phone: {
type: 'text',
text: '029222225'
},
mobile: {
type: 'text',
text: ''
},
email: {
type: 'text',
text: 'roniel.maramot@pelicancorp.com'
},
identifier: '2'
},
{
id: {
type: 'text',
text: '304041'
},
name: {
type: 'text',
text: 'Roniel Maramot'
},
company: {
type: 'text',
text: 'Pragtechnologies Corp.'
},
phone: {
type: 'text',
text: '029222225'
},
mobile: {
type: 'text',
text: ''
},
email: {
type: 'text',
text: 'roniel.maramot@pelicancorp.com'
},
identifier: '3'
},
{
id: {
type: 'text',
text: '304041'
},
name: {
type: 'text',
text: 'Roniel Maramot'
},
company: {
type: 'text',
text: 'Pragtechnologies Corp.'
},
phone: {
type: 'text',
text: '029222225'
},
mobile: {
type: 'text',
text: ''
},
email: {
type: 'text',
text: 'roniel.maramot@pelicancorp.com'
},
identifier: '4'
},
{
id: {
type: 'text',
text: '304041'
},
name: {
type: 'text',
text: 'Roniel Maramot'
},
company: {
type: 'text',
text: 'Pragtechnologies Corp.'
},
phone: {
type: 'text',
text: '029222225'
},
mobile: {
type: 'text',
text: ''
},
email: {
type: 'text',
text: 'roniel.maramot@pelicancorp.com'
},
identifier: '5'
},
{
id: {
type: 'text',
text: '304041'
},
name: {
type: 'text',
text: 'Roniel Maramot'
},
company: {
type: 'text',
text: 'Pragtechnologies Corp.'
},
phone: {
type: 'text',
text: '029222225'
},
mobile: {
type: 'text',
text: ''
},
email: {
type: 'text',
text: 'roniel.maramot@pelicancorp.com'
},
identifier: '6'
},
{
id: {
type: 'text',
text: '304041'
},
name: {
type: 'text',
text: 'Roniel Maramot'
},
company: {
type: 'text',
text: 'Pragtechnologies Corp.'
},
phone: {
type: 'text',
text: '029222225'
},
mobile: {
type: 'text',
text: ''
},
email: {
type: 'text',
text: 'roniel.maramot@pelicancorp.com'
},
identifier: '7'
},
{
id: {
type: 'text',
text: '304041'
},
name: {
type: 'text',
text: 'Roniel Maramot'
},
company: {
type: 'text',
text: 'Pragtechnologies Corp.'
},
phone: {
type: 'text',
text: '029222225'
},
mobile: {
type: 'text',
text: ''
},
email: {
type: 'text',
text: 'roniel.maramot@pelicancorp.com'
},
identifier: '8'
},
{
id: {
type: 'text',
text: '304041'
},
name: {
type: 'text',
text: 'Roniel Maramot'
},
company: {
type: 'text',
text: 'Pragtechnologies Corp.'
},
phone: {
type: 'text',
text: '029222225'
},
mobile: {
type: 'text',
text: ''
},
email: {
type: 'text',
text: 'roniel.maramot@pelicancorp.com'
},
identifier: '9'
},
{
id: {
type: 'text',
text: '304041'
},
name: {
type: 'text',
text: 'Roniel Maramot'
},
company: {
type: 'text',
text: 'Pragtechnologies Corp.'
},
phone: {
type: 'text',
text: '029222225'
},
mobile: {
type: 'text',
text: ''
},
email: {
type: 'text',
text: 'roniel.maramot@pelicancorp.com'
},
identifier: '10'
},
{
id: {
type: 'text',
text: '304041'
},
name: {
type: 'text',
text: 'Roniel Maramot'
},
company: {
type: 'text',
text: 'Pragtechnologies Corp.'
},
phone: {
type: 'text',
text: '029222225'
},
mobile: {
type: 'text',
text: ''
},
email: {
type: 'text',
text: 'roniel.maramot@pelicancorp.com'
},
identifier: '11'
},
{
id: {
type: 'text',
text: '304041'
},
name: {
type: 'text',
text: 'Roniel Maramot'
},
company: {
type: 'text',
text: 'Pragtechnologies Corp.'
},
phone: {
type: 'text',
text: '029222225'
},
mobile: {
type: 'text',
text: ''
},
email: {
type: 'text',
text: 'roniel.maramot@pelicancorp.com'
},
identifier: '12'
},
{
id: {
type: 'text',
text: '304041'
},
name: {
type: 'text',
text: 'Roniel Maramot'
},
company: {
type: 'text',
text: 'Pragtechnologies Corp.'
},
phone: {
type: 'text',
text: '029222225'
},
mobile: {
type: 'text',
text: ''
},
email: {
type: 'text',
text: 'roniel.maramot@pelicancorp.com'
},
identifier: '13'
},
{
id: {
type: 'text',
text: '304041'
},
name: {
type: 'text',
text: 'Roniel Maramot'
},
company: {
type: 'text',
text: 'Pragtechnologies Corp.'
},
phone: {
type: 'text',
text: '029222225'
},
mobile: {
type: 'text',
text: ''
},
email: {
type: 'text',
text: 'roniel.maramot@pelicancorp.com'
},
identifier: '14'
},
{
id: {
type: 'text',
text: '304041'
},
name: {
type: 'text',
text: 'Roniel Maramot'
},
company: {
type: 'text',
text: 'Pragtechnologies Corp.'
},
phone: {
type: 'text',
text: '029222225'
},
mobile: {
type: 'text',
text: ''
},
email: {
type: 'text',
text: 'roniel.maramot@pelicancorp.com'
},
identifier: '15'
},
{
id: {
type: 'text',
text: '304041'
},
name: {
type: 'text',
text: 'Roniel Maramot'
},
company: {
type: 'text',
text: 'Pragtechnologies Corp.'
},
phone: {
type: 'text',
text: '029222225'
},
mobile: {
type: 'text',
text: ''
},
email: {
type: 'text',
text: 'roniel.maramot@pelicancorp.com'
},
identifier: '16'
},
{
id: {
type: 'text',
text: '304041'
},
name: {
type: 'text',
text: 'Roniel Maramot'
},
company: {
type: 'text',
text: 'Pragtechnologies Corp.'
},
phone: {
type: 'text',
text: '029222225'
},
mobile: {
type: 'text',
text: ''
},
email: {
type: 'text',
text: 'roniel.maramot@pelicancorp.com'
},
identifier: '17'
},
{
id: {
type: 'text',
text: '304041'
},
name: {
type: 'text',
text: 'Roniel Maramot'
},
company: {
type: 'text',
text: 'Pragtechnologies Corp.'
},
phone: {
type: 'text',
text: '029222225'
},
mobile: {
type: 'text',
text: ''
},
email: {
type: 'text',
text: 'roniel.maramot@pelicancorp.com'
},
identifier: '18'
},
{
id: {
type: 'text',
text: '304041'
},
name: {
type: 'text',
text: 'Roniel Maramot'
},
company: {
type: 'text',
text: 'Pragtechnologies Corp.'
},
phone: {
type: 'text',
text: '029222225'
},
mobile: {
type: 'text',
text: ''
},
email: {
type: 'text',
text: 'roniel.maramot@pelicancorp.com'
},
identifier: '19'
},
{
id: {
type: 'text',
text: '304041'
},
name: {
type: 'text',
text: 'Roniel Maramot'
},
company: {
type: 'text',
text: 'Pragtechnologies Corp.'
},
phone: {
type: 'text',
text: '029222225'
},
mobile: {
type: 'text',
text: ''
},
email: {
type: 'text',
text: 'roniel.maramot@pelicancorp.com'
},
identifier: '20'
},
{
id: {
type: 'text',
text: '304041'
},
name: {
type: 'text',
text: 'Roniel Maramot'
},
company: {
type: 'text',
text: 'Pragtechnologies Corp.'
},
phone: {
type: 'text',
text: '029222225'
},
mobile: {
type: 'text',
text: ''
},
email: {
type: 'text',
text: 'roniel.maramot@pelicancorp.com'
},
identifier: '21'
},
{
id: {
type: 'text',
text: '304041'
},
name: {
type: 'text',
text: 'Roniel Maramot'
},
company: {
type: 'text',
text: 'Pragtechnologies Corp.'
},
phone: {
type: 'text',
text: '029222225'
},
mobile: {
type: 'text',
text: ''
},
email: {
type: 'text',
text: 'roniel.maramot@pelicancorp.com'
},
identifier: '22'
},
{
id: {
type: 'text',
text: '304041'
},
name: {
type: 'text',
text: 'Roniel Maramot'
},
company: {
type: 'text',
text: 'Pragtechnologies Corp.'
},
phone: {
type: 'text',
text: '029222225'
},
mobile: {
type: 'text',
text: ''
},
email: {
type: 'text',
text: 'roniel.maramot@pelicancorp.com'
},
identifier: '23'
},
{
id: {
type: 'text',
text: '304041'
},
name: {
type: 'text',
text: 'Roniel Maramot'
},
company: {
type: 'text',
text: 'Pragtechnologies Corp.'
},
phone: {
type: 'text',
text: '029222225'
},
mobile: {
type: 'text',
text: ''
},
email: {
type: 'text',
text: 'roniel.maramot@pelicancorp.com'
},
identifier: '24'
},
{
id: {
type: 'text',
text: '304041'
},
name: {
type: 'text',
text: 'Roniel Maramot'
},
company: {
type: 'text',
text: 'Pragtechnologies Corp.'
},
phone: {
type: 'text',
text: '029222225'
},
mobile: {
type: 'text',
text: ''
},
email: {
type: 'text',
text: 'roniel.maramot@pelicancorp.com'
},
identifier: '25'
}
]
}
},
searchUserTemplateProps: {
actionButton: {
callback: function (vmData) {
alert('Custom callback function triggered. Return value is in the console tab.');
console.log(vmData);
},
text: 'Action'
},
filterByLabel: 'Filter by',
filterByOptions: [
{
value: 1,
text: 'Customer ID'
},
{
value: 2,
text: 'Email'
}
],
filterTableCallback: function () { },
tableProps: {
headers: [
{
text: 'ID',
value: 'id',
width: '200px'
},
{
text: 'Name',
value: 'name'
},
{
text: 'Company',
value: 'company',
width: '350px'
},
{
text: 'Phone',
value: 'phone',
width: '250px'
},
{
text: 'Mobile',
value: 'mobile',
width: '250px'
},
{
text: 'Email',
value: 'email',
width: '300px'
}
],
hasCheckbox: 'true',
onScroll: function () { }
}
},
vm: {}
},
components: {
search_user_template: PCUISearchUserTemplate
},
mounted: function () {
var self = this;
self.vm.searchUserTemplate = self.$refs['search-user'];
self.searchUserTemplateProps.filterTableCallback = self.filterTableCallback;
self.searchUserTemplateProps.tableProps.onScroll = self.tableOnScrollCallback;
},
methods: {
filterTableCallback: function (model, isAdvancedSearch) {
var self = this;
clearTimeout(self.searchUserTemplateData.table.ajaxRequest);
self.searchUserTemplateData.table.ajaxRequest = setTimeout(function () {
self.vm.searchUserTemplate.table.obj.tableRows = self.searchUserTemplateData.table.rows;
self.vm.searchUserTemplate.toggleStandardView('hide', 'loading-spinner');
self.vm.searchUserTemplate.toggleStandardView('show', 'loading-error', false);
self.vm.searchUserTemplate.toggleStandardView('hide', 'loading-error', false);
}, 2000);
},
tableOnScrollCallback: function (event, atEnd) {
var self = this;
if (atEnd && !self.vm.searchUserTemplate.table.isAllDataLoaded) {
self.vm.searchUserTemplate.table.isAllDataLoaded = true;
self.vm.searchUserTemplate.table.obj.showFooterRow('all-results');
}
},
openSearchUser: function () {
var self = this;
self.vm.searchUserTemplate.open();
}
}
});
searchUserDOM.openSearchUser();