Merge pull request #159 from kimthu09/anhthu

fix: number format
kimthu09 · Jan 16, 2024 · 6c8c71c · 6c8c71c
2 parents 766f340 + d005bcc
commit 6c8c71c
Show file tree

Hide file tree

Showing 18 changed files with 288 additions and 71 deletions.
diff --git a/frontend/app/product/books/[bookId]/page.tsx b/frontend/app/product/books/[bookId]/page.tsx
@@ -15,7 +15,12 @@ import { Label } from "@/components/ui/label";
 import { useToast } from "@/components/ui/use-toast";
 import Link from "next/link";
 import { useEffect, useState } from "react";
-import { SubmitErrorHandler, SubmitHandler, useForm } from "react-hook-form";
+import {
+  Controller,
+  SubmitErrorHandler,
+  SubmitHandler,
+  useForm,
+} from "react-hook-form";
 import { LuCheck } from "react-icons/lu";
 import { zodResolver } from "@hookform/resolvers/zod";
 import * as z from "zod";
@@ -38,6 +43,7 @@ import { BookTitle } from "@/types";
 import BookTitleSelectEdit from "@/components/book-manage/book-title-select-edit";
 import { useLoading } from "@/hooks/loading-context";
 import BookDetailSkeleton from "@/components/skeleton/book-detail-skeleton";
+import { NumericFormat } from "react-number-format";
 
 const FormSchema = z.object({
   bookTitleId: z.string().min(1, "Vui lòng chọn một đầu sách"),
@@ -194,7 +200,7 @@ const EditBook = ({ params }: { params: { bookId: string } }) => {
 
   const { currentUser } = useCurrentUser();
   if (!currentUser || isLoading) {
-    return <BookDetailSkeleton/>;
+    return <BookDetailSkeleton />;
   } else if (
     currentUser &&
     !includesRoles({
@@ -335,10 +341,26 @@ const EditBook = ({ params }: { params: { bookId: string } }) => {
                     <div className="flex lg:gap-4 gap-3 xl:flex-col sm:flex-row flex-col">
                       <div className="flex-1">
                         <Label>Giá niêm yết (VNĐ)</Label>
-                        <Input
-                          type="number"
-                          readOnly={readOnly}
-                          {...register("listedPrice")}
+                        <Controller
+                          name="listedPrice"
+                          control={control}
+                          render={({ field }) => (
+                            <NumericFormat
+                              value={field.value}
+                              onValueChange={(values) => {
+                                const numericValue = parseFloat(
+                                  values.value.replace(/,/g, "")
+                                );
+
+                                field.onChange(numericValue);
+                              }}
+                              readOnly={readOnly}
+                              thousandSeparator="."
+                              decimalSeparator=","
+                              valueIsNumericString
+                              customInput={Input}
+                            />
+                          )}
                         />
                         {errors.listedPrice && (
                           <span className="error___message">
@@ -348,10 +370,25 @@ const EditBook = ({ params }: { params: { bookId: string } }) => {
                       </div>
                       <div className="flex-1">
                         <Label>Đơn giá (VNĐ)</Label>
-                        <Input
-                          type="number"
-                          {...register("sellPrice")}
-                          readOnly={readOnly}
+                        <Controller
+                          name="sellPrice"
+                          control={control}
+                          render={({ field }) => (
+                            <NumericFormat
+                              value={field.value}
+                              onValueChange={(values) => {
+                                const numericValue = parseFloat(
+                                  values.value.replace(/,/g, "")
+                                );
+                                field.onChange(numericValue);
+                              }}
+                              readOnly={readOnly}
+                              thousandSeparator="."
+                              decimalSeparator=","
+                              valueIsNumericString
+                              customInput={Input}
+                            />
+                          )}
                         />
                         {errors.sellPrice && (
                           <span className="error___message">

diff --git a/frontend/app/product/books/add/page.tsx b/frontend/app/product/books/add/page.tsx
@@ -15,7 +15,12 @@ import { Label } from "@/components/ui/label";
 import { useToast } from "@/components/ui/use-toast";
 import Link from "next/link";
 import { useState } from "react";
-import { SubmitHandler, useFieldArray, useForm } from "react-hook-form";
+import {
+  Controller,
+  SubmitHandler,
+  useFieldArray,
+  useForm,
+} from "react-hook-form";
 import { LuCheck } from "react-icons/lu";
 import { zodResolver } from "@hookform/resolvers/zod";
 import * as z from "zod";
@@ -32,6 +37,7 @@ import { includesRoles } from "@/lib/utils";
 import NoRole from "@/components/no-role";
 import { useLoading } from "@/hooks/loading-context";
 import BookAddSkeleton from "@/components/skeleton/book-add-skeleton";
+import { NumericFormat } from "react-number-format";
 
 const FormSchema = z.object({
   bookTitleId: z.string().min(1, "Vui lòng chọn một đầu sách"),
@@ -80,6 +86,7 @@ const InsertNewBook = () => {
     setValue,
     reset,
     trigger,
+    clearErrors,
     formState: { errors },
   } = form;
 
@@ -139,20 +146,23 @@ const InsertNewBook = () => {
         title: "Thành công",
         description: "Thêm mới sách thành công",
       });
+      router.refresh();
+
+      setPublisherId("");
+
       reset({
         bookTitleId: data.bookTitleId,
         idBook: "",
         edition: 1,
         publisherId: "",
-        listedPrice: 0,
-        sellPrice: 0,
+        listedPrice: 1,
+        sellPrice: 1,
         image: "/no-image.jpg",
       });
-      setPublisherId("");
+      clearErrors();
       setImage(null);
 
       mutate(`${endPoint}/v1/books/all`);
-      router.refresh();
     }
   };
 
@@ -264,7 +274,25 @@ const InsertNewBook = () => {
                   <div className="flex lg:gap-4 gap-3 xl:flex-col sm:flex-row flex-col">
                     <div className="flex-1">
                       <Label>Giá niêm yết (VNĐ)</Label>
-                      <Input {...register("listedPrice")} />
+                      <Controller
+                        name="listedPrice"
+                        control={control}
+                        render={({ field }) => (
+                          <NumericFormat
+                            value={field.value}
+                            onValueChange={(values) => {
+                              const numericValue = parseFloat(
+                                values.value.replace(/,/g, "")
+                              );
+                              field.onChange(numericValue);
+                            }}
+                            thousandSeparator="."
+                            decimalSeparator=","
+                            valueIsNumericString
+                            customInput={Input}
+                          />
+                        )}
+                      />
                       {errors.listedPrice && (
                         <span className="error___message">
                           {errors.listedPrice.message}
@@ -273,7 +301,25 @@ const InsertNewBook = () => {
                     </div>
                     <div className="flex-1">
                       <Label>Đơn giá (VNĐ)</Label>
-                      <Input {...register("sellPrice")} />
+                      <Controller
+                        name="sellPrice"
+                        control={control}
+                        render={({ field }) => (
+                          <NumericFormat
+                            value={field.value}
+                            onValueChange={(values) => {
+                              const numericValue = parseFloat(
+                                values.value.replace(/,/g, "")
+                              );
+                              field.onChange(numericValue);
+                            }}
+                            thousandSeparator="."
+                            decimalSeparator=","
+                            valueIsNumericString
+                            customInput={Input}
+                          />
+                        )}
+                      />
                       {errors.sellPrice && (
                         <span className="error___message">
                           {errors.sellPrice.message}

diff --git a/frontend/app/staff/[staffId]/detail-layout.tsx b/frontend/app/staff/[staffId]/detail-layout.tsx
@@ -39,6 +39,7 @@ import { useCurrentUser } from "@/hooks/use-user";
 import { includesRoles, isAdmin } from "@/lib/utils";
 import { useLoading } from "@/hooks/loading-context";
 import StaffDetailSkeleton from "@/components/skeleton/staff-detail";
+import { useRouter } from "next/navigation";
 
 const FormSchema = z.object({
   name: required,
@@ -50,6 +51,7 @@ const PasswordSchema = z.object({
 });
 
 const EditStaff = ({ params }: { params: { staffId: string } }) => {
+  const router = useRouter();
   const [role, setRole] = useState("");
   const { showLoading, hideLoading } = useLoading();
 
@@ -134,6 +136,7 @@ const EditStaff = ({ params }: { params: { staffId: string } }) => {
         description: "Đặt lại mật khẩu nhân viên thành công",
       });
       setOpen(false);
+      router.refresh();
     }
   };
   const onSubmit: SubmitHandler<z.infer<typeof FormSchema>> = async (data) => {
@@ -160,6 +163,7 @@ const EditStaff = ({ params }: { params: { staffId: string } }) => {
         description: "Chỉnh sửa thông tin nhân viên thành công",
       });
       mutate();
+      router.refresh();
     }
   };
   const handleOpen = (value: boolean) => {
@@ -207,6 +211,7 @@ const EditStaff = ({ params }: { params: { staffId: string } }) => {
           description: "Thay đổi ảnh nhân viên thành công",
         });
         mutate();
+        router.refresh();
       }
     }
   };
@@ -248,6 +253,7 @@ const EditStaff = ({ params }: { params: { staffId: string } }) => {
       });
       setOpen(false);
       mutate();
+      router.refresh();
     }
   };
 
@@ -272,6 +278,7 @@ const EditStaff = ({ params }: { params: { staffId: string } }) => {
       });
       setOpen(false);
       mutate();
+      router.refresh();
     }
   };
   const { currentUser } = useCurrentUser();

diff --git a/frontend/app/stockmanage/import/[importId]/page.tsx b/frontend/app/stockmanage/import/[importId]/page.tsx
@@ -46,6 +46,7 @@ const ImportDetail = ({ params }: { params: { importId: string } }) => {
         description: "Chuyển trạng thái thành công",
       });
       mutate();
+      router.refresh();
     }
   };
   const { currentUser } = useCurrentUser();

diff --git a/frontend/app/supplier/[supplierId]/detail-layout.tsx b/frontend/app/supplier/[supplierId]/detail-layout.tsx
@@ -3,7 +3,7 @@ import { Card, CardContent } from "@/components/ui/card";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { useState } from "react";
+import { ChangeEvent, forwardRef, useEffect, useRef, useState } from "react";
 import { ImportTable } from "@/components/supplier-manage/import-table";
 import { DebtTable } from "@/components/supplier-manage/debt-table";
 import { Button } from "@/components/ui/button";
@@ -17,30 +17,41 @@ import {
 import getSupplier from "@/lib/supplier/getSupplier";
 import { zodResolver } from "@hookform/resolvers/zod";
 import * as z from "zod";
-import { SubmitHandler, useForm } from "react-hook-form";
+import { Controller, SubmitHandler, useForm } from "react-hook-form";
 import { toast } from "@/components/ui/use-toast";
 import paySupplier from "@/lib/supplier/paySupplier";
 import EditDialog from "@/components/supplier-manage/edit";
 import { useSWRConfig } from "swr";
 import { endPoint } from "@/constants";
 import { withAuth } from "@/lib/role/withAuth";
 import { useCurrentUser } from "@/hooks/use-user";
-import { includesRoles } from "@/lib/utils";
-import NoRole from "@/components/no-role";
+import { includesRoles, toVND } from "@/lib/utils";
 import { useLoading } from "@/hooks/loading-context";
 import { Skeleton } from "@/components/ui/skeleton";
 import DropdownSkeleton from "@/components/skeleton/dropdown-skeleton";
+import { useRouter } from "next/navigation";
+import { NumericFormat } from "react-number-format";
+import React from "react";
+
 const FormSchema = z.object({
-  quantity: z.coerce.number().gte(1, "Giá trị phải lớn hơn 0"), // Force it to be a number
+  quantity: z.coerce
+    .number({ invalid_type_error: "Giá trị phải là một số" })
+    .gte(1, "Giá trị phải lớn hơn 0")
+    .refine((value) => Number.isInteger(value), {
+      message: "Giá trị phải là số nguyên",
+    }), // Force it to be a number
 });
+
 const SupplierDetail = ({ params }: { params: { supplierId: string } }) => {
   const form = useForm<z.infer<typeof FormSchema>>({
     resolver: zodResolver(FormSchema),
+    defaultValues: { quantity: 0 },
   });
   const {
     register,
     handleSubmit,
     control,
+    reset,
     formState: { errors },
   } = form;
   const {
@@ -49,7 +60,9 @@ const SupplierDetail = ({ params }: { params: { supplierId: string } }) => {
     isError,
     mutate: mutateSupplier,
   } = getSupplier(params.supplierId);
+  const inputRef = useRef<HTMLInputElement>(null);
 
+  const router = useRouter();
   const { mutate } = useSWRConfig();
   const { showLoading, hideLoading } = useLoading();
   const onSubmit: SubmitHandler<z.infer<typeof FormSchema>> = async (
@@ -76,6 +89,7 @@ const SupplierDetail = ({ params }: { params: { supplierId: string } }) => {
       });
       mutate(`${endPoint}/v1/suppliers/${data.id}/debts?page=${pageIndex}`);
       mutateSupplier();
+      router.refresh();
     }
     setOpenDialog(false);
   };
@@ -169,7 +183,15 @@ const SupplierDetail = ({ params }: { params: { supplierId: string } }) => {
                 />
               ) : null}
 
-              <Dialog open={openDialog} onOpenChange={setOpenDialog}>
+              <Dialog
+                open={openDialog}
+                onOpenChange={(open) => {
+                  if (open) {
+                    reset({ quantity: 0 });
+                  }
+                  setOpenDialog(open);
+                }}
+              >
                 <DialogTrigger asChild>
                   {!currentUser ||
                   (currentUser &&
@@ -207,11 +229,26 @@ const SupplierDetail = ({ params }: { params: { supplierId: string } }) => {
                       <div className="flex gap-4">
                         <div className="flex-1">
                           <Label htmlFor="price">Giá trị</Label>
-                          <Input
-                            id="price"
-                            type="number"
-                            {...register("quantity")}
-                          ></Input>
+                          <Controller
+                            name="quantity"
+                            control={control}
+                            render={({ field }) => (
+                              <NumericFormat
+                                value={field.value}
+                                onValueChange={(values) => {
+                                  const numericValue = parseFloat(
+                                    values.value.replace(/,/g, "")
+                                  );
+                                  field.onChange(numericValue);
+                                }}
+                                thousandSeparator="."
+                                decimalSeparator=","
+                                valueIsNumericString
+                                customInput={Input}
+                              />
+                            )}
+                          />
+
                           {errors.quantity && (
                             <span className="error___message">
                               {errors.quantity.message}
@@ -255,7 +292,7 @@ const SupplierDetail = ({ params }: { params: { supplierId: string } }) => {
                 </div>
                 <div className="flex-1">
                   <Label>Nợ hiện tại</Label>
-                  <Input type="number" value={data.debt} readOnly></Input>
+                  <Input value={toVND(data.debt)} readOnly></Input>
                 </div>
               </div>
             </CardContent>