@isi-ui7/page-data

Manajemen data halaman modal — provider context untuk enums, lookup tables, dan pemanggilan data service dalam PageComponent.

Fitur

• SysPageDataProvider: context provider untuk halaman modal (enums + lookup tables)
• useSysPageData: hook untuk mengakses dan memutakhirkan data halaman
• loadSysData: fetch init_sys_page + init_data secara paralel
• loadInitData: fetch data inisial halaman saja
• callDataService: panggil action service (simpan, hapus, dll.) dengan tipe response terstandardisasi
• Re-export showPage dari @isi-ui7/modal-manager untuk kemudahan

Instalasi

pnpm add @isi-ui7/page-data @isi-ui7/modal-manager react react-dom

Penggunaan

Pattern halaman modal lengkap

"use client";
import {
  SysPageDataProvider,
  useSysPageData,
  loadSysData,
  callDataService,
  showPage,
} from "@isi-ui7/page-data";
import type { PageComponent } from "@isi-ui7/page-data";
import { useModal } from "@isi-ui7/modal-manager";

// ─── Sub-halaman yang dibuka sebagai modal ────────────────────────────────────
const FormPage: PageComponent = ({ dataParam, onClose }) => {
  const { pageData, setEnum } = useSysPageData();

  return (
    <div>
      <h2>Form {(dataParam?.mode as string) === "edit" ? "Edit" : "Tambah"}</h2>
      <button onClick={() => onClose?.("ok", { id: 1 })}>Simpan</button>
      <button onClick={() => onClose?.("cancel")}>Batal</button>
    </div>
  );
};

// ─── Halaman utama ────────────────────────────────────────────────────────────
export function NasabahFormPage({ dataParam, onClose }: Parameters<PageComponent>[0]) {
  const modal = useModal();

  const handleOpen = async () => {
    const result = await showPage(modal, FormPage, { dataParam: { mode: "edit" } });
    if (result.status === "ok") console.log("disimpan:", result.data);
  };

  const handleSave = async (payload: Record<string, unknown>) => {
    const result = await callDataService<{ id: number }>(
      "/api/nasabah/service/simpan",
      payload
    );
    if (result.status === "ok") onClose?.("ok", result.data);
    else alert(result.errMessage);
  };

  return <button onClick={handleOpen}>Buka Form Detail</button>;
}

// ─── Wrap dengan provider ─────────────────────────────────────────────────────
export const NasabahFormPageWrapped: PageComponent = (props) => (
  <SysPageDataProvider baseApiPath="/api/nasabah" onClose={props.onClose}>
    <NasabahFormPage {...props} />
  </SysPageDataProvider>
);

Load data saat mount

import { loadSysData, useSysPageData } from "@isi-ui7/page-data";
import { useEffect } from "react";

function MyPage({ dataParam }: Parameters<PageComponent>[0]) {
  const { setData } = useSysPageData();

  useEffect(() => {
    loadSysData("/api/rekening", dataParam).then(({ sysPage, initData }) => {
      setData(sysPage);
      // initData berisi data spesifik record
    });
  }, []);
}

API

SysPageDataProvider

| Prop | Tipe | Wajib | Deskripsi | | --- | --- | --- | --- | | baseApiPath | string | tidak | Base path API (dipakai oleh loadSysData) | | onClose | TE_PageClose | tidak | Diteruskan ke context pageData.onClose | | children | ReactNode | ya | Konten halaman |

useSysPageData() — returns I_SysPageDataContext

| Method/Property | Tipe | Deskripsi | | --- | --- | --- | | pageData | I_SysPageData | State halaman (enums, lookupTables, onClose) | | setEnum | (id, items) => void | Update satu enum | | setEnums | (enums) => void | Update banyak enum sekaligus | | setLookupTable | (id, data) => void | Update satu lookup table | | setData | (update) => void | Update enums + lookupTables dari response | | setOnClose | (fn) => void | Set callback onClose |

loadSysData(baseApiPath, dataParam?)

Fetch init_sys_page dan init_data secara paralel.

Returns: Promise<{ sysPage: I_SysPageDataFetch; initData: I_initData_service<unknown> }>

loadInitData(apiPath, dataParam?)

Fetch init_data saja.

Returns: Promise<I_initData_service<T>>

callDataService<T>(apiPath, payload)

Panggil action service (POST).

Returns: Promise<I_DataServiceResponse<T>>

// Response shape
{
  status: "ok" | "error" | "cancel" | "yes" | "no",
  errMessage?: string,
  data: T,
}

A11y

• Tidak ada komponen UI langsung — aksesibilitas bergantung pada komponen halaman yang menggunakan provider ini

Scripts

pnpm build      # Build ke dist/
pnpm lint       # ESLint
pnpm test       # Vitest
pnpm typecheck  # TypeScript check

Catatan

• Peer deps: React/ReactDOM >=18, @isi-ui7/modal-manager
• URI constants: URIEXT_INIT_SYS_PAGE = "init_sys_page", URIEXT_INIT_DATA = "init_data", URIEXT_SERVICES = "service/"
• Re-export showPage dari @isi-ui7/modal-manager untuk kemudahan import tunggal