http://git-wip-us.apache.org/repos/asf/nifi-fds/blob/eec354e6/demo-app/components/flow-design-system/fds-demo.js
----------------------------------------------------------------------
diff --git a/demo-app/components/flow-design-system/fds-demo.js
b/demo-app/components/flow-design-system/fds-demo.js
new file mode 100644
index 0000000..3ae86c5
--- /dev/null
+++ b/demo-app/components/flow-design-system/fds-demo.js
@@ -0,0 +1,1066 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+var ngCore = require('@angular/core');
+var covalentCore = require('@covalent/core');
+var ngRouter = require('@angular/router');
+var ngMaterial = require('@angular/material');
+var fdsAnimations = require('demo-app/fds.animations.js');
+var fdsDialogsModule = require('@flow-design-system/dialogs');
+var fdsSnackBarsModule = require('@flow-design-system/snackbars');
+var FdsService = require('demo-app/services/fds.service.js');
+var FdsDemoDialog =
require('demo-app/components/flow-design-system/dialogs/demo/fds-demo-dialog.js');
+
+var NUMBER_FORMAT = function (v) {
+ return v;
+};
+var DECIMAL_FORMAT = function (v) {
+ return v.toFixed(2);
+};
+var date = new Date();
+
+/**
+ * FdsDemo constructor.
+ *
+ * @param FdsSnackBarService The FDS snack bar service module.
+ * @param FdsService The FDS service module.
+ * @param dialog The angular material dialog module.
+ * @param TdDialogService The covalent dialog service module.
+ * @param TdDataTableService The covalent data table service module.
+ * @constructor
+ */
+function FdsDemo(FdsSnackBarService, FdsService, dialog, TdDataTableService,
FdsDialogService) {
+
+ this.fdsService = FdsService;
+
+ //<editor-fold desc="Snack Bars">
+
+ this.snackBarService = FdsSnackBarService;
+
+ //</editor-fold>
+
+ //<editor-fold desc="Dialog">
+
+ this.dialog = dialog;
+
+ //</editor-fold>
+
+ //<editor-fold desc="Simple Dialogs">
+
+ this.dialogService = FdsDialogService;
+
+ //</editor-fold>
+
+ //<editor-fold desc="Expansion Panel">
+
+ this.expandCollapseExpansion1Msg = 'No expanded/collapsed detected yet';
+ this.expansion1 = false;
+ this.disabled = false;
+
+ //</editor-fold>
+
+ //<editor-fold desc="Autocomplete">
+
+ this.currentState = '';
+ this.reactiveStates = '';
+ this.tdStates = [];
+ this.tdDisabled = false;
+ this.states = [
+ {code: 'AL', name: 'Alabama'},
+ {code: 'AK', name: 'Alaska'},
+ {code: 'AZ', name: 'Arizona'},
+ {code: 'AR', name: 'Arkansas'},
+ {code: 'CA', name: 'California'},
+ {code: 'CO', name: 'Colorado'},
+ {code: 'CT', name: 'Connecticut'},
+ {code: 'DE', name: 'Delaware'},
+ {code: 'FL', name: 'Florida'},
+ {code: 'GA', name: 'Georgia'},
+ {code: 'HI', name: 'Hawaii'},
+ {code: 'ID', name: 'Idaho'},
+ {code: 'IL', name: 'Illinois'},
+ {code: 'IN', name: 'Indiana'},
+ {code: 'IA', name: 'Iowa'},
+ {code: 'KS', name: 'Kansas'},
+ {code: 'KY', name: 'Kentucky'},
+ {code: 'LA', name: 'Louisiana'},
+ {code: 'ME', name: 'Maine'},
+ {code: 'MD', name: 'Maryland'},
+ {code: 'MA', name: 'Massachusetts'},
+ {code: 'MI', name: 'Michigan'},
+ {code: 'MN', name: 'Minnesota'},
+ {code: 'MS', name: 'Mississippi'},
+ {code: 'MO', name: 'Missouri'},
+ {code: 'MT', name: 'Montana'},
+ {code: 'NE', name: 'Nebraska'},
+ {code: 'NV', name: 'Nevada'},
+ {code: 'NH', name: 'New Hampshire'},
+ {code: 'NJ', name: 'New Jersey'},
+ {code: 'NM', name: 'New Mexico'},
+ {code: 'NY', name: 'New York'},
+ {code: 'NC', name: 'North Carolina'},
+ {code: 'ND', name: 'North Dakota'},
+ {code: 'OH', name: 'Ohio'},
+ {code: 'OK', name: 'Oklahoma'},
+ {code: 'OR', name: 'Oregon'},
+ {code: 'PA', name: 'Pennsylvania'},
+ {code: 'RI', name: 'Rhode Island'},
+ {code: 'SC', name: 'South Carolina'},
+ {code: 'SD', name: 'South Dakota'},
+ {code: 'TN', name: 'Tennessee'},
+ {code: 'TX', name: 'Texas'},
+ {code: 'UT', name: 'Utah'},
+ {code: 'VT', name: 'Vermont'},
+ {code: 'VA', name: 'Virginia'},
+ {code: 'WA', name: 'Washington'},
+ {code: 'WV', name: 'West Virginia'},
+ {code: 'WI', name: 'Wisconsin'},
+ {code: 'WY', name: 'Wyoming'},
+ ];
+
+ //</editor-fold>
+
+ //<editor-fold desc="Searchable Expansion Panels">
+
+ this.dataTableService = TdDataTableService;
+
+ this.droplets = [{
+ id: '23f6cc59-0156-1000-09b4-2b0610089090',
+ name: "Decompression_Circular_Flow",
+ displayName: 'Decompressed Circular flow',
+ type: 'flow',
+ sublabel: 'A sublabel',
+ compliant: {
+ id: '25fd6vv87-3549-0001-05g6-4d4567890765',
+ label: 'Compliant',
+ type: 'certification'
+ },
+ fleet: {
+ id: '23f6cc59-3549-0001-05g6-4d4567890765',
+ label: 'Fleet',
+ type: 'certification'
+ },
+ prod: {
+ id: '52fd6vv87-3549-0001-05g6-4d4567890765',
+ label: 'Production Ready',
+ type: 'certification'
+ },
+ secure: {
+ id: '32f6cc59-3549-0001-05g6-4d4567890765',
+ label: 'Secure',
+ type: 'certification'
+ },
+ versions: [{
+ id: '23f6cc59-0156-1000-06b4-2b0810089090',
+ revision: '1',
+ dependentFlows: [{
+ id: '25fd6vv87-3549-0001-05g6-4d4567890765'
+ }],
+ created: date.setDate(date.getDate() - 1),
+ updated: new Date()
+ }, {
+ id: '25fd6vv87-3549-0001-05g6-4d4567890765',
+ revision: '2',
+ dependentFlows: [{
+ id: '23f6cc59-0156-1000-06b4-2b0810089090'
+ }],
+ created: new Date(),
+ updated: new Date()
+ }],
+ flows: [],
+ extensions: [],
+ assets: [],
+ actions: [{
+ 'name': 'Delete',
+ 'icon': 'fa fa-close',
+ 'tooltip': 'Delete User'
+ }, {
+ 'name': 'Manage',
+ 'icon': 'fa fa-user',
+ 'tooltip': 'Manage User'
+ }, {
+ 'name': 'Action 3',
+ 'icon': 'fa fa-question',
+ 'tooltip': 'Whatever else we want to do...'
+ }]
+ }, {
+ id: '25fd6vv87-3249-0001-05g6-4d4767890765',
+ name: "DateConversion",
+ displayName: 'Date conversion',
+ type: 'asset',
+ sublabel: 'A sublabel',
+ compliant: {
+ id: '25fd6vv34-3549-0001-05g6-4d4567890765',
+ label: 'Compliant',
+ type: 'certification'
+ },
+ prod: {
+ id: '52vn6vv87-3549-0001-05g6-4d4567890765',
+ label: 'Production Ready',
+ type: 'certification'
+ },
+ versions: [{
+ id: '23f6ic59-0156-1000-06b4-2b0810089090',
+ revision: '1',
+ dependentFlows: [{
+ id: '23f6cc19-0156-1000-06b4-2b0810089090'
+ }],
+ created: new Date(),
+ updated: new Date()
+ }],
+ flows: [],
+ extensions: [],
+ assets: [],
+ actions: [{
+ 'name': 'Delete',
+ 'icon': 'fa fa-close',
+ 'tooltip': 'Delete User'
+ }]
+ }, {
+ id: '52fd6vv87-3294-0001-05g6-4d4767890765',
+ name: "nifi-email-bundle",
+ displayName: 'nifi-email-bundle',
+ type: 'extension',
+ sublabel: 'A sublabel',
+ compliant: {
+ id: '33fd6vv87-3549-0001-05g6-4d4567890765',
+ label: 'Compliant',
+ test: {
+ label: 'test'
+ },
+ type: 'certification'
+ },
+ versions: [{
+ id: '23d3cc59-0156-1000-06b4-2b0810089090',
+ revision: '1',
+ dependentFlows: [{
+ id: '23f6cc89-0156-1000-06b4-2b0810089090'
+ }],
+ created: new Date(),
+ updated: new Date()
+ }],
+ flows: [],
+ extensions: [],
+ assets: [],
+ actions: [{
+ 'name': 'Delete',
+ 'icon': 'fa fa-close',
+ 'tooltip': 'Delete User'
+ }, {
+ 'name': 'Manage',
+ 'icon': 'fa fa-user',
+ 'tooltip': 'Manage User'
+ },]
+ }];
+
+ this.filteredDroplets = [];
+
+ this.dropletColumns = [
+ {name: 'id', label: 'ID', sortable: true},
+ {name: 'name', label: 'Name', sortable: true,},
+ {name: 'displayName', label: 'Display Name', sortable: true},
+ {name: 'sublabel', label: 'Label', sortable: true},
+ {name: 'type', label: 'Type', sortable: true}
+ ];
+ this.activeDropletColumn = this.dropletColumns[0];
+
+ this.autoCompleteDroplets = [];
+ this.dropletsSearchTerms = [];
+
+ //</editor-fold>
+
+ //<editor-fold desc="Data Tables">
+
+ this.data = [{
+ 'id': 1,
+ 'name': 'Frozen yogurt',
+ 'type': 'Ice cream',
+ 'calories': 159.0,
+ 'fat': 6.0,
+ 'carbs': 24.0,
+ 'protein': 4.0,
+ 'sodium': 87.0,
+ 'calcium': 14.0,
+ 'iron': 1.0,
+ 'comments': 'I love froyo!',
+ 'actions': [{
+ 'name': 'Action 1',
+ 'icon': 'fa fa-user',
+ 'tooltip': 'Manage Users'
+ }, {
+ 'name': 'Action 2',
+ 'icon': 'fa fa-key',
+ 'tooltip': 'Manage Permissions'
+ }]
+ }, {
+ 'id': 2,
+ 'name': 'Ice cream sandwich',
+ 'type': 'Ice cream',
+ 'calories': 237.0,
+ 'fat': 9.0,
+ 'carbs': 37.0,
+ 'protein': 4.3,
+ 'sodium': 129.0,
+ 'calcium': 8.0,
+ 'iron': 1.0,
+ 'actions': [{
+ 'name': 'Action 1',
+ 'icon': 'fa fa-user',
+ 'tooltip': 'Manage Users'
+ }, {
+ 'name': 'Action 2',
+ 'icon': 'fa fa-key',
+ 'tooltip': 'Manage Permissions'
+ }, {
+ 'name': 'Action 3',
+ 'tooltip': 'Action 3'
+ }, {
+ 'name': 'Action 4',
+ 'disabled': true,
+ 'tooltip': 'Action 4'
+ }, {
+ 'name': 'Action 5',
+ 'tooltip': 'Action 5'
+ }]
+ }, {
+ 'id': 3,
+ 'name': 'Eclair',
+ 'type': 'Pastry',
+ 'calories': 262.0,
+ 'fat': 16.0,
+ 'carbs': 24.0,
+ 'protein': 6.0,
+ 'sodium': 337.0,
+ 'calcium': 6.0,
+ 'iron': 7.0,
+ 'actions': [{
+ 'name': 'Action 1',
+ 'icon': 'fa fa-user',
+ 'tooltip': 'Manage Users'
+ }, {
+ 'name': 'Action 2',
+ 'icon': 'fa fa-key',
+ 'tooltip': 'Manage Permissions'
+ }, {
+ 'name': 'Action 3',
+ 'tooltip': 'Action 3'
+ }, {
+ 'name': 'Action 4',
+ 'disabled': true,
+ 'tooltip': 'Action 4'
+ }, {
+ 'name': 'Action 5',
+ 'tooltip': 'Action 5'
+ }],
+ }, {
+ 'id': 4,
+ 'name': 'Cupcake',
+ 'type': 'Pastry',
+ 'calories': 305.0,
+ 'fat': 3.7,
+ 'carbs': 67.0,
+ 'protein': 4.3,
+ 'sodium': 413.0,
+ 'calcium': 3.0,
+ 'iron': 8.0,
+ 'actions': [{
+ 'name': 'Action 1',
+ 'icon': 'fa fa-user',
+ 'tooltip': 'Manage Users'
+ }, {
+ 'name': 'Action 2',
+ 'icon': 'fa fa-key',
+ 'tooltip': 'Manage Permissions'
+ }, {
+ 'name': 'Action 3',
+ 'tooltip': 'Action 3'
+ }, {
+ 'name': 'Action 4',
+ 'disabled': true,
+ 'tooltip': 'Action 4'
+ }, {
+ 'name': 'Action 5',
+ 'tooltip': 'Action 5'
+ }],
+ }, {
+ 'id': 5,
+ 'name': 'Jelly bean',
+ 'type': 'Candy',
+ 'calories': 375.0,
+ 'fat': 0.0,
+ 'carbs': 94.0,
+ 'protein': 0.0,
+ 'sodium': 50.0,
+ 'calcium': 0.0,
+ 'iron': 0.0,
+ }, {
+ 'id': 6,
+ 'name': 'Lollipop',
+ 'type': 'Candy',
+ 'calories': 392.0,
+ 'fat': 0.2,
+ 'carbs': 98.0,
+ 'protein': 0.0,
+ 'sodium': 38.0,
+ 'calcium': 0.0,
+ 'iron': 2.0,
+ }, {
+ 'id': 7,
+ 'name': 'Honeycomb',
+ 'type': 'Other',
+ 'calories': 408.0,
+ 'fat': 3.2,
+ 'carbs': 87.0,
+ 'protein': 6.5,
+ 'sodium': 562.0,
+ 'calcium': 0.0,
+ 'iron': 45.0,
+ }, {
+ 'id': 8,
+ 'name': 'Donut',
+ 'type': 'Pastry',
+ 'calories': 452.0,
+ 'fat': 25.0,
+ 'carbs': 51.0,
+ 'protein': 4.9,
+ 'sodium': 326.0,
+ 'calcium': 2.0,
+ 'iron': 22.0,
+ }, {
+ 'id': 9,
+ 'name': 'KitKat',
+ 'type': 'Candy',
+ 'calories': 518.0,
+ 'fat': 26.0,
+ 'carbs': 65.0,
+ 'protein': 7.0,
+ 'sodium': 54.0,
+ 'calcium': 12.0,
+ 'iron': 6.0,
+ }, {
+ 'id': 10,
+ 'name': 'Chocolate',
+ 'type': 'Candy',
+ 'calories': 518.0,
+ 'fat': 26.0,
+ 'carbs': 65.0,
+ 'protein': 7.0,
+ 'sodium': 54.0,
+ 'calcium': 12.0,
+ 'iron': 6.0,
+ }, {
+ 'id': 11,
+ 'name': 'Chamoy',
+ 'type': 'Candy',
+ 'calories': 518.0,
+ 'fat': 26.0,
+ 'carbs': 65.0,
+ 'protein': 7.0,
+ 'sodium': 54.0,
+ 'calcium': 12.0,
+ 'iron': 6.0,
+ },];
+
+ this.filteredData = this.data;
+ this.filteredTotal = this.data.length;
+
+ this.columns = [
+ {name: 'comments', label: 'Comments', width: 10},
+ {name: 'name', label: 'Dessert (100g serving)', sortable: true, width:
10},
+ {name: 'type', label: 'Type', sortable: true, width: 10},
+ {name: 'calories', label: 'Calories', numeric: true, format:
NUMBER_FORMAT, sortable: true, width: 10},
+ {name: 'fat', label: 'Fat (g)', numeric: true, format: DECIMAL_FORMAT,
sortable: true, width: 10},
+ {name: 'carbs', label: 'Carbs (g)', numeric: true, format:
NUMBER_FORMAT, sortable: true, width: 10},
+ {name: 'protein', label: 'Protein (g)', numeric: true, format:
DECIMAL_FORMAT, sortable: true, width: 10},
+ {name: 'sodium', label: 'Sodium (mg)', numeric: true, format:
NUMBER_FORMAT, sortable: true, width: 10},
+ {name: 'calcium', label: 'Calcium (%)', numeric: true, format:
NUMBER_FORMAT, sortable: true, width: 10},
+ {name: 'iron', label: 'Iron (%)', numeric: true, format:
NUMBER_FORMAT, width: 10},
+ ];
+
+ this.allRowsSelected = false;
+ this.autoCompleteData = [];
+ this.selectedRows = [];
+
+ this.searchTerm = [];
+ this.fromRow = 1;
+ this.currentPage = 1;
+ this.pageSize = 5;
+ this.pageCount = 0;
+
+ //</editor-fold>
+
+ //<editor-fold desc="Chips $ Autocomplete">
+
+ this.readOnly = false;
+
+ this.items = [
+ 'stepper',
+ 'expansion-panel',
+ 'markdown',
+ 'highlight',
+ 'loading',
+ 'media',
+ 'chips',
+ 'http',
+ 'json-formatter',
+ 'pipes',
+ 'need more?',
+ ];
+
+ this.itemsRequireMatch = this.items.slice(0, 6);
+
+ //</editor-fold>
+
+ //<editor-fold desc="Radios">
+
+ this.favoriteSeason = 'Autumn';
+
+ this.seasonOptions = [
+ 'Winter',
+ 'Spring',
+ 'Summer',
+ 'Autumn',
+ ];
+
+ //</editor-fold>
+
+ //<editor-fold desc="Select">
+
+ this.selectedValue = '';
+
+ this.foods = [
+ {value: 'steak-0', viewValue: 'Steak'},
+ {value: 'pizza-1', viewValue: 'Pizza'},
+ {value: 'tacos-2', viewValue: 'Tacos'},
+ ];
+
+ //</editor-fold>
+
+ //<editor-fold desc="Checkbox">
+
+ this.user = {
+ agreesToTOS: false
+ };
+
+ this.groceries = [{
+ bought: true,
+ name: 'Seitan',
+ }, {
+ bought: false,
+ name: 'Almond Meal Flour',
+ }, {
+ bought: false,
+ name: 'Organic Eggs',
+ },];
+
+ //</editor-fold>
+
+ //<editor-fold desc="Slide Toggle">
+
+ this.systems = [{
+ name: 'Lights',
+ on: false,
+ color: 'primary',
+ }, {
+ name: 'Surround Sound',
+ on: true,
+ color: 'accent',
+ }, {
+ name: 'T.V.',
+ on: true,
+ color: 'warn',
+ },];
+
+ this.house = {
+ lockHouse: false,
+ };
+
+ //</editor-fold>
+};
+
+FdsDemo.prototype = {
+ constructor: FdsDemo,
+
+ //<editor-fold desc="Autocomplete">
+
+ displayFn: function (value) {
+ return value && typeof value === 'object' ? value.name : value;
+ },
+
+ filterStates: function (val) {
+ return val ? this.states.filter(function (s) {
+ return s.name.match(new RegExp(val, 'gi'));
+ }) : this.states;
+ },
+
+ //</editor-fold>
+
+ //<editor-fold desc="Snack Bars">
+
+ showSuccessSnackBar: function () {
+ var snackBarRef = this.snackBarService.openCoaster({
+ title: 'Success',
+ message: 'Some help text regarding the successful event.',
+ verticalPosition: 'top',
+ horizontalPosition: 'right',
+ icon: 'fa fa-check-circle-o',
+ color: '#1EB475',
+ duration: 3000
+ });
+ },
+
+ showWarnSnackBar: function () {
+ var snackBarRef = this.snackBarService.openCoaster({
+ title: 'Warning',
+ message: 'Some help text regarding the warning.',
+ verticalPosition: 'top',
+ horizontalPosition: 'left',
+ icon: 'fa fa-exclamation-triangle',
+ color: '#E98A40',
+ duration: 3000
+ });
+ },
+
+ showErrorSnackBar: function () {
+ var snackBarRef = this.snackBarService.openCoaster({
+ title: 'Error',
+ message: 'Some help text regarding the critical error. This
coaster will stay open until closed with the `x` or if another coaster is
created.',
+ verticalPosition: 'bottom',
+ horizontalPosition: 'right',
+ icon: 'fa fa-times-circle-o',
+ color: '#EF6162'
+ });
+ },
+
+ showRegularSnackBar: function () {
+ var snackBarRef = this.snackBarService.openCoaster({
+ title: 'Regular',
+ message: 'Something interesting.',
+ verticalPosition: 'bottom',
+ horizontalPosition: 'left',
+ color: '#808793',
+ duration: 3000
+ });
+ },
+
+ //</editor-fold>
+
+ //<editor-fold desc="Dialog">
+
+ openDialog: function () {
+ this.dialog.open(FdsDemoDialog);
+ },
+
+ //</editor-fold>
+
+ //<editor-fold desc="Expansion Panel">
+
+ toggleExpansion1: function () {
+ if (!this.disabled) {
+ this.expansion1 = !this.expansion1;
+ }
+ },
+
+ toggleDisabled: function () {
+ this.disabled = !this.disabled;
+ },
+
+ expandExpansion1Event: function () {
+ this.expandCollapseExpansion1Msg = 'Expand event emitted.';
+ },
+
+ collapseExpansion1Event: function () {
+ this.expandCollapseExpansion1Msg = 'Collapse event emitted.';
+ },
+
+ //</editor-fold>
+
+ //<editor-fold desc="Simple Dialogs">
+
+ openAlert: function () {
+ this.dialogService.openAlert({
+ title: 'Alert',
+ disableClose: true,
+ message: 'This is how simple it is to create an alert with this
wrapper service.',
+ });
+ },
+
+ openConfirm: function () {
+ this.dialogService.openConfirm({
+ title: 'Confirm',
+ message: 'This is how simple it is to create a confirm with this
wrapper service. Do you agree?',
+ cancelButton: 'Disagree',
+ acceptButton: 'Agree',
+ });
+ },
+
+ openPrompt: function () {
+ this.dialogService.openPrompt({
+ title: 'Prompt',
+ message: 'This is how simple it is to create a prompt with this
wrapper service. Prompt something.',
+ value: 'Populated value',
+ cancelButton: 'Cancel',
+ acceptButton: 'Ok',
+ });
+ },
+
+ //</editor-fold>
+
+ //<editor-fold desc="Searchable Expansion Panels">
+
+ isDropletFilterChecked: function (term) {
+ return (this.dropletsSearchTerms.indexOf(term) > -1);
+ },
+
+ getDropletTypeCount: function (type) {
+ return this.filteredDroplets.filter(function (droplet) {
+ return droplet.type === type;
+ }).length;
+ },
+
+ getDropletCertificationCount: function (certification) {
+ return this.filteredDroplets.filter(function (droplet) {
+ return Object.keys(droplet).find(function (key) {
+ if (key === certification && droplet[certification].type ===
'certification') {
+ return droplet;
+ }
+ });
+ }).length;
+ },
+
+ getSortBy: function () {
+ var sortByColumnLabel;
+ var arrayLength = this.dropletColumns.length;
+ for (var i = 0; i < arrayLength; i++) {
+ if (this.dropletColumns[i].active === true) {
+ sortByColumnLabel = this.dropletColumns[i].label;
+ break;
+ }
+ }
+ return sortByColumnLabel;
+ },
+
+ sortDroplets: function (column) {
+ if (column.sortable === true) {
+ // toggle column sort order
+ var sortOrder = column.sortOrder = (column.sortOrder === 'ASC') ?
'DESC' : 'ASC';
+ this.filterDroplets(column.name, sortOrder);
+ //only one column can be actively sorted so we reset all to
inactive
+ this.dropletColumns.forEach(function (c) {
+ c.active = false;
+ });
+ //and set this column as the actively sorted column
+ column.active = true;
+ this.activeDropletColumn = column;
+ }
+ },
+
+ toggleDropletsFilter: function (searchTerm) {
+ var applySearchTerm = true;
+ // check if the search term is already applied and remove it if true
+ if (this.dropletsSearchTerms.length > 0) {
+ var arrayLength = this.dropletsSearchTerms.length;
+ for (var i = 0; i < arrayLength; i++) {
+ var index = this.dropletsSearchTerms.indexOf(searchTerm);
+ if (index > -1) {
+ this.dropletsSearchTerms.splice(index, 1);
+ applySearchTerm = false;
+ }
+ }
+ }
+
+ // if we just removed the search term do NOT apply it again
+ if (applySearchTerm) {
+ this.dropletsSearchTerms.push(searchTerm);
+ }
+
+ this.filterDroplets(this.activeDropletColumn.name,
this.activeDropletColumn.sortOrder);
+ },
+
+ filterDroplets: function (sortBy, sortOrder) {
+ // if `sortOrder` is `undefined` then use 'ASC'
+ if (sortOrder === undefined) {
+ sortOrder = 'ASC'
+ }
+ // if `sortBy` is `undefined` then find the first sortable column in
this.dropletColumns
+ if (sortBy === undefined) {
+ var arrayLength = this.dropletColumns.length;
+ for (var i = 0; i < arrayLength; i++) {
+ if (this.dropletColumns[i].sortable === true) {
+ sortBy = this.dropletColumns[i].name;
+ this.activeDropletColumn = this.dropletColumns[i];
+ //only one column can be actively sorted so we reset all
to inactive
+ this.dropletColumns.forEach(function (c) {
+ c.active = false;
+ });
+ //and set this column as the actively sorted column
+ this.dropletColumns[i].active = true;
+ this.dropletColumns[i].sortOrder = sortOrder;
+ break;
+ }
+ }
+ }
+
+ var newData = this.droplets;
+
+ for (var i = 0; i < this.dropletsSearchTerms.length; i++) {
+ newData = this.filterData(newData, this.dropletsSearchTerms[i],
true, this.activeDropletColumn.name);
+ }
+
+ newData = this.dataTableService.sortData(newData, sortBy, sortOrder);
+ this.filteredDroplets = newData;
+ this.getAutoCompleteDroplets();
+ },
+
+ getAutoCompleteDroplets: function () {
+ var self = this;
+ this.autoCompleteDroplets = [];
+ this.dropletColumns.forEach(function (c) {
+ self.filteredDroplets.forEach(function (r) {
+ (r[c.name.toLowerCase()]) ?
self.autoCompleteDroplets.push(r[c.name.toLowerCase()].toString()) : '';
+ });
+ });
+ },
+
+ //</editor-fold>
+
+ filterData: function (data, searchTerm, ignoreCase) {
+ var field = '';
+ if (searchTerm.indexOf(":") > -1) {
+ field = searchTerm.split(':')[0].trim();
+ searchTerm = searchTerm.split(':')[1].trim();
+ }
+ var filter = searchTerm ? (ignoreCase ? searchTerm.toLowerCase() :
searchTerm) : '';
+
+ if (filter) {
+ data = data.filter(function (item) {
+ var res = Object.keys(item).find(function (key) {
+ if (field.indexOf(".") > -1) {
+ var objArray = field.split(".");
+ var obj = item;
+ var arrayLength = objArray.length;
+ for (var i = 0; i < arrayLength; i++) {
+ try {
+ obj = obj[objArray[i]];
+ } catch (e) {
+ return false;
+ }
+ }
+ var preItemValue = ('' + obj);
+ var itemValue = ignoreCase ?
preItemValue.toLowerCase() : preItemValue;
+ return itemValue.indexOf(filter) > -1;
+ } else {
+ if (key !== field && field !== '') {
+ return false;
+ }
+ var preItemValue = ('' + item[key]);
+ var itemValue = ignoreCase ?
preItemValue.toLowerCase() : preItemValue;
+ return itemValue.indexOf(filter) > -1;
+ }
+ });
+ return !(typeof res === 'undefined');
+ });
+ }
+ return data;
+ },
+
+ //<editor-fold desc="Data Tables">
+
+ sort: function (sortEvent, column) {
+ if (column.sortable) {
+ var sortBy = column.name;
+ var sortOrder = column.sortOrder = (column.sortOrder === 'ASC') ?
'DESC' : 'ASC';
+ this.filter(sortBy, sortOrder);
+
+ //only one column can be actively sorted so we reset all to
inactive
+ this.columns.forEach(function (c) {
+ c.active = false;
+ });
+ //and set this column as the actively sorted column
+ column.active = true;
+ }
+ },
+
+ searchRemove: function (searchTerm) {
+ //only remove the first occurrence of the search term
+ var index = this.searchTerm.indexOf(searchTerm);
+ if (index !== -1) {
+ this.searchTerm.splice(index, 1);
+ }
+ this.fromRow = 1;
+ this.currentPage = 1;
+ this.filter();
+ },
+
+ searchAdd: function (searchTerm) {
+ this.searchTerm.push(searchTerm);
+ this.fromRow = 1;
+ this.currentPage = 1;
+ this.filter();
+ },
+
+ page: function (pagingEvent) {
+ this.fromRow = pagingEvent.fromRow;
+ this.currentPage = pagingEvent.page;
+ this.pageSize = pagingEvent.pageSize;
+ this.allRowsSelected = false;
+ this.filter();
+ },
+
+ filter: function (sortBy, sortOrder) {
+ if (this.allRowsSelected) {
+ this.toggleSelectAll();
+ }
+ this.deselectAll();
+ var newData = this.data;
+
+ for (var i = 0; i < this.searchTerm.length; i++) {
+ newData = this.filterData(newData, this.searchTerm[i], true);
+ }
+ this.filteredTotal = newData.length;
+ newData = this.dataTableService.sortData(newData, sortBy, sortOrder);
+ this.pageCount = newData.length;
+ newData = this.dataTableService.pageData(newData, this.fromRow,
this.currentPage * this.pageSize);
+ this.filteredData = newData;
+ this.getAutoCompleteData();
+ },
+
+ toggleSelect: function (row) {
+ if (this.allFilteredRowsSelected()) {
+ this.allRowsSelected = true;
+ } else {
+ this.allRowsSelected = false;
+ }
+ },
+
+ toggleSelectAll: function () {
+ if (this.allRowsSelected) {
+ this.selectAll();
+ } else {
+ this.deselectAll();
+ }
+ },
+
+ selectAll: function () {
+ this.filteredData.forEach(function (c) {
+ c.checked = true;
+ });
+ },
+
+ deselectAll: function () {
+ this.filteredData.forEach(function (c) {
+ c.checked = false;
+ });
+ },
+
+ allFilteredRowsSelected: function () {
+ var allFilteredRowsSelected = true;
+ this.filteredData.forEach(function (c) {
+ if (c.checked === undefined || c.checked === false) {
+ allFilteredRowsSelected = false;
+ }
+ });
+
+ return allFilteredRowsSelected;
+ },
+
+ areTooltipsOn: function () {
+ return this.columns[0].hasOwnProperty('tooltip');
+ },
+
+ toggleTooltips: function () {
+ if (this.columns[0].tooltip) {
+ this.columns.forEach(function (c) {
+ delete c.tooltip;
+ });
+ } else {
+ this.columns.forEach(function (c) {
+ c.tooltip = 'This is ' + c.label + '!';
+ });
+ }
+ },
+
+ openDataTablePrompt: function (row, name) {
+ this.dialogService.openPrompt({
+ message: 'Enter comment?',
+ value: row[name],
+ }).afterClosed().subscribe(function (value) {
+ if (value !== undefined) {
+ row[name] = value;
+ }
+ })
+ },
+
+ getAutoCompleteData: function () {
+ var self = this;
+ this.autoCompleteData = [];
+ this.columns.forEach(function (c) {
+ self.filteredData.forEach(function (r) {
+ (r[c.name.toLowerCase()]) ?
self.autoCompleteData.push(r[c.name.toLowerCase()].toString()) : '';
+ });
+ });
+ },
+
+ //</editor-fold>
+
+ //<editor-fold desc="Chips $ Autocomplete">
+
+ toggleReadOnly: function () {
+ this.readOnly = !this.readOnly;
+ },
+
+ //</editor-fold>
+
+ //<editor-fold desc="Life Cycle Listeners">
+
+ /**
+ * Initialize the component
+ */
+ ngOnInit: function () {
+ this.filter();
+ this.filterDroplets();
+ },
+
+ /**
+ * Respond after Angular checks the component's views and child views
+ */
+ ngAfterViewChecked: function () {
+ this.fdsService.inProgress = false;
+ }
+
+ //</editor-fold>
+};
+
+FdsDemo.annotations = [
+ new ngCore.Component({
+ template: require('./fds-demo.html!text'),
+ animations: [fdsAnimations.slideInLeftAnimation],
+ host: {
+ '[@routeAnimation]': 'routeAnimation'
+ }
+ })
+];
+
+FdsDemo.parameters = [
+ fdsSnackBarsModule.FdsSnackBarService,
+ FdsService,
+ ngMaterial.MatDialog,
+ covalentCore.TdDataTableService,
+ fdsDialogsModule.FdsDialogService
+];
+
+module.exports = FdsDemo;