Skip to content

Commit

Permalink
feat: Rebuilt filter components to support multiple filter types thro…
Browse files Browse the repository at this point in the history
…ugh dropdowns
  • Loading branch information
MauritsioRK committed Jul 8, 2020
1 parent 72a9d8b commit d251f5d
Show file tree
Hide file tree
Showing 12 changed files with 310 additions and 123 deletions.
22 changes: 22 additions & 0 deletions lib/public/components/Filters/author.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
/**
* @license
* Copyright CERN and copyright holders of ALICE O2. This software is
* distributed under the terms of the GNU General Public License v3 (GPL
* Version 3), copied verbatim in the file "COPYING".
*
* See http://alice-o2.web.cern.ch/license for full licensing information.
*
* 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';

/**
* TODO
* @return {vnode} TODO
*/
const authorFilter = () => h('', 'TODO');

export default authorFilter;
22 changes: 22 additions & 0 deletions lib/public/components/Filters/creationTime.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
/**
* @license
* Copyright CERN and copyright holders of ALICE O2. This software is
* distributed under the terms of the GNU General Public License v3 (GPL
* Version 3), copied verbatim in the file "COPYING".
*
* See http://alice-o2.web.cern.ch/license for full licensing information.
*
* 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';

/**
* TODO
* @return {vnode} TODO
*/
const creationTimeFilter = () => h('', 'TODO');

export default creationTimeFilter;
91 changes: 22 additions & 69 deletions lib/public/components/Filters/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,80 +12,33 @@
*/

import { h } from '/js/src/index.js';
import { iconMinus, iconPlus } from '/js/src/icons.js';

const FILTERS_LIMIT = 5;

/**
* Radio button to toggle the filter operation
* @param {Object} model Pass the model to access the defined functions
* @return {vnode} Return the form to be shown
*/
const filterOperationRadioButtons = (model) => h('.form-group-header.flex-row', ['AND', 'OR'].map((operation) =>
h('.form-check', {
style: 'margin-right: 0.5rem',
}, [
h('input.form-check-input', {
onclick: () => model.logs.setFilterOperation(operation),
id: `filterOperationRadioButton${operation}`,
checked: operation === model.logs.getFilterOperation(),
type: 'radio',
name: 'operationRadioButtons',
}),
h('label.form-check-label', {
for: `filterOperationRadioButton${operation}`,
}, operation),
])));

/**
* Checkbox filter for a tag
* @param {Object} model Pass the model to access the defined functions
* @param {Array} tags Pass the tags to load in the view
* @return {vnode} Return the form to be shown
*/
const tagCheckboxes = (model, tags) => {
const checkboxes = tags.map((tag, index) => {
const isChecked = model.logs.isTagInFilter(tag.id);
return h('.form-check', [
h('input.form-check-input', {
onclick: () => isChecked ? model.logs.removeFilter(tag.id) : model.logs.addFilter(tag.id),
id: `tagCheckbox${index + 1}`,
type: 'checkbox',
checked: isChecked,
}),
h('label.flex-row.items-center.form-check-label', {
for: `tagCheckbox${index + 1}`,
}, tag.text),
]);
});

if (checkboxes.length <= FILTERS_LIMIT) {
return checkboxes;
} else {
const showMoreFilters = model.logs.shouldShowMoreFilters();
const toggleFilters = h('button.btn.btn-primary.mv1#toggleMoreFilters', {
onclick: () => model.logs.toggleMoreFilters(),
}, ...showMoreFilters ? [iconMinus(), ' Less filters'] : [iconPlus(), ' More filters']);

const slicedCheckboxes = showMoreFilters ? checkboxes : checkboxes.slice(0, FILTERS_LIMIT);
slicedCheckboxes.splice(FILTERS_LIMIT, 0, toggleFilters);

return slicedCheckboxes;
}
};
import { iconChevronBottom, iconChevronRight } from '/js/src/icons.js';

/**
* Render the filters
* @param {Object} model Pass the model to access the defined functions
* @param {Array} tags Pass the tags to load in the view
* @return {vnode} Return final view of the filtering form
* Render a complete filter collection
* @param {Object} model The global model object
* @param {Object} columns The columns representing the table
* @return {vnode} The full collection of filters accessible through dropdowns
*/
const filters = (model, tags) =>
const filters = (model, columns) =>
h('.w-100.shadow-level1.p2', [
h('.f3', 'Filters'),
h('.f4', 'Tags'),
filterOperationRadioButtons(model),
tagCheckboxes(model, tags),
Object.entries(columns).reduce((accumulator, [key, column]) => {
if (column.filter) {
accumulator.push([
h('.flex-row.items-center', {
onclick: () => model.logs.toggleFilterExpanded(key),
id: `${key}FilterToggle`,
style: 'cursor: pointer;',
}, [
h('', model.logs.isFilterExpanded(key) ? iconChevronBottom() : iconChevronRight()),
h('.f4.mh1', column.name),
]),
model.logs.isFilterExpanded(key) && column.filter,
]);
}
return accumulator;
}, []),
]);

export default filters;
22 changes: 22 additions & 0 deletions lib/public/components/Filters/origin.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
/**
* @license
* Copyright CERN and copyright holders of ALICE O2. This software is
* distributed under the terms of the GNU General Public License v3 (GPL
* Version 3), copied verbatim in the file "COPYING".
*
* See http://alice-o2.web.cern.ch/license for full licensing information.
*
* 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';

/**
* TODO
* @return {vnode} TODO
*/
const originFilter = () => h('', 'TODO');

export default originFilter;
22 changes: 22 additions & 0 deletions lib/public/components/Filters/subtype.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
/**
* @license
* Copyright CERN and copyright holders of ALICE O2. This software is
* distributed under the terms of the GNU General Public License v3 (GPL
* Version 3), copied verbatim in the file "COPYING".
*
* See http://alice-o2.web.cern.ch/license for full licensing information.
*
* 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';

/**
* TODO
* @return {vnode} TODO
*/
const subtypeFilter = () => h('', 'TODO');

export default subtypeFilter;
82 changes: 82 additions & 0 deletions lib/public/components/Filters/tags.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
/**
* @license
* Copyright CERN and copyright holders of ALICE O2. This software is
* distributed under the terms of the GNU General Public License v3 (GPL
* Version 3), copied verbatim in the file "COPYING".
*
* See http://alice-o2.web.cern.ch/license for full licensing information.
*
* 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 { iconMinus, iconPlus } from '/js/src/icons.js';

const TAGS_LIMIT = 5;

/**
* Radio button to toggle the filter operation
* @param {Object} model The global model object
* @return {vnode} The filter operation radio button elements
*/
const tagFilterOperationRadioButtons = (model) => h('.form-group-header.flex-row', ['AND', 'OR'].map((operation) =>
h('.form-check', {
style: 'margin-right: 0.5rem',
}, [
h('input.form-check-input', {
onclick: () => model.logs.setTagFilterOperation(operation),
id: `tagFilterOperationRadioButton${operation}`,
checked: operation === model.logs.getTagFilterOperation(),
type: 'radio',
name: 'operationRadioButtons',
}),
h('label.form-check-label', {
for: `tagFilterOperationRadioButton${operation}`,
}, operation),
])));

/**
* Creates checkboxes for the tag filter subcomponent
* @param {Object} model The global model object
* @return {vnode} A collection of checkboxes to toggle table rows by tags
*/
const tagsFilter = (model) => {
const tags = model.tags.getTags().payload;

if (tags) {
const checkboxes = tags.map((tag, index) => {
const isChecked = model.logs.isTagInFilter(tag.id);
return h('.form-check', [
h('input.form-check-input', {
onclick: () => isChecked ? model.logs
.removeTagFromFilter(tag.id) : model.logs.addTagToFilter(tag.id),
id: `tagCheckbox${index + 1}`,
type: 'checkbox',
checked: isChecked,
}),
h('label.flex-row.items-center.form-check-label', {
for: `tagCheckbox${index + 1}`,
}, tag.text),
]);
});

if (checkboxes.length <= TAGS_LIMIT) {
return [tagFilterOperationRadioButtons(model), ...checkboxes];
} else {
const showMoreFilters = model.logs.shouldShowMoreTags();
const toggleFilters = h('button.btn.btn-primary.mv1#toggleMoreTags', {
onclick: () => model.logs.toggleMoreTags(),
}, ...showMoreFilters ? [iconMinus(), ' Less tags'] : [iconPlus(), ' More tags']);

const slicedCheckboxes = showMoreFilters ? checkboxes : checkboxes.slice(0, TAGS_LIMIT);
slicedCheckboxes.splice(TAGS_LIMIT, 0, toggleFilters);

return [tagFilterOperationRadioButtons(model), ...slicedCheckboxes];
}
}
return null;
};

export default tagsFilter;
22 changes: 22 additions & 0 deletions lib/public/components/Filters/title.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
/**
* @license
* Copyright CERN and copyright holders of ALICE O2. This software is
* distributed under the terms of the GNU General Public License v3 (GPL
* Version 3), copied verbatim in the file "COPYING".
*
* See http://alice-o2.web.cern.ch/license for full licensing information.
*
* 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';

/**
* TODO
* @return {vnode} TODO
*/
const titleFilter = () => h('', 'TODO');

export default titleFilter;
2 changes: 1 addition & 1 deletion lib/public/components/Table/content.js
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ const row = (value, text, rowId, model) => {
h(`#${columnId}-${!isExpanded ? 'plus' : 'minus'}.${isExpanded ? 'danger' : 'primary'}`, {
onclick: (e) => {
e.stopPropagation();
model.logs.toggleCollapse(rowId, value.name);
model.logs.toggleColumnCollapse(rowId, value.name);
},
}, isExpanded
? h('.collapse-button', iconMinus())
Expand Down
24 changes: 21 additions & 3 deletions lib/public/views/Logs/ActiveColumns/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,25 @@
* or submit itself to any jurisdiction.
*/

const ACTIVE_COLUMNS = {
import titleFilter from '../../../components/Filters/title.js';
import authorFilter from '../../../components/Filters/author.js';
import creationTimeFilter from '../../../components/Filters/creationTime.js';
import originFilter from '../../../components/Filters/origin.js';
import subtypeFilter from '../../../components/Filters/subtype.js';
import tagsFilter from '../../../components/Filters/tags.js';

/**
* Method to retrieve the list of active columns for a generic table component
* @param {Object} model The global model object
* @return {Object} A collection of columns with parameters for the Log table
*/
const activeColumns = (model) => ({
title: {
name: 'Title',
visible: true,
size: 'cell-l',
expand: true,
filter: titleFilter(),
},
id: {
name: 'Entry ID',
Expand All @@ -29,29 +42,34 @@ const ACTIVE_COLUMNS = {
visible: true,
size: 'cell-l',
format: (author) => author.name,
filter: authorFilter(),
},
createdAt: {
name: 'Creation Time',
visible: true,
size: 'cell-l',
format: (date) => new Date(date).toLocaleString(),
filter: creationTimeFilter(),
},
origin: {
name: 'Origin',
visible: true,
size: 'cell-m',
filter: originFilter(),
},
subtype: {
name: 'Subtype',
visible: true,
size: 'cell-m',
filter: subtypeFilter(),
},
tags: {
name: 'Tags',
visible: true,
size: 'cell-m',
format: (tags) => tags.map(({ text }) => text).join(', '),
filter: tagsFilter(model),
},
};
});

export default ACTIVE_COLUMNS;
export default activeColumns;
Loading

0 comments on commit d251f5d

Please sign in to comment.