@abtnode/ux 1.8.26 → 1.8.27

package/lib/team/members/member.js

@@ -0,0 +1,336 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Member;
+
+var _react = require("react");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _notistack = require("notistack");
+
+var _Dialog = _interopRequireDefault(require("@arcblock/ux/lib/Dialog"));
+
+var _Spinner = _interopRequireDefault(require("@arcblock/ux/lib/Spinner"));
+
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+
+var _Avatar = _interopRequireDefault(require("@mui/material/Avatar"));
+
+var _Tabs = _interopRequireDefault(require("@arcblock/ux/lib/Tabs"));
+
+var _InfoRow = _interopRequireDefault(require("@arcblock/ux/lib/InfoRow"));
+
+var _context = require("@arcblock/ux/lib/Locale/context");
+
+var _Address = _interopRequireDefault(require("@arcblock/did-connect/lib/Address"));
+
+var _ForbidLoginIcon = _interopRequireDefault(require("@arcblock/icons/lib/ForbidLoginIcon"));
+
+var _AllowLoginIcon = _interopRequireDefault(require("@arcblock/icons/lib/AllowLoginIcon"));
+
+var _constant = require("@abtnode/constant");
+
+var _permission = _interopRequireDefault(require("../../permission"));
+
+var _node = require("../../contexts/node");
+
+var _team = require("../../contexts/team");
+
+var _util = require("../../util");
+
+var _passportIssuances = _interopRequireDefault(require("./passport-issuances"));
+
+var _passports = _interopRequireDefault(require("./passports"));
+
+var _toggleUserApproval = _interopRequireDefault(require("./toggle-user-approval"));
+
+var _util2 = require("./util");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject, _templateObject2, _templateObject3;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+function Member(_ref) {
+  let {
+    userDid,
+    onCancel,
+    initTab
+  } = _ref;
+  const {
+    api,
+    ws: {
+      useSubscription
+    },
+    inService
+  } = (0, _node.useNodeContext)();
+  const {
+    roles,
+    teamDid,
+    enablePassportIssuance
+  } = (0, _team.useTeamContext)();
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const [issuances, setIssuances] = (0, _react.useState)(null);
+  const [user, setUser] = (0, _react.useState)(null);
+  const {
+    enqueueSnackbar
+  } = (0, _notistack.useSnackbar)();
+  const [tab, setTab] = (0, _react.useState)(initTab || 'info');
+
+  const getData = async () => {
+    try {
+      const res = await api.doBatchQuery({
+        getUser: {
+          input: {
+            teamDid,
+            user: {
+              did: userDid
+            }
+          }
+        },
+        getPassportIssuances: {
+          input: {
+            teamDid,
+            ownerDid: userDid
+          }
+        }
+      });
+
+      if (res.getUser.user) {
+        res.getUser.user.avatar = (0, _util2.parseAvatar)(res.getUser.user.avatar, teamDid, inService);
+      }
+
+      setUser(res.getUser.user || {});
+      setIssuances(res.getPassportIssuances.list || []);
+    } catch (err) {
+      enqueueSnackbar((0, _util.formatError)(err), {
+        autoHideDuration: 5000,
+        variant: 'error'
+      });
+    }
+  };
+
+  (0, _react.useEffect)(() => {
+    if (teamDid) {
+      getData();
+    }
+  }, [userDid, teamDid]); // eslint-disable-line
+
+  const onUserEvent = data => {
+    if (data.teamDid === teamDid && data.user && data.user.did === userDid) {
+      getData();
+    }
+  };
+
+  useSubscription(_constant.EVENTS.USER_UPDATED, onUserEvent, [userDid, teamDid]);
+  (0, _react.useEffect)(() => {
+    if (issuances && !issuances.length && tab === 'issuances') {
+      setTab('info');
+    }
+  }, [issuances]); // eslint-disable-line
+  // tab
+
+  const Info = () => {
+    const rows = user ? [{
+      name: t('team.member.name'),
+      value: user.fullName
+    }, {
+      name: t('common.email'),
+      value: user.email
+    }, {
+      name: t('team.member.allowLogin'),
+      value: user.approved ? t('common.yes') : t('common.no')
+    }, {
+      name: t('team.member.lastLogin'),
+      value: (0, _util.formatToDatetime)(user.updatedAt)
+    }, {
+      name: t('common.createdAt'),
+      value: (0, _util.formatToDatetime)(user.createdAt)
+    }, {
+      name: t('common.remark'),
+      value: user.remark || '--'
+    }].filter(Boolean) : [];
+    return rows.map(row => {
+      if (row.name === t('common.did')) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InfoRow.default, {
+          valueComponent: "div",
+          nameWidth: 120,
+          name: row.name,
+          nameFormatter: () => t('common.did'),
+          children: row.value
+        }, row.name);
+      }
+
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InfoRow.default, {
+        style: {
+          alignItems: 'flex-start'
+        },
+        valueComponent: "div",
+        nameWidth: 120,
+        name: row.name,
+        children: row.value
+      }, row.name);
+    });
+  };
+
+  const tabConfigs = {
+    info: {
+      label: t('common.basicInfo'),
+      value: 'info',
+      component: Info
+    },
+    passports: {
+      label: t('common.passport'),
+      value: 'passports',
+      component: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_passports.default, {
+        user: user,
+        teamDid: teamDid,
+        roles: roles,
+        onCreate: () => {
+          getData(teamDid);
+          setTab('issuances');
+        },
+        onRefresh: () => {
+          getData(teamDid);
+        }
+      })
+    },
+    issuances: {
+      label: t('team.passport.issuance.pending'),
+      value: 'issuances',
+      component: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_passportIssuances.default, {
+        issuances: issuances || [],
+        teamDid: teamDid,
+        onRefresh: () => getData(teamDid)
+      })
+    }
+  };
+  const tabs = Object.values(tabConfigs).map(_ref2 => {
+    let {
+      label,
+      value
+    } = _ref2;
+    return {
+      label,
+      value
+    };
+  }).filter(x => {
+    if (x.value === 'issuances') {
+      return enablePassportIssuance && issuances && !!issuances.length;
+    }
+
+    return true;
+  });
+  const tabConfig = tabConfigs[tab] || tabConfigs.info;
+
+  const onTabChange = newTab => {
+    setTab(newTab);
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dialog.default, {
+    title: t('common.member'),
+    onClose: onCancel,
+    open: true,
+    PaperProps: {
+      style: {
+        maxWidth: 632,
+        minHeight: '80vh'
+      }
+    },
+    fullWidth: true,
+    actions: user && /*#__PURE__*/(0, _jsxRuntime.jsx)(_permission.default, {
+      permission: inService ? '' : 'mutate_team',
+      role: inService ? _util.BlockletAdminRoles : [],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_toggleUserApproval.default, {
+        user: user,
+        children: _ref3 => {
+          let {
+            open
+          } = _ref3;
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(BlockButton, {
+            onClick: open,
+            children: [user.approved ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ForbidLoginIcon.default, {
+              style: {
+                fontSize: '1.2em',
+                marginRight: '0.4em'
+              }
+            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_AllowLoginIcon.default, {
+              style: {
+                fontSize: '1.2em',
+                marginRight: '0.4em'
+              }
+            }), user.approved ? t('team.member.forbidLogin') : t('team.member.allowLogin')]
+          });
+        }
+      })
+    }),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Div, {
+      children: [!user && /*#__PURE__*/(0, _jsxRuntime.jsx)(Center, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {})
+      }), user && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+          display: "flex",
+          alignItems: "center",
+          className: "info",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
+            src: user.avatar,
+            style: {
+              width: 48,
+              height: 48,
+              backgroundColor: 'transparent',
+              marginRight: 16
+            }
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+              className: "name",
+              children: user.fullName
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+              className: "did",
+              mt: 1,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Address.default, {
+                children: user.did
+              })
+            })]
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+          mx: 3,
+          className: "tabs",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tabs.default, {
+            tabs: tabs,
+            current: tab,
+            onChange: onTabChange,
+            scrollButtons: "auto"
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "body",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(tabConfig.component, {})
+        })]
+      })]
+    })
+  });
+}
+
+Member.propTypes = {
+  userDid: _propTypes.default.string.isRequired,
+  onCancel: _propTypes.default.func.isRequired,
+  initTab: _propTypes.default.string
+};
+Member.defaultProps = {
+  initTab: 'info'
+};
+
+const Div = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .info {\n    .name {\n      font-weight: 400;\n      font-size: 18px;\n      line-height: 25px;\n      color: #222222;\n    }\n  }\n\n  .tabs {\n    margin-top: 24px;\n    margin-left: 0;\n    margin-right: 0;\n  }\n\n  .body {\n    margin-top: 24px;\n  }\n"])));
+
+const Center = _styled.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  flex: 1;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 200px;\n"])));
+
+const BlockButton = _styled.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  flex-shrink: 0;\n  width: 100%;\n  height: 64px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  color: #999;\n  fill: #999;\n  font-size: 16px;\n  border-top: 1px solid #f0f0f0;\n  position: sticky;\n  bottom: 0;\n  background: #fff;\n  z-index: 10;\n"])));

package/lib/team/members/passport-issuances.js

@@ -0,0 +1,181 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = PassportIssuances;
+
+var _react = require("react");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _notistack = require("notistack");
+
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+
+var _context = require("@arcblock/ux/lib/Locale/context");
+
+var _node = require("../../contexts/node");
+
+var _team = require("../../contexts/team");
+
+var _confirm = _interopRequireDefault(require("../../confirm"));
+
+var _permission = _interopRequireDefault(require("../../permission"));
+
+var _clickToCopy = _interopRequireDefault(require("../../click-to-copy"));
+
+var _passportTag = _interopRequireDefault(require("../../passport-tag"));
+
+var _util = require("../../util");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+function PassportIssuances(_ref) {
+  let {
+    issuances,
+    teamDid,
+    onRefresh
+  } = _ref;
+  const {
+    api: client,
+    inService
+  } = (0, _node.useNodeContext)();
+  const {
+    t
+  } = (0, _react.useContext)(_context.LocaleContext);
+  const [delConfirm, setDelConfirm] = (0, _react.useState)(null);
+  const [loading, setLoading] = (0, _react.useState)(false);
+  const {
+    enqueueSnackbar
+  } = (0, _notistack.useSnackbar)();
+  const {
+    endpoint
+  } = (0, _team.useTeamContext)();
+
+  const deleteIssuance = async _ref2 => {
+    let {
+      id
+    } = _ref2;
+
+    if (loading) {
+      return;
+    }
+
+    setLoading(true);
+
+    try {
+      await client.deletePassportIssuance({
+        input: {
+          teamDid,
+          sessionId: id
+        }
+      });
+      onRefresh();
+    } catch (error) {
+      enqueueSnackbar(error.message, {
+        autoHideDuration: 5000,
+        variant: 'error'
+      });
+    } finally {
+      setLoading(false);
+      setDelConfirm(null);
+    }
+  };
+
+  const onCancel = () => {
+    setLoading(false);
+    setDelConfirm(null);
+  };
+
+  const getLink = column => endpoint ? (0, _util.getIssuePassportLink)({
+    id: column.id,
+    endpoint
+  }) : ''; // eslint-disable-next-line react/prop-types
+  // eslint-disable-next-line react/no-unstable-nested-components
+
+
+  function Issuance(_ref3) {
+    let {
+      data: d
+    } = _ref3;
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "issuance",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+        display: "flex",
+        justifyContent: "space-between",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_permission.default, {
+          permission: inService ? '' : 'mutate_team',
+          role: inService ? _util.BlockletAdminRoles : [],
+          children: can => can ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_passportTag.default, {
+            passport: {
+              title: d.title,
+              name: d.name
+            },
+            onDelete: () => setDelConfirm({
+              title: t('team.passport.issuance.delete.title'),
+              description: t('team.passport.issuance.delete.description', {
+                link: getLink(d)
+              }),
+              confirm: t('common.delConfirm'),
+              cancel: t('common.cancel'),
+              onConfirm: () => {
+                deleteIssuance(d);
+              },
+              onCancel
+            })
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_passportTag.default, {
+            passport: {
+              title: d.title,
+              name: d.name
+            }
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          style: {
+            color: '#999'
+          },
+          children: [t('common.expires'), ":\xA0", (0, _util.formatToDatetime)(d.expireDate)]
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+        mt: 2,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_clickToCopy.default, {
+          children: getLink(d)
+        })
+      })]
+    });
+  }
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Div, {
+    children: [issuances.map(x => /*#__PURE__*/(0, _jsxRuntime.jsx)(Issuance, {
+      data: x
+    })), delConfirm && /*#__PURE__*/(0, _jsxRuntime.jsx)(_confirm.default, {
+      title: delConfirm.title,
+      description: delConfirm.description,
+      confirm: delConfirm.confirm,
+      cancel: delConfirm.cancel,
+      params: delConfirm.params,
+      onConfirm: delConfirm.onConfirm,
+      onCancel: delConfirm.onCancel
+    })]
+  });
+}
+
+const Div = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .MuiTableHead-root {\n    display: none;\n  }\n  .issuance {\n    padding: 16px 0;\n    border-bottom: 1px solid #f0f0f0;\n    .MuiTypography-root {\n      display: inline-block;\n      width: 100%;\n      background: #f3f3f3;\n      border-radius: 4px;\n      padding-top: 6px;\n      padding-bottom: 6px;\n    }\n  }\n"])));
+
+PassportIssuances.propTypes = {
+  teamDid: _propTypes.default.string.isRequired,
+  issuances: _propTypes.default.array,
+  onRefresh: _propTypes.default.func
+};
+PassportIssuances.defaultProps = {
+  issuances: [],
+  onRefresh: () => {}
+};