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;