Bibdk2021 2032 adv facets

e2e/cypress/e2e/advFacets.cy.js

@@ -0,0 +1,66 @@
+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", 3);
+
+    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]")
+      .first()
+      .find("li")
+      .find("[checked]")
+      .should("have.length", 2);
+
+    // uncheck one
+    cy.get("[data-cy=accordion-item]")
+      .first()
+      .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.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,15 @@ 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, bgColor }) {
   return (
     <Icon
       size={size}
-      bgColor="var(--blue)"
+      // bgColor="var(--blue)"
       dataCy="expand-icon"
       className={`${styles.expandicon} ${open ? styles.opened : styles.closed}`}
       alt="expand"
+      src="expand.svg"
     >
       {/* Lines to be animated */}
       <div>

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

@@ -7,8 +7,8 @@
   height: 40%;
   position: relative;
 
-  top: 20%;
-  left: 20%;
+  top: 50%;
+  left: 50%;
 
   transform: translate(-50%, -50%);
 }
@@ -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/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,8 @@ 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";
 
 export function AdvancedSearchResult({
   pageNo,
@@ -23,6 +25,7 @@ export function AdvancedSearchResult({
   results,
   error = null,
   isLoading,
+  facets,
 }) {
   const hitcount = results?.hitcount;
   const numPages = Math.ceil(hitcount / 10);
@@ -34,21 +37,37 @@ export function AdvancedSearchResult({
     return null;
   }
 
+  const TitleComponent = () => {
+    return (
+      <div className={styles.flex}>
+        {/*<div className={styles.countstyle}> {hitcount} </div>*/}
+        <Title type="title5" className={styles.countstyle}>
+          {hitcount}
+        </Title>
+        <Title type="title6">Resultater</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>
+            <>
+              <Title type="title6">Afgræns din søgning</Title>
+              <AdvancedFacets facets={facets} />
+            </>
           )
         }
         sectionContentClass={isMobile ? styles.sectionContentStyle : ""}
@@ -57,6 +76,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>
@@ -91,6 +111,7 @@ function parseResponse(bigResponse) {
     hitcount: bigResponse?.data?.complexSearch?.hitcount || 0,
     errorMessage: bigResponse?.data?.complexSearch?.errorMessage || null,
     isLoading: bigResponse?.isLoading,
+    facets: bigResponse?.data?.complexSearch?.facets,
   };
 }
 
@@ -105,20 +126,27 @@ export default function Wrap({ onWorkClick, onPageChange }) {
     fieldSearchFromUrl: fieldSearch,
     pageNoFromUrl: pageNo,
     setShowPopover,
+    facets,
   } = useAdvancedSearchContext();
 
+  const { facetsFromEnum } = 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: 5,
+        facets: facetsFromEnum,
+      },
     })
   );
   const parsedResponse = parseResponse(fastResponse);
@@ -147,6 +175,7 @@ export default function Wrap({ onWorkClick, onPageChange }) {
       error={parsedResponse.errorMessage}
       setShowPopover={setShowPopover}
       isLoading={parsedResponse.isLoading}
+      facets={parsedResponse.facets}
     />
   );
 }

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

@@ -10,14 +10,15 @@ import { useAdvancedSearchContext } from "@/components/search/advancedSearch/adv
 
 import { convertStateToCql } from "@/components/search/advancedSearch/utils";
 import isEmpty from "lodash/isEmpty";
+import { useFacets } from "@/components/search/advancedSearch/useFacets";
 
 /**
  * Row representation of a search result entry
  *
  * @param {Object} props
  * See propTypes for specific props and types
  */
-export function ResultPage({ rows, onWorkClick, isLoading }) {
+export function ResultPage({ rows, onWorkClick, isLoading, facets }) {
   const resultRows = rows?.map((row, index) => (
     <Fragment key={row.workId + ":" + index}>
       <ResultRow
@@ -45,6 +46,7 @@ ResultPage.propTypes = {
 function parseResponse(bigResponse) {
   return {
     works: bigResponse?.data?.complexSearch?.works || null,
+    facets: bigResponse?.data?.complexSearch?.facets || [],
     isLoading: bigResponse?.isLoading,
   };
 }
@@ -62,25 +64,37 @@ export default function Wrap({ onWorkClick, page }) {
     cqlFromUrl: cql,
     fieldSearchFromUrl: fieldSearch,
     sort,
+    facets,
   } = useAdvancedSearchContext();
 
+  const { facetsFromEnum } = useFacets();
+
   onWorkClick = null;
 
   const limit = 10;
   let offset = limit * (page - 1);
-  const cqlQuery = cql || convertStateToCql(fieldSearch);
+  const cqlQuery = cql || convertStateToCql({ ...fieldSearch, facets: facets });
 
   const showResult = !isEmpty(fieldSearch) || !isEmpty(cql);
 
+  // const facets = {
+  //   facetLimit: 5,
+  //   facets: ["specificmaterialtype", "subject"],
+  // };
   // fetch data for the specific page
   const bigResponse = useData(
     doComplexSearchAll({
       cql: cqlQuery,
       offset: offset,
       limit: limit,
+      facets: {
+        facetLimit: 5,
+        facets: facetsFromEnum,
+      },
       ...(!isEmpty(sort) && { sort: sort }),
     })
   );
+
   const parsedResponse = parseResponse(bigResponse);
 
   if (parsedResponse.isLoading) {

src/components/search/advancedSearch/advancedSearchResult/topBar/TopBar.js

@@ -8,6 +8,8 @@ import Text from "@/components/base/text";
 import Translate from "@/components/base/translate";
 import isEmpty from "lodash/isEmpty";
 import { formattersAndComparitors } from "@/components/search/advancedSearch/useDefaultItemsForDropdownUnits";
+// import { getFacetsQuery } from "@/components/search/advancedSearch/utils";
+import { useFacets } from "@/components/search/advancedSearch/useFacets";
 
 /**
  *
@@ -40,6 +42,8 @@ export function FormatFieldSearchIndexes({ fieldsearch }) {
     (field) => !isEmpty(field.value)
   );
 
+  const { selectedFacets } = useFacets();
+
   return (
     <div className={styles.formatedQueryContainer}>
       <FormatFieldInput
@@ -50,6 +54,7 @@ export function FormatFieldSearchIndexes({ fieldsearch }) {
         dropdowns={filteredDropdownSearchIndices}
         showAndOperator={filteredInputFields?.length > 0}
       />
+      {/*<Text type="text1">{getFacetsQuery(selectedFacets)}</Text>*/}
     </div>
   );
 }

src/components/search/advancedSearch/cqlErrorMessage/CqlErrorMessage.js

@@ -126,7 +126,17 @@ export function CqlErrorMessage(errormessage) {
 }
 
 export default function Wrap({ cql = "" }) {
-  const bigResponse = useData(doComplexSearchAll({ cql, offset: 0, limit: 1 }));
+  const bigResponse = useData(
+    doComplexSearchAll({
+      cql,
+      offset: 0,
+      limit: 1,
+      facets: {
+        facetLimit: 5,
+        facets: ["specificmaterialtype", "subject"],
+      },
+    })
+  );
 
   return CqlErrorMessage(bigResponse?.data?.complexSearch?.errorMessage);
 }