@multiplatform.one/backoffice 6.7.0 → 7.0.0

package/dist/cjs/list/listColumns.cjs

@@ -28,6 +28,7 @@ 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");
@@ -46,26 +47,189 @@ function isStatusField(field, meta) {
   const options = (field.options ?? "").split("\n").map(option => option.trim().toLowerCase());
   return options.some(option => option && stateTitles.has(option));
 }
-function StatusPill({
+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 IndicatorPill({
   value,
-  meta
+  meta,
+  fieldname,
+  filterValue,
+  onFilterClick
 }) {
   const colors = (0, import_statusColors.statusPillColors)(value, meta);
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
+  const applied = filterValue ?? value;
+  const handlePress = onFilterClick ? event => {
+    stopRowPress(event);
+    onFilterClick(fieldname, applied);
+  } : void 0;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
     alignSelf: "flex-start",
+    alignItems: "center",
+    gap: "$1.5",
     backgroundColor: colors.background,
     borderRadius: 999,
-    paddingHorizontal: "$2.5",
-    paddingVertical: "$1",
-    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+    paddingHorizontal: "$2",
+    paddingVertical: 3,
+    ...(handlePress ? {
+      role: "button",
+      cursor: "pointer",
+      onPress: handlePress,
+      "data-filter": `${fieldname},=,${applied}`
+    } : {}),
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+      width: 6,
+      height: 6,
+      borderRadius: 999,
+      backgroundColor: colors.text,
+      flexShrink: 0
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
       color: colors.text,
       fontSize: "$2",
       fontWeight: "600",
       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) {
+function fieldCell(field, meta, onFilterClick) {
   return ({
     getValue
   }) => {
@@ -75,11 +239,25 @@ function fieldCell(field, meta) {
       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 (isStatusField(field, meta)) return /* @__PURE__ */(0, import_jsx_runtime.jsx)(StatusPill, {
-      value,
-      meta
-    });
+    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, {
@@ -89,11 +267,19 @@ function fieldCell(field, meta) {
         });
       case "Date":
       case "Datetime":
-        return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
-          fontSize: "$3",
-          color: "$color11",
-          children: (0, import_listFormat.formatDateCell)(value)
-        });
+        {
+          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":
@@ -105,13 +291,18 @@ function fieldCell(field, meta) {
           children: value
         });
       case "Link":
-        return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
-          fontSize: "$3",
-          color: "$color11",
-          numberOfLines: 1,
-          flexShrink: 1,
-          minWidth: 0,
-          children: 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",
+            numberOfLines: 1,
+            flexShrink: 1,
+            minWidth: 0,
+            children: value
+          })
         });
       default:
         return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
@@ -131,82 +322,47 @@ function buildListColumns({
   sessionUser,
   onToggleLike,
   likeOverrides,
-  permMatrix
+  permMatrix,
+  getDocHref,
+  onFilterClick
 }) {
   const titleField = meta?.title_field || "name";
   const columns = [];
-  columns.push({
-    id: "_liked_by",
-    // Glyph header with a spoken name — a bare "♥" string gives the column
-    // an unpronounceable accessible name. Presentational glyph + aria-label.
-    header: () => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
-      role: "img",
-      "aria-label": t("list.likedColumn", "Liked"),
-      color: "$color9",
-      fontSize: "$4",
-      children: "\u2665"
-    }),
-    accessorKey: "_liked_by",
-    sortable: false,
-    filterable: false,
-    width: 56,
-    maxWidth: 64,
-    align: "center",
-    cell: ({
-      row
-    }) => {
-      const doc = row.original;
-      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 => {
-          event?.stopPropagation?.();
-          onToggleLike(name, !liked);
-        }
-      });
-    }
-  });
   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 value = raw === null || raw === void 0 || raw === "" ? row.original.name ?? "" : String(raw);
-      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+      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: "600",
         color: "$color12",
         numberOfLines: 1,
         flexShrink: 1,
         minWidth: 0,
-        children: cellPreview(value, titleMeta?.fieldtype)
+        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
       });
     }
   });
@@ -218,40 +374,33 @@ function buildListColumns({
       ...(NUMERIC_FIELDTYPES.has(field.fieldtype) ? {
         align: "right"
       } : {}),
-      cell: fieldCell(field, meta)
-    });
-  }
-  if (titleField !== "name") {
-    columns.push({
-      id: "name",
-      header: t("list.idColumn", "ID"),
-      accessorKey: "name",
-      maxWidth: 160,
-      cell: ({
-        getValue
-      }) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
-        fontSize: "$2",
-        color: "$color9",
-        numberOfLines: 1,
-        children: String(getValue() ?? "")
-      })
+      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",
-    header: t("list.lastUpdated", "Last Updated On"),
     accessorKey: "modified",
-    maxWidth: 140,
-    cell: ({
-      getValue
-    }) => {
-      const raw = getValue();
-      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
-        fontSize: "$2",
-        color: "$color9",
-        children: raw ? (0, import_listFormat.formatTimeAgo)(String(raw)) : ""
-      });
-    }
+    header: t("list.lastUpdated", "Last Updated On"),
+    enableHiding: true
   });
   return columns;
 }