@vidispine/vdt-materialui 23.2.0-pre.2 → 23.2.0

package/dist/es/group/CreateGroupDialog/components/CreateGroupForm.js

@@ -0,0 +1,114 @@
+import { jsxs as g, jsx as t } from "react/jsx-runtime";
+import { useRef as h, useState as s } from "react";
+import { withStyles as k, TextField as o, Button as G } from "@material-ui/core";
+import { Autocomplete as u } from "@material-ui/lab";
+const q = (n) => ({
+  root: {
+    display: "flex",
+    flexDirection: "column",
+    "& > *": {
+      marginTop: n.spacing(1),
+      marginBottom: n.spacing(1)
+    }
+  },
+  action: {
+    display: "flex",
+    justifyContent: "flex-end"
+  }
+});
+function w({
+  classes: n,
+  onSubmit: C,
+  onCancel: b,
+  submitText: v = "Create",
+  cancelText: x = "Cancel",
+  users: N,
+  groups: c,
+  roles: S,
+  groupNameLabel: y = "Group name",
+  descriptionLabel: L = "Description",
+  usersLabel: D = "Add users",
+  rolesLabel: I = "Add roles",
+  parentGroupsLabel: O = "Add parent groups",
+  childGroupsLabel: R = "Add child groups"
+}) {
+  const m = h(), l = h(), [d, A] = s([]), [p, F] = s([]), [a, _] = s([]), [f, j] = s([]), B = (e) => {
+    e.preventDefault();
+    const r = {
+      groupName: m.current.value,
+      ...l.current.value && { description: l.current.value },
+      parentGroupList: {
+        group: p.concat(f).map((i) => ({ groupName: i }))
+      },
+      childGroupList: {
+        group: a.map((i) => ({ groupName: i }))
+      },
+      userList: {
+        user: d.map((i) => ({ userName: i }))
+      }
+    };
+    C({ groupDocument: r });
+  }, P = (e) => a.includes(e), T = (e) => p.includes(e);
+  return /* @__PURE__ */ g("form", { className: n.root, onSubmit: B, children: [
+    /* @__PURE__ */ t(o, { required: !0, name: "groupName", label: y, inputRef: m }),
+    /* @__PURE__ */ t(o, { name: "description", label: L, inputRef: l }),
+    /* @__PURE__ */ t(
+      u,
+      {
+        name: "users",
+        multiple: !0,
+        options: N,
+        filterSelectedOptions: !0,
+        value: d,
+        onChange: (e, r) => A(r),
+        renderInput: (e) => /* @__PURE__ */ t(o, { ...e, label: D })
+      }
+    ),
+    /* @__PURE__ */ t(
+      u,
+      {
+        name: "roles",
+        multiple: !0,
+        options: S,
+        filterSelectedOptions: !0,
+        value: f,
+        onChange: (e, r) => j(r),
+        renderInput: (e) => /* @__PURE__ */ t(o, { ...e, label: I })
+      }
+    ),
+    /* @__PURE__ */ t(
+      u,
+      {
+        name: "parentGroups",
+        multiple: !0,
+        options: c,
+        filterSelectedOptions: !0,
+        value: p,
+        getOptionDisabled: P,
+        onChange: (e, r) => F(r),
+        renderInput: (e) => /* @__PURE__ */ t(o, { ...e, label: O })
+      }
+    ),
+    /* @__PURE__ */ t(
+      u,
+      {
+        name: "childGroups",
+        multiple: !0,
+        options: c,
+        filterSelectedOptions: !0,
+        value: a,
+        getOptionDisabled: T,
+        onChange: (e, r) => _(r),
+        renderInput: (e) => /* @__PURE__ */ t(o, { ...e, label: R })
+      }
+    ),
+    /* @__PURE__ */ g("div", { className: n.action, children: [
+      /* @__PURE__ */ t(G, { onClick: b, children: x }),
+      /* @__PURE__ */ t(G, { variant: "contained", color: "primary", type: "submit", children: v })
+    ] })
+  ] });
+}
+const E = k(q, { name: "VdtCreateGroupForm" })(w);
+export {
+  E as default
+};

package/dist/es/group/CreateGroupDialog/index.js

@@ -0,0 +1,7 @@
+import { withStyles as o } from "@material-ui/core";
+import e, { styles as t } from "./CreateGroupDialog.js";
+const a = o(t, { name: "VdtCreateGroupDialog" })(e);
+a.displayName = "CreateGroupDialog";
+export {
+  a as default
+};

package/dist/es/group/EditGroupDialog/EditGroupDialog.js

@@ -0,0 +1,61 @@
+import { jsxs as m, jsx as t } from "react/jsx-runtime";
+import d from "clsx";
+import o from "prop-types";
+import { DialogTitle as u, DialogContent as c } from "@material-ui/core";
+import f from "@vidispine/proptypes";
+import g from "./components/EditGroupForm.js";
+const x = () => ({
+  root: {},
+  DialogTitle: {},
+  DialogContent: {}
+});
+function e({
+  classes: r,
+  className: p,
+  groupType: s,
+  onClose: l,
+  onSubmit: n,
+  titleText: i,
+  EditGroupFormProps: a
+}) {
+  return /* @__PURE__ */ m("div", { className: d(r.root, "VdtEditGroupDialog-root", p), children: [
+    i && /* @__PURE__ */ t(u, { className: r.DialogTitle, children: i }),
+    /* @__PURE__ */ t(c, { className: r.DialogContent, children: /* @__PURE__ */ t(
+      g,
+      {
+        onSubmit: n,
+        onCancel: l,
+        groupType: s,
+        ...a
+      }
+    ) })
+  ] });
+}
+e.propTypes = {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: o.objectOf(o.string),
+  /**
+   * Override styles with className
+   */
+  className: o.string,
+  titleText: o.string,
+  groupType: f.GroupType,
+  onClose: o.func,
+  onSubmit: o.func,
+  EditGroupFormProps: o.objectOf(o.any)
+};
+e.defaultProps = {
+  classes: {},
+  className: void 0,
+  titleText: "Edit Group",
+  groupType: {},
+  onClose: void 0,
+  onSubmit: void 0,
+  EditGroupFormProps: {}
+};
+export {
+  e as default,
+  x as styles
+};

package/dist/es/group/EditGroupDialog/components/EditGroupForm.js

@@ -0,0 +1,53 @@
+import { jsxs as e, jsx as o } from "react/jsx-runtime";
+import { useRef as f } from "react";
+import { withStyles as x, TextField as y, Button as n } from "@material-ui/core";
+const g = (t) => ({
+  root: {
+    display: "flex",
+    flexDirection: "column",
+    "& > *": {
+      marginTop: t.spacing(1),
+      marginBottom: t.spacing(1)
+    }
+  },
+  action: {
+    display: "flex",
+    justifyContent: "flex-end"
+  }
+});
+function h({
+  classes: t,
+  onSubmit: r,
+  onCancel: c,
+  submitText: a = "Save",
+  cancelText: l = "Cancel",
+  descriptionLabel: s = "Description",
+  groupType: m
+}) {
+  const i = f(), p = (d) => {
+    d.preventDefault();
+    const u = {
+      description: i.current.value
+    };
+    r({ groupDocument: u });
+  };
+  return /* @__PURE__ */ e("form", { className: t.root, onSubmit: p, children: [
+    /* @__PURE__ */ o(
+      y,
+      {
+        defaultValue: m.description,
+        name: "description",
+        label: s,
+        inputRef: i
+      }
+    ),
+    /* @__PURE__ */ e("div", { className: t.action, children: [
+      /* @__PURE__ */ o(n, { onClick: c, children: l }),
+      /* @__PURE__ */ o(n, { variant: "contained", color: "primary", type: "submit", children: a })
+    ] })
+  ] });
+}
+const F = x(g, { name: "VdtEditGroupForm" })(h);
+export {
+  F as default
+};

package/dist/es/group/EditGroupDialog/index.js

@@ -0,0 +1,7 @@
+import { withStyles as o } from "@material-ui/core";
+import t, { styles as i } from "./EditGroupDialog.js";
+const a = o(i, { name: "VdtEditGroupDialog" })(t);
+a.displayName = "EditGroupDialog";
+export {
+  a as default
+};

package/dist/es/group/GroupDetails/GroupDetails.js

@@ -0,0 +1,243 @@
+import { jsxs as r, jsx as o, Fragment as s } from "react/jsx-runtime";
+import { useState as Q } from "react";
+import W from "clsx";
+import e from "prop-types";
+import { Typography as X, IconButton as Y, Divider as n } from "@material-ui/core";
+import { MoreVert as Z, Description as ee, Person as oe, VerifiedUser as re, Group as U } from "@material-ui/icons";
+import c from "@vidispine/proptypes";
+import se from "../../user/UserRelationList/index.js";
+import f from "../GroupRelationList/index.js";
+import ne from "./components/GroupData.js";
+import te from "./components/GroupMenu.js";
+const Ge = (t) => ({
+  root: {
+    display: "grid",
+    gridGap: t.spacing(2),
+    "& .MuiListItem-gutters": {
+      paddingLeft: "30px"
+    }
+  },
+  header: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between"
+  }
+});
+function D({
+  classes: t,
+  className: j,
+  groupType: d,
+  groupListType: l,
+  userListType: L,
+  onEdit: E,
+  onDelete: H,
+  onAddChildGroups: I,
+  onAddParentGroups: y,
+  onAddUsersToGroup: M,
+  onRemoveUser: N,
+  onRemoveChildGroup: S,
+  onRemoveFromParent: T,
+  DetailsComponent: G,
+  DetailsProps: w,
+  UsersComponent: h,
+  UsersProps: k,
+  RolesComponent: v,
+  RolesProps: V,
+  ParentGroupsComponent: g,
+  ParentGroupsProps: B,
+  ChildGroupsComponent: b,
+  ChildGroupsProps: F,
+  MenuComponent: C,
+  MenuProps: _,
+  lockedGroups: p,
+  lockedUsers: $
+}) {
+  const {
+    groupName: a,
+    role: u,
+    parentGroupList: P = {},
+    childGroupList: q = {},
+    userList: z = {}
+  } = d || {}, [O, x] = Q(null), m = p.includes(a), J = (i) => {
+    x(i.currentTarget);
+  }, R = () => {
+    x(null);
+  }, A = (i) => i ? (K) => {
+    i(K), R();
+  } : void 0;
+  return /* @__PURE__ */ r("div", { className: W(t.root, "VdtGroupDetails-root", j), children: [
+    /* @__PURE__ */ r("div", { className: t.header, children: [
+      /* @__PURE__ */ o(X, { variant: "h5", children: a }),
+      C && !u && /* @__PURE__ */ r(s, { children: [
+        /* @__PURE__ */ o(Y, { onClick: J, disabled: p.includes(a), children: /* @__PURE__ */ o(Z, {}) }),
+        /* @__PURE__ */ o(
+          C,
+          {
+            groupType: d,
+            open: !!O,
+            onClose: R,
+            anchorEl: O,
+            onDelete: A(H),
+            onEdit: A(E),
+            ..._
+          }
+        )
+      ] })
+    ] }),
+    G && /* @__PURE__ */ r(s, { children: [
+      /* @__PURE__ */ o(
+        G,
+        {
+          groupType: d,
+          SubHeaderIcon: ee,
+          ...w
+        }
+      ),
+      /* @__PURE__ */ o(n, {})
+    ] }),
+    h && /* @__PURE__ */ r(s, { children: [
+      /* @__PURE__ */ o(
+        h,
+        {
+          existingUsers: z,
+          users: L,
+          onRemoveUser: N,
+          onAddUsers: M,
+          lockedUsers: $,
+          SubHeaderIcon: oe,
+          ...k
+        }
+      ),
+      /* @__PURE__ */ o(n, {})
+    ] }),
+    v && !u && /* @__PURE__ */ r(s, { children: [
+      /* @__PURE__ */ o(
+        v,
+        {
+          existingGroups: P,
+          groups: l,
+          onRemoveGroup: T,
+          onAddGroups: y,
+          SubHeaderIcon: re,
+          disableEdit: m,
+          showGroups: !1,
+          removeTooltip: "Remove from role",
+          subHeaderText: "Roles",
+          inputLabel: "Select roles",
+          emptyText: "Not member of any roles",
+          addText: "Add roles",
+          ...V
+        }
+      ),
+      /* @__PURE__ */ o(n, {})
+    ] }),
+    g && !u && /* @__PURE__ */ r(s, { children: [
+      /* @__PURE__ */ o(
+        g,
+        {
+          existingGroups: P,
+          groups: l,
+          onRemoveGroup: T,
+          onAddGroups: y,
+          SubHeaderIcon: U,
+          disableEdit: m,
+          showRoles: !1,
+          removeTooltip: "Remove from group",
+          subHeaderText: "Parent groups",
+          emptyText: "Not member of any groups",
+          addText: "Add parents",
+          lockedGroups: p,
+          ...B
+        }
+      ),
+      /* @__PURE__ */ o(n, {})
+    ] }),
+    b && /* @__PURE__ */ r(s, { children: [
+      /* @__PURE__ */ o(
+        b,
+        {
+          existingGroups: q,
+          groups: l,
+          onRemoveGroup: S,
+          onAddGroups: I,
+          SubHeaderIcon: U,
+          disableEdit: m,
+          showRoles: !1,
+          subHeaderText: "Child groups",
+          addText: "Add children",
+          lockedGroups: p,
+          ...F
+        }
+      ),
+      /* @__PURE__ */ o(n, {})
+    ] })
+  ] });
+}
+D.propTypes = {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: e.objectOf(e.string),
+  /**
+   * Override styles with className
+   */
+  className: e.string,
+  groupType: c.GroupType,
+  groupListType: c.GroupListType,
+  userListType: c.UserListType,
+  onEdit: e.func,
+  onDelete: e.func,
+  onAddChildGroups: e.func,
+  onAddParentGroups: e.func,
+  onAddUsersToGroup: e.func,
+  onRemoveUser: e.func,
+  onRemoveChildGroup: e.func,
+  onRemoveFromParent: e.func,
+  DetailsComponent: e.oneOfType([e.elementType, e.oneOf([!1])]),
+  DetailsProps: e.objectOf(e.any),
+  UsersComponent: e.oneOfType([e.elementType, e.oneOf([!1])]),
+  UsersProps: e.objectOf(e.any),
+  RolesComponent: e.oneOfType([e.elementType, e.oneOf([!1])]),
+  RolesProps: e.objectOf(e.any),
+  ParentGroupsComponent: e.oneOfType([e.elementType, e.oneOf([!1])]),
+  ParentGroupsProps: e.objectOf(e.any),
+  ChildGroupsComponent: e.oneOfType([e.elementType, e.oneOf([!1])]),
+  ChildGroupsProps: e.objectOf(e.any),
+  MenuComponent: e.oneOfType([e.elementType, e.oneOf([!1])]),
+  MenuProps: e.objectOf(e.any),
+  lockedGroups: e.arrayOf(e.string),
+  lockedUsers: e.arrayOf(e.string)
+};
+D.defaultProps = {
+  classes: {},
+  className: void 0,
+  groupType: {},
+  groupListType: {},
+  userListType: {},
+  onEdit: void 0,
+  onDelete: void 0,
+  onAddChildGroups: void 0,
+  onAddParentGroups: void 0,
+  onAddUsersToGroup: void 0,
+  onRemoveUser: void 0,
+  onRemoveChildGroup: void 0,
+  onRemoveFromParent: void 0,
+  DetailsComponent: ne,
+  DetailsProps: {},
+  UsersComponent: se,
+  UsersProps: {},
+  RolesComponent: f,
+  RolesProps: {},
+  ParentGroupsComponent: f,
+  ParentGroupsProps: {},
+  ChildGroupsComponent: f,
+  ChildGroupsProps: {},
+  MenuComponent: te,
+  MenuProps: {},
+  lockedGroups: ["_special_all", "vidinetGroup"],
+  lockedUsers: ["admin", "vidinetviewer"]
+};
+export {
+  D as default,
+  Ge as styles
+};

package/dist/es/group/GroupDetails/components/GroupData.js

@@ -0,0 +1,50 @@
+import { jsx as e, jsxs as n } from "react/jsx-runtime";
+import g from "clsx";
+import { withStyles as L, List as x, ListSubheader as G, ListItem as t, ListItemText as a } from "@material-ui/core";
+const D = (r) => ({
+  root: {
+    display: "flex",
+    flexDirection: "column"
+  },
+  ListSubheader: {
+    display: "grid",
+    gridAutoFlow: "column",
+    gridTemplateColumns: "auto 1fr",
+    alignItems: "center",
+    gridGap: r.spacing(1)
+  },
+  List: {}
+}), b = (r) => r ? "Role" : "Group";
+function N({
+  className: r,
+  classes: i,
+  groupType: d,
+  SubHeaderText: m = "Details",
+  SubHeaderIcon: o = !1,
+  groupNameText: c = "Group name",
+  descriptionText: p = "Description",
+  typeText: u = "Type"
+}) {
+  const { groupName: y, description: h, role: f, metadata: { field: l = [] } = {} } = d;
+  return /* @__PURE__ */ e("div", { className: g(i.root, r), children: /* @__PURE__ */ n(
+    x,
+    {
+      className: i.List,
+      dense: !0,
+      subheader: /* @__PURE__ */ n(G, { disableGutters: !0, className: i.ListSubheader, children: [
+        o && /* @__PURE__ */ e(o, {}),
+        m
+      ] }),
+      children: [
+        /* @__PURE__ */ e(t, { children: /* @__PURE__ */ e(a, { primary: c, secondary: y }) }),
+        /* @__PURE__ */ e(t, { children: /* @__PURE__ */ e(a, { primary: p, secondary: h || "-" }) }),
+        /* @__PURE__ */ e(t, { children: /* @__PURE__ */ e(a, { primary: u, secondary: b(f) }) }),
+        l && l.map((s) => /* @__PURE__ */ e(t, { children: /* @__PURE__ */ e(a, { primary: s.key, secondary: s.value }) }, s.key))
+      ]
+    }
+  ) });
+}
+const k = L(D, { name: "VdtGroupData" })(N);
+export {
+  k as default
+};

package/dist/es/group/GroupDetails/components/GroupMenu.js

@@ -0,0 +1,18 @@
+import { jsxs as t, jsx as i } from "react/jsx-runtime";
+import { Menu as c, MenuItem as o } from "@material-ui/core";
+function m({
+  groupType: d,
+  onEdit: r,
+  onDelete: e,
+  editGroupText: n = "Edit Group",
+  deleteGroupText: u = "Delete Group",
+  ...l
+}) {
+  return /* @__PURE__ */ t(c, { ...l, children: [
+    /* @__PURE__ */ i(o, { onClick: r, disabled: r === void 0, children: n }),
+    /* @__PURE__ */ i(o, { onClick: () => e(d), disabled: e === void 0, children: u })
+  ] });
+}
+export {
+  m as default
+};

package/dist/es/group/GroupDetails/index.js

@@ -0,0 +1,7 @@
+import { withStyles as t } from "@material-ui/core";
+import o, { styles as e } from "./GroupDetails.js";
+const s = t(e, { name: "VdtGroupDetails" })(o);
+s.displayName = "GroupDetails";
+export {
+  s as default
+};