upgrade update information

2026-04-10 16:54:50 +07:00
parent 28723997b5
commit 950fc475b2
5 changed files with 120 additions and 122 deletions
--- a/src/components/tables/BasicTableOne.tsx
+++ b/src/components/tables/BasicTableOne.tsx
@@ -1,5 +1,5 @@
 "use client";
-import React from "react";
+
 import {
  Table,
  TableBody,
--- a/src/components/user-profile/UserInfoCard.tsx
+++ b/src/components/user-profile/UserInfoCard.tsx
@@ -45,17 +45,42 @@ export default function UserInfoCard({ data }: { data: UserMetaCardProps }) {
  };

  const handleSave = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    const userId = data?.data?.id;
+    if (!userId) return;
+
    try {
-      const userId = data?.data?.id;
-      if (userId) {
-        await apiUpdateUser(userId, formData);
-        toast.success("Cập nhật thành công!");
-        router.refresh();
+      const response = await apiUpdateUser(userId, formData);
+
+      if (response && response.status === false) {
+        toast.error(response.message || "Cập nhật thất bại.");
+        return;
      }
-    } catch (error) {
-      console.error("Lỗi khi cập nhật profile:", error);
+
+      toast.success("Cập nhật thành công!");
+      setTimeout(() => {
+        window.location.reload();
+      }, 1000);
+    } catch (error: any) {
+      const serverResponse = error.response?.data;
+
+      if (serverResponse && serverResponse.status === false) {
+        const msg = serverResponse.message || "";
+
+        if (msg.includes("idx_user_profiles_phone")) {
+          toast.error("Số điện thoại này đã được sử dụng!");
+        } else {
+          toast.error(msg);
+        }
+      } else {
+        toast.error("Không thể kết nối đến máy chủ hoặc lỗi hệ thống.");
+      }
+
+      console.error("Lỗi chi tiết:", error);
    }
  };
+
  return (
    <div className="p-5 border border-gray-200 rounded-2xl dark:border-gray-800 lg:p-6">
      <div className="flex flex-col gap-6 lg:flex-row lg:items-start lg:justify-between">
@@ -187,6 +212,7 @@ export default function UserInfoCard({ data }: { data: UserMetaCardProps }) {
                      name="avatar_url"
                      defaultValue={formData.avatar_url}
                      onChange={handleChange}
+                      disabled
                    />
                  </div>
                  <div className="col-span-2">
--- a/src/components/user-profile/UserMetaCard.tsx
+++ b/src/components/user-profile/UserMetaCard.tsx
@@ -1,43 +1,52 @@
 "use client";

-import { useState, useRef } from "react";
+import { useState, useRef, useEffect } from "react";
 import Image from "next/image";
 import { UserMetaCardProps } from "@/interface/user";
 import { uploadMedia } from "@/service/mediaService";

 export default function UserMetaCard({ data }: { data: UserMetaCardProps }) {
-  const [previewImage, setPreviewImage] = useState(
-    data.data?.profile?.avatar_url || "/images/no-images.jpg",
-  );
+  const currentAvatar = data.data?.profile?.avatar_url || "/images/no-images.jpg";
+
+  const [previewImage, setPreviewImage] = useState(currentAvatar);
  const [isUploading, setIsUploading] = useState(false);
  const fileInputRef = useRef<HTMLInputElement>(null);

+  useEffect(() => {
+    if (data.data?.profile?.avatar_url) {
+      setPreviewImage(data.data.profile.avatar_url);
+    }
+  }, [data.data?.profile?.avatar_url]);
+
  const handleAvatarClick = () => {
    if (!isUploading) {
      fileInputRef.current?.click();
    }
  };

-  const handleFileChange = async (
-    event: React.ChangeEvent<HTMLInputElement>,
-  ) => {
+  const handleFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (!file) return;

+   
+    const objectUrl = URL.createObjectURL(file);
+    const backupImage = previewImage; 
+    setPreviewImage(objectUrl);
+
    try {
      setIsUploading(true);
-      console.log("Selected file:", file);
-
-      const objectUrl = URL.createObjectURL(file);
-      setPreviewImage(objectUrl);
-
      const uploadedMedia = await uploadMedia(file);
+      
      console.log("Upload thành công:", uploadedMedia);
+
+     
+      if (uploadedMedia?.url) {
+        setPreviewImage(uploadedMedia.url);
+      }
+
    } catch (error) {
      console.error("Lỗi khi upload avatar:", error);
-      setPreviewImage(
-        data.data?.profile?.avatar_url || "/images/no-images.jpg",
-      );
+      setPreviewImage(backupImage);
      alert("Không thể tải ảnh lên. Vui lòng thử lại!");
    } finally {
      setIsUploading(false);
@@ -48,106 +57,65 @@ export default function UserMetaCard({ data }: { data: UserMetaCardProps }) {
  };

  return (
-    <>
-      <div className="p-5 border border-gray-200 rounded-2xl dark:border-gray-800 lg:p-6">
-        <div className="flex flex-col gap-5 xl:flex-row xl:items-center xl:justify-between">
-          <div className="flex flex-col items-center w-full gap-6 xl:flex-row">
-            <div
-              onClick={handleAvatarClick}
-              className="relative w-20 h-20 overflow-hidden border border-gray-200 rounded-full cursor-pointer dark:border-gray-800 group shrink-0"
-            >
-              <Image
-                width={80}
-                height={80}
-                src={previewImage}
-                alt="avatar"
-                className="object-cover w-full h-full"
-              />
-
-              <div className="absolute inset-0 flex items-center justify-center transition-opacity bg-black/50 opacity-0 group-hover:opacity-100">
-                {isUploading ? (
-                  <svg
-                    className="w-6 h-6 text-white animate-spin"
-                    xmlns="http://www.w3.org/2000/svg"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                  >
-                    <circle
-                      className="opacity-25"
-                      cx="12"
-                      cy="12"
-                      r="10"
-                      stroke="currentColor"
-                      strokeWidth="4"
-                    ></circle>
-                    <path
-                      className="opacity-75"
-                      fill="currentColor"
-                      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                    ></path>
-                  </svg>
-                ) : (
-                  <svg
-                    className="w-6 h-6 text-white"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"
-                    />
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"
-                    />
-                  </svg>
-                )}
-              </div>
-
-              <input
-                type="file"
-                ref={fileInputRef}
-                className="hidden"
-                accept="image/*"
-                onChange={handleFileChange}
-              />
+    <div className="p-5 border border-gray-200 rounded-2xl dark:border-gray-800 lg:p-6">
+      <div className="flex flex-col gap-5 xl:flex-row xl:items-center xl:justify-between">
+        <div className="flex flex-col items-center w-full gap-6 xl:flex-row">
+          <div
+            onClick={handleAvatarClick}
+            className="relative w-20 h-20 overflow-hidden border border-gray-200 rounded-full cursor-pointer dark:border-gray-800 group shrink-0"
+          >
+            <Image
+              width={80}
+              height={80}
+              src={previewImage}
+              alt="avatar"
+              className="object-cover w-full h-full"
+              priority
+            />
+            
+            <div className="absolute inset-0 flex items-center justify-center transition-opacity bg-black/50 opacity-0 group-hover:opacity-100">
+              {isUploading ? (
+                <svg className="w-6 h-6 text-white animate-spin" viewBox="0 0 24 24">
+                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none"></circle>
+                  <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                </svg>
+              ) : (
+                <svg className="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
+                </svg>
+              )}
            </div>

-            <div className="order-3 xl:order-2">
-              <h4 className="mb-2 text-lg font-semibold text-center text-gray-800 dark:text-white/90 xl:text-left">
-                {data.data?.profile?.display_name || "Full Name"}
-              </h4>
-              <div className="flex flex-col items-center gap-1 text-center xl:flex-row xl:gap-3 xl:text-left">
-                <p className="text-sm text-blue-500 dark:text-gray-400">
-                  {data.data?.roles?.map((role) => role.name).join(", ") ||
-                    "No roles available"}
-                </p>
-                {data.data?.profile?.bio && (
-                  <>
-                    <div className="hidden h-3.5 w-px bg-gray-300 dark:bg-gray-700 xl:block"></div>
-                    <p className="text-sm text-gray-500 dark:text-gray-400 max-w-[450px] truncate">
-                      {data.data?.profile?.bio || "No bio available"}
-                    </p>
-                  </>
-                )}
-                {data.data?.profile?.location && (
-                  <>
-                    <div className="hidden h-3.5 w-px bg-gray-300 dark:bg-gray-700 xl:block"></div>
-                    <p className="text-sm text-gray-500 dark:text-gray-400">
-                      {data.data?.profile?.location || "user location"}
-                    </p>
-                  </>
-                )}
-              </div>
+            <input
+              type="file"
+              ref={fileInputRef}
+              className="hidden"
+              accept="image/*"
+              onChange={handleFileChange}
+            />
+          </div>
+
+          <div className="order-3 xl:order-2">
+            <h4 className="mb-2 text-lg font-semibold text-center text-gray-800 dark:text-white/90 xl:text-left">
+              {data.data?.profile?.display_name || "Full Name"}
+            </h4>
+            <div className="flex flex-col items-center gap-1 text-center xl:flex-row xl:gap-3 xl:text-left">
+              <p className="text-sm text-blue-500 dark:text-gray-400">
+                {data.data?.roles?.map((role) => role.name).join(", ") || "No roles available"}
+              </p>
+              {data.data?.profile?.bio && (
+                <>
+                  <div className="hidden h-3.5 w-px bg-gray-300 dark:bg-gray-700 xl:block"></div>
+                  <p className="text-sm text-gray-500 dark:text-gray-400 max-w-[450px] truncate">
+                    {data.data.profile.bio}
+                  </p>
+                </>
+              )}
            </div>
          </div>
        </div>
      </div>
-    </>
+    </div>
  );
-}
+}