@truedat/dd 4.28.1 → 4.28.5

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [4.28.4] 2021-09-15
+
+### Added
+
+- [TD-3950] Grants table
+
 ## [4.28.0] 2021-09-10
 
 ### Fixed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dd",
-  "version": "4.28.1",
+  "version": "4.28.5",
   "description": "Truedat Web Data Dictionary",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -34,7 +34,7 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "@truedat/test": "4.28.1",
+    "@truedat/test": "4.28.5",
     "babel-jest": "^27.0.6",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -84,9 +84,9 @@
     ]
   },
   "dependencies": {
-    "@truedat/auth": "4.28.1",
-    "@truedat/core": "4.28.1",
-    "@truedat/df": "4.28.1",
+    "@truedat/auth": "4.28.5",
+    "@truedat/core": "4.28.5",
+    "@truedat/df": "4.28.5",
     "lodash": "^4.17.21",
     "path-to-regexp": "^1.7.0",
     "prop-types": "^15.7.2",
@@ -107,5 +107,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 0.88.2 < 2.1"
   },
-  "gitHead": "6ff590df29781cbbbdbd8719a394649d758330c4"
+  "gitHead": "e004c6a673d6824a4807e4378b6e5c83e947c992"
 }

package/src/api.js

@@ -4,8 +4,10 @@ const API_DATA_STRUCTURES_CSV = "/api/data_structures/csv";
 const API_DATA_STRUCTURES_SEARCH = "/api/data_structures/search";
 const API_DATA_STRUCTURE_FILTERS_SEARCH = "/api/data_structure_filters/search";
 const API_DATA_STRUCTURE_VERSION = "/api/data_structures/:id/versions/:version";
+const API_GRANT_FILTERS_SEARCH = "/api/grant_filters/search";
 const API_PROFILE_EXECUTION = "/api/profile_executions/:id";
 const API_GRANT_REQUEST = "/api/grant_request_groups";
+const API_GRANTS_SEARCH = "/api/grants/search";
 const API_GRAPH = "/api/graphs/:id";
 const API_GRAPHS = "/api/graphs";
 const API_GRAPH_CSV = "/api/graphs/csv";
@@ -40,7 +42,9 @@ export {
   API_DATA_STRUCTURE_FILTERS_SEARCH,
   API_DATA_STRUCTURE_VERSION,
   API_PROFILE_EXECUTION,
+  API_GRANT_FILTERS_SEARCH,
   API_GRANT_REQUEST,
+  API_GRANTS_SEARCH,
   API_GRAPH,
   API_GRAPHS,
   API_GRAPH_CSV,

package/src/components/EditDomainForm.js

@@ -27,6 +27,7 @@ export const EditDomainForm = ({ title, updateStructure, structure }) => {
     <Container style={{ width: "400px" }}>
       <Header as="h2" content={title} />
       <DomainDropdownSelector
+        clearable={false}
         onChange={handleDomainSelected}
         name="domain"
         value={domainId || structure?.domain_id}

package/src/components/GrantDateFilter.js

@@ -0,0 +1,30 @@
+import React from "react";
+import { propOr } from "lodash/fp";
+import PropTypes from "prop-types";
+import { FormattedMessage } from "react-intl";
+import { connect } from "react-redux";
+import DateRangeFilter from "@truedat/core/components/DateRangeFilter";
+import { applyGrantDateFilter } from "../routines";
+
+export const GrantDateFilter = ({ active, applyGrantDateFilter, ...props }) =>
+  active ? (
+    <>
+      <DateRangeFilter
+        label={<FormattedMessage id="grant.start_date" />}
+        name="start_date,end_date"
+        onChange={applyGrantDateFilter}
+        defaultValues={props}
+      />
+    </>
+  ) : null;
+
+GrantDateFilter.propTypes = {
+  active: PropTypes.bool,
+  applyGrantDateFilter: PropTypes.func,
+};
+
+export const mapStateToProps = propOr({}, "grantDateFilter");
+
+export default connect(mapStateToProps, { applyGrantDateFilter })(
+  GrantDateFilter
+);

package/src/components/GrantFilters.js

@@ -0,0 +1,28 @@
+import React from "react";
+import { connect } from "react-redux";
+import { bindActionCreators } from "redux";
+import { addGrantFilter, resetGrantFilters } from "../routines";
+import { getGrantAvailableFilters } from "../selectors";
+
+const AvailableFilters = React.lazy(() =>
+  import("@truedat/core/components/AvailableFilters")
+);
+
+const mapStateToProps = (state) => {
+  return {
+    filters: getGrantAvailableFilters(state),
+    disabled: state.grantFiltersLoading,
+    loading: state.grantFiltersLoading,
+  };
+};
+
+const mapDispatchToProps = (dispatch) =>
+  bindActionCreators(
+    {
+      addFilter: addGrantFilter,
+      resetFilters: resetGrantFilters,
+    },
+    dispatch
+  );
+
+export default connect(mapStateToProps, mapDispatchToProps)(AvailableFilters);

package/src/components/GrantFiltersLoader.js

@@ -0,0 +1,24 @@
+import { connect } from "react-redux";
+import { bindActionCreators } from "redux";
+import { FiltersLoader } from "@truedat/core/components";
+import { makeActiveFiltersSelector } from "@truedat/core/selectors";
+import { clearGrantFilters, fetchGrantFilters } from "../routines";
+
+const mapDispatchToProps = (dispatch) =>
+  bindActionCreators(
+    { clearFilters: clearGrantFilters, fetchFilters: fetchGrantFilters },
+    dispatch
+  );
+
+const makeMapStateToProps = () => {
+  const activeFiltersSelector = makeActiveFiltersSelector("grantActiveFilters");
+  const mapStateToProps = (state, props) => {
+    return {
+      selectedFilter: state.grantSelectedFilter,
+      filters: activeFiltersSelector(state, props),
+    };
+  };
+  return mapStateToProps;
+};
+
+export default connect(makeMapStateToProps, mapDispatchToProps)(FiltersLoader);

package/src/components/GrantSelectedFilters.js

@@ -0,0 +1,63 @@
+import _ from "lodash/fp";
+import { bindActionCreators } from "redux";
+import { connect } from "react-redux";
+import { makeOption } from "@truedat/core/services/i18n";
+import { SelectedFilters } from "@truedat/core/components";
+import {
+  closeGrantFilter,
+  openGrantFilter,
+  removeGrantFilter,
+  resetGrantFilters,
+  toggleGrantFilterValue,
+} from "../routines";
+import {
+  getGrantSelectedFilterActiveValues,
+  getGrantSelectedFilters,
+  getGrantSelectedFilterValues,
+} from "../selectors";
+
+const translations = (formatMessage) => ({
+  "active.raw": (v) =>
+    formatMessage({ id: `filters.active.raw.${v}`, defaultMessage: v }),
+  "execution_result_info.result_text": (v) => formatMessage({ id: v }),
+});
+
+export const mapStateToProps = (state, ownProps) => {
+  const formatMessage = _.pathOr(_.prop("id"), "intl.formatMessage")(ownProps);
+  const { grantSelectedFilter: selectedFilter } = state;
+
+  const i18nValues = _.flow(
+    getGrantSelectedFilterValues,
+    _.map(makeOption(translations(formatMessage), selectedFilter))
+  )(state);
+
+  // const values = _.flow(
+  //   getGrantSelectedFilterValues,
+  //   _.map((v) => ({ text: v, value: v }))
+  // )(state);
+
+  // _.map(
+  //   makeOption(translations(formatMessage, structureTypes), selectedFilter)
+  // )(selectedFilterValues),
+
+  return {
+    selectedFilter,
+    selectedFilters: getGrantSelectedFilters(state),
+    selectedFilterActiveValues: getGrantSelectedFilterActiveValues(state),
+    selectedFilterValues: i18nValues,
+  };
+};
+
+const mapDispatchToProps = (dispatch) =>
+  bindActionCreators(
+    {
+      closeFilter: closeGrantFilter,
+      openFilter: openGrantFilter,
+      removeFilter: removeGrantFilter,
+      resetFilters: resetGrantFilters,
+      toggleFilterValue: toggleGrantFilterValue,
+    },
+    dispatch
+  );
+
+export default connect(mapStateToProps, mapDispatchToProps)(SelectedFilters);

package/src/components/Grants.js

@@ -0,0 +1,49 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { Header, Icon, Segment, Dimmer, Loader } from "semantic-ui-react";
+import { FormattedMessage } from "react-intl";
+
+import GrantDateFilter from "./GrantDateFilter";
+import GrantsSearch from "./GrantsSearch";
+import GrantsTable from "./GrantsTable";
+//import JobsLabelResults from "./JobsLabelResults";
+import GrantsLabelResults from "./GrantsLabelResults";
+
+import GrantSelectedFilters from "./GrantSelectedFilters";
+import GrantsPagination from "./GrantsPagination";
+
+export const Grants = ({ grantsLoading }) => (
+  <Segment>
+    <Header as="h2">
+      <Icon circular name="cogs" />
+      <Header.Content>
+        <FormattedMessage id="grants.header" />
+        <Header.Subheader>
+          <FormattedMessage id="grants.subheader" />
+        </Header.Subheader>
+      </Header.Content>
+    </Header>
+    <Segment attached="bottom">
+      <GrantsSearch />
+      <GrantSelectedFilters />
+      <GrantDateFilter />
+      <Dimmer.Dimmable dimmed={grantsLoading}>
+        <Dimmer active={grantsLoading} inverted>
+          <Loader />
+        </Dimmer>
+      </Dimmer.Dimmable>
+      <GrantsLabelResults />
+      <GrantsTable />
+      <GrantsPagination />
+    </Segment>
+  </Segment>
+);
+
+Grants.propTypes = {
+  grantsLoading: PropTypes.bool,
+};
+
+const mapStateToProps = ({ grantsLoading }) => ({ grantsLoading });
+
+export default connect(mapStateToProps)(Grants);

package/src/components/GrantsLabelResults.js

@@ -0,0 +1,32 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { FormattedMessage } from "react-intl";
+import { Label } from "semantic-ui-react";
+
+export const GrantsLabelResults = ({ grantCount, grantsLoading }) => {
+  return (
+    <Label className="grants-label-results">
+      {grantsLoading ? (
+        <FormattedMessage id="grants.searching" />
+      ) : (
+        <FormattedMessage
+          id="grants.retrieved.results"
+          values={{ count: grantCount }}
+        />
+      )}
+    </Label>
+  );
+};
+
+GrantsLabelResults.propTypes = {
+  grantCount: PropTypes.number,
+  grantsLoading: PropTypes.bool,
+};
+
+const mapStateToProps = ({ grantCount, grantsLoading }) => ({
+  grantCount,
+  grantsLoading,
+});
+
+export default connect(mapStateToProps)(GrantsLabelResults);

package/src/components/GrantsLoader.js

@@ -0,0 +1,41 @@
+import { useEffect } from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { makeSearchQuerySelector } from "@truedat/core/selectors";
+import { clearGrants, fetchGrants } from "../routines";
+
+export const GrantsLoader = ({ clearGrants, fetchGrants, payload }) => {
+  useEffect(() => {
+    return () => {
+      clearGrants();
+    };
+  }, [clearGrants]);
+  useEffect(() => {
+    fetchGrants(payload);
+  }, [payload, fetchGrants]);
+  return null;
+};
+
+GrantsLoader.propTypes = {
+  clearGrants: PropTypes.func,
+  fetchGrants: PropTypes.func,
+  payload: PropTypes.object,
+};
+
+const makeMapStateToProps = () => {
+  const searchQuerySelector = makeSearchQuerySelector(
+    "grantQuery",
+    "grantActiveFilters",
+    "grantDateFilter"
+  );
+  const mapStateToProps = (state, props) => {
+    return {
+      payload: searchQuerySelector(state, props),
+    };
+  };
+  return mapStateToProps;
+};
+
+export default connect(makeMapStateToProps, { clearGrants, fetchGrants })(
+  GrantsLoader
+);

package/src/components/GrantsPagination.js

@@ -0,0 +1,14 @@
+import { connect } from "react-redux";
+import { bindActionCreators } from "redux";
+import { Pagination } from "@truedat/core/components";
+import { selectGrantPage } from "../routines";
+
+const mapDispatchToProps = (dispatch) =>
+  bindActionCreators({ selectPage: selectGrantPage }, dispatch);
+
+const mapStateToProps = ({ grantQuery, grantCount, grantsPageSize }) => ({
+  activePage: grantQuery?.page,
+  totalPages: Math.ceil(grantCount / grantsPageSize),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(Pagination);

package/src/components/GrantsRoutes.js

@@ -0,0 +1,33 @@
+import React from "react";
+import { Route } from "react-router-dom";
+import { Unauthorized } from "@truedat/core/components";
+import { useAuthorized } from "@truedat/core/hooks";
+import { GRANTS } from "@truedat/core/routes";
+import GrantsTable from "./GrantsTable";
+import GrantFiltersLoader from "./GrantFiltersLoader";
+import GrantsLoader from "./GrantsLoader";
+import StructureGrants from "./StructureGrants";
+import GrantFilters from "./GrantFilters";
+import Grants from "./Grants";
+
+export const GrantsRoutes = () => {
+  const authorized = true; //useAuthorized("grants");
+  return (
+    <Route
+      path={GRANTS}
+      render={() =>
+        authorized ? (
+          <>
+            <GrantsLoader />
+            <GrantFiltersLoader />
+            <Grants />
+          </>
+        ) : (
+          <Unauthorized />
+        )
+      }
+    />
+  );
+};
+
+export default GrantsRoutes;

package/src/components/GrantsSearch.js

@@ -0,0 +1,51 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { Button, Icon, Input } from "semantic-ui-react";
+import { useIntl } from "react-intl";
+import { searchGrants, toggleGrantDateFilter } from "../routines";
+import GrantFilters from "./GrantFilters";
+
+export const GrantsSearch = ({
+  query,
+  searchGrants,
+  grantDateFilter,
+  toggleGrantDateFilter,
+}) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <Input
+      value={query}
+      onChange={(_e, data) => searchGrants({ query: data.value })}
+      iconPosition="left"
+      action
+      placeholder={formatMessage({ id: "structures.search.placeholder" })}
+    >
+      <Icon name="search" link />
+      <input />
+      <Button
+        icon="calendar alternate outline"
+        active={grantDateFilter?.active}
+        onClick={() => toggleGrantDateFilter()}
+      />
+      <GrantFilters />
+    </Input>
+  );
+};
+
+GrantsSearch.propTypes = {
+  query: PropTypes.string,
+  searchGrants: PropTypes.func,
+  grantDateFilter: PropTypes.object,
+  toggleGrantDateFilter: PropTypes.func,
+};
+
+const mapStateToProps = ({ grantQuery }) => ({
+  query: grantQuery?.query,
+});
+
+export default connect(mapStateToProps, {
+  searchGrants,
+  toggleGrantDateFilter,
+})(GrantsSearch);