@12-apps/ui 1.5.1 → 1.6.0

package/src/components/data-display/DataViews/DataViewsTableBase.tsx

@@ -1,15 +1,23 @@
 "use client";
 
 import type { SortFieldDefinition } from "../../layout/ContentToolbar";
-import { useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 
 import { DataViewsGrid } from "./DataViewsGrid";
-import { ViewDialogs, ViewMutationErrorAlert, ViewsMenuSlot } from "./data-views-table-parts";
-import { useViewMutations, type ViewMutations } from "./data-views-view-mutations";
+import type { DisplayPanelView } from "./data-views-display-panel";
+import { viewStateKey } from "./data-views-dirty";
+import { DeleteViewDialog } from "./DeleteViewDialog";
+import type { BoardConfig } from "./DataViewsBoard";
+import type { DataViewExport } from "./data-views-export";
+import type { ScopeConfig } from "./data-views-scopes";
+import { ViewDialogs, ViewMutationErrorAlert } from "./data-views-table-parts";
+import {
+  useSavedViewsController,
+  type SavedViewsController,
+} from "./use-saved-views-controller";
 import {
-  coerceViewState,
-  emptyViewState,
   type DataViewColumn,
+  type DataViewsLayout,
   type DataViewServer,
   type DataViewState,
   type DataViewSyncState,
@@ -21,7 +29,6 @@ import {
   type RowAction,
   type SavedViewSummary,
 } from "./data-views-types";
-import { type SaveViewPayload } from "./SaveViewModal";
 
 export interface DataViewsTableBaseProps<T extends Record<string, unknown>> {
   /** The applied-view id read from the URL (`?view=`) on load, or null. */
@@ -48,6 +55,18 @@ export interface DataViewsTableBaseProps<T extends Record<string, unknown>> {
   headerActions?: React.ReactNode;
   /** Sort options for the toolbar's "Sort By" dropdown (defaults to sortable columns). */
   sortFields?: SortFieldDefinition[];
+  /**
+   * Per-sort-field VALUE KIND (`"currency" | "number" | "date" | "text"`), so the
+   * Exibir panel phrases the direction in that column's own terms. "Crescente"
+   * on a currency column is a puzzle; "Menor → maior" is not. Defaults to text.
+   */
+  sortKinds?: Record<string, string>;
+  /**
+   * Opt-in "Exportar" control. The grid hands the host the current query,
+   * UNPAGINATED, and the host re-queries — the grid never fetches, and an
+   * export therefore follows the filters rather than the loaded page.
+   */
+  exportConfig?: DataViewExport;
   /** Notified with the currently-visible (filtered) rows, so Export matches the view. */
   onVisibleRowsChange?: (rows: T[]) => void;
   /** Reusable row actions driving both the row "⋮" kebab and the bulk menu. */
@@ -60,8 +79,22 @@ export interface DataViewsTableBaseProps<T extends Record<string, unknown>> {
   renderRowMenu?: (row: T) => React.ReactNode;
   /** Opt-in "Grade" (cards) layout — a card renderer per row; adds a Grade/Tabela toggle. */
   renderCard?: (row: T, selection: DataViewCardSelection) => React.ReactNode;
-  /** Which layout to show first when cards are available (default "table"). */
-  defaultLayout?: "cards" | "table";
+  /** Opt-in "Quadro" (board) layout — the loaded page as columns of one field. Needs `renderCard`. */
+  board?: BoardConfig<T>;
+  /** Opt-in "Lista" layout — one full-width, entity-rendered row per record (FUT-733). */
+  renderListRow?: (row: T, selection: DataViewCardSelection) => React.ReactNode;
+  /** The page-level partition rendered as tabs above the toolbar (server mode only). */
+  scopes?: ScopeConfig[];
+  /** The row field the scopes partition by — used only to reject a pill over the same field. */
+  scopeFieldId?: string;
+  /** Which layout to show first when the user has expressed no preference (default "table"). */
+  defaultLayout?: DataViewsLayout;
+  /**
+   * Ignore the remembered cross-screen layout preference and pin to
+   * `defaultLayout`. For tables that exist to SHOW a layout — stories, docs,
+   * screenshots — not for real screens.
+   */
+  ignoreStoredLayout?: boolean;
   /** Opt into the responsive inline filter UX (collapsible row / modal). Default keeps the panel. */
   inlineFilters?: boolean;
   /** Keep the inline search visible with no filter fields and no active search. */
@@ -92,6 +125,12 @@ function useUrlSyncState(
             pills: initialState.pills,
             ranges: initialState.ranges,
             sortBy: initialState.sortBy,
+            // The scope belongs in the URL-driven slice alongside them: a
+            // `?view=recusados`-style deep link and browser back/forward must
+            // move the tab strip, and they must do it WITHOUT resetting the
+            // user's hidden columns — which is the whole reason this is a
+            // merging `syncState` and not a replacing `appliedState`.
+            scope: initialState.scope,
           }
         : undefined,
     [isServerMode, initialState],
@@ -110,188 +149,96 @@ function resolveInitialView(
   return requested ?? views.find((view) => view.isDefault);
 }
 
-interface SavedViewsController {
-  applied: DataViewState;
-  /** Name of the currently-applied saved view, if any (drives the trigger label). */
-  activeViewName?: string;
-  /** Reset to the built-in no-filter "Main vision" default (clears the URL param). */
-  selectMain: () => void;
-  currentRef: React.MutableRefObject<DataViewState>;
-  saveOpen: boolean;
-  editing: SavedViewSummary | null;
-  manageOpen: boolean;
-  setSaveOpen: (open: boolean) => void;
-  setEditing: (view: SavedViewSummary | null) => void;
-  setManageOpen: (open: boolean) => void;
-  applyView: (view: SavedViewSummary) => void;
-  openCreate: () => void;
-  openEdit: (view: SavedViewSummary) => void;
-  /** Close the save modal and clear the editing target. */
-  closeSave: () => void;
-  /** Close the manage dialog and open the edit modal for `view`. */
-  editFromManage: (view: SavedViewSummary) => void;
-  patchView: ViewMutations["patchView"];
-  handleDelete: ViewMutations["handleDelete"];
-  handleSave: (payload: SaveViewPayload) => Promise<void>;
-  /** Last pin/share/default/delete failure — shown as an Alert, never silent. */
-  mutationError: string | null;
-  clearMutationError: () => void;
-}
-
-interface AppliedView {
-  applied: DataViewState;
-  currentRef: React.MutableRefObject<DataViewState>;
-  activeViewName?: string;
-  applyView: (view: SavedViewSummary) => void;
-  selectMain: () => void;
-}
-
 /**
- * The applied grid state + which saved view it came from, kept in sync with the
- * URL (`?view=<id>`) so a refresh restores it. "Main vision" resets + clears it.
+ * The Exibir panel's view chrome, assembled from the saved-views controller.
+ * Extracted so {@link DataViewsTableBase} stays inside its size budget.
  */
-function useAppliedView(
-  router: DataViewRouter,
-  columnIds: string[],
-  views: SavedViewSummary[],
-  initialView: SavedViewSummary | undefined,
-  initialState: DataViewState | undefined,
-): AppliedView {
-  // A saved view wins; otherwise seed from the host-supplied initial state (e.g.
-  // filters/sort read off the URL, FUT-180) so a bookmarked filtered URL is
-  // reflected in the grid — column visibility isn't URL-carried, so show all.
-  const seed = initialView
-    ? coerceViewState(initialView.state, columnIds)
-    : initialState
-      ? { ...initialState, visibleColumns: columnIds }
-      : emptyViewState(columnIds);
-  const [applied, setApplied] = useState<DataViewState>(seed);
-  const [appliedViewId, setAppliedViewId] = useState<string | null>(initialView?.id ?? null);
-  const currentRef = useRef<DataViewState>(seed);
-
-  const applyView = (view: SavedViewSummary): void => {
-    setApplied(coerceViewState(view.state, columnIds));
-    setAppliedViewId(view.id);
-    router.syncViewParam(view.id);
-  };
-  const selectMain = (): void => {
-    setApplied(emptyViewState(columnIds));
-    setAppliedViewId(null);
-    router.syncViewParam(null);
+function buildDisplayView({
+  ctl,
+  views,
+  activeView,
+  dirty,
+  onRequestDelete,
+}: {
+  ctl: SavedViewsController;
+  views: SavedViewSummary[];
+  activeView: SavedViewSummary | undefined;
+  dirty: boolean;
+  /** Opens the confirmation; the delete itself happens on confirm. */
+  onRequestDelete: (view: SavedViewSummary) => void;
+}): DisplayPanelView {
+  return {
+    activeViewName: ctl.activeViewName,
+    dirty,
+    onReset: () => (activeView ? ctl.applyView(activeView) : ctl.selectMain()),
+    // Only offer "Atualizar" when there IS a view to update — otherwise the
+    // single footer button is a plain "Salvar visão".
+    onUpdate: activeView ? () => ctl.openEdit(activeView) : undefined,
+    onSaveAs: ctl.openCreate,
+    // The views themselves, not a dropdown: the panel renders them in its own
+    // body (see `data-views-view-nav`), so there is no second popover to clip
+    // the row actions.
+    nav: {
+      views,
+      activeViewId: activeView?.id ?? null,
+      onSelectView: (id) => {
+        const next = id === null ? null : views.find((view) => view.id === id);
+        if (next) ctl.applyView(next);
+        else ctl.selectMain();
+      },
+      onEditView: ctl.openEdit,
+      onPatchView: (view, changes) => void ctl.patchView(view, changes),
+      onDeleteView: onRequestDelete,
+    },
   };
-  const activeViewName = views.find((view) => view.id === appliedViewId)?.name;
-  return { applied, currentRef, activeViewName, applyView, selectMain };
 }
 
 /**
- * Owns the saved-views state + persistence for {@link DataViewsTable}: the applied
- * grid state, the live-state ref, the modal/dialog flags, and the create/edit/
- * delete/patch handlers. Extracted so the component render stays within budget.
+ * "Are there unsaved changes?" — the dot on Exibir, and whether Redefinir and
+ * Salvar visão are live.
+ *
+ * Two things it gets right that the inline version did not. It compares
+ * NORMALISED states (`viewStateKey`), so a filter applied and then removed is
+ * clean again rather than clean-looking but flagged; and it re-baselines after
+ * a SAVE, because the state just written is the clean one from that point.
+ *
+ * The baseline is the first state the grid emits for a view, not the view
+ * itself: the grid normalises what it is handed — resolving visible columns,
+ * filling in layout — so the applied view is never byte-identical to the state
+ * it produces.
  */
-function useSavedViewsController(
-  persistence: DataViewPersistence,
-  router: DataViewRouter,
-  columnIds: string[],
-  views: SavedViewSummary[],
-  initialView: SavedViewSummary | undefined,
-  initialState: DataViewState | undefined,
-): SavedViewsController {
-  const { applied, currentRef, activeViewName, applyView, selectMain } =
-    useAppliedView(router, columnIds, views, initialView, initialState);
-  const [saveOpen, setSaveOpen] = useState(false);
-  const [editing, setEditing] = useState<SavedViewSummary | null>(null);
-  const [manageOpen, setManageOpen] = useState(false);
-
-  const openCreate = (): void => {
-    setEditing(null);
-    setSaveOpen(true);
-  };
-  const openEdit = (view: SavedViewSummary): void => {
-    setEditing(view);
-    setSaveOpen(true);
-  };
-
-  const [mutationError, setMutationError] = useState<string | null>(null);
-  const refreshAfter = (ok: boolean, error?: string): void => {
-    if (ok) {
-      setMutationError(null);
-      router.refresh();
-    } else {
-      // A rejected pin/share/default/delete must be visible (FUT-100) — the
-      // menus close on click, so an inline Alert is the only surviving signal.
-      setMutationError(error ?? "Não foi possível salvar a alteração da visão.");
-    }
-  };
+function useDirtyTracking(ctl: SavedViewsController): {
+  dirty: boolean;
+  noteState: (state: DataViewState) => void;
+  markSaved: () => void;
+} {
+  const [dirty, setDirty] = useState(false);
+  const [savedAt, setSavedAt] = useState(0);
+  const baseline = useRef<string | null>(null);
+  const appliedKey = JSON.stringify(ctl.applied ?? null);
 
-  const { handleSave: saveView, patchView, handleDelete } = useViewMutations(
-    persistence,
-    editing,
-    currentRef,
-    refreshAfter,
-  );
-
-  const handleSave = async (payload: SaveViewPayload): Promise<void> => {
-    await saveView(payload);
-    setSaveOpen(false);
-    setEditing(null);
-  };
+  useEffect(() => {
+    baseline.current = null;
+    setDirty(false);
+  }, [appliedKey, savedAt]);
 
   return {
-    applied,
-    activeViewName,
-    selectMain,
-    currentRef,
-    saveOpen,
-    editing,
-    manageOpen,
-    setSaveOpen,
-    setEditing,
-    setManageOpen,
-    applyView,
-    openCreate,
-    openEdit,
-    closeSave: () => {
-      setSaveOpen(false);
-      setEditing(null);
-    },
-    editFromManage: (view: SavedViewSummary) => {
-      setManageOpen(false);
-      openEdit(view);
+    dirty,
+    noteState: (state) => {
+      ctl.currentRef.current = state;
+      const key = viewStateKey(state);
+      if (baseline.current === null) {
+        baseline.current = key;
+        setDirty(false);
+        return;
+      }
+      const next = key !== baseline.current;
+      setDirty((prev) => (prev === next ? prev : next));
     },
-    patchView,
-    handleDelete,
-    handleSave,
-    mutationError,
-    clearMutationError: () => setMutationError(null),
+    markSaved: () => setSavedAt((tick) => tick + 1),
   };
 }
 
-/**
- * The saved-views dropdown wired to the controller — the toolbar's right slot.
- * Extracted so the {@link DataViewsTable} render stays within the size budget.
- */
-function ViewsMenu(props: {
-  views: SavedViewSummary[];
-  ctl: SavedViewsController;
-  testIdPrefix: string;
-}): React.JSX.Element {
-  const { views, ctl, testIdPrefix } = props;
-  return (
-    <ViewsMenuSlot
-      views={views}
-      activeViewName={ctl.activeViewName}
-      applyView={ctl.applyView}
-      selectMain={ctl.selectMain}
-      openCreate={ctl.openCreate}
-      openEdit={ctl.openEdit}
-      handleDelete={ctl.handleDelete}
-      patchView={ctl.patchView}
-      onManageAll={() => ctl.setManageOpen(true)}
-      testIdPrefix={testIdPrefix}
-    />
-  );
-}
-
 /**
  * The reusable admin table (FUT-89): the DataViews grid plus the full saved-views
  * experience — a views dropdown, a save/edit modal (with preview), and a manage
@@ -301,38 +248,43 @@ function ViewsMenu(props: {
  * a view restores its filters + columns + sort. Each table supplies its own columns
  * + filter fields; everything else is shared.
  */
-export function DataViewsTableBase<T extends Record<string, unknown>>({
-  initialViewId = null,
-  persistence,
-  router,
-  rows,
-  columns,
-  fields,
-  rangeFields,
-  getRowId,
-  onRowClick,
-  emptyState,
-  dataTestId,
-  testIdPrefix = "table",
-  views,
-  title,
-  headerActions,
-  sortFields,
-  onVisibleRowsChange,
-  rowActions,
-  rowActionsLeading,
-  bulkActions,
-  renderRowMenu,
-  renderCard,
-  defaultLayout,
-  inlineFilters,
-  alwaysShowSearch,
-  server,
-  initialState,
-}: DataViewsTableBaseProps<T>): React.JSX.Element {
+export function DataViewsTableBase<T extends Record<string, unknown>>(
+  props: DataViewsTableBaseProps<T>,
+): React.JSX.Element {
+  // Forwarded as a whole rather than restated name-by-name twice (as in
+  // DataViewsGrid): this component only ADDS the saved-views chrome, and a
+  // 30-name destructure repeated in the JSX is exactly where a newly added prop
+  // silently stops being passed on.
+  const {
+    initialViewId = null,
+    persistence,
+    router,
+    columns,
+    fields,
+    testIdPrefix = "table",
+    views,
+    server,
+    initialState,
+  } = props;
   const initialView = resolveInitialView(views, initialViewId);
   const columnIds = columns.map((col) => col.id);
   const ctl = useSavedViewsController(persistence, router, columnIds, views, initialView, initialState);
+  // Unsaved-changes flag for the Exibir panel. Set from `onStateChange` rather
+  // than derived in render because the live state lives in a REF (the grid owns
+  // it); the equality bail-out in `setDirty` is what stops the update loop.
+  const { dirty, noteState, markSaved } = useDirtyTracking(ctl);
+  // Deleting a saved view is confirmed, not immediate — see `DeleteViewDialog`.
+  const [pendingDelete, setPendingDelete] = useState<SavedViewSummary | null>(null);
+  // The view the panel's "Redefinir" restores: the applied one, or the built-in
+  // "Visão principal" when none is.
+  const activeView = views.find((view) => view.name === ctl.activeViewName);
+  const displayView = buildDisplayView({
+    ctl,
+    views,
+    activeView,
+    dirty,
+    onRequestDelete: setPendingDelete,
+  });
   // Server-mode lists re-apply URL-derived controls on back/forward (not just the mount seed).
   const syncState = useUrlSyncState(server, initialState);
 
@@ -340,34 +292,25 @@ export function DataViewsTableBase<T extends Record<string, unknown>>({
     <>
       <ViewMutationErrorAlert error={ctl.mutationError} onClose={ctl.clearMutationError} testIdPrefix={testIdPrefix} />
       <DataViewsGrid<T>
-        rows={rows}
-        columns={columns}
-        fields={fields}
-        rangeFields={rangeFields}
-        getRowId={getRowId}
-        onRowClick={onRowClick}
-        emptyState={emptyState}
-        dataTestId={dataTestId}
+        {...props}
         testIdPrefix={testIdPrefix}
-        title={title}
-        headerActions={headerActions}
-        sortFields={sortFields}
-        rowActions={rowActions}
-        rowActionsLeading={rowActionsLeading}
-        bulkActions={bulkActions}
-        renderRowMenu={renderRowMenu}
-        renderCard={renderCard}
-        defaultLayout={defaultLayout}
-        inlineFilters={inlineFilters}
-        alwaysShowSearch={alwaysShowSearch}
-        server={server}
         appliedState={ctl.applied}
         syncState={syncState}
-        onStateChange={(state) => (ctl.currentRef.current = state)}
-        onVisibleRowsChange={onVisibleRowsChange}
-        toolbarRightSlot={<ViewsMenu views={views} ctl={ctl} testIdPrefix={testIdPrefix} />}
+        onStateChange={noteState}
+        // The saved-views menu is NOT a toolbar control any more: it lives in
+        // the Exibir panel's VISÃO header, passed through `displayView`.
+        displayView={displayView}
+      />
+      {renderViewDialogs(ctl, fields, columns, views, testIdPrefix, markSaved)}
+      <DeleteViewDialog
+        view={pendingDelete}
+        onClose={() => setPendingDelete(null)}
+        onConfirm={(view) => {
+          void ctl.handleDelete(view);
+          setPendingDelete(null);
+        }}
+        testIdPrefix={testIdPrefix}
       />
-      {renderViewDialogs(ctl, fields, columns, views, testIdPrefix)}
     </>
   );
 }
@@ -379,6 +322,7 @@ function renderViewDialogs<T extends Record<string, unknown>>(
   columns: DataViewsTableBaseProps<T>["columns"],
   views: SavedViewSummary[],
   testIdPrefix: string,
+  onSaved: () => void,
 ): React.JSX.Element {
   return (
     <ViewDialogs<T>
@@ -388,7 +332,11 @@ function renderViewDialogs<T extends Record<string, unknown>>(
       fields={fields}
       columns={columns}
       editing={ctl.editing}
-      onSave={ctl.handleSave}
+      onSave={async (payload) => {
+        await ctl.handleSave(payload);
+        // The saved state is the clean one from here on.
+        onSaved();
+      }}
       manageOpen={ctl.manageOpen}
       onCloseManage={() => ctl.setManageOpen(false)}
       views={views}

package/src/components/data-display/DataViews/DeleteViewDialog.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+/**
+ * The confirmation in front of "Excluir visão".
+ *
+ * Deleting was immediate: one click in a row menu, on a control sitting
+ * directly under four harmless toggles, and the view was gone. A saved view is
+ * somebody's filters, columns and sort — cheap to rebuild only if you remember
+ * what they were.
+ *
+ * It names the view rather than saying "this view", says plainly that the
+ * records are untouched, and warns separately when the view is SHARED, because
+ * that deletion takes it from everyone rather than from one person.
+ */
+import { Dialog, DialogContent } from "../../feedback/Dialog";
+import { Button } from "../../form/Button";
+import { Stack } from "../../../mui/Stack";
+import { Text } from "../../typography/Text";
+
+import type { SavedViewSummary } from "./data-views-types";
+
+export function DeleteViewDialog({
+  view,
+  onClose,
+  onConfirm,
+  /** What this table holds, for the "your records are safe" line. */
+  entityLabel = "Os registros",
+  testIdPrefix = "view",
+}: {
+  view: SavedViewSummary | null;
+  onClose: () => void;
+  onConfirm: (view: SavedViewSummary) => void;
+  entityLabel?: string;
+  testIdPrefix?: string;
+}): React.JSX.Element | null {
+  if (!view) return null;
+  return (
+    <Dialog
+      open
+      onClose={onClose}
+      title="Excluir visão"
+      size="sm"
+      showCloseButton
+      dataTestId={`${testIdPrefix}-delete-modal`}
+    >
+      <DialogContent>
+        <Stack spacing={1.5}>
+          <Text variant="body" as="p" data-testid={`${testIdPrefix}-delete-target`}>
+            Excluir <strong>{view.name}</strong>?
+          </Text>
+
+          {view.shared && (
+            <Text variant="body" color="warning" as="p" data-testid={`${testIdPrefix}-delete-shared`}>
+              Esta visão está compartilhada — a equipe perderá o acesso a ela.
+            </Text>
+          )}
+
+          <Text variant="body" color="secondary" as="p">
+            {entityLabel} não são afetados; apenas o recorte salvo é removido.
+          </Text>
+
+          <Stack direction="row" spacing={1.5} sx={{ justifyContent: "flex-end", pt: 0.5 }}>
+            <Button
+              variant="text"
+              color="neutral"
+              onClick={onClose}
+              dataTestId={`${testIdPrefix}-delete-cancel`}
+            >
+              Cancelar
+            </Button>
+            <Button
+              color="danger"
+              onClick={() => onConfirm(view)}
+              dataTestId={`${testIdPrefix}-delete-confirm`}
+            >
+              Excluir visão
+            </Button>
+          </Stack>
+        </Stack>
+      </DialogContent>
+    </Dialog>
+  );
+}