@truedat/dd 4.28.3 → 4.28.7

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [4.28.6] 2021-09-20
+
+### Added
+
+- [TD-3950] My grants table
+
+## [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.3",
+  "version": "4.28.7",
   "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.3",
+    "@truedat/test": "4.28.7",
     "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.3",
-    "@truedat/core": "4.28.3",
-    "@truedat/df": "4.28.3",
+    "@truedat/auth": "4.28.7",
+    "@truedat/core": "4.28.7",
+    "@truedat/df": "4.28.7",
     "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": "9e024e24bbd8c461ca5daabf16a4dbffa7e0a1a6"
+  "gitHead": "d5cfc6f850ec38066139c97836b75d2f21d61d54"
 }

package/src/api.js

@@ -4,11 +4,15 @@ 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";
+const API_MY_GRANT_FILTERS_SEARCH = "/api/grant_filters/search/mine";
+const API_MY_GRANTS_SEARCH = "/api/grants/search/mine";
 const API_NODE = "/api/nodes/:id";
 const API_NODES = "/api/nodes";
 const API_PROFILE_GROUP = "/api/profile_execution_groups/:id";
@@ -40,10 +44,14 @@ 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,
+  API_MY_GRANTS_SEARCH,
+  API_MY_GRANT_FILTERS_SEARCH,
   API_NODE,
   API_NODES,
   API_PROFILE_GROUP,

package/src/components/DictionaryRoutes.js

@@ -9,6 +9,8 @@ import {
   STRUCTURE_TYPES,
   SYSTEMS,
   GRANTS_REQUESTS_CHECKOUT,
+  GRANTS,
+  MY_GRANTS,
 } from "@truedat/core/routes";
 import ProfileExecution from "./ProfileExecution";
 import ProfileExecutionBreadcrumbs from "./ProfileExecutionBreadcrumbs";
@@ -24,6 +26,9 @@ import StructureTypesRoutes from "./StructureTypesRoutes";
 import SystemsRoutes from "./SystemsRoutes";
 import SystemsLoader from "./SystemsLoader";
 import StructureGrantCartCheckout from "./StructureGrantCartCheckout";
+import GrantFiltersLoader from "./GrantFiltersLoader";
+import GrantsLoader from "./GrantsLoader";
+import Grants from "./Grants";
 
 const TemplatesLoader = React.lazy(() =>
   import("@truedat/df/templates/components/TemplatesLoader")
@@ -69,6 +74,28 @@ export const DictionaryRoutes = () => {
         path={GRANTS_REQUESTS_CHECKOUT}
         render={() => <StructureGrantCartCheckout />}
       />
+      <Route
+        path={GRANTS}
+        render={() => (
+          <>
+            <GrantsLoader />
+            <GrantFiltersLoader />
+            <Grants />
+          </>
+        )}
+      />
+      <Route
+        path={MY_GRANTS}
+        render={() => {
+          return (
+            <>
+              <GrantsLoader onlyMyGrants />
+              <GrantFiltersLoader onlyMyGrants />
+              <Grants onlyMyGrants />
+            </>
+          );
+        }}
+      />
       <Route path={STRUCTURE_TAGS} render={() => <StructureTagsRoutes />} />
       <Route path={STRUCTURE_TYPES} render={() => <StructureTypesRoutes />} />
       <Route

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,29 @@
+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, props) => {
+  const { onlyMyGrants } = props;
+  const fetchMyGrantsFilters = (payload) => {
+    return fetchGrantFilters({ payload, onlyMyGrants });
+  };
+  return bindActionCreators(
+    { clearFilters: clearGrantFilters, fetchFilters: fetchMyGrantsFilters },
+    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,54 @@
+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, onlyMyGrants }) => (
+  <Segment>
+    <Header as="h2">
+      <Icon circular name="cogs" />
+      <Header.Content>
+        <FormattedMessage
+          id={onlyMyGrants ? "grants.mine.header" : "grants.header"}
+        />
+        <Header.Subheader>
+          <FormattedMessage
+            id={onlyMyGrants ? "grants.mine.subheader" : "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 onlyMyGrants={onlyMyGrants} />
+      <GrantsPagination />
+    </Segment>
+  </Segment>
+);
+
+Grants.propTypes = {
+  grantsLoading: PropTypes.bool,
+  onlyMyGrants: 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,47 @@
+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,
+  onlyMyGrants = false,
+}) => {
+  useEffect(() => {
+    return () => {
+      clearGrants();
+    };
+  }, [clearGrants]);
+  useEffect(() => {
+    fetchGrants({ payload, onlyMyGrants });
+  }, [payload, fetchGrants, onlyMyGrants]);
+  return null;
+};
+
+GrantsLoader.propTypes = {
+  clearGrants: PropTypes.func,
+  fetchGrants: PropTypes.func,
+  payload: PropTypes.object,
+  onlyMyGrants: PropTypes.bool,
+};
+
+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/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);

package/src/components/GrantsTable.js

@@ -0,0 +1,112 @@
+import _ from "lodash/fp";
+import React, { useRef, useState } from "react";
+import PropTypes from "prop-types";
+import { useIntl } from "react-intl";
+import { Table, Header, Icon } from "semantic-ui-react";
+import { connect } from "react-redux";
+import { columnDecoratorComponent } from "@truedat/core/services";
+import { getSortInfo, sortColumn } from "@truedat/core/services/sort";
+import { getGrantsColumns, getGrantsTableColumns } from "../selectors";
+import { sortGrants } from "../routines";
+
+export const GrantsTable = ({
+  columns,
+  grants,
+  grantsLoading,
+  sortGrants,
+  grantsSorting,
+}) => {
+  const { formatMessage } = useIntl();
+  const filteredColumns = _.filter((c) => _.any(_.prop(c.name))(grants))(
+    columns
+  );
+
+  const [sortedColumn, setColumn] = useState(
+    _.prop("column")(getSortInfo(grantsSorting))
+  );
+  const [direction, setDirection] = useState(
+    _.prop("direction")(getSortInfo(grantsSorting))
+  );
+
+  return (
+    <>
+      {!_.isEmpty(grants) && (
+        <Table sortable selectable>
+          <Table.Header>
+            <Table.Row>
+              {columns.map((column, i) => {
+                return (
+                  <Table.HeaderCell
+                    key={i}
+                    width={column.width}
+                    content={formatMessage({
+                      id: `grant.header.${column.name}`,
+                      defaultMessage: column.name,
+                    })}
+                    sorted={
+                      _.path("sort.name")(column) === sortedColumn
+                        ? direction
+                        : null
+                    }
+                    className={_.path("sort.name")(column) ? "" : "disabled"}
+                    onClick={() => {
+                      filteredColumns.includes(column)
+                        ? sortColumn(
+                            column,
+                            sortGrants,
+                            setDirection,
+                            setColumn,
+                            direction,
+                            sortedColumn
+                          )
+                        : null;
+                    }}
+                  />
+                );
+              })}
+            </Table.Row>
+          </Table.Header>
+          <Table.Body>
+            {grants.map((grant, i) => (
+              <Table.Row key={i}>
+                {columns &&
+                  columns.map((column, key) => (
+                    <Table.Cell
+                      key={key}
+                      textAlign={column.textAlign}
+                      content={columnDecoratorComponent(column)(grant)}
+                    />
+                  ))}
+              </Table.Row>
+            ))}
+          </Table.Body>
+        </Table>
+      )}
+      {_.isEmpty(grants) && !grantsLoading && (
+        <Header as="h4">
+          <Icon name="search" />
+          <Header.Content>
+            {formatMessage({ id: "grants.search.results.empty" })}
+          </Header.Content>
+        </Header>
+      )}
+    </>
+  );
+};
+
+GrantsTable.propTypes = {
+  columns: PropTypes.array,
+  grants: PropTypes.array,
+  grantsLoading: PropTypes.bool,
+  sortGrants: PropTypes.func,
+  grantsSorting: PropTypes.array,
+};
+
+const mapStateToProps = (state, { onlyMyGrants }) => ({
+  columns: getGrantsTableColumns({ ...state, onlyMyGrants }),
+  grants: state.grants,
+  grantsLoading: state.grantsLoading,
+  grantsSorting: _.path("grantQuery.sort")(state),
+});
+
+export default connect(mapStateToProps, { sortGrants })(GrantsTable);