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

package/dist/es/search/SavedSearch/SavedSearchAccessList.js

@@ -0,0 +1,25 @@
+import { jsx as m } from "react/jsx-runtime";
+import { useEffect as y } from "react";
+import { useEntityAccess as a } from "@vidispine/vdt-react";
+import p from "../../entity/EntityAccessTable.js";
+function E({ collectionId: e, ...s }) {
+  const { getEntityAccessProps: t, ...n } = s, { accessControlList: c, onList: o, onRemove: i } = a({
+    entityId: e,
+    entityType: "collection"
+  });
+  return y(() => {
+    o(t);
+  }, [e]), /* @__PURE__ */ m(
+    p,
+    {
+      entityType: "collection",
+      entityId: e,
+      accessControlList: c,
+      onRemove: (r) => i(r).then(() => o(t)),
+      ...n
+    }
+  );
+}
+export {
+  E as default
+};

package/dist/es/search/SavedSearch/SavedSearchList.js

@@ -0,0 +1,49 @@
+import { jsx as t } from "react/jsx-runtime";
+import { withStyles as v, List as f } from "@material-ui/core";
+import p from "../../collection/CollectionSearchPicker/index.js";
+import u from "./SavedSearchRow.js";
+const w = {};
+function C({
+  searchProps: a,
+  searchPlaceholderText: i = "Find searches",
+  onSelect: n,
+  onDelete: d,
+  onUpdateSearchMetadata: s,
+  RowComponent: m = u,
+  RowProps: c = {},
+  accessTranslate: h,
+  extraMenuItems: l,
+  ...S
+}) {
+  return /* @__PURE__ */ t(
+    p,
+    {
+      searchProps: a,
+      searchPlaceholder: i,
+      CollectionTableComponent: ({ collectionListType: o, onRefresh: r }) => /* @__PURE__ */ t(f, { children: o && o.collection && o.collection.map((e) => /* @__PURE__ */ t(
+        m,
+        {
+          collectionType: e,
+          onSelect: () => n({ collectionId: e.id }),
+          onDelete: () => Promise.resolve(d({ collectionId: e.id }).then(r)),
+          onUpdateSearchMetadata: (P) => Promise.resolve(
+            s({
+              collectionId: e.id,
+              metadataDocument: P
+            }).then(r)
+          ),
+          accessTranslate: h,
+          extraMenuItems: l,
+          ...c
+        },
+        e.id
+      )) }),
+      PaginationProps: { rowsPerPageOptions: [5, 10] },
+      ...S
+    }
+  );
+}
+const b = v(w, { name: "VdtSavedSearchList" })(C);
+export {
+  b as default
+};

package/dist/es/search/SavedSearch/SavedSearchRow.js

@@ -0,0 +1,271 @@
+import { jsxs as r, Fragment as _, jsx as e } from "react/jsx-runtime";
+import { useRef as ye, useState as f } from "react";
+import be from "clsx";
+import { withStyles as Me, ListItem as xe, ListItemIcon as o, IconButton as Ne, ListItemText as l, TextField as Oe, InputAdornment as Re, ButtonBase as S, Menu as Te, MenuItem as c, Popover as Ae, Divider as Fe } from "@material-ui/core";
+import { ChevronLeft as Pe, Folder as ze, Search as j, CreateNewFolderOutlined as Be, YoutubeSearchedFor as Ue, Lock as Ve, Check as De, Close as Le, Edit as _e, Share as je, Delete as qe, MoreVert as We } from "@material-ui/icons";
+import { parseMetadataType as $e, createMetadataType as He } from "@vidispine/vdt-js";
+import we from "../../icons/FolderMultipleIcon.js";
+import Ge from "./SavedSearchAccessList.js";
+import Ke from "./ShareSearch.js";
+const q = "SHARE_MENU", v = "LISTACCESS_MENU", Ye = (t) => ({
+  root: {
+    "&:hover $SubmitSearchIcon": {
+      visibility: "visible"
+    }
+  },
+  FolderIcon: {
+    minWidth: 32
+  },
+  SubmitSearchIcon: {
+    visibility: "hidden"
+  },
+  inputDisabled: {
+    cursor: "pointer"
+  },
+  disabled: {
+    opacity: 1
+  },
+  menuContext: {},
+  menuExpand: {
+    minWidth: t.breakpoints.values.sm / 2
+  },
+  CancelEditIcon: {
+    marginRight: t.spacing(0.5),
+    "&:hover": {
+      color: "red"
+    }
+  },
+  SubmitTitleIcon: {
+    marginRight: t.spacing(0.5),
+    "&:hover": {
+      color: "green"
+    }
+  },
+  OptionsIcon: {
+    marginRight: t.spacing(0.5)
+  }
+});
+function Je({
+  classes: t,
+  collectionType: W,
+  onSelect: $,
+  onAddRow: H,
+  onExpand: w,
+  onDelete: G,
+  onUpdateSearchMetadata: K,
+  disableDeletion: I,
+  type: h,
+  accessTranslate: Y,
+  extraMenuItems: J = [],
+  isFolderRow: Q = !1,
+  hideSubFolderSharing: X = !1,
+  isLoading: Z,
+  allowDelete: E = () => !0,
+  allowShare: k = () => !0,
+  allowListAccess: m = () => !0,
+  allowEditTitle: y = () => !0,
+  ListAccessComponent: ee = Ge,
+  ListAccessProps: ne = {},
+  ShareComponent: te = Ke,
+  ShareProps: ie = {},
+  addFolderText: re = "Add folder",
+  addSearchText: oe = "Add search",
+  editTitleText: le = "Edit",
+  shareText: ce = "Share",
+  listAccessText: ae = "Access",
+  deleteText: b = "Delete",
+  backText: de = "Back",
+  FolderSingleIcon: se = ze,
+  FolderMultiIcon: ue = we,
+  QueryIcon: he = j,
+  CreateFolderIcon: M = Be,
+  AddNewSearch: x = j,
+  SubmitSearchIcon: N = Ue,
+  ListAccessIcon: O = Ve,
+  SubmitTitleIcon: me = De,
+  CancelEditIcon: pe = Le,
+  EditTitleIcon: R = _e,
+  ShareSearchIcon: T = je,
+  DeleteSearchIcon: A = qe,
+  OptionsIcon: fe = We
+}) {
+  const { metadata: F = {} } = W, i = $e(F, { joinValue: ",", flat: !0 }), P = ye(), [p, d] = f(null), [z, B] = f(i.title || ""), [C, s] = f(null), [a, g] = f(!1), Ce = (n) => {
+    n.stopPropagation && n.stopPropagation(), s(n.currentTarget);
+  }, u = (n = () => null, ke = "") => (L) => {
+    L.stopPropagation && L.stopPropagation(), s(null), n(ke);
+  }, U = () => K(He({ title: z })).then(() => g(!1)), ge = u(() => {
+    g(!0), P.current.focus();
+  }), Se = () => {
+    B(i.title), g(!1);
+  }, ve = u(G), V = u($), Ie = u(w), D = (n) => u(H, n), Ee = (n) => {
+    n(F), s(null);
+  };
+  return /* @__PURE__ */ r(_, { children: [
+    /* @__PURE__ */ r(
+      xe,
+      {
+        disableGutters: !0,
+        dense: !0,
+        className: t.root,
+        button: !0,
+        onClick: h === "query" ? V : Ie,
+        disabled: Z,
+        children: [
+          Q ? {
+            folder: /* @__PURE__ */ e(o, { className: t.FolderIcon, children: I ? /* @__PURE__ */ e(ue, {}) : /* @__PURE__ */ e(se, {}) }),
+            query: /* @__PURE__ */ e(o, { className: t.FolderIcon, children: /* @__PURE__ */ e(he, {}) })
+          }[h] : N && /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(Ne, { size: "small", onClick: V, children: /* @__PURE__ */ e(N, { className: t.SubmitSearchIcon }) }) }),
+          /* @__PURE__ */ e(
+            l,
+            {
+              primary: /* @__PURE__ */ e(
+                Oe,
+                {
+                  fullWidth: !0,
+                  value: z,
+                  onChange: a ? (n) => B(n.target.value) : void 0,
+                  onClick: a ? (n) => n.stopPropagation() : void 0,
+                  onKeyPress: (n) => {
+                    n.key === "Enter" && (n.preventDefault(), U());
+                  },
+                  InputProps: {
+                    inputProps: {
+                      disabled: !a,
+                      ref: P,
+                      className: be(t.input, { [t.inputDisabled]: !a })
+                    },
+                    disableUnderline: !a,
+                    endAdornment: /* @__PURE__ */ e(Re, { position: "end", children: a ? /* @__PURE__ */ r(_, { children: [
+                      /* @__PURE__ */ e(S, { size: "small", onClick: Se, children: /* @__PURE__ */ e(pe, { className: t.CancelEditIcon }) }),
+                      /* @__PURE__ */ e(S, { size: "small", onClick: U, children: /* @__PURE__ */ e(me, { className: t.SubmitTitleIcon }) })
+                    ] }) : [k, m, E, y].some(
+                      (n) => n(i)
+                    ) && /* @__PURE__ */ e(S, { size: "small", onClick: Ce, children: /* @__PURE__ */ e(fe, { className: t.OptionsIcon }) }) })
+                  }
+                }
+              )
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ e(
+      Te,
+      {
+        anchorEl: C,
+        open: !!C && p === null,
+        keepMounted: !0,
+        onClose: () => s(null),
+        getContentAnchorEl: null,
+        anchorOrigin: {
+          vertical: "bottom",
+          horizontal: "right"
+        },
+        transformOrigin: {
+          vertical: "top",
+          horizontal: "right"
+        },
+        children: /* @__PURE__ */ r("div", { className: t.menuContext, children: [
+          m(i) && h === "folder" && /* @__PURE__ */ r(
+            c,
+            {
+              dense: !0,
+              onClick: D({ id: i.collectionId, type: "folder" }),
+              children: [
+                M ? /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(M, {}) }) : null,
+                /* @__PURE__ */ e(l, { primary: re })
+              ]
+            },
+            1
+          ),
+          m(i) && h === "folder" && /* @__PURE__ */ r(
+            c,
+            {
+              dense: !0,
+              onClick: D({ id: i.collectionId, type: "query" }),
+              children: [
+                x ? /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(x, {}) }) : null,
+                /* @__PURE__ */ e(l, { primary: oe })
+              ]
+            },
+            2
+          ),
+          y(i) && /* @__PURE__ */ r(c, { dense: !0, onClick: ge, children: [
+            R ? /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(R, {}) }) : null,
+            /* @__PURE__ */ e(l, { primary: le })
+          ] }, 3),
+          m(i) && /* @__PURE__ */ r(c, { dense: !0, onClick: () => d(v), children: [
+            O ? /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(O, {}) }) : null,
+            /* @__PURE__ */ e(l, { primary: ae })
+          ] }, 4),
+          k(i) && !X && /* @__PURE__ */ r(c, { dense: !0, onClick: () => d(q), children: [
+            T ? /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(T, {}) }) : null,
+            /* @__PURE__ */ e(l, { primary: ce })
+          ] }, 5),
+          E(i) && /* @__PURE__ */ r(c, { dense: !0, onClick: ve, disabled: I, children: [
+            A ? /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(A, {}) }) : null,
+            /* @__PURE__ */ e(l, { primary: b })
+          ] }, 6),
+          J.map((n) => /* @__PURE__ */ r(
+            c,
+            {
+              dense: !0,
+              onClick: () => Ee(n.function),
+              children: [
+                /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(n.icon, {}) }),
+                /* @__PURE__ */ e(l, { primary: n.name })
+              ]
+            },
+            `extraMenu${n.id}`
+          ))
+        ] })
+      }
+    ),
+    /* @__PURE__ */ e(
+      Ae,
+      {
+        open: p !== null,
+        anchorEl: C,
+        anchorOrigin: {
+          vertical: "bottom",
+          horizontal: "right"
+        },
+        transformOrigin: {
+          vertical: "top",
+          horizontal: "right"
+        },
+        onClose: () => {
+          d(null), s(null);
+        },
+        children: /* @__PURE__ */ r("div", { className: t.menuExpand, children: [
+          /* @__PURE__ */ r(c, { onClick: () => d(null), children: [
+            /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(Pe, {}) }),
+            /* @__PURE__ */ e(l, { primary: de })
+          ] }),
+          /* @__PURE__ */ e(Fe, {}),
+          p === q && /* @__PURE__ */ e(
+            te,
+            {
+              collectionId: i.collectionId,
+              onSuccess: () => d(v),
+              ...ie
+            }
+          ),
+          p === v && /* @__PURE__ */ e(
+            ee,
+            {
+              entityAccessMenuText: b,
+              collectionId: i.collectionId,
+              accessTranslate: Y,
+              ...ne
+            }
+          )
+        ] })
+      }
+    )
+  ] });
+}
+const cn = Me(Ye, { name: "VdtSavedSearchRow" })(Je);
+export {
+  cn as default
+};

package/dist/es/search/SavedSearch/ShareSearch.js

@@ -0,0 +1,30 @@
+import { jsx as r } from "react/jsx-runtime";
+import { withStyles as n } from "@material-ui/core";
+import { access as s } from "@vidispine/vdt-api";
+import c from "../../entity/EntityAccessAdd.js";
+const a = {
+  actionsSubmit: {
+    width: "100%"
+  },
+  root: {
+    width: "100%"
+  }
+};
+function m({ classes: t, collectionId: e, ...i }) {
+  return /* @__PURE__ */ r(
+    c,
+    {
+      classes: t,
+      entityType: "collection",
+      entityId: e,
+      onSubmit: (o) => s.createEntityAccess({ ...o, queryParams: { allowDuplicate: !1 } }),
+      initialAccessControlDocument: { user: null, permission: "READ" },
+      PermissionPickerComponent: null,
+      ...i
+    }
+  );
+}
+const d = n(a, { name: "VdtShareSearch" })(m);
+export {
+  d as default
+};

package/dist/es/search/SavedSearch/index.js

@@ -0,0 +1,4 @@
+import e from "./SavedSearch.js";
+export {
+  e as default
+};

package/dist/es/search/SavedSearchFolder/AddFolderRow.js

@@ -0,0 +1,75 @@
+import { jsxs as C, jsx as e } from "react/jsx-runtime";
+import { useState as R } from "react";
+import { withStyles as x, ListItem as I, TextField as N, IconButton as l } from "@material-ui/core";
+import { CreateNewFolderOutlined as A, Search as B, AddCircleOutlined as V, Save as b, Cancel as j } from "@material-ui/icons";
+const k = () => ({
+  root: { marginRight: 4, width: "100%", display: "flex", alignItems: "center", height: 50 },
+  icon: { fontSize: 22, marginRight: 15 },
+  input: { marginRight: 10, minWidth: 200 },
+  iconButton: {}
+});
+function q({
+  classes: t,
+  id: n,
+  setExpand: a,
+  saveSearch: d,
+  onAddRow: c,
+  createFolder: u,
+  itemSearchDocument: s,
+  newField: m,
+  markerField: h = "saved_search_folder",
+  markerValue: f = "SubFolder",
+  folderNameText: p = "Folder name",
+  searchNameText: g = "Search name"
+}) {
+  const { id: y, type: o } = m, [r, S] = R(""), i = () => {
+    c({ id: null, type: null }), a(!0);
+  }, w = () => {
+    r && u(n, h, f, r, i);
+  }, F = () => {
+    r && d(n, r, s, i);
+  };
+  return n !== y ? null : /* @__PURE__ */ C(I, { disableGutters: !0, dense: !0, className: t.root, children: [
+    {
+      folder: /* @__PURE__ */ e(A, { classes: { root: t.icon } }),
+      query: /* @__PURE__ */ e(B, { className: t.icon })
+    }[o],
+    /* @__PURE__ */ e(
+      N,
+      {
+        className: t.input,
+        onChange: (v) => S(v.target.value),
+        placeholder: o === "folder" ? p : g,
+        variant: "outlined",
+        size: "small"
+      }
+    ),
+    /* @__PURE__ */ e(
+      l,
+      {
+        classes: { root: t.iconButton },
+        onClick: o === "folder" ? w : F,
+        color: "primary",
+        variant: "outlined",
+        children: {
+          folder: /* @__PURE__ */ e(V, {}),
+          query: /* @__PURE__ */ e(b, {})
+        }[o]
+      }
+    ),
+    /* @__PURE__ */ e(
+      l,
+      {
+        classes: { root: t.iconButton },
+        onClick: i,
+        color: "primary",
+        variant: "outlined",
+        children: /* @__PURE__ */ e(j, {})
+      }
+    )
+  ] });
+}
+const L = x(k, { name: "VdtAddFolderRow" })(q);
+export {
+  L as default
+};

package/dist/es/search/SavedSearchFolder/FolderRow.js

@@ -0,0 +1,231 @@
+import { jsxs as $, jsx as n } from "react/jsx-runtime";
+import { useState as j, useMemo as X } from "react";
+import Y from "clsx";
+import { withStyles as k } from "@material-ui/core";
+import { parseMetadataType as Z } from "@vidispine/vdt-js";
+import { compose as P, useGetSavedSearchFolders as C, useSavedSearch as ee } from "@vidispine/vdt-react";
+import te from "../SavedSearch/SavedSearchRow.js";
+import ne from "./AddFolderRow.js";
+const U = {
+  markerValue: "savedSearch",
+  markerField: "eidr_referentType"
+}, ae = {
+  indentationWidth: 20,
+  indentationDepthStart: 1,
+  defaultRowIndentationOffset: 15,
+  defalutNewRowIndentation: 10
+}, de = () => ({
+  root: {
+    display: "flex",
+    width: "100%",
+    flexWrap: "wrap"
+  },
+  indentationContainer: {
+    display: "flex",
+    width: "100%"
+  }
+}), oe = (a) => ({
+  root: {
+    display: "flex",
+    width: "100%"
+  },
+  indentation: {
+    height: 25,
+    borderLeft: `1px solid ${a.palette.primary.main}`,
+    borderBottom: `1px solid ${a.palette.primary.main}`,
+    marginRight: 5
+  }
+});
+function ie({
+  className: a,
+  classes: t,
+  children: c,
+  indentationWidth: h,
+  hideWrapper: S,
+  folderDepth: i,
+  indentationDepthStart: u,
+  isAddRow: d,
+  rowIndentation: l,
+  addNewRowIndentation: I
+}) {
+  const w = d ? !0 : i >= u, o = d ? I : l;
+  return S ? null : /* @__PURE__ */ $("div", { className: Y(a, t.root), children: [
+    w && /* @__PURE__ */ n(
+      "div",
+      {
+        className: t.indentation,
+        style: {
+          marginLeft: o,
+          minWidth: h
+        }
+      }
+    ),
+    c
+  ] });
+}
+const le = P(
+  k(oe, { name: "VdtFolderRowContentWrapper" })
+)(ie);
+function z({
+  classes: a,
+  id: t,
+  queryParams: c,
+  markerProps: h = U,
+  childFolders: S = [],
+  metadata: i = {},
+  itemSearchDocument: u = {},
+  folderDepth: d = 0,
+  type: l = "folder",
+  hideSubFolderSharing: I,
+  onSelect: w,
+  onRemoveItem: o,
+  indentationValues: v = {},
+  indentationProps: r = ae,
+  FolderRowContentComponent: y = te,
+  FolderRowContentProps: p = {},
+  AddRowComponent: g = ne,
+  AddRowProps: F = {},
+  FolderRowContentWrapperComponent: f = le,
+  FolderRowContentWrapperProps: m = {},
+  ...A
+}) {
+  const [x, b] = j(), [M, R] = j({ id: null, type: null }), {
+    createFolder: D,
+    saveSearch: E,
+    deleteFolder: G,
+    removeItem: L,
+    subFolders: N = []
+  } = C({
+    childFolders: S,
+    expand: x,
+    queryParams: c,
+    markerProps: h
+  }), { onDeleteSearch: O, onUpdateSearchMetadata: V, onGetSavedSearchSettings: B } = ee({
+    ...U
+  }), _ = ({ collectionId: e }) => B({ collectionId: e }).then((Q) => w(Q, e)), T = Z(i, { joinValue: "_", flat: !0 }), W = X(() => {
+    const { __child_collection_size: e = 0 } = T;
+    return N.length > 0 || !x && e > 0;
+  }, [N.length, x, T]), { defalutNewRowIndentation: q, defaultRowIndentationOffset: H, indentationWidth: J } = r, s = {
+    rowIndentation: v.rowIndentation || 0,
+    addNewRowIndentation: v.addNewRowIndentation || q
+  }, K = {
+    rowIndentation: s.addNewRowIndentation,
+    addNewRowIndentation: s.addNewRowIndentation + J + H
+  };
+  return /* @__PURE__ */ $("div", { className: a.root, children: [
+    {
+      folder: /* @__PURE__ */ n(
+        f,
+        {
+          folderDepth: d,
+          ...s,
+          ...r,
+          ...m,
+          children: /* @__PURE__ */ n(
+            y,
+            {
+              isFolderRow: !0,
+              hideSubFolderSharing: I,
+              type: l,
+              collectionType: { id: t, metadata: i },
+              disableDeletion: W,
+              onDelete: () => Promise.resolve(G(t)).then(() => {
+                o && o(t);
+              }),
+              onUpdateSearchMetadata: (e) => V({
+                collectionId: t,
+                metadataDocument: e
+              }),
+              onExpand: () => b((e) => !e),
+              onAddRow: R,
+              ...p
+            }
+          )
+        }
+      ),
+      query: /* @__PURE__ */ n(
+        f,
+        {
+          folderDepth: d,
+          ...s,
+          ...r,
+          ...m,
+          children: /* @__PURE__ */ n(
+            y,
+            {
+              isFolderRow: !0,
+              type: l,
+              collectionType: { id: t, metadata: i },
+              onSelect: () => _({ collectionId: t }),
+              onDelete: () => Promise.resolve(O({ collectionId: t })).then(() => {
+                o && o(t);
+              }),
+              onUpdateSearchMetadata: (e) => V({
+                collectionId: t,
+                metadataDocument: e
+              }),
+              onAddRow: R,
+              ...p
+            }
+          )
+        }
+      )
+    }[l],
+    /* @__PURE__ */ n(
+      f,
+      {
+        isAddRow: !0,
+        folderDepth: d,
+        ...s,
+        ...r,
+        hideWrapper: !M.id,
+        ...m,
+        children: /* @__PURE__ */ n(
+          g,
+          {
+            id: t,
+            setExpand: b,
+            saveSearch: E,
+            onAddRow: R,
+            createFolder: D,
+            itemSearchDocument: u,
+            newField: M,
+            ...F
+          }
+        )
+      }
+    ),
+    N.map((e) => /* @__PURE__ */ n(
+      z,
+      {
+        classes: a,
+        id: e.id,
+        queryParams: c,
+        markerProps: h,
+        childFolders: e.subFolders,
+        metadata: e.metadata,
+        itemSearchDocument: u,
+        folderDepth: d + 1,
+        type: e.type,
+        hideSubFolderSharing: !0,
+        handleSelect: _,
+        onSelect: w,
+        onRemoveItem: () => L(e.id),
+        indentationProps: r,
+        FolderRowContentComponent: y,
+        FolderRowContentProps: p,
+        AddRowComponent: g,
+        AddRowProps: F,
+        FolderRowContentWrapperComponent: f,
+        FolderRowContentWrapperProps: m,
+        indentationValues: K,
+        props: A
+      },
+      e.id
+    ))
+  ] });
+}
+const Se = k(de, { name: "VdtFolderRow" })(z);
+export {
+  Se as default
+};

package/dist/es/search/SavedSearchFolder/index.js

@@ -0,0 +1,4 @@
+import r from "./FolderRow.js";
+export {
+  r as default
+};