@multiplatform.one/backoffice 6.4.2 → 6.6.0

package/dist/cjs/form/FormSidebarPanel.cjs

@@ -0,0 +1,430 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var FormSidebarPanel_exports = {};
+__export(FormSidebarPanel_exports, {
+  FormSidebarPanel: () => FormSidebarPanel
+});
+module.exports = __toCommonJS(FormSidebarPanel_exports);
+var import_components = require("@multiplatform.one/components");
+var import_forms = require("@multiplatform.one/forms");
+var import_frappe_ui = require("@multiplatform.one/frappe-ui");
+var import_theme = require("@multiplatform.one/theme");
+var import_react = require("@phosphor-icons/react");
+var import_react2 = require("react");
+var import_react_i18next = require("react-i18next");
+var import_BackofficeProvider = require("../config/BackofficeProvider.cjs");
+var import_i18n = require("../i18n/index.cjs");
+var import_useDocinfo = require("../shared/useDocinfo.cjs");
+var import_useFrappeApp = require("../shared/useFrappeApp.cjs");
+var import_FormErrorBoundary = require("./FormErrorBoundary.cjs");
+var import_sidebar_attachments = require("./sidebar-attachments.cjs");
+var import_sidebar_dialogs = require("./sidebar-dialogs.cjs");
+var import_sidebar_people = require("./sidebar-people.cjs");
+var import_sidebar_rpc = require("./sidebar-rpc.cjs");
+var import_sidebar_utils = require("./sidebar-utils.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+const RAIL_WIDTH = 280;
+function FormSidebarPanel({
+  doctype,
+  name,
+  meta,
+  doc,
+  stacked = false,
+  docinfo: docinfoProp,
+  onRefresh,
+  docinfoOverride,
+  currentUser
+}) {
+  const {
+    t
+  } = (0, import_react_i18next.useTranslation)(import_i18n.BACKOFFICE_I18N_NAMESPACE);
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const theme = (0, import_components.useTheme)();
+  const app = (0, import_useFrappeApp.useFrappeApp)();
+  const config = (0, import_frappe_ui.useFrappeConfig)();
+  const capabilities = (0, import_BackofficeProvider.useBackofficeCapabilities)();
+  const baseURL = config?.baseURL;
+  const isNewDoc = !name || name === "new";
+  const {
+    docinfo: fetched,
+    loading,
+    reload
+  } = (0, import_useDocinfo.useDocinfo)(docinfoOverride ? void 0 : doctype, docinfoOverride ? void 0 : name);
+  const docinfo = docinfoOverride ?? docinfoProp ?? fetched;
+  const [busy, setBusy] = (0, import_react2.useState)(false);
+  const [shareOpen, setShareOpen] = (0, import_react2.useState)(false);
+  const [tagSuggestions, setTagSuggestions] = (0, import_react2.useState)([]);
+  const [openSections, setOpenSections] = (0, import_react2.useState)([]);
+  const openInitializedRef = (0, import_react2.useRef)(false);
+  (0, import_react2.useEffect)(() => {
+    if (!app || !doctype || docinfoOverride) return;
+    let cancelled = false;
+    (0, import_sidebar_rpc.fetchTagSuggestions)(app, doctype).then(names => {
+      if (!cancelled) setTagSuggestions(names);
+    }).catch(() => {});
+    return () => {
+      cancelled = true;
+    };
+  }, [app, doctype, docinfoOverride]);
+  const refresh = () => {
+    (0, import_useDocinfo.invalidateDocinfo)(doctype, name);
+    reload();
+    onRefresh?.();
+  };
+  const run = async action => {
+    if (busy || !app) return;
+    setBusy(true);
+    try {
+      await action();
+    } catch {} finally {
+      refresh();
+      setBusy(false);
+    }
+  };
+  const userInfo = docinfo?.user_info ?? {};
+  const userLabel = id => userInfo[id]?.fullname || id;
+  const userImage = id => {
+    const image = userInfo[id]?.image;
+    return typeof image === "string" && image ? (0, import_sidebar_utils.toAbsoluteUrl)(baseURL, image) : void 0;
+  };
+  const assignedCount = (docinfo?.assignments ?? []).filter(assignment => !!assignment.owner).length;
+  const attachments = (docinfo?.attachments ?? []).flatMap(file => {
+    if (!file.name || !file.file_url) return [];
+    return [{
+      id: file.name,
+      fileName: file.file_name || file.file_url.split("/").pop() || file.name,
+      fileUrl: file.file_url,
+      isPrivate: Boolean(file.is_private)
+    }];
+  });
+  const maxAttachments = typeof meta?.max_attachments === "number" ? meta.max_attachments : void 0;
+  const tags = (0, import_sidebar_utils.parseTagString)(docinfo?.tags);
+  const shares = (docinfo?.shared ?? []).flatMap(share => {
+    const rowName = typeof share.name === "string" ? share.name : void 0;
+    const user = typeof share.user === "string" ? share.user : void 0;
+    const everyone = Boolean(share.everyone);
+    if (!user && !everyone) return [];
+    return [{
+      id: rowName ?? user ?? "everyone",
+      user: user ?? "",
+      label: everyone ? t("everyone", "Everyone") : userLabel(user ?? ""),
+      sublabel: share.write ? t("canEdit", "Can edit") : share.read ? t("canView", "Can view") : void 0,
+      image: everyone || !user ? void 0 : userImage(user),
+      removable: !everyone && Boolean(user)
+    }];
+  });
+  const likedByField = doc ? doc._liked_by : void 0;
+  const likeLogOwners = new Set((docinfo?.like_logs ?? []).flatMap(log => typeof log.owner === "string" && log.owner ? [log.owner] : []));
+  const likeCount = likedByField !== void 0 ? (0, import_frappe_ui.parseLikedBy)(likedByField).length : likeLogOwners.size;
+  const attachmentCount = attachments.length;
+  const tagCount = tags.length;
+  const shareCount = shares.length;
+  const hasDocinfo = Boolean(docinfo);
+  (0, import_react2.useEffect)(() => {
+    if (openInitializedRef.current || !hasDocinfo) return;
+    openInitializedRef.current = true;
+    const defaults = [];
+    if (assignedCount > 0) defaults.push("assigned");
+    if (attachmentCount > 0) defaults.push("attachments");
+    if (tagCount > 0) defaults.push("tags");
+    if (shareCount > 0) defaults.push("shared");
+    if (likeCount > 0) defaults.push("liked");
+    setOpenSections(defaults);
+  }, [hasDocinfo, assignedCount, attachmentCount, tagCount, shareCount, likeCount]);
+  if (isNewDoc) return null;
+  if (!docinfo && loading) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+      ...knobProps.panelPadding,
+      ...(stacked ? {
+        width: "100%"
+      } : {
+        width: RAIL_WIDTH
+      }),
+      testID: "form-sidebar-skeleton",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.AsyncSkeleton, {
+        layout: "list"
+      })
+    });
+  }
+  const iconColor = typeof theme.color11?.val === "string" ? theme.color11.val : void 0;
+  const allSections = [{
+    key: "assigned",
+    title: t("assignedTo", "Assigned To"),
+    count: assignedCount,
+    icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.UsersIcon, {
+      size: 14,
+      color: iconColor
+    }),
+    content:
+    // The accordion header owns the section title, so the widget's own
+    // label slot is blanked (label="") — its add affordance and live
+    // assignee list are the section body. Mutations refresh the shared
+    // docinfo so the badge and the header cluster stay honest.
+    /* @__PURE__ */
+    (0, import_jsx_runtime.jsx)(import_FormErrorBoundary.FormErrorBoundary, {
+      errorTitle: t("assignmentsRenderError", "Assignments failed to render"),
+      testID: "form-sidebar-assigned-error",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_frappe_ui.FrappeAssignment, {
+        doctype,
+        name,
+        label: "",
+        currentUser,
+        onAssign: () => refresh(),
+        onRemove: () => refresh(),
+        onComplete: () => refresh(),
+        testID: "form-sidebar-assignment"
+      })
+    })
+  }, {
+    key: "attachments",
+    title: t("attachments", "Attachments"),
+    count: attachmentCount,
+    icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.PaperclipIcon, {
+      size: 14,
+      color: iconColor
+    }),
+    content: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_sidebar_attachments.SidebarAttachments, {
+      items: attachments,
+      baseURL,
+      maxAttachments,
+      disabled: busy,
+      onUpload: file => {
+        void run(() => (0, import_sidebar_rpc.uploadAttachment)(app, file, doctype, name));
+      },
+      onRemove: item => {
+        void run(() => (0, import_sidebar_rpc.removeAttachment)(app, item.id, doctype, name));
+      }
+    })
+  }, {
+    key: "tags",
+    title: t("tags", "Tags"),
+    count: tagCount,
+    icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.TagIcon, {
+      size: 14,
+      color: iconColor
+    }),
+    content: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Tags, {
+      compact: true,
+      tags: tags.map(tag => ({
+        id: tag,
+        label: tag
+      })),
+      suggestions: tagSuggestions.map(tag => ({
+        id: tag,
+        label: tag
+      })),
+      disabled: busy,
+      enableAdd: true,
+      onAdd: tagName => {
+        void run(() => (0, import_sidebar_rpc.addTag)(app, doctype, name, tagName));
+      },
+      onRemove: tag => {
+        void run(() => (0, import_sidebar_rpc.removeTag)(app, doctype, name, tag.label));
+      },
+      labels: {
+        addTag: t("addTag", "Add Tag"),
+        noTags: t("noTags", "No tags"),
+        clickToAdd: t("clickToAddTags", "Click + to add tags"),
+        suggestions: t("tagSuggestions", "Suggestions"),
+        noAvailableTags: t("noAvailableTags", "No available tags"),
+        createTag: value => t("createTag", 'Create "{{value}}"', {
+          value
+        })
+      },
+      placeholder: t("addTagPlaceholder", "Add tag...")
+    })
+  }, {
+    key: "shared",
+    title: t("sharedWith", "Shared With"),
+    count: shareCount,
+    icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.ShareNetworkIcon, {
+      size: 14,
+      color: iconColor
+    }),
+    content: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+      ...knobProps.gap,
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_sidebar_people.SidebarPeopleList, {
+        items: shares,
+        emptyText: t("notShared", "Not shared"),
+        disabled: busy,
+        onRemove: item => {
+          void run(() => (0, import_sidebar_rpc.removeShare)(app, doctype, name, item.user));
+        }
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+          size: "$2",
+          outlined: true,
+          icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.PlusIcon, {
+            size: 14
+          }),
+          loading: busy,
+          onPress: () => setShareOpen(true),
+          testID: "form-sidebar-share",
+          children: t("share", "Share")
+        })
+      })]
+    })
+  }, {
+    key: "liked",
+    title: t("likedBy", "Liked By"),
+    count: likeCount,
+    icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.HeartIcon, {
+      size: 14,
+      color: iconColor
+    }),
+    content:
+    // Live `_liked_by` heart + avatar cluster; the toggle mirrors the
+    // header cluster's heart and both refresh the shared docinfo.
+    /* @__PURE__ */
+    (0, import_jsx_runtime.jsx)(import_FormErrorBoundary.FormErrorBoundary, {
+      errorTitle: t("likesRenderError", "Likes failed to render"),
+      testID: "form-sidebar-liked-error",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_frappe_ui.FrappeLikedBy, {
+        doctype,
+        name,
+        currentUser,
+        onToggle: () => refresh(),
+        testID: "form-sidebar-liked-by"
+      })
+    })
+  }];
+  const sectionEnabled = {
+    assigned: capabilities.assignments.enabled,
+    attachments: capabilities.attachments.enabled,
+    tags: capabilities.tags.enabled,
+    shared: capabilities.shares.enabled
+  };
+  const sections = allSections.filter(section => sectionEnabled[section.key] !== false);
+  const metadata = [];
+  if (doc?.creation) {
+    const rel = (0, import_sidebar_utils.formatRelativeTime)(doc.creation, t);
+    const owner = typeof doc.owner === "string" ? doc.owner : void 0;
+    if (rel) {
+      metadata.push({
+        key: "created",
+        label: owner ? t("createdByline", "Created {{when}} by {{user}}", {
+          when: rel,
+          user: userLabel(owner)
+        }) : t("createdWhen", "Created {{when}}", {
+          when: rel
+        })
+      });
+    }
+  }
+  if (doc?.modified) {
+    const rel = (0, import_sidebar_utils.formatRelativeTime)(doc.modified, t);
+    const editor = typeof doc.modified_by === "string" ? doc.modified_by : void 0;
+    if (rel) {
+      metadata.push({
+        key: "edited",
+        label: editor ? t("editedByline", "Last edited {{when}} by {{user}}", {
+          when: rel,
+          user: userLabel(editor)
+        }) : t("editedWhen", "Last edited {{when}}", {
+          when: rel
+        })
+      });
+    }
+  }
+  const imageField = meta?.image_field;
+  const imageValue = imageField && doc ? doc[imageField] : void 0;
+  const imageUrl = typeof imageValue === "string" && imageValue ? (0, import_sidebar_utils.toAbsoluteUrl)(baseURL, imageValue) : void 0;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+      ...(stacked ? {
+        width: "100%"
+      } : {
+        width: RAIL_WIDTH,
+        flexShrink: 0
+      }),
+      ...knobProps.gap,
+      testID: "form-sidebar",
+      children: [imageUrl && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Image, {
+        src: imageUrl,
+        alt: t("documentImage", "Document image"),
+        width: "100%",
+        height: 140,
+        objectFit: "cover",
+        ...knobProps.containerRadius
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Accordion, {
+        type: "multiple",
+        variant: "plain",
+        value: openSections,
+        onValueChange: setOpenSections,
+        children: sections.map(section => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.Accordion.Item, {
+          value: section.key,
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Accordion.Trigger, {
+            icon: section.icon,
+            testID: `form-sidebar-section-${section.key}`,
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+              flex: 1,
+              alignItems: "center",
+              gap: "$2",
+              children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+                fontSize: "$3",
+                fontWeight: "600",
+                color: "$color12",
+                numberOfLines: 1,
+                children: section.title
+              }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Chip, {
+                size: "$2",
+                variant: "subtle",
+                color: "gray",
+                children: String(section.count)
+              })]
+            })
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Accordion.Content, {
+            children: section.content
+          })]
+        }, section.key))
+      }), metadata.length > 0 && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+        gap: "$1.5",
+        ...knobProps.panelPadding,
+        paddingTop: "$2",
+        children: metadata.map(entry => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+          gap: "$2",
+          alignItems: "center",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.ClockIcon, {
+            size: 14,
+            color: iconColor
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+            flex: 1,
+            fontSize: "$1",
+            color: "$color11",
+            children: entry.label
+          })]
+        }, entry.key))
+      })]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_sidebar_dialogs.SidebarShareDialog, {
+      open: shareOpen,
+      onOpenChange: setShareOpen,
+      onShare: (user, canWrite) => {
+        void run(() => (0, import_sidebar_rpc.addShare)(app, doctype, name, user, {
+          write: canWrite
+        }));
+      }
+    })]
+  });
+}