yellowadmin/pp-tcms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add project settings page

Browse Source
This commit is contained in:
Takeshi Kimata
2024-06-02 21:22:33 +09:00
parent 016a8d07c5
commit 24fe7bebb3
21 changed files with 471 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/src/app/[locale]/projects/[projectId]/Sidebar.tsx
View File

@@ -1,7 +1,7 @@
'use client';
import { useState, useEffect } from 'react';
import { Listbox, ListboxItem } from '@nextui-org/react';
import { Home, Files, FlaskConical, Settings } from 'lucide-react';
import { Home, Files, FlaskConical, Users, Settings } from 'lucide-react';
import { usePathname, useRouter } from '@/src/navigation';
import useGetCurrentIds from '@/utils/useGetCurrentIds';
import { ProjectMessages } from '@/types/project';
@@ -27,6 +27,8 @@ export default function Sidebar({ messages, locale }: Props) {
router.push(`/projects/${projectId}/folders`, { locale: locale });
} else if (key === 'runs') {
router.push(`/projects/${projectId}/runs`, { locale: locale });
} else if (key === 'members') {
router.push(`/projects/${projectId}/members`, { locale: locale });
} else if (key === 'settings') {
router.push(`/projects/${projectId}/settings`, { locale: locale });
}
@@ -40,6 +42,8 @@ export default function Sidebar({ messages, locale }: Props) {
setCurrentTab('cases');
} else if (currentPath.includes('runs')) {
setCurrentTab('runs');
} else if (currentPath.includes('members')) {
setCurrentTab('members');
} else if (currentPath.includes('settings')) {
setCurrentTab('settings');
}
@@ -64,6 +68,11 @@ export default function Sidebar({ messages, locale }: Props) {
text: messages.testRuns,
startContent: <FlaskConical strokeWidth={1} size={20} />,
},
{
key: 'members',
text: messages.members,
startContent: <Users strokeWidth={1} size={20} />,
},
{
key: 'settings',
text: messages.settings,

2
frontend/src/app/[locale]/projects/[projectId]/home/home.tsx → frontend/src/app/[locale]/projects/[projectId]/home/ProjectHome.tsx
View File

@@ -43,7 +43,7 @@ type Props = {
messages: HomeMessages;
};
export function Home({ projectId, messages }: Props) {
export function ProjectHome({ projectId, messages }: Props) {
const context = useContext(TokenContext);
const { theme, setTheme } = useTheme();
const [project, setProject] = useState({

4
frontend/src/app/[locale]/projects/[projectId]/home/page.tsx
View File

@@ -1,4 +1,4 @@
import { Home } from './home';
import { ProjectHome } from './ProjectHome';
import { useTranslations } from 'next-intl';
export type HomeMessages = {
@@ -69,7 +69,7 @@ export default function Page({ params }: { params: { projectId: string } }) {
};
return (
<>
<Home projectId={params.projectId} messages={messages} />
<ProjectHome projectId={params.projectId} messages={messages} />
</>
);
}

1
frontend/src/app/[locale]/projects/[projectId]/layout.tsx
View File

@@ -13,6 +13,7 @@ export default function SidebarLayout({
home: t('home'),
testCases: t('test_cases'),
testRuns: t('test_runs'),
members: t('members'),
settings: t('settings'),
};

0
frontend/src/app/[locale]/projects/[projectId]/settings/AddMemberDialog.tsx → frontend/src/app/[locale]/projects/[projectId]/members/AddMemberDialog.tsx
View File

0
frontend/src/app/[locale]/projects/[projectId]/settings/CandidatesTable.tsx → frontend/src/app/[locale]/projects/[projectId]/members/CandidatesTable.tsx
View File

100
frontend/src/app/[locale]/projects/[projectId]/members/MembersPage.tsx Normal file
View File

@@ -0,0 +1,100 @@
'use client';
import React from 'react';
import { useState, useEffect, useContext } from 'react';
import { Button } from '@nextui-org/react';
import { Plus } from 'lucide-react';
import { MemberType, UserType } from '@/types/user';
import { MembersMessages } from '@/types/members';
import { TokenContext } from '@/utils/TokenProvider';
import MembersTable from './MembersTable';
import AddMemberDialog from './AddMemberDialog';
import { fetchProjectMembers, addMember, deleteMember, updateMember } from './membersControl';
type Props = {
projectId: string;
messages: MembersMessages;
locale: string;
};
export default function MembersPage({ projectId, messages, locale }: Props) {
const context = useContext(TokenContext);
const [members, setMembers] = useState<MemberType[]>([]);
const [isDialogOpen, setIsDialogOpen] = useState(false);
useEffect(() => {
async function fetchDataEffect() {
if (!context.isSignedIn()) {
return;
}
try {
const data = await fetchProjectMembers(context.token.access_token, projectId);
setMembers(data);
} catch (error: any) {
console.error('Error in effect:', error.message);
}
}
fetchDataEffect();
}, [context]);
const handleAddMember = async (userAdded: UserType) => {
const newMember = await addMember(context.token.access_token, userAdded.id, projectId);
newMember.User = userAdded;
const updateMembers = [...members];
updateMembers.push(newMember);
setMembers(updateMembers);
setIsDialogOpen(false);
};
const handleDeleteMember = async (userDeleted: UserType) => {
await deleteMember(context.token.access_token, userDeleted.id, projectId);
setMembers(members.filter((member) => member.User.id !== userDeleted.id));
};
const handleChangeRole = async (userEdit: UserType, role: number) => {
await updateMember(context.token.access_token, userEdit.id, projectId, role);
setMembers((prevMembers) => {
return prevMembers.map((member) => {
if (member.User.id === userEdit.id) {
return { ...member, role: role };
}
return member;
});
});
};
return (
<div className="container mx-auto max-w-3xl pt-6 px-6 flex-grow">
<div className="w-full p-3 flex items-center justify-between">
<h3 className="font-bold">{messages.memberManagement}</h3>
<Button
startContent={<Plus size={16} />}
size="sm"
color="primary"
isDisabled={!context.isProjectManager(Number(projectId))}
onClick={() => setIsDialogOpen(true)}
>
{messages.addMember}
</Button>
</div>
<MembersTable
members={members}
isDisabled={!context.isProjectManager(Number(projectId))}
onChangeRole={handleChangeRole}
onDeleteMember={handleDeleteMember}
messages={messages}
/>
<AddMemberDialog
isOpen={isDialogOpen}
projectId={projectId}
onCancel={() => setIsDialogOpen(false)}
onAddMember={handleAddMember}
messages={messages}
/>
</div>
);
}

0
frontend/src/app/[locale]/projects/[projectId]/settings/MembersTable.tsx → frontend/src/app/[locale]/projects/[projectId]/members/MembersTable.tsx
View File

0
frontend/src/app/[locale]/projects/[projectId]/settings/membersControl.ts → frontend/src/app/[locale]/projects/[projectId]/members/membersControl.ts
View File

29
frontend/src/app/[locale]/projects/[projectId]/members/page.tsx Normal file
View File

@@ -0,0 +1,29 @@
import MembersPage from './MembersPage';
import { useTranslations } from 'next-intl';
export default function Page({ params }: { params: { projectId: string; locale: string } }) {
const t = useTranslations('Members');
const messages = {
memberManagement: t('member_management'),
avatar: t('avatar'),
email: t('email'),
username: t('username'),
role: t('role'),
manager: t('manager'),
developer: t('developer'),
reporter: t('reporter'),
delete: t('delete'),
deleteMember: t('deleteMember'),
noMembersFound: t('no_members_found'),
addMember: t('add_member'),
userNameOrEmail: t('user_name_or_email'),
close: t('close'),
add: t('add'),
};
return (
<>
<MembersPage projectId={params.projectId} messages={messages} locale={params.locale} />
</>
);
}

146
frontend/src/app/[locale]/projects/[projectId]/settings/SettingsPage.tsx
View File

@@ -1,14 +1,15 @@
'use client';
import React from 'react';
import { useState, useEffect, useContext } from 'react';
import { Button } from '@nextui-org/react';
import { Plus } from 'lucide-react';
import { MemberType, UserType } from '@/types/user';
import { Button, Table, TableHeader, TableColumn, TableBody, TableRow, TableCell } from '@nextui-org/react';
import { Pencil, Trash } from 'lucide-react';
import { SettingsMessages } from '@/types/settings';
import { TokenContext } from '@/utils/TokenProvider';
import MembersTable from './MembersTable';
import AddMemberDialog from './AddMemberDialog';
import { fetchProjectMembers, addMember, deleteMember, updateMember } from './membersControl';
import { deleteProject, fetchProject, updateProject } from '@/utils/projectsControl';
import { ProjectType } from '@/types/project';
import DeleteConfirmDialog from '@/components/DeleteConfirmDialog';
import { useRouter } from '@/src/navigation';
import ProjectDialog from '@/components/ProjectDialog';
type Props = {
projectId: string;
@@ -18,8 +19,18 @@ type Props = {
export default function SettingsPage({ projectId, messages, locale }: Props) {
const context = useContext(TokenContext);
const [members, setMembers] = useState<MemberType[]>([]);
const [isDialogOpen, setIsDialogOpen] = useState(false);
const router = useRouter();
const [project, setProject] = useState<ProjectType>({
id: 0,
name: '',
detail: '',
isPublic: false,
userId: 0,
createdAt: '',
updatedAt: '',
Folders: [],
Runs: [],
});
useEffect(() => {
async function fetchDataEffect() {
@@ -28,8 +39,8 @@ export default function SettingsPage({ projectId, messages, locale }: Props) {
}
try {
const data = await fetchProjectMembers(context.token.access_token, projectId);
setMembers(data);
const data = await fetchProject(context.token.access_token, Number(projectId));
setProject(data);
} catch (error: any) {
console.error('Error in effect:', error.message);
}
@@ -38,62 +49,87 @@ export default function SettingsPage({ projectId, messages, locale }: Props) {
fetchDataEffect();
}, [context]);
const handleAddMember = async (userAdded: UserType) => {
const newMember = await addMember(context.token.access_token, userAdded.id, projectId);
newMember.User = userAdded;
const updateMembers = [...members];
updateMembers.push(newMember);
setMembers(updateMembers);
setIsDialogOpen(false);
// project dialog
const [isProjectDialogOpen, setIsProjectDialogOpen] = useState(false);
const onSubmit = async (name: string, detail: string, isPublic: boolean) => {
const updatedProject = await updateProject(context.token.access_token, project.id, name, detail, isPublic);
setProject(updatedProject);
setIsProjectDialogOpen(false);
};
const handleDeleteMember = async (userDeleted: UserType) => {
await deleteMember(context.token.access_token, userDeleted.id, projectId);
setMembers(members.filter((member) => member.User.id !== userDeleted.id));
};
const handleChangeRole = async (userEdit: UserType, role: number) => {
await updateMember(context.token.access_token, userEdit.id, projectId, role);
setMembers((prevMembers) => {
return prevMembers.map((member) => {
if (member.User.id === userEdit.id) {
return { ...member, role: role };
}
return member;
});
});
// delete confirm dialog
const [isDeleteConfirmDialogOpen, setIsDeleteConfirmDialogOpen] = useState(false);
const onConfirm = async () => {
await deleteProject(context.token.access_token, Number(projectId));
setIsDeleteConfirmDialogOpen(false);
router.push(`/projects/`, { locale: locale });
};
return (
<div className="container mx-auto max-w-3xl pt-16 px-6 flex-grow">
<div className="container mx-auto max-w-3xl pt-6 px-6 flex-grow">
<div className="w-full p-3 flex items-center justify-between">
<h3 className="font-bold">{messages.memberManagement}</h3>
<Button
startContent={<Plus size={16} />}
size="sm"
color="primary"
isDisabled={!context.isProjectManager(Number(projectId))}
onClick={() => setIsDialogOpen(true)}
>
{messages.addMember}
</Button>
<h3 className="font-bold">{messages.projectManagement}</h3>
<div>
<Button
startContent={<Trash size={16} />}
size="sm"
color="danger"
isDisabled={!context.isProjectManager(Number(projectId))}
onClick={() => setIsDeleteConfirmDialogOpen(true)}
>
{messages.deleteProject}
</Button>
<Button
startContent={<Pencil size={16} />}
size="sm"
color="primary"
isDisabled={!context.isProjectManager(Number(projectId))}
onClick={() => setIsProjectDialogOpen(true)}
className="ms-2"
>
{messages.editProject}
</Button>
</div>
</div>
<MembersTable
members={members}
isDisabled={!context.isProjectManager(Number(projectId))}
onChangeRole={handleChangeRole}
onDeleteMember={handleDeleteMember}
<div className="w-full p-3">
<Table hideHeader aria-label="Example static collection table">
<TableHeader>
<TableColumn>dummy</TableColumn>
<TableColumn>dummy</TableColumn>
</TableHeader>
<TableBody>
<TableRow key="1">
<TableCell>{messages.projectName}</TableCell>
<TableCell>{project.name}</TableCell>
</TableRow>
<TableRow key="2">
<TableCell>{messages.projectDetail}</TableCell>
<TableCell>{project.detail}</TableCell>
</TableRow>
<TableRow key="3">
<TableCell>{messages.publicity}</TableCell>
<TableCell>{project.isPublic ? messages.public : messages.private}</TableCell>
</TableRow>
</TableBody>
</Table>
</div>
<ProjectDialog
isOpen={isProjectDialogOpen}
editingProject={project}
onCancel={() => setIsProjectDialogOpen(false)}
onSubmit={onSubmit}
messages={messages}
/>
<AddMemberDialog
isOpen={isDialogOpen}
projectId={projectId}
onCancel={() => setIsDialogOpen(false)}
onAddMember={handleAddMember}
messages={messages}
<DeleteConfirmDialog
isOpen={isDeleteConfirmDialogOpen}
onCancel={() => setIsDeleteConfirmDialogOpen(false)}
onConfirm={onConfirm}
closeText={messages.close}
confirmText={messages.areYouSure}
deleteText={messages.delete}
/>
</div>
);

25
frontend/src/app/[locale]/projects/[projectId]/settings/page.tsx
View File

@@ -4,21 +4,20 @@ import { useTranslations } from 'next-intl';
export default function Page({ params }: { params: { projectId: string; locale: string } }) {
const t = useTranslations('Settings');
const messages = {
memberManagement: t('member_management'),
avatar: t('avatar'),
email: t('email'),
username: t('username'),
role: t('role'),
manager: t('manager'),
developer: t('developer'),
reporter: t('reporter'),
projectManagement: t('project_management'),
projectName: t('project_name'),
projectDetail: t('project_detail'),
editProject: t('edit_project'),
project: t('project'),
ifYouMakePublic: t('if_you_make_public'),
public: t('public'),
publicity: t('publicity'),
private: t('private'),
update: t('update'),
deleteProject: t('delete_project'),
delete: t('delete'),
deleteMember: t('deleteMember'),
noMembersFound: t('no_members_found'),
addMember: t('add_member'),
userNameOrEmail: t('user_name_or_email'),
close: t('close'),
add: t('add'),
areYouSure: t('are_you_sure'),
};
return (