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

Create delete run confirm dialog

Browse Source
This commit is contained in:
Takeshi Kimata
2024-05-26 21:17:41 +09:00
parent ff2d3a88e5
commit 1bab870239
8 changed files with 113 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
frontend/src/app/[locale]/projects/ProjectDeleteDialog.tsx
View File

@@ -1,35 +0,0 @@
'use client';
import { Button, Modal, ModalContent, ModalHeader, ModalBody, ModalFooter } from '@nextui-org/react';
import { ProjectsMessages } from '@/types/project';
type Props = {
isOpen: boolean;
deleteProjectId: number | null;
onCancel: () => void;
onConfirm: (projectId: number | number) => {};
messages: ProjectsMessages;
};
export default function ProjectDialog({ isOpen, deleteProjectId, onCancel, onConfirm, messages }: Props) {
return (
<Modal
isOpen={isOpen}
onOpenChange={() => {
onCancel();
}}
>
<ModalContent>
<ModalHeader className="flex flex-col gap-1">{messages.delete}</ModalHeader>
<ModalBody>{messages.areYouSure}</ModalBody>
<ModalFooter>
<Button variant="light" onPress={onCancel}>
{messages.close}
</Button>
<Button color="danger" onPress={() => onConfirm(deleteProjectId)}>
{messages.delete}
</Button>
</ModalFooter>
</ModalContent>
</Modal>
);
}

33
frontend/src/app/[locale]/projects/ProjectsPage.tsx
View File

@@ -7,7 +7,7 @@ import { ProjectType, ProjectsMessages } from '@/types/project';
import ProjectsTable from './ProjectsTable';
import ProjectDialog from './ProjectDialog';
import { fetchProjects, createProject, updateProject, deleteProject } from './projectsControl';
import ProjectDeleteDialog from './ProjectDeleteDialog';
import DeleteConfirmDialog from '@/components/DeleteConfirmDialog';
export type Props = {
messages: ProjectsMessages;
@@ -47,11 +47,11 @@ export default function ProjectsPage({ messages, locale }: Props) {
setEditingProject(null);
};
// delete dialog
const [isDeleteProjectDialogOpen, setIsDeleteProjectDialogOpen] = useState(false);
// delete confirm dialog
const [isDeleteConfirmDialogOpen, setIsDeleteConfirmDialogOpen] = useState(false);
const [deleteProjectId, setDeleteProjectId] = useState<number | null>(null);
const closeDeleteDialog = () => {
setIsDeleteProjectDialogOpen(false);
const closeDeleteConfirmDialog = () => {
setIsDeleteConfirmDialogOpen(false);
setDeleteProjectId(null);
};
@@ -74,13 +74,15 @@ export default function ProjectsPage({ messages, locale }: Props) {
const onDeleteClick = (projectId: number) => {
setDeleteProjectId(projectId);
setIsDeleteProjectDialogOpen(true);
setIsDeleteConfirmDialogOpen(true);
};
const onConfirm = async (projectId: number) => {
await deleteProject(context.token.access_token, projectId);
setProjects(projects.filter((project) => project.id !== projectId));
closeDeleteDialog();
const onConfirm = async () => {
if (deleteProjectId) {
await deleteProject(context.token.access_token, deleteProjectId);
setProjects(projects.filter((project) => project.id !== deleteProjectId));
closeDeleteConfirmDialog();
}
};
return (
@@ -110,12 +112,13 @@ export default function ProjectsPage({ messages, locale }: Props) {
messages={messages}
/>
<ProjectDeleteDialog
isOpen={isDeleteProjectDialogOpen}
deleteProjectId={deleteProjectId}
onCancel={closeDeleteDialog}
<DeleteConfirmDialog
isOpen={isDeleteConfirmDialogOpen}
onCancel={closeDeleteConfirmDialog}
onConfirm={onConfirm}
messages={messages}
closeText={messages.close}
confirmText={messages.areYouSure}
deleteText={messages.delete}
/>
</div>
);

45
frontend/src/app/[locale]/projects/[projectId]/runs/RunsPage.tsx
View File

@@ -5,6 +5,7 @@ import { Plus } from 'lucide-react';
import RunsTable from './RunsTable';
import { fetchRuns, createRun, deleteRun } from './runsControl';
import { RunsMessages } from '@/types/run';
import DeleteConfirmDialog from '@/components/DeleteConfirmDialog';
type Props = {
projectId: string;
@@ -15,6 +16,14 @@ type Props = {
export default function RunsPage({ projectId, locale, messages }: Props) {
const [runs, setRuns] = useState([]);
// delete confirm dialog
const [isDeleteConfirmDialogOpen, setIsDeleteConfirmDialogOpen] = useState(false);
const [deleteRunId, setDeleteRunId] = useState<number | null>(null);
const closeDeleteConfirmDialog = () => {
setIsDeleteConfirmDialogOpen(false);
setDeleteRunId(null);
};
useEffect(() => {
async function fetchDataEffect() {
try {
@@ -39,13 +48,26 @@ export default function RunsPage({ projectId, locale, messages }: Props) {
}
};
const onDeleteClick = async (runId: number) => {
try {
await deleteRun(runId);
const data = await fetchRuns(projectId);
setRuns(data);
} catch (error: any) {
console.error('Error deleting run:', error);
// const onDeleteClick = async (runId: number) => {
// try {
// await deleteRun(runId);
// const data = await fetchRuns(projectId);
// setRuns(data);
// } catch (error: any) {
// console.error('Error deleting run:', error);
// }
// };
const onDeleteClick = (runId: number) => {
setDeleteRunId(runId);
setIsDeleteConfirmDialogOpen(true);
};
const onConfirm = async () => {
if (deleteRunId) {
await deleteRun(deleteRunId);
setRuns(runs.filter((run) => run.id !== deleteRunId));
closeDeleteConfirmDialog();
}
};
@@ -61,6 +83,15 @@ export default function RunsPage({ projectId, locale, messages }: Props) {
</div>
<RunsTable projectId={projectId} runs={runs} onDeleteRun={onDeleteClick} messages={messages} locale={locale} />
<DeleteConfirmDialog
isOpen={isDeleteConfirmDialogOpen}
onCancel={closeDeleteConfirmDialog}
onConfirm={onConfirm}
closeText={messages.close}
confirmText={messages.areYouSure}
deleteText={messages.delete}
/>
</div>
);
}

3
frontend/src/app/[locale]/projects/[projectId]/runs/page.tsx
View File

@@ -13,6 +13,9 @@ export default function Page({ params }: { params: { projectId: string; locale:
newRun: t('new_run'),
deleteRun: t('delete_run'),
noRunsFound: t('no_runs_found'),
close: t('close'),
areYouSure: t('are_you_sure'),
delete: t('delete'),
};
return (