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

in the middle of party-user frontend,

Browse Source
This commit is contained in:
louiscklaw
2025-06-16 03:03:54 +08:00
parent 17aaf97722
commit e93c5dcf62
38 changed files with 3074 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
03_source/cms_backend/prisma/seeds/partyUser.ts
View File

@@ -34,6 +34,20 @@ async function partyUser() {
emailVerified: new Date(), emailVerified: new Date(),
}, },
}); });
for (let i = 0; i < 10; i++) {
await prisma.partyUser.upsert({
where: { email: `bob${i}@prisma.io` },
update: {},
create: {
email: `bob${i}@prisma.io`,
name: 'Bob',
password: 'Aa12345678',
emailVerified: new Date(),
},
});
}
console.log('seed partyUser done'); console.log('seed partyUser done');
} }

4
03_source/cms_backend/src/app/api/party-user/list/route.ts
View File

@@ -8,8 +8,6 @@
// 2. Validates input data shape // 2. Validates input data shape
// //
//
import { logger } from 'src/utils/logger'; import { logger } from 'src/utils/logger';
import { STATUS, response, handleError } from 'src/utils/response'; import { STATUS, response, handleError } from 'src/utils/response';
@@ -28,7 +26,7 @@ export async function GET() {
logger('[User] list', partyUsers.length); logger('[User] list', partyUsers.length);
return response({ users: partyUsers }, STATUS.OK); return response({ partyUsers }, STATUS.OK);
} catch (error) { } catch (error) {
return handleError('Product - Get list', error); return handleError('Product - Get list', error);
} }

195
03_source/frontend/src/actions/party-user.ts Normal file
View File

@@ -0,0 +1,195 @@
import { useMemo } from 'react';
import axiosInstance, { endpoints, fetcher } from 'src/lib/axios';
import type { IPartyUserItem } from 'src/types/party-user';
import type { IProductItem } from 'src/types/product';
import type { IUserItem } from 'src/types/user';
import type { SWRConfiguration } from 'swr';
import useSWR, { mutate } from 'swr';
// ----------------------------------------------------------------------
const swrOptions: SWRConfiguration = {
revalidateIfStale: false,
revalidateOnFocus: false,
revalidateOnReconnect: false,
};
// ----------------------------------------------------------------------
type UsersData = {
partyUsers: IUserItem[];
};
// TODO: i want to refactor / tidy here
export function useGetPartyUsers() {
const url = `http://localhost:7272/api/party-user/list`;
const { data, isLoading, error, isValidating } = useSWR<UsersData>(url, fetcher, swrOptions);
const memoizedValue = useMemo(
() => ({
partyUsers: data?.partyUsers || [],
partyUsersLoading: isLoading,
partyUsersError: error,
partyUsersValidating: isValidating,
partyUsersEmpty: !isLoading && !isValidating && !data?.partyUsers.length,
}),
[data?.partyUsers, error, isLoading, isValidating]
);
return memoizedValue;
}
// ----------------------------------------------------------------------
type PartyUserData = {
partyUser: IPartyUserItem;
};
export function useGetPartyUser(partyUserId: string) {
const url = partyUserId ? [endpoints.partyUser.details, { params: { partyUserId } }] : '';
const { data, isLoading, error, isValidating } = useSWR<PartyUserData>(url, fetcher, swrOptions);
const memoizedValue = useMemo(
() => ({
partyUser: data?.partyUser,
partyUserLoading: isLoading,
partyUserError: error,
partyUserValidating: isValidating,
}),
[data?.partyUser, error, isLoading, isValidating]
);
return memoizedValue;
}
// ----------------------------------------------------------------------
type SearchResultsData = {
results: IProductItem[];
};
export function useSearchProducts(query: string) {
const url = query ? [endpoints.product.search, { params: { query } }] : '';
const { data, isLoading, error, isValidating } = useSWR<SearchResultsData>(url, fetcher, {
...swrOptions,
keepPreviousData: true,
});
const memoizedValue = useMemo(
() => ({
searchResults: data?.results || [],
searchLoading: isLoading,
searchError: error,
searchValidating: isValidating,
searchEmpty: !isLoading && !isValidating && !data?.results.length,
}),
[data?.results, error, isLoading, isValidating]
);
return memoizedValue;
}
// ----------------------------------------------------------------------
type SaveUserData = {
name: string;
city: string;
role: string;
email: string;
state: string;
status: string;
address: string;
country: string;
zipCode: string;
company: string;
avatarUrl: string;
phoneNumber: string;
isVerified: boolean;
//
username: string;
password: string;
};
export async function saveUser(userId: string, saveUserData: SaveUserData) {
// const url = userId ? [endpoints.user.details, { params: { userId } }] : '';
const res = await axiosInstance.post(
//
`http://localhost:7272/api/user/saveUser?userId=${userId}`,
{
data: saveUserData,
}
);
return res;
}
export async function uploadUserImage(saveUserData: SaveUserData) {
console.log('uploadUserImage ?');
// const url = userId ? [endpoints.user.details, { params: { userId } }] : '';
const res = await axiosInstance.get('http://localhost:7272/api/product/helloworld');
return res;
}
// ----------------------------------------------------------------------
type CreateUserData = {
name: string;
city: string;
role: string;
email: string;
state: string;
status: string;
address: string;
country: string;
zipCode: string;
company: string;
avatarUrl: string;
phoneNumber: string;
isVerified: boolean;
//
username: string;
password: string;
};
export async function createUser(createUserData: CreateUserData) {
console.log('create product ?');
// const url = productId ? [endpoints.product.details, { params: { productId } }] : '';
const res = await axiosInstance.post('http://localhost:7272/api/user/createUser', {
data: createUserData,
});
return res;
}
// ----------------------------------------------------------------------
export async function deletePartyUser(partyUserId: string) {
/**
* Work on server
*/
const data = { partyUserId };
await axiosInstance.patch(endpoints.partyUser.delete, data);
/**
* Work in local
*/
mutate(
endpoints.partyUser.list,
(currentData: any) => {
const currentProducts: IPartyUserItem[] = currentData?.partyUsers;
const partyUsers = currentProducts.filter((partyUser) => partyUser.id !== partyUserId);
return { ...currentData, partyUsers };
},
false
);
}

13
03_source/frontend/src/layouts/nav-config-dashboard.tsx
View File

@@ -111,6 +111,19 @@ export const navData: NavSectionProps['data'] = [
{ title: 'Details', path: paths.dashboard.partyOrder.demo.details }, { title: 'Details', path: paths.dashboard.partyOrder.demo.details },
], ],
}, },
{
title: 'party-user',
path: paths.dashboard.partyUser.root,
icon: ICONS.user,
children: [
{ title: 'Profile', path: paths.dashboard.partyUser.root },
{ title: 'Cards', path: paths.dashboard.partyUser.cards },
{ title: 'List', path: paths.dashboard.partyUser.list },
{ title: 'Create', path: paths.dashboard.partyUser.new },
{ title: 'Edit', path: paths.dashboard.partyUser.demo.edit },
{ title: 'Account', path: paths.dashboard.partyUser.account },
],
},
{ {
title: 'Product', title: 'Product',
path: paths.dashboard.product.root, path: paths.dashboard.product.root,

8
03_source/frontend/src/lib/axios.ts
View File

@@ -106,4 +106,12 @@ export const endpoints = {
changeStatus: (partyOrderId: string) => changeStatus: (partyOrderId: string) =>
`/api/party-order/changeStatus?partyOrderId=${partyOrderId}`, `/api/party-order/changeStatus?partyOrderId=${partyOrderId}`,
}, },
partyUser: {
list: '/api/party-user/list',
details: '/api/party-user/details',
search: '/api/party-user/search',
create: '/api/party-user/create',
update: '/api/party-user/update',
delete: '/api/party-user/delete',
},
}; };

16
03_source/frontend/src/pages/dashboard/party-user/account/billing.tsx Normal file
View File

@@ -0,0 +1,16 @@
import { CONFIG } from 'src/global-config';
import { AccountBillingView } from 'src/sections/account/view';
// ----------------------------------------------------------------------
const metadata = { title: `Account billing settings | Dashboard - ${CONFIG.appName}` };
export default function Page() {
return (
<>
<title>{metadata.title}</title>
<AccountBillingView />
</>
);
}

16
03_source/frontend/src/pages/dashboard/party-user/account/change-password.tsx Normal file
View File

@@ -0,0 +1,16 @@
import { CONFIG } from 'src/global-config';
import { AccountChangePasswordView } from 'src/sections/account/view';
// ----------------------------------------------------------------------
const metadata = { title: `Account change password settings | Dashboard - ${CONFIG.appName}` };
export default function Page() {
return (
<>
<title>{metadata.title}</title>
<AccountChangePasswordView />
</>
);
}

16
03_source/frontend/src/pages/dashboard/party-user/account/general.tsx Normal file
View File

@@ -0,0 +1,16 @@
import { CONFIG } from 'src/global-config';
import { AccountGeneralView } from 'src/sections/account/view';
// ----------------------------------------------------------------------
const metadata = { title: `Account general settings | Dashboard - ${CONFIG.appName}` };
export default function Page() {
return (
<>
<title>{metadata.title}</title>
<AccountGeneralView />
</>
);
}

18
03_source/frontend/src/pages/dashboard/party-user/account/notifications.tsx Normal file
View File

@@ -0,0 +1,18 @@
import { CONFIG } from 'src/global-config';
import { AccountNotificationsView } from 'src/sections/account/view';
// ----------------------------------------------------------------------
const metadata = {
title: `Account notifications settings | Dashboard - ${CONFIG.appName}`,
};
export default function Page() {
return (
<>
<title>{metadata.title}</title>
<AccountNotificationsView />
</>
);
}

16
03_source/frontend/src/pages/dashboard/party-user/account/socials.tsx Normal file
View File

@@ -0,0 +1,16 @@
import { CONFIG } from 'src/global-config';
import { AccountSocialsView } from 'src/sections/account/view';
// ----------------------------------------------------------------------
const metadata = { title: `Account socials settings | Dashboard - ${CONFIG.appName}` };
export default function Page() {
return (
<>
<title>{metadata.title}</title>
<AccountSocialsView />
</>
);
}

16
03_source/frontend/src/pages/dashboard/party-user/cards.tsx Normal file
View File

@@ -0,0 +1,16 @@
import { CONFIG } from 'src/global-config';
import { UserCardsView } from 'src/sections/user/view';
// ----------------------------------------------------------------------
const metadata = { title: `User cards | Dashboard - ${CONFIG.appName}` };
export default function Page() {
return (
<>
<title>{metadata.title}</title>
<UserCardsView />
</>
);
}

25
03_source/frontend/src/pages/dashboard/party-user/edit.tsx Normal file
View File

@@ -0,0 +1,25 @@
// import { _userList } from 'src/_mock/_user';
import { useGetPartyUser } from 'src/actions/party-user';
import { CONFIG } from 'src/global-config';
import { useParams } from 'src/routes/hooks';
import { PartyUserEditView } from 'src/sections/party-user/view';
// ----------------------------------------------------------------------
const metadata = { title: `User edit | Dashboard - ${CONFIG.appName}` };
export default function Page() {
const { id = '' } = useParams();
// TODO: remove unused code
// const currentUser = _userList.find((user) => user.id === id);
const { partyUser: user } = useGetPartyUser(id);
return (
<>
<title>{metadata.title}</title>
<PartyUserEditView user={user} />
</>
);
}

16
03_source/frontend/src/pages/dashboard/party-user/list.tsx Normal file
View File

@@ -0,0 +1,16 @@
import { CONFIG } from 'src/global-config';
import { PartyUserListView } from 'src/sections/party-user/view';
// ----------------------------------------------------------------------
const metadata = { title: `User list | Dashboard - ${CONFIG.appName}` };
export default function Page() {
return (
<>
<title>{metadata.title}</title>
<PartyUserListView />
</>
);
}

16
03_source/frontend/src/pages/dashboard/party-user/new.tsx Normal file
View File

@@ -0,0 +1,16 @@
import { CONFIG } from 'src/global-config';
import { UserCreateView } from 'src/sections/user/view';
// ----------------------------------------------------------------------
const metadata = { title: `Create a new user | Dashboard - ${CONFIG.appName}` };
export default function Page() {
return (
<>
<title>{metadata.title}</title>
<UserCreateView />
</>
);
}

16
03_source/frontend/src/pages/dashboard/party-user/profile.tsx Normal file
View File

@@ -0,0 +1,16 @@
import { CONFIG } from 'src/global-config';
import { UserProfileView } from 'src/sections/user/view';
// ----------------------------------------------------------------------
const metadata = { title: `User profile | Dashboard - ${CONFIG.appName}` };
export default function Page() {
return (
<>
<title>{metadata.title}</title>
<UserProfileView />
</>
);
}

10
03_source/frontend/src/routes/paths.ts
View File

@@ -196,5 +196,15 @@ export const paths = {
details: (id: string) => `${ROOTS.DASHBOARD}/party-order/${id}`, details: (id: string) => `${ROOTS.DASHBOARD}/party-order/${id}`,
demo: { details: `${ROOTS.DASHBOARD}/party-order/${MOCK_ID}` }, demo: { details: `${ROOTS.DASHBOARD}/party-order/${MOCK_ID}` },
}, },
partyUser: {
root: `${ROOTS.DASHBOARD}/party-user`,
new: `${ROOTS.DASHBOARD}/party-user/new`,
list: `${ROOTS.DASHBOARD}/party-user/list`,
cards: `${ROOTS.DASHBOARD}/party-user/cards`,
profile: `${ROOTS.DASHBOARD}/party-user/profile`,
account: `${ROOTS.DASHBOARD}/party-user/account`,
edit: (id: string) => `${ROOTS.DASHBOARD}/party-user/${id}/edit`,
demo: { edit: `${ROOTS.DASHBOARD}/party-user/${MOCK_ID}/edit` },
},
}, },
}; };

29
03_source/frontend/src/routes/sections/dashboard.tsx
View File

@@ -87,6 +87,13 @@ const PartyEventEditPage = lazy(() => import('src/pages/dashboard/party-event/ed
const PartyOrderListPage = lazy(() => import('src/pages/dashboard/party-order/list')); const PartyOrderListPage = lazy(() => import('src/pages/dashboard/party-order/list'));
const PartyOrderDetailsPage = lazy(() => import('src/pages/dashboard/party-order/details')); const PartyOrderDetailsPage = lazy(() => import('src/pages/dashboard/party-order/details'));
// PartyUser
const PartyUserProfilePage = lazy(() => import('src/pages/dashboard/party-user/profile'));
const PartyUserCardsPage = lazy(() => import('src/pages/dashboard/party-user/cards'));
const PartyUserListPage = lazy(() => import('src/pages/dashboard/party-user/list'));
const PartyUserCreatePage = lazy(() => import('src/pages/dashboard/party-user/new'));
const PartyUserEditPage = lazy(() => import('src/pages/dashboard/party-user/edit'));
// ---------------------------------------------------------------------- // ----------------------------------------------------------------------
function SuspenseOutlet() { function SuspenseOutlet() {
@@ -229,6 +236,28 @@ export const dashboardRoutes: RouteObject[] = [
{ path: ':id', element: <PartyOrderDetailsPage /> }, { path: ':id', element: <PartyOrderDetailsPage /> },
], ],
}, },
{
path: 'party-user',
children: [
{ index: true, element: <PartyUserProfilePage /> },
{ path: 'profile', element: <PartyUserProfilePage /> },
{ path: 'cards', element: <PartyUserCardsPage /> },
{ path: 'list', element: <PartyUserListPage /> },
{ path: 'new', element: <PartyUserCreatePage /> },
{ path: ':id/edit', element: <PartyUserEditPage /> },
{
path: 'account',
element: accountLayout(),
children: [
{ index: true, element: <AccountGeneralPage /> },
{ path: 'billing', element: <AccountBillingPage /> },
{ path: 'notifications', element: <AccountNotificationsPage /> },
{ path: 'socials', element: <AccountSocialsPage /> },
{ path: 'change-password', element: <AccountChangePasswordPage /> },
],
},
],
},
], ],
}, },
]; ];

2
03_source/frontend/src/routes/sections/index.tsx
View File

@@ -1,3 +1,5 @@
// AI: this file store page routeing of app
//
import { lazy, Suspense } from 'react'; import { lazy, Suspense } from 'react';
import type { RouteObject } from 'react-router'; import type { RouteObject } from 'react-router';
import { SplashScreen } from 'src/components/loading-screen'; import { SplashScreen } from 'src/components/loading-screen';

47
03_source/frontend/src/sections/party-user/party-user-card-list.tsx Normal file
View File

@@ -0,0 +1,47 @@
import Box from '@mui/material/Box';
import Pagination from '@mui/material/Pagination';
import { useCallback, useState } from 'react';
import type { IPartyUserCard } from 'src/types/party-user';
import { UserCard } from './party-user-card';
// ----------------------------------------------------------------------
type Props = {
users: IPartyUserCard[];
};
export function UserCardList({ users }: Props) {
const [page, setPage] = useState(1);
const rowsPerPage = 12;
const handleChangePage = useCallback((event: React.ChangeEvent<unknown>, newPage: number) => {
setPage(newPage);
}, []);
return (
<>
<Box
sx={{
gap: 3,
display: 'grid',
gridTemplateColumns: { xs: 'repeat(1, 1fr)', sm: 'repeat(2, 1fr)', md: 'repeat(3, 1fr)' },
}}
>
{users
.slice((page - 1) * rowsPerPage, (page - 1) * rowsPerPage + rowsPerPage)
.map((user) => (
<UserCard key={user.id} user={user} />
))}
</Box>
<Pagination
page={page}
shape="circular"
count={Math.ceil(users.length / rowsPerPage)}
onChange={handleChangePage}
sx={{ mt: { xs: 5, md: 8 }, mx: 'auto' }}
/>
</>
);
}

119
03_source/frontend/src/sections/party-user/party-user-card.tsx Normal file
View File

@@ -0,0 +1,119 @@
import Avatar from '@mui/material/Avatar';
import Box from '@mui/material/Box';
import type { CardProps } from '@mui/material/Card';
import Card from '@mui/material/Card';
import Divider from '@mui/material/Divider';
import IconButton from '@mui/material/IconButton';
import ListItemText from '@mui/material/ListItemText';
import { varAlpha } from 'minimal-shared/utils';
import { _socials } from 'src/_mock';
import { AvatarShape } from 'src/assets/illustrations';
import { Iconify } from 'src/components/iconify';
import { Image } from 'src/components/image';
import type { IPartyUserCard } from 'src/types/party-user';
import { fShortenNumber } from 'src/utils/format-number';
// ----------------------------------------------------------------------
type Props = CardProps & {
user: IPartyUserCard;
};
export function UserCard({ user, sx, ...other }: Props) {
return (
<Card sx={[{ textAlign: 'center' }, ...(Array.isArray(sx) ? sx : [sx])]} {...other}>
<Box sx={{ position: 'relative' }}>
<AvatarShape
sx={{
left: 0,
right: 0,
zIndex: 10,
mx: 'auto',
bottom: -26,
position: 'absolute',
}}
/>
<Avatar
alt={user.name}
src={user.avatarUrl}
sx={{
left: 0,
right: 0,
width: 64,
height: 64,
zIndex: 11,
mx: 'auto',
bottom: -32,
position: 'absolute',
}}
/>
<Image
src={user.coverUrl}
alt={user.coverUrl}
ratio="16/9"
slotProps={{
overlay: {
sx: (theme) => ({
bgcolor: varAlpha(theme.vars.palette.common.blackChannel, 0.48),
}),
},
}}
/>
</Box>
<ListItemText
sx={{ mt: 7, mb: 1 }}
primary={user.name}
secondary={user.role}
slotProps={{
primary: { sx: { typography: 'subtitle1' } },
secondary: { sx: { mt: 0.5 } },
}}
/>
<Box
sx={{
mb: 2.5,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
{_socials.map((social) => (
<IconButton key={social.label}>
{social.value === 'twitter' && <Iconify icon="socials:twitter" />}
{social.value === 'facebook' && <Iconify icon="socials:facebook" />}
{social.value === 'instagram' && <Iconify icon="socials:instagram" />}
{social.value === 'linkedin' && <Iconify icon="socials:linkedin" />}
</IconButton>
))}
</Box>
<Divider sx={{ borderStyle: 'dashed' }} />
<Box
sx={{
py: 3,
display: 'grid',
typography: 'subtitle1',
gridTemplateColumns: 'repeat(3, 1fr)',
}}
>
{[
{ label: 'Follower', value: user.totalFollowers },
{ label: 'Following', value: user.totalFollowing },
{ label: 'Total post', value: user.totalPosts },
].map((stat) => (
<Box key={stat.label} sx={{ gap: 0.5, display: 'flex', flexDirection: 'column' }}>
<Box component="span" sx={{ typography: 'caption', color: 'text.secondary' }}>
{stat.label}
</Box>
{fShortenNumber(stat.value)}
</Box>
))}
</Box>
</Card>
);
}

297
03_source/frontend/src/sections/party-user/party-user-new-edit-form.tsx Normal file
View File

@@ -0,0 +1,297 @@
import { zodResolver } from '@hookform/resolvers/zod';
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 Switch from '@mui/material/Switch';
import Typography from '@mui/material/Typography';
import { useState } from 'react';
import { Controller, useForm } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import { isValidPhoneNumber } from 'react-phone-number-input/input';
import { createUser, deletePartyUser, saveUser } from 'src/actions/party-user';
import { Field, Form, schemaHelper } from 'src/components/hook-form';
import { Label } from 'src/components/label';
import { toast } from 'src/components/snackbar';
import { useRouter } from 'src/routes/hooks';
import { paths } from 'src/routes/paths';
import type { IPartyUserItem } from 'src/types/party-user';
import { fileToBase64 } from 'src/utils/file-to-base64';
import { fData } from 'src/utils/format-number';
import { z as zod } from 'zod';
// ----------------------------------------------------------------------
export type NewUserSchemaType = zod.infer<typeof NewUserSchema>;
export const NewUserSchema = zod.object({
name: zod.string().min(1, { message: 'Name is required!' }),
city: zod.string().min(1, { message: 'City is required!' }),
role: zod.string().min(1, { message: 'Role is required!' }),
email: zod
.string()
.min(1, { message: 'Email is required!' })
.email({ message: 'Email must be a valid email address!' }),
state: zod.string().min(1, { message: 'State is required!' }),
status: zod.string(),
address: zod.string().min(1, { message: 'Address is required!' }),
country: schemaHelper.nullableInput(zod.string().min(1, { message: 'Country is required!' }), {
// message for null value
message: 'Country is required!',
}),
zipCode: zod.string().min(1, { message: 'Zip code is required!' }),
company: zod.string().min(1, { message: 'Company is required!' }),
avatarUrl: schemaHelper.file({ message: 'Avatar is required!' }),
phoneNumber: schemaHelper.phoneNumber({ isValid: isValidPhoneNumber }),
isVerified: zod.boolean(),
username: zod.string(),
password: zod.string(),
});
// ----------------------------------------------------------------------
type Props = {
currentUser?: IPartyUserItem;
};
export function UserNewEditForm({ currentUser }: Props) {
const { t } = useTranslation();
const router = useRouter();
const defaultValues: NewUserSchemaType = {
status: '',
avatarUrl: null,
isVerified: true,
name: '新用戶名字',
email: 'user@123.com',
phoneNumber: '+85291234567',
country: 'Hong Kong',
state: 'HK',
city: 'hong kong',
address: 'Kwun Tong, Sau Mau Ping',
zipCode: '00000',
company: 'test company',
role: 'user',
//
username: '',
password: '',
};
const methods = useForm<NewUserSchemaType>({
mode: 'onSubmit',
resolver: zodResolver(NewUserSchema),
defaultValues,
values: currentUser,
});
const {
reset,
watch,
control,
handleSubmit,
formState: { errors, isSubmitting },
} = methods;
const values = watch();
const [disableDeleteUserButton, setDisableDeleteUserButton] = useState<boolean>(false);
const handleDeleteUserClick = async () => {
setDisableDeleteUserButton(true);
try {
if (currentUser) {
await deletePartyUser(currentUser.id);
toast.success(t('user deleted'));
router.push(paths.dashboard.user.list);
}
} catch (error) {
console.error(error);
}
setDisableDeleteUserButton(false);
};
const onSubmit = handleSubmit(async (data: any) => {
try {
await new Promise((resolve) => setTimeout(resolve, 500));
reset();
const temp: any = data.avatarUrl;
if (temp instanceof File) {
data.avatarUrl = await fileToBase64(temp);
}
if (currentUser) {
// perform save
await saveUser(currentUser.id, data);
} else {
// perform create
await createUser(data);
}
toast.success(currentUser ? t('Update success!') : t('Create success!'));
router.push(paths.dashboard.user.list);
// console.info('DATA', data);
} catch (error) {
console.error(error);
}
});
return (
<Form methods={methods} onSubmit={onSubmit}>
<Grid container spacing={3}>
<Grid size={{ xs: 12, md: 4 }}>
<Card sx={{ pt: 10, pb: 5, px: 3 }}>
{currentUser && (
<Label
color={
(values.status === 'active' && 'success') ||
(values.status === 'banned' && 'error') ||
'warning'
}
sx={{ position: 'absolute', top: 24, right: 24 }}
>
{values.status}
</Label>
)}
<Box sx={{ mb: 5 }}>
<Field.UploadAvatar
name="avatarUrl"
maxSize={3145728}
helperText={
<Typography
variant="caption"
sx={{
mt: 3,
mx: 'auto',
display: 'block',
textAlign: 'center',
color: 'text.disabled',
}}
>
{t('Allowed')} *.jpeg, *.jpg, *.png, *.gif
<br /> {t('max size of')} {fData(3145728)}
</Typography>
}
/>
</Box>
{currentUser && (
<FormControlLabel
labelPlacement="start"
control={
<Controller
name="status"
control={control}
render={({ field }) => (
<Switch
{...field}
checked={field.value !== 'active'}
onChange={(event) =>
field.onChange(event.target.checked ? 'banned' : 'active')
}
/>
)}
/>
}
label={
<>
<Typography variant="subtitle2" sx={{ mb: 0.5 }}>
{t('Banned')}
</Typography>
<Typography variant="body2" sx={{ color: 'text.secondary' }}>
{t('Apply disable account')}
</Typography>
</>
}
sx={{
mx: 0,
mb: 3,
width: 1,
justifyContent: 'space-between',
}}
/>
)}
<Field.Switch
name="isVerified"
labelPlacement="start"
label={
<>
<Typography variant="subtitle2" sx={{ mb: 0.5 }}>
{t('Email verified')}
</Typography>
<Typography variant="body2" sx={{ color: 'text.secondary' }}>
{t('Disabling this will automatically send the user a verification email')}
</Typography>
</>
}
sx={{ mx: 0, width: 1, justifyContent: 'space-between' }}
/>
{currentUser && (
<Stack sx={{ mt: 3, alignItems: 'center', justifyContent: 'center' }}>
<Button
disabled={disableDeleteUserButton}
loading={disableDeleteUserButton}
variant="soft"
color="error"
onClick={handleDeleteUserClick}
>
{t('Delete user')}
</Button>
</Stack>
)}
</Card>
</Grid>
<Grid size={{ xs: 12, md: 8 }}>
<Card sx={{ p: 3 }}>
<Box
sx={{
rowGap: 3,
columnGap: 2,
display: 'grid',
gridTemplateColumns: { xs: 'repeat(1, 1fr)', sm: 'repeat(2, 1fr)' },
}}
>
<Field.Text name="name" label={t('Full name')} />
<Field.Text name="email" label={t('Email address')} />
<Field.Phone name="phoneNumber" label={t('Phone number')} country="HK" />
<Field.CountrySelect
fullWidth
name="country"
label={t('Country')}
placeholder={t('Choose a country')}
/>
<Field.Text name="state" label={t('State/region')} />
<Field.Text name="city" label={t('City')} />
<Field.Text name="address" label={t('Address')} />
<Field.Text name="zipCode" label={t('Zip/code')} />
<Field.Text name="company" label={t('Company')} />
<Field.Text name="role" label={t('Role')} />
</Box>
<Stack sx={{ mt: 3, alignItems: 'flex-end' }}>
<Button
disabled={isSubmitting}
loading={isSubmitting}
type="submit"
variant="contained"
>
{!currentUser ? t('Create user') : t('Save changes')}
</Button>
</Stack>
</Card>
</Grid>
</Grid>
</Form>
);
}

173
03_source/frontend/src/sections/party-user/party-user-quick-edit-form.tsx Normal file
View File

@@ -0,0 +1,173 @@
import { zodResolver } from '@hookform/resolvers/zod';
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 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 { useTranslate } from 'src/locales';
import type { IUserItem } from 'src/types/user';
import { z as zod } from 'zod';
// ----------------------------------------------------------------------
export type UserQuickEditSchemaType = zod.infer<typeof UserQuickEditSchema>;
export const UserQuickEditSchema = zod.object({
name: zod.string().min(1, { message: 'Name is required!' }),
email: zod
.string()
.min(1, { message: 'Email is required!' })
.email({ message: 'Email must be a valid email address!' }),
phoneNumber: schemaHelper.phoneNumber({ isValid: isValidPhoneNumber }),
country: schemaHelper.nullableInput(zod.string().min(1, { message: 'Country is required!' }), {
// message for null value
message: 'Country is required!',
}),
state: zod.string().min(1, { message: 'State is required!' }),
city: zod.string().min(1, { message: 'City is required!' }),
address: zod.string().min(1, { message: 'Address is required!' }),
zipCode: zod.string().min(1, { message: 'Zip code is required!' }),
company: zod.string().min(1, { message: 'Company is required!' }),
role: zod.string().min(1, { message: 'Role is required!' }),
// Not required
status: zod.string(),
});
// ----------------------------------------------------------------------
type Props = {
open: boolean;
onClose: () => void;
currentUser?: IUserItem;
};
export function UserQuickEditForm({ currentUser, open, onClose }: Props) {
const { t } = useTranslate();
const defaultValues: UserQuickEditSchemaType = {
name: '',
email: '',
phoneNumber: '',
address: '',
country: '',
state: '',
city: '',
zipCode: '',
status: '',
company: '',
role: '',
};
const methods = useForm<UserQuickEditSchemaType>({
mode: 'all',
resolver: zodResolver(UserQuickEditSchema),
defaultValues,
values: currentUser,
});
const {
reset,
handleSubmit,
formState: { isSubmitting },
} = methods;
const onSubmit = handleSubmit(async (data) => {
const promise = new Promise((resolve) => setTimeout(resolve, 1000));
try {
reset();
onClose();
toast.promise(promise, {
loading: 'Loading...',
success: 'Update success!',
error: 'Update error!',
});
await promise;
console.info('DATA', data);
} catch (error) {
console.error(error);
}
});
return (
<Dialog
fullWidth
maxWidth={false}
open={open}
onClose={onClose}
slotProps={{
paper: {
sx: { maxWidth: 720 },
},
}}
>
<DialogTitle>{t('Quick update')}</DialogTitle>
<Form methods={methods} onSubmit={onSubmit}>
<DialogContent>
<Alert variant="outlined" severity="info" sx={{ mb: 3 }}>
Account is waiting for confirmation
</Alert>
<Box
sx={{
rowGap: 3,
columnGap: 2,
display: 'grid',
gridTemplateColumns: { xs: 'repeat(1, 1fr)', sm: 'repeat(2, 1fr)' },
}}
>
<Field.Select name="status" label="Status">
{USER_STATUS_OPTIONS.map((status) => (
<MenuItem key={status.value} value={status.value}>
{status.label}
</MenuItem>
))}
</Field.Select>
<Box sx={{ display: { xs: 'none', sm: 'block' } }} />
<Field.Text name="name" label="Full name" />
<Field.Text name="email" label="Email address" />
<Field.Phone name="phoneNumber" label="Phone number" />
<Field.CountrySelect
fullWidth
name="country"
label="Country"
placeholder="Choose a country"
/>
<Field.Text name="state" label="State/region" />
<Field.Text name="city" label="City" />
<Field.Text name="address" label="Address" />
<Field.Text name="zipCode" label="Zip/code" />
<Field.Text name="company" label="Company" />
<Field.Text name="role" label="Role" />
</Box>
</DialogContent>
<DialogActions>
<Button variant="outlined" onClick={onClose}>
Cancel
</Button>
<Button type="submit" variant="contained" loading={isSubmitting}>
Update
</Button>
</DialogActions>
</Form>
</Dialog>
);
}

65
03_source/frontend/src/sections/party-user/party-user-table-filters-result.tsx Normal file
View File

@@ -0,0 +1,65 @@
import Chip from '@mui/material/Chip';
import type { UseSetStateReturn } from 'minimal-shared/hooks';
import { useCallback } from 'react';
import type { FiltersResultProps } from 'src/components/filters-result';
import { chipProps, FiltersBlock, FiltersResult } from 'src/components/filters-result';
import type { IPartyUserTableFilters } from 'src/types/party-user';
// ----------------------------------------------------------------------
type Props = FiltersResultProps & {
onResetPage: () => void;
filters: UseSetStateReturn<IPartyUserTableFilters>;
};
export function UserTableFiltersResult({ filters, onResetPage, totalResults, sx }: Props) {
const { state: currentFilters, setState: updateFilters, resetState: resetFilters } = filters;
const handleRemoveKeyword = useCallback(() => {
onResetPage();
updateFilters({ name: '' });
}, [onResetPage, updateFilters]);
const handleRemoveStatus = useCallback(() => {
onResetPage();
updateFilters({ status: 'all' });
}, [onResetPage, updateFilters]);
const handleRemoveRole = useCallback(
(inputValue: string) => {
const newValue = currentFilters.role.filter((item) => item !== inputValue);
onResetPage();
updateFilters({ role: newValue });
},
[onResetPage, updateFilters, currentFilters.role]
);
const handleReset = useCallback(() => {
onResetPage();
resetFilters();
}, [onResetPage, resetFilters]);
return (
<FiltersResult totalResults={totalResults} onReset={handleReset} sx={sx}>
<FiltersBlock label="Status:" isShow={currentFilters.status !== 'all'}>
<Chip
{...chipProps}
label={currentFilters.status}
onDelete={handleRemoveStatus}
sx={{ textTransform: 'capitalize' }}
/>
</FiltersBlock>
<FiltersBlock label="Role:" isShow={!!currentFilters.role.length}>
{currentFilters.role.map((item) => (
<Chip {...chipProps} key={item} label={item} onDelete={() => handleRemoveRole(item)} />
))}
</FiltersBlock>
<FiltersBlock label="Keyword:" isShow={!!currentFilters.name}>
<Chip {...chipProps} label={currentFilters.name} onDelete={handleRemoveKeyword} />
</FiltersBlock>
</FiltersResult>
);
}

183
03_source/frontend/src/sections/party-user/party-user-table-row.tsx Normal file
View File

@@ -0,0 +1,183 @@
import Avatar from '@mui/material/Avatar';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Checkbox from '@mui/material/Checkbox';
import IconButton from '@mui/material/IconButton';
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 { useState } from 'react';
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 { IPartyUserItem } from 'src/types/party-user';
import { UserQuickEditForm } from './party-user-quick-edit-form';
// ----------------------------------------------------------------------
type Props = {
row: IPartyUserItem;
selected: boolean;
editHref: string;
onSelectRow: () => void;
onDeleteRow: () => void;
};
export function UserTableRow({ row, selected, editHref, onSelectRow, onDeleteRow }: Props) {
const menuActions = usePopover();
const confirmDialog = useBoolean();
const quickEditForm = useBoolean();
const { t } = useTranslation();
const renderQuickEditForm = () => (
<UserQuickEditForm
currentUser={row}
open={quickEditForm.value}
onClose={quickEditForm.onFalse}
/>
);
const renderMenuActions = () => (
<CustomPopover
open={menuActions.open}
anchorEl={menuActions.anchorEl}
onClose={menuActions.onClose}
slotProps={{ arrow: { placement: 'right-top' } }}
>
<MenuList>
<li>
<MenuItem component={RouterLink} href={editHref} onClick={() => menuActions.onClose()}>
<Iconify icon="solar:pen-bold" />
{t('Edit')}
</MenuItem>
</li>
<MenuItem
onClick={() => {
confirmDialog.onTrue();
menuActions.onClose();
}}
sx={{ color: 'error.main' }}
>
<Iconify icon="solar:trash-bin-trash-bold" />
{t('Delete')}
</MenuItem>
</MenuList>
</CustomPopover>
);
const [disableDeleteButton, setDisableDeleteButton] = useState<boolean>(false);
const renderConfirmDialog = () => (
<ConfirmDialog
open={confirmDialog.value}
onClose={confirmDialog.onFalse}
title={t('Delete')}
content={t('Are you sure want to delete user?')}
action={
<Button
disabled={disableDeleteButton}
loading={disableDeleteButton}
variant="contained"
color="error"
onClick={() => {
setDisableDeleteButton(true);
onDeleteRow();
}}
>
{t('Delete')}
</Button>
}
/>
);
return (
<>
<TableRow hover selected={selected} aria-checked={selected} tabIndex={-1}>
<TableCell padding="checkbox">
<Checkbox
checked={selected}
onClick={onSelectRow}
slotProps={{
input: {
id: `${row.id}-checkbox`,
'aria-label': `${row.id} checkbox`,
},
}}
/>
</TableCell>
<TableCell>
<Box sx={{ gap: 2, display: 'flex', alignItems: 'center' }}>
<Avatar alt={row.name} src={row.avatarUrl} />
<Stack sx={{ typography: 'body2', flex: '1 1 auto', alignItems: 'flex-start' }}>
<Link
component={RouterLink}
href={editHref}
color="inherit"
sx={{ cursor: 'pointer' }}
>
{row.name}
</Link>
<Box component="span" sx={{ color: 'text.disabled' }}>
{row.email}
</Box>
</Stack>
</Box>
</TableCell>
<TableCell sx={{ whiteSpace: 'nowrap' }}>{row.phoneNumber}</TableCell>
<TableCell sx={{ whiteSpace: 'nowrap' }}>{row.company}</TableCell>
<TableCell sx={{ whiteSpace: 'nowrap' }}>{row.role}</TableCell>
<TableCell>
<Label
variant="soft"
color={
(row.status === 'active' && 'success') ||
(row.status === 'pending' && 'warning') ||
(row.status === 'banned' && 'error') ||
'default'
}
>
{row.status}
</Label>
</TableCell>
<TableCell>
<Box sx={{ display: 'flex', alignItems: 'center' }}>
<Tooltip title={t('Quick Edit')} placement="top" arrow>
<IconButton
color={quickEditForm.value ? 'inherit' : 'default'}
onClick={quickEditForm.onTrue}
>
<Iconify icon="solar:pen-bold" />
</IconButton>
</Tooltip>
<IconButton
color={menuActions.open ? 'inherit' : 'default'}
onClick={menuActions.onOpen}
>
<Iconify icon="eva:more-vertical-fill" />
</IconButton>
</Box>
</TableCell>
</TableRow>
{renderQuickEditForm()}
{renderMenuActions()}
{renderConfirmDialog()}
</>
);
}

150
03_source/frontend/src/sections/party-user/party-user-table-toolbar.tsx Normal file
View File

@@ -0,0 +1,150 @@
import Box from '@mui/material/Box';
import Checkbox from '@mui/material/Checkbox';
import FormControl from '@mui/material/FormControl';
import IconButton from '@mui/material/IconButton';
import InputAdornment from '@mui/material/InputAdornment';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import MenuList from '@mui/material/MenuList';
import OutlinedInput from '@mui/material/OutlinedInput';
import type { SelectChangeEvent } from '@mui/material/Select';
import Select from '@mui/material/Select';
import TextField from '@mui/material/TextField';
import type { UseSetStateReturn } from 'minimal-shared/hooks';
import { usePopover } from 'minimal-shared/hooks';
import { useCallback } from 'react';
import { CustomPopover } from 'src/components/custom-popover';
import { Iconify } from 'src/components/iconify';
import type { IPartyUserTableFilters } from 'src/types/party-user';
// ----------------------------------------------------------------------
type Props = {
onResetPage: () => void;
filters: UseSetStateReturn<IPartyUserTableFilters>;
options: {
roles: string[];
};
};
export function UserTableToolbar({ filters, options, onResetPage }: Props) {
const menuActions = usePopover();
const { state: currentFilters, setState: updateFilters } = filters;
const handleFilterName = useCallback(
(event: React.ChangeEvent<HTMLInputElement>) => {
onResetPage();
updateFilters({ name: event.target.value });
},
[onResetPage, updateFilters]
);
const handleFilterRole = useCallback(
(event: SelectChangeEvent<string[]>) => {
const newValue =
typeof event.target.value === 'string' ? event.target.value.split(',') : event.target.value;
onResetPage();
updateFilters({ role: newValue });
},
[onResetPage, updateFilters]
);
const renderMenuActions = () => (
<CustomPopover
open={menuActions.open}
anchorEl={menuActions.anchorEl}
onClose={menuActions.onClose}
slotProps={{ arrow: { placement: 'right-top' } }}
>
<MenuList>
<MenuItem onClick={() => menuActions.onClose()}>
<Iconify icon="solar:printer-minimalistic-bold" />
Print
</MenuItem>
<MenuItem onClick={() => menuActions.onClose()}>
<Iconify icon="solar:import-bold" />
Import
</MenuItem>
<MenuItem onClick={() => menuActions.onClose()}>
<Iconify icon="solar:export-bold" />
Export
</MenuItem>
</MenuList>
</CustomPopover>
);
return (
<>
<Box
sx={{
p: 2.5,
gap: 2,
display: 'flex',
pr: { xs: 2.5, md: 1 },
flexDirection: { xs: 'column', md: 'row' },
alignItems: { xs: 'flex-end', md: 'center' },
}}
>
<FormControl sx={{ flexShrink: 0, width: { xs: 1, md: 200 } }}>
<InputLabel htmlFor="filter-role-select">Role</InputLabel>
<Select
multiple
value={currentFilters.role}
onChange={handleFilterRole}
input={<OutlinedInput label="Role" />}
renderValue={(selected) => selected.map((value) => value).join(', ')}
inputProps={{ id: 'filter-role-select' }}
MenuProps={{ PaperProps: { sx: { maxHeight: 240 } } }}
>
{options.roles.map((option) => (
<MenuItem key={option} value={option}>
<Checkbox
disableRipple
size="small"
checked={currentFilters.role.includes(option)}
/>
{option}
</MenuItem>
))}
</Select>
</FormControl>
<Box
sx={{
gap: 2,
width: 1,
flexGrow: 1,
display: 'flex',
alignItems: 'center',
}}
>
<TextField
fullWidth
value={currentFilters.name}
onChange={handleFilterName}
placeholder="Search..."
slotProps={{
input: {
startAdornment: (
<InputAdornment position="start">
<Iconify icon="eva:search-fill" sx={{ color: 'text.disabled' }} />
</InputAdornment>
),
},
}}
/>
<IconButton onClick={menuActions.onOpen}>
<Iconify icon="eva:more-vertical-fill" />
</IconButton>
</Box>
</Box>
{renderMenuActions()}
</>
);
}

75
03_source/frontend/src/sections/party-user/profile-cover.tsx Normal file
View File

@@ -0,0 +1,75 @@
import Avatar from '@mui/material/Avatar';
import type { BoxProps } from '@mui/material/Box';
import Box from '@mui/material/Box';
import ListItemText from '@mui/material/ListItemText';
import { varAlpha } from 'minimal-shared/utils';
import type { IPartyUserProfileCover } from 'src/types/party-user';
// ----------------------------------------------------------------------
export function ProfileCover({
sx,
name,
role,
coverUrl,
avatarUrl,
...other
}: BoxProps & IPartyUserProfileCover) {
return (
<Box
sx={[
(theme) => ({
...theme.mixins.bgGradient({
images: [
`linear-gradient(0deg, ${varAlpha(theme.vars.palette.primary.darkerChannel, 0.8)}, ${varAlpha(theme.vars.palette.primary.darkerChannel, 0.8)})`,
`url(${coverUrl})`,
],
}),
height: 1,
color: 'common.white',
}),
...(Array.isArray(sx) ? sx : [sx]),
]}
{...other}
>
<Box
sx={{
display: 'flex',
left: { md: 24 },
bottom: { md: 24 },
zIndex: { md: 10 },
pt: { xs: 6, md: 0 },
position: { md: 'absolute' },
flexDirection: { xs: 'column', md: 'row' },
}}
>
<Avatar
alt={name}
src={avatarUrl}
sx={[
(theme) => ({
mx: 'auto',
width: { xs: 64, md: 128 },
height: { xs: 64, md: 128 },
border: `solid 2px ${theme.vars.palette.common.white}`,
}),
]}
>
{name?.charAt(0).toUpperCase()}
</Avatar>
<ListItemText
primary={name}
secondary={role}
slotProps={{
primary: { sx: { typography: 'h4' } },
secondary: {
sx: { mt: 0.5, opacity: 0.48, color: 'inherit' },
},
}}
sx={{ mt: 3, ml: { md: 3 }, textAlign: { xs: 'center', md: 'unset' } }}
/>
</Box>
</Box>
);
}

123
03_source/frontend/src/sections/party-user/profile-followers.tsx Normal file
View File

@@ -0,0 +1,123 @@
import Avatar from '@mui/material/Avatar';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import type { CardProps } from '@mui/material/Card';
import Card from '@mui/material/Card';
import ListItemText from '@mui/material/ListItemText';
import Typography from '@mui/material/Typography';
import { useCallback, useState } from 'react';
import { Iconify } from 'src/components/iconify';
import type { IPartyUserProfileFollower } from 'src/types/party-user';
// ----------------------------------------------------------------------
type Props = {
followers: IPartyUserProfileFollower[];
};
export function ProfileFollowers({ followers }: Props) {
const _mockFollowed = followers.slice(4, 8).map((i) => i.id);
const [followed, setFollowed] = useState<string[]>(_mockFollowed);
const handleClick = useCallback(
(item: string) => {
const selected = followed.includes(item)
? followed.filter((value) => value !== item)
: [...followed, item];
setFollowed(selected);
},
[followed]
);
return (
<>
<Typography variant="h4" sx={{ my: 5 }}>
Followers
</Typography>
<Box
sx={{
gap: 3,
display: 'grid',
gridTemplateColumns: { xs: 'repeat(1, 1fr)', sm: 'repeat(2, 1fr)', md: 'repeat(3, 1fr)' },
}}
>
{followers.map((follower) => (
<CardItem
key={follower.id}
follower={follower}
selected={followed.includes(follower.id)}
onSelected={() => handleClick(follower.id)}
/>
))}
</Box>
</>
);
}
// ----------------------------------------------------------------------
type CardItemProps = CardProps & {
selected: boolean;
onSelected: () => void;
follower: IPartyUserProfileFollower;
};
function CardItem({ follower, selected, onSelected, sx, ...other }: CardItemProps) {
return (
<Card
sx={[
(theme) => ({
display: 'flex',
alignItems: 'center',
p: theme.spacing(3, 2, 3, 3),
}),
...(Array.isArray(sx) ? sx : [sx]),
]}
{...other}
>
<Avatar
alt={follower?.name}
src={follower?.avatarUrl}
sx={{ width: 48, height: 48, mr: 2 }}
/>
<ListItemText
primary={follower?.name}
secondary={
<>
<Iconify icon="mingcute:location-fill" width={16} sx={{ flexShrink: 0, mr: 0.5 }} />
{follower?.country}
</>
}
slotProps={{
primary: { noWrap: true },
secondary: {
noWrap: true,
sx: {
mt: 0.5,
display: 'flex',
alignItems: 'center',
typography: 'caption',
color: 'text.disabled',
},
},
}}
/>
<Button
size="small"
variant={selected ? 'text' : 'outlined'}
color={selected ? 'success' : 'inherit'}
startIcon={
selected ? <Iconify width={18} icon="eva:checkmark-fill" sx={{ mr: -0.75 }} /> : null
}
onClick={onSelected}
sx={{ flexShrink: 0, ml: 1.5 }}
>
{selected ? 'Followed' : 'Follow'}
</Button>
</Card>
);
}

183
03_source/frontend/src/sections/party-user/profile-friends.tsx Normal file
View File

@@ -0,0 +1,183 @@
import Avatar from '@mui/material/Avatar';
import Box from '@mui/material/Box';
import Card from '@mui/material/Card';
import IconButton from '@mui/material/IconButton';
import InputAdornment from '@mui/material/InputAdornment';
import Link from '@mui/material/Link';
import MenuItem from '@mui/material/MenuItem';
import MenuList from '@mui/material/MenuList';
import TextField from '@mui/material/TextField';
import Typography from '@mui/material/Typography';
import { usePopover } from 'minimal-shared/hooks';
import { _socials } from 'src/_mock';
import { CustomPopover } from 'src/components/custom-popover';
import { Iconify } from 'src/components/iconify';
import { SearchNotFound } from 'src/components/search-not-found';
import type { IPartyUserProfileFriend } from 'src/types/party-user';
// ----------------------------------------------------------------------
type Props = {
searchFriends: string;
friends: IPartyUserProfileFriend[];
onSearchFriends: (event: React.ChangeEvent<HTMLInputElement>) => void;
};
export function ProfileFriends({ friends, searchFriends, onSearchFriends }: Props) {
const dataFiltered = applyFilter({ inputData: friends, query: searchFriends });
const notFound = !dataFiltered.length && !!searchFriends;
return (
<>
<Box
sx={{
my: 5,
gap: 2,
display: 'flex',
justifyContent: 'space-between',
flexDirection: { xs: 'column', sm: 'row' },
}}
>
<Typography variant="h4">Friends</Typography>
<TextField
value={searchFriends}
onChange={onSearchFriends}
placeholder="Search friends..."
slotProps={{
input: {
startAdornment: (
<InputAdornment position="start">
<Iconify icon="eva:search-fill" sx={{ color: 'text.disabled' }} />
</InputAdornment>
),
},
}}
sx={{ width: { xs: 1, sm: 260 } }}
/>
</Box>
{notFound ? (
<SearchNotFound query={searchFriends} sx={{ py: 10 }} />
) : (
<Box
sx={{
gap: 3,
display: 'grid',
gridTemplateColumns: {
xs: 'repeat(1, 1fr)',
sm: 'repeat(2, 1fr)',
md: 'repeat(3, 1fr)',
},
}}
>
{dataFiltered.map((item) => (
<FriendCard key={item.id} item={item} />
))}
</Box>
)}
</>
);
}
// ----------------------------------------------------------------------
type FriendCardProps = {
item: IPartyUserProfileFriend;
};
function FriendCard({ item }: FriendCardProps) {
const menuActions = usePopover();
const handleDelete = () => {
menuActions.onClose();
console.info('DELETE', item.name);
};
const handleEdit = () => {
menuActions.onClose();
console.info('EDIT', item.name);
};
const renderMenuActions = () => (
<CustomPopover
open={menuActions.open}
anchorEl={menuActions.anchorEl}
onClose={menuActions.onClose}
slotProps={{ arrow: { placement: 'right-top' } }}
>
<MenuList>
<MenuItem onClick={handleDelete} sx={{ color: 'error.main' }}>
<Iconify icon="solar:trash-bin-trash-bold" />
Delete
</MenuItem>
<MenuItem onClick={handleEdit}>
<Iconify icon="solar:pen-bold" />
Edit
</MenuItem>
</MenuList>
</CustomPopover>
);
return (
<>
<Card
sx={{
py: 5,
display: 'flex',
position: 'relative',
alignItems: 'center',
flexDirection: 'column',
}}
>
<Avatar alt={item.name} src={item.avatarUrl} sx={{ width: 64, height: 64, mb: 3 }} />
<Link variant="subtitle1" color="text.primary">
{item.name}
</Link>
<Typography variant="body2" sx={{ color: 'text.secondary', mb: 1, mt: 0.5 }}>
{item.role}
</Typography>
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
{_socials.map((social) => (
<IconButton key={social.label}>
{social.value === 'twitter' && <Iconify icon="socials:twitter" />}
{social.value === 'facebook' && <Iconify icon="socials:facebook" />}
{social.value === 'instagram' && <Iconify icon="socials:instagram" />}
{social.value === 'linkedin' && <Iconify icon="socials:linkedin" />}
</IconButton>
))}
</Box>
<IconButton
color={menuActions.open ? 'inherit' : 'default'}
onClick={menuActions.onOpen}
sx={{ top: 8, right: 8, position: 'absolute' }}
>
<Iconify icon="eva:more-vertical-fill" />
</IconButton>
</Card>
{renderMenuActions()}
</>
);
}
// ----------------------------------------------------------------------
type ApplyFilterProps = {
query: string;
inputData: IPartyUserProfileFriend[];
};
function applyFilter({ inputData, query }: ApplyFilterProps) {
if (!query) return inputData;
return inputData.filter(({ name, role }) =>
[name, role].some((field) => field?.toLowerCase().includes(query.toLowerCase()))
);
}

89
03_source/frontend/src/sections/party-user/profile-gallery.tsx Normal file
View File

@@ -0,0 +1,89 @@
import Box from '@mui/material/Box';
import Card from '@mui/material/Card';
import IconButton from '@mui/material/IconButton';
import ListItemText from '@mui/material/ListItemText';
import Typography from '@mui/material/Typography';
import { Iconify } from 'src/components/iconify';
import { Image } from 'src/components/image';
import { Lightbox, useLightBox } from 'src/components/lightbox';
import type { IPartyUserProfileGallery } from 'src/types/party-user';
import { fDate } from 'src/utils/format-time';
// ----------------------------------------------------------------------
type Props = {
gallery: IPartyUserProfileGallery[];
};
export function ProfileGallery({ gallery }: Props) {
const slides = gallery.map((slide) => ({ src: slide.imageUrl }));
const lightbox = useLightBox(slides);
return (
<>
<Typography variant="h4" sx={{ my: 5 }}>
Gallery
</Typography>
<Box
sx={{
gap: 3,
display: 'grid',
gridTemplateColumns: { xs: 'repeat(1, 1fr)', sm: 'repeat(2, 1fr)', md: 'repeat(3, 1fr)' },
}}
>
{gallery.map((image) => (
<Card key={image.id} sx={{ cursor: 'pointer', color: 'common.white' }}>
<IconButton
color="inherit"
sx={{
top: 8,
right: 8,
zIndex: 9,
position: 'absolute',
}}
>
<Iconify icon="eva:more-vertical-fill" />
</IconButton>
<ListItemText
sx={{ p: 3, left: 0, width: 1, bottom: 0, zIndex: 9, position: 'absolute' }}
primary={image.title}
secondary={fDate(image.postedAt)}
slotProps={{
primary: {
noWrap: true,
sx: { typography: 'subtitle1' },
},
secondary: {
sx: { mt: 0.5, opacity: 0.48, color: 'inherit' },
},
}}
/>
<Image
alt="Gallery"
ratio="1/1"
src={image.imageUrl}
onClick={() => lightbox.onOpen(image.imageUrl)}
slotProps={{
overlay: {
sx: (theme) => ({
backgroundImage: `linear-gradient(to bottom, transparent 0%, ${theme.vars.palette.common.black} 75%)`,
}),
},
}}
/>
</Card>
))}
</Box>
<Lightbox
index={lightbox.selected}
slides={slides}
open={lightbox.open}
close={lightbox.onClose}
/>
</>
);
}

208
03_source/frontend/src/sections/party-user/profile-home.tsx Normal file
View File

@@ -0,0 +1,208 @@
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Card from '@mui/material/Card';
import CardHeader from '@mui/material/CardHeader';
import Divider from '@mui/material/Divider';
import Fab from '@mui/material/Fab';
import Grid from '@mui/material/Grid';
import InputBase from '@mui/material/InputBase';
import Link from '@mui/material/Link';
import Stack from '@mui/material/Stack';
import { varAlpha } from 'minimal-shared/utils';
import { useRef } from 'react';
import { useTranslation } from 'react-i18next';
import { _socials } from 'src/_mock';
import { Iconify } from 'src/components/iconify';
import type { IPartyUserProfile, IPartyUserProfilePost } from 'src/types/party-user';
import { fNumber } from 'src/utils/format-number';
import { ProfilePostItem } from './profile-post-item';
// ----------------------------------------------------------------------
type Props = {
info: IPartyUserProfile;
posts: IPartyUserProfilePost[];
};
export function ProfileHome({ info, posts }: Props) {
const fileRef = useRef<HTMLInputElement>(null);
const { t } = useTranslation();
const handleAttach = () => {
if (fileRef.current) {
fileRef.current.click();
}
};
const renderFollows = () => (
<Card sx={{ py: 3, textAlign: 'center', typography: 'h4' }}>
<Stack
divider={<Divider orientation="vertical" flexItem sx={{ borderStyle: 'dashed' }} />}
sx={{ flexDirection: 'row' }}
>
<Stack sx={{ width: 1 }}>
{fNumber(info.totalFollowers)}
<Box component="span" sx={{ color: 'text.secondary', typography: 'body2' }}>
{t('Follower')}
</Box>
</Stack>
<Stack sx={{ width: 1 }}>
{fNumber(info.totalFollowing)}
<Box component="span" sx={{ color: 'text.secondary', typography: 'body2' }}>
{t('Following')}
</Box>
</Stack>
</Stack>
</Card>
);
const renderAbout = () => (
<Card>
<CardHeader title={t('About')} />
<Box
sx={{
p: 3,
gap: 2,
display: 'flex',
typography: 'body2',
flexDirection: 'column',
}}
>
<div>{info.quote}</div>
<Box sx={{ gap: 2, display: 'flex', lineHeight: '24px' }}>
<Iconify width={24} icon="mingcute:location-fill" />
<span>
Live at
<Link variant="subtitle2" color="inherit">
&nbsp;{info.country}
</Link>
</span>
</Box>
<Box sx={{ gap: 2, display: 'flex', lineHeight: '24px' }}>
<Iconify width={24} icon="solar:letter-bold" />
{info.email}
</Box>
<Box sx={{ gap: 2, display: 'flex', lineHeight: '24px' }}>
<Iconify width={24} icon="solar:case-minimalistic-bold" />
<span>
{info.role} at
<Link variant="subtitle2" color="inherit">
&nbsp;{info.company}
</Link>
</span>
</Box>
<Box sx={{ gap: 2, display: 'flex', lineHeight: '24px' }}>
<Iconify width={24} icon="solar:case-minimalistic-bold" />
<span>
Studied at
<Link variant="subtitle2" color="inherit">
&nbsp;{info.school}
</Link>
</span>
</Box>
</Box>
</Card>
);
const renderPostInput = () => (
<Card sx={{ p: 3 }}>
<InputBase
multiline
fullWidth
rows={4}
placeholder="Share what you are thinking here..."
inputProps={{ id: 'post-input' }}
sx={[
(theme) => ({
p: 2,
mb: 3,
borderRadius: 1,
border: `solid 1px ${varAlpha(theme.vars.palette.grey['500Channel'], 0.2)}`,
}),
]}
/>
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
<Box
sx={{
gap: 1,
display: 'flex',
alignItems: 'center',
color: 'text.secondary',
}}
>
<Fab size="small" color="inherit" variant="softExtended" onClick={handleAttach}>
<Iconify icon="solar:gallery-wide-bold" width={24} sx={{ color: 'success.main' }} />
{t('Image/Video')}
</Fab>
<Fab size="small" color="inherit" variant="softExtended">
<Iconify icon="solar:videocamera-record-bold" width={24} sx={{ color: 'error.main' }} />
{t('Streaming')}
</Fab>
</Box>
<Button variant="contained">{t('Post')}</Button>
</Box>
<input ref={fileRef} type="file" style={{ display: 'none' }} />
</Card>
);
const renderSocials = () => (
<Card>
<CardHeader title={t('Social')} />
<Box sx={{ p: 3, gap: 2, display: 'flex', flexDirection: 'column', typography: 'body2' }}>
{_socials.map((social) => (
<Box
key={social.label}
sx={{
gap: 2,
display: 'flex',
lineHeight: '20px',
wordBreak: 'break-all',
alignItems: 'flex-start',
}}
>
{social.value === 'twitter' && <Iconify icon="socials:twitter" />}
{social.value === 'facebook' && <Iconify icon="socials:facebook" />}
{social.value === 'instagram' && <Iconify icon="socials:instagram" />}
{social.value === 'linkedin' && <Iconify icon="socials:linkedin" />}
<Link color="inherit">
{social.value === 'facebook' && info.socialLinks.facebook}
{social.value === 'instagram' && info.socialLinks.instagram}
{social.value === 'linkedin' && info.socialLinks.linkedin}
{social.value === 'twitter' && info.socialLinks.twitter}
</Link>
</Box>
))}
</Box>
</Card>
);
return (
<Grid container spacing={3}>
<Grid size={{ xs: 12, md: 4 }} sx={{ gap: 3, display: 'flex', flexDirection: 'column' }}>
{renderFollows()}
{renderAbout()}
{renderSocials()}
</Grid>
<Grid size={{ xs: 12, md: 8 }} sx={{ gap: 3, display: 'flex', flexDirection: 'column' }}>
{renderPostInput()}
{posts.map((post) => (
<ProfilePostItem key={post.id} post={post} />
))}
</Grid>
</Grid>
);
}

221
03_source/frontend/src/sections/party-user/profile-post-item.tsx Normal file
View File

@@ -0,0 +1,221 @@
import Avatar from '@mui/material/Avatar';
import AvatarGroup, { avatarGroupClasses } from '@mui/material/AvatarGroup';
import Box from '@mui/material/Box';
import Card from '@mui/material/Card';
import CardHeader from '@mui/material/CardHeader';
import Checkbox from '@mui/material/Checkbox';
import FormControlLabel from '@mui/material/FormControlLabel';
import IconButton from '@mui/material/IconButton';
import InputAdornment from '@mui/material/InputAdornment';
import InputBase from '@mui/material/InputBase';
import Link from '@mui/material/Link';
import Paper from '@mui/material/Paper';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import { varAlpha } from 'minimal-shared/utils';
import { useCallback, useRef, useState } from 'react';
import { useMockedUser } from 'src/auth/hooks';
import { Iconify } from 'src/components/iconify';
import { Image } from 'src/components/image';
import type { IPartyUserProfilePost } from 'src/types/party-user';
import { fShortenNumber } from 'src/utils/format-number';
import { fDate } from 'src/utils/format-time';
// ----------------------------------------------------------------------
type Props = {
post: IPartyUserProfilePost;
};
export function ProfilePostItem({ post }: Props) {
const { user } = useMockedUser();
const commentRef = useRef<HTMLInputElement>(null);
const fileRef = useRef<HTMLInputElement>(null);
const [message, setMessage] = useState('');
const handleChangeMessage = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
setMessage(event.target.value);
}, []);
const handleAttach = useCallback(() => {
if (fileRef.current) {
fileRef.current.click();
}
}, []);
const handleClickComment = useCallback(() => {
if (commentRef.current) {
commentRef.current.focus();
}
}, []);
const renderHead = () => (
<CardHeader
disableTypography
avatar={
<Avatar src={user?.photoURL} alt={user?.displayName}>
{user?.displayName?.charAt(0).toUpperCase()}
</Avatar>
}
title={
<Link color="inherit" variant="subtitle1">
{user?.displayName}
</Link>
}
subheader={
<Box sx={{ color: 'text.disabled', typography: 'caption', mt: 0.5 }}>
{fDate(post.createdAt)}
</Box>
}
action={
<IconButton>
<Iconify icon="eva:more-vertical-fill" />
</IconButton>
}
/>
);
const renderCommentList = () => (
<Stack spacing={1.5} sx={{ px: 3, pb: 2 }}>
{post.comments.map((comment) => (
<Box key={comment.id} sx={{ gap: 2, display: 'flex' }}>
<Avatar alt={comment.author.name} src={comment.author.avatarUrl} />
<Paper sx={{ p: 1.5, flexGrow: 1, bgcolor: 'background.neutral' }}>
<Box
sx={{
mb: 0.5,
display: 'flex',
alignItems: { sm: 'center' },
justifyContent: 'space-between',
flexDirection: { xs: 'column', sm: 'row' },
}}
>
<Box sx={{ typography: 'subtitle2' }}>{comment.author.name}</Box>
<Box sx={{ typography: 'caption', color: 'text.disabled' }}>
{fDate(comment.createdAt)}
</Box>
</Box>
<Box sx={{ typography: 'body2', color: 'text.secondary' }}>{comment.message}</Box>
</Paper>
</Box>
))}
</Stack>
);
const renderInput = () => (
<Box
sx={[
(theme) => ({
gap: 2,
display: 'flex',
alignItems: 'center',
p: theme.spacing(0, 3, 3, 3),
}),
]}
>
<Avatar src={user?.photoURL} alt={user?.displayName}>
{user?.displayName?.charAt(0).toUpperCase()}
</Avatar>
<InputBase
fullWidth
value={message}
inputRef={commentRef}
placeholder="Write a comment…"
onChange={handleChangeMessage}
endAdornment={
<InputAdornment position="end" sx={{ mr: 1 }}>
<IconButton size="small" onClick={handleAttach}>
<Iconify icon="solar:gallery-add-bold" />
</IconButton>
<IconButton size="small">
<Iconify icon="eva:smiling-face-fill" />
</IconButton>
</InputAdornment>
}
inputProps={{
id: `comment-${post.id}-input`,
'aria-label': `Comment ${post.id} input`,
}}
sx={[
(theme) => ({
pl: 1.5,
height: 40,
borderRadius: 1,
border: `solid 1px ${varAlpha(theme.vars.palette.grey['500Channel'], 0.32)}`,
}),
]}
/>
<input type="file" ref={fileRef} style={{ display: 'none' }} />
</Box>
);
const renderActions = () => (
<Box
sx={[(theme) => ({ display: 'flex', alignItems: 'center', p: theme.spacing(2, 3, 3, 3) })]}
>
<FormControlLabel
control={
<Checkbox
defaultChecked
color="error"
icon={<Iconify icon="solar:heart-bold" />}
checkedIcon={<Iconify icon="solar:heart-bold" />}
slotProps={{
input: {
id: `favorite-${post.id}-checkbox`,
'aria-label': `Favorite ${post.id} checkbox`,
},
}}
/>
}
label={fShortenNumber(post.personLikes.length)}
sx={{ mr: 1 }}
/>
{!!post.personLikes.length && (
<AvatarGroup sx={{ [`& .${avatarGroupClasses.avatar}`]: { width: 32, height: 32 } }}>
{post.personLikes.map((person) => (
<Avatar key={person.name} alt={person.name} src={person.avatarUrl} />
))}
</AvatarGroup>
)}
<Box sx={{ flexGrow: 1 }} />
<IconButton onClick={handleClickComment}>
<Iconify icon="solar:chat-round-dots-bold" />
</IconButton>
<IconButton>
<Iconify icon="solar:share-bold" />
</IconButton>
</Box>
);
return (
<Card>
{renderHead()}
<Typography variant="body2" sx={[(theme) => ({ p: theme.spacing(3, 3, 2, 3) })]}>
{post.message}
</Typography>
<Box sx={{ p: 1 }}>
<Image alt={post.media} src={post.media} ratio="16/9" sx={{ borderRadius: 1.5 }} />
</Box>
{renderActions()}
{!!post.comments.length && renderCommentList()}
{renderInput()}
</Card>
);
}

9
03_source/frontend/src/sections/party-user/view/index.ts Normal file
View File

@@ -0,0 +1,9 @@
export * from './party-user-edit-view';
export * from './party-user-list-view';
export * from './party-user-cards-view';
export * from './party-user-create-view';
export * from './party-user-profile-view';

41
03_source/frontend/src/sections/party-user/view/party-user-cards-view.tsx Normal file
View File

@@ -0,0 +1,41 @@
import Button from '@mui/material/Button';
import { useTranslation } from 'react-i18next';
import { _userCards } from 'src/_mock';
import { CustomBreadcrumbs } from 'src/components/custom-breadcrumbs';
import { Iconify } from 'src/components/iconify';
import { DashboardContent } from 'src/layouts/dashboard';
import { RouterLink } from 'src/routes/components';
import { paths } from 'src/routes/paths';
import { UserCardList } from '../party-user-card-list';
// ----------------------------------------------------------------------
export function UserCardsView() {
const { t } = useTranslation();
return (
<DashboardContent>
<CustomBreadcrumbs
heading="User cards"
links={[
//
{ name: t('Dashboard'), href: paths.dashboard.root },
{ name: t('User'), href: paths.dashboard.user.root },
{ name: t('Cards') },
]}
action={
<Button
component={RouterLink}
href={paths.dashboard.user.new}
variant="contained"
startIcon={<Iconify icon="mingcute:add-line" />}
>
{t('New user')}
</Button>
}
sx={{ mb: { xs: 3, md: 5 } }}
/>
<UserCardList users={_userCards} />
</DashboardContent>
);
}

28
03_source/frontend/src/sections/party-user/view/party-user-create-view.tsx Normal file
View File

@@ -0,0 +1,28 @@
import { useTranslation } from 'react-i18next';
import { CustomBreadcrumbs } from 'src/components/custom-breadcrumbs';
import { DashboardContent } from 'src/layouts/dashboard';
import { paths } from 'src/routes/paths';
import { UserNewEditForm } from '../party-user-new-edit-form';
// ----------------------------------------------------------------------
export function UserCreateView() {
const { t } = useTranslation();
return (
<DashboardContent>
<CustomBreadcrumbs
heading={t('Create a new user')}
links={[
//
{ name: t('Dashboard'), href: paths.dashboard.root },
{ name: t('User'), href: paths.dashboard.user.root },
{ name: t('New user') },
]}
sx={{ mb: { xs: 3, md: 5 } }}
/>
<UserNewEditForm />
</DashboardContent>
);
}

33
03_source/frontend/src/sections/party-user/view/party-user-edit-view.tsx Normal file
View File

@@ -0,0 +1,33 @@
import { useTranslation } from 'react-i18next';
import { CustomBreadcrumbs } from 'src/components/custom-breadcrumbs';
import { DashboardContent } from 'src/layouts/dashboard';
import { paths } from 'src/routes/paths';
import type { IPartyUserItem } from 'src/types/party-user';
import { UserNewEditForm } from '../party-user-new-edit-form';
// ----------------------------------------------------------------------
type Props = {
user?: IPartyUserItem;
};
export function PartyUserEditView({ user: currentUser }: Props) {
const { t } = useTranslation();
return (
<DashboardContent>
<CustomBreadcrumbs
heading="Edit"
backHref={paths.dashboard.user.list}
links={[
{ name: t('Dashboard'), href: paths.dashboard.root },
{ name: t('User'), href: paths.dashboard.user.root },
{ name: currentUser?.name },
]}
sx={{ mb: { xs: 3, md: 5 } }}
/>
<UserNewEditForm currentUser={currentUser} />
</DashboardContent>
);
}

353
03_source/frontend/src/sections/party-user/view/party-user-list-view.tsx Normal file
View File

@@ -0,0 +1,353 @@
// src/sections/user/view/user-list-view.tsx
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Card from '@mui/material/Card';
import IconButton from '@mui/material/IconButton';
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, USER_STATUS_OPTIONS } from 'src/_mock';
import { deletePartyUser, useGetPartyUsers } from 'src/actions/party-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 {
emptyRows,
getComparator,
rowInPage,
TableEmptyRows,
TableHeadCustom,
TableNoData,
TablePaginationCustom,
TableSelectedAction,
useTable,
} from 'src/components/table';
import { DashboardContent } from 'src/layouts/dashboard';
import { useRouter } from 'src/routes/hooks';
import { paths } from 'src/routes/paths';
import type { IPartyUserItem, IPartyUserTableFilters } from 'src/types/party-user';
import { UserTableFiltersResult } from '../party-user-table-filters-result';
import { UserTableRow } from '../party-user-table-row';
import { UserTableToolbar } from '../party-user-table-toolbar';
// ----------------------------------------------------------------------
const STATUS_OPTIONS = [{ value: 'all', label: 'All' }, ...USER_STATUS_OPTIONS];
// ----------------------------------------------------------------------
export function PartyUserListView() {
const { t } = useTranslation();
const router = useRouter();
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 { partyUsers } = useGetPartyUsers();
const [processNewUser, setProcessNewUser] = useState<boolean>(false);
const table = useTable();
const confirmDialog = useBoolean();
const [tableData, setTableData] = useState<IPartyUserItem[]>([]);
useEffect(() => {
setTableData(partyUsers);
}, [partyUsers]);
const filters = useSetState<IPartyUserTableFilters>({ name: '', role: [], status: 'all' });
const { state: currentFilters, setState: updateFilters } = filters;
const dataFiltered = applyFilter({
inputData: tableData,
comparator: getComparator(table.order, table.orderBy),
filters: currentFilters,
});
const dataInPage = rowInPage(dataFiltered, table.page, table.rowsPerPage);
const canReset =
!!currentFilters.name || currentFilters.role.length > 0 || currentFilters.status !== 'all';
const notFound = (!dataFiltered.length && canReset) || !dataFiltered.length;
const handleDeleteRow = useCallback(
async (id: string) => {
// const deleteRow = tableData.filter((row) => row.id !== id);
// toast.success('Delete success!');
// setTableData(deleteRow);
try {
await deletePartyUser(id);
toast.success('Delete success!');
table.onUpdatePageDeleteRow(dataInPage.length);
} catch (error) {
console.error(error);
toast.error('Delete failed!');
}
},
[table, tableData]
);
const handleDeleteRows = useCallback(() => {
const deleteRows = tableData.filter((row) => !table.selected.includes(row.id));
toast.success('Delete success!');
setTableData(deleteRows);
table.onUpdatePageDeleteRows(dataInPage.length, dataFiltered.length);
}, [dataFiltered.length, dataInPage.length, table, tableData]);
const handleFilterStatus = useCallback(
(event: React.SyntheticEvent, newValue: string) => {
table.onResetPage();
updateFilters({ status: newValue });
},
[updateFilters, table]
);
const renderConfirmDialog = () => (
<ConfirmDialog
open={confirmDialog.value}
onClose={confirmDialog.onFalse}
title={t('Delete')}
content={
<>
Are you sure want to delete <strong> {table.selected.length} </strong> items?
</>
}
action={
<Button
variant="contained"
color="error"
onClick={() => {
handleDeleteRows();
// confirmDialog.onFalse();
}}
>
{t('Delete')}
</Button>
}
/>
);
return (
<>
<DashboardContent>
<CustomBreadcrumbs
heading="List"
links={[
//
{ name: t('Dashboard'), href: paths.dashboard.root },
{ name: t('PartyUserListView'), href: paths.dashboard.partyUser.root },
{ name: t('List') },
]}
action={
<Button
disabled={processNewUser}
loading={processNewUser}
// component={RouterLink}
// href={paths.dashboard.partyUser.new}
variant="contained"
startIcon={<Iconify icon="mingcute:add-line" />}
onClick={() => {
setProcessNewUser(true);
router.push(paths.dashboard.partyUser.new);
}}
>
{t('New user')}
</Button>
}
sx={{ mb: { xs: 3, md: 5 } }}
/>
<Card>
<Tabs
value={currentFilters.status}
onChange={handleFilterStatus}
sx={[
(theme) => ({
px: 2.5,
boxShadow: `inset 0 -2px 0 0 ${varAlpha(theme.vars.palette.grey['500Channel'], 0.08)}`,
}),
]}
>
{STATUS_OPTIONS.map((tab) => (
<Tab
key={tab.value}
iconPosition="end"
value={tab.value}
label={t(tab.label)}
icon={
<Label
variant={
((tab.value === 'all' || tab.value === currentFilters.status) && 'filled') ||
'soft'
}
color={
(tab.value === 'active' && 'success') ||
(tab.value === 'pending' && 'warning') ||
(tab.value === 'banned' && 'error') ||
'default'
}
>
{['active', 'pending', 'banned', 'rejected'].includes(tab.value)
? tableData.filter((partyUser) => partyUser.status === tab.value).length
: tableData.length}
</Label>
}
/>
))}
</Tabs>
<UserTableToolbar
filters={filters}
onResetPage={table.onResetPage}
options={{ roles: _roles }}
/>
{canReset && (
<UserTableFiltersResult
filters={filters}
totalResults={dataFiltered.length}
onResetPage={table.onResetPage}
sx={{ p: 2.5, pt: 0 }}
/>
)}
<Box sx={{ position: 'relative' }}>
<TableSelectedAction
dense={table.dense}
numSelected={table.selected.length}
rowCount={dataFiltered.length}
onSelectAllRows={(checked) =>
table.onSelectAllRows(
checked,
dataFiltered.map((row) => row.id)
)
}
action={
<Tooltip title={t('Delete')}>
<IconButton color="primary" onClick={confirmDialog.onTrue}>
<Iconify icon="solar:trash-bin-trash-bold" />
</IconButton>
</Tooltip>
}
/>
<Scrollbar>
<Table size={table.dense ? 'small' : 'medium'} sx={{ minWidth: 960 }}>
<TableHeadCustom
order={table.order}
orderBy={table.orderBy}
headCells={TABLE_HEAD}
rowCount={dataFiltered.length}
numSelected={table.selected.length}
onSort={table.onSort}
onSelectAllRows={(checked) =>
table.onSelectAllRows(
checked,
dataFiltered.map((row) => row.id)
)
}
/>
<TableBody>
{dataFiltered
.slice(
table.page * table.rowsPerPage,
table.page * table.rowsPerPage + table.rowsPerPage
)
.map((row) => (
<UserTableRow
key={row.id}
row={row}
selected={table.selected.includes(row.id)}
onSelectRow={() => table.onSelectRow(row.id)}
onDeleteRow={() => handleDeleteRow(row.id)}
editHref={paths.dashboard.partyUser.edit(row.id)}
/>
))}
<TableEmptyRows
height={table.dense ? 56 : 56 + 20}
emptyRows={emptyRows(table.page, table.rowsPerPage, dataFiltered.length)}
/>
<TableNoData notFound={notFound} />
</TableBody>
</Table>
</Scrollbar>
</Box>
<TablePaginationCustom
page={table.page}
dense={table.dense}
count={dataFiltered.length}
rowsPerPage={table.rowsPerPage}
onPageChange={table.onChangePage}
onChangeDense={table.onChangeDense}
onRowsPerPageChange={table.onChangeRowsPerPage}
/>
</Card>
</DashboardContent>
{renderConfirmDialog()}
</>
);
}
// ----------------------------------------------------------------------
type ApplyFilterProps = {
inputData: IPartyUserItem[];
filters: IPartyUserTableFilters;
comparator: (a: any, b: any) => number;
};
function applyFilter({ inputData, comparator, filters }: ApplyFilterProps) {
const { name, status, role } = filters;
const stabilizedThis = inputData.map((el, index) => [el, index] as const);
stabilizedThis.sort((a, b) => {
const order = comparator(a[0], b[0]);
if (order !== 0) return order;
return a[1] - b[1];
});
inputData = stabilizedThis.map((el) => el[0]);
if (name) {
inputData = inputData.filter((user) => user.name.toLowerCase().includes(name.toLowerCase()));
}
if (status !== 'all') {
inputData = inputData.filter((user) => user.status === status);
}
if (role.length) {
inputData = inputData.filter((user) => role.includes(user.role));
}
return inputData;
}

132
03_source/frontend/src/sections/party-user/view/party-user-profile-view.tsx Normal file
View File

@@ -0,0 +1,132 @@
import Box from '@mui/material/Box';
import Card from '@mui/material/Card';
import Tab from '@mui/material/Tab';
import Tabs from '@mui/material/Tabs';
import { useCallback, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { _userAbout, _userFeeds, _userFollowers, _userFriends, _userGallery } from 'src/_mock';
import { useMockedUser } from 'src/auth/hooks';
import { CustomBreadcrumbs } from 'src/components/custom-breadcrumbs';
import { Iconify } from 'src/components/iconify';
import { DashboardContent } from 'src/layouts/dashboard';
import { RouterLink } from 'src/routes/components';
import { usePathname, useSearchParams } from 'src/routes/hooks';
import { paths } from 'src/routes/paths';
import { ProfileCover } from '../profile-cover';
import { ProfileFollowers } from '../profile-followers';
import { ProfileFriends } from '../profile-friends';
import { ProfileGallery } from '../profile-gallery';
import { ProfileHome } from '../profile-home';
// ----------------------------------------------------------------------
const NAV_ITEMS = [
{
value: '',
label: 'Profile',
icon: <Iconify width={24} icon="solar:user-id-bold" />,
},
{
value: 'followers',
label: 'Followers',
icon: <Iconify width={24} icon="solar:heart-bold" />,
},
{
value: 'friends',
label: 'Friends',
icon: <Iconify width={24} icon="solar:users-group-rounded-bold" />,
},
{
value: 'gallery',
label: 'Gallery',
icon: <Iconify width={24} icon="solar:gallery-wide-bold" />,
},
];
// ----------------------------------------------------------------------
const TAB_PARAM = 'tab';
export function UserProfileView() {
const { t } = useTranslation();
const pathname = usePathname();
const searchParams = useSearchParams();
const selectedTab = searchParams.get(TAB_PARAM) ?? '';
const { user } = useMockedUser();
const [searchFriends, setSearchFriends] = useState('');
const handleSearchFriends = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
setSearchFriends(event.target.value);
}, []);
const createRedirectPath = (currentPath: string, query: string) => {
const queryString = new URLSearchParams({ [TAB_PARAM]: query }).toString();
return query ? `${currentPath}?${queryString}` : currentPath;
};
return (
<DashboardContent>
<CustomBreadcrumbs
heading="Profile"
links={[
{ name: t('Dashboard'), href: paths.dashboard.root },
{ name: t('User'), href: paths.dashboard.user.root },
{ name: user?.displayName },
]}
sx={{ mb: { xs: 3, md: 5 } }}
/>
<Card sx={{ mb: 3, height: 290 }}>
<ProfileCover
role={_userAbout.role}
name={user?.displayName}
avatarUrl={user?.photoURL}
coverUrl={_userAbout.coverUrl}
/>
<Box
sx={{
width: 1,
bottom: 0,
zIndex: 9,
px: { md: 3 },
display: 'flex',
position: 'absolute',
bgcolor: 'background.paper',
justifyContent: { xs: 'center', md: 'flex-end' },
}}
>
<Tabs value={selectedTab}>
{NAV_ITEMS.map((tab) => (
<Tab
component={RouterLink}
key={tab.value}
value={tab.value}
icon={tab.icon}
label={t(tab.label)}
href={createRedirectPath(pathname, tab.value)}
/>
))}
</Tabs>
</Box>
</Card>
{selectedTab === '' && <ProfileHome info={_userAbout} posts={_userFeeds} />}
{selectedTab === 'followers' && <ProfileFollowers followers={_userFollowers} />}
{selectedTab === 'friends' && (
<ProfileFriends
friends={_userFriends}
searchFriends={searchFriends}
onSearchFriends={handleSearchFriends}
/>
)}
{selectedTab === 'gallery' && <ProfileGallery gallery={_userGallery} />}
</DashboardContent>
);
}

102
03_source/frontend/src/types/party-user.ts Normal file
View File

@@ -0,0 +1,102 @@
import type { IDateValue, ISocialLink } from './common';
// ----------------------------------------------------------------------
export type IPartyUserTableFilters = {
name: string;
role: string[];
status: string;
};
export type IPartyUserProfileCover = {
name: string;
role: string;
coverUrl: string;
avatarUrl: string;
};
export type IPartyUserProfile = {
id: string;
role: string;
quote: string;
email: string;
school: string;
country: string;
company: string;
totalFollowers: number;
totalFollowing: number;
socialLinks: ISocialLink;
};
export type IPartyUserProfileFollower = {
id: string;
name: string;
country: string;
avatarUrl: string;
};
export type IPartyUserProfileGallery = {
id: string;
title: string;
imageUrl: string;
postedAt: IDateValue;
};
export type IPartyUserProfileFriend = {
id: string;
name: string;
role: string;
avatarUrl: string;
};
export type IPartyUserProfilePost = {
id: string;
media: string;
message: string;
createdAt: IDateValue;
personLikes: { name: string; avatarUrl: string }[];
comments: {
id: string;
message: string;
createdAt: IDateValue;
author: { id: string; name: string; avatarUrl: string };
}[];
};
export type IPartyUserCard = {
id: string;
name: string;
role: string;
coverUrl: string;
avatarUrl: string;
totalPosts: number;
totalFollowers: number;
totalFollowing: number;
};
export type IPartyUserItem = {
id: string;
name: string;
city: string;
role: string;
email: string;
state: string;
status: string;
address: string;
country: string;
zipCode: string;
company: string;
avatarUrl: string;
phoneNumber: string;
isVerified: boolean;
//
username: string;
password: string;
};
export type IPartyUserAccountBillingHistory = {
id: string;
price: number;
invoiceNumber: string;
createdAt: IDateValue;
};