diff --git a/lib/public/components/Filters/common/filters/TextTokensFilterModel.js b/lib/public/components/Filters/common/filters/TextTokensFilterModel.js index 60e192febe..ff55b5d4b2 100644 --- a/lib/public/components/Filters/common/filters/TextTokensFilterModel.js +++ b/lib/public/components/Filters/common/filters/TextTokensFilterModel.js @@ -10,8 +10,7 @@ * 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'; -import { FilterModel } from '../FilterModel.js'; +import { RawTextFilterModel } from './RawTextFilterModel.js'; const TOKENS_DELIMITER = ','; @@ -19,52 +18,12 @@ const TOKENS_DELIMITER = ','; * Model which accept string input and treats it as sequence of tokens, which processed in regard to given configuration. @see * TextTokensFilterModel#constructor */ -export class TextTokensFilterModel extends FilterModel { +export class TextTokensFilterModel extends RawTextFilterModel { /** * Constructor */ constructor() { super(); - this._raw = ''; - this._visualChange$ = new Observable(); - } - - /** - * Update value kept by a filter model and inform observers that some change occurred - * @param {string} value value to be stored - * @return {void} - */ - update(value) { - const { _raw: previousRaw } = this; - this._raw = value; - if (previousRaw === value) { - this._visualChange$.notify(); - } else { - this.notify(); - } - } - - /** - * Returns the raw value of the filter - */ - get raw() { - return this._raw; - } - - /** - * Reset the filter to its initial state - * @return {void} - */ - reset() { - this._raw = ''; - } - - /** - * States if the filter has been filled - * @return {boolean} true if the filter is empty - */ - get isEmpty() { - return this._raw.length === 0; } /** @@ -72,7 +31,7 @@ export class TextTokensFilterModel extends FilterModel { * @return {string[]} the normalized value */ get normalized() { - return this._raw + return this._value .split(TOKENS_DELIMITER) .map((token) => token.trim()) .filter((token) => token.length > 0); diff --git a/lib/public/components/Filters/common/filters/textFilter.js b/lib/public/components/Filters/common/filters/textFilter.js deleted file mode 100644 index d6ae0cdfa4..0000000000 --- a/lib/public/components/Filters/common/filters/textFilter.js +++ /dev/null @@ -1,28 +0,0 @@ -/** - * @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'; - -/** - * Returns a text filter component - * - * @param {TextTokensFilterModel} textTokensFilterModel the model of the text filter - * @param {Object} attributes the additional attributes to pass to the component, such as id and classes - * @return {Component} the filter component - */ -export const textFilter = (textTokensFilterModel, attributes) => h('input', { - ...attributes, - type: 'text', - value: textTokensFilterModel.raw, - oninput: (e) => textTokensFilterModel.update(e.target.value), -}, ''); diff --git a/lib/public/views/Logs/ActiveColumns/logsActiveColumns.js b/lib/public/views/Logs/ActiveColumns/logsActiveColumns.js index fd91851980..90b66384f4 100644 --- a/lib/public/views/Logs/ActiveColumns/logsActiveColumns.js +++ b/lib/public/views/Logs/ActiveColumns/logsActiveColumns.js @@ -80,7 +80,7 @@ export const logsActiveColumns = { filteringModel.get('title'), { id: 'titleFilterText', - class: 'w-75 mt1', + classes: ['w-75 mt1'], }, ), balloon: true, diff --git a/lib/public/views/QcFlagTypes/ActiveColumns/qcFlagTypesActiveColumns.js b/lib/public/views/QcFlagTypes/ActiveColumns/qcFlagTypesActiveColumns.js index 7f4ae8aa69..17c96b5a78 100644 --- a/lib/public/views/QcFlagTypes/ActiveColumns/qcFlagTypesActiveColumns.js +++ b/lib/public/views/QcFlagTypes/ActiveColumns/qcFlagTypesActiveColumns.js @@ -13,7 +13,7 @@ import { h } from '/js/src/index.js'; import { formatTimestamp } from '../../../utilities/formatting/formatTimestamp.js'; -import { textFilter } from '../../../components/Filters/common/filters/textFilter.js'; +import { rawTextFilter } from '../../../components/Filters/common/filters/rawTextFilter.js'; import { checkboxes } from '../../../components/Filters/common/filters/checkboxFilter.js'; import { qcFlagTypeColoredBadge } from '../../../components/qcFlags/qcFlagTypeColoredBadge.js'; @@ -30,9 +30,9 @@ export const qcFlagTypesActiveColumns = { name: { name: 'Name', visible: true, - filter: ({ namesFilterModel }) => textFilter( + filter: ({ namesFilterModel }) => rawTextFilter( namesFilterModel, - { class: 'w-75 mt1', placeholder: 'e.g. BadPID, ...' }, + { classes: ['w-75 mt1'], placeholder: 'e.g. BadPID, ...' }, ), classes: 'f6', sortable: true, @@ -43,9 +43,9 @@ export const qcFlagTypesActiveColumns = { name: 'Method', visible: true, sortable: true, - filter: ({ methodsFilterModel }) => textFilter( + filter: ({ methodsFilterModel }) => rawTextFilter( methodsFilterModel, - { class: 'w-75 mt1', placeholder: 'e.g. Bad PID, ...' }, + { classes: ['w-75 mt1'], placeholder: 'e.g. Bad PID, ...' }, ), classes: 'f6', }, diff --git a/lib/public/views/SimulationPasses/ActiveColumns/simulationPassesActiveColumns.js b/lib/public/views/SimulationPasses/ActiveColumns/simulationPassesActiveColumns.js index 05b796bcf8..7540284664 100644 --- a/lib/public/views/SimulationPasses/ActiveColumns/simulationPassesActiveColumns.js +++ b/lib/public/views/SimulationPasses/ActiveColumns/simulationPassesActiveColumns.js @@ -11,13 +11,13 @@ * or submit itself to any jurisdiction. */ -import { textFilter } from '../../../components/Filters/common/filters/textFilter.js'; import { absoluteFrontLink } from '../../../components/common/navigation/absoluteFrontLink.js'; import { frontLink } from '../../../components/common/navigation/frontLink.js'; import { externalLinks } from '../../../components/common/navigation/externalLinks.js'; import { formatItemsCount } from '../../../utilities/formatting/formatItemsCount.js'; import { formatSizeInBytes } from '../../../utilities/formatting/formatSizeInBytes.js'; import { badge } from '../../../components/common/badge.js'; +import { rawTextFilter } from '../../../components/Filters/common/filters/rawTextFilter.js'; /** * List of active columns for a generic simulation passes table @@ -31,9 +31,9 @@ export const simulationPassesActiveColumns = { name: 'Name', visible: true, sortable: true, - filter: ({ namesFilterModel }) => textFilter( + filter: ({ namesFilterModel }) => rawTextFilter( namesFilterModel, - { class: 'w-75 mt1', placeholder: 'e.g. LHC23k5, ...' }, + { classes: ['w-75 mt1'], placeholder: 'e.g. LHC23k5, ...' }, ), classes: 'w-10 f6', }, diff --git a/lib/public/views/lhcPeriods/ActiveColumns/lhcPeriodsActiveColumns.js b/lib/public/views/lhcPeriods/ActiveColumns/lhcPeriodsActiveColumns.js index 6f757e25d0..c7fd504383 100644 --- a/lib/public/views/lhcPeriods/ActiveColumns/lhcPeriodsActiveColumns.js +++ b/lib/public/views/lhcPeriods/ActiveColumns/lhcPeriodsActiveColumns.js @@ -14,10 +14,12 @@ import { h } from '/js/src/index.js'; import { formatDistinctLhcBeamEnergies } from '../format/formatDistinctLhcBeamEnergies.js'; import { formatLhcPeriodYear } from '../format/formatYear.js'; -import { textFilter } from '../../../components/Filters/common/filters/textFilter.js'; +import { rawTextFilter } from '../../../components/Filters/common/filters/rawTextFilter.js'; import { frontLink } from '../../../components/common/navigation/frontLink.js'; import { badge } from '../../../components/common/badge.js'; +const INPUT_CLASSES = ['w-75', 'mt1']; + /** * List of active columns for a generic periods table */ @@ -30,9 +32,9 @@ export const lhcPeriodsActiveColumns = { name: 'Name', visible: true, sortable: true, - filter: ({ namesFilterModel }) => textFilter( + filter: ({ namesFilterModel }) => rawTextFilter( namesFilterModel, - { class: 'w-75 mt1', placeholder: 'e.g. LHC22a, lhc23b, ...' }, + { classes: INPUT_CLASSES, placeholder: 'e.g. LHC22a, lhc23b, ...' }, ), classes: 'w-15', }, @@ -92,9 +94,9 @@ export const lhcPeriodsActiveColumns = { visible: true, sortable: true, format: (_, lhcPeriod) => formatLhcPeriodYear(lhcPeriod.name), - filter: ({ yearsFilterModel }) => textFilter( + filter: ({ yearsFilterModel }) => rawTextFilter( yearsFilterModel, - { class: 'w-75 mt1', placeholder: 'e.g. 2022, 2023, ...' }, + { classes: INPUT_CLASSES, placeholder: 'e.g. 2022, 2023, ...' }, ), classes: 'w-7', }, @@ -104,9 +106,9 @@ export const lhcPeriodsActiveColumns = { visible: true, sortable: true, format: (pdpBeamTypes) => pdpBeamTypes.length > 0 ? pdpBeamTypes.join(',') : '-', - filter: ({ pdpBeamTypesFilterModel }) => textFilter( + filter: ({ pdpBeamTypesFilterModel }) => rawTextFilter( pdpBeamTypesFilterModel, - { class: 'w-75 mt1', placeholder: 'e.g. pp, PbPb' }, + { classes: INPUT_CLASSES, placeholder: 'e.g. pp, PbPb' }, ), classes: 'w-7', }, diff --git a/test/public/lhcPeriods/overview.test.js b/test/public/lhcPeriods/overview.test.js index 13beb52714..b203a1677a 100644 --- a/test/public/lhcPeriods/overview.test.js +++ b/test/public/lhcPeriods/overview.test.js @@ -128,7 +128,7 @@ module.exports = () => { await goToPage(page, 'lhc-period-overview'); await pressElement(page, '#openFilterToggle'); await page.waitForSelector('#reset-filters:disabled'); - await fillInput(page, 'div.flex-row.items-baseline:nth-of-type(1) input[type=text]', 'LHC22a'); + await fillInput(page, 'div.flex-row.items-baseline:nth-of-type(1) input[type=text]', 'LHC22a', ['change']); await expectColumnValues(page, 'name', ['LHC22a']); await pressElement(page, '#reset-filters', true); await expectColumnValues(page, 'name', ['LHC23f', 'LHC22b', 'LHC22a']); @@ -139,7 +139,7 @@ module.exports = () => { await goToPage(page, 'lhc-period-overview'); await pressElement(page, '#openFilterToggle'); await page.waitForSelector('#reset-filters:disabled'); - await fillInput(page, 'div.flex-row.items-baseline:nth-of-type(2) input[type=text]', '2022'); + await fillInput(page, 'div.flex-row.items-baseline:nth-of-type(2) input[type=text]', '2022', ['change']); await page.waitForSelector('#reset-filters:disabled', { hidden: true, timeout: 250 }); await expectColumnValues(page, 'year', ['2022', '2022']); }); @@ -148,7 +148,7 @@ module.exports = () => { await goToPage(page, 'lhc-period-overview'); await pressElement(page, '#openFilterToggle'); await page.waitForSelector('#reset-filters:disabled'); - await fillInput(page, 'div.flex-row.items-baseline:nth-of-type(3) input[type=text]', 'PbPb'); + await fillInput(page, 'div.flex-row.items-baseline:nth-of-type(3) input[type=text]', 'PbPb', ['change']); await page.waitForSelector('#reset-filters:disabled', { hidden: true, timeout: 250 }); await expectColumnValues(page, 'pdpBeamTypes', ['PbPb']); }); diff --git a/test/public/qcFlagTypes/overview.test.js b/test/public/qcFlagTypes/overview.test.js index 0bf4d519cc..a082efb960 100644 --- a/test/public/qcFlagTypes/overview.test.js +++ b/test/public/qcFlagTypes/overview.test.js @@ -94,7 +94,7 @@ module.exports = () => { await waitForTableLength(page, 7); await pressElement(page, '#openFilterToggle'); - await fillInput(page, '.name-filter input[type=text]', 'bad'); + await fillInput(page, '.name-filter input[type=text]', 'bad', ['change']); await checkColumnValuesWithRegex(page, 'name', '[Bb][Aa][Dd]'); await pressElement(page, '#reset-filters', true); @@ -103,7 +103,7 @@ module.exports = () => { it('should successfully apply QC flag type method filter', async () => { await waitForTableLength(page, 7); - await fillInput(page, '.method-filter input[type=text]', 'bad'); + await fillInput(page, '.method-filter input[type=text]', 'bad', ['change']); await checkColumnValuesWithRegex(page, 'method', '[Bb][Aa][Dd]'); await pressElement(page, '#reset-filters', true); diff --git a/test/public/simulationPasses/overviewAnchoredSimulationPasses.test.js b/test/public/simulationPasses/overviewAnchoredSimulationPasses.test.js index 2693c2000c..0c801f9c00 100644 --- a/test/public/simulationPasses/overviewAnchoredSimulationPasses.test.js +++ b/test/public/simulationPasses/overviewAnchoredSimulationPasses.test.js @@ -117,10 +117,10 @@ module.exports = () => { await goToPage(page, 'anchored-simulation-passes-overview', { queryParameters: { dataPassId: 3 } }); await pressElement(page, '#openFilterToggle'); - await fillInput(page, '.name-filter input[type=text]', 'LHC23k6a'); + await fillInput(page, '.name-filter input[type=text]', 'LHC23k6a', ['change']); await expectColumnValues(page, 'name', ['LHC23k6a']); - await fillInput(page, '.name-filter input[type=text]', 'LHC23k6a, LHC23k6b'); + await fillInput(page, '.name-filter input[type=text]', 'LHC23k6a, LHC23k6b', ['change']); await expectColumnValues(page, 'name', ['LHC23k6b', 'LHC23k6a']); }); }; diff --git a/test/public/simulationPasses/overviewPerLhcPeriod.test.js b/test/public/simulationPasses/overviewPerLhcPeriod.test.js index c80de33d5f..bcad3fab5b 100644 --- a/test/public/simulationPasses/overviewPerLhcPeriod.test.js +++ b/test/public/simulationPasses/overviewPerLhcPeriod.test.js @@ -131,10 +131,10 @@ module.exports = () => { await goToPage(page, 'simulation-passes-per-lhc-period-overview', { queryParameters: { lhcPeriodId: 1 } }); await pressElement(page, '#openFilterToggle'); - await fillInput(page, 'div.flex-row.items-baseline:nth-of-type(1) input[type=text]', 'LHC23k6a'); + await fillInput(page, 'div.flex-row.items-baseline:nth-of-type(1) input[type=text]', 'LHC23k6a', ['change']); await expectColumnValues(page, 'name', ['LHC23k6a']); - await fillInput(page, 'div.flex-row.items-baseline:nth-of-type(1) input[type=text]', 'LHC23k6a, LHC23k6b'); + await fillInput(page, 'div.flex-row.items-baseline:nth-of-type(1) input[type=text]', 'LHC23k6a, LHC23k6b', ['change']); await expectColumnValues(page, 'name', ['LHC23k6b', 'LHC23k6a']); }); };