@redacto.io/consent-sdk-react 4.0.0 → 5.1.0

package/src/RedactoPrivacyCenter/components/GrievanceTable.tsx

@@ -0,0 +1,174 @@
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { flexRender } from '@tanstack/react-table';
+import { PCTable, PCLoader, PCEmpty } from '../ui';
+import { pcStyles } from '../styles/pcStyles';
+import type { Table as ReactTableType } from '@tanstack/react-table';
+import type { TableColumnMeta } from './types';
+
+const getVar = (varName: string): string => `var(${varName})`;
+
+export type GrievanceTableProps<T extends Record<string, any>> = {
+  table: ReactTableType<T>;
+  isLoading?: boolean;
+  className?: string;
+  pageIndex: number;
+  pageSize: number;
+};
+
+export default function GrievanceTable<TData extends Record<string, any>>({
+  table,
+  isLoading = false,
+  className,
+  pageIndex,
+  pageSize,
+}: GrievanceTableProps<TData>) {
+  const { t } = useTranslation();
+
+  if (!table) return null;
+
+  // Get all rows and manually paginate
+  // Get rows directly from table - this will update when data changes
+  const rowModel = table.getRowModel();
+  const allRows = rowModel.rows;
+  
+  // Manually paginate rows from the current row model
+  const paginatedRows = useMemo(() => {
+    const start = pageIndex * pageSize;
+    const end = start + pageSize;
+    return allRows.slice(start, end);
+  }, [allRows, pageIndex, pageSize]);
+
+  return (
+    <div
+      className={className}
+      style={{
+        ...pcStyles.wFull,
+        maxWidth: '100%',
+        ...pcStyles.overflowXAuto,
+        borderRadius: getVar('--pc-border-radius-md'),
+        border: `1px solid ${getVar('--pc-border-color')}`,
+        backgroundColor: getVar('--pc-bg-primary'),
+        transition: 'background-color 0.3s ease, border-color 0.3s ease',
+      }}
+    >
+      <PCTable
+        variant="modern"
+        style={{ 
+          minWidth: '100%',
+          backgroundColor: getVar('--pc-bg-primary'),
+        }}
+      >
+        <PCTable.Header>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <PCTable.Row key={headerGroup.id}>
+              {headerGroup.headers.map((header) => (
+                <PCTable.Head
+                  key={header.id}
+                  style={{
+                    padding: getVar('--pc-spacing-md'),
+                    fontSize: pcStyles.textSm.fontSize,
+                    fontWeight: pcStyles.fontWeightSemibold.fontWeight,
+                    color: getVar('--pc-text-primary'),
+                    backgroundColor: getVar('--pc-bg-secondary'),
+                    borderBottom: `1px solid ${getVar('--pc-border-color')}`,
+                    textAlign: (header.column.columnDef.meta as TableColumnMeta | undefined)?.align || 'left',
+                    whiteSpace: 'nowrap',
+                  }}
+                >
+                  {header.isPlaceholder
+                    ? null
+                    : flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      )}
+                </PCTable.Head>
+              ))}
+            </PCTable.Row>
+          ))}
+        </PCTable.Header>
+
+        <PCTable.Body>
+          {isLoading ? (
+            <PCTable.Row>
+              <PCTable.Cell
+                colSpan={table.getAllColumns().length}
+                style={{
+                  padding: getVar('--pc-spacing-2xl'),
+                  textAlign: 'center',
+                }}
+              >
+                <PCLoader variant="spinner" size="lg" />
+              </PCTable.Cell>
+            </PCTable.Row>
+          ) : paginatedRows.length === 0 ? (
+            <PCTable.Row>
+              <PCTable.Cell
+                colSpan={table.getAllColumns().length}
+                style={{
+                  padding: getVar('--pc-spacing-2xl'),
+                  textAlign: 'center',
+                }}
+              >
+                <PCEmpty
+                  icon={
+                    <svg 
+                      viewBox="0 0 24 24" 
+                      fill="currentColor" 
+                      style={{ 
+                        width: '64px', 
+                        height: '64px',
+                        color: getVar('--pc-text-tertiary'),
+                        transition: 'color 0.3s ease',
+                      }}
+                    >
+                      <path d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h16a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1v-2zM3 16a1 1 0 011-1h16a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1v-2z" />
+                    </svg>
+                  }
+                  title={t('noData')}
+                />
+              </PCTable.Cell>
+            </PCTable.Row>
+          ) : (
+            paginatedRows.map((row) => {
+              const meta = (table.options.meta as any) || {};
+              const onRowClick = meta.onRowClick;
+              const handleRowClick = onRowClick
+                ? (e: React.MouseEvent) => {
+                    e.preventDefault();
+                    onRowClick(row.original);
+                  }
+                : undefined;
+
+              return (
+                <PCTable.Row
+                  key={row.id}
+                  style={onRowClick ? { cursor: 'pointer' } : {}}
+                  onClick={handleRowClick}
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <PCTable.Cell
+                      key={cell.id}
+                      style={{
+                        padding: getVar('--pc-spacing-md'),
+                        fontSize: pcStyles.textSm.fontSize,
+                        color: getVar('--pc-text-primary'),
+                        borderBottom: `1px solid ${getVar('--pc-border-color')}`,
+                        textAlign: (cell.column.columnDef.meta as TableColumnMeta | undefined)?.align || 'left',
+                      }}
+                    >
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )}
+                    </PCTable.Cell>
+                  ))}
+                </PCTable.Row>
+              );
+            })
+          )}
+        </PCTable.Body>
+      </PCTable>
+    </div>
+  );
+}

package/src/RedactoPrivacyCenter/components/GrievanceTablePagination.tsx

@@ -0,0 +1,337 @@
+import { useTranslation } from 'react-i18next';
+import { type Table as ReactTableType } from '@tanstack/react-table';
+import {
+  PiCaretDoubleLeftBold,
+  PiCaretDoubleRightBold,
+  PiCaretLeftBold,
+  PiCaretRightBold,
+} from 'react-icons/pi';
+import { PCActionIcon, PCSelect, PCText } from '../ui';
+import { pcStyles } from '../styles/pcStyles';
+
+const getVar = (varName: string): string => `var(${varName})`;
+
+const pageSizeOptions = [
+  { value: 5, label: '5' },
+  { value: 10, label: '10' },
+  { value: 15, label: '15' },
+  { value: 20, label: '20' },
+  { value: 25, label: '25' },
+];
+
+export type GrievanceTablePaginationProps<TData extends Record<string, any>> = {
+  table: ReactTableType<TData>;
+  showPageSize?: boolean;
+  className?: string;
+  onPageIndexChange?: (pageIndex: number) => void;
+  onPageSizeChange?: (pageSize: number) => void;
+};
+
+export default function GrievanceTablePagination<
+  TData extends Record<string, any>,
+>({
+  table,
+  showPageSize = true,
+  className,
+  onPageIndexChange,
+  onPageSizeChange,
+}: GrievanceTablePaginationProps<TData>) {
+  const { t } = useTranslation();
+  const paginationState = table.getState().pagination;
+  const currentPageSize = paginationState.pageSize;
+  const currentPageIndex = paginationState.pageIndex;
+  const currentPage = currentPageIndex + 1;
+  
+  // Get total rows from filtered row model (all data after filtering)
+  const totalRows = table.getFilteredRowModel().rows.length;
+  const totalPages = Math.ceil(totalRows / currentPageSize) || 0;
+  
+  const currentPageSizeOption = pageSizeOptions.find(opt => opt.value === currentPageSize) || pageSizeOptions[1];
+
+  // Don't render if there's no data
+  if (totalRows === 0 && totalPages === 0) {
+    return null;
+  }
+
+  const canPreviousPage = currentPageIndex > 0;
+  const canNextPage = currentPageIndex < totalPages - 1;
+
+  const handlePageChange = (newPageIndex: number) => {
+    if (newPageIndex >= 0 && newPageIndex < totalPages) {
+      // Update via callback if provided, otherwise use table method
+      if (onPageIndexChange) {
+        onPageIndexChange(newPageIndex);
+      } else {
+        table.setPageIndex(newPageIndex);
+      }
+    }
+  };
+
+  const handlePageSizeChange = (newSize: number) => {
+    // Update via callback if provided, otherwise use table method
+    if (onPageSizeChange) {
+      onPageSizeChange(newSize);
+      // Reset to first page when page size changes
+      if (onPageIndexChange) {
+        onPageIndexChange(0);
+      } else {
+        table.setPageIndex(0);
+      }
+    } else {
+      table.setPageSize(newSize);
+      table.setPageIndex(0);
+    }
+  };
+
+  return (
+    <div
+      className={className}
+      style={{
+        ...pcStyles.flex,
+        ...pcStyles.flexCol,
+        ...pcStyles.itemsCenter,
+        ...pcStyles.justifyBetween,
+        width: '100%',
+        gap: getVar('--pc-spacing-md'),
+        padding: `${getVar('--pc-spacing-md')} 0`,
+      }}
+    >
+      {/* Desktop Layout */}
+      <div style={{
+        ...pcStyles.flex,
+        ...pcStyles.itemsCenter,
+        ...pcStyles.justifyBetween,
+        width: '100%',
+        flexWrap: 'wrap',
+        gap: getVar('--pc-spacing-md'),
+      }} className="pc-hidden-xs pc-flex-sm">
+        {/* Left Group: Rows per page */}
+        {showPageSize && (
+          <div style={{
+            ...pcStyles.flex,
+            ...pcStyles.itemsCenter,
+            ...pcStyles.gapSm,
+            flexShrink: 0,
+          }}>
+            <PCText 
+              size="sm" 
+              color="secondary"
+              style={{
+                whiteSpace: 'nowrap',
+                flexShrink: 0,
+              }}
+            >
+              {t('rowsPerPage')}
+            </PCText>
+            <PCSelect
+              size="sm"
+              options={pageSizeOptions}
+              value={currentPageSizeOption}
+              onChange={(v) => {
+                if (v) {
+                  handlePageSizeChange(Number(v.value));
+                }
+              }}
+              style={{ 
+                width: '60px',
+                minWidth: '60px',
+                flexShrink: 0,
+              }}
+            />
+          </div>
+        )}
+
+        {/* Right Group: Page info + Navigation */}
+        <div style={{
+          ...pcStyles.flex,
+          ...pcStyles.itemsCenter,
+          ...pcStyles.gapSm,
+          flexShrink: 0,
+        }}>
+          <PCText size="sm" color="secondary" style={{ whiteSpace: 'nowrap' }}>
+            {t('pageOf', { current: currentPage, total: totalPages || 1 })}
+          </PCText>
+
+          <div style={{
+            ...pcStyles.flex,
+            ...pcStyles.itemsCenter,
+            ...pcStyles.gapXs,
+          }}>
+            <PCActionIcon
+              size="sm"
+              variant="outline"
+              aria-label={t('goToFirstPage')}
+              onClick={() => handlePageChange(0)}
+              disabled={!canPreviousPage}
+              style={{
+                opacity: canPreviousPage ? 1 : 0.5,
+                cursor: canPreviousPage ? 'pointer' : 'not-allowed',
+              }}
+            >
+              <PiCaretDoubleLeftBold size={16} />
+            </PCActionIcon>
+
+            <PCActionIcon
+              size="sm"
+              variant="outline"
+              aria-label={t('goToPreviousPage')}
+              onClick={() => handlePageChange(currentPageIndex - 1)}
+              disabled={!canPreviousPage}
+              style={{
+                opacity: canPreviousPage ? 1 : 0.5,
+                cursor: canPreviousPage ? 'pointer' : 'not-allowed',
+              }}
+            >
+              <PiCaretLeftBold size={16} />
+            </PCActionIcon>
+
+            <PCActionIcon
+              size="sm"
+              variant="outline"
+              aria-label={t('goToNextPage')}
+              onClick={() => handlePageChange(currentPageIndex + 1)}
+              disabled={!canNextPage}
+              style={{
+                opacity: canNextPage ? 1 : 0.5,
+                cursor: canNextPage ? 'pointer' : 'not-allowed',
+              }}
+            >
+              <PiCaretRightBold size={16} />
+            </PCActionIcon>
+
+            <PCActionIcon
+              size="sm"
+              variant="outline"
+              aria-label={t('goToLastPage')}
+              onClick={() => handlePageChange(totalPages - 1)}
+              disabled={!canNextPage}
+              style={{
+                opacity: canNextPage ? 1 : 0.5,
+                cursor: canNextPage ? 'pointer' : 'not-allowed',
+              }}
+            >
+              <PiCaretDoubleRightBold size={16} />
+            </PCActionIcon>
+          </div>
+        </div>
+      </div>
+
+      {/* Mobile Layout */}
+      <div style={{
+        ...pcStyles.flex,
+        ...pcStyles.flexCol,
+        ...pcStyles.itemsCenter,
+        width: '100%',
+        gap: getVar('--pc-spacing-sm'),
+      }} className="pc-flex-xs pc-hidden-sm">
+        {showPageSize && (
+          <div style={{
+            ...pcStyles.flex,
+            ...pcStyles.itemsCenter,
+            ...pcStyles.gapSm,
+            width: '100%',
+            justifyContent: 'center',
+          }}>
+            <PCText 
+              size="sm" 
+              color="secondary"
+              style={{
+                whiteSpace: 'nowrap',
+              }}
+            >
+              {t('rowsPerPage')}
+            </PCText>
+            <PCSelect
+              size="sm"
+              options={pageSizeOptions}
+              value={currentPageSizeOption}
+              onChange={(v) => {
+                if (v) {
+                  handlePageSizeChange(Number(v.value));
+                }
+              }}
+              style={{ 
+                width: '60px',
+                minWidth: '60px',
+              }}
+            />
+          </div>
+        )}
+
+        <div style={{
+          ...pcStyles.flex,
+          ...pcStyles.itemsCenter,
+          ...pcStyles.justifyBetween,
+          width: '100%',
+          gap: getVar('--pc-spacing-sm'),
+        }}>
+          <PCText size="sm" color="secondary" style={{ whiteSpace: 'nowrap' }}>
+            {t('pageOf', { current: currentPage, total: totalPages || 1 })}
+          </PCText>
+
+          <div style={{
+            ...pcStyles.flex,
+            ...pcStyles.itemsCenter,
+            ...pcStyles.gapXs,
+          }}>
+            <PCActionIcon
+              size="sm"
+              variant="outline"
+              aria-label={t('goToFirstPage')}
+              onClick={() => handlePageChange(0)}
+              disabled={!canPreviousPage}
+              style={{
+                opacity: canPreviousPage ? 1 : 0.5,
+                cursor: canPreviousPage ? 'pointer' : 'not-allowed',
+              }}
+            >
+              <PiCaretDoubleLeftBold size={16} />
+            </PCActionIcon>
+
+            <PCActionIcon
+              size="sm"
+              variant="outline"
+              aria-label={t('goToPreviousPage')}
+              onClick={() => handlePageChange(currentPageIndex - 1)}
+              disabled={!canPreviousPage}
+              style={{
+                opacity: canPreviousPage ? 1 : 0.5,
+                cursor: canPreviousPage ? 'pointer' : 'not-allowed',
+              }}
+            >
+              <PiCaretLeftBold size={16} />
+            </PCActionIcon>
+
+            <PCActionIcon
+              size="sm"
+              variant="outline"
+              aria-label={t('goToNextPage')}
+              onClick={() => handlePageChange(currentPageIndex + 1)}
+              disabled={!canNextPage}
+              style={{
+                opacity: canNextPage ? 1 : 0.5,
+                cursor: canNextPage ? 'pointer' : 'not-allowed',
+              }}
+            >
+              <PiCaretRightBold size={16} />
+            </PCActionIcon>
+
+            <PCActionIcon
+              size="sm"
+              variant="outline"
+              aria-label={t('goToLastPage')}
+              onClick={() => handlePageChange(totalPages - 1)}
+              disabled={!canNextPage}
+              style={{
+                opacity: canNextPage ? 1 : 0.5,
+                cursor: canNextPage ? 'pointer' : 'not-allowed',
+              }}
+            >
+              <PiCaretDoubleRightBold size={16} />
+            </PCActionIcon>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}