feat: create textInputFilter

Author: NarrowsProjects

lib/public/components/Filters/common/filters/textInputFilter.js

@@ -0,0 +1,25 @@
+/**
+ * @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 { rawTextFilter } from './rawTextFilter.js';
+
+/**
+ * Standardised component for a rawTextFilter that span the width of their container
+ *
+ * @param {FilteringModel} filteringModel the page's filteringModel
+ * @param {string} key the identifier to serve as css selector and to fetch the correct filter from the filteringModel
+ * @param {string} placeholder placeholder text for the input element
+ * @return {Component} the filter
+ */
+export const textInputFilter = (filteringModel, key, placeholder) =>
+    rawTextFilter(filteringModel.get(key), { classes: ['w-100', `${key}-filter`], placeholder });

lib/public/views/Runs/Overview/RunsOverviewPage.js

@@ -20,6 +20,7 @@ import { table } from '../../../components/common/table/table.js';
 import { runNumbersFilter } from '../../../components/Filters/RunsFilter/runNumbersFilter.js';
 import { switchInput } from '../../../components/common/form/switchInput.js';
 import { exportTriggerAndModal } from '../../../components/common/dataExport/exportTriggerAndModal.js';
+import { textInputFilter } from '../../../components/Filters/common/filters/textInputFilter.js';
 
 const TABLEROW_HEIGHT = 59;
 // Estimate of the navbar and pagination elements height total; Needs to be updated in case of changes;

lib/public/views/Runs/RunPerDataPass/RunsPerDataPassOverviewPage.js

@@ -230,7 +230,7 @@ export const RunsPerDataPassOverviewPage = ({
     return [
         h('.flex-row.justify-between.items-center.g2', [
             filtersPanelPopover(perDataPassOverviewModel, activeColumns, { profile: 'runsPerDataPass' }),
-            h('.pl2#runOverviewFilter', runNumbersFilter(perDataPassOverviewModel.filteringModel.get('runNumbers'))),
+            h('.pl2#runOverviewFilter', textInputFilter(perDataPassOverviewModel.filteringModel, 'runNumbers', 'e.g. 534454, 534455...')),
             h(
                 '.flex-row.g1.items-center',
                 h('.flex-row.items-center.g1', [

lib/public/views/Runs/RunsPerSimulationPass/RunsPerSimulationPassOverviewPage.js

@@ -94,7 +94,7 @@ export const RunsPerSimulationPassOverviewPage = ({
     return [
         h('.flex-row.justify-between.items-center.g2', [
             filtersPanelPopover(perSimulationPassOverviewModel, activeColumns, { profile: 'runsPerSimulationPass' }),
-            h('.pl2#runOverviewFilter', runNumbersFilter(perSimulationPassOverviewModel.filteringModel.get('runNumbers'))),
+            h('.pl2#runOverviewFilter', textInputFilter(perSimulationPassOverviewModel.filteringModel, 'runNumbers', 'e.g. 534454, 534455...')),
             h(
                 '.flex-row.g1.items-center',
                 breadcrumbs([