feat: #tno-2100 - show checkboxes for advanced search

app/editor/package.json

@@ -58,7 +58,7 @@
     "react-tooltip": "5.10.0",
     "redux-logger": "3.0.6",
     "styled-components": "5.3.9",
-    "tno-core": "0.1.15"
+    "tno-core": "0.1.16"
   },
   "devDependencies": {
     "@simbathesailor/use-what-changed": "2.0.0",

app/editor/yarn.lock

@@ -10604,7 +10604,7 @@ __metadata:
     sass-extract-js: 0.4.0
     sass-extract-loader: 1.1.0
     styled-components: 5.3.9
-    tno-core: 0.1.15
+    tno-core: 0.1.16
     typescript: 4.9.5
   languageName: unknown
   linkType: soft
@@ -14703,9 +14703,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tno-core@npm:0.1.15":
-  version: 0.1.15
-  resolution: "tno-core@npm:0.1.15"
+"tno-core@npm:0.1.16":
+  version: 0.1.16
+  resolution: "tno-core@npm:0.1.16"
   dependencies:
     "@elastic/elasticsearch": ^8.10.0
     "@fortawesome/free-solid-svg-icons": ^6.4.2
@@ -14737,7 +14737,7 @@ __metadata:
     react-tooltip: ^5.10.0
     styled-components: ^5.3.9
     yup: ^1.1.1
-  checksum: 36ac50fcd67f3145807c644f11ad268d8cd286a87418d76cb941cc75341fa9e5ada94c434ddb55022bced52a96cf91f9c05f84951593c9a5714ced37e532a3a7
+  checksum: 35c43374efa63d35063a69d5d66704904bb13d909534bad4b4449f337903fd871b58ebe57dfda19f95d17576187aa2aa2c2dccbc700adf62c7a4a0d1823ea4f6
   languageName: node
   linkType: hard
 

app/subscriber/package.json

@@ -53,7 +53,7 @@
     "react-tooltip": "5.10.0",
     "redux-logger": "3.0.6",
     "styled-components": "5.3.9",
-    "tno-core": "0.1.15"
+    "tno-core": "0.1.16"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "5.16.5",

app/subscriber/src/features/search-page/components/advanced-search/AdvancedSearch.tsx

@@ -4,7 +4,7 @@ import { filterFormat } from 'features/search-page/utils';
 import { handleEnterPressed } from 'features/utils';
 import React from 'react';
 import { BsCalendarEvent, BsSun } from 'react-icons/bs';
-import { FaPlay, FaRegSmile } from 'react-icons/fa';
+import { FaCaretSquareDown, FaCheckSquare, FaPlay, FaRegSmile } from 'react-icons/fa';
 import { FaSave } from 'react-icons/fa';
 import { FaBookmark, FaIcons, FaNewspaper, FaTag, FaTv, FaUsers } from 'react-icons/fa6';
 import { IoIosCog, IoMdRefresh } from 'react-icons/io';
@@ -16,12 +16,15 @@ import {
   Button,
   Claim,
   Col,
+  getCookie,
   IFilterModel,
   IFilterSettingsModel,
   Row,
+  setCookie,
   Show,
   Text,
   TextArea,
+  ToggleGroup,
 } from 'tno-core';
 
 import {
@@ -38,6 +41,7 @@ import {
   SentimentSection,
   SeriesSection,
   TagSection,
+  ToggleFilterStyleInfo,
 } from './components';
 import { defaultAdvancedSearch, defaultFilter } from './constants';
 import { defaultSubMediaGroupExpanded, ISubMediaGroupExpanded } from './interfaces';
@@ -76,6 +80,25 @@ export const AdvancedSearch: React.FC<IAdvancedSearchProps> = ({ onSearch }) =>
   const [mediaGroupExpandedStates, setMediaGroupExpandedStates] =
     React.useState<ISubMediaGroupExpanded>(defaultSubMediaGroupExpanded);
 
+  const displayFiltersAsDropdownCookieKey = 'advancedSearch:displayFiltersAsDropdown';
+  const [displayFiltersAsDropdown, setDisplayFiltersAsDropdown] = React.useState<boolean>(() => {
+    const cookieVal = getCookie(displayFiltersAsDropdownCookieKey);
+    return !!cookieVal;
+  });
+  const handleChangeDisplayFiltersAsDropdown = React.useCallback(
+    async (displayFiltersAsDropdown: boolean) => {
+      setDisplayFiltersAsDropdown(displayFiltersAsDropdown);
+      if (displayFiltersAsDropdown) {
+        setCookie(displayFiltersAsDropdownCookieKey, true);
+      } else {
+        setCookie(displayFiltersAsDropdownCookieKey, false, {
+          expires: 'Thu, 01 Jan 1970 00:00:00 UTC',
+        });
+      }
+    },
+    [setDisplayFiltersAsDropdown],
+  );
+
   const isAdmin = userInfo?.roles.includes(Claim.administrator);
 
   React.useEffect(() => {
@@ -172,7 +195,7 @@ export const AdvancedSearch: React.FC<IAdvancedSearchProps> = ({ onSearch }) =>
           {/* SEARCH FOR: */}
           <Row className="search-for-row">
             <ElasticInfo />
-            <label className="label">SEARCH FOR: </label>
+            <label className="label">SEARCH FOR:</label>
             <Col className="text-area-container">
               <TextArea
                 value={query}
@@ -191,10 +214,31 @@ export const AdvancedSearch: React.FC<IAdvancedSearchProps> = ({ onSearch }) =>
               <SearchInGroup />
             </Col>
           </Row>
-
           <div className="search-in-group space-top"></div>
           <Col className="section top-spacer">
-            <b>Narrow your results by: </b>
+            <div className="narrow-filter-header">
+              <label>Narrow your results by: </label>
+              <div className="toggle-group-container">
+                <ToggleGroup
+                  defaultSelected={displayFiltersAsDropdown ? 'sel' : 'chk'}
+                  options={[
+                    {
+                      id: 'chk',
+                      label: '',
+                      icon: <FaCheckSquare />,
+                      onClick: () => handleChangeDisplayFiltersAsDropdown(false),
+                    },
+                    {
+                      id: 'sel',
+                      label: '',
+                      icon: <FaCaretSquareDown />,
+                      onClick: () => handleChangeDisplayFiltersAsDropdown(true),
+                    },
+                  ]}
+                />
+                <ToggleFilterStyleInfo />
+              </div>
+            </div>
             {/* DATE RANGE */}
             <Col className={`date-range-group space-top`}>
               <Row className="option-row">
@@ -210,6 +254,7 @@ export const AdvancedSearch: React.FC<IAdvancedSearchProps> = ({ onSearch }) =>
                 hasValues={!!search.sourceIds?.length}
               >
                 <MediaSection
+                  displayFiltersAsDropdown={displayFiltersAsDropdown}
                   setMediaGroupExpandedStates={setMediaGroupExpandedStates}
                   mediaGroupExpandedStates={mediaGroupExpandedStates}
                 />
@@ -242,7 +287,7 @@ export const AdvancedSearch: React.FC<IAdvancedSearchProps> = ({ onSearch }) =>
                 title="Columnists/Anchors"
                 hasValues={!!search.contributorIds?.length}
               >
-                <ContributorSection />
+                <ContributorSection displayFiltersAsDropdown={displayFiltersAsDropdown} />
               </ExpandableRow>
             </Col>
             {/* MEDIA TYPES SECTION */}
@@ -252,7 +297,7 @@ export const AdvancedSearch: React.FC<IAdvancedSearchProps> = ({ onSearch }) =>
                 title="Media Types"
                 hasValues={!!search.mediaTypeIds?.length}
               >
-                <MediaTypeSection />
+                <MediaTypeSection displayFiltersAsDropdown={displayFiltersAsDropdown} />
               </ExpandableRow>
             </Col>
             {/* SHOW/PROGRAM SECTION */}
@@ -262,7 +307,7 @@ export const AdvancedSearch: React.FC<IAdvancedSearchProps> = ({ onSearch }) =>
                 title="Show/Program"
                 hasValues={!!search.seriesIds?.length}
               >
-                <SeriesSection />
+                <SeriesSection displayFiltersAsDropdown={displayFiltersAsDropdown} />
               </ExpandableRow>
             </Col>
             {isAdmin && (
@@ -274,13 +319,13 @@ export const AdvancedSearch: React.FC<IAdvancedSearchProps> = ({ onSearch }) =>
                     title="Content Type"
                     hasValues={!!search.contentTypes?.length}
                   >
-                    <ContentTypeSection />
+                    <ContentTypeSection displayFiltersAsDropdown={displayFiltersAsDropdown} />
                   </ExpandableRow>
                 </Col>
                 {/* TAG SECTION */}
                 <Col className="expandable-section">
                   <ExpandableRow icon={<FaTag />} title="Tags" hasValues={!!search.tags?.length}>
-                    <TagSection />
+                    <TagSection displayFiltersAsDropdown={displayFiltersAsDropdown} />
                   </ExpandableRow>
                 </Col>
               </>

app/subscriber/src/features/search-page/components/advanced-search/components/ElasticInfo.tsx

@@ -8,8 +8,8 @@ import * as styled from './styled';
 export const ElasticInfo: React.FC = () => {
   return (
     <styled.ElasticInfo>
-      <FaInfoCircle data-tooltip-id="info" className="info-icon" />
-      <TooltipMenu openOnClick id="info">
+      <FaInfoCircle data-tooltip-id="elastic-info" className="info-icon" />
+      <TooltipMenu openOnClick id="elastic-info">
         <Col>
           <div>
             The keywords query supports the following operators:

app/subscriber/src/features/search-page/components/advanced-search/components/ToggleFilterStyleInfo.tsx

@@ -0,0 +1,31 @@
+import { TooltipMenu } from 'components/tooltip-menu';
+import { FaCaretSquareDown, FaCheckSquare, FaInfoCircle } from 'react-icons/fa';
+import { Col, Row } from 'tno-core';
+
+import * as styled from './styled';
+
+/** Component that displays help text for elastic search queries */
+export const ToggleFilterStyleInfo: React.FC = () => {
+  return (
+    <styled.ToggleFilterStyleInfo>
+      <FaInfoCircle data-tooltip-id="toggle-filter-style-info" className="info-icon" />
+      <TooltipMenu openOnClick id="toggle-filter-style-info">
+        <Col>
+          <div>
+            Switch between modes for display filter criteris:
+            <ul>
+              <Row className="row">
+                <FaCheckSquare /> Display each filter option item as a checkbox. Usefule when
+                selecting a large number of items.
+              </Row>
+              <Row className="row">
+                <FaCaretSquareDown /> Show filter option items in a select drop down. Faster when
+                search by name.
+              </Row>
+            </ul>
+          </div>
+        </Col>
+      </TooltipMenu>
+    </styled.ToggleFilterStyleInfo>
+  );
+};

app/subscriber/src/features/search-page/components/advanced-search/components/index.ts

@@ -1,3 +1,4 @@
 export * from './ElasticInfo';
 export * from './ExpandableRow';
 export * from './sections';
+export * from './ToggleFilterStyleInfo';

app/subscriber/src/features/search-page/components/advanced-search/components/sections/ContentTypeSection.tsx

@@ -1,8 +1,15 @@
 import { useContent } from 'store/hooks';
-import { ContentTypeName, Row, Select } from 'tno-core';
+import { Button, ButtonVariant, Checkbox, ContentTypeName, Row, Select, Show } from 'tno-core';
+
+export interface IContentTypeSectionProps {
+  /** whether to display filter choices as checkboxes or a select box */
+  displayFiltersAsDropdown: boolean;
+}
 
 /** section that allows you to filter down based on content type with a drop down menu */
-export const ContentTypeSection: React.FC = () => {
+export const ContentTypeSection: React.FC<IContentTypeSectionProps> = ({
+  displayFiltersAsDropdown,
+}) => {
   const [
     {
       search: { filter },
@@ -18,23 +25,64 @@ export const ContentTypeSection: React.FC = () => {
   ];
 
   return (
-    <Row className="content-types-container" justifyContent="center">
-      <Select
-        name="content-types"
-        isMulti
-        key={filter.contentTypes?.join(',')}
-        className="content-types centered"
-        width="25em"
-        options={typeOptions}
-        onChange={(newValues) => {
-          Array.isArray(newValues) &&
-            storeFilter({
-              ...filter,
-              contentTypes: newValues.map((v) => v.value),
-            });
-        }}
-        value={typeOptions.filter((o) => o.value && filter.contentTypes?.includes(o.value))}
-      />
+    <Row className="content-types-container">
+      <Show visible={!displayFiltersAsDropdown}>
+        <div className="check-box-list">
+          <div className="chk-box-container chk-content-type select-all">
+            <Button
+              variant={ButtonVariant.link}
+              onClick={() =>
+                storeFilter({ ...filter, contentTypes: typeOptions.map((m) => m.value!) })
+              }
+            >
+              Select All
+            </Button>
+            /
+            <Button
+              variant={ButtonVariant.link}
+              onClick={() => storeFilter({ ...filter, contentTypes: [] })}
+            >
+              Deselect All
+            </Button>
+          </div>
+          {typeOptions.map((item, index) => (
+            <div key={`chk-content-type-${index}`} className="chk-box-container chk-content-type">
+              <Checkbox
+                id={`chk-content-type-${index}`}
+                label={item.label}
+                checked={filter.contentTypes?.includes(item.value)}
+                value={item.value}
+                onChange={(e) => {
+                  storeFilter({
+                    ...filter,
+                    contentTypes: e.target.checked
+                      ? [...filter.contentTypes!, e.target.value as ContentTypeName] // add it
+                      : filter.contentTypes?.filter((i) => i !== e.target.value), // remove it
+                  });
+                }}
+              />
+            </div>
+          ))}
+        </div>
+      </Show>
+      <Show visible={displayFiltersAsDropdown}>
+        <Select
+          name="content-types"
+          isMulti
+          key={filter.contentTypes?.join(',')}
+          className="content-types centered"
+          width="25em"
+          options={typeOptions}
+          onChange={(newValues) => {
+            Array.isArray(newValues) &&
+              storeFilter({
+                ...filter,
+                contentTypes: newValues.map((v) => v.value),
+              });
+          }}
+          value={typeOptions.filter((o) => o.value && filter.contentTypes?.includes(o.value))}
+        />
+      </Show>
     </Row>
   );
 };