Merge pull request #163 from AliceO2Group/feat/expanded-filters

Expanded filters

Author: DdeHoog

lib/database/seeders/20200426144121-users.js

@@ -18,6 +18,11 @@ module.exports = {
             external_id: 123,
             name: 'John Doe',
         },
+        {
+            id: 2,
+            external_id: 456,
+            name: 'Jan Jansen',
+        },
     ]),
 
     down: (queryInterface, _Sequelize) => queryInterface.bulkDelete('users', null, {}),

lib/database/seeders/20200508094502-logs.js

@@ -19,6 +19,7 @@ module.exports = {
             origin: 'human',
             user_id: 1,
             text: 'Power interruption due to unplugged wire.',
+            created_at: new Date('2000-01-02 12:00:00 PM'),
         },
         {
             title: 'Second entry',
@@ -28,6 +29,7 @@ module.exports = {
             text: 'Detected particle ABC123',
             parent_log_id: 1,
             root_log_id: 1,
+            created_at: new Date(),
         },
         {
             title: 'Third entry',
@@ -37,22 +39,25 @@ module.exports = {
             text: 'Cake at the particle accelerator!',
             parent_log_id: 1,
             root_log_id: 1,
+            created_at: new Date(),
         },
         {
             title: 'Fourth entry',
             subtype: 'comment',
             origin: 'human',
-            user_id: 1,
+            user_id: 2,
             text: 'The cake is a lie!',
             parent_log_id: 2,
             root_log_id: 1,
+            created_at: new Date(),
         },
         {
             title: 'Fifth entry',
             subtype: 'run',
             origin: 'process',
-            user_id: 1,
+            user_id: 2,
             text: 'Run #1 stopped',
+            created_at: new Date(),
         },
     ]),
 

lib/database/utilities/QueryBuilder.js

@@ -162,6 +162,30 @@ module.exports = (sequelize) => {
             return this.queryBuilder;
         }
 
+        /**
+         * Sets a substring filter using the provided value.
+         *
+         * @param {symbol} value The required value.
+         * @returns {QueryBuilder} The current QueryBuilder instance.
+         */
+        substring(value) {
+            if (!this.queryBuilder.options.where) {
+                this.queryBuilder.options.where = {};
+            }
+
+            if (this.notFlag) {
+                this.queryBuilder.options.where[this.column] = {
+                    [Op.notLike]: `%${value}%`,
+                };
+            } else {
+                this.queryBuilder.options.where[this.column] = {
+                    [Op.substring]: value,
+                };
+            }
+
+            return this.queryBuilder;
+        }
+
         /**
          * Sets the operation.
          *

lib/domain/dtos/GetAllLogsDto.js

@@ -21,17 +21,28 @@ const customJoi = Joi.extend((joi) => ({
     coerce: (value) => ({ value: value.split ? value.split(',') : value }),
 }));
 
+const CreatedFilterDto = Joi.object({
+    from: Joi.date().max(new Date().setHours(0, 0, 0, 0)),
+    to: Joi.date().max(new Date().setHours(23, 59, 59, 999)).when('from', {
+        is: Joi.exist(),
+        then: Joi.date().min(Joi.ref('from')),
+    }),
+});
+
 const TagFilterDto = Joi.object({
     values: customJoi.stringArray().items(EntityIdDto).single().required(),
     operation: Joi.string().valid('and', 'or').required(),
 });
 
 const FilterDto = Joi.object({
+    title: Joi.string().trim(),
+    author: Joi.string().trim(),
+    created: CreatedFilterDto,
+    tag: TagFilterDto,
     origin: Joi.string()
         .valid('human', 'process'),
     parentLog: EntityIdDto,
     rootLog: EntityIdDto,
-    tag: TagFilterDto,
 });
 
 const SortDto = Joi.object({

lib/public/components/Filters/author.js

@@ -14,9 +14,15 @@
 import { h } from '/js/src/index.js';
 
 /**
- * TODO
- * @return {vnode} TODO
+ * Returns the author filter component
+ * @param {Object} model The global model object
+ * @return {vnode} A text box that lets the user look for logs with a specific author
  */
-const authorFilter = () => h('', 'TODO');
+const authorFilter = (model) => h('input.w-75', {
+    type: 'text',
+    id: 'authorFilterText',
+    value: model.logs.getAuthorFilter(),
+    oninput: (e) => model.logs.setAuthorFilter(e.target.value),
+}, '');
 
 export default authorFilter;

lib/public/components/Filters/created.js

@@ -13,10 +13,37 @@
 
 import { h } from '/js/src/index.js';
 
+let today = new Date();
+today.setMinutes(today.getMinutes() - today.getTimezoneOffset());
+[today] = today.toISOString().split('T');
+
 /**
- * TODO
- * @return {vnode} TODO
+ * Returns the creation date filter components
+ * @param {Object} model The global model object
+ * @return {vnode} Two date selection boxes to control the minimum and maximum creation dates for the log filters
  */
-const createdFilter = () => h('', 'TODO');
+const createdFilter = (model) => {
+    const createdFrom = model.logs.getCreatedFilterFrom();
+    const createdTo = model.logs.getCreatedFilterTo();
+    return h('', [
+        h('.f6', 'From:'),
+        h('input.w-75.mv1', {
+            type: 'date',
+            id: 'createdFilterFrom',
+            max: createdTo || today,
+            value: createdFrom,
+            onchange: (e) => model.logs.setCreatedFilter('createdFilterFrom', e.target.value, e.target.validity.valid),
+        }, ''),
+        h('.f6', 'To:'),
+        h('input.w-75.mv1', {
+            type: 'date',
+            id: 'createdFilterTo',
+            min: createdFrom,
+            max: today,
+            value: createdTo,
+            onchange: (e) => model.logs.setCreatedFilter('createdFilterTo', e.target.value, e.target.validity.valid),
+        }, ''),
+    ]);
+};
 
 export default createdFilter;

lib/public/components/Filters/title.js

@@ -14,9 +14,15 @@
 import { h } from '/js/src/index.js';
 
 /**
- * TODO
- * @return {vnode} TODO
+ * Returns the title filter component
+ * @param {Object} model The global model object
+ * @return {vnode} A text box that allows the user to enter a title substring to match against all logs
  */
-const titleFilter = () => h('', 'TODO');
+const titleFilter = (model) => h('input.w-75', {
+    type: 'text',
+    id: 'titleFilterText',
+    value: model.logs.getTitleFilter(),
+    oninput: (e) => model.logs.setTitleFilter(e.target.value),
+}, '');
 
 export default titleFilter;

lib/public/views/Logs/ActiveColumns/index.js

@@ -13,7 +13,7 @@
 
 import titleFilter from '../../../components/Filters/title.js';
 import authorFilter from '../../../components/Filters/author.js';
-import creationTimeFilter from '../../../components/Filters/created.js';
+import createdFilter from '../../../components/Filters/created.js';
 import tagsFilter from '../../../components/Filters/tags.js';
 
 /**
@@ -32,21 +32,21 @@ const activeColumns = (model) => ({
         visible: true,
         size: 'cell-l',
         expand: true,
-        filter: titleFilter(),
+        filter: titleFilter(model),
     },
     author: {
         name: 'Author',
         visible: true,
         size: 'cell-l',
         format: (author) => author.name,
-        filter: authorFilter(),
+        filter: authorFilter(model),
     },
     createdAt: {
         name: 'Created',
         visible: true,
         size: 'cell-l',
         format: (date) => new Date(date).toLocaleString(),
-        filter: creationTimeFilter(),
+        filter: createdFilter(model),
     },
     tags: {
         name: 'Tags',

lib/public/views/Logs/Logs.js

@@ -29,6 +29,7 @@ export default class Overview extends Observable {
         this.model = model;
 
         this.clearLogs();
+        this.resetFilters(false);
 
         this.createdLog = RemoteData.NotAsked();
         this.title = '';
@@ -55,6 +56,18 @@ export default class Overview extends Observable {
         const params = {
             'page[offset]': offset,
             'page[limit]': this.logsPerPage,
+            ...this.titleFilterText && {
+                'filter[title]': this.titleFilterText,
+            },
+            ...this.authorFilterText && {
+                'filter[author]': this.authorFilterText,
+            },
+            ...this.createdFilterFrom && {
+                'filter[created][from]': new Date(`${this.createdFilterFrom}T00:00:00.000`).getTime(),
+            },
+            ...this.createdFilterTo && {
+                'filter[created][to]': new Date(`${this.createdFilterTo}T23:59:59.999`).getTime(),
+            },
             ...this.tagFilterValues.length > 0 && {
                 'filter[tag][values]': this.tagFilterValues.join(),
                 'filter[tag][operation]': this.tagFilterOperation.toLowerCase(),
@@ -262,6 +275,78 @@ export default class Overview extends Observable {
         return this.expandedFilters.includes(targetKey);
     }
 
+    /**
+     * Returns the current title substring filter
+     * @returns {String} The current title substring filter
+     */
+    getTitleFilter() {
+        return this.titleFilterText;
+    }
+
+    /**
+     * Sets the title substring filter if no new inputs were detected for 200 milliseconds
+     * @param {String} newTitle The title substring to apply to the filter
+     * @returns {undefined}
+     */
+    setTitleFilter(newTitle) {
+        clearTimeout(this.titleFilterDebounce);
+        this.titleFilterDebounce = setTimeout(() => {
+            this.titleFilterText = newTitle.trim();
+            this.fetchAllLogs();
+        }, 200);
+    }
+
+    /**
+     * Returns the current author substring filter
+     * @returns {String} The current author substring filter
+     */
+    getAuthorFilter() {
+        return this.authorFilterText;
+    }
+
+    /**
+     * Sets the author substring filter if no new inputs were detected for 200 milliseconds
+     * @param {String} newAuthor The author substring to apply to the filter
+     * @returns {undefined}
+     */
+    setAuthorFilter(newAuthor) {
+        clearTimeout(this.authorFilterDebounce);
+        this.authorFilterDebounce = setTimeout(() => {
+            this.authorFilterText = newAuthor.trim();
+            this.fetchAllLogs();
+        }, 200);
+    }
+
+    /**
+     * Returns the current minimum creation datetime
+     * @returns {Integer} The current minimum creation datetime
+     */
+    getCreatedFilterFrom() {
+        return this.createdFilterFrom;
+    }
+
+    /**
+     * Returns the current maximum creation datetime
+     * @returns {Integer} The current maximum creation datetime
+     */
+    getCreatedFilterTo() {
+        return this.createdFilterTo;
+    }
+
+    /**
+     * Set a datetime for the creation datetime filter
+     * @param {String} key The filter value to apply the datetime to
+     * @param {Object} date The datetime to be applied to the creation datetime filter
+     * @param {Boolean} valid Whether the inserted date passes validity check
+     * @returns {undefined}
+     */
+    setCreatedFilter(key, date, valid) {
+        if (valid) {
+            this[key] = date;
+            this.fetchAllLogs();
+        }
+    }
+
     /**
      * Add a tag to the filter
      * @param {string} tag The tag to be added to the filter criteria
@@ -312,6 +397,30 @@ export default class Overview extends Observable {
         this.notify();
     }
 
+    /**
+     * Returns all filters to their default (empty) values
+     * @param {Boolean} fetch Whether to refetch all logs after filters have been reset
+     * @return {undefined}
+     */
+    resetFilters(fetch = true) {
+        this.titleFilterText = '';
+        this.titleFilterDebounce = null;
+
+        this.authorFilterText = '';
+        this.authorFilterDebounce = null;
+
+        this.createdFilterFrom = null;
+        this.createdFilterTo = null;
+
+        this.tagFilterOperation = 'AND';
+        this.tagFilterValues = [];
+        this.moreTags = false;
+
+        if (fetch) {
+            this.fetchAllLogs();
+        }
+    }
+
     /**
      * Toggles the visibility of the menu within the log amounts dropdown
      * @return {Boolean} The new state of the amounts dropdown
@@ -351,17 +460,13 @@ export default class Overview extends Observable {
     }
 
     /**
-     * Sets all data related to the Logs to `NotAsked`.
+     * Sets all data related to the Logs to `NotAsked` and clears pagination settings.
      * @returns {undefined}
      */
     clearLogs() {
         this.logs = RemoteData.NotAsked();
         this.collapsedColumns = [];
-
         this.expandedFilters = [];
-        this.tagFilterValues = [];
-        this.tagFilterOperation = 'AND';
-        this.moreTags = false;
 
         this.amountDropdownVisible = false;
         this.logsPerPage = 10;