@multiplatform.one/backoffice 6.4.3 → 6.7.0

package/src/list/ListBulkActionsBar.tsx

@@ -0,0 +1,355 @@
+// Contract: appears when rows are selected — bulk edit / export CSV / assign /
+// tag / submit / cancel / delete actions (desk parity). Keep props stable —
+// list-core imports this.
+//
+// Note: DoctypeListScreen currently surfaces the same actions through the
+// DataTable's built-in selection toolbar (house DG-TBL-02 pattern) using
+// the shared dialogs/helpers below; this standalone bar exists for surfaces
+// that manage selection themselves (report/kanban streams).
+import React from "react";
+import { Button, ConfirmDialog, Text, XStack, notify } from "@multiplatform.one/components";
+// Catalog action Button — `error` renders the destructive intent from the
+// semantic ramp instead of a hardcoded named hue (LC-05 ONE-EMPHASIS).
+import { Button as ActionButton } from "@multiplatform.one/forms";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useBackofficeCapabilities, useBackofficeConfig } from "../config/BackofficeProvider";
+import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
+import type { DoctypeMeta } from "../shared/useDoctypeMeta";
+import { useFrappeApp } from "../shared/useFrappeApp";
+import { AddTagsDialog } from "./AddTagsDialog";
+import { AssignToDialog } from "./AssignToDialog";
+import { bulkDelete } from "./bulkActions";
+import { BulkEditDialog } from "./bulk-edit-dialog";
+import { bulkExportCsv } from "./bulk-export";
+import { bulkSubmitCancel, type BulkDocstatusAction } from "./bulk-submit-cancel";
+
+export interface ListBulkActionsBarProps {
+  doctype: string;
+  meta?: DoctypeMeta;
+  /** Selected document names */
+  selectedNames: string[];
+  onClearSelection: () => void;
+  /** Called after any bulk action completes so the list refreshes */
+  onActionComplete: () => void;
+}
+
+export function ListBulkActionsBar({
+  doctype,
+  meta,
+  selectedNames,
+  onClearSelection,
+  onActionComplete,
+}: ListBulkActionsBarProps) {
+  const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+  const app = useFrappeApp();
+  const capabilities = useBackofficeCapabilities();
+  const { actions } = useBackofficeConfig();
+  const [confirmDelete, setConfirmDelete] = useState(false);
+  const [assignOpen, setAssignOpen] = useState(false);
+  const [tagOpen, setTagOpen] = useState(false);
+  const [editOpen, setEditOpen] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+  const [exporting, setExporting] = useState(false);
+  const [docstatusAction, setDocstatusAction] = useState<BulkDocstatusAction | undefined>(
+    undefined,
+  );
+  const [docstatusBusy, setDocstatusBusy] = useState(false);
+
+  // Capability gates: the whole bar rides `bulkActions`; the assignment and
+  // tag actions additionally ride their own flags.
+  if (!capabilities.bulkActions.enabled) return null;
+  if (selectedNames.length === 0) return null;
+  const isSubmittable = meta?.is_submittable === 1;
+  const showAssign = capabilities.assignments.enabled;
+  const showTags = capabilities.tags.enabled;
+  const hostActions = actions.list ?? [];
+
+  const handleDelete = async () => {
+    if (!app) return;
+    setDeleting(true);
+    try {
+      const result = await bulkDelete(app, doctype, selectedNames);
+      if (result.failed.length > 0) {
+        notify({
+          severity: "warning",
+          scope: "page",
+          body: t("list.deletePartial", {
+            defaultValue: "Deleted {{ok}} document(s); {{failed}} failed ({{names}})",
+            ok: result.succeeded.length,
+            failed: result.failed.length,
+            names: result.failed.map((failure) => failure.name).join(", "),
+          }),
+        });
+      } else {
+        notify({
+          severity: "success",
+          scope: "page",
+          body: t("list.deleteDone", {
+            defaultValue: "Deleted {{count}} document(s)",
+            count: result.succeeded.length,
+          }),
+        });
+      }
+      onClearSelection();
+      onActionComplete();
+    } finally {
+      setDeleting(false);
+    }
+  };
+
+  const handleExport = async () => {
+    if (!app) return;
+    setExporting(true);
+    try {
+      const result = await bulkExportCsv(app, doctype, selectedNames, meta);
+      if (!result.downloaded) {
+        // KNOWN GAP: no download path off-web (native/GTK) yet.
+        notify({
+          severity: "warning",
+          scope: "page",
+          body: t(
+            "list.exportUnsupported",
+            "CSV export needs a browser download — not available on this platform yet",
+          ),
+        });
+      } else if (result.rowCount < selectedNames.length) {
+        notify({
+          severity: "warning",
+          scope: "page",
+          body: t("list.exportPartial", {
+            defaultValue: "Exported {{count}} of {{total}} selected row(s)",
+            count: result.rowCount,
+            total: selectedNames.length,
+          }),
+        });
+      } else {
+        notify({
+          severity: "success",
+          scope: "page",
+          body: t("list.exportDone", {
+            defaultValue: "Exported {{count}} row(s) to CSV",
+            count: result.rowCount,
+          }),
+        });
+      }
+    } catch (error) {
+      notify({
+        severity: "error",
+        scope: "page",
+        body: error instanceof Error ? error.message : t("list.exportFailed", "CSV export failed"),
+      });
+    } finally {
+      setExporting(false);
+    }
+  };
+
+  const handleDocstatusAction = async (action: BulkDocstatusAction) => {
+    if (!app) return;
+    setDocstatusBusy(true);
+    try {
+      const result = await bulkSubmitCancel(app, doctype, selectedNames, action);
+      if (result.queued) {
+        notify({
+          severity: "info",
+          scope: "page",
+          body: t("list.docstatusQueued", {
+            defaultValue: "{{action}} of {{count}} document(s) queued in the background",
+            action: action === "submit" ? t("list.submit", "Submit") : t("list.cancel", "Cancel"),
+            count: result.attempted,
+          }),
+        });
+      } else if (result.failed.length > 0) {
+        notify({
+          severity: "warning",
+          scope: "page",
+          body: t("list.docstatusPartial", {
+            defaultValue: "{{ok}} document(s) processed; {{failed}} failed ({{names}})",
+            ok: result.attempted - result.failed.length,
+            failed: result.failed.length,
+            names: result.failed.join(", "),
+          }),
+        });
+      } else {
+        notify({
+          severity: "success",
+          scope: "page",
+          body:
+            action === "submit"
+              ? t("list.submitDone", {
+                  defaultValue: "Submitted {{count}} document(s)",
+                  count: result.attempted,
+                })
+              : t("list.cancelDone", {
+                  defaultValue: "Cancelled {{count}} document(s)",
+                  count: result.attempted,
+                }),
+        });
+      }
+      onClearSelection();
+      onActionComplete();
+    } catch (error) {
+      notify({
+        severity: "error",
+        scope: "page",
+        body:
+          error instanceof Error ? error.message : t("list.docstatusFailed", "Bulk action failed"),
+      });
+    } finally {
+      setDocstatusBusy(false);
+    }
+  };
+
+  return (
+    <XStack
+      alignItems="center"
+      gap="$3"
+      padding="$2"
+      backgroundColor="$color2"
+      borderRadius="$4"
+      flexWrap="wrap"
+    >
+      <Text fontSize="$3" fontWeight="600" color="$color12">
+        {t("list.selectedCount", {
+          defaultValue: "{{count}} selected",
+          count: selectedNames.length,
+        })}
+      </Text>
+      <Button size="$2" onPress={() => setEditOpen(true)}>
+        {t("list.editTitle", "Bulk Edit")}
+      </Button>
+      <Button
+        size="$2"
+        disabled={exporting}
+        onPress={() => {
+          void handleExport();
+        }}
+      >
+        {exporting ? t("list.exporting", "Exporting…") : t("list.export", "Export CSV")}
+      </Button>
+      {showAssign && (
+        <Button size="$2" onPress={() => setAssignOpen(true)}>
+          {t("list.assignTitle", "Assign To")}
+        </Button>
+      )}
+      {showTags && (
+        <Button size="$2" onPress={() => setTagOpen(true)}>
+          {t("list.tagTitle", "Add Tags")}
+        </Button>
+      )}
+      {hostActions.map((action) => (
+        <Button
+          key={action.id}
+          size="$2"
+          onPress={() => action.onPress({ doctype, selection: selectedNames })}
+        >
+          {action.label}
+        </Button>
+      ))}
+      {isSubmittable && (
+        <>
+          <Button size="$2" disabled={docstatusBusy} onPress={() => setDocstatusAction("submit")}>
+            {t("list.submit", "Submit")}
+          </Button>
+          <Button size="$2" disabled={docstatusBusy} onPress={() => setDocstatusAction("cancel")}>
+            {t("list.cancel", "Cancel")}
+          </Button>
+        </>
+      )}
+      {/* Busy is derived state — `loading` shows the spinner and skips the
+          DG-ST-03 bare-disabled guardrail (catalog Toolbar precedent). */}
+      <ActionButton size="$2" error loading={deleting} onPress={() => setConfirmDelete(true)}>
+        {t("list.delete", "Delete")}
+      </ActionButton>
+      <Button size="$2" chromeless onPress={onClearSelection}>
+        {t("list.clearSelection", "Clear selection")}
+      </Button>
+
+      <ConfirmDialog
+        open={confirmDelete}
+        onOpenChange={setConfirmDelete}
+        destructive
+        title={t("list.deleteTitle", "Delete documents")}
+        body={t("list.deleteBody", {
+          defaultValue: "Permanently delete {{count}} {{doctype}} document(s)?",
+          count: selectedNames.length,
+          doctype,
+        })}
+        confirmLabel={t("list.delete", "Delete")}
+        onConfirm={() => {
+          void handleDelete();
+        }}
+      />
+      {showAssign && (
+        <AssignToDialog
+          doctype={doctype}
+          names={selectedNames}
+          open={assignOpen}
+          onOpenChange={setAssignOpen}
+          onDone={() => {
+            onClearSelection();
+            onActionComplete();
+          }}
+        />
+      )}
+      {showTags && (
+        <AddTagsDialog
+          doctype={doctype}
+          names={selectedNames}
+          open={tagOpen}
+          onOpenChange={setTagOpen}
+          onDone={() => {
+            onClearSelection();
+            onActionComplete();
+          }}
+        />
+      )}
+      <BulkEditDialog
+        doctype={doctype}
+        meta={meta}
+        names={selectedNames}
+        open={editOpen}
+        onOpenChange={setEditOpen}
+        onDone={() => {
+          onClearSelection();
+          onActionComplete();
+        }}
+      />
+      {isSubmittable && (
+        <ConfirmDialog
+          open={docstatusAction !== undefined}
+          onOpenChange={(open) => {
+            if (!open) setDocstatusAction(undefined);
+          }}
+          warning={docstatusAction === "cancel"}
+          title={
+            docstatusAction === "cancel"
+              ? t("list.cancelTitle", "Cancel documents")
+              : t("list.submitTitle", "Submit documents")
+          }
+          body={
+            docstatusAction === "cancel"
+              ? t("list.cancelBody", {
+                  defaultValue: "Cancel {{count}} submitted {{doctype}} document(s)?",
+                  count: selectedNames.length,
+                  doctype,
+                })
+              : t("list.submitBody", {
+                  defaultValue: "Submit {{count}} {{doctype}} document(s)?",
+                  count: selectedNames.length,
+                  doctype,
+                })
+          }
+          confirmLabel={
+            docstatusAction === "cancel" ? t("list.cancel", "Cancel") : t("list.submit", "Submit")
+          }
+          onConfirm={() => {
+            const action = docstatusAction;
+            setDocstatusAction(undefined);
+            if (action) void handleDocstatusAction(action);
+          }}
+        />
+      )}
+    </XStack>
+  );
+}

package/src/list/ListFilterBar.tsx

@@ -0,0 +1,94 @@
+// Contract: filter chrome for the list surface (standard filters from meta,
+// filter editor, saved filters, sort control). Keep props stable — the
+// list-core composer imports this.
+//
+// Desk filter-chrome parity, one row of controls + a chips row:
+//   - quick standard filters (in_standard_filter fields → kind-aware inline
+//     controls) — filter-standard.tsx
+//   - "Filter" button → popover editor over every applied tuple with desk's
+//     operator vocabulary (=, !=, like, not like, in, not in, comparisons,
+//     between, is set / is not set) — filter-editor.tsx
+//   - saved filters (desk `List Filter` doctype through the table package's
+//     useSavedFilters/SavedFilterDropdown/FilterManager) — filter-saved.tsx
+//   - sort selector + asc/desc toggle (meta.sort_field defaults) —
+//     filter-sort.tsx
+//   - removable chips for every applied tuple (catalog Chip) —
+//     filter-chips.tsx
+// ONE FILTER SYSTEM (MOD-04): this bar is the single filter authority for
+// the list. The DataTable's own filter chrome is suppressed by list-core
+// (DoctypeListScreen passes enableFiltering={false}); the table keeps only
+// search + header sort.
+import { XStack, YStack } from "@multiplatform.one/components";
+import type { FrappeFilters } from "../shared/types";
+import type { DoctypeMeta } from "../shared/useDoctypeMeta";
+import { FilterChips } from "./filter-chips";
+import { FilterEditorButton } from "./filter-editor";
+import { SavedFiltersControl } from "./filter-saved";
+import { SortControl } from "./filter-sort";
+import { StandardFilters } from "./filter-standard";
+import { ListToolsButton } from "./list-tools-sheet";
+
+export interface ListFilterBarProps {
+  doctype: string;
+  meta?: DoctypeMeta;
+  filters: FrappeFilters;
+  onFiltersChange: (filters: FrappeFilters) => void;
+  sortField?: string;
+  sortOrder?: "asc" | "desc";
+  onSortChange?: (field: string, order: "asc" | "desc") => void;
+  /**
+   * Compact viewports collapse the whole bar behind one badge-counted
+   * "Filter" button opening the list-tools sheet (LC-06) — no stacked
+   * always-visible rows.
+   */
+  compact?: boolean;
+}
+
+export function ListFilterBar({
+  doctype,
+  meta,
+  filters,
+  onFiltersChange,
+  sortField,
+  sortOrder,
+  onSortChange,
+  compact,
+}: ListFilterBarProps) {
+  if (compact) {
+    return (
+      <ListToolsButton
+        doctype={doctype}
+        meta={meta}
+        filters={filters}
+        onFiltersChange={onFiltersChange}
+        sortField={sortField}
+        sortOrder={sortOrder}
+        onSortChange={onSortChange}
+      />
+    );
+  }
+  return (
+    <YStack gap="$2">
+      <XStack gap="$2" alignItems="center" justifyContent="space-between" flexWrap="wrap">
+        <XStack gap="$2" alignItems="center" flexWrap="wrap" flexShrink={1}>
+          <StandardFilters meta={meta} filters={filters} onFiltersChange={onFiltersChange} />
+          <FilterEditorButton meta={meta} filters={filters} onFiltersChange={onFiltersChange} />
+        </XStack>
+        <XStack gap="$2" alignItems="center" flexWrap="wrap">
+          <SavedFiltersControl
+            doctype={doctype}
+            filters={filters}
+            onFiltersChange={onFiltersChange}
+          />
+          <SortControl
+            meta={meta}
+            sortField={sortField}
+            sortOrder={sortOrder}
+            onSortChange={onSortChange}
+          />
+        </XStack>
+      </XStack>
+      <FilterChips meta={meta} filters={filters} onFiltersChange={onFiltersChange} />
+    </YStack>
+  );
+}

package/src/list/ListSidebar.tsx

@@ -0,0 +1,200 @@
+// Contract: desk list-view left sidebar — facet filters (assigned to,
+// created by, tags, status) with counts; clicking applies filters. Keep
+// props stable — list-core imports this.
+//
+// Facet sources (probed against a stock bench):
+// - Assigned To / Created By: POST frappe.desk.listview.get_group_by_count
+//   {doctype, current_filters: JSON string, field: "assigned_to" | "owner"}
+// - Tags / status field: POST frappe.desk.reportview.get_sidebar_stats
+//   {stats: '["_user_tags"]', doctype, filters: JSON string}
+//   (get_group_by_count rejects `_user_tags` — not a meta/default field)
+// Fetch/scrub details live in sidebar-stats.tsx; the collapsible chrome in
+// sidebar-section.tsx. Desk parity notes:
+// - Counts respect every OTHER active filter (own-field tuples excluded),
+//   like desk's group-by sidebar.
+// - Clicking a row clears the facet's fieldname then applies the tuple
+//   unless it was already active (desk toggle/replace semantics).
+// - "No Tags" applies desk's `["_user_tags", "not like", "%,%"]` tuple.
+import { Accordion, SizableText, YStack } from "@multiplatform.one/components";
+import { useCallback, useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { useBackofficeCapabilities } from "../config/BackofficeProvider";
+import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
+import type { FrappeFilter, FrappeFilters } from "../shared/types";
+import type { DocFieldMeta, DoctypeMeta } from "../shared/useDoctypeMeta";
+import { SidebarFacetRow, SidebarSection, SidebarSectionSkeleton } from "./sidebar-section";
+import {
+  isFacetFilterActive,
+  scrubUserFacetRows,
+  toggleFacetFilter,
+  useSidebarStats,
+  type SidebarFacetCount,
+  type SidebarFacetState,
+} from "./sidebar-stats";
+import { useSessionUserId as useSessionUser } from "../shared/useSessionUserId";
+
+/** Facet sections a host can hide from the list sidebar. */
+export type ListSidebarSection = "assigned" | "owner" | "tags" | "status";
+
+export interface ListSidebarProps {
+  doctype: string;
+  meta?: DoctypeMeta;
+  filters: FrappeFilters;
+  onFiltersChange: (filters: FrappeFilters) => void;
+  /**
+   * Hide individual facet sections. The `assignments`/`tags` capabilities
+   * additionally gate their sections regardless of this prop.
+   */
+  hiddenSections?: readonly ListSidebarSection[];
+}
+
+/** The Select field powering the status facet (plain status or workflow state). */
+function findStatusField(meta?: DoctypeMeta): DocFieldMeta | undefined {
+  const fields = meta?.fields;
+  if (!fields) return undefined;
+  return (
+    fields.find((field) => field.fieldtype === "Select" && field.fieldname === "status") ??
+    fields.find((field) => field.fieldtype === "Select" && field.fieldname === "workflow_state")
+  );
+}
+
+interface FacetSectionModel {
+  key: "assigned" | "owner" | "tags" | "status";
+  title: string;
+  state: SidebarFacetState;
+  /** Render-ready rows (scrubbed / empties collapsed). */
+  rows: SidebarFacetCount[];
+  makeTuple: (row: SidebarFacetCount) => FrappeFilter;
+  rowLabel: (row: SidebarFacetCount) => string;
+}
+
+const SECTION_KEYS = ["assigned", "owner", "tags", "status"];
+
+export function ListSidebar({
+  doctype,
+  meta,
+  filters,
+  onFiltersChange,
+  hiddenSections,
+}: ListSidebarProps) {
+  const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+  const sessionUser = useSessionUser();
+  const capabilities = useBackofficeCapabilities();
+  const statusField = useMemo(() => findStatusField(meta), [meta]);
+  const stats = useSidebarStats({ doctype, filters, statusFieldname: statusField?.fieldname });
+
+  // Section visibility: host prop + capability flags (assignments → the
+  // Assigned To facet, tags → the Tags facet).
+  const hidden = useMemo(() => {
+    const set = new Set<ListSidebarSection>(hiddenSections ?? []);
+    if (!capabilities.assignments.enabled) set.add("assigned");
+    if (!capabilities.tags.enabled) set.add("tags");
+    return set;
+  }, [hiddenSections, capabilities.assignments.enabled, capabilities.tags.enabled]);
+
+  const handleToggle = useCallback(
+    (tuple: FrappeFilter) => onFiltersChange(toggleFacetFilter(filters, tuple)),
+    [filters, onFiltersChange],
+  );
+
+  const userLabel = useCallback(
+    (row: SidebarFacetCount) => (row.value === sessionUser ? t("list.me", "Me") : row.value),
+    [sessionUser, t],
+  );
+
+  const sections = useMemo<FacetSectionModel[]>(() => {
+    const tagRows = stats.tags.rows ?? [];
+    const models: FacetSectionModel[] = [
+      {
+        key: "assigned",
+        title: t("list.assignedTo", "Assigned To"),
+        state: stats.assigned,
+        rows: scrubUserFacetRows(stats.assigned.rows ?? [], sessionUser),
+        makeTuple: (row) => ["_assign", "like", `%${row.value}%`],
+        rowLabel: userLabel,
+      },
+      {
+        key: "owner",
+        title: t("list.createdBy", "Created By"),
+        state: stats.owner,
+        rows: scrubUserFacetRows(stats.owner.rows ?? [], sessionUser),
+        makeTuple: (row) => ["owner", "=", row.value],
+        rowLabel: userLabel,
+      },
+      {
+        key: "tags",
+        title: t("list.tags", "Tags"),
+        state: stats.tags,
+        // A lone "No Tags" pseudo-row means no tags exist at all — empty.
+        rows: tagRows.some((row) => !row.isNoTags) ? tagRows : [],
+        makeTuple: (row) =>
+          row.isNoTags
+            ? ["_user_tags", "not like", "%,%"]
+            : ["_user_tags", "like", `%${row.value}%`],
+        rowLabel: (row) => (row.isNoTags ? t("list.noTags", "No Tags") : row.value),
+      },
+    ];
+    const statusFieldname = statusField?.fieldname;
+    if (statusFieldname) {
+      models.push({
+        key: "status",
+        title: statusField.label || t("list.status", "Status"),
+        state: stats.status,
+        rows: stats.status.rows ?? [],
+        makeTuple: (row) => [statusFieldname, "=", row.value],
+        rowLabel: (row) => row.value,
+      });
+    }
+    return models.filter((model) => !hidden.has(model.key));
+  }, [stats, statusField, sessionUser, userLabel, t, hidden]);
+
+  // Every section hidden (host prop / capabilities) — render nothing.
+  if (sections.length === 0) return null;
+
+  // Whole surface unavailable — every facet errored (e.g. no read perm).
+  const unavailable = sections.every((section) => !section.state.loading && section.state.error);
+
+  return (
+    <YStack
+      width={220}
+      paddingRight="$3"
+      // Bottom room reserved for the saved-filter links (list-filters
+      // workstream owns "Edit Filters" / "Save Filter").
+      paddingBottom="$6"
+      aria-label={t("list.sidebarLabel", "List filters sidebar")}
+    >
+      {unavailable ? (
+        <SizableText size="$2" color="$color9" padding="$2">
+          {t("list.facetsUnavailable", "Filters sidebar unavailable")}
+        </SizableText>
+      ) : (
+        <Accordion type="multiple" defaultValue={SECTION_KEYS} variant="plain">
+          {sections.map((section) => {
+            // Empty (or errored) facets are hidden once resolved.
+            if (!section.state.loading && section.rows.length === 0) return null;
+            return (
+              <SidebarSection key={section.key} value={section.key} title={section.title}>
+                {section.state.loading ? (
+                  <SidebarSectionSkeleton />
+                ) : (
+                  section.rows.map((row) => {
+                    const tuple = section.makeTuple(row);
+                    return (
+                      <SidebarFacetRow
+                        key={row.value}
+                        label={section.rowLabel(row)}
+                        count={row.count}
+                        active={isFacetFilterActive(filters, tuple)}
+                        onPress={() => handleToggle(tuple)}
+                      />
+                    );
+                  })
+                )}
+              </SidebarSection>
+            );
+          })}
+        </Accordion>
+      )}
+    </YStack>
+  );
+}