feat(fe): edit create problem page (#1923)

* feat(fe): edit popover text and padding * chore(fe): add space between title and visible, add left margin to angleleft * chore(fe): add color to radio button, adjust gaps * feat(fe): change checkbox design, delete tag select, change box order * chore(fe): change toggle color, move template field * chore(fe): move title, add space between title and visible, move template up hint and source * fix(fe): comment out tags and get tag * chore(fe): delete comment about tag feature * chore(fe): delete comments * chore(fe): delete comments --------- Co-authored-by: Jiho Park <[email protected]>
skkuding · Aug 28, 2024 · 45980b4 · 45980b4
1 parent 60082ae
commit 45980b4
Show file tree

Hide file tree

Showing 10 changed files with 50 additions and 88 deletions.
diff --git a/apps/frontend/app/admin/_components/FormSection.tsx b/apps/frontend/app/admin/_components/FormSection.tsx
@@ -12,9 +12,9 @@ export default function FormSection({
 
   return (
     <div className="flex flex-col gap-1">
-      <div className="flex items-center gap-1">
+      <div className="flex items-center gap-3">
         <span className="font-bold">{title}</span>
-        {isLabeled && <span className="text-red-500">*</span>}
+        {isLabeled && <span className="mt-1 text-red-500">*</span>}
         {badge}
       </div>
       {content}

diff --git a/apps/frontend/app/admin/_components/TitleForm.tsx b/apps/frontend/app/admin/_components/TitleForm.tsx
@@ -15,7 +15,7 @@ export default function TitleForm({ placeholder }: { placeholder: string }) {
         id="title"
         type="text"
         placeholder={placeholder}
-        className={cn(inputStyle, 'w-[380px]')}
+        className={cn(inputStyle, 'w-[500px]')}
         {...register('title', {
           required: true
         })}

diff --git a/apps/frontend/app/admin/problem/[id]/edit/page.tsx b/apps/frontend/app/admin/problem/[id]/edit/page.tsx
@@ -4,7 +4,6 @@ import { Button } from '@/components/ui/button'
 import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area'
 import { UPDATE_PROBLEM } from '@/graphql/problem/mutations'
 import { GET_PROBLEM } from '@/graphql/problem/queries'
-import { GET_TAGS } from '@/graphql/problem/queries'
 import { useMutation, useQuery } from '@apollo/client'
 import type {
   Sample,
@@ -35,10 +34,6 @@ import { editSchema } from '../../utils'
 
 export default function Page({ params }: { params: { id: string } }) {
   const { id } = params
-  const { data: tagsData } = useQuery(GET_TAGS)
-  const tags =
-    tagsData?.getTags.map(({ id, name }) => ({ id: +id, name })) ?? []
-
   const router = useRouter()
 
   const methods = useForm<UpdateProblemInput>({
@@ -145,7 +140,7 @@ export default function Page({ params }: { params: { id: string } }) {
   return (
     <ScrollArea className="shrink-0">
       <main className="flex flex-col gap-6 px-20 py-16">
-        <div className="flex items-center gap-4">
+        <div className="-ml-8 flex items-center gap-4">
           <Link href={`/admin/problem/${id}`}>
             <FaAngleLeft className="h-12 hover:text-gray-700/80" />
           </Link>
@@ -157,9 +152,9 @@ export default function Page({ params }: { params: { id: string } }) {
           className="flex w-[760px] flex-col gap-6"
         >
           <FormProvider {...methods}>
-            <div className="flex gap-6">
+            <div className="flex gap-32">
               <FormSection title="Title">
-                <TitleForm placeholder="Name your problem" />
+                <TitleForm placeholder="Enter a problem name" />
               </FormSection>
 
               <FormSection title="Visible">
@@ -168,8 +163,8 @@ export default function Page({ params }: { params: { id: string } }) {
               </FormSection>
             </div>
 
-            <FormSection title="info">
-              <InfoForm tags={tags} tagName="tags.create" />
+            <FormSection title="Info">
+              <InfoForm />
             </FormSection>
 
             <FormSection title="Description">
@@ -220,7 +215,7 @@ export default function Page({ params }: { params: { id: string } }) {
             <FormSection title="Limit">
               <LimitForm />
             </FormSection>
-
+            <TemplateField />
             <SwitchField
               name="hint"
               title="Hint"
@@ -235,7 +230,6 @@ export default function Page({ params }: { params: { id: string } }) {
               formElement="input"
               hasValue={showSource}
             />
-            <TemplateField />
 
             <Button
               type="submit"

diff --git a/apps/frontend/app/admin/problem/_components/InfoForm.tsx b/apps/frontend/app/admin/problem/_components/InfoForm.tsx
@@ -1,21 +1,13 @@
 import CheckboxSelect from '@/components/CheckboxSelect'
 import OptionSelect from '@/components/OptionSelect'
-import TagsSelect from '@/components/TagsSelect'
 import { languages, levels } from '@/lib/constants'
-import type { Tag } from '@/types/type'
 import type { Template } from '@generated/graphql'
 import type { Language } from '@generated/graphql'
 import { useEffect } from 'react'
 import { useFormContext, useController } from 'react-hook-form'
 import ErrorMessage from '../../_components/ErrorMessage'
 
-export default function InfoForm({
-  tags,
-  tagName
-}: {
-  tags: Tag[]
-  tagName: string
-}) {
+export default function InfoForm() {
   const {
     watch,
     control,
@@ -77,23 +69,8 @@ export default function InfoForm({
     defaultValue: []
   })
 
-  const { field: tagsField } = useController({
-    name: tagName,
-    control,
-    defaultValue: []
-  })
-
   return (
     <div className="flex gap-4">
-      <div className="flex flex-col gap-1">
-        <OptionSelect
-          options={levels}
-          value={difficultyField.value as string}
-          onChange={difficultyField.onChange}
-        />
-        {errors.difficulty && <ErrorMessage />}
-      </div>
-
       <div className="flex flex-col gap-1">
         <CheckboxSelect
           title="Language"
@@ -107,12 +84,12 @@ export default function InfoForm({
       </div>
 
       <div className="flex flex-col gap-1">
-        <TagsSelect
-          options={tags}
-          onChange={tagsField.onChange}
-          defaultValue={tagsField.value}
+        <OptionSelect
+          options={levels}
+          value={difficultyField.value as string}
+          onChange={difficultyField.onChange}
         />
-        {errors.tags && <ErrorMessage />}
+        {errors.difficulty && <ErrorMessage />}
       </div>
     </div>
   )

diff --git a/apps/frontend/app/admin/problem/_components/PopoverVisibleInfo.tsx b/apps/frontend/app/admin/problem/_components/PopoverVisibleInfo.tsx
@@ -10,13 +10,19 @@ export default function PopoverVisibleInfo() {
     <Popover>
       <PopoverTrigger asChild>
         <button>
-          <MdHelpOutline className="text-gray-400 hover:text-gray-700" />
+          <MdHelpOutline className="ml-[10px] text-gray-400 hover:text-gray-700" />
         </button>
       </PopoverTrigger>
-      <PopoverContent side="top" className="mb-2 px-4 py-3">
-        <ul className="text-sm font-normal leading-none">
-          <li>For contest, &apos;hidden&apos; is recommended.</li>
-          <li>You can edit these settings later.</li>
+      <PopoverContent side="top" className="mb-2 w-max px-3 py-2">
+        <ul className="text-xs font-normal leading-tight text-gray-700">
+          <li>
+            If set to visible, the problem will be publicly accessible, allowing
+            users to attempt solving it.
+          </li>
+          <li>
+            Please note that the visibility settings can be modified at any
+            time.
+          </li>
         </ul>
       </PopoverContent>
     </Popover>

diff --git a/apps/frontend/app/admin/problem/_components/VisibleForm.tsx b/apps/frontend/app/admin/problem/_components/VisibleForm.tsx
@@ -17,34 +17,26 @@ export default function VisibleForm() {
   return (
     <>
       <div className="mt-3 flex items-center gap-2">
-        <div className="flex gap-6">
+        <div className="flex gap-14">
           <label className="flex gap-2">
             <input
               type="radio"
               onBlur={isVisibleField.onBlur}
               onChange={() => isVisibleField.onChange(true)}
               checked={isVisibleField.value === true}
-              className="accent-black"
-            />
-            <FaEye
-              className={
-                isVisibleField.value === true ? 'text-black' : 'text-gray-400'
-              }
+              className="text-primary-light"
             />
+            <FaEye className="text-gray-400" size={18} />
           </label>
           <label className="flex gap-2">
             <input
               type="radio"
               onBlur={isVisibleField.onBlur}
               onChange={() => isVisibleField.onChange(false)}
               checked={isVisibleField.value === false}
-              className="accent-black"
-            />
-            <FaEyeSlash
-              className={
-                isVisibleField.value === false ? 'text-black' : 'text-gray-400'
-              }
+              className="text-primary-light"
             />
+            <FaEyeSlash className="text-gray-400" size={18} />
           </label>
         </div>
       </div>

diff --git a/apps/frontend/app/admin/problem/create/page.tsx b/apps/frontend/app/admin/problem/create/page.tsx
@@ -3,8 +3,7 @@
 import { Button } from '@/components/ui/button'
 import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area'
 import { CREATE_PROBLEM } from '@/graphql/problem/mutations'
-import { GET_TAGS } from '@/graphql/problem/queries'
-import { useMutation, useQuery } from '@apollo/client'
+import { useMutation } from '@apollo/client'
 import {
   Level,
   type CreateProblemInput,
@@ -33,10 +32,6 @@ import VisibleForm from '../_components/VisibleForm'
 import { createSchema } from '../utils'
 
 export default function Page() {
-  const { data: tagsData } = useQuery(GET_TAGS)
-  const tags =
-    tagsData?.getTags.map(({ id, name }) => ({ id: Number(id), name })) ?? []
-
   const [isCreating, setIsCreating] = useState(false)
 
   const router = useRouter()
@@ -83,7 +78,7 @@ export default function Page() {
   return (
     <ScrollArea className="shrink-0">
       <main className="flex flex-col gap-6 px-20 py-16">
-        <div className="flex items-center gap-4">
+        <div className="-ml-8 flex items-center gap-4">
           <Link href="/admin/problem">
             <FaAngleLeft className="h-12 hover:text-gray-700/80" />
           </Link>
@@ -95,9 +90,9 @@ export default function Page() {
           className="flex w-[760px] flex-col gap-6"
         >
           <FormProvider {...methods}>
-            <div className="flex gap-6">
+            <div className="flex gap-32">
               <FormSection title="Title">
-                <TitleForm placeholder="Name your problem" />
+                <TitleForm placeholder="Enter a problem name" />
               </FormSection>
 
               <FormSection title="Visible">
@@ -106,8 +101,8 @@ export default function Page() {
               </FormSection>
             </div>
 
-            <FormSection title="info">
-              <InfoForm tags={tags} tagName="tagIds" />
+            <FormSection title="Info">
+              <InfoForm />
             </FormSection>
 
             <FormSection title="Description">
@@ -149,21 +144,17 @@ export default function Page() {
               <LimitForm />
             </FormSection>
 
-            <SwitchField
-              name="hint"
-              title="Hint"
-              placeholder="Enter a hint"
-              formElement="textarea"
-            />
+            <TemplateField />
+
+            <SwitchField name="hint" title="Hint" placeholder="Enter a hint" />
+
             <SwitchField
               name="source"
               title="Source"
               placeholder="Enter a source"
               formElement="input"
             />
 
-            <TemplateField />
-
             <Button
               type="submit"
               className="flex h-[36px] w-[100px] items-center gap-2 px-0"

diff --git a/apps/frontend/components/CheckboxSelect.tsx b/apps/frontend/components/CheckboxSelect.tsx
@@ -16,8 +16,8 @@ import {
   PopoverTrigger
 } from '@/components/ui/popover'
 import { Separator } from '@/components/ui/separator'
-import { PlusCircledIcon } from '@radix-ui/react-icons'
 import { useState, useEffect } from 'react'
+import { IoFilter } from 'react-icons/io5'
 
 interface DataProps<T> {
   title: string
@@ -54,12 +54,12 @@ export default function LanguageSelect<T extends string>({
     <Popover onOpenChange={() => onChange(selectedValues)}>
       <PopoverTrigger asChild>
         <Button
-          variant="outline"
+          variant="filter"
           size={'sm'}
-          className="h-10 border hover:bg-gray-50"
+          className="h-10 border px-5 hover:bg-gray-50"
         >
-          <PlusCircledIcon className="mr-2 h-4 w-4" />
-          <p className="font-bold">{title}</p>
+          <IoFilter className="mr-2 h-4 w-4" />
+          <p className="font-semibold">{title}</p>
           {selectedValues.length > 0 && (
             <>
               <Separator orientation="vertical" className="mx-2 h-4" />

diff --git a/apps/frontend/components/ui/button.tsx b/apps/frontend/components/ui/button.tsx
@@ -19,7 +19,9 @@ const buttonVariants = cva(
         ghost:
           'text-gray-500 hover:bg-gray-100 active:bg-gray-200 dark:hover:bg-gray-800 dark:hover:text-gray-50',
         link: 'text-gray-900 underline-offset-4 hover:underline dark:text-gray-50',
-        slate: 'hover:text-primary-light'
+        slate: 'hover:text-primary-light',
+        filter:
+          'border border-gray-200 bg-white hover:bg-gray-100 hover:text-gray-900 dark:border-gray-800 dark:bg-gray-950 dark:hover:bg-gray-800 dark:hover:text-gray-50'
       },
       size: {
         default: 'h-10 px-4 py-2',

diff --git a/apps/frontend/components/ui/checkbox.tsx b/apps/frontend/components/ui/checkbox.tsx
@@ -12,7 +12,7 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      'data-[state=checked]:bg-primary data-[state=checked]:border-primary peer h-4 w-4 shrink-0 rounded-sm border border-gray-700 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-950 disabled:cursor-not-allowed disabled:opacity-50 data-[state=unchecked]:bg-transparent data-[state=checked]:text-gray-50 dark:border-gray-800 dark:focus-visible:ring-gray-300 dark:data-[state=checked]:bg-gray-50 dark:data-[state=checked]:text-gray-900',
+      'data-[state=checked]:bg-primary peer h-4 w-4 shrink-0 rounded-sm border border-gray-200 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-950 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:text-gray-50 dark:border-gray-50 dark:border-gray-800 dark:focus-visible:ring-gray-300 dark:data-[state=checked]:bg-gray-50 dark:data-[state=checked]:text-gray-900',
       className
     )}
     {...props}