Context Providers

The CRUD bundle uses React Context for centralized state management across components. These contexts provide data, loading states, and actions for different aspects of CRUD operations.

ListingContext

Manages state for data listing views including pagination, filtering, and selection.

Interface


interface ListingContextProps {
  // Data Management
  data: any[];
  loading: boolean;
  totalItems: number;
  fetchData: () => void;
  updateData: Dispatch<SetStateAction<any>>;
  
  // Pagination
  currentPage: number;
  limit: number;
  setLimit: (limit: number) => void;
  setCurrentPage: (page: number) => void;
  
  // Filtering & Search
  searchFilter: any;
  setSearchFilter: (filters: {[key: string]: any}) => void;
  sortableFields: Array<{field: string; order: string}>;
  setSortableFields: Dispatch<SetStateAction<Array<{field: string; order: string}>>>;
  
  // Selection & Actions
  selectedItems: number[];
  toggleSelectItem: (id: number) => void;
  selectAllItems: () => void;
  enabledActions: string[];
  setEnabledActions: (actions: any) => void;
  
  // UI Configuration  
  listedFields: string[];
  setListedFields: (fields: any) => void;
  fqcn_bui: IFQCN_BUI;
  
  // Bulk Operations
  handleDeleteItem: (id: number, isLoading?: boolean) => void;
  handleBunchDelete: () => void;
  handleDuplicateItem: (id: number) => void;
  bunchDeleting: boolean;
}

Usage


import { ListingContextProvider, useListingContext } from "@phpcreation/frontend-crud-react-nextjs-bundle/contexts";
 
function UsersList() {
  return (
    <ListingContextProvider
      resource="users"
      fqcn_bui={{Bundle: "user", Unit: "listing", Interface: "table"}}
      defaultLimit={25}
    >
      <UserListingTable />
      <UserListingPagination />
    </ListingContextProvider>
  );
}
 
function UserListingTable() {
  const { data, loading, selectedItems, toggleSelectItem } = useListingContext();
  
  return (
    <Table>
      {data.map(user => (
        <TableRow key={user.id}>
          <TableCell>
            <Checkbox 
              checked={selectedItems.includes(user.id)}
              onChange={() => toggleSelectItem(user.id)}
            />
          </TableCell>
          <TableCell>{user.name}</TableCell>
        </TableRow>
      ))}
    </Table>
  );
}

DetailShowContext

Handles state for entity detail views and page management.

Interface


interface DetailShowContextProps {
  data: any;
  loading: boolean;
  fetchData: () => void;
  managingPage: boolean;
  setManagingPage: (value: boolean) => void;
  managingTranslations: boolean;
  setManagingTranslations: (value: boolean) => void;
  fieldsConfiguration: any[];
  sectionsConfiguration: any[];
}

Usage


import { DetailedShowContextProvider, useDetailedShowContext } from "@phpcreation/frontend-crud-react-nextjs-bundle/contexts";
 
function UserDetailPage({ userId }: { userId: string }) {
  return (
    <DetailedShowContextProvider entityId={userId} resource="users">
      <UserDetailHeader />
      <UserDetailContent />
    </DetailedShowContextProvider>
  );
}
 
function UserDetailHeader() {
  const { data, loading } = useDetailedShowContext();
  
  if (loading) return <Skeleton />;
  
  return <h1>{data?.name}</h1>;
}

KanbanListingContext

Manages kanban board state with drag-and-drop operations using react-beautiful-dnd.

Interface


interface KanbanColumn {
  id: string | number;
  slug?: string;
  title: string;
  description?: string;
  color: string;              // Column header color
  textColor?: string;         // Column text color
  icon?: string;              // Column icon
  priority?: number;          // Column order priority
  "@type"?: string;
  isVisible: boolean;         // Column visibility
}
 
interface KanbanListingContextProps {
  // Column Management
  columns: KanbanColumn[];
  hideShowVisibleColumn: (columnId: string) => void;
  extractColumns: () => KanbanColumn[];
  hideAllColumns: () => void;
  showAllColumns: () => void;
  hideEmptyColumns: () => void;
  hasEmptyColumns: () => boolean;
 
  // Drag & Drop
  onColumnsDragEnd: (result: DropResult) => void;
 
  // URL Persistence
  updateUrlWithColumns: () => void;
  applyColumnConfigFromUrl: () => void;
  getColumnQueryString: () => string;
 
  // Data Management
  items: KanbanItem[];
  loading: boolean;
  moveItem: (itemId: number, newColumnId: string, newPosition: number) => void;
  updateItemStatus: (itemId: number, newStatus: string) => void;
  fetchKanbanData: () => void;
}

Default Column Colors

The bundle provides 10 default colors for kanban columns:

Blue, Green, Yellow, Red, Purple, Pink, Indigo, Teal, Orange, Gray

Usage


import { KanbanListingContextProvider, useKanbanListingContext } from "@phpcreation/frontend-crud-react-nextjs-bundle/contexts";
 
function TasksKanban() {
  return (
    <KanbanListingContextProvider
      resource="tasks"
      statusField="status"
      orderField="position"
    >
      <KanbanBoardWithControls />
    </KanbanListingContextProvider>
  );
}
 
function KanbanBoardWithControls() {
  const {
    columns,
    hideAllColumns,
    showAllColumns,
    hideEmptyColumns,
    hasEmptyColumns
  } = useKanbanListingContext();
 
  return (
    <div>
      <div className="flex gap-2 mb-4">
        <Button onClick={showAllColumns}>Show All</Button>
        <Button onClick={hideAllColumns}>Hide All</Button>
        {hasEmptyColumns() && (
          <Button onClick={hideEmptyColumns}>Hide Empty</Button>
        )}
      </div>
      <KanbanBoard />
    </div>
  );
}

DebugContext

Provides debugging utilities for development.

Interface


interface DebugContextProps {
  debugMode: boolean;
  setDebugMode: (value: boolean) => void;
  logDebug: (message: string, data?: any) => void;
}

Usage


import { DebugContextProvider, useDebug } from "@phpcreation/frontend-crud-react-nextjs-bundle/contexts";
 
function App() {
  return (
    <DebugContextProvider>
      <MyComponent />
    </DebugContextProvider>
  );
}
 
function MyComponent() {
  const { debugMode, logDebug } = useDebug();
 
  useEffect(() => {
    if (debugMode) {
      logDebug("Component mounted", { timestamp: Date.now() });
    }
  }, [debugMode]);
 
  return <div>Debug Mode: {debugMode ? "ON" : "OFF"}</div>;
}