PyCon Korea Admin

diff --git a/apps/pyconkr-admin/src/components/pages/modification_audit/components.tsx b/apps/pyconkr-admin/src/components/pages/modification_audit/components.tsx new file mode 100644 index 00000000..02447b7a --- /dev/null +++ b/apps/pyconkr-admin/src/components/pages/modification_audit/components.tsx @@ -0,0 +1,231 @@ +import { FallbackImage, Fieldset, MDXRenderer } from "@frontend/common/components"; +import { useBackendAdminClient, usePublicFileQuery } from "@frontend/common/hooks/useAdminAPI"; +import { useCommonContext } from "@frontend/common/hooks/useCommonContext"; +import { + Accordion, + AccordionDetails, + AccordionSummary, + Box, + Stack, + styled, + Table, + TableBody, + TableCell, + TableHead, + TableRow, + TextField, + TextFieldProps, + Typography, +} from "@mui/material"; +import { FC, ReactNode } from "react"; +import { isArray, isEmpty } from "remeda"; +type SharedPreviewFieldProps = { + originalDataset: Record; + previewDataset: Record; + name: string; + label: string; +}; + +type PreviewFieldProps = Omit & SharedPreviewFieldProps; + +const MarkdownContainerBox = styled(Box)(({ theme }) => ({ + width: "100%", + color: "black", + "& .markdown-body": { + width: "100%", + p: { margin: theme.spacing(2, 0) }, + a: { color: theme.palette.primary.main }, + }, +})); + +export const PreviewTextField: FC = ({ originalDataset, previewDataset, name, ...props }) => { + const textFieldSx: TextFieldProps["sx"] = { + "& .MuiInputBase-input, & .Mui-disabled": { + color: "black", + WebkitTextFillColor: "black", + "-webkit-text-fill-color": "black", + }, + }; + const textFieldProps: TextFieldProps = { + fullWidth: true, + disabled: true, + variant: "outlined", + value: previewDataset[name] || "(값 없음)", + sx: textFieldSx, + ...props, + }; + const modifiedTextFieldProps: TextFieldProps = { ...textFieldProps, sx: { ...textFieldSx, backgroundColor: "rgba(255, 255, 0, 0.1)" } }; + const originalTextFieldProps: TextFieldProps = { ...textFieldProps, sx: { ...textFieldSx, backgroundColor: "rgba(0, 64, 64, 0.1)" } }; + const isModified = originalDataset[name] !== previewDataset[name]; + + return originalDataset[name] === previewDataset[name] ? ( + + ) : ( + + + + + + 기존 값을 보려면 여기를 클릭해주세요. + + + + + + + + ); +}; + +export const PreviewMarkdownField: FC = ({ originalDataset, previewDataset, name, label }) => { + const { baseUrl, mdxComponents } = useCommonContext(); + return originalDataset[name] === previewDataset[name] ? ( +

+ + + +

+ ) : ( + + + + +

+ + + +

+ 기존 값을 보려면 여기를 클릭해주세요. + + + +

+ + + +

+ + + + ); +}; + +const ImageFallback: FC = () => ( + + + +); + +const WidthSpecifiedFallbackImage = styled(FallbackImage)({ + maxWidth: "20rem", + objectFit: "cover", +}); + +export const PreviewImageField: FC = ({ originalDataset, previewDataset, name, label }) => { + const backendAdminClient = useBackendAdminClient(); + const oldImgId = (originalDataset[name] as string) || ""; + const newImgId = (previewDataset[name] as string) || ""; + + const { data: originalImage } = usePublicFileQuery(backendAdminClient, oldImgId); + const { data: previewImage } = usePublicFileQuery(backendAdminClient, newImgId); + + return originalImage?.id === previewImage?.id ? ( +

+ + {previewImage?.file ? ( + } /> + ) : ( + + )} + +

+ ) : ( + + + + +

+ + {previewImage?.file ? ( + } /> + ) : ( + + )} + +

+ 기존 이미지를 보려면 여기를 클릭해주세요. + + + +

+ + {originalImage?.file ? ( + } /> + ) : ( + + )} + +

+ + + + ); +}; + +type SimplifiedModificationAudit = { + id: string; + created_at: string; + created_by: string; + status: string; + comments?: { + content: string; + created_by: { is_superuser: boolean; nickname: string }; + }[]; +}; + +export const ModificationAuditProperties: FC<{ audit: SimplifiedModificationAudit }> = ({ audit }) => { + let rejectReason: ReactNode = null; + if (isArray(audit.comments) && !isEmpty(audit.comments.filter((c) => c.created_by.is_superuser))) { + const comment = audit.comments.filter((c) => c.created_by.is_superuser)[0]; + rejectReason = ( + <> + + 반려 사유 + +

{comment.content}

(by {comment.created_by.nickname}) + + + + ); + } + + return ( + + + + 속성 + 값 + + + + + 심사 ID + {audit.id} + + + 심사 요청 시간 + {new Date(audit.created_at).toLocaleString()} + + + 심사 요청자 + {audit.created_by} + + + 심사 상태 + {audit.status} + + {rejectReason} + +

+ ); +}; diff --git a/apps/pyconkr-admin/src/components/pages/modification_audit/dialogs.tsx b/apps/pyconkr-admin/src/components/pages/modification_audit/dialogs.tsx new file mode 100644 index 00000000..3a72f07a --- /dev/null +++ b/apps/pyconkr-admin/src/components/pages/modification_audit/dialogs.tsx @@ -0,0 +1,97 @@ +import { BackendAPIClientError } from "@frontend/common/apis"; +import { Fieldset } from "@frontend/common/components"; +import { useApproveModificationAuditMutation, useBackendAdminClient, useRejectModificationAuditMutation } from "@frontend/common/hooks/useAdminAPI"; +import { Button, Dialog, DialogActions, DialogContent, DialogTitle, TextField, Typography } from "@mui/material"; +import { enqueueSnackbar, OptionsObject } from "notistack"; +import { FC, ReactNode, useRef } from "react"; +type SubmitConfirmDialogProps = { + open: boolean; + onClose: () => void; + modificationAuditId: string; +}; + +export const ApproveSubmitConfirmDialog: FC = ({ open, onClose, modificationAuditId }) => { + const backendAdminClient = useBackendAdminClient(); + const approveModificationAuditMutation = useApproveModificationAuditMutation(backendAdminClient, modificationAuditId); + + const addSnackbar = (c: string | ReactNode, variant: OptionsObject["variant"]) => + enqueueSnackbar(c, { variant, anchorOrigin: { vertical: "bottom", horizontal: "center" } }); + + const onApproveClick = () => { + approveModificationAuditMutation.mutate(undefined, { + onSuccess: () => { + addSnackbar("수정 심사가 승인되었습니다.", "success"); + onClose(); + }, + onError: (error) => { + console.error("Approve modification audit failed:", error); + let errorMessage = error instanceof Error ? error.message : "An unknown error occurred."; + if (error instanceof BackendAPIClientError) errorMessage = error.message; + addSnackbar(errorMessage, "error"); + }, + }); + }; + + return ( + + ); +}; + +export const RejectSubmitConfirmDialog: FC = ({ open, onClose, modificationAuditId }) => { + const inputRef = useRef(null); + const backendAdminClient = useBackendAdminClient(); + const rejectModificationAuditMutation = useRejectModificationAuditMutation(backendAdminClient, modificationAuditId); + + const addSnackbar = (c: string | ReactNode, variant: OptionsObject["variant"]) => + enqueueSnackbar(c, { variant, anchorOrigin: { vertical: "bottom", horizontal: "center" } }); + + const onRejectClick = () => { + if (!inputRef.current) return; + + rejectModificationAuditMutation.mutate(inputRef.current.value.trim(), { + onSuccess: () => { + addSnackbar("수정 심사가 반려되었습니다.", "success"); + onClose(); + }, + onError: (error) => { + console.error("Reject modification audit failed:", error); + let errorMessage = error instanceof Error ? error.message : "An unknown error occurred."; + if (error instanceof BackendAPIClientError) errorMessage = error.message; + addSnackbar(errorMessage, "error"); + }, + }); + }; + + return ( + + ); +}; diff --git a/apps/pyconkr-admin/src/components/pages/modification_audit/list.tsx b/apps/pyconkr-admin/src/components/pages/modification_audit/list.tsx new file mode 100644 index 00000000..b043d9ca --- /dev/null +++ b/apps/pyconkr-admin/src/components/pages/modification_audit/list.tsx @@ -0,0 +1,49 @@ +import { Typography } from "@mui/material"; +import { FC } from "react"; +import { Link } from "react-router-dom"; + +import { AdminList, AdminListColumn } from "@apps/pyconkr-admin/components/layouts/admin_list"; + +const detailPath = (id: string) => `/participant_portal_api/modificationaudit/${id}`; + +const columns: AdminListColumn[] = [ + { field: "id", header: "ID", width: "25%" }, + { + field: "status", + header: "상태", + width: "17.5%", + render: (row) => { + const isRequested = row.status === "requested"; + return ( + + {String(row.status)} + + ); + }, + }, + { + field: "str_repr", + header: "이름", + width: "40%", + render: (row) => {String(row.str_repr)}, + }, + { + field: "created_at", + header: "요청 시각", + width: "17.5%", + render: (row) => new Date(String(row.created_at)).toLocaleString(), + }, +]; + +// 수정 심사는 CRUD가 아닌 승인/반려 워크플로우라 생성/수정/삭제 액션을 숨기고, 상세는 전용 심사 페이지로 연결한다. +export const AdminModificationAuditList: FC = () => ( + +); diff --git a/apps/pyconkr-admin/src/components/pages/modification_audit/pages.tsx b/apps/pyconkr-admin/src/components/pages/modification_audit/pages.tsx new file mode 100644 index 00000000..6944fafc --- /dev/null +++ b/apps/pyconkr-admin/src/components/pages/modification_audit/pages.tsx @@ -0,0 +1,78 @@ +import { useBackendAdminClient, useModificationAuditPreviewQuery } from "@frontend/common/hooks/useAdminAPI"; +import { Box, Button, CircularProgress, Divider, Stack, Typography } from "@mui/material"; +import { ErrorBoundary, Suspense } from "@suspensive/react"; +import { FC, useState } from "react"; +import { Navigate, useParams } from "react-router-dom"; + +import { BackendAdminSignInGuard } from "@apps/pyconkr-admin/components/elements/admin_signin_guard"; +import { ErrorFallback } from "@apps/pyconkr-admin/components/elements/error_fallback"; + +import { ModificationAuditProperties } from "./components"; +import { ApproveSubmitConfirmDialog, RejectSubmitConfirmDialog } from "./dialogs"; +import { SubModificationAuditPage } from "./sub_pages"; + +type EditorStateType = { actionStatus?: "approve" | "reject" }; + +const InnerAdminModificationAuditEditor: FC = () => { + const [editorState, setEditorState] = useState({}); + const { id } = useParams<{ id?: string }>(); + + const backendAdminClient = useBackendAdminClient(); + const { data } = useModificationAuditPreviewQuery>(backendAdminClient, id || ""); + + if (!data) return ; + + const { modification_audit } = data; + const { status, instance } = modification_audit; + const { app, model } = instance; + const btnDisabled = status !== "requested"; + + const closeSubmitConfirmDialog = () => setEditorState((ps) => ({ ...ps, actionStatus: undefined })); + const openApproveSubmitConfirmDialog = () => setEditorState((ps) => ({ ...ps, actionStatus: "approve" })); + const openRejectSubmitConfirmDialog = () => setEditorState((ps) => ({ ...ps, actionStatus: "reject" })); + + return ( + <> + + + + + {app.toUpperCase()} > {model.toUpperCase()} > 수정 심사 + + + + + + + + {btnDisabled && } + + + + + 변수는 {"{{ name }}"} 형식으로 사용합니다. 저장 시 EmailDocument JSON은 editor_source에, 에디터의 메일 제목과 렌더된 HTML은 data 필드에{" "} + {'{"title": ..., "body": ...}'} 형태로 기록됩니다. + + + + + + + {retrievedData && retrievedData.template_variables.length > 0 && ( + + + 템플릿 변수 + + + {retrievedData.template_variables.map((v) => ( + + ))} + + + )} + + {id && ( + + + 미리보기 + + + setContextJson(e.target.value)} + error={!jsonValid} + helperText={jsonValid ? '예: {"name": "홍길동"}' : "유효한 JSON이 아닙니다."} + multiline + minRows={3} + fullWidth + /> + + {renderMutation.isPending ? ( + + ) : renderMutation.error ? ( + 미리보기를 불러오지 못했습니다. + ) : renderMutation.data ? ( +