@hisptz/react-ui/build/es/components/DictionaryAnalysis/Shared/Componets/AccesibilityAndSharing/index.js

A collection of reusable complex DHIS2 react ui components.

import { useDataQuery } from "@dhis2/app-runtime";
import i18n from "@dhis2/d2-i18n";
import { TableHead, TableBody, DataTable, DataTableRow, DataTableCell, DataTableColumnHeader } from "@dhis2/ui";
import PropTypes from "prop-types";
import React, { useEffect } from "react";
import { displayAccessPermission } from "../../../Utils/Functions/DataElementDictionaryFunctions";
import { dateTimeDisplay } from "../../../Utils/Functions/Shared";
import Error from "../Error/ErrorAPIResult";
import Loader from "../Loaders/Loader";
const query = {
  sources: {
    resource: "",
    id: _ref => {
      let {
        id
      } = _ref;
      return id;
    },
    params: {
      fields: ["created", "user[displayName]", "lastUpdated", "lastUpdatedBy[displayName]", "userGroupAccesses[id,displayName,access]", "userAccesses[id,displayName,access]"]
    }
  }
};

function displayDataType(resourceType) {
  if (resourceType === "dataElements") {
    return " Data Element ";
  } else {
    if (resourceType === "indicators") {
      return " Indicator ";
    }

    if (resourceType === "dataStore/functions") {
      return " Function ";
    }
  }
}

function accessAndSharingQuery(resourceType) {
  query.sources.resource = resourceType;
}

export default function AccessibilityAndSharing(props) {
  var _result$user, _result$lastUpdatedBy, _result$userAccesses, _result$userAccesses2, _result$userGroupAcce, _result$userGroupAcce2;

  const id = props.id;
  const resourceType = props.resourceType;
  useEffect(() => {
    accessAndSharingQuery(resourceType);
    refetch({
      id
    });
  }, [id]);
  const {
    loading,
    error,
    data,
    refetch
  } = useDataQuery(query, {
    variables: {
      id
    }
  });
  const result = data === null || data === void 0 ? void 0 : data.sources;

  if (loading) {
    return /*#__PURE__*/React.createElement(Loader, {
      text: ""
    });
  }

  if (error) {
    return /*#__PURE__*/React.createElement(Error, {
      error: error
    });
  }

  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", null, i18n.t("Accessibility & Sharing Settings"), " "), /*#__PURE__*/React.createElement("p", null, " ", i18n.t("This"), displayDataType(resourceType), " ", i18n.t("was first created on"), " ", /*#__PURE__*/React.createElement("i", null, " ", dateTimeDisplay(result === null || result === void 0 ? void 0 : result.created)), " ", i18n.t("by"), " ", /*#__PURE__*/React.createElement("b", null, result === null || result === void 0 ? void 0 : (_result$user = result.user) === null || _result$user === void 0 ? void 0 : _result$user.displayName, " "), " ", i18n.t("and last updated on"), " ", /*#__PURE__*/React.createElement("i", null, dateTimeDisplay(result === null || result === void 0 ? void 0 : result.lastUpdated)), " ", i18n.t("by"), " ", /*#__PURE__*/React.createElement("b", null, result === null || result === void 0 ? void 0 : (_result$lastUpdatedBy = result.lastUpdatedBy) === null || _result$lastUpdatedBy === void 0 ? void 0 : _result$lastUpdatedBy.displayName), " ."), /*#__PURE__*/React.createElement("p", null, displayDataType(resourceType), " ", i18n.t("will be visible for users with the following access:")), /*#__PURE__*/React.createElement(DataTable, null, /*#__PURE__*/React.createElement(TableHead, null, /*#__PURE__*/React.createElement(DataTableRow, null, /*#__PURE__*/React.createElement(DataTableColumnHeader, null), /*#__PURE__*/React.createElement(DataTableColumnHeader, null, i18n.t("Details")))), /*#__PURE__*/React.createElement(TableBody, null, /*#__PURE__*/React.createElement(DataTableRow, null, /*#__PURE__*/React.createElement(DataTableCell, {
    bordered: true,
    tag: "th"
  }, i18n.t("User Access")), /*#__PURE__*/React.createElement(DataTableCell, {
    bordered: true
  }, i18n.t((result === null || result === void 0 ? void 0 : (_result$userAccesses = result.userAccesses) === null || _result$userAccesses === void 0 ? void 0 : _result$userAccesses.length) === 0 ? "No access granted" : ""), /*#__PURE__*/React.createElement("ul", null, result === null || result === void 0 ? void 0 : (_result$userAccesses2 = result.userAccesses) === null || _result$userAccesses2 === void 0 ? void 0 : _result$userAccesses2.map(dt => {
    return /*#__PURE__*/React.createElement("li", {
      key: dt.id
    }, dt === null || dt === void 0 ? void 0 : dt.displayName, " ", i18n.t("can"), " ", /*#__PURE__*/React.createElement("i", null, displayAccessPermission(dt.access), " "), " ");
  })))), /*#__PURE__*/React.createElement(DataTableRow, null, /*#__PURE__*/React.createElement(DataTableCell, {
    bordered: true,
    tag: "th"
  }, i18n.t("User Group Access")), /*#__PURE__*/React.createElement(DataTableCell, {
    bordered: true
  }, i18n.t((result === null || result === void 0 ? void 0 : (_result$userGroupAcce = result.userGroupAccesses) === null || _result$userGroupAcce === void 0 ? void 0 : _result$userGroupAcce.length) === 0 ? "No access granted" : ""), /*#__PURE__*/React.createElement("ul", null, result === null || result === void 0 ? void 0 : (_result$userGroupAcce2 = result.userGroupAccesses) === null || _result$userGroupAcce2 === void 0 ? void 0 : _result$userGroupAcce2.map(dt => {
    return /*#__PURE__*/React.createElement("li", {
      key: dt.id
    }, dt === null || dt === void 0 ? void 0 : dt.displayName, " ", i18n.t("can"), " ", /*#__PURE__*/React.createElement("i", null, displayAccessPermission(dt.access)), " ");
  })))))));
}
AccessibilityAndSharing.propTypes = {
  id: PropTypes.string.isRequired,
  resourceType: PropTypes.string.isRequired
};