@multiplatform.one/frappe-ui 7.22.0 → 7.23.1

package/dist/cjs/list/listColumns.cjs

@@ -0,0 +1,397 @@
+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 listColumns_exports = {};
+__export(listColumns_exports, {
+  buildListColumns: () => buildListColumns
+});
+module.exports = __toCommonJS(listColumns_exports);
+var import_components = require("@multiplatform.one/components");
+var import_forms = require("@multiplatform.one/forms");
+var import_react = require("@phosphor-icons/react");
+var import_theme = require("@multiplatform.one/theme");
+var import_listFields = require("./listFields.cjs");
+var import_listFormat = require("./listFormat.cjs");
+var import_statusColors = require("./statusColors.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+const NUMERIC_FIELDTYPES = /* @__PURE__ */new Set(["Currency", "Float", "Int", "Percent", "Duration"]);
+const RICH_TEXT_FIELDTYPES = /* @__PURE__ */new Set(["Text Editor", "HTML Editor", "HTML", "Markdown Editor", "Long Text", "Text", "Small Text"]);
+function cellPreview(value, fieldtype) {
+  const text = fieldtype && RICH_TEXT_FIELDTYPES.has(fieldtype) ? (0, import_listFormat.stripHtmlPreview)(value) : value;
+  return text.replace(/\s+/g, " ").trim();
+}
+function isStatusField(field, meta) {
+  if (field.fieldname === "status") return true;
+  if (field.fieldtype !== "Select") return false;
+  const stateTitles = new Set((meta?.states ?? []).map(state => (state.title ?? "").trim().toLowerCase()));
+  if (stateTitles.size === 0) return false;
+  const options = (field.options ?? "").split("\n").map(option => option.trim().toLowerCase());
+  return options.some(option => option && stateTitles.has(option));
+}
+function isIndicatorField(field, meta) {
+  if (field.fieldtype === "Select") return true;
+  if (field.fieldtype === "Check" && field.fieldname === "enabled") return true;
+  return isStatusField(field, meta);
+}
+function stopRowPress(event) {
+  event?.stopPropagation?.();
+}
+function chipColorFromStatus(value, meta) {
+  const ramp = (0, import_statusColors.statusPillColors)(value, meta).background.replace(/^\$/, "").replace(/\d+$/, "");
+  if (ramp === "pink") return "purple";
+  if (ramp === "red" || ramp === "green" || ramp === "blue" || ramp === "yellow" || ramp === "orange" || ramp === "purple" || ramp === "gray") {
+    return ramp;
+  }
+  return "gray";
+}
+function IndicatorPill({
+  value,
+  meta,
+  fieldname,
+  filterValue,
+  onFilterClick
+}) {
+  const chipColor = chipColorFromStatus(value, meta);
+  const applied = filterValue ?? value;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
+    alignSelf: "flex-start",
+    ...(onFilterClick ? {
+      "data-filter": `${fieldname},=,${applied}`,
+      onPress: event => stopRowPress(event)
+    } : {}),
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Chip, {
+      size: "$2",
+      variant: "subtle",
+      color: chipColor,
+      onPress: onFilterClick ? () => onFilterClick(fieldname, applied) : void 0,
+      children: value
+    })
+  });
+}
+function FilterableText({
+  fieldname,
+  value,
+  children,
+  onFilterClick
+}) {
+  if (!onFilterClick) return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
+    children
+  });
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
+    role: "button",
+    cursor: "pointer",
+    minWidth: 0,
+    flexShrink: 1,
+    onPress: event => {
+      stopRowPress(event);
+      onFilterClick(fieldname, value);
+    },
+    hoverStyle: {
+      opacity: 0.8
+    },
+    ...{
+      "data-filter": `${fieldname},=,${value}`
+    },
+    children
+  });
+}
+function commentCount(doc) {
+  const raw = doc._comment_count;
+  if (typeof raw === "number" && Number.isFinite(raw)) return raw;
+  if (typeof raw === "string" && raw.trim()) {
+    const parsed = Number(raw);
+    if (Number.isFinite(parsed)) return parsed;
+  }
+  const comments = doc._comments;
+  if (typeof comments === "string" && comments.trim()) {
+    try {
+      const parsed = JSON.parse(comments);
+      if (Array.isArray(parsed)) return parsed.length;
+    } catch {
+      return 0;
+    }
+  }
+  return 0;
+}
+function LikeControl({
+  doc,
+  t,
+  sessionUser,
+  onToggleLike,
+  likeOverrides
+}) {
+  const name = doc.name ?? "";
+  const likedBy = (0, import_listFormat.parseUserListField)(doc._liked_by);
+  const liked = likeOverrides?.[name] ?? (sessionUser ? likedBy.includes(sessionUser) : false);
+  const likeLabel = liked ? t("list.unlike", "Remove from liked") : t("list.like", "Add to liked");
+  if (!onToggleLike || !name) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+      fontSize: "$4",
+      color: liked ? "$red10" : "$color8",
+      role: "img",
+      "aria-label": likeLabel,
+      children: liked ? "\u2665" : "\u2661"
+    });
+  }
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+    circular: true,
+    chromeless: true,
+    size: "$2",
+    col: liked ? "$red10" : "$color8",
+    icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.HeartIcon, {
+      size: 16,
+      weight: liked ? "fill" : "regular"
+    }),
+    "aria-label": likeLabel,
+    "aria-pressed": liked,
+    onPress: event => {
+      stopRowPress(event);
+      onToggleLike(name, !liked);
+    }
+  });
+}
+function ActivityCluster({
+  doc,
+  t,
+  sessionUser,
+  onToggleLike,
+  likeOverrides
+}) {
+  const assignees = (0, import_listFormat.parseUserListField)(doc._assign);
+  const comments = commentCount(doc);
+  const modified = doc.modified ? String(doc.modified) : "";
+  const absolute = modified ? (0, import_theme.formatAbsoluteDateTime)(modified) : "";
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+    alignItems: "center",
+    justifyContent: "flex-end",
+    gap: "$2",
+    minWidth: 0,
+    testID: "list-activity",
+    children: [assignees.slice(0, 3).map(user => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Avatar, {
+      name: user,
+      size: 20,
+      circular: true,
+      "aria-label": user
+    }, user)), modified ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+      fontSize: "$2",
+      color: "$color9",
+      ...{
+        title: absolute || void 0
+      },
+      children: (0, import_listFormat.formatTimeAgo)(modified)
+    }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+      alignItems: "center",
+      gap: "$1",
+      ...{
+        "aria-label": t("list.comments", "Comments")
+      },
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.ChatCircleIcon, {
+        size: 14
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+        fontSize: "$2",
+        color: "$color9",
+        children: comments
+      })]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(LikeControl, {
+      doc,
+      t,
+      sessionUser,
+      onToggleLike,
+      likeOverrides
+    })]
+  });
+}
+function fieldCell(field, meta, onFilterClick) {
+  return ({
+    getValue
+  }) => {
+    const raw = getValue();
+    if (raw === null || raw === void 0 || raw === "") return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+      fontSize: "$3",
+      color: "$color8",
+      children: "\u2014"
+    });
+    if (field.fieldtype === "Check" && field.fieldname === "enabled") {
+      const on = raw === true || raw === 1 || raw === "1";
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(IndicatorPill, {
+        value: on ? "Active" : "Disabled",
+        meta,
+        fieldname: field.fieldname,
+        filterValue: on ? "1" : "0",
+        onFilterClick
+      });
+    }
+    const value = String(raw);
+    if (isIndicatorField(field, meta)) {
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(IndicatorPill, {
+        value,
+        meta,
+        fieldname: field.fieldname,
+        onFilterClick
+      });
+    }
+    switch (field.fieldtype) {
+      case "Check":
+        return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+          fontSize: "$3",
+          color: raw ? "$green11" : "$color8",
+          children: raw ? "\u2713" : "\u2014"
+        });
+      case "Date":
+      case "Datetime":
+        {
+          const display = (0, import_listFormat.formatDateCell)(value);
+          return /* @__PURE__ */(0, import_jsx_runtime.jsx)(FilterableText, {
+            fieldname: field.fieldname,
+            value,
+            onFilterClick,
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+              fontSize: "$3",
+              color: "$color11",
+              children: display
+            })
+          });
+        }
+      case "Currency":
+      case "Float":
+      case "Int":
+      case "Percent":
+        return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+          fontSize: "$3",
+          color: "$color12",
+          textAlign: "right",
+          children: value
+        });
+      case "Link":
+        return /* @__PURE__ */(0, import_jsx_runtime.jsx)(FilterableText, {
+          fieldname: field.fieldname,
+          value,
+          onFilterClick,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+            fontSize: "$3",
+            color: "$color11",
+            numberOfLines: 1,
+            flexShrink: 1,
+            minWidth: 0,
+            children: value
+          })
+        });
+      default:
+        return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+          fontSize: "$3",
+          color: "$color11",
+          numberOfLines: 1,
+          flexShrink: 1,
+          minWidth: 0,
+          children: cellPreview(value, field.fieldtype)
+        });
+    }
+  };
+}
+function buildListColumns({
+  meta,
+  t,
+  sessionUser,
+  onToggleLike,
+  likeOverrides,
+  permMatrix,
+  getDocHref,
+  onFilterClick
+}) {
+  const titleField = meta?.title_field || "name";
+  const columns = [];
+  const titleMeta = meta?.fields?.find(field => field.fieldname === titleField);
+  columns.push({
+    id: titleField,
+    header: titleField === "name" ? t("list.idColumn", "ID") : titleMeta?.label || t("list.titleColumn", "Title"),
+    accessorKey: titleField,
+    minWidth: 180,
+    meta: {
+      role: "title"
+    },
+    cell: ({
+      row,
+      getValue
+    }) => {
+      const raw = getValue();
+      const name = row.original.name ?? "";
+      const value = raw === null || raw === void 0 || raw === "" ? name : String(raw);
+      const href = name && getDocHref ? getDocHref(name) : void 0;
+      const label = cellPreview(value, titleMeta?.fieldtype);
+      const subject = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+        fontSize: "$3",
+        fontWeight: "400",
+        color: "$color12",
+        numberOfLines: 1,
+        flexShrink: 1,
+        minWidth: 0,
+        children: label
+      });
+      if (!href) return subject;
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Anchor, {
+        href,
+        textDecorationLine: "none",
+        minWidth: 0,
+        flexShrink: 1,
+        onPress: stopRowPress,
+        children: subject
+      });
+    }
+  });
+  for (const field of (0, import_listFields.listViewFields)(meta, titleField, permMatrix)) {
+    columns.push({
+      id: field.fieldname,
+      header: field.label || field.fieldname,
+      accessorKey: field.fieldname,
+      ...(NUMERIC_FIELDTYPES.has(field.fieldtype) ? {
+        align: "right"
+      } : {}),
+      cell: fieldCell(field, meta, onFilterClick)
+    });
+  }
+  columns.push({
+    id: "_activity",
+    header: t("list.activity", "Activity"),
+    meta: {
+      role: "actions",
+      label: t("list.activity", "Activity")
+    },
+    sortable: false,
+    filterable: false,
+    cell: ({
+      row
+    }) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(ActivityCluster, {
+      doc: row.original,
+      t,
+      sessionUser,
+      onToggleLike,
+      likeOverrides
+    })
+  });
+  columns.push({
+    id: "modified",
+    accessorKey: "modified",
+    header: t("list.lastUpdated", "Last Updated On"),
+    enableHiding: true
+  });
+  return columns;
+}