Bibdk2021 2032 adv facets

e2e/cypress/e2e/advFacets.cy.js

@@ -0,0 +1,67 @@
+describe("Facets", () => {
+  it(`Get facets from url`, () => {
+    cy.visit("/iframe.html?id=advancedsearch-facets--facets-in-url");
+
+    // there should be 3 accordions in this story
+    cy.get("[data-cy=accordion-item]").should("have.length", 4);
+
+    cy.get("[data-cy=router-query]").then((el) => {
+      const fisk = JSON.parse(el.text());
+      const facets = JSON.parse(fisk.facets);
+
+      // there should be two in query
+      expect(facets.length).to.equal(2);
+    });
+
+    // get the first accordion
+    cy.get("[data-cy=accordion-item]").first().click();
+
+    // there should be 10
+    cy.get("[data-cy=accordion-item]")
+      .first()
+      .find("li")
+      .should("have.length", 10);
+
+    // two of them should be selected from url params
+    cy.get("[data-cy=accordion-item]")
+      .eq(2)
+      .click()
+      .find("li")
+      .find("[checked]")
+      .should("have.length", 2);
+
+    // uncheck one
+    cy.get("[data-cy=accordion-item]")
+      .eq(2)
+      .find("li")
+      .find("[checked]")
+      .first()
+      .focus()
+      .click({ force: true });
+
+    // click an item and verify url is updated
+    cy.get("[data-cy=li-specificmaterialtype-artikel]")
+      .find("input")
+      .click({ force: true });
+
+    cy.get("[data-cy=router-query]").then((el) => {
+      const fisk = JSON.parse(el.text());
+      const facets = fisk.facets;
+      console.log(facets, "FACETS");
+
+      assert(facets.includes("artikel"));
+    });
+
+    // and again
+    cy.get("[data-cy=li-specificmaterialtype-aarbog]")
+      .find("input")
+      .click({ force: true });
+
+    cy.get("[data-cy=router-query]").then((el) => {
+      const fisk = JSON.parse(el.text());
+      const facets = fisk.facets;
+
+      assert(facets.includes("aarbog"));
+    });
+  });
+});

src/components/base/accordion/Accordion.js

@@ -140,7 +140,12 @@ export function Item({
             </div>
           )}
           <div className={styles.expandIcon}>
-            <ExpandIcon open={isCurrentEventKey} size={4} />
+            <ExpandIcon
+              open={isCurrentEventKey}
+              size={4}
+              src="smallplus.svg"
+              bgColor="transparent"
+            />
           </div>
         </div>
       </Card.Header>

src/components/base/accordion/Accordion.module.css

@@ -93,7 +93,7 @@
   }
 
   .header_content {
-    padding: var(--pt2) 0 var(--pt2) 0;
+    padding: var(--pt1) 0 var(--pt1) 0;
   }
 
   .wrapper {

src/components/base/animation/expand/Expand.js

@@ -2,14 +2,20 @@ import Icon from "@/components/base/icon/Icon";
 
 import styles from "./Expand.module.css";
 
-export default function Expand({ open, size = 3 }) {
+export default function Expand({
+  open,
+  size = 3,
+  src = "expand.svg",
+  bgColor = "var(--blue)",
+}) {
   return (
     <Icon
       size={size}
-      bgColor="var(--blue)"
+      bgColor={bgColor}
       dataCy="expand-icon"
       className={`${styles.expandicon} ${open ? styles.opened : styles.closed}`}
       alt="expand"
+      src={src}
     >
       {/* Lines to be animated */}
       <div>

src/components/base/animation/expand/Expand.module.css

@@ -20,7 +20,7 @@
 
   width: 100%;
 
-  background: white;
+  background: blue;
   height: 2px;
   transition: all 0.35s;
 }

src/components/base/forms/checkbox/Checkbox.js

@@ -96,6 +96,7 @@ Checkbox.propTypes = {
   required: PropTypes.bool,
   readOnly: PropTypes.bool,
   onChange: PropTypes.func,
+  onClick: PropTypes.func,
   skeleton: PropTypes.bool,
   dataCy: PropTypes.string,
 };

src/components/base/section/Section.js

@@ -119,7 +119,7 @@ export default function Section({
           {title && !rightSideTitle && (
             <Col
               xs={12}
-              lg={2}
+              lg={colSize?.titel?.lg?.offset || 2}
               data-cy={cyKey({ name: "title", prefix: "section" })}
               className={`section-title ${styles.title} ${titleDividerClass} ${sectionTitleClass}`}
             >

src/components/base/translate/Translate.json

@@ -2290,6 +2290,10 @@
         "da": "Tilpasses efter materialetype",
         "en": "Adjusted according to material type"
       },
+      "narrow-search": {
+        "da": "Afgræns din søgning",
+        "en": "Narrow your search"
+      },
       "narrow-search-more": {
         "da": "Afgræns yderligere",
         "en": "narrow-search-more"

src/components/search/advancedSearch/advancedSearch/AdvancedSearch.js

@@ -49,6 +49,7 @@ export default function AdvancedSearch({ ariaExpanded, className }) {
   }, [cqlFromUrl, router?.query?.mode]);
 
   //add raw cql query in url if showCqlEditor. Add state to url if fieldInputs
+  // @TODO add facets here - they can be taken from context :)
   const doAdvancedSearch = () => {
     if (showCqlEditor) {
       const cqlParsedFromUrl = fieldSearchFromUrl

src/components/search/advancedSearch/advancedSearchContext.js

@@ -54,9 +54,11 @@ export default function AdvancedSearchProvider({ children, router }) {
     cql: cqlFromUrl = null,
     fieldSearch = "",
     sort: sortFromUrl = "",
+    facets: facetsFromUrl = "[]",
   } = router.query;
   const fieldSearchFromUrl = fieldSearch && JSON.parse(fieldSearch);
   const sort = sortFromUrl && JSON.parse(sortFromUrl);
+  const facets = facetsFromUrl && JSON.parse(facetsFromUrl);
 
   //// ----  Popup Trigger ----
   const popoverRef = useRef(null);
@@ -168,6 +170,7 @@ export default function AdvancedSearchProvider({ children, router }) {
     resetObjectState,
     parsedCQL,
     setParsedCQL,
+    facets,
     fieldSearchFromUrl,
     cqlFromUrl,
     pageNoFromUrl: page,

src/components/search/advancedSearch/advancedSearchResult/AdvancedSearchResult.js

@@ -15,6 +15,9 @@ import Title from "@/components/base/title";
 import { NoHitSearch } from "@/components/search/advancedSearch/advancedSearchResult/noHitSearch/NoHitSearch";
 import ResultPage from "./ResultPage/ResultPage";
 import useBreakpoint from "@/components/hooks/useBreakpoint";
+import { AdvancedFacets } from "@/components/search/advancedSearch/facets/advancedFacets";
+import { useFacets } from "@/components/search/advancedSearch/useFacets";
+import translate from "@/components/base/translate";
 
 export function AdvancedSearchResult({
   pageNo,
@@ -23,6 +26,7 @@ export function AdvancedSearchResult({
   results,
   error = null,
   isLoading,
+  facets,
 }) {
   const hitcount = results?.hitcount;
   const numPages = Math.ceil(hitcount / 10);
@@ -34,21 +38,42 @@ export function AdvancedSearchResult({
     return null;
   }
 
+  const TitleComponent = () => {
+    return (
+      <div className={styles.titleflex}>
+        <Title type="title5" className={styles.countstyle}>
+          {hitcount}
+        </Title>
+        <Title type="title6" className={styles.titleStyle}>
+          {translate({ context: "search", label: "title" })}
+        </Title>
+      </div>
+    );
+  };
+
   return (
     <>
       <TopBar isLoading={isLoading} />
 
       <Section
         divider={false}
-        colSize={{ lg: { offset: 1, span: true } }}
+        colSize={{
+          lg: { offset: 0, span: true },
+          titel: { lg: { offset: 3, span: true } },
+        }}
         id="search-result-section"
-        title="Resultater"
+        title={<TitleComponent />}
         subtitle={
           hitcount > 0 &&
           !isLoading && (
-            <Title type="title5" className={styles.titleStyle}>
-              {hitcount}
-            </Title>
+            <>
+              <div className={styles.subtitleStyle}>
+                <Title type="title6">
+                  {translate({ context: "search", label: "narrow-search" })}
+                </Title>
+              </div>
+              <AdvancedFacets facets={facets} />
+            </>
           )
         }
         sectionContentClass={isMobile ? styles.sectionContentStyle : ""}
@@ -57,6 +82,7 @@ export function AdvancedSearchResult({
         {/* Reuse result page from simplesearch - we skip the wrap .. @TODO should we set
         some mark .. that we are doing advanced search .. ?? */}
         {!isLoading && hitcount === 0 && <NoHitSearch />}
+        {/*<AdvancedFacets facets={facets} />*/}
         <>
           <AdvancedSearchSort className={cx(styles.sort_container)} />
           <div>
@@ -85,12 +111,54 @@ export function AdvancedSearchResult({
   );
 }
 
+/**
+ * Complex search returns empty valued facets - values with a score of 0.
+ * Here we filter out all the empty facet values - and if a facet has none
+ * values we filter out the entire facet :)
+ *
+ * @TODO - should complexsearch filter out the empty values ??
+ *
+ * eg.
+ * [
+ *     {
+ *         "key": "brætspil",
+ *         "score": 1
+ *     },
+ *     {
+ *         "key": "aarbog",
+ *         "score": 0
+ *     },
+ *     {
+ *         "key": "aarbog (cd)",
+ *         "score": 0
+ *     }
+ * ]
+ *
+ * @param facets
+ * @returns {*}
+ */
+function parseOutFacets(facets) {
+  // find the facet values with a score higher than 0
+  const sanitizedFacets = facets
+    ?.map((facet) => {
+      return {
+        name: facet.name,
+        values: facet.values.filter((value) => value?.score > 0),
+      };
+    })
+    // filter out entire facet if there are no values
+    .filter((facet) => facet.values.length > 0);
+
+  return sanitizedFacets;
+}
+
 function parseResponse(bigResponse) {
   return {
     works: bigResponse?.data?.complexSearch?.works || null,
     hitcount: bigResponse?.data?.complexSearch?.hitcount || 0,
     errorMessage: bigResponse?.data?.complexSearch?.errorMessage || null,
     isLoading: bigResponse?.isLoading,
+    facets: parseOutFacets(bigResponse?.data?.complexSearch?.facets),
   };
 }
 
@@ -105,20 +173,27 @@ export default function Wrap({ onWorkClick, onPageChange }) {
     fieldSearchFromUrl: fieldSearch,
     pageNoFromUrl: pageNo,
     setShowPopover,
+    facets,
   } = useAdvancedSearchContext();
 
+  const { facetsFromEnum, facetLimit } = useFacets();
+
   // @TODO what to do  with dataCollect ???
   onWorkClick = null;
   // get setter for advanced search history
   const { setValue } = useAdvancedSearchHistory();
-  const cqlQuery = cql || convertStateToCql(fieldSearch);
+  const cqlQuery = cql || convertStateToCql({ ...fieldSearch, facets: facets });
 
   const showResult = !isEmpty(fieldSearch) || !isEmpty(cql);
 
   // use the useData hook to fetch data
   const fastResponse = useData(
     hitcount({
       cql: cqlQuery,
+      facets: {
+        facetLimit: facetLimit,
+        facets: facetsFromEnum,
+      },
     })
   );
   const parsedResponse = parseResponse(fastResponse);
@@ -147,6 +222,7 @@ export default function Wrap({ onWorkClick, onPageChange }) {
       error={parsedResponse.errorMessage}
       setShowPopover={setShowPopover}
       isLoading={parsedResponse.isLoading}
+      facets={parsedResponse.facets}
     />
   );
 }

src/components/search/advancedSearch/advancedSearchResult/AdvancedSearchResult.module.css

@@ -7,16 +7,33 @@
 }
 
 .titleStyle {
-  color: var(--blue);
   font-family: var(--body-font-semibold);
 }
 
+.subtitleStyle {
+  font-family: var(--body-font-semibold);
+  border-bottom: 1px solid var(--blue);
+  margin: var(--pt4) 0 var(--pt2) 0;
+}
+
 .sectionTitleClass h2 {
   margin-top: var(--pt2);
   font-size: 17px;
   font-family: var(--body-font-semibold);
 }
 
+.titleflex {
+  display: flex;
+  align-items: baseline;
+  margin-bottom: var(--pt2);
+  margin-top: var(--pt2);
+}
+
+.countstyle {
+  color: var(--blue);
+  margin-right: var(--pt05);
+}
+
 .sectionContentStyle {
   position: relative;
   top: -55px;