From e2a2d513ea0e9103dc21629a9a13d529e4d67b76 Mon Sep 17 00:00:00 2001 From: Steven Esser Date: Wed, 11 Jul 2018 17:34:03 -0700 Subject: [PATCH] New filter generation system * "Generate Filters" button added and working * "Clear Filters" button added and working * BarChart Drill-Down Filters now clear sucessfully and work as expected Addresses: #241, #265 Signed-off-by: Steven Esser --- .../js/controllers/aboutCodeClueDataTable.js | 76 ++++++++++++++++--- assets/app/js/renderer.js | 39 ++++++---- 2 files changed, 93 insertions(+), 22 deletions(-) diff --git a/assets/app/js/controllers/aboutCodeClueDataTable.js b/assets/app/js/controllers/aboutCodeClueDataTable.js index 5c0b7a73..7451d990 100644 --- a/assets/app/js/controllers/aboutCodeClueDataTable.js +++ b/assets/app/js/controllers/aboutCodeClueDataTable.js @@ -73,6 +73,10 @@ class AboutCodeClueDataTable extends Controller { // Get the column's filter select box const select = $(`select#clue-${columnName}`); + select.empty().append(``); + + // Add the chart value options and select it. + select.append(``); select.val(value).change(); } @@ -101,6 +105,7 @@ class AboutCodeClueDataTable extends Controller { scrollX: true, scrollResize: true, deferRender: true, + initComplete: () => this._initComplete(), drawCallback: () => this._drawCallback(), buttons: [ { // Do not allow the first column to be hidden @@ -279,30 +284,84 @@ class AboutCodeClueDataTable extends Controller { }); } + _initComplete() { + const pathCol = this.dataTable().columns(0); + + const footer = $(pathCol.footer()); + // keep the buttons horizontally aligned + footer.css('white-space', 'nowrap'); + + const genFiltersButton = $(``); + const clearFiltersButton = $(``); + + footer.append(genFiltersButton); + footer.append(clearFiltersButton); + + this.dataTable().columns().every(function (columnIndex) { + const columnInfo = AboutCodeClueDataTable.TABLE_COLUMNS[columnIndex]; + + if ('skipFilter' in columnInfo && columnInfo.skipFilter) { + return; + } + + const column = this; + const footer = $(column.footer()); + const columnName = columnInfo.name; + + const select = $(``) + .on('change', function () { + const val = $(this).val(); + column + .search(val, false, false) + .draw(); + }); + + footer.append(select); + }); + } + _drawCallback() { $('.dataTables_scrollBody').scrollTop(0); } - setColumnFilters() { + resetColumnFilters() { + $.each(AboutCodeClueDataTable.TABLE_COLUMNS, (i, column) => { + const columnSelect = $(`select#clue-${column.name}`); + columnSelect.empty(); + columnSelect.val(''); + this.dataTable() + .column(`${column.name}:name`) + .search('', false, false); + }); + // clear the global search box + this.dataTable().search('').columns().search('').draw(); + } + + genFilters() { + this.resetColumnFilters(); const that = this; - const pathCol = this.dataTable().columns(0); - // Add a select element to each column's footer this.dataTable().columns().every(function (columnIndex) { const columnInfo = AboutCodeClueDataTable.TABLE_COLUMNS[columnIndex]; + const currentColumn = that.dataTable().columns(columnIndex); if ('skipFilter' in columnInfo && columnInfo.skipFilter) { return; } + // skip columns that are not currently visible + if (currentColumn.visible()[0] === false) { + return; + } + const column = this; const footer = $(column.footer()); const columnName = columnInfo.name; footer.empty(); - const select = $(``) + + const select = $('#clue-' + columnName) .empty() - .appendTo(footer) .on('change', function () { const val = $(this).val(); column @@ -310,11 +369,9 @@ class AboutCodeClueDataTable extends Controller { .draw(); }); - const currPath = pathCol.search()[0]; + const currPath = that._selectedPath; const where = { path: { $like: `${currPath}%`} }; - - where[columnName] = {$ne: null}; - + that.db().sync.then((db) => db.FlatFile.findAll({ attributes: [ Sequelize.fn('TRIM', Sequelize.col(columnName)), @@ -342,6 +399,7 @@ class AboutCodeClueDataTable extends Controller { select.append(``); }); }); + footer.append(select); }); } diff --git a/assets/app/js/renderer.js b/assets/app/js/renderer.js index e477410b..02c959ae 100644 --- a/assets/app/js/renderer.js +++ b/assets/app/js/renderer.js @@ -89,21 +89,19 @@ $(document).ready(() => { const jstree = new AboutCodeJsTree('#jstree', aboutCodeDB) .on('node-edit', (node) => componentDialog.show(node.id)) .on('node-selected', (node) => { - cluesTable.columns(0).search(node.id); - cluesTable.setColumnFilters(); - - // update all views with the new selected path. - componentDialog.selectedPath(node.id); - dejaCodeExportDialog.selectedPath(node.id); - jstree.selectedPath(node.id); - cluesTable.selectedPath(node.id); - componentsTable.selectedPath(node.id); - dashboard.selectedPath(node.id); - barChart.selectedPath(node.id); - - redrawCurrentView(); + updateViewsByPath(node.id); }); + $(document).on('click', '#gen-filters-button', () => { + cluesTable.genFilters(); + updateViewsByPath(cluesTable._selectedPath); + }); + + $(document).on('click', '#clear-filters-button', () => { + cluesTable.resetColumnFilters(); + updateViewsByPath(cluesTable._selectedPath); + }); + const splitter = new Splitter('#leftCol', '#rightCol') .on('drag-end', () => redrawCurrentView()); @@ -164,6 +162,21 @@ $(document).ready(() => { // Opens the dashboard view when the app is first opened showDashboardButton.trigger('click'); + function updateViewsByPath(path) { + // Update all the views with the given path string + cluesTable.columns(0).search(path); + + componentDialog.selectedPath(path); + dejaCodeExportDialog.selectedPath(path); + jstree.selectedPath(path); + cluesTable.selectedPath(path); + componentsTable.selectedPath(path); + dashboard.selectedPath(path); + barChart.selectedPath(path); + + redrawCurrentView(); + } + /** Creates the database and all View objects from a SQLite file */ function loadDatabase(fileName) { // Create a new database when importing a json file