fix(fe): block testcase and limit edit when submission exist (#2084)

* chore(fe): block testcase and limit edit when submission exist * chore(fe): change blockEdit as optional property
skkuding · Nov 12, 2024 · 921e9cf · 921e9cf
1 parent c196b16
commit 921e9cf
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 9 deletions.
diff --git a/apps/frontend/app/admin/problem/[id]/edit/page.tsx b/apps/frontend/app/admin/problem/[id]/edit/page.tsx
@@ -38,13 +38,12 @@ export default function Page({ params }: { params: { id: string } }) {
 
   const methods = useForm<UpdateProblemInput>({
     resolver: zodResolver(editSchema),
-    defaultValues: {
-      template: []
-    }
+    defaultValues: { template: [] }
   })
 
   const { handleSubmit, setValue, getValues } = methods
 
+  const [blockEdit, setBlockEdit] = useState<boolean>(false)
   const [showHint, setShowHint] = useState<boolean>(false)
   const [showSource, setShowSource] = useState<boolean>(false)
   const [isDialogOpen, setDialogOpen] = useState<boolean>(false)
@@ -57,6 +56,9 @@ export default function Page({ params }: { params: { id: string } }) {
     },
     onCompleted: (problemData) => {
       const data = problemData.getProblem
+
+      if (data.submissionCount > 0) setBlockEdit(true)
+
       setValue('id', +id)
       setValue('title', data.title)
       setValue('isVisible', data.isVisible)
@@ -193,10 +195,10 @@ export default function Page({ params }: { params: { id: string } }) {
               </div>
             </div>
 
-            {getValues('testcases') && <TestcaseField />}
+            {getValues('testcases') && <TestcaseField blockEdit={blockEdit} />}
 
             <FormSection title="Limit">
-              <LimitForm />
+              <LimitForm blockEdit={blockEdit} />
             </FormSection>
             <TemplateField />
             <SwitchField

diff --git a/apps/frontend/app/admin/problem/_components/ExampleTextarea.tsx b/apps/frontend/app/admin/problem/_components/ExampleTextarea.tsx
@@ -10,13 +10,15 @@ interface ExampleTextareaProps {
   // TODO: any를 다른 type으로 대체
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   register: any
+  blockEdit?: boolean
 }
 export default function ExampleTextarea({
   onRemove,
   inputName,
   outputName,
   className,
-  register
+  register,
+  blockEdit
 }: ExampleTextareaProps) {
   return (
     <div
@@ -30,11 +32,13 @@ export default function ExampleTextarea({
         onClick={() => onRemove()}
       />
       <Textarea
+        disabled={blockEdit}
         placeholder="Input"
         className="resize-none border-0 px-4 py-0 shadow-none focus-visible:ring-0"
         {...register(inputName)}
       />
       <Textarea
+        disabled={blockEdit}
         placeholder="Output"
         className="min-h-[120px] rounded-none border-l border-transparent border-l-gray-200 px-4 py-0 shadow-none focus-visible:ring-0"
         {...register(outputName)}

diff --git a/apps/frontend/app/admin/problem/_components/LimitForm.tsx b/apps/frontend/app/admin/problem/_components/LimitForm.tsx
@@ -6,7 +6,7 @@ import { useFormContext } from 'react-hook-form'
 import ErrorMessage from '../../_components/ErrorMessage'
 import { inputStyle } from '../../utils'
 
-export default function LimitForm() {
+export default function LimitForm({ blockEdit }: { blockEdit?: boolean }) {
   const {
     formState: { errors },
     register
@@ -17,6 +17,7 @@ export default function LimitForm() {
       <div className="flex flex-col gap-1">
         <div className="flex items-center gap-2">
           <Input
+            disabled={blockEdit}
             id="time"
             type="number"
             min={0}
@@ -34,6 +35,7 @@ export default function LimitForm() {
       <div className="flex flex-col gap-1">
         <div className="flex items-center gap-2">
           <Input
+            disabled={blockEdit}
             id="memory"
             type="number"
             min={0}

diff --git a/apps/frontend/app/admin/problem/_components/TestcaseField.tsx b/apps/frontend/app/admin/problem/_components/TestcaseField.tsx
@@ -18,7 +18,7 @@ import AddBadge from './AddBadge'
 import { CautionDialog } from './CautionDialog'
 import TestcaseItem from './TestcaseItem'
 
-export default function TestcaseField() {
+export default function TestcaseField({ blockEdit }: { blockEdit?: boolean }) {
   const {
     formState: { errors },
     getValues,
@@ -119,6 +119,7 @@ export default function TestcaseField() {
           (item, index) =>
             !item.isHidden && (
               <TestcaseItem
+                blockEdit={blockEdit}
                 key={index}
                 index={index}
                 itemError={itemErrors}
@@ -134,6 +135,7 @@ export default function TestcaseField() {
           (item, index) =>
             item.isHidden && (
               <TestcaseItem
+                blockEdit={blockEdit}
                 key={index}
                 index={index}
                 itemError={itemErrors}

diff --git a/apps/frontend/app/admin/problem/_components/TestcaseItem.tsx b/apps/frontend/app/admin/problem/_components/TestcaseItem.tsx
@@ -9,12 +9,14 @@ import { isInvalid } from '../_libs/utils'
 import ExampleTextarea from './ExampleTextarea'
 
 interface TestcaseItemProps {
+  blockEdit?: boolean
   index: number
   itemError: FieldErrorsImpl | undefined
   onRemove: () => void
 }
 
 export default function TestcaseItem({
+  blockEdit,
   index,
   itemError,
   onRemove
@@ -77,6 +79,7 @@ export default function TestcaseItem({
 
         <div>
           <input
+            disabled={blockEdit}
             {...register(`testcases.${index}.scoreWeight`, {
               setValueAs: (value) => (isInvalid(value) ? null : Number(value))
             })}
@@ -94,6 +97,7 @@ export default function TestcaseItem({
         </div>
       </div>
       <ExampleTextarea
+        blockEdit={blockEdit}
         onRemove={onRemove}
         inputName={`testcases.${index}.input`}
         outputName={`testcases.${index}.output`}

diff --git a/apps/frontend/app/admin/problem/page.tsx b/apps/frontend/app/admin/problem/page.tsx
@@ -133,7 +133,7 @@ export default function Page({
             enableFilter={true}
             enableDelete={true}
             enablePagination={true}
-            defaultSortColumn={{ id: 'createTime', desc: true }}
+            defaultSortColumn={{ id: 'updateTime', desc: true }}
           />
         )}
       </div>

diff --git a/apps/frontend/graphql/problem/queries.ts b/apps/frontend/graphql/problem/queries.ts
@@ -16,6 +16,7 @@ const GET_PROBLEM = gql(`
       description
       inputDescription
       outputDescription
+      submissionCount
       testcase {
         id
         input