@micha.bigler/ui-core-micha 3.14.4 → 4.0.1

package/src/components/UserListComponent.jsx

@@ -1,618 +0,0 @@
-import React, { useMemo, useState, useEffect, useCallback } from 'react';
-import {
-  Box,
-  Typography,
-  FormControl,
-  Select,
-  MenuItem,
-  Button,
-  Tooltip,
-  CircularProgress,
-  Alert,
-  TextField,
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableRow,
-  TableSortLabel,
-  TablePagination,
-} from '@mui/material';
-import CheckCircleIcon from '@mui/icons-material/CheckCircle';
-import CancelIcon from '@mui/icons-material/Cancel';
-import DeleteIcon from '@mui/icons-material/Delete';
-import { useTranslation } from 'react-i18next';
-import { fetchUsersList, deleteUser, updateUserRole } from '../auth/authApi';
-import { resolveErrorText } from '../utils/resolveErrorText';
-
-const DEFAULT_ROLES = ['none', 'student', 'teacher', 'admin'];
-
-export const USER_LIST_ACTION_SX = { minWidth: 90 };
-export const USER_LIST_ALERT_SX = { mb: 2 };
-export const USER_LIST_HEADER_CELL_SX = { fontWeight: 600, whiteSpace: 'nowrap' };
-export const USER_LIST_EMPTY_CELL_SX = { py: 4, color: 'text.secondary' };
-export const USER_LIST_BODY_CELL_SX = { verticalAlign: 'top', py: 1 };
-
-// Extracted so the count === -1 ("more than") branch is directly unit-testable -- the live
-// TablePagination call site always passes a real count from sortedUsers.length, so that branch
-// can never actually be exercised through a render of this component itself (UCM-I18N-5 review).
-export function formatDisplayedRowsLabel(t) {
-  return ({ from, to, count }) => (
-    count === -1
-      ? t('UserList.DISPLAYED_ROWS_MORE_THAN', '{{from}}–{{to}} of more than {{to}}', { from, to })
-      : t('UserList.DISPLAYED_ROWS', '{{from}}–{{to}} of {{count}}', { from, to, count })
-  );
-}
-
-export function UserListComponent({
-    roles = DEFAULT_ROLES,
-    currentUser,
-    extraColumns = [],
-    extraRowActions = [],
-    extraContext = null,
-    refreshTrigger = 0,
-    canEditUser,
-    showNewColumn = true,
-    showSuccessfulLoginColumn = true,
-    showRoleColumn = true,
-    onChangeRole = null,
-    showDeleteAction = true,
-    canDeleteUser = null,
-    onDeleteUser = null,
-}) {
-  const { t, i18n } = useTranslation();
-  const [users, setUsers] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(null);
-  const [rowActionLoading, setRowActionLoading] = useState({});
-  const [searchQuery, setSearchQuery] = useState('');
-  const [sortField, setSortField] = useState('email');
-  const [sortDir, setSortDir] = useState('asc');
-  const [page, setPage] = useState(0);
-  const [pageSize, setPageSize] = useState(25);
-  const controlSx = { minWidth: 140 };
-
-  const loadUsers = useCallback(async () => {
-    setLoading(true);
-    setError(null);
-    try {
-      const data = await fetchUsersList();
-      const list = Array.isArray(data) ? data : (Array.isArray(data?.results) ? data.results : []);
-      // Keep row identity stable even if backend returns unordered results.
-      list.sort((a, b) => {
-        const aId = Number(a?.id ?? 0);
-        const bId = Number(b?.id ?? 0);
-        return aId - bId;
-      });
-      setUsers(list);
-    } catch (err) {
-      setError(resolveErrorText(i18n, err, 'Auth.USER_LIST_FAILED'));
-    } finally {
-      setLoading(false);
-    }
-  }, []);
-
-  useEffect(() => {
-    loadUsers();
-  }, [loadUsers, refreshTrigger]);
-
-  useEffect(() => {
-    setPage(0);
-  }, [searchQuery]);
-
-  const handleDelete = async (userId) => {
-    if (!window.confirm(t('UserList.DELETE_CONFIRM', 'Are you sure you want to delete this user?'))) return;
-    try {
-      if (typeof onDeleteUser === 'function') {
-        await onDeleteUser({ userId, currentUser, extraContext, t, reloadUsers: loadUsers });
-      } else {
-        await deleteUser(userId);
-      }
-      setUsers(prev => prev.filter(u => u.id !== userId));
-    } catch (err) {
-      alert(resolveErrorText(i18n, err, 'Auth.USER_DELETE_FAILED'));
-    }
-  };
-
-  const handleChangeRole = async (userId, newRole) => {
-    try {
-      if (typeof onChangeRole === 'function') {
-        await onChangeRole({
-          userId,
-          newRole,
-          currentUser,
-          extraContext,
-          t,
-          reloadUsers: loadUsers,
-        });
-      } else {
-        await updateUserRole(userId, newRole);
-      }
-      await loadUsers();
-      alert(t('UserList.ROLE_UPDATE_SUCCESS', 'Role updated.'));
-    } catch (err) {
-      alert(resolveErrorText(i18n, err, 'Auth.USER_ROLE_UPDATE_FAILED'));
-    }
-  };
-
-  const defaultCanEdit = (targetUser) => {
-      if (!currentUser) return false;
-      if (currentUser.is_superuser) return true;
-
-      const myRole = currentUser.role || 'none';
-      const targetRole = targetUser.role || 'none';
-
-      if (myRole === 'admin') return true;
-
-      if (myRole === 'teacher') {
-          if (targetUser.id === currentUser.id) return false;
-          if (['teacher', 'admin', 'supervisor'].includes(targetRole)) return false;
-          return true;
-      }
-      return false;
-  };
-  const canEdit = (targetUser) => {
-    if (typeof canEditUser === 'function') {
-      return Boolean(canEditUser({ targetUser, currentUser, extraContext }));
-    }
-    return defaultCanEdit(targetUser);
-  };
-
-  const canDelete = (targetUser) => {
-    if (typeof canDeleteUser === 'function') {
-      return Boolean(canDeleteUser({ targetUser, currentUser, extraContext }));
-    }
-    return canEdit(targetUser);
-  };
-
-  const isOwnRow = (targetUser) => {
-    if (currentUser?.id == null || targetUser?.id == null) return false;
-    return String(targetUser.id) === String(currentUser.id);
-  };
-
-  const listContext = useMemo(() => ({
-    currentUser,
-    extraContext,
-    t,
-    reloadUsers: loadUsers,
-  }), [currentUser, extraContext, t, loadUsers]);
-
-  const visibleExtraColumns = useMemo(
-    () =>
-      extraColumns.filter((column) =>
-        typeof column.visible === 'function' ? column.visible(listContext) : true,
-      ),
-    [extraColumns, listContext],
-  );
-
-  const visibleRowActions = useMemo(
-    () =>
-      extraRowActions.filter((action) =>
-        typeof action.visible === 'function' ? action.visible(listContext) : true,
-      ),
-    [extraRowActions, listContext],
-  );
-
-  const getUserDisplayName = (user) => {
-    if (user?.first_name || user?.last_name) {
-      return `${user.first_name || ''} ${user.last_name || ''}`.trim();
-    }
-    return user?.username || '';
-  };
-
-  const renderBooleanStatusIcon = (value, positiveLabel, negativeLabel) => (
-    <Tooltip title={value ? positiveLabel : negativeLabel}>
-      <span>
-        {value ? (
-          <CheckCircleIcon color="success" fontSize="small" />
-        ) : (
-          <CancelIcon color="error" fontSize="small" />
-        )}
-      </span>
-    </Tooltip>
-  );
-
-  const getExtraColumnSortValue = (column, user) => {
-    const valueContext = { user, currentUser, extraContext, t };
-
-    if (typeof column.getSortValue === 'function') {
-      return column.getSortValue(valueContext);
-    }
-
-    if (typeof column.sortValue === 'function') {
-      return column.sortValue(valueContext);
-    }
-
-    if (typeof column.getSearchValue === 'function') {
-      return column.getSearchValue(valueContext);
-    }
-
-    if (user?.[column.key] !== undefined) return user[column.key];
-    if (user?.profile?.[column.key] !== undefined) return user.profile[column.key];
-    return '';
-  };
-
-  const getExtraColumnSearchValue = (column, user) => {
-    const valueContext = { user, currentUser, extraContext, t };
-
-    if (typeof column.getSearchValue === 'function') {
-      return column.getSearchValue(valueContext);
-    }
-
-    return getExtraColumnSortValue(column, user);
-  };
-
-  const toSearchText = (value) => {
-    if (value === null || value === undefined) return '';
-    if (Array.isArray(value)) return value.map((item) => toSearchText(item)).join(' ');
-    if (typeof value === 'object') return Object.values(value).map((item) => toSearchText(item)).join(' ');
-    return String(value).toLocaleLowerCase();
-  };
-
-  const getSearchBucketForUser = (user) => {
-    const hasSuccessfulLogin = Boolean(user?.successful_login ?? user?.last_login);
-    const baseValues = [
-      user?.id,
-      user?.email,
-      user?.username,
-      user?.first_name,
-      user?.last_name,
-      getUserDisplayName(user),
-      user?.role,
-      user?.language,
-      hasSuccessfulLogin ? t('Common.YES', 'Yes') : t('Common.NO', 'No'),
-    ];
-
-    const extraValues = visibleExtraColumns.map((column) => getExtraColumnSearchValue(column, user));
-
-    return [...baseValues, ...extraValues].map((value) => toSearchText(value)).filter(Boolean);
-  };
-
-  const normalizedSearch = searchQuery.trim().toLocaleLowerCase();
-
-  const filteredUsers = useMemo(() => {
-    return users.filter((user) => {
-      if (!normalizedSearch) return true;
-      const bucket = getSearchBucketForUser(user);
-      return bucket.some((entry) => entry.includes(normalizedSearch));
-    });
-  }, [users, normalizedSearch, visibleExtraColumns, currentUser, extraContext, t]);
-
-  const runRowAction = async (action, user) => {
-    const actionId = `${action.key}:${user.id}`;
-    setRowActionLoading((prev) => ({ ...prev, [actionId]: true }));
-    try {
-      await action.onClick({
-        user,
-        canEdit: canEdit(user),
-        currentUser,
-        extraContext,
-        t,
-        reloadUsers: loadUsers,
-      });
-    } catch (err) {
-      // eslint-disable-next-line no-alert
-      alert(resolveErrorText(i18n, err, 'Common.OPERATION_FAILED'));
-    } finally {
-      setRowActionLoading((prev) => ({ ...prev, [actionId]: false }));
-    }
-  };
-
-  const columns = useMemo(() => {
-    const baseColumns = [
-      {
-        field: 'email',
-        headerName: t('Auth.EMAIL_LABEL', 'Email'),
-        minWidth: 220,
-        flex: 1,
-        sortable: true,
-        align: 'left',
-        headerAlign: 'left',
-        valueGetter: (row) => row?.email ?? '',
-        renderCell: (row) => row.email,
-      },
-      {
-        field: 'name',
-        headerName: t('Profile.NAME_LABEL', 'Name'),
-        minWidth: 180,
-        flex: 0.9,
-        sortable: true,
-        align: 'left',
-        headerAlign: 'left',
-        valueGetter: (row) => getUserDisplayName(row),
-        renderCell: (row) => getUserDisplayName(row),
-      },
-    ];
-
-    if (showNewColumn) {
-      baseColumns.push({
-        field: 'is_new',
-        headerName: t('UserList.NEW', 'New'),
-        minWidth: 90,
-        flex: 0.35,
-        sortable: true,
-        align: 'center',
-        headerAlign: 'center',
-        valueGetter: (row) => Boolean(row?.profile?.is_new || row?.is_new),
-        renderCell: (row) => renderBooleanStatusIcon(
-          Boolean(row?.profile?.is_new || row?.is_new),
-          t('Common.YES', 'Yes'),
-          t('Common.NO', 'No'),
-        ),
-      });
-    }
-
-    if (showSuccessfulLoginColumn) {
-      baseColumns.push({
-        field: 'successful_login',
-        headerName: t('UserList.SUCCESSFUL_LOGIN', 'Successful Login'),
-        minWidth: 120,
-        flex: 0.4,
-        sortable: true,
-        align: 'center',
-        headerAlign: 'center',
-        valueGetter: (row) => Boolean(row?.successful_login ?? row?.last_login),
-        renderCell: (row) => renderBooleanStatusIcon(
-          Boolean(row?.successful_login ?? row?.last_login),
-          t('Common.YES', 'Yes'),
-          t('Common.NO', 'No'),
-        ),
-      });
-    }
-
-    if (showRoleColumn) {
-      baseColumns.push({
-        field: 'role',
-        headerName: t('UserList.ROLE', 'Role'),
-        minWidth: 180,
-        flex: 0.7,
-        sortable: true,
-        align: 'left',
-        headerAlign: 'left',
-        valueGetter: (row) => row?.role || 'none',
-        renderCell: (row) => (
-          <FormControl size="small" fullWidth sx={controlSx} disabled={!canEdit(row)}>
-            <Select
-              value={row.role || 'none'}
-              onChange={(event) => handleChangeRole(row.id, event.target.value)}
-              variant="outlined"
-            >
-              {roles.map((role) => <MenuItem key={role} value={role}>{role}</MenuItem>)}
-            </Select>
-          </FormControl>
-        ),
-      });
-    }
-
-    const mappedExtraColumns = visibleExtraColumns.map((column) => ({
-      field: `extra:${column.key}`,
-      headerName: typeof column.label === 'function' ? column.label(listContext) : column.label,
-      minWidth: Number(column.minWidth) || 180,
-      flex: Number(column.flex) || 0.9,
-      sortable: column.sortable !== false,
-      align: column.align || 'left',
-      headerAlign: column.align || 'left',
-      valueGetter: (row) => getExtraColumnSortValue(column, row),
-      renderCell: (row) =>
-        column.renderCell({
-          user: row,
-          canEdit: canEdit(row),
-          currentUser,
-          extraContext,
-          t,
-          reloadUsers: loadUsers,
-        }),
-    }));
-
-    const hasActionColumn = showDeleteAction || visibleRowActions.length > 0;
-
-    if (!hasActionColumn) {
-      return [...baseColumns, ...mappedExtraColumns];
-    }
-
-    const actionColumn = {
-      field: 'actions',
-      headerName: t('Common.ACTIONS', 'Actions'),
-      minWidth: Math.max(220, 110 + (visibleRowActions.length + (showDeleteAction ? 1 : 0)) * 110),
-      flex: 1.1,
-      sortable: false,
-      align: 'left',
-      headerAlign: 'left',
-      valueGetter: null,
-      renderCell: (row) => (
-        <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1, alignItems: 'center', py: 0.5 }}>
-          {visibleRowActions.map((action) => {
-            const actionId = `${action.key}:${row.id}`;
-            const isBusy = Boolean(rowActionLoading[actionId]);
-            const isDisabled = typeof action.disabled === 'function'
-              ? action.disabled({
-                  user: row,
-                  canEdit: canEdit(row),
-                  currentUser,
-                  extraContext,
-                  t,
-                })
-              : false;
-
-            return (
-              <Button
-                key={`${action.key}-${row.id}`}
-                size="small"
-                variant="outlined"
-                onClick={() => runRowAction(action, row)}
-                disabled={isBusy || isDisabled}
-                sx={USER_LIST_ACTION_SX}
-              >
-                {typeof action.label === 'function'
-                  ? action.label({ user: row, t, currentUser, canEdit: canEdit(row) })
-                  : action.label}
-              </Button>
-            );
-          })}
-
-          {showDeleteAction && !isOwnRow(row) && (
-            <Tooltip title={t('Common.DELETE', 'Delete')}>
-              <span>
-                <Button
-                  size="small"
-                  variant="outlined"
-                  color="error"
-                  startIcon={<DeleteIcon />}
-                  onClick={() => handleDelete(row.id)}
-                  disabled={!canDelete(row)}
-                  sx={USER_LIST_ACTION_SX}
-                >
-                  {t('Common.DELETE', 'Delete')}
-                </Button>
-              </span>
-            </Tooltip>
-          )}
-        </Box>
-      ),
-    };
-
-    return [...baseColumns, ...mappedExtraColumns, actionColumn];
-  }, [
-    t,
-    roles,
-    showNewColumn,
-    showSuccessfulLoginColumn,
-    showRoleColumn,
-    showDeleteAction,
-    visibleExtraColumns,
-    visibleRowActions,
-    listContext,
-    rowActionLoading,
-    currentUser,
-    extraContext,
-    loadUsers,
-    canEdit,
-    canDelete,
-    isOwnRow,
-  ]);
-
-  const sortedUsers = useMemo(() => {
-    const col = columns.find((c) => c.field === sortField);
-    return [...filteredUsers].sort((a, b) => {
-      const aVal = col?.valueGetter ? col.valueGetter(a) : (a[sortField] ?? '');
-      const bVal = col?.valueGetter ? col.valueGetter(b) : (b[sortField] ?? '');
-      const cmp = String(aVal ?? '').localeCompare(String(bVal ?? ''), undefined, { numeric: true, sensitivity: 'base' });
-      return sortDir === 'asc' ? cmp : -cmp;
-    });
-  }, [filteredUsers, sortField, sortDir, columns]);
-
-  const pagedUsers = useMemo(
-    () => sortedUsers.slice(page * pageSize, page * pageSize + pageSize),
-    [sortedUsers, page, pageSize],
-  );
-
-  const handleSortClick = (field) => {
-    if (sortField === field) {
-      setSortDir((d) => (d === 'asc' ? 'desc' : 'asc'));
-    } else {
-      setSortField(field);
-      setSortDir('asc');
-    }
-    setPage(0);
-  };
-
-  return (
-    <Box>
-      <Typography variant="h6" gutterBottom>{t('UserList.TITLE', 'All Users')}</Typography>
-
-      <Box sx={{ mb: 2, maxWidth: 420 }}>
-        <TextField
-          fullWidth
-          size="small"
-          label={t('Common.SEARCH', 'Search')}
-          placeholder={t('UserList.SEARCH_PLACEHOLDER', 'Search users...')}
-          value={searchQuery}
-          onChange={(event) => setSearchQuery(event.target.value)}
-        />
-      </Box>
-
-      {error && <Alert severity="error" sx={USER_LIST_ALERT_SX}>{error}</Alert>}
-
-      {loading && (
-        <Box sx={{ display: 'flex', justifyContent: 'center', p: 3 }}>
-          <CircularProgress />
-        </Box>
-      )}
-
-      {!loading && (
-        <Box sx={{ width: '100%' }}>
-          <TableContainer sx={{ border: 1, borderColor: 'divider', borderRadius: 1 }}>
-            <Table size="small">
-              <TableHead sx={{ bgcolor: 'action.hover' }}>
-                <TableRow>
-                  {columns.map((col) => (
-                    <TableCell
-                      key={col.field}
-                      align={col.headerAlign || col.align || 'left'}
-                      sortDirection={sortField === col.field ? sortDir : false}
-                      sx={[USER_LIST_HEADER_CELL_SX, { minWidth: col.minWidth }]}
-                    >
-                      {col.sortable !== false ? (
-                        <TableSortLabel
-                          active={sortField === col.field}
-                          direction={sortField === col.field ? sortDir : 'asc'}
-                          onClick={() => handleSortClick(col.field)}
-                        >
-                          {col.headerName}
-                        </TableSortLabel>
-                      ) : (
-                        col.headerName
-                      )}
-                    </TableCell>
-                  ))}
-                </TableRow>
-              </TableHead>
-              <TableBody>
-                {pagedUsers.length === 0 ? (
-                  <TableRow>
-                    <TableCell
-                      colSpan={columns.length}
-                      align="center"
-                      sx={USER_LIST_EMPTY_CELL_SX}
-                    >
-                      {t('UserList.NO_USERS', 'No users found.')}
-                    </TableCell>
-                  </TableRow>
-                ) : (
-                  pagedUsers.map((row) => (
-                    <TableRow key={row.id} hover>
-                      {columns.map((col) => (
-                        <TableCell
-                          key={col.field}
-                          align={col.align || 'left'}
-                          sx={USER_LIST_BODY_CELL_SX}
-                        >
-                          {col.renderCell(row)}
-                        </TableCell>
-                      ))}
-                    </TableRow>
-                  ))
-                )}
-              </TableBody>
-            </Table>
-          </TableContainer>
-          <TablePagination
-            component="div"
-            count={sortedUsers.length}
-            page={page}
-            onPageChange={(_, newPage) => setPage(newPage)}
-            rowsPerPage={pageSize}
-            onRowsPerPageChange={(event) => {
-              setPageSize(Number(event.target.value));
-              setPage(0);
-            }}
-            labelRowsPerPage={t('UserList.ROWS_PER_PAGE', 'Rows per page:')}
-            labelDisplayedRows={formatDisplayedRowsLabel(t)}
-            rowsPerPageOptions={[10, 25, 50, 100]}
-          />
-        </Box>
-      )}
-    </Box>
-  );
-}