[ORCT-165] Data action buttons

app/lib/server/utilities/filterParser.js

@@ -221,7 +221,7 @@ class TransformHelper {
  * 1 URL search params are:
  *
  *        .../?filter[or][field1][gt]=10&filter[or][field1][lt]=3&filter[or][field1][_goperator]=or
- *            &filter[or][filed2][like]=LHC_%25pass&filter[or][filed2][notLike]=LHC_c%25
+ *            &filter[or][field2][like]=LHC_%25pass&filter[or][field2][notLike]=LHC_c%25
  *            &filter[and][$1][or][f1]=1&filter[and][$1][or][f2]=2&filter[and][$2][or][f3]=3&filter[and][$2][or][f4]=5
  *
  * 2 The url will be parsed by qs in express to:
@@ -234,7 +234,7 @@ class TransformHelper {
  *            "lt": "3",
  *            "_goperator": "or"
  *          },
- *          "filed2": {
+ *          "field2": {
  *            "like": "LHC_%pass",
  *            "notLike": "LHC_c%"
  *          }
@@ -266,7 +266,7 @@ class TransformHelper {
  *               [Symbol(lt)]: '3'
  *             }
  *           },
- *           filed2: {
+ *           field2: {
  *             [Symbol(and)]: {
  *               [Symbol(like)]: 'LHC_%pass',
  *               [Symbol(notLike)]: 'LHC_c%'

app/lib/utils/ResProvider.js

@@ -33,7 +33,7 @@ class ResProvider {
      * @param {Object} objDefinition define mapping of env vars names to local nodejs process names
      * @param {CallableFunction} failurePredicate func(res, objDefinition) that get res - object with read env vars values and objDefinition
      * and examine if combination of read env vars fulfil some requirements - default check if all fildes are set
-     * @param {CallableFunction|String} onFailureAction action on failure - defualt throw error with message about unset fileds
+     * @param {CallableFunction|String} onFailureAction action on failure - defualt throw error with message about unset fields
      * can be string: warn just log warning, error: log error and throw error,
      * @returns {Object} desired env vars stored in object under names defined by mapping
      */

app/public/components/buttons/dataActionButtons.js

@@ -19,14 +19,24 @@ import { modalIds, showModal } from '../../views/modal/modal.js';
 
 export const dataActions = {
     hide: 'Hide',
+    obsoleteHide: 'Hide (obsolete)',
     reload: 'Reload',
     obsoleteDownloadCSV: 'Download CSV (obsolete)',
     downloadCSV: 'Download CSV',
     copyLink: 'Copy link',
     showFilteringPanel: 'Filter',
+    obsoleteShowFilteringPanel: 'Filter (obsolete)',
 };
 
-export default function dataActionButtons(model, applicableDataActions) {
+/**
+ *
+ * @param {DataAccessModel} model data access model (obsolete)
+ * @param {Object} applicableDataActions object
+ * @param {OverviewModel} dataModel - data model (e.g. periodsModel)
+ * @returns {vnode}
+ */
+
+export default function dataActionButtons(model, applicableDataActions, dataModel = null) {
     return h('.btn-group',
         applicableDataActions[dataActions.reload]
             ? h('button.btn.btn-secondary.icon-only-button', {
@@ -57,17 +67,35 @@ export default function dataActionButtons(model, applicableDataActions) {
             ? copyLinkButton(model.router.getUrl().toString())
             : '',
 
-        applicableDataActions[dataActions.hide]
+        applicableDataActions[dataActions.obsoleteHide]
             ? h('button.btn.icon-only-button', {
                 className: model.hideCurrentPageMarkedRows ? 'btn-primary' : 'btn-secondary',
-                onclick: () => model.changeMarkedRowsVisibility(),
+                onclick: () => {
+                    model.changeMarkedRowsVisibility();
+                },
             }, model.hideCurrentPageMarkedRows ? h('.hide-20-off-white.abs-center') : h('.hide-20-primary.abs-center'))
             : '',
 
-        applicableDataActions[dataActions.showFilteringPanel]
+        applicableDataActions[dataActions.hide] && dataModel
+            ? h('button.btn.icon-only-button', {
+                className: dataModel.shouldHideSelectedRows ? 'btn-primary' : 'btn-secondary',
+                onclick: () => {
+                    dataModel.toggleSelectedRowsVisibility();
+                },
+            }, dataModel.shouldHideSelectedRows ? h('.hide-20-off-white.abs-center') : h('.hide-20-primary.abs-center'))
+            : '',
+
+        applicableDataActions[dataActions.obsoleteShowFilteringPanel]
             ? h('button.btn.icon-only-button', {
                 className: model.showFilteringPanel ? 'btn-primary' : 'btn-secondary',
                 onclick: () => model.changeSearchFieldsVisibility(),
             }, model.showFilteringPanel ? h('.slider-20-off-white.abs-center') : h('.slider-20-primary.abs-center'))
+            : '',
+
+        applicableDataActions[dataActions.showFilteringPanel] && dataModel
+            ? h('button.btn.icon-only-button', {
+                className: dataModel.filterPanelVisible ? 'btn-primary' : 'btn-secondary',
+                onclick: () => dataModel.toggleFilterPanelVisibility(),
+            }, dataModel.filterPanelVisible ? h('.slider-20-off-white.abs-center') : h('.slider-20-primary.abs-center'))
             : '');
 }

app/public/components/filter/activeFilters.js

@@ -0,0 +1,51 @@
+/**
+ * @license
+ * Copyright 2019-2020 CERN and copyright holders of ALICE O2.
+ * See http://alice-o2.web.cern.ch/copyright for details of the copyright holders.
+ * All rights not expressly granted are reserved.
+ *
+ * This software is distributed under the terms of the GNU General Public
+ * License v3 (GPL Version 3), copied verbatim in the file "COPYING".
+ *
+ * In applying this license CERN does not waive the privileges and immunities
+ * granted to it by virtue of its status as an Intergovernmental Organization
+ * or submit itself to any jurisdiction.
+ */
+
+import { h } from '/js/src/index.js';
+
+/**
+ * Component responsible for displaying active filters
+ * @param {FilterModel} model model repsonsible for filter management for the current model
+ * @returns {vnode} active filters chips
+ */
+export default function activeFilters(model) {
+    const onClearAll = () => {
+        model.reset();
+    };
+
+    const onClearFilter = (filter) => {
+        model.removeFilter(filter.field, filter.value, filter.type);
+    };
+
+    return [
+        h('.flex-wrap.justify-between.items-center',
+            h('.flex-wrap.justify-between.items-center',
+                h('h5', 'Active filters'),
+                h('button.btn.btn-secondary.font-size-small', {
+                    onclick: () => onClearAll(),
+                }, 'Clear all'))),
+        h('.flex-wrap.items-center.chips',
+            model.filterObjects.map((filter) => [
+                h('.chip.filter-chip.inline',
+                    h('.filter-field.inline', filter.field),
+                    h('.filter-type.inline', filter.type),
+                    h('.filter-input.inline', filter.value),
+                    h('button.btn.icon-only-button.transparent', {
+                        onclick: () => {
+                            onClearFilter(filter);
+                        },
+                    }, h('.close-10-primary'))),
+            ])),
+    ];
+}

app/public/components/filter/filteringPanel.js

@@ -0,0 +1,141 @@
+/* eslint-disable no-console */
+/**
+ * @license
+ * Copyright 2019-2020 CERN and copyright holders of ALICE O2.
+ * See http://alice-o2.web.cern.ch/copyright for details of the copyright holders.
+ * All rights not expressly granted are reserved.
+ *
+ * This software is distributed under the terms of the GNU General Public
+ * License v3 (GPL Version 3), copied verbatim in the file "COPYING".
+ *
+ * In applying this license CERN does not waive the privileges and immunities
+ * granted to it by virtue of its status as an Intergovernmental Organization
+ * or submit itself to any jurisdiction.
+ */
+
+import { h } from '/js/src/index.js';
+import { RCT } from '../../config.js';
+const { filterTypes } = RCT;
+
+/**
+ * Filtering panel
+ * @param {OverviewModel} model model implementing the OverviewModel interface (e.g. PeriodsModel)
+ * @returns {vnode} filter panel
+ */
+export default function filteringPanel(model) {
+    const fieldSelectId = 'filter-field-select';
+    const typeSelectId = 'filter-type-select';
+    const leftInputId = 'filter-left-input';
+    const rightInputId = 'filter-right-input';
+
+    const fields = model.visibleFields;
+    const aggregatedFiltersTypes = `${filterTypes.match}-${filterTypes.exclude}`;
+
+    const onFilteringTypeChange = () => {
+        const filteringTypeSelect = document.getElementById(typeSelectId);
+        const selectedType = filteringTypeSelect.options[filteringTypeSelect.selectedIndex].value;
+        const types = selectedType == filterTypes.between ? ['from', 'to'] : [filterTypes.match, filterTypes.exclude];
+
+        const leftFilterPlaceholder = document.getElementById('left-filter-placeholder');
+        const rightFilterPlaceholder = document.getElementById('right-filter-placeholder');
+        [leftFilterPlaceholder.innerHTML, rightFilterPlaceholder.innerHTML] = types;
+    };
+
+    const clearUserInput = () => {
+        document.getElementById(fieldSelectId).value = '';
+        document.getElementById(typeSelectId).value = '';
+        document.getElementById(leftInputId).value = '';
+        document.getElementById(rightInputId).value = '';
+    };
+
+    const onFilterSubmit = async () => {
+        const fieldNameSelect = document.getElementById(fieldSelectId);
+        const fieldNameValue = fieldNameSelect.options[fieldNameSelect.selectedIndex].value;
+
+        const leftFilterType = document.getElementById('left-filter-placeholder').innerHTML;
+        const rightFilterType = document.getElementById('right-filter-placeholder').innerHTML;
+
+        const leftFilterInput = document.getElementById(leftInputId).value;
+        const rightFilterInput = document.getElementById(rightInputId).value;
+
+        if (rightFilterInput) {
+            model.filtering.addFilter(fieldNameValue, rightFilterInput, rightFilterType);
+        }
+
+        if (leftFilterInput) {
+            model.filtering.addFilter(fieldNameValue, leftFilterInput, leftFilterType);
+        }
+
+        clearUserInput();
+    };
+
+    const fieldSelect = h('select.select', {
+        id: fieldSelectId,
+        name: 'showOptions' }, [
+        h('option', {
+            value: '',
+            selected: true,
+            disabled: true,
+            hidden: true,
+        }, 'Field'),
+        fields.map((field) => h('option', { value: field.name }, field.fieldName)),
+    ], h('.close-10-primary'));
+
+    const typeSelect = h('select.select', {
+        id: typeSelectId,
+        name: 'showOptions',
+        onchange: () => onFilteringTypeChange(),
+    }, [
+        h('option', { value: '', selected: true, disabled: true, hidden: true }, 'Filtering type'),
+        h('option', { value: aggregatedFiltersTypes }, aggregatedFiltersTypes),
+        h('option', { value: filterTypes.between }, filterTypes.between),
+    ], h('.close-10-primary'));
+
+    const leftInput = h('.text-field',
+        h('input.form-control.relative', {
+            style: 'width:120px',
+            type: 'text',
+            value: document.getElementById(typeSelectId)?.options[Selection.selectedIndex]?.value,
+            disabled: false,
+            id: leftInputId,
+            required: true,
+        }),
+        h('span.placeholder', { id: 'left-filter-placeholder' }, 'match/from'));
+
+    const rightInput = h('.text-field',
+        h('input.form-control.relative', {
+            style: 'width:120px',
+            type: 'text',
+            value: '',
+            disabled: false,
+            id: rightInputId,
+            required: true,
+        }),
+        h('span.placeholder', { id: 'right-filter-placeholder' }, 'to/exclude'));
+
+    const submitFilterButton = h('button.btn.btn-primary', {
+        onclick: () => onFilterSubmit(),
+    }, 'Filter');
+
+    const saveFilterButton = h('button.btn.btn-secondary.icon-only-button', {
+        disabled: true,
+    }, h('.save-20-primary'));
+
+    return h('.font-size-small', [
+        h('.flex-wrap.justify-between.items-center',
+            h('.flex-wrap.justify-between.items-center',
+                h('h5', 'Filter data'),
+                h('button.btn.btn-secondary', {
+                    onclick: () => {},
+                }, 'Use defined filters'))),
+        h('.flex-wrap.justify-between.items-center',
+            h('.flex-wrap.justify-between.items-center',
+                fieldSelect,
+                typeSelect,
+                leftInput,
+                rightInput,
+
+                submitFilterButton,
+                saveFilterButton)),
+    ]);
+}

app/public/model/OverviewModel.js

@@ -19,4 +19,10 @@
 
 /**
  * @property {PaginationModel} OverviewModel#pagination pagination model of the overview
+ * @property {RemoteData} currentPageData
+ * @property {*} fields
+ * @property {*} visibleFields
+ * @property {Boolean} shouldHideSelectedRows
+ * @function fetchCurrentPageData
+ * @function createDataExport
  */

app/public/model/filtering/FilterModel.js

@@ -0,0 +1,88 @@
+/**
+ * @license
+ * Copyright 2019-2020 CERN and copyright holders of ALICE O2.
+ * See http://alice-o2.web.cern.ch/copyright for details of the copyright holders.
+ * All rights not expressly granted are reserved.
+ *
+ * This software is distributed under the terms of the GNU General Public
+ * License v3 (GPL Version 3), copied verbatim in the file "COPYING".
+ *
+ * In applying this license CERN does not waive the privileges and immunities
+ * granted to it by virtue of its status as an Intergovernmental Organization
+ * or submit itself to any jurisdiction.
+ */
+
+import { Observable } from '/js/src/index.js';
+
+/**
+ * Class for managing the filters on a general level
+ */
+export default class FilterModel extends Observable {
+    constructor() {
+        super();
+        this._activeFilters = {};
+    }
+
+    reset() {
+        this._activeFilters = {};
+        this.notify();
+    }
+
+    resetFilterValue(field, type) {
+        this._activeFilters[field][type] = [];
+    }
+
+    resetObjectStructure(field, type) {
+        if (! Object.prototype.hasOwnProperty.call(this._activeFilters, field)) {
+            this._activeFilters[field] = {
+                [type]: [],
+            };
+        }
+        if (! Object.prototype.hasOwnProperty.call(this._activeFilters[field], type)) {
+            this.resetFilterValue(field, type);
+        }
+    }
+
+    addFilter(field, value, type) {
+        this.resetObjectStructure(field, type);
+        if (['from', 'to'].includes(type)) {
+            this.resetFilterValue(field, type);
+        }
+        this._activeFilters[field][type].push(value);
+        this.notify();
+    }
+
+    removeFilter(field, value, type) {
+        this._activeFilters[field][type] = this._activeFilters[field][type].filter((element) => element !== value);
+        this.notify();
+    }
+
+    buildOperatorPhrase(filterType, value) {
+        switch (filterType) {
+            case 'match': return `[or][like]=%${value}%`;
+            case 'exclude': return `[and][notLike]=%${value}%`;
+            case 'from': return `[gte]=${value}`;
+            case 'to': return `[lte]=${value}`;
+            default: return `=${value}`;
+        }
+    }
+
+    get filterObjects() {
+        return Object.entries(this._activeFilters)
+            .map(([field, typeToValues]) =>
+                Object.entries(typeToValues)
+                    .map(([type, values]) => values.map((value) => ({ field, type, value })))).flat(2);
+    }
+
+    isAnyFilterActive() {
+        return Object.keys(this._activeFilters).length > 0;
+    }
+
+    buildSingleFilterPhrase(field, type, value) {
+        return `filter[${field}]${this.buildOperatorPhrase(type, value)}`;
+    }
+
+    buildFilterPhrase() {
+        return this.filterObjects.map(({ field, type, value }) => this.buildSingleFilterPhrase(field, type, value)).join('&');
+    }
+}