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;