From 1f8a6b18df742fee258906349a35d70f4fd90824 Mon Sep 17 00:00:00 2001 From: vergiLgood1 Date: Fri, 11 Apr 2025 15:34:34 +0700 Subject: [PATCH] fixed bug scroll area pada setting components --- .../_components/settings/import-data.tsx | 12 +- .../settings/notification-settings.tsx | 12 +- .../settings/preference-settings.tsx | 6 +- .../_components/settings/profile-settings.tsx | 104 ++++--------- .../_components/settings/security-setting.tsx | 8 +- .../_components/settings/setting-dialog.tsx | 140 +++++++----------- .../_handlers/use-profile-form.ts | 13 +- 7 files changed, 95 insertions(+), 200 deletions(-) diff --git a/sigap-website/app/(pages)/(admin)/_components/settings/import-data.tsx b/sigap-website/app/(pages)/(admin)/_components/settings/import-data.tsx index 24ea9cb..745d05f 100644 --- a/sigap-website/app/(pages)/(admin)/_components/settings/import-data.tsx +++ b/sigap-website/app/(pages)/(admin)/_components/settings/import-data.tsx @@ -61,14 +61,8 @@ const ImportData = () => { }, []); return ( - -
+
+

Import data

@@ -134,7 +128,7 @@ const ImportData = () => {
*/}
- +
); }; diff --git a/sigap-website/app/(pages)/(admin)/_components/settings/notification-settings.tsx b/sigap-website/app/(pages)/(admin)/_components/settings/notification-settings.tsx index ff611a7..f3c7324 100644 --- a/sigap-website/app/(pages)/(admin)/_components/settings/notification-settings.tsx +++ b/sigap-website/app/(pages)/(admin)/_components/settings/notification-settings.tsx @@ -93,14 +93,8 @@ export default function NotificationsSetting() { }; return ( - -
+
+

Notifications

@@ -174,6 +168,6 @@ export default function NotificationsSetting() {
- +
); } diff --git a/sigap-website/app/(pages)/(admin)/_components/settings/preference-settings.tsx b/sigap-website/app/(pages)/(admin)/_components/settings/preference-settings.tsx index 7060802..843243e 100644 --- a/sigap-website/app/(pages)/(admin)/_components/settings/preference-settings.tsx +++ b/sigap-website/app/(pages)/(admin)/_components/settings/preference-settings.tsx @@ -241,8 +241,8 @@ export default function PreferencesSettings() { } return ( - -
+
+

Preferences

@@ -428,6 +428,6 @@ export default function PreferencesSettings() {
- +
); } diff --git a/sigap-website/app/(pages)/(admin)/_components/settings/profile-settings.tsx b/sigap-website/app/(pages)/(admin)/_components/settings/profile-settings.tsx index a604673..7d2dc81 100644 --- a/sigap-website/app/(pages)/(admin)/_components/settings/profile-settings.tsx +++ b/sigap-website/app/(pages)/(admin)/_components/settings/profile-settings.tsx @@ -1,67 +1,25 @@ -"use client"; +"use client" +import { Loader2, ImageIcon } from "lucide-react" -import type React from "react"; +import { Form, FormControl, FormField, FormItem, FormMessage } from "@/app/_components/ui/form" +import { Input } from "@/app/_components/ui/input" +import { Button } from "@/app/_components/ui/button" +import { Avatar, AvatarFallback, AvatarImage } from "@/app/_components/ui/avatar" +import { Label } from "@/app/_components/ui/label" +import { Separator } from "@/app/_components/ui/separator" +import { Switch } from "@/app/_components/ui/switch" +import { useProfileFormHandlers } from "../../dashboard/user-management/_handlers/use-profile-form" +import { CTexts } from "@/app/_utils/const/texts" -import type { IUserSchema } from "@/src/entities/models/users/users.model"; - -import { useForm } from "react-hook-form"; -import { zodResolver } from "@hookform/resolvers/zod"; -import { z } from "zod"; -import { Loader2, ImageIcon } from "lucide-react"; - -import { - Form, - FormControl, - FormField, - FormItem, - FormMessage, -} from "@/app/_components/ui/form"; -import { Input } from "@/app/_components/ui/input"; -import { Button } from "@/app/_components/ui/button"; -import { - Avatar, - AvatarFallback, - AvatarImage, -} from "@/app/_components/ui/avatar"; -import { Label } from "@/app/_components/ui/label"; -import { Separator } from "@/app/_components/ui/separator"; -import { Switch } from "@/app/_components/ui/switch"; -import { useRef, useState } from "react"; -import { ScrollArea } from "@/app/_components/ui/scroll-area"; -import { - updateUser, -} from "@/app/(pages)/(admin)/dashboard/user-management/action"; -import { useProfileFormHandlers } from "../../dashboard/user-management/_handlers/use-profile-form"; -import { CTexts } from "@/app/_utils/const/texts"; - -const profileFormSchema = z.object({ - username: z.string().nullable().optional(), - avatar: z.string().nullable().optional(), -}); - -type ProfileFormValues = z.infer; - -interface ProfileSettingsProps { - user: IUserSchema | null; -} - -export function ProfileSettings({ user }: ProfileSettingsProps) { - const email = user?.email || ""; - const username = user?.profile?.username || ""; - - const { - form, - fileInputRef, - handleFileChange, - handleAvatarClick, - isPending, - onSubmit, - } = useProfileFormHandlers({ user }); +export function ProfileSettings() { + const { form, fileInputRef, handleFileChange, handleAvatarClick, isPending, user } = useProfileFormHandlers() + const email = user?.email || "" + const username = user?.profile?.username || "" return ( - -
+
+
{ }} className="space-y-8">
@@ -70,22 +28,14 @@ export function ProfileSettings({ user }: ProfileSettingsProps) {
-
+
{isPending ? (
) : ( <> - - - {username?.[0]?.toUpperCase() || email?.[0]?.toUpperCase()} - + + {username?.[0]?.toUpperCase() || email?.[0]?.toUpperCase()} )}
@@ -166,9 +116,7 @@ export function ProfileSettings({ user }: ProfileSettingsProps) {
-

- Set a permanent password to login to your account. -

+

Set a permanent password to login to your account.

- - ); +
+ ) } diff --git a/sigap-website/app/(pages)/(admin)/_components/settings/security-setting.tsx b/sigap-website/app/(pages)/(admin)/_components/settings/security-setting.tsx index d0ecb36..379e0cb 100644 --- a/sigap-website/app/(pages)/(admin)/_components/settings/security-setting.tsx +++ b/sigap-website/app/(pages)/(admin)/_components/settings/security-setting.tsx @@ -4,12 +4,12 @@ import { Button } from "@/app/_components/ui/button"; import { Separator } from "@/app/_components/ui/separator"; import { IUserSchema } from "@/src/entities/models/users/users.model"; +import { useGetCurrentUserQuery } from "../../dashboard/user-management/_queries/queries"; -interface SecuritySettingsProps { - user: IUserSchema | null; -} +export function SecuritySettings() { + + const { data: user } = useGetCurrentUserQuery(); -export function SecuritySettings({ user }: SecuritySettingsProps) { return (
diff --git a/sigap-website/app/(pages)/(admin)/_components/settings/setting-dialog.tsx b/sigap-website/app/(pages)/(admin)/_components/settings/setting-dialog.tsx index 34231bb..0be087c 100644 --- a/sigap-website/app/(pages)/(admin)/_components/settings/setting-dialog.tsx +++ b/sigap-website/app/(pages)/(admin)/_components/settings/setting-dialog.tsx @@ -1,78 +1,52 @@ -"use client"; +"use client" +import type React from "react" -import { cn } from "@/app/_lib/utils"; -import { - Dialog, - DialogContent, - DialogTrigger, -} from "@/app/_components/ui/dialog"; -import { ScrollArea } from "@/app/_components/ui/scroll-area"; -import { Separator } from "@/app/_components/ui/separator"; -import { - Avatar, - AvatarFallback, - AvatarImage, -} from "@/app/_components/ui/avatar"; -import { - IconAdjustmentsHorizontal, - IconBaselineDensityLarge, - IconBell, - IconFileExport, - IconFileImport, - IconFingerprint, - IconLock, - IconPlugConnected, - IconSettings, - IconUser, - IconUsers, - IconWorld, -} from "@tabler/icons-react"; -import { ProfileSettings } from "./profile-settings"; -import { DialogTitle } from "@radix-ui/react-dialog"; -import { useState } from "react"; +import { cn } from "@/app/_lib/utils" +import { Dialog, DialogContent, DialogTrigger } from "@/app/_components/ui/dialog" +import { ScrollArea } from "@/app/_components/ui/scroll-area" +import { Separator } from "@/app/_components/ui/separator" +import { Avatar, AvatarFallback, AvatarImage } from "@/app/_components/ui/avatar" +import { IconAdjustmentsHorizontal, IconBell, IconFileExport, IconFileImport, IconUser } from "@tabler/icons-react" +import { ProfileSettings } from "./profile-settings" +import { DialogTitle } from "@radix-ui/react-dialog" +import { useState } from "react" -import NotificationsSetting from "./notification-settings"; -import PreferencesSettings from "./preference-settings"; -import ImportData from "./import-data"; -import { IUserSchema } from "@/src/entities/models/users/users.model"; -import { useUserStore } from "@/app/_lib/zustand/stores/user"; +import NotificationsSetting from "./notification-settings" +import PreferencesSettings from "./preference-settings" +import ImportData from "./import-data" + +import { useGetCurrentUserQuery } from "../../dashboard/user-management/_queries/queries" interface SettingsDialogProps { - trigger: React.ReactNode; - defaultTab?: string; - open?: boolean; - onOpenChange?: (open: boolean) => void; + trigger: React.ReactNode + defaultTab?: string + open?: boolean + onOpenChange?: (open: boolean) => void } interface SettingsTab { - id: string; - icon: typeof IconUser; - title: string; - content: React.ReactNode; + id: string + icon: typeof IconUser + title: string + content: React.ReactNode } interface SettingsSection { - title: string; - tabs: SettingsTab[]; + title: string + tabs: SettingsTab[] } -export function SettingsDialog({ - trigger, - defaultTab = "account", - open, - onOpenChange, -}: SettingsDialogProps) { +export function SettingsDialog({ trigger, defaultTab = "account", open, onOpenChange }: SettingsDialogProps) { + const { data: user, isPending } = useGetCurrentUserQuery() - const { user, isPending } = useUserStore(); - - const [selectedTab, setSelectedTab] = useState(defaultTab); + const [selectedTab, setSelectedTab] = useState(defaultTab) // Get user display name - const preferredName = user?.profile?.username || ""; - const userEmail = user?.email || ""; - const displayName = preferredName || userEmail?.split("@")[0] || "User"; - const userAvatar = user?.profile?.avatar || ""; + const preferredName = user?.profile?.username || "" + const userEmail = user?.email || "" + const displayName = preferredName || userEmail?.split("@")[0] || "User" + const userAvatar = user?.profile?.avatar || "" const sections: SettingsSection[] = [ { @@ -82,7 +56,7 @@ export function SettingsDialog({ id: "account", icon: IconUser, title: "My Account", - content: , + content: , }, { id: "preferences", @@ -115,17 +89,15 @@ export function SettingsDialog({ }, ], }, - ]; + ] - const currentTab = sections - .flatMap((section) => section.tabs) - .find((tab) => tab.id === selectedTab); + const currentTab = sections.flatMap((section) => section.tabs).find((tab) => tab.id === selectedTab) return ( {trigger} - +
{/* Sidebar */}
@@ -137,25 +109,17 @@ export function SettingsDialog({ ) : ( - - {displayName[0].toUpperCase()} - + {displayName[0].toUpperCase()} )} - {isPending ? ( -
- ) : ( - displayName - )} + {isPending ?
: displayName}
{sections.map((section, index) => (
-

- {section.title} -

+

{section.title}

{section.tabs.map((tab) => ( @@ -166,7 +130,7 @@ export function SettingsDialog({ "flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium", tab.id === selectedTab ? "bg-accent text-accent-foreground" - : "text-muted-foreground hover:bg-accent hover:text-accent-foreground" + : "text-muted-foreground hover:bg-accent hover:text-accent-foreground", )} > @@ -174,9 +138,7 @@ export function SettingsDialog({ ))}
- {index < sections.length - 1 && ( - - )} + {index < sections.length - 1 && }
))}
@@ -184,17 +146,17 @@ export function SettingsDialog({
{/* Content */} -
-
- {isPending ? ( -
- ) : ( - currentTab?.content - )} -
+
+ {isPending ? ( +
+ ) : ( + +
{currentTab?.content}
+ + )}
- ); + ) } diff --git a/sigap-website/app/(pages)/(admin)/dashboard/user-management/_handlers/use-profile-form.ts b/sigap-website/app/(pages)/(admin)/dashboard/user-management/_handlers/use-profile-form.ts index a7093bd..903c73b 100644 --- a/sigap-website/app/(pages)/(admin)/dashboard/user-management/_handlers/use-profile-form.ts +++ b/sigap-website/app/(pages)/(admin)/dashboard/user-management/_handlers/use-profile-form.ts @@ -14,6 +14,7 @@ import { toast } from "sonner" import { CNumbers } from "@/app/_utils/const/numbers" import { CTexts } from "@/app/_utils/const/texts" import { useUserActionsHandler } from "./actions/use-user-actions" +import { useGetCurrentUserQuery } from "../_queries/queries" // Profile update form schema const profileFormSchema = z.object({ @@ -26,14 +27,11 @@ const profileFormSchema = z.object({ type ProfileFormValues = z.infer -interface ProfileFormProps { - user: IUserSchema | null - onSuccess?: () => void -} - -export const useProfileFormHandlers = ({ user, onSuccess }: ProfileFormProps) => { +export const useProfileFormHandlers = () => { const { invalidateUsers, invalidateCurrentUser, invalidateUser } = useUserActionsHandler() + const { data: user } = useGetCurrentUserQuery() + const { mutateAsync: updateUser, isPending, @@ -176,7 +174,7 @@ export const useProfileFormHandlers = ({ user, onSuccess }: ProfileFormProps) => invalidateUser(user.id) // Call success callback - onSuccess?.() + // onSuccess?.() } catch (error) { console.error("Error updating profile:", error) toast.error("Error updating profile") @@ -191,6 +189,7 @@ export const useProfileFormHandlers = ({ user, onSuccess }: ProfileFormProps) => isPending, avatarPreview, fileInputRef, + user, } }