From 76062ca543906199d41ac2975455727867d35126 Mon Sep 17 00:00:00 2001
From: Max Chopart <chopart.max@proton.me>
Date: Tue, 4 Jun 2024 10:56:45 +0200
Subject: [PATCH] [New #168] Added template filter for records table

---
 src/components/record/RecordTable.jsx         | 40 ++++++++-
 .../record/filter/TemplateFilter.jsx          | 84 +++++++++++++++++++
 2 files changed, 123 insertions(+), 1 deletion(-)
 create mode 100644 src/components/record/filter/TemplateFilter.jsx

diff --git a/src/components/record/RecordTable.jsx b/src/components/record/RecordTable.jsx
index ec66a71..d6815e9 100644
--- a/src/components/record/RecordTable.jsx
+++ b/src/components/record/RecordTable.jsx
@@ -11,6 +11,7 @@ import { ROLE } from "../../constants/DefaultConstants";
 import DateIntervalFilter from "./filter/DateIntervalFilter";
 import PhaseFilter from "./filter/PhaseFilter";
 import InstitutionFilter from "./filter/InstitutionFilter";
+import TemplateFilter from "./filter/TemplateFilter.jsx";
 import SortIndicator from "../misc/SortIndicator";
 import { useI18n } from "../../hooks/useI18n";
 import FilterIndicator from "../misc/FilterIndicator";
@@ -93,7 +94,7 @@ class RecordTable extends React.Component {
           <th className="col-2 content-center">{this.i18n("records.local-name")}</th>
           <IfGranted expected={ROLE.ADMIN} actual={this.props.currentUser.role}>
             <FilterableInstitutionHeader filters={filters} onFilterChange={onChange} />
-            <th className="col-2 content-center">{this.i18n("records.form-template")}</th>
+            <FilterableTemplateHeader filters={filters} onFilterChange={onChange} />
           </IfGranted>
           <FilterableLastModifiedHeader filters={filters} sort={sort} onFilterAndSortChange={onChange} />
           <FilterablePhaseHeader filters={filters} onFilterChange={onChange} />
@@ -169,6 +170,7 @@ FilterableInstitutionHeader.propTypes = {
     minDate: PropTypes.instanceOf(Date),
     maxDate: PropTypes.instanceOf(Date),
     phase: PropTypes.string,
+    formTemplate: PropTypes.string,
   }),
   onFilterChange: PropTypes.func,
 };
@@ -212,6 +214,7 @@ FilterableLastModifiedHeader.propTypes = {
     minDate: PropTypes.instanceOf(Date),
     maxDate: PropTypes.instanceOf(Date),
     phase: PropTypes.string,
+    formTemplate: PropTypes.string,
   }),
   sort: PropTypes.shape({
     date: PropTypes.string,
@@ -248,6 +251,41 @@ FilterablePhaseHeader.propTypes = {
     minDate: PropTypes.instanceOf(Date),
     maxDate: PropTypes.instanceOf(Date),
     phase: PropTypes.string,
+    formTemplate: PropTypes.string,
+  }),
+  onFilterChange: PropTypes.func,
+};
+
+const FilterableTemplateHeader = ({ filters, onFilterChange }) => {
+  const { i18n } = useI18n();
+  return (
+    <OverlayTrigger
+      trigger="click"
+      placement="bottom"
+      rootClose={true}
+      overlay={
+        <Popover id="records-filters-template" className="record-filters-popup">
+          <Popover.Content>
+            <TemplateFilter value={filters.formTemplate} onChange={onFilterChange} />
+          </Popover.Content>
+        </Popover>
+      }
+    >
+      <th id="records-template" className="col-2 content-center cursor-pointer" title={i18n("table.column.filterable")}>
+        {i18n("records.form-template")}
+        <FilterIndicator filterValue={filters.formTemplate} />
+      </th>
+    </OverlayTrigger>
+  );
+};
+
+FilterableTemplateHeader.propTypes = {
+  filters: PropTypes.shape({
+    institution: PropTypes.string,
+    minDate: PropTypes.instanceOf(Date),
+    maxDate: PropTypes.instanceOf(Date),
+    phase: PropTypes.string,
+    formTemplate: PropTypes.string,
   }),
   onFilterChange: PropTypes.func,
 };
diff --git a/src/components/record/filter/TemplateFilter.jsx b/src/components/record/filter/TemplateFilter.jsx
new file mode 100644
index 0000000..55ef811
--- /dev/null
+++ b/src/components/record/filter/TemplateFilter.jsx
@@ -0,0 +1,84 @@
+import React from "react";
+import { Button, Col, Form, Row } from "react-bootstrap";
+import { IntelligentTreeSelect } from "intelligent-tree-select";
+import { useI18n } from "../../../hooks/useI18n";
+import { sanitizeArray } from "../../../utils/Utils";
+import PropTypes from "prop-types";
+import { useDispatch, useSelector } from "react-redux";
+import { loadFormTemplates } from "../../../actions/FormTemplatesActions.js";
+
+const TemplateFilter = ({ value, onChange }) => {
+  const { i18n } = useI18n();
+  const dispatch = useDispatch();
+  const formTemplates = useSelector((state) => state.formTemplates.formTemplatesLoaded.formTemplates);
+  React.useEffect(() => {
+    if (!formTemplates) {
+      dispatch(loadFormTemplates());
+    }
+  }, [dispatch, formTemplates]);
+  const values = sanitizeArray(value);
+
+  const getFilterOptions = () => {
+    let templatesWithLabelAndValue = [];
+    for (const t of formTemplates) {
+      templatesWithLabelAndValue.push({
+        value: t["@id"],
+        label: t["http://www.w3.org/2000/01/rdf-schema#label"][0]["@value"],
+        ...t,
+      });
+    }
+    return templatesWithLabelAndValue;
+  };
+
+  const options = getFilterOptions();
+  const selected = options.filter((o) => values.indexOf(o["@id"]) !== -1);
+
+  return (
+    <Form className="mt-1">
+      <Form.Group as={Row}>
+        <Form.Label column={true} xs={4}>
+          {i18n("records.form-template")}
+        </Form.Label>
+        <Col xs={8}>
+          <IntelligentTreeSelect
+            options={options}
+            multi={true}
+            renderAsTree={false}
+            onChange={(o) => onChange({ formTemplate: o.map((o) => o["@id"]) }, {})}
+            value={selected}
+            placeholder={i18n("select.placeholder")}
+            isClearable={false}
+          />
+        </Col>
+      </Form.Group>
+      <hr />
+      <Row>
+        <Col>
+          <div className="float-right">
+            <Button
+              size="sm"
+              disabled={values.length === 0}
+              onClick={() =>
+                onChange(
+                  {
+                    formTemplate: undefined,
+                  },
+                  {},
+                )
+              }
+            >
+              {i18n("filters.reset")}
+            </Button>
+          </div>
+        </Col>
+      </Row>
+    </Form>
+  );
+};
+
+TemplateFilter.propTypes = {
+  value: PropTypes.string,
+  onChange: PropTypes.func.isRequired,
+};
+
+export default TemplateFilter;