first commit

2024-09-17 12:11:39 +08:00
commit 42fbcc5d89
236 changed files with 27582 additions and 0 deletions
--- a/frontend/src/components/Items/EditItem.tsx
+++ b/frontend/src/components/Items/EditItem.tsx
@@ -0,0 +1,124 @@
+import {
+  Button,
+  FormControl,
+  FormErrorMessage,
+  FormLabel,
+  Input,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+} from "@chakra-ui/react"
+import { useMutation, useQueryClient } from "@tanstack/react-query"
+import { type SubmitHandler, useForm } from "react-hook-form"
+
+import {
+  type ApiError,
+  type ItemPublic,
+  type ItemUpdate,
+  ItemsService,
+} from "../../client"
+import useCustomToast from "../../hooks/useCustomToast"
+import { handleError } from "../../utils"
+
+interface EditItemProps {
+  item: ItemPublic
+  isOpen: boolean
+  onClose: () => void
+}
+
+const EditItem = ({ item, isOpen, onClose }: EditItemProps) => {
+  const queryClient = useQueryClient()
+  const showToast = useCustomToast()
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { isSubmitting, errors, isDirty },
+  } = useForm<ItemUpdate>({
+    mode: "onBlur",
+    criteriaMode: "all",
+    defaultValues: item,
+  })
+
+  const mutation = useMutation({
+    mutationFn: (data: ItemUpdate) =>
+      ItemsService.updateItem({ id: item.id, requestBody: data }),
+    onSuccess: () => {
+      showToast("Success!", "Item updated successfully.", "success")
+      onClose()
+    },
+    onError: (err: ApiError) => {
+      handleError(err, showToast)
+    },
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: ["items"] })
+    },
+  })
+
+  const onSubmit: SubmitHandler<ItemUpdate> = async (data) => {
+    mutation.mutate(data)
+  }
+
+  const onCancel = () => {
+    reset()
+    onClose()
+  }
+
+  return (
+    <>
+      <Modal
+        isOpen={isOpen}
+        onClose={onClose}
+        size={{ base: "sm", md: "md" }}
+        isCentered
+      >
+        <ModalOverlay />
+        <ModalContent as="form" onSubmit={handleSubmit(onSubmit)}>
+          <ModalHeader>Edit Item</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody pb={6}>
+            <FormControl isInvalid={!!errors.title}>
+              <FormLabel htmlFor="title">Title</FormLabel>
+              <Input
+                id="title"
+                {...register("title", {
+                  required: "Title is required",
+                })}
+                type="text"
+              />
+              {errors.title && (
+                <FormErrorMessage>{errors.title.message}</FormErrorMessage>
+              )}
+            </FormControl>
+            <FormControl mt={4}>
+              <FormLabel htmlFor="description">Description</FormLabel>
+              <Input
+                id="description"
+                {...register("description")}
+                placeholder="Description"
+                type="text"
+              />
+            </FormControl>
+          </ModalBody>
+          <ModalFooter gap={3}>
+            <Button
+              variant="primary"
+              type="submit"
+              isLoading={isSubmitting}
+              isDisabled={!isDirty}
+            >
+              Save
+            </Button>
+            <Button onClick={onCancel}>Cancel</Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
+  )
+}
+
+export default EditItem