@multiplatform.one/backoffice 6.4.3 → 6.6.0

package/dist/cjs/form/FormTimeline.cjs

@@ -0,0 +1,517 @@
+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 FormTimeline_exports = {};
+__export(FormTimeline_exports, {
+  FormTimeline: () => FormTimeline
+});
+module.exports = __toCommonJS(FormTimeline_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_i18n = require("../i18n/index.cjs");
+var import_useDocinfo = require("../shared/useDocinfo.cjs");
+var import_useFrappeApp = require("../shared/useFrappeApp.cjs");
+var import_timeline_entries = require("./timeline-entries.cjs");
+var import_timeline_utils = require("./timeline-utils.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+const PAGE_SIZE = 20;
+function FormTimeline({
+  doctype,
+  name,
+  docInfo,
+  refreshDocInfo,
+  currentUser,
+  connection
+}) {
+  const {
+    t
+  } = (0, import_react_i18next.useTranslation)(import_i18n.BACKOFFICE_I18N_NAMESPACE);
+  const app = (0, import_useFrappeApp.useFrappeApp)();
+  const config = (0, import_frappe_ui.useFrappeConfig)();
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const radiusToken = knobProps.borderRadius.borderRadius;
+  const composed = docInfo !== void 0 || refreshDocInfo !== void 0;
+  const {
+    docinfo: fetched,
+    loading,
+    error,
+    reload
+  } = (0, import_useDocinfo.useDocinfo)(composed ? void 0 : doctype, composed ? void 0 : name);
+  const docinfo = docInfo ?? fetched;
+  const fetchedSessionUser = (0, import_timeline_utils.useSessionUser)(!currentUser);
+  const sessionUser = currentUser ?? fetchedSessionUser;
+  const [filter, setFilter] = (0, import_react2.useState)("all");
+  const [visibleCount, setVisibleCount] = (0, import_react2.useState)(PAGE_SIZE);
+  const [editing, setEditing] = (0, import_react2.useState)(null);
+  const [confirmingDelete, setConfirmingDelete] = (0, import_react2.useState)(null);
+  const [busyDocname, setBusyDocname] = (0, import_react2.useState)(null);
+  const [actionError, setActionError] = (0, import_react2.useState)(void 0);
+  (0, import_react2.useEffect)(() => {
+    setVisibleCount(PAGE_SIZE);
+    setEditing(null);
+    setConfirmingDelete(null);
+    setActionError(void 0);
+  }, [doctype, name]);
+  const refresh = (0, import_react2.useCallback)(() => {
+    (0, import_useDocinfo.invalidateDocinfo)(doctype, name);
+    if (refreshDocInfo) refreshDocInfo();else reload();
+  }, [doctype, name, refreshDocInfo, reload]);
+  const reportActionError = (0, import_react2.useCallback)((err, fallback) => {
+    const message = err instanceof Error && err.message ? String(err.message) : "";
+    const readable = (0, import_timeline_utils.htmlToText)(message);
+    setActionError(readable ? (0, import_timeline_utils.truncateText)(readable, 200) : fallback);
+  }, []);
+  const baseURL = connection?.baseURL ?? config?.baseURL;
+  const entries = (0, import_react2.useMemo)(() => (0, import_timeline_entries.buildTimelineFeed)(docinfo, {
+    userInfo: docinfo?.user_info,
+    baseURL
+  }), [docinfo, baseURL]);
+  const filtered = (0, import_react2.useMemo)(() => (0, import_timeline_entries.filterTimelineFeed)(entries, filter), [entries, filter]);
+  const visible = (0, import_react2.useMemo)(() => filtered.slice(0, visibleCount), [filtered, visibleCount]);
+  const hiddenCount = Math.max(0, filtered.length - visible.length);
+  const handleFilterChange = (0, import_react2.useCallback)(value => {
+    setFilter(value);
+    setVisibleCount(PAGE_SIZE);
+  }, []);
+  const canComment = Boolean(sessionUser && (app || composed));
+  const handleAddComment = (0, import_react2.useCallback)(content => {
+    const text = content.trim();
+    if (!app || !sessionUser || !text) return;
+    const rawFullname = docinfo?.user_info?.[sessionUser]?.fullname;
+    const fullname = typeof rawFullname === "string" && rawFullname ? rawFullname : sessionUser;
+    setActionError(void 0);
+    app.call().post("frappe.desk.form.utils.add_comment", {
+      reference_doctype: doctype,
+      reference_name: name,
+      content: (0, import_timeline_utils.textToCommentHtml)(text),
+      comment_email: sessionUser,
+      comment_by: fullname
+    }).then(() => refresh()).catch(err => {
+      reportActionError(err, t("timeline.addFailed", "Could not add comment"));
+    });
+  }, [app, sessionUser, docinfo, doctype, name, refresh, reportActionError, t]);
+  const handleSaveEdit = (0, import_react2.useCallback)(() => {
+    if (!editing) return;
+    const text = editing.text.trim();
+    if (!app || !text) {
+      setEditing(null);
+      return;
+    }
+    const target = editing.docname;
+    setBusyDocname(target);
+    setActionError(void 0);
+    app.call().post("frappe.desk.form.utils.update_comment", {
+      name: target,
+      content: (0, import_timeline_utils.textToCommentHtml)(text)
+    }).then(() => {
+      setEditing(null);
+      refresh();
+    }).catch(err => {
+      reportActionError(err, t("timeline.updateFailed", "Could not update comment"));
+    }).finally(() => setBusyDocname(null));
+  }, [app, editing, refresh, reportActionError, t]);
+  const handleDeleteComment = (0, import_react2.useCallback)(docname => {
+    if (!app) {
+      setConfirmingDelete(null);
+      return;
+    }
+    setBusyDocname(docname);
+    setActionError(void 0);
+    app.call().post("frappe.client.delete", {
+      doctype: "Comment",
+      name: docname
+    }).then(() => refresh()).catch(err => {
+      reportActionError(err, t("timeline.deleteFailed", "Could not delete comment"));
+    }).finally(() => {
+      setBusyDocname(null);
+      setConfirmingDelete(null);
+    });
+  }, [app, refresh, reportActionError, t]);
+  const renderTimestamp = (entry, fontSize = "$2") => {
+    const absolute = (0, import_theme.formatAbsoluteDateTime)(entry.timestamp);
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+      fontSize,
+      color: "$color10",
+      ...{
+        title: absolute
+      },
+      "aria-label": absolute,
+      children: (0, import_timeline_utils.formatRelativeTime)(entry.timestamp)
+    });
+  };
+  const displayNameOf = entry => entry.authorName?.trim() || entry.author;
+  const renderCommentRow = entry => {
+    const displayName = displayNameOf(entry);
+    const own = Boolean(sessionUser && entry.ownerId === sessionUser);
+    const isEditing = editing?.docname === entry.docname;
+    const isConfirming = confirmingDelete === entry.docname;
+    const isBusy = busyDocname === entry.docname;
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+      role: "article",
+      "aria-label": `${displayName}, ${(0, import_timeline_utils.formatRelativeTime)(entry.timestamp)}`,
+      gap: "$3",
+      alignItems: "flex-start",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Avatar, {
+        circular: false,
+        borderRadius: radiusToken,
+        size: "$2",
+        name: displayName,
+        src: entry.image,
+        fallbackBackgroundColor: "$accentBackground"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+        flex: 1,
+        gap: "$1",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+          gap: "$2",
+          alignItems: "center",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+            flex: 1,
+            gap: "$2",
+            alignItems: "center",
+            flexWrap: "wrap",
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+              fontSize: "$3",
+              fontWeight: "600",
+              children: displayName
+            }), renderTimestamp(entry)]
+          }), own && !isEditing && !isConfirming && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+            gap: "$1",
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Button, {
+              chromeless: true,
+              size: "$1",
+              borderRadius: radiusToken,
+              icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.PencilSimpleIcon, {
+                size: 12
+              }),
+              "aria-label": t("timeline.editComment", "Edit comment"),
+              disabled: isBusy,
+              onPress: () => {
+                setConfirmingDelete(null);
+                setEditing({
+                  docname: entry.docname,
+                  text: (0, import_timeline_utils.htmlToText)(entry.html ?? entry.content ?? "")
+                });
+              }
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Button, {
+              chromeless: true,
+              size: "$1",
+              borderRadius: radiusToken,
+              icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.TrashIcon, {
+                size: 12
+              }),
+              "aria-label": t("timeline.deleteComment", "Delete comment"),
+              disabled: isBusy,
+              onPress: () => {
+                setEditing(null);
+                setConfirmingDelete(entry.docname);
+              }
+            })]
+          })]
+        }), isEditing ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+          gap: "$2",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.TextArea, {
+            value: editing?.text ?? "",
+            onChangeText: text => setEditing(prev => prev ? {
+              ...prev,
+              text
+            } : prev),
+            size: "$3",
+            minRows: 2,
+            textAreaProps: {
+              "aria-label": t("timeline.editComment", "Edit comment"),
+              autoFocus: true
+            }
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+            gap: "$2",
+            justifyContent: "flex-end",
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Button, {
+              size: "$2",
+              variant: "outlined",
+              borderRadius: radiusToken,
+              disabled: isBusy,
+              onPress: () => setEditing(null),
+              children: t("timeline.cancel", "Cancel")
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Button, {
+              size: "$2",
+              borderRadius: radiusToken,
+              disabled: !(editing?.text ?? "").trim() || isBusy,
+              icon: isBusy ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Spinner, {
+                size: "small"
+              }) : void 0,
+              onPress: handleSaveEdit,
+              children: t("timeline.save", "Save")
+            })]
+          })]
+        }) : entry.content ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+          fontSize: "$3",
+          whiteSpace: "pre-wrap",
+          children: entry.content
+        }) : null, isConfirming && !isEditing && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+          gap: "$2",
+          alignItems: "center",
+          flexWrap: "wrap",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+            fontSize: "$2",
+            color: "$color10",
+            children: t("timeline.deleteConfirm", "Delete this comment?")
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Button, {
+            size: "$2",
+            theme: "error",
+            borderRadius: radiusToken,
+            disabled: isBusy,
+            icon: isBusy ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Spinner, {
+              size: "small"
+            }) : void 0,
+            onPress: () => handleDeleteComment(entry.docname),
+            children: t("timeline.delete", "Delete")
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Button, {
+            chromeless: true,
+            size: "$2",
+            borderRadius: radiusToken,
+            disabled: isBusy,
+            onPress: () => setConfirmingDelete(null),
+            children: t("timeline.cancel", "Cancel")
+          })]
+        })]
+      })]
+    });
+  };
+  const renderSystemRow = (entry, icon, text) => {
+    const displayName = displayNameOf(entry);
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+      role: "article",
+      "aria-label": `${displayName} ${text}`.trim(),
+      gap: "$3",
+      alignItems: "flex-start",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+        width: 24,
+        height: 24,
+        alignItems: "center",
+        justifyContent: "center",
+        opacity: 0.6,
+        children: icon
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+        flex: 1,
+        gap: "$1.5",
+        alignItems: "center",
+        flexWrap: "wrap",
+        paddingTop: 2,
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+          fontSize: "$2",
+          fontWeight: "600",
+          color: "$color10",
+          children: displayName
+        }), text ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+          fontSize: "$2",
+          color: "$color10",
+          children: text
+        }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+          fontSize: "$2",
+          color: "$color10",
+          opacity: 0.75,
+          children: "\xB7"
+        }), renderTimestamp(entry)]
+      })]
+    });
+  };
+  const renderCommunicationRow = entry => {
+    const displayName = displayNameOf(entry);
+    const icon = entry.kind === "automated" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.RobotIcon, {
+      size: 14
+    }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.EnvelopeSimpleIcon, {
+      size: 14
+    });
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+      role: "article",
+      "aria-label": `${displayName}, ${entry.subject ?? ""}`.trim(),
+      gap: "$3",
+      alignItems: "flex-start",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+        width: 24,
+        height: 24,
+        alignItems: "center",
+        justifyContent: "center",
+        opacity: 0.6,
+        children: icon
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+        flex: 1,
+        gap: "$1",
+        borderWidth: 1,
+        borderColor: "$borderColor",
+        borderRadius: radiusToken,
+        padding: "$3",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+          gap: "$2",
+          alignItems: "center",
+          flexWrap: "wrap",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+            fontSize: "$3",
+            fontWeight: "600",
+            children: displayName
+          }), entry.author !== displayName && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+            fontSize: "$2",
+            color: "$color10",
+            children: entry.author
+          }), renderTimestamp(entry)]
+        }), entry.subject ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+          fontSize: "$3",
+          fontWeight: "600",
+          children: entry.subject
+        }) : null, entry.content ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+          fontSize: "$2",
+          color: "$color11",
+          numberOfLines: 3,
+          children: entry.content
+        }) : null]
+      })]
+    });
+  };
+  const renderFeedEntry = raw => {
+    const entry = raw;
+    switch (entry.kind) {
+      case "comment":
+        return renderCommentRow(entry);
+      case "version":
+        return renderSystemRow(entry, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.PencilSimpleIcon, {
+          size: 14
+        }), entry.version ? (0, import_timeline_entries.versionSummary)(entry.version, (key, options) => t(key, options)) : t("timeline.madeChanges", "made changes"));
+      case "communication":
+      case "automated":
+        return renderCommunicationRow(entry);
+      case "assignment":
+        return renderSystemRow(entry, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.UserPlusIcon, {
+          size: 14
+        }), entry.content ?? "");
+      case "attachment":
+        return renderSystemRow(entry, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.PaperclipIcon, {
+          size: 14
+        }), entry.content ?? "");
+      case "like":
+        return renderSystemRow(entry, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.HeartIcon, {
+          size: 14
+        }), entry.content ?? "");
+      default:
+        return renderSystemRow(entry, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.InfoIcon, {
+          size: 14
+        }), entry.content ?? "");
+    }
+  };
+  const tabItems = (0, import_react2.useMemo)(() => [{
+    value: "all",
+    label: t("timeline.filterAll", "All")
+  }, {
+    value: "comments",
+    label: t("timeline.filterComments", "Comments")
+  }, {
+    value: "edits",
+    label: t("timeline.filterEdits", "Edits")
+  }], [t]);
+  const emptyLabel = filter === "comments" ? t("timeline.noComments", "No comments yet") : filter === "edits" ? t("timeline.noEdits", "No edits yet") : t("timeline.noActivity", "No activity yet");
+  if (!docinfo) {
+    if (!composed && error && !loading) {
+      return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+        gap: "$3",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.H4, {
+          children: t("timeline.activity", "Activity")
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+          gap: "$2",
+          alignItems: "flex-start",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+            fontSize: "$2",
+            color: "$red10",
+            children: t("timeline.loadFailed", "Could not load activity")
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Button, {
+            size: "$2",
+            borderRadius: radiusToken,
+            onPress: refresh,
+            children: t("timeline.retry", "Retry")
+          })]
+        })]
+      });
+    }
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+      gap: "$3",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.H4, {
+        children: t("timeline.activity", "Activity")
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+        gap: "$2",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "$4",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Spinner, {
+          size: "small"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+          fontSize: "$2",
+          color: "$color10",
+          children: t("timeline.loading", "Loading activity\u2026")
+        })]
+      })]
+    });
+  }
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+    gap: "$3",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.H4, {
+      children: t("timeline.activity", "Activity")
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Tabs, {
+      items: tabItems,
+      value: filter,
+      onChange: handleFilterChange
+    }), actionError ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+      fontSize: "$2",
+      color: "$red10",
+      role: "alert",
+      children: actionError
+    }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Timeline, {
+      entries: visible,
+      enableAddComment: canComment,
+      onCommentAdded: canComment ? handleAddComment : void 0,
+      renderEntry: entry => renderFeedEntry(entry),
+      placeholder: t("timeline.addCommentPlaceholder", "Add a comment\u2026"),
+      labels: {
+        noActivity: emptyLabel,
+        addComment: t("timeline.addComment", "Add Comment"),
+        cancel: t("timeline.cancel", "Cancel"),
+        comment: t("timeline.comment", "Comment"),
+        sending: t("timeline.sending", "Sending\u2026")
+      }
+    }), hiddenCount > 0 && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
+      justifyContent: "center",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Button, {
+        chromeless: true,
+        size: "$2",
+        borderRadius: radiusToken,
+        onPress: () => setVisibleCount(count => count + PAGE_SIZE),
+        children: t("timeline.loadOlder", {
+          defaultValue: "Load older ({{hidden}} more)",
+          hidden: hiddenCount
+        })
+      })
+    })]
+  });
+}