feat: implement edit evaluation

src/features/evaluations/components/data-table-row-actions.tsx

@@ -1,6 +1,6 @@
 import { DotsHorizontalIcon } from '@radix-ui/react-icons'
 import { type Row } from '@tanstack/react-table'
-import { CircleCheck, Eye, RefreshCcw } from 'lucide-react'
+import { CircleCheck, Eye, Pencil, RefreshCcw } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import {
   DropdownMenu,
@@ -37,6 +37,11 @@ export function DataTableRowActions({ row }: Props) {
     setOpen('approve')
   }
 
+  const handleEdit = () => {
+    setCurrentRow(evaluations)
+    setOpen('edit')
+  }
+
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
@@ -54,12 +59,12 @@ export function DataTableRowActions({ row }: Props) {
         </DropdownMenuItem>
 
         <DropdownMenuItem
-          onClick={handleShowConfirmRetry}
+          onClick={handleEdit}
           disabled={evaluations?.status === 'pending'}
         >
-          ارزیابی مجدد
+          ویرایش ارزیابی
           <DropdownMenuShortcut>
-            <RefreshCcw size={16} />
+            <Pencil size={16} />
           </DropdownMenuShortcut>
         </DropdownMenuItem>
 
@@ -73,6 +78,16 @@ export function DataTableRowActions({ row }: Props) {
           </DropdownMenuShortcut>
         </DropdownMenuItem>
 
+        <DropdownMenuItem
+          onClick={handleShowConfirmRetry}
+          disabled={evaluations?.status === 'pending'}
+        >
+          ارزیابی مجدد
+          <DropdownMenuShortcut>
+            <RefreshCcw size={16} />
+          </DropdownMenuShortcut>
+        </DropdownMenuItem>
+
         {/* <DropdownMenuSeparator /> */}
 
         {/* <DropdownMenuItem onClick={handleDelete} className='text-red-600'>

src/features/evaluations/components/evaluations-dialogs.tsx

@@ -1,5 +1,6 @@
 import { EvaluationsActionDialog } from './evaluations-action-dialog'
 import { EvaluationsApproveDialog } from './evaluations-approve-dialog'
+import { EvaluationsEditDialog } from './evaluations-edit-dialog'
 import { useEvaluations } from './evaluations-provider'
 import { EvaluationsRetryDialog } from './evaluations-retry-dialog'
 
@@ -8,6 +9,7 @@ export function EvaluationsDialogs() {
   return (
     <>
       <EvaluationsActionDialog />
+      <EvaluationsEditDialog />
 
       <EvaluationsRetryDialog
         open={open === 'retry'}

src/features/evaluations/components/evaluations-edit-dialog.tsx

@@ -0,0 +1,303 @@
+import { useForm, useFieldArray } from 'react-hook-form'
+import { z } from 'zod'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { AlertTriangle } from 'lucide-react'
+import { toast } from 'sonner'
+
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form'
+import { Table, TableBody, TableCell, TableRow } from '@/components/ui/table'
+import { Input } from '@/components/ui/input'
+import { Textarea } from '@/components/ui/textarea'
+import { Button } from '@/components/ui/button'
+import VideoPlayer from '@/components/video-player'
+
+import { useEvaluations } from './evaluations-provider'
+import { useEvaluation } from '@/hooks/evaluations/useEvaluation'
+import { useUpdateEvaluationDetails } from '@/hooks/evaluations/useUpdateEvaluationDetails'
+import { type Evaluation } from '@/types/evaluations.types'
+
+const schema = z.object({
+  pros_comment: z.string(),
+  cons_comment: z.string(),
+  suggestion: z.string(),
+  summary: z.string(),
+  score: z.number({ error: 'نمره ارزیابی الزامی است' }),
+  items: z.array(
+    z.object({
+      item_id: z.number(),
+      name: z.string(),
+      score: z.number({ error: 'نمره آیتم الزامی است' }),
+    })
+  ),
+})
+
+type FormValues = z.infer<typeof schema>
+
+function getDefaultValues(evaluation: Evaluation): FormValues {
+  return {
+    pros_comment: evaluation.pros_comment ?? '',
+    cons_comment: evaluation.cons_comment ?? '',
+    suggestion: evaluation.suggestion ?? '',
+    summary: evaluation.summary ?? '',
+    score: evaluation.score ? Number(evaluation.score) : 0,
+    items: evaluation.items.map((item) => ({
+      item_id: item.item.id,
+      name: item.item.name,
+      score: item.score,
+    })),
+  }
+}
+
+export function EvaluationsEditDialog() {
+  const { open, setOpen, currentRow } = useEvaluations()
+  const opened = open === 'edit'
+
+  const { data: evaluation, isLoading } = useEvaluation(
+    opened ? (currentRow?.id as number) : ''
+  )
+  const mediaSrc = evaluation?.media?.[0]?.url
+
+  const handleClose = () => setOpen(null)
+
+  return (
+    <Dialog open={opened} modal onOpenChange={handleClose}>
+      <DialogContent className='max-h-[90vh] max-w-5xl overflow-y-auto'>
+        <DialogHeader>
+          <DialogTitle>ویرایش ارزیابی</DialogTitle>
+        </DialogHeader>
+
+        {isLoading || !evaluation ? (
+          <div className='py-10 text-center'>در حال دریافت اطلاعات...</div>
+        ) : (
+          <div className='flex flex-col gap-4'>
+            {mediaSrc && <VideoPlayer src={mediaSrc} />}
+
+            {evaluation.items.length === 0 ? (
+              <div className='flex items-center justify-center gap-3 rounded-xl border bg-muted px-2 py-4 text-center text-sm font-bold text-primary'>
+                <AlertTriangle />
+                <span>ارزیابی برای این کاربر یافت نشد.</span>
+              </div>
+            ) : (
+              <EvaluationEditForm
+                key={evaluation.id}
+                evaluation={evaluation}
+                onClose={handleClose}
+              />
+            )}
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+type EvaluationEditFormProps = {
+  evaluation: Evaluation
+  onClose: () => void
+}
+
+function EvaluationEditForm({ evaluation, onClose }: EvaluationEditFormProps) {
+  const { mutate, isPending } = useUpdateEvaluationDetails()
+
+  const form = useForm<FormValues>({
+    resolver: zodResolver(schema),
+    defaultValues: getDefaultValues(evaluation),
+  })
+
+  const { fields } = useFieldArray({
+    control: form.control,
+    name: 'items',
+  })
+
+  const onSubmit = (values: FormValues) => {
+    mutate(
+      {
+        id: evaluation.id,
+        payload: {
+          pros_comment: values.pros_comment,
+          cons_comment: values.cons_comment,
+          suggestion: values.suggestion,
+          summary: values.summary,
+          score: values.score,
+          items: values.items.map((item) => ({
+            item_id: item.item_id,
+            score: item.score,
+          })),
+        },
+      },
+      {
+        onSuccess: () => {
+          toast.success('ویرایش ارزیابی با موفقیت انجام شد.')
+          onClose()
+        },
+        onError: () => {
+          toast.error('خطا در ویرایش ارزیابی!')
+        },
+      }
+    )
+  }
+
+  return (
+    <Form {...form}>
+      <form
+        onSubmit={form.handleSubmit(onSubmit)}
+        className='flex flex-col gap-4'
+      >
+        <h2>نتیجه ارزیابی</h2>
+        <div className='overflow-hidden rounded-2xl border border-slate-200'>
+          <Table>
+            <TableBody>
+              {fields.map((fieldItem, index) => (
+                <TableRow
+                  key={fieldItem.id}
+                  className='border-b border-slate-100 last:border-0 hover:bg-transparent'
+                >
+                  <TableCell className='p-3 text-right text-sm leading-5'>
+                    {fieldItem.name}
+                  </TableCell>
+                  <TableCell className='p-3'>
+                    <FormField
+                      control={form.control}
+                      name={`items.${index}.score`}
+                      render={({ field }) => (
+                        <FormItem>
+                          <div className='flex items-center justify-end gap-1'>
+                            <span className='text-foreground'>100 /</span>
+                            <FormControl>
+                              <Input
+                                type='number'
+                                className='h-8 w-20 text-center text-base'
+                                value={field.value ?? ''}
+                                onChange={(e) => {
+                                  const value = e.target.value
+                                  field.onChange(
+                                    value === '' ? 0 : Number(value)
+                                  )
+                                }}
+                              />
+                            </FormControl>
+                          </div>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  </TableCell>
+                </TableRow>
+              ))}
+              <TableRow className='border-b border-slate-100 last:border-0 hover:bg-transparent'>
+                <TableCell className='p-3 text-right text-sm leading-5 font-semibold'>
+                  مجموع عملکرد
+                </TableCell>
+                <TableCell className='p-3'>
+                  <FormField
+                    control={form.control}
+                    name='score'
+                    render={({ field }) => (
+                      <FormItem>
+                        <div className='flex items-center justify-end gap-1'>
+                          <span className='text-base font-semibold'>100 /</span>
+                          <FormControl>
+                            <Input
+                              type='number'
+                              className='h-8 w-20 text-center text-base font-semibold'
+                              value={field.value ?? ''}
+                              onChange={(e) => {
+                                const value = e.target.value
+                                field.onChange(
+                                  value === '' ? 0 : Number(value)
+                                )
+                              }}
+                            />
+                          </FormControl>
+                        </div>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                </TableCell>
+              </TableRow>
+            </TableBody>
+          </Table>
+        </div>
+
+        <FormField
+          control={form.control}
+          name='pros_comment'
+          render={({ field }) => (
+            <FormItem className='flex flex-col gap-2'>
+              <FormLabel className='leading-6'>نقاط قوت:</FormLabel>
+              <FormControl>
+                <Textarea {...field} rows={4} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name='cons_comment'
+          render={({ field }) => (
+            <FormItem className='flex flex-col gap-2'>
+              <FormLabel className='leading-6'>نقاط ضعف:</FormLabel>
+              <FormControl>
+                <Textarea {...field} rows={4} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name='suggestion'
+          render={({ field }) => (
+            <FormItem className='flex flex-col gap-2'>
+              <FormLabel className='leading-6'>تمرین پیشنهادی:</FormLabel>
+              <FormControl>
+                <Textarea {...field} rows={4} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name='summary'
+          render={({ field }) => (
+            <FormItem className='flex flex-col gap-2'>
+              <FormLabel className='leading-6'>نتیجه:</FormLabel>
+              <FormControl>
+                <Textarea {...field} rows={4} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <div className='flex justify-end gap-3'>
+          <Button type='button' variant='outline' onClick={onClose}>
+            انصراف
+          </Button>
+          <Button type='submit' disabled={isPending}>
+            {isPending ? 'در حال ارسال...' : 'ذخیره تغییرات'}
+          </Button>
+        </div>
+      </form>
+    </Form>
+  )
+}

src/features/evaluations/components/evaluations-provider.tsx

@@ -1,7 +1,7 @@
 import { type Evaluation } from '@/types/evaluations.types'
 import React, { createContext, useContext, useState } from 'react'
 
-type EvaluationsDialogType = 'retry' | 'view' | 'approve'
+type EvaluationsDialogType = 'retry' | 'view' | 'approve' | 'edit'
 
 interface EvaluationsContextType {
   open: EvaluationsDialogType | null

src/hooks/evaluations/useUpdateEvaluationDetails.tsx

@@ -0,0 +1,28 @@
+import { queryKeys } from '@/core/react-query/keys'
+import { evaluationsService } from '@/services/evaluations.service'
+import { type UpdateEvaluationDetails } from '@/types/evaluations.types'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+
+type UpdateEvaluationDetailsVariables = {
+  id: number
+  payload: UpdateEvaluationDetails
+}
+
+export function useUpdateEvaluationDetails() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: ({ id, payload }: UpdateEvaluationDetailsVariables) =>
+      evaluationsService.updateDetails(id, payload),
+
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.evaluations.detail(variables.id),
+      })
+
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.evaluations.lists(),
+      })
+    },
+  })
+}

src/services/evaluations.service.ts

@@ -5,6 +5,7 @@ import type {
   GetEvaluationDetailResponse,
   GetEvaluationItems,
   GetEvaluationsResponse,
+  UpdateEvaluationDetails,
   UpdateEvaluationStatus,
 } from '@/types/evaluations.types'
 
@@ -62,4 +63,15 @@ export const evaluationsService = {
     )
     return res?.data
   },
+
+  updateDetails: async (
+    evaluationId: number | string,
+    payload: UpdateEvaluationDetails
+  ) => {
+    const res = await http.post<ApiResponse<void>>(
+      `${BASE_URL}/${evaluationId}/details`,
+      payload
+    )
+    return res?.data
+  },
 }

src/types/evaluations.types.ts

@@ -159,3 +159,15 @@ export interface CreateEvaluation {
 export interface UpdateEvaluationStatus {
   status: EvaluationStatus
 }
+
+export interface UpdateEvaluationDetails {
+  pros_comment: string
+  cons_comment: string
+  suggestion: string
+  summary: string
+  score: number
+  items: {
+    item_id: number
+    score: number
+  }[]
+}