[Feat #678] Visual improvements of faceted search

src/component/search/facet/BooleanFacet.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { FormGroup } from "reactstrap";
+import { FormGroup, Label } from "reactstrap";
 import CustomCheckBoxInput from "../../misc/CustomCheckboxInput";
 import SearchParam from "../../../model/search/SearchParam";
 import Utils from "../../../util/Utils";
@@ -10,18 +10,26 @@ export const BooleanFacet: React.FC<{
   value: SearchParam;
   onChange: (value: SearchParam) => void;
 }> = ({ id, label, value, onChange }) => {
-  const checked =
-    Utils.sanitizeArray(value.value).length > 0
-      ? value.value[0] === true
-      : false;
-  // TODO We need to be able to set the value to undefined, so we can clear the facet - this can be solved by having facets available on select - deselecting the facet would clear it
+  const hasValue = Utils.sanitizeArray(value.value).length > 0;
+  const checked = hasValue ? value.value[0] === true : false;
+
+  const handleToggle = () => {
+    if (!hasValue || value.value[0] === false) {
+      onChange({ ...value, value: [true] });
+    } else {
+      onChange({ ...value, value: [false] });
+    }
+  };
+
   return (
     <FormGroup>
+      <div className="d-flex justify-content-between">
+        <Label className="attribute-label mb-3">{label}</Label>
+      </div>
       <CustomCheckBoxInput
         id={id}
-        label={label}
         checked={checked}
-        onChange={() => onChange({ ...value, value: [!checked] })}
+        onChange={handleToggle}
         className="relative ml-0"
       />
     </FormGroup>

src/component/search/facet/CustomAttributeFacets.tsx

@@ -3,7 +3,7 @@ import SearchParam from "../../../model/search/SearchParam";
 import { useI18n } from "../../hook/useI18n";
 import { useDispatch, useSelector } from "react-redux";
 import TermItState from "../../../model/TermItState";
-import { Col, Row } from "reactstrap";
+import { Col } from "reactstrap";
 import { RdfProperty } from "src/model/RdfsResource";
 import VocabularyUtils from "../../../util/VocabularyUtils";
 import { BooleanFacet } from "./BooleanFacet";
@@ -20,7 +20,11 @@ import { createSearchParam } from "./FacetedSearchUtil";
 export const CustomAttributeFacets: React.FC<{
   values: { [key: string]: SearchParam };
   onChange: (value: SearchParam) => void;
-}> = ({ values, onChange }) => {
+  allowedIris?: string[];
+  xl?: number;
+  md?: number;
+  xs?: number;
+}> = ({ values, onChange, allowedIris = [], xl = 4, md = 6, xs = 12 }) => {
   const { locale } = useI18n();
   const dispatch: ThunkDispatch = useDispatch();
   const customAttributes = useSelector(
@@ -31,22 +35,20 @@ export const CustomAttributeFacets: React.FC<{
   }, [dispatch]);
   const lang = getShortLocale(locale);
 
-  return (
-    <Row>
-      {customAttributes
-        .filter((att) => att.domainIri === VocabularyUtils.TERM)
-        .map((att) => (
-          <Col xl={4} xs={6}>
-            {renderFacet(
-              att,
-              values[att.iri] || createSearchParam(att),
-              onChange,
-              lang
-            )}
-          </Col>
-        ))}
-    </Row>
-  );
+  const content = customAttributes
+    .filter((att) => att.domainIri === VocabularyUtils.TERM)
+    .filter((att) => allowedIris.includes(att.iri))
+    .map((att) => (
+      <Col key={att.iri} xl={xl} md={md} xs={xs} className="mb-3">
+        {renderFacet(
+          att,
+          values[att.iri] || createSearchParam(att),
+          onChange,
+          lang
+        )}
+      </Col>
+    ));
+  return <>{content}</>;
 };
 
 function renderFacet(

src/component/search/facet/FacetToggle.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { Button } from "reactstrap";
+
+export interface FacetToggleProps {
+  active: boolean;
+  label: string;
+  onClick: () => void;
+}
+
+/**
+ * Simple toggle button to show/hide a facet.
+ */
+const FacetToggle: React.FC<FacetToggleProps> = ({
+  active,
+  label,
+  onClick,
+}) => (
+  <Button
+    size="sm"
+    color={active ? "primary" : "secondary"}
+    outline={!active}
+    className="mr-2 mb-2"
+    onClick={onClick}
+    aria-pressed={active}
+  >
+    {label}
+  </Button>
+);
+
+export default FacetToggle;