diff --git a/src/components/record/RecordTable.jsx b/src/components/record/RecordTable.jsx
index ec66a71..3150e0b 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 {
{this.i18n("records.local-name")} |
- {this.i18n("records.form-template")} |
+
@@ -169,6 +170,7 @@ FilterableInstitutionHeader.propTypes = {
minDate: PropTypes.instanceOf(Date),
maxDate: PropTypes.instanceOf(Date),
phase: PropTypes.string,
+ template: PropTypes.string,
}),
onFilterChange: PropTypes.func,
};
@@ -212,6 +214,7 @@ FilterableLastModifiedHeader.propTypes = {
minDate: PropTypes.instanceOf(Date),
maxDate: PropTypes.instanceOf(Date),
phase: PropTypes.string,
+ template: PropTypes.string,
}),
sort: PropTypes.shape({
date: PropTypes.string,
@@ -248,6 +251,42 @@ FilterablePhaseHeader.propTypes = {
minDate: PropTypes.instanceOf(Date),
maxDate: PropTypes.instanceOf(Date),
phase: PropTypes.string,
+ template: PropTypes.string,
+ }),
+ onFilterChange: PropTypes.func,
+};
+
+// TODO: Change `filters.phase` to filters.`template` when backend is ready
+const FilterableTemplateHeader = ({ filters, onFilterChange }) => {
+ const { i18n } = useI18n();
+ return (
+
+
+
+
+
+ }
+ >
+
+ {i18n("records.form-template")}
+
+ |
+
+ );
+};
+
+FilterableTemplateHeader.propTypes = {
+ filters: PropTypes.shape({
+ institution: PropTypes.string,
+ minDate: PropTypes.instanceOf(Date),
+ maxDate: PropTypes.instanceOf(Date),
+ phase: PropTypes.string,
+ template: 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..c4f5095
--- /dev/null
+++ b/src/components/record/filter/TemplateFilter.jsx
@@ -0,0 +1,86 @@
+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 templates = useSelector((state) => state.formTemplates.formTemplatesLoaded.formTemplates);
+ React.useEffect(() => {
+ if (!templates) {
+ dispatch(loadFormTemplates());
+ }
+ }, [dispatch, templates]);
+ const values = sanitizeArray(value);
+ const selected = templates.filter(
+ (o) => values.indexOf(o["http://www.w3.org/2000/01/rdf-schema#label"]["@value"]) !== -1, //this is probably not correct
+ );
+
+ const getFilterOptions = () => {
+ let templatesWithLabelAndValue = [];
+ for (const t of templates) {
+ templatesWithLabelAndValue.push({
+ value: t["http://www.w3.org/2000/01/rdf-schema#label"][0]["@value"],
+ label: t["http://www.w3.org/2000/01/rdf-schema#label"][0]["@value"],
+ ...t,
+ });
+ }
+ return templatesWithLabelAndValue;
+ };
+
+ return (
+
+
+ {i18n("records.form-template")}
+
+
+ onChange({ phase: o.map((o) => o["http://www.w3.org/2000/01/rdf-schema#label"][0]["@value"]) }, {}) // this is probably not correct
+ }
+ value={selected}
+ placeholder={i18n("select.placeholder")}
+ isClearable={false}
+ />
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+TemplateFilter.propTypes = {
+ value: PropTypes.string,
+ onChange: PropTypes.func.isRequired,
+};
+
+export default TemplateFilter;