louiscklaw/HKSingleParty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init user edit,

Browse Source
This commit is contained in:
louiscklaw
2025-05-28 23:17:04 +08:00
parent db805f23b6
commit 9f5367e35c
39 changed files with 975 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
03_source/frontend/src/sections/user/user-new-edit-form.tsx
View File

@@ -1,27 +1,23 @@
import type { IUserItem } from 'src/types/user';
import { z as zod } from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';
import { useForm, Controller } from 'react-hook-form';
import { isValidPhoneNumber } from 'react-phone-number-input/input';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Card from '@mui/material/Card';
import FormControlLabel from '@mui/material/FormControlLabel';
import Grid from '@mui/material/Grid';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';
import Switch from '@mui/material/Switch';
import Typography from '@mui/material/Typography';
import FormControlLabel from '@mui/material/FormControlLabel';
import { paths } from 'src/routes/paths';
import { useRouter } from 'src/routes/hooks';
import { fData } from 'src/utils/format-number';
import { Controller, useForm } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import { isValidPhoneNumber } from 'react-phone-number-input/input';
import { Field, Form, schemaHelper } from 'src/components/hook-form';
import { Label } from 'src/components/label';
import { toast } from 'src/components/snackbar';
import { Form, Field, schemaHelper } from 'src/components/hook-form';
import { useRouter } from 'src/routes/hooks';
import { paths } from 'src/routes/paths';
import type { IUserItem } from 'src/types/user';
import { fData } from 'src/utils/format-number';
import { z as zod } from 'zod';
// ----------------------------------------------------------------------
@@ -57,6 +53,8 @@ type Props = {
};
export function UserNewEditForm({ currentUser }: Props) {
const { t } = useTranslation();
const router = useRouter();
const defaultValues: NewUserSchemaType = {
@@ -234,7 +232,7 @@ export function UserNewEditForm({ currentUser }: Props) {
<Field.Text name="state" label="State/region" />
<Field.Text name="city" label="City" />
<Field.Text name="address" label="Address" />
<Field.Text name="address" label={t('Address')} />
<Field.Text name="zipCode" label="Zip/code" />
<Field.Text name="company" label="Company" />
<Field.Text name="role" label="Role" />

25
03_source/frontend/src/sections/user/user-quick-edit-form.tsx
View File

@@ -1,23 +1,20 @@
import type { IUserItem } from 'src/types/user';
import { z as zod } from 'zod';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { isValidPhoneNumber } from 'react-phone-number-input/input';
import Box from '@mui/material/Box';
import Alert from '@mui/material/Alert';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Dialog from '@mui/material/Dialog';
import MenuItem from '@mui/material/MenuItem';
import DialogTitle from '@mui/material/DialogTitle';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogTitle from '@mui/material/DialogTitle';
import MenuItem from '@mui/material/MenuItem';
import { useForm } from 'react-hook-form';
import { isValidPhoneNumber } from 'react-phone-number-input/input';
import { USER_STATUS_OPTIONS } from 'src/_mock';
import { Field, Form, schemaHelper } from 'src/components/hook-form';
import { toast } from 'src/components/snackbar';
import { Form, Field, schemaHelper } from 'src/components/hook-form';
import { useTranslate } from 'src/locales';
import type { IUserItem } from 'src/types/user';
import { z as zod } from 'zod';
// ----------------------------------------------------------------------
@@ -53,6 +50,8 @@ type Props = {
};
export function UserQuickEditForm({ currentUser, open, onClose }: Props) {
const { t } = useTranslate();
const defaultValues: UserQuickEditSchemaType = {
name: '',
email: '',
@@ -113,7 +112,7 @@ export function UserQuickEditForm({ currentUser, open, onClose }: Props) {
},
}}
>
<DialogTitle>Quick update</DialogTitle>
<DialogTitle>{t('Quick update')}</DialogTitle>
<Form methods={methods} onSubmit={onSubmit}>
<DialogContent>

37
03_source/frontend/src/sections/user/user-table-row.tsx
View File

@@ -1,27 +1,23 @@
import type { IUserItem } from 'src/types/user';
import { useBoolean, usePopover } from 'minimal-shared/hooks';
import Box from '@mui/material/Box';
import Link from '@mui/material/Link';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';
import Avatar from '@mui/material/Avatar';
import Tooltip from '@mui/material/Tooltip';
import MenuList from '@mui/material/MenuList';
import MenuItem from '@mui/material/MenuItem';
import TableRow from '@mui/material/TableRow';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Checkbox from '@mui/material/Checkbox';
import TableCell from '@mui/material/TableCell';
import IconButton from '@mui/material/IconButton';
import { RouterLink } from 'src/routes/components';
import { Label } from 'src/components/label';
import { Iconify } from 'src/components/iconify';
import Link from '@mui/material/Link';
import MenuItem from '@mui/material/MenuItem';
import MenuList from '@mui/material/MenuList';
import Stack from '@mui/material/Stack';
import TableCell from '@mui/material/TableCell';
import TableRow from '@mui/material/TableRow';
import Tooltip from '@mui/material/Tooltip';
import { useBoolean, usePopover } from 'minimal-shared/hooks';
import { useTranslation } from 'react-i18next';
import { ConfirmDialog } from 'src/components/custom-dialog';
import { CustomPopover } from 'src/components/custom-popover';
import { Iconify } from 'src/components/iconify';
import { Label } from 'src/components/label';
import { RouterLink } from 'src/routes/components';
import type { IUserItem } from 'src/types/user';
import { UserQuickEditForm } from './user-quick-edit-form';
// ----------------------------------------------------------------------
@@ -38,6 +34,7 @@ export function UserTableRow({ row, selected, editHref, onSelectRow, onDeleteRow
const menuActions = usePopover();
const confirmDialog = useBoolean();
const quickEditForm = useBoolean();
const { t } = useTranslation();
const renderQuickEditForm = () => (
<UserQuickEditForm
@@ -148,7 +145,7 @@ export function UserTableRow({ row, selected, editHref, onSelectRow, onDeleteRow
<TableCell>
<Box sx={{ display: 'flex', alignItems: 'center' }}>
<Tooltip title="Quick Edit" placement="top" arrow>
<Tooltip title={t('Quick Edit')} placement="top" arrow>
<IconButton
color={quickEditForm.value ? 'inherit' : 'default'}
onClick={quickEditForm.onTrue}

10
03_source/frontend/src/sections/user/view/user-edit-view.tsx
View File

@@ -1,11 +1,7 @@
import type { IUserItem } from 'src/types/user';
import { paths } from 'src/routes/paths';
import { DashboardContent } from 'src/layouts/dashboard';
import { CustomBreadcrumbs } from 'src/components/custom-breadcrumbs';
import { DashboardContent } from 'src/layouts/dashboard';
import { paths } from 'src/routes/paths';
import type { IUserItem } from 'src/types/user';
import { UserNewEditForm } from '../user-new-edit-form';
// ----------------------------------------------------------------------

89
03_source/frontend/src/sections/user/view/user-list-view.tsx
View File

@@ -1,70 +1,75 @@
import type { TableHeadCellProps } from 'src/components/table';
import type { IUserItem, IUserTableFilters } from 'src/types/user';
import { useState, useCallback } from 'react';
import { varAlpha } from 'minimal-shared/utils';
import { useBoolean, useSetState } from 'minimal-shared/hooks';
// src/sections/user/view/user-list-view.tsx
import Box from '@mui/material/Box';
import Tab from '@mui/material/Tab';
import Tabs from '@mui/material/Tabs';
import Card from '@mui/material/Card';
import Table from '@mui/material/Table';
import Button from '@mui/material/Button';
import Tooltip from '@mui/material/Tooltip';
import TableBody from '@mui/material/TableBody';
import Card from '@mui/material/Card';
import IconButton from '@mui/material/IconButton';
import { paths } from 'src/routes/paths';
import { RouterLink } from 'src/routes/components';
import { DashboardContent } from 'src/layouts/dashboard';
import Tab from '@mui/material/Tab';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import Tabs from '@mui/material/Tabs';
import Tooltip from '@mui/material/Tooltip';
import { useBoolean, useSetState } from 'minimal-shared/hooks';
import { varAlpha } from 'minimal-shared/utils';
import { useCallback, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { _roles, _userList, USER_STATUS_OPTIONS } from 'src/_mock';
import { Label } from 'src/components/label';
import { toast } from 'src/components/snackbar';
import { Iconify } from 'src/components/iconify';
import { Scrollbar } from 'src/components/scrollbar';
import { ConfirmDialog } from 'src/components/custom-dialog';
import { useGetUsers } from 'src/actions/user';
import { CustomBreadcrumbs } from 'src/components/custom-breadcrumbs';
import { ConfirmDialog } from 'src/components/custom-dialog';
import { Iconify } from 'src/components/iconify';
import { Label } from 'src/components/label';
import { Scrollbar } from 'src/components/scrollbar';
import { toast } from 'src/components/snackbar';
import type { TableHeadCellProps } from 'src/components/table';
import {
useTable,
emptyRows,
rowInPage,
TableNoData,
getComparator,
rowInPage,
TableEmptyRows,
TableHeadCustom,
TableSelectedAction,
TableNoData,
TablePaginationCustom,
TableSelectedAction,
useTable,
} from 'src/components/table';
import { DashboardContent } from 'src/layouts/dashboard';
import { RouterLink } from 'src/routes/components';
import { paths } from 'src/routes/paths';
import type { IUserItem, IUserTableFilters } from 'src/types/user';
import { UserTableFiltersResult } from '../user-table-filters-result';
import { UserTableRow } from '../user-table-row';
import { UserTableToolbar } from '../user-table-toolbar';
import { UserTableFiltersResult } from '../user-table-filters-result';
// ----------------------------------------------------------------------
const STATUS_OPTIONS = [{ value: 'all', label: 'All' }, ...USER_STATUS_OPTIONS];
const TABLE_HEAD: TableHeadCellProps[] = [
{ id: 'name', label: 'Name' },
{ id: 'phoneNumber', label: 'Phone number', width: 180 },
{ id: 'company', label: 'Company', width: 220 },
{ id: 'role', label: 'Role', width: 180 },
{ id: 'status', label: 'Status', width: 100 },
{ id: '', width: 88 },
];
// ----------------------------------------------------------------------
export function UserListView() {
const { t } = useTranslation();
const TABLE_HEAD: TableHeadCellProps[] = [
{ id: 'name', label: t('Name') },
{ id: 'phoneNumber', label: t('Phone number'), width: 180 },
{ id: 'company', label: t('Company'), width: 220 },
{ id: 'role', label: t('Role'), width: 180 },
{ id: 'status', label: t('Status'), width: 100 },
{ id: '', width: 88 },
];
const { users, mutate } = useGetUsers();
const table = useTable();
const confirmDialog = useBoolean();
const [tableData, setTableData] = useState<IUserItem[]>(_userList);
useEffect(() => {
setTableData(users);
}, [users]);
const filters = useSetState<IUserTableFilters>({ name: '', role: [], status: 'all' });
const { state: currentFilters, setState: updateFilters } = filters;
@@ -131,7 +136,7 @@ export function UserListView() {
confirmDialog.onFalse();
}}
>
Delete
{t('Delete')}
</Button>
}
/>
@@ -154,7 +159,7 @@ export function UserListView() {
variant="contained"
startIcon={<Iconify icon="mingcute:add-line" />}
>
New user
{t('New user')}
</Button>
}
sx={{ mb: { xs: 3, md: 5 } }}
@@ -176,7 +181,7 @@ export function UserListView() {
key={tab.value}
iconPosition="end"
value={tab.value}
label={tab.label}
label={t(tab.label)}
icon={
<Label
variant={