Skip to content

Instantly share code, notes, and snippets.

/notification-table.html Secret

Created December 4, 2015 16:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save anonymous/50f29b9249bb713ada1c to your computer and use it in GitHub Desktop.
Save anonymous/50f29b9249bb713ada1c to your computer and use it in GitHub Desktop.
Download ZIP
Vaadin Grid
Raw
gistfile1.txt
<!--
-->
<link rel="import" href="../../../polymer/polymer.html">
<!--Polymer Elements-->
<link rel="import" href="../../../paper-toolbar/paper-toolbar.html">
<link rel="import" href="../../../iron-flex-layout/classes/iron-flex-layout.html">
<!--Vaadin Elements-->
<link rel="import" href="../../../vaadin-components/vaadin-components.html">
<!--DC2F Elements-->
<link rel="import" href="../dc2f-data-object-table-behavior.html">
<link rel="import" href="../../dc2f-services/dc2f-service-manager.html">
<link rel="import" href="dc2f-sort-factory-vaadin-grid.html">
<link rel="import" href="../../dc2f-data-object-list/dc2f-pagination.html">
<!-- Quick search behavior reused from dc2f-data-object-list -->
<link rel="import" href="../../dc2f-data-object-list/dc2f-quick-search-behavior.html">
<link rel="import" href="../../dc2f-data-object-list/dc2f-quick-search-header.html">
<link rel="import" href="../../dc2f-table-sort-header/dc2f-vaadin-grid-sort-header.html">
<!--
Data Object Grid Element using Vaadin Grid Web Component.
### Example
<dc2f-data-object-vaadin-grid></dc2f-data-object-vaadin-grid>
### Dependencies
@element dc2f-data-object-vaadin-grid
@demo ../demo/index.html
@blurb A grid Element that will show a list of data objects using the Vaadin Grid Component
@status 0.0.1.a
@url
-->
<dom-module id="dc2f-data-object-vaadin-grid">
<style>
#grid {
@apply(--dc2f-data-object-vaadin-grid-theme);
}
</style>
<template>
<paper-toolbar id="datatableToolbar" hidden$="{{hideToolbar}}">
<span class="flex">{{headerTitle}}</span>
<content select="[toolbar]"></content>
</paper-toolbar>
<div class="horizontal layout" hidden$="{{hideSearchBar}}">
<dc2f-pagination id="pager"></dc2f-pagination>
<dc2f-vaadin-grid-sort-header id="sortHeader"></dc2f-vaadin-grid-sort-header>
<div class="flex"></div>
<dc2f-quick-search-header id="searchHeader"></dc2f-quick-search-header>
</div>
<vaadin-grid id="grid">
<table id="table">
<thead id="columnHeaders">
</thead>
<tbody id="gridRows">
</tbody>
</table>
</vaadin-grid>
<content id="cellRendererContent" select="[cell-renderer]"></content>
<dc2f-sort-factory-vaadin-grid id="sortFactory"></dc2f-sort-factory-vaadin-grid>
<dc2f-service-manager id="serviceManager"></dc2f-service-manager>
</template>
<script>
Polymer({
is: 'dc2f-data-object-vaadin-grid',
behaviors: [Dc2fDataObjectTableBehavior, Dc2fQuickSearchBehavior],
listeners: {
'grid.select':'_handleRowSelectionChanged',
'grid.sort-order-changed':'_handleColumnSort',
'pager.page-selected': '_handlePageSelected',
'searchHeader.quick-search-value-changed': '_handleSearchValueChanged',
'sortHeader.sort-selected':'_handleSortHeader',
},
properties: {
/*
* Raw data for the grid
*
* @attribute data
* @type Array
* @default []
*/
data: {
type: Array,
value: function () {
return [];
},
},
/**
* The number of rows to display per page
*
* @attribute rowsPerPage
* @type Number
* @default 10
*/
rowsPerPage: {
type: Number,
value: 10
},
/*
* Filtered data for the grid
*
* @attribute _filteredData
* @type Array
* @default []
*/
_filteredData: {
type: Array,
value: function() {
return null;
},
},
/*
* String used for quickSearch
*
* { id : string representation of a row}
* @type Object
* @default {}
*/
_dataObjectPropertyStrings: {
type: Object,
value: function () {
return {};
}
},
/*
* current displayed IDs
*
* @type arrays
* @default []
*/
_dataObjectIds: {
type: Array,
value: function () {
return [];
}
},
useSortHeader: {
type: Boolean,
value: false
}
},
/**
* Force redraw of the table and recalculate of the columns
*
* @method redrawTable
* @param {boolean} reset filters and ordering
*/
redrawTable: function (reset) {},
/**
* Force table to fit width of containing element
*
* @method fitTable
*/
fitTable: function () {},
/**
* Get the Data Object for the selected row
*
* @method getSelected
* @return {DataObject} dataObject from selected row or null if none selected
*/
getSelected: function () {
var selectedDataObject = null;
var selectedRows = this.$.grid.selection.selected();
if (selectedRows != null && selectedRows.length > 0) {
var selectedRowIndex = selectedRows[0];
var selectedId = this.data[selectedRowIndex][0];
for (var i = 0; i < this.dataObjectList.length; i++) {
if (this.dataObjectList[i].id === selectedId) {
selectedDataObject = this.dataObjectList[i];
break;
}
}
}
return selectedDataObject;
},
/**
* Get the Data Object for the selected row
*
* @method getSelected
* @return {DataObject} dataObject from selected row or null if none selected
*/
setSelected: function (dataObjectId) {
if (Dc2fStringUtils.isStringNotEmpty(dataObjectId)) {
for (var i = 0; i < this.data.length; i++) {
if (dataObjectId === this.data[i][0]) {
this.$.grid.selection.select(i);
break;
}
}
}
},
/**
* Hide/show a column
* Overrides dc2f-data-object-table-behavior
*
* @method setColumnVisibility
* @param {Object} metadataKey
* @param {Boolean} visible
*/
setColumnVisibility: function (metadataKey, visible) {
if (metadataKey != null && this.beanMetadata != null) {
var fieldMetadata = Dc2fMetadataUtils.getFieldMetadata(metadataKey, this.beanMetadata);
for (var i = 0; i < this.$.grid.columns.length; i++) {
if (fieldMetadata.shortName === this.$.grid.columns[i].name) {
this.$.grid.columns.hidden = visible;
break;
}
}
}
},
/**
* Set the number of results per page
* Overrides dc2d-data-object-table-behavior
*
* @method setResultsPerPage
* @param {Number} resultsPerPage
*/
setResultsPerPage: function (resultsPerPage) {},
/**
* Update the column model
*
* @method updateTableModel
* @param metadataKeys keys for columns to show
* @param beanMetadata metadata definition for table
*/
updateTableModel: function (metadataKeys, beanMetadata) {
this._clearTable();
var fieldMetadataArray = [];
this.metadataKeys = metadataKeys;
this.beanMetadata = beanMetadata;
this.fieldMetadataMap = this.beanMetadata.fieldMetadataMap;
for (var key in this.fieldMetadataMap) {
if (Dc2fMetadataUtils.isSystemField(this.fieldMetadataMap[key].metadataKey) === false) {
fieldMetadataArray.push(this.fieldMetadataMap[key]);
}
}
this._fieldMetadataList = fieldMetadataArray;
this.$.sortHeader.setFieldMetadataList(this._fieldMetadataList);
this.isRebuildTable = true;
this._buildTableModel();
},
/**
* Set the data for the table to be created
*
* @method updateTableData
* @param metadataKeys list of metadatakeys
* @param dataObjectList list of data objects
* @param beanMetadata metadata definition for data objects
*/
updateTableData: function (dataObjectList) {
this.dataObjectList = dataObjectList;
this.$.sortHeader.setDataObjectList(dataObjectList);
this._loadGridData();
},
/*************************
* Private Helper Methods
*************************/
/**
* Private method to clear table model and data
*
* @method _clearTable
*/
_clearTable: function () {
var grid = this.$.grid;
grid.items = [];
if (this.$.grid.columns != null &&
this.$.grid.columns.length > 0 &&
this.metadataKeys != null &&
this.beanMetadata != null) {
//will always have data object id
//need to set it to visible to fix the
//invisible column being added problem
grid.columns[0].hidden = false;
grid.removeColumn("dataObjectId");
for (var i = 0; i < this.metadataKeys.length; i++) {
var metadataKey = this.metadataKeys[i];
var fieldMetadata = Dc2fMetadataUtils.getFieldMetadata(metadataKey, this.beanMetadata);
grid.removeColumn(fieldMetadata.shortName);
}
}
},
/**
* Private method for building the table model, creates columns from metadatakeys and fieldmetadata for data object type
*
*
*/
_buildTableModel: function () {
var grid = this.$.grid;
//add data object id column/hidden
grid.addColumn({
headerContent: "dataObjectId",
name: "dataObjectId",
});
grid.columns[0].hidden = true;
var sortFactory = this.$.sortFactory;
//get rest of the columns from the header definition
for (var i = 0; i < this.metadataKeys.length; i++) {
var metadataKey = this.metadataKeys[i];
var fieldMetadata = Dc2fMetadataUtils.getFieldMetadata(metadataKey, this.beanMetadata);
grid.addColumn({
headerContent: fieldMetadata.shortName,
name: fieldMetadata.shortName,
});
if (sortFactory != null && sortFactory.isColumnSortable(fieldMetadata)) {
grid.columns[i + 1].sortable = true;
} else {
grid.columns[i + 1].sortable = false;
}
if (this.cellRendererFactory != null && this.cellRendererFactory.hasCellRenderer(fieldMetadata)) {
grid.columns[i + 1].renderer = this.cellRendererFactory.getCellRenderer(fieldMetadata);
}
}
},
/**
* Private method that loads the rows from the metadataKeys in the dataObjectList
*
* @method _loadGridData
*/
_loadGridData: function () {
if (this.$.grid != null && this.dataObjectList != null) {
var dataObjectService = this.$.serviceManager.getDataObjectService();
//build row for each object
this.data = new Array();
for (var i = 0; i < this.dataObjectList.length; i++) {
var dataObject = this.dataObjectList[i];
var dataTableRow = this._loadDataObjectRow(dataObject, dataObjectService);
this._dataObjectIds.push(dataTableRow[0]);
this.data.push(dataTableRow);
}
}
this._setGridPages(this.data);
this._loadGridPage(1);
this._buildDataObjectPropertyStrings();
},
/**
* Private method used to set grid pages for the pager depending on what data is being used
*
* @param {Array} current data being displayed
* @method _setGridPages
*/
_setGridPages: function(currdata) {
var gridPages = Math.ceil( currdata.length / this.rowsPerPage );
this.$.pager.setPages(gridPages);
},
/**
* Private method used to create property strings for quick search
*
* @method _buildDataObjectPropertyStrings
*/
_buildDataObjectPropertyStrings: function () {
if (this.data !== null) {
for (var i = 0; i < this.data.length; i++) {
var propertyString = "";
for (var j = 1; j < this.data[i].length; j++) {
var currdata = this.data[i][j];
if (currdata !== "" && (currdata !== null && typeof currdata !== 'object')) {
propertyString = propertyString + currdata + " ";
}
}
this._dataObjectPropertyStrings[this.data[i][0]] = propertyString;
}
}
},
/**
* Private method to build page items for the grid
*
* @param {integer} the page being displayed
* @method _loadGridPage
*/
_loadGridPage: function(page) {
var tempArray = [];
var pageNdx = page - 1;
var firstElementNdx = this.rowsPerPage * pageNdx;
var lastElementNdx = firstElementNdx + this.rowsPerPage;
if (this._filteredData !== null) {
if (lastElementNdx > this._filteredData.length) {
lastElementNdx = this._filteredData.length;
}
for (var i = firstElementNdx; i < lastElementNdx; i++) {
tempArray.push(this._filteredData[i]);
}
} else {
if (lastElementNdx > this.data.length) {
lastElementNdx = this.data.length;
}
for (var i = firstElementNdx; i < lastElementNdx; i++) {
tempArray.push(this.data[i]);
}
}
this.$.grid.items = tempArray;
},
/**
* Private method when page is selected
*
* @method _handlePageSelected
*/
_handlePageSelected: function (e) {
this._loadGridPage(e.detail.page);
},
/**
* Private method that handles row selection events from vaadin-grid
*
* @method _handleRowSelectionChanged
*/
_handleRowSelectionChanged: function (e) {
var selectedRows = this.$.grid.selection.selected();
if (selectedRows != null && selectedRows.length > 0) {
var selectedRowIndex = selectedRows[0];
var selectedRow = this.data[selectedRowIndex];
this._fireRowSelectedDataObjectId(selectedRow[0]);
}
},
/**
* Private method called when table is searched
*
* @method _handleSearchValueChanged
*/
_handleSearchValueChanged: function (e) {
this._performSearch(e.detail.value);
},
/**
* Private method used to perform quick search on list
*
* @method _performSearch
*/
_performSearch: function (value) {
var _this = this;
if (_this.asyncSearch) {
clearTimeout(_this.asyncSearch);
}
this.asyncSearch = setTimeout(function () {
if (value.length === 0) {
_this._filteredData = null;
_this._setGridPages(_this.data);
_this._loadGridPage(1);
} else {
_this._dataObjectIds = _this.quickSearchList(_this._dataObjectPropertyStrings, value);
_this._loadFilteredData();
}
}, 500);
},
/**
* Private method that handles loading the filtered data
*
* @method _loadFilteredData
*/
_loadFilteredData: function() {
if (this.data !== 0) {
this._filteredData = [];
for (var i = 0; i < this.data.length; i++) {
if (this._dataObjectIds.indexOf(this.data[i][0]) !== -1) {
this._filteredData.push(this.data[i]);
}
}
}
this._setGridPages(this._filteredData);
this._loadGridPage(1);
this.$.pager.resetToPgOne();
},
/**
* Private method that handles sorting via sort header for vaadin-grid data
* Currently disabled
*
* @method _handleSortHeader
*/
_handleSortHeader: function(e) {
var column = -1;
var eventtype = e.detail.typeOfEvent;
var comparatorValue;
var direction = e.detail.direction;
comparatorValue = direction == 'asc' ? -1 : 1;
if (eventtype === "dropdown") {a
var fieldMetadataID = e.detail.fieldmeta.id;
for (var i = 0; i < this._fieldMetadataList.length; i++) {
if (fieldMetadataID === this._fieldMetadataList[i].id) {
column = i+1;
break;
}
}
} else if ( eventtype === "column-click" ) {
column = e.detail.column;
var fieldMetadataID = this._getFieldMetadataFromColumn(column);
var columnName = fieldMetadataID.longName;
this.$.sortHeader.setCurrentSort(fieldMetadataID, direction, columnName);
}
if (column > 0 && comparatorValue > -2) {
this._performSort(column, comparatorValue);
}
},
/**
* Private method that handles sorting for vaadin-grid data
*
* @method _handleColumnSort
*/
_handleColumnSort: function(e) {
var data_idx = e.detail.value[0].column;
var direction = e.detail.value[0].direction;
direction = direction == 'asc' ? 1 : -1;
this._performSort(data_idx, direction);
},
_getFieldMetadataFromColumn: function(columnNdx) {
var metadataKeysIdx = columnNdx - 1;
var metadataKey = this.metadataKeys[metadataKeysIdx];
var fieldMetadata = Dc2fMetadataUtils.getFieldMetadata(metadataKey, this.beanMetadata);
return fieldMetadata;
},
_performSort: function(column, direction) {
var data_idx = column;
var comparatorValue = direction;
//metadata array is offset by 1 because it does not contain the data object id column
var fieldMetadata = this._getFieldMetadataFromColumn(data_idx);
//get the sort factory function
var sortFactory = this.$.sortFactory;
var sortFunction = sortFactory.getColumnSortFunction(fieldMetadata);
if (this._filteredData !== null) {
sortFunction(this._filteredData, data_idx, comparatorValue);
} else {
sortFunction(this.data, data_idx, comparatorValue);
}
this._loadGridPage(1);
this.$.pager.resetToPgOne();
},
/*************************
* Lifecycle Methods
*************************/
ready: function () {
this.useSortHeader = false;
if (this.useSortHeader !== true) {
this.$.sortHeader.remove();
}
},
attached: function () {
this.async(function () {
var cellRendererFactory = Polymer.dom(this.$.cellRendererContent).getDistributedNodes()[0];
if (cellRendererFactory != null) {
this.setCellRendererFactory(cellRendererFactory);
}
});
}
})
</script>
</dom-module>
Raw
notification-table.html
<link rel="import" href="../../polymer/polymer.html">
<!--dc2f elements-->
<link rel="import" href="../dc2f-data-object-table/datatables/dc2f-data-object-datatable.html">
<link rel="import" href="../dc2f-data-object-table/datatables/dc2f-cell-renderer-factory-datatables.html">
<link rel="import" href="../dc2f-data-object-table/vaadin/dc2f-data-object-vaadin-grid.html">
<link rel="import" href="../dc2f-services/dc2f-metadata-service.html">
<link rel="import" href="../dc2f-services/dc2f-notifications-service.html">
<!--
DC2F Notifications Table
<dc2f-notifications-table></dc2f-notifications-table>
@element dc2f-notifications-table
@blurb DC2F Notifications
@demo demo/index.html
@status 0.0.1.a
-->
<dom-module id="dc2f-notifications-table">
<style>
#dataObjectTable {
z-index: 1000;
height: 100%;
width: 100%;
}
</style>
<template>
<!--
<dc2f-data-object-datatable hide-toolbar id="dataObjectTable" tablestyles="display stripe hover">
<dc2f-cell-renderer-factory-datatables id="cellRenderer" cell-renderer></dc2f-cell-renderer-factory-datatables>
</dc2f-data-object-datatable>
-->
<dc2f-data-object-vaadin-grid hide-toolbar id="dataObjectTable">
</dc2f-data-object-vaadin-grid>
<dc2f-notifications-service id="notificationsService"></dc2f-notifications-service>
<dc2f-metadata-service id="metadataService"></dc2f-metadata-service>
</template>
<script>
Polymer({
is: 'dc2f-notifications-table',
/********************************
* Listeners
********************************/
listeners: {
'dataObjectTable.row-double-click': '_handleRowDoubleClicked',
'notificationsService.notifications-response': '_handleNotificationsResponse',
},
/********************************
* Behaviors
********************************/
//define behaviors here
behaviors: [],
/********************************
* Properties
********************************/
properties: {},
/********************************
* Public API Methods
********************************/
//all public api methods here, make sure to comment all methods with following
/**
* Method notifications for a given number of days
*
* @method loadNotifications
* @param {Moment Date} startDate datetime in milliseconds
* @param {Moment Date} endDate datetime in milliseconds
*/
loadNotifications: function (startDate, endDate) {
if (this.beanMetadata == null && this.metadataKeys == null) {
this.beanMetadata = this.$.metadataService.getBeanMetadata("Dc2fNotification");
this.metadataKeys = this.$.metadataService.getListableFieldMetadataKeys(this.beanMetadata);
this.$.dataObjectTable.updateTableModel(this.metadataKeys, this.beanMetadata);
}
if (startDate != null && endDate != null) {
this.$.notificationsService.requestNotifications(startDate.valueOf(), endDate.valueOf());
}
},
/********************************
* Private Helper Methods
********************************/
/**
* The 'notification-selected' event is fired when the notification is double clicked
*
* @event notification-selected
*/
/**
* Private Handler Method double clicking notfication item row
*
* @method _handleRowDoubleClicked
*
*/
_handleRowDoubleClicked: function (e) {
//row was selected but need to get the entire data object to access the corresponding id of the notification
var notificationObject = this.$.dataObjectTable.getSelected();
this.fire('notification-selected', {
selected: notificationObject
});
},
/**
* Private Handler Method for notifications response
*
* @method _handleNotificationsResponse
*
*/
_handleNotificationsResponse: function (e) {
var notifications = e.detail.response;
this.$.dataObjectTable.updateTableData(notifications);
},
/********************************
* Lifecycle Methods
********************************/
});
</script>
</dom-module>
Raw
notification-wizard.html
<link rel="import" href="../../polymer/polymer.html">
<!--paper elements-->
<link rel="import" href="../../paper-button/paper-button.html">
<link rel="import" href="../../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../iron-icons/hardware-icons.html">
<link rel="import" href="../../neon-animation/neon-animated-pages.html">
<link rel="import" href="../../neon-animation/neon-animatable.html">
<link rel="import" href="../../neon-animation/animations/scale-up-animation.html">
<link rel="import" href="../../neon-animation/animations/fade-out-animation.html">
<link rel="import" href="../../neon-animation/animations/slide-from-right-animation.html">
<link rel="import" href="../../neon-animation/animations/slide-left-animation.html">
<link rel="import" href="../../iron-flex-layout/classes/iron-flex-layout.html">
<!--dc2f elements-->
<link rel="import" href="dc2f-notifications-table.html">
<link rel="import" href="dc2f-history-table.html">
<link rel="import" href="dc2f-diff-table.html">
<link rel="import" href="../dc2f-services/dc2f-data-object-service.html">
<!--
DC2F Notifications Wizard shows series of pages for notifications, history, and diffs
<dc2f-notifications-wizard></dc2f-notifications-wizard>
### Dependencies
dc2f-utils/notificationUtils.js
@element dc2f-notification-wizard
@blurb DC2F Notification Wizard shows all info on notifications and related objects
@demo demo/index.html
@status 0.0.1.a
-->
<dom-module id="dc2f-notifications-wizard">
<style>
#dialogScroll {
width: 100%;
height: 80%;
overflow: auto;
}
#wizardContainer,
#notificationsPages,
#tableAnimatable,
#notificationsTable,
#historyTable,
#diffTable {
width: 100%;
height: 100%;
}
</style>
<template>
<div id="wizardContainer">
<div class="layout horizontal flex">
<paper-icon-button id="previousButton" icon="hardware:keyboard-arrow-left"></paper-icon-button>
<div class="flex"></div>
<h2>{{_headingText}}</h2>
<div class="flex"></div>
<paper-icon-button id="nextButton" icon="hardware:keyboard-arrow-right"></paper-icon-button>
</div>
<div id="dialogScroll">
<neon-animated-pages selected="0" id="notificationsPages" entry-animation="slide-from-right-animation"
exit-animation="slide-left-animation" class="layout horizontal flex">
<neon-animatable id="tableAnimatable" class="layout horizontal flex">
<dc2f-notifications-table class="layout horizontal flex" id="notificationsTable"></dc2f-notifications-table>
</neon-animatable>
<neon-animatable id="historyAnimatable">
<dc2f-history-table id="historyTable"></dc2f-history-table>
</neon-animatable>
<neon-animatable id="diffsAnimatable">
<dc2f-diff-table id="diffTable"></dc2f-diff-table>
</neon-animatable>
</neon-animated-pages>
</div>
<div class="buttons">
<paper-button id="closeButton">Close</paper-button>
</div>
</div>
<dc2f-data-object-service id="dataObjectService"></dc2f-data-object-service>
</template>
<script>
Polymer({
is: 'dc2f-notifications-wizard',
/********************************
* Listeners
********************************/
listeners: {
'closeButton.click': '_handleCloseClicked',
'notificationsTable.notification-selected': '_handleNotificationSelected',
'historyTable.history-selected': '_handleHistorySelected',
'previousButton.click':'_handlePreviousButtonClick',
'nextButton.click':'_handleNextButtonClick',
'notificationsPages.iron-items-changed':'_handlePageChange'
},
/********************************
* Behaviors
********************************/
//define behaviors here
behaviors: [],
/********************************
* Properties
********************************/
properties: {
/**
* StartDate of the notification time period
*
* @attribute startDate
* @type {Moment Date}
* @default null
*
*/
startDate: {
type: Object,
value: function () {
return null;
}
},
/**
* EndDate of the notification time period
*
* @attribute endDate
* @type {Moment Date}
* @default null
*
*/
endDate: {
type: Object,
value: function () {
return null;
}
},
/**
* Text for heading, will change based on page shown
*
* @attribute _headingText
* @type String
* @default "Notifications
*/
_headingText: {
type: String,
value: "Notifications"
},
/**
* Private Selected Notification Object
*
* @attribute _selectedNotification
* @type {Dc2fNotification}
* @default null
*/
_selectedNotification: {
type: Object,
value: function() {
return null;
}
},
/**
* Private Selected History Object
*
* @attribute _selectedHistory
* @type {History}
* @default null
*/
_selectedHistory: {
type: Object,
value: function() {
return null;
}
}
},
/********************************
* Public API Methods
********************************/
//all public api methods here, make sure to comment all methods with following
/**
* Load Notifications for the given time range
*
* @method loadNotifications
* @param {Moment Date} startDate of time range
* @return {Moment Date} endDate of time range
*
*/
loadNotifications: function (startDate, endDate) {
this.startDate = startDate;
this.endDate = endDate;
this.$.notificationsTable.loadNotifications(this.startDate, this.endDate);
this._updateHeading();
},
/********************************
* Private Helper Methods
********************************/
/**
* Private handler for close dialog clicked
*
* @method _handleCloseClicked
*/
_handleCloseClicked: function () {
this.fire('close-notifications-clicked', true);
},
/**
* Private handler for when notifications are selected from table, will show history table
*
* @method _handleNotificationSelected
*/
_handleNotificationSelected: function (e) {
this._selectedNotification = e.detail.selected;
this._createHistoryHeading(this._selectedNotification);
var notificationId = this.$.dataObjectService.getValue(this._selectedNotification, Dc2fNotitificationUtils.NOTIFICATION_DATA_OBJECT_ID_KEY);
this.$.historyTable.loadNotificationHistoryById(notificationId);
this.$.notificationsPages.selected = 1;
this._updateHeading();
},
/**
* Private handler for when history item row is selected, shows diffs for item and switches pages
*
* @method _handleHistoryDiffsSelected
*/
_handleHistorySelected: function (e) {
this._selectedHistory = e.detail.selected;
this.$.diffTable.loadDiffs(this._selectedHistory.diffs);
this.$.notificationsPages.selected = 2;
this._updateHeading();
},
/**
* Private handler for when previous button is selected, show previous page if available
*
* @method _handlePreviousButtonClick
*/
_handlePreviousButtonClick: function() {
this.$.notificationsPages.selectPrevious();
this._updateHeading();
},
/**
* Private handler for when next button is selected, show next page if available
*
* @method _handleNextButtonClick
*/
_handleNextButtonClick: function() {
this.$.notificationsPages.selectNext();
this._updateHeading();
},
/**
* Private method to format notification page heading
*
* @method _createNotificationHeading
*/
_createNotificationHeading: function() {
if (this.startDate != null && this.endDate != null) {
var format = "YYYY-MM-DD HH:mm:ss";
var startDateString = this.startDate.format(format);
var endDateString = this.endDate.format(format);
this._headingText = "Notifications : " + startDateString + " to " + endDateString;
}
},
/**
* Private method to format history page heading
*
* @method _createHistoryHeading
*/
_createHistoryHeading: function() {
if (this._selectedNotification != null) {
var label = this.$.dataObjectService.getValue(this._selectedNotification, Dc2fNotitificationUtils.NOTIFICATION_DATA_OBJECT_LABEL_KEY);
this._headingText = "History - " + label;
}
},
/**
* Private method to format history page heading
*
* @method _createHistoryHeading
*/
_createDiffHeading: function() {
if (this._selectedNotification != null && this._selectedHistory != null) {
var action = this._selectedHistory.action;
var label = this.$.dataObjectService.getValue(this._selectedNotification, Dc2fNotitificationUtils.NOTIFICATION_DATA_OBJECT_LABEL_KEY);
var username = this._selectedHistory.username;
var timestamp = this._selectedHistory.timeStamp;
var momentTimestamp = moment.utc(timestamp);
var format = "YYYY-MM-DD HH:mm:ss";
var timestampString = momentTimestamp.format(format);
this._headingText = action + " - " + label + " by " + username + " at " + timestampString;
}
},
_updateHeading: function(e) {
switch (this.$.notificationsPages.selected) {
case (0):
//notification page
this._createNotificationHeading();
break;
case (1):
//history page
this._createHistoryHeading();
break;
case (2):
//diff page
this._createDiffHeading();
break;
default:
break;
}
}
/********************************
* Lifecycle Methods
********************************/
});
</script>
</dom-module>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment