[OGUI-1760] Update search UI for object path and add filters

.vscode/launch.json

@@ -18,6 +18,19 @@
             "windows": {
                 "localRoot": "${workspaceFolder}\\InfoLogger\\"
             }
+        },
+        {
+            "name": "Launch firefox",
+            "type": "firefox",
+            "request": "attach",
+            "url": "http://localhost:8080/",
+            "webRoot": "${workspaceFolder}",
+            "pathMappings": [
+                {
+                    "url": "http://localhost:8080/",
+                    "path": "${workspaceFolder}/QualityControl/public/"
+                }
+            ]
         }
     ]
 }

QualityControl/public/common/header.js

@@ -44,9 +44,9 @@ export default (model) => h('.flex-col', [
  * @returns {vnode} - virtual node element
  */
 const headerSpecific = (model) => {
-  const { layoutListModel, filterModel, layout, object, page } = model;
+  const { filterModel, layout, object, page } = model;
   switch (page) {
-    case 'layoutList': return LayoutListHeader(layoutListModel);
+    case 'layoutList': return LayoutListHeader();
     case 'layoutShow': return layoutViewHeader(layout, filterModel);
     case 'objectTree': return objectTreeHeader(object, filterModel);
     case 'objectView': return objectViewHeader(model);

QualityControl/public/pages/layoutListView/FilterTypes.js

@@ -0,0 +1,75 @@
+/**
+ * @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.
+ */
+
+/**
+ * @typedef {object} Filter
+ * @property {string} key - searchable key of the filter.
+ * @property {function(): (string)} friendlyName - friendly name of the filter else key.
+ * @property {function(): (string)} inputPlaceholder - Input element's placeholder, use examples of filter.
+ * @property {function(): (boolean)} isActive - has the filter any active value('s)
+ * @property {function(): (string|string[]|null)} getValue - gets the current value('s) of the filter
+ * @property {function(string): void} set - set value of the filter
+ * @property {Function} reset - reset filter to default state
+ */
+
+/**
+ * creates a key-value filter.
+ * @param {string} key - key used to save and retrieve value.
+ * @param {string|null} friendlyName - friendly name of the filter.
+ * @param {string|null} inputPlaceholder - input placeholder text.
+ * @param {string} value - value associated with key.
+ * @returns {Filter} key-value filter object.
+ */
+export function createKeyValueFilter(key, friendlyName = null, inputPlaceholder = null, value = '') {
+  return {
+    key,
+    friendlyName: () => friendlyName ? friendlyName : key,
+    inputPlaceholder: () => inputPlaceholder ? inputPlaceholder : 'Conditions',
+    getValue: () => value ? value : null,
+    // trim checks if value is a string value, test this
+    isActive: () => Boolean(value && value.trim()),
+    set: (v) => {
+      value = v;
+    },
+    reset: () => {
+      value = '';
+    },
+  };
+}
+
+/**
+ * Creates a multiple value filter, key with array value.
+ * Not used in the code yet but serves as an example.
+ * @param {string} key - key used to save and retrieve value.
+ * @param {string|null} friendlyName - friendly name of the filter.
+ * @param {string|null} inputPlaceholder - input placeholder text.
+ * @param {Array<string>} value - values (array) associated with key.
+ * @returns {Filter} multiple value filter, key with array with values.
+ */
+export function createMultiValueFilter(key, friendlyName = null, inputPlaceholder = null, value = []) {
+  let values = Array.isArray(value) ? value : [];
+  return {
+    key,
+    friendlyName: () => friendlyName ? friendlyName : key,
+    inputPlaceholder: () => inputPlaceholder ? inputPlaceholder : 'Conditions',
+    getValue: () => values,
+    isActive: () => values.length > 0,
+    set: (arr) => {
+      values = Array.isArray(arr) ? arr : [];
+    },
+    reset: () => {
+      values = [];
+    },
+  };
+}

QualityControl/public/pages/layoutListView/LayoutListPage.js

@@ -14,14 +14,42 @@
 
 import FolderComponent from '../../folder/view/FolderComponent.js';
 import { h } from '/js/src/index.js';
+import { filtersPanelPopover } from './filtersPanelPopover.js';
 
 /**
  * Shows a list of layouts grouped by user and more
- * @param {Array<FolderModel>} folderModels - LayoutListModel.folders: The Folders used by LayoutListModel
+ * @param {LayoutListModel} layoutListModel - LayoutListModel which contains the folders and searchfiltermodel.
  * @returns {vnode} - virtual node element
+ * @import LayoutListModel from './model/LayoutListModel.js';
  */
-export default function (folderModels) {
-  return h('.scroll-y.absolute-fill', {
-    style: 'display: flex; flex-direction: column',
-  }, Array.from(folderModels.values()).map(FolderComponent));
-}
+export default (layoutListModel) => [
+  h('.scroll-y.absolute-fill', [
+    h(
+      '.flex-row.text-right.m2',
+      [
+        filtersPanelPopover(layoutListModel.searchFilterModel),
+        h(
+          'input.form-control.form-inline.mh1.w-33',
+          {
+            placeholder: 'Layout name',
+            type: 'text',
+            value: layoutListModel.searchFilterModel.searchInput,
+            oninput: (e) => {
+              layoutListModel.search(e.target.value);
+            },
+          },
+        ),
+        h('.p1', [
+          h(
+            '.mh1',
+            layoutListModel.searchFilterModel.stringifyActiveFiltersFriendly(),
+          ),
+        ]),
+      ],
+    ),
+
+    h('', {
+      style: 'display: flex; flex-direction: column',
+    }, Array.from(layoutListModel.folders.values()).map(FolderComponent)),
+  ]),
+];

QualityControl/public/pages/layoutListView/components/LayoutListHeader.js

@@ -15,18 +15,10 @@
 import { h } from '/js/src/index.js';
 
 /**
- * Shows header of list of layouts with one search input to filter them
- * @param {LayoutListModel} layoutListModel - The model handeling the state of the LayoutListPage
+ * Shows header of list of layouts.
  * @returns {vnode} - virtual node element
  */
-export default (layoutListModel) => [
+export default () => [
   h('.w-50.text-center', [h('b.f4', 'Layouts')]),
-  h('.flex-grow.text-right', [
-    h('input.form-control.form-inline.mh1.w-33', {
-      placeholder: 'Search',
-      type: 'text',
-      value: layoutListModel.searchInput,
-      oninput: (e) => layoutListModel.search(e.target.value),
-    }),
-  ]),
+  h('.flex-grow.text-right'),
 ];

QualityControl/public/pages/layoutListView/filtersPanelPopover.js

@@ -0,0 +1,92 @@
+/**
+ * @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.
+ */
+
+// Adopted from Bookkeeping/lib/public/components/Filters/common/filtersPanelPopover.js
+import { h, popover, PopoverAnchors, PopoverTriggerPreConfiguration } from '/js/src/index.js';
+// import { tooltip } from '../../common/popover/tooltip.js';
+
+/**
+ * imports for JSDoc + VSCode navigation:
+ * @import SearchFilterModel from './model/SearchFilterModel.js';
+ */
+
+/**
+ * Return the filters panel popover trigger
+ * @returns {Component} the button component
+ */
+const filtersToggleTrigger = () => h('button#openFilterToggle.btn.btn.btn-primary', 'Filters');
+
+/**
+ * Create main header of the filters panel
+ * @param {SearchFilterModel} searchFilterModel {@link SearchFilterModel} filtering model.
+ * @returns {Component} main panel header.
+ */
+const filtersToggleContentHeader = (searchFilterModel) => h('.flex-row.justify-between', [
+  h('.f4', 'Filters'),
+  h(
+    'button#reset-filters.btn.btn-danger',
+    {
+      onclick: () => {
+        searchFilterModel.resetAll();
+      },
+      disabled: searchFilterModel.allInActive() ? true : false,
+    },
+    'Reset all filters',
+  ),
+]);
+
+/**
+ * Return the filters panel popover content section
+ * @param {SearchFilterModel} searchFilterModel the searchFilter model
+ * @returns {Component} the filters section
+ */
+export const filtersSection = (searchFilterModel = {}) => [
+  searchFilterModel.getAll().flatMap((filter) => [
+    h('.flex-row.g2', [
+      h('.w-30.f5.flex-row.items-center.g2', [filter.friendlyName()]),
+      h('.w-70', [
+        h('input.form-control.w-100', {
+          placeholder: filter.inputPlaceholder(),
+          type: 'text',
+          value: filter.getValue(),
+          onchange: (e) => searchFilterModel.setValue(filter.key, e.target.value),
+        }),
+      ]),
+    ]),
+  ]),
+];
+
+/**
+ * Return the filters panel popover content (i.e. the actual filters)
+ * @param {SearchFilterModel} searchFilterModel the filtering model
+ * @returns {Component} the filters panel
+ */
+const filtersToggleContent = (searchFilterModel) => h('.w-l.flex-column.p3.g3', [
+  filtersToggleContentHeader(searchFilterModel),
+  filtersSection(searchFilterModel),
+]);
+
+/**
+ * Return component composed of the filtering popover and its button trigger
+ * @param {SearchFilterModel} searchFilterModel the filtering model
+ * @returns {Component} the filter component
+ */
+export const filtersPanelPopover = (searchFilterModel) => popover(
+  filtersToggleTrigger(),
+  filtersToggleContent(searchFilterModel),
+  {
+    ...PopoverTriggerPreConfiguration.click,
+    anchor: PopoverAnchors.RIGHT_START,
+  },
+);

QualityControl/public/pages/layoutListView/model/LayoutListModel.js

@@ -16,6 +16,7 @@ import FolderModel, { FolderType } from '../../../folder/model/FolderModel.js';
 import LayoutCardModel from './LayoutCardModel.js';
 import { BaseViewModel } from '../../../common/abstracts/BaseViewModel.js';
 import { RequestFields } from '../../../common/RequestFields.enum.js';
+import SearchFilterModel from './SearchFilterModel.js';
 
 /**
  * LayoutListModel namespace to control the layoutCards spread between its folders
@@ -28,8 +29,16 @@ export default class LayoutListModel extends BaseViewModel {
   constructor(model) {
     super();
     this.model = model;
-    this._searchInput = '';
     this.folders = new Map();
+    this.searchFilterModel = new SearchFilterModel();
+    this.searchFilterModel.observe(() => {
+      this.notify();
+      if (!this.searchFilterModel.allInActive()) {
+        this.search(undefined, this.searchFilterModel.getAllAsObject());
+      } else {
+        this.search(undefined, undefined);
+      }
+    });
 
     this._initializeFolders();
   }
@@ -64,27 +73,35 @@ export default class LayoutListModel extends BaseViewModel {
    * @returns {string} The trimmed search input
    */
   get searchInput() {
-    return this._searchInput.trim();
+    return this.searchFilterModel.searchInput.trim();
+  }
+
+  set searchInput(value) {
+    this.searchFilterModel.searchInput = value;
   }
 
   /**
    * Set user's input for search and use a fuzzy algo to filter list of layouts.
-   * Fuzzy allows missing chars "aaa" can find "a/a/a" or "aa/a/bbbbb"
-   * @param {string} searchInput - string input from the user to search by
-   * @param {string} objectPath - string input from the user to search layouts by objectPath
-   * @returns {undefined}
+   * Fuzzy allows missing chars "aaa" can find "a/a/a" or "aa/a/bbbbb".
+   * If searchInput and objectPath are not included get all non-filtered layouts.
+   * All params can be undefined if you want all layouts.
+   * @param {string} searchInput - string input from the user to search by.
+   * @param {object} filters - filters object contains all filter key value pairs in one object.
    */
-  search(searchInput, objectPath) {
-    if (objectPath === undefined) {
-      this._searchInput = searchInput;
+  search(searchInput, filters) {
+    if (searchInput === undefined && filters === undefined) {
+      // Get all layouts
+      this.model.services.layout.getLayouts(RequestFields.LAYOUT_CARD, undefined);
+    } else if (filters === undefined) {
+      // Normal offline search
+      this.searchInput = searchInput;
       this.folders.forEach((folder) => {
         folder.searchInput = new RegExp(searchInput, 'i');
       });
       this.notify();
     } else {
-      const layoutService = this.model.services.layout;
-      this._searchInput = objectPath;
-      layoutService.getLayouts(RequestFields.LAYOUT_CARD, { objectPath }, this.model);
+      // online search using filters
+      this.model.services.layout.getLayouts(RequestFields.LAYOUT_CARD, filters);
     }
   }