Kain344/History-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

change role

Browse Source
This commit is contained in:
ducanh
2026-04-08 22:36:49 +07:00
parent 30a2286f52
commit c5cf156338
6 changed files with 47 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/app/(admin)/(others-pages)/(tables)/user-table/page.tsx
View File

@@ -72,6 +72,7 @@ export default function UserTable() {
};
const response = await apiGetListUser(payload);
if (response?.status) {
setTableData(response);
}

3
src/app/globals.css
View File

@@ -5,6 +5,7 @@
@theme {
--font-*: initial;
--font-outfit: Outfit, sans-serif;
--font-inter: "Inter", ui-sans-serif, system-ui, sans-serif;
--breakpoint-*: initial;
--breakpoint-2xsm: 375px;
@@ -188,7 +189,7 @@
cursor: pointer;
}
body {
@apply relative font-normal font-outfit z-1 bg-gray-50;
@apply relative font-normal font-inter z-1 bg-gray-50;
}
}

6
src/app/layout.tsx
View File

@@ -1,4 +1,4 @@
import { Outfit } from 'next/font/google';
import { Inter } from 'next/font/google';
import './globals.css';
import "flatpickr/dist/flatpickr.css";
import { SidebarProvider } from '@/context/SidebarContext';
@@ -6,7 +6,7 @@ import { ThemeProvider } from '@/context/ThemeContext';
import { Toaster } from 'sonner';
import StoreProvider from '@/store/StoreProvider';
const outfit = Outfit({
const inter = Inter({
subsets: ["latin"],
});
@@ -17,7 +17,7 @@ export default function RootLayout({
}>) {
return (
<html lang="en">
<body className={`${outfit.className} dark:bg-gray-900`}>
<body className={`${inter.className} dark:bg-gray-900`}>
<StoreProvider>
<ThemeProvider>
<SidebarProvider>{children} <Toaster closeButton richColors position="top-right" /> </SidebarProvider>

49
src/components/tables/ChangeRoleModal.tsx
View File

@@ -18,6 +18,8 @@ interface ChangeRoleModalProps {
onSuccess: () => void;
}
const DEFAULT_ROLE_NAME = "USER";
export default function ChangeRoleModal({ isOpen, onClose, user, onSuccess }: ChangeRoleModalProps) {
const [roles, setRoles] = useState<Role[]>([]);
const [selectedRoleIds, setSelectedRoleIds] = useState<string[]>([]);
@@ -42,9 +44,13 @@ export default function ChangeRoleModal({ isOpen, onClose, user, onSuccess }: Ch
}
}, [isOpen, user]);
const handleToggleRole = (roleId: string) => {
const handleToggleRole = (roleId: string, isDefault: boolean) => {
if (isDefault) return;
setSelectedRoleIds((prev) =>
prev.includes(roleId) ? prev.filter((id) => id !== roleId) : [...prev, roleId]
prev.includes(roleId)
? prev.filter((id) => id !== roleId)
: [...prev, roleId]
);
};
@@ -54,11 +60,12 @@ export default function ChangeRoleModal({ isOpen, onClose, user, onSuccess }: Ch
try {
setLoading(true);
const payload = {
role_ids: selectedRoleIds,
user_id: user.id,
};
console.log("Payload gửi lên API:", payload);
await apiChangeRole(user.id, payload);
toast.success("Cập nhật vai trò thành công!");
onSuccess();
@@ -95,20 +102,42 @@ export default function ChangeRoleModal({ isOpen, onClose, user, onSuccess }: Ch
<div className="flex flex-col space-y-1 max-h-[300px] overflow-y-auto custom-scrollbar -mx-2 px-2">
{roles.map((role) => {
const isSelected = selectedRoleIds.includes(role.id);
const isDefault = role.name === DEFAULT_ROLE_NAME;
return (
<label
key={role.id}
className="flex items-center gap-3 p-2.5 rounded-lg cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors"
className={`flex items-center gap-3 p-2.5 rounded-lg transition-colors ${
isDefault
? "opacity-40 cursor-not-allowed bg-gray-50 dark:bg-gray-800/30"
: "cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/50"
}`}
>
<input
type="checkbox"
checked={isSelected}
onChange={() => handleToggleRole(role.id)}
className="w-4 h-4 text-brand-500 border-gray-300 rounded focus:ring-brand-500 dark:border-gray-600 dark:bg-gray-700"
checked={isDefault ? true : isSelected}
onChange={() => handleToggleRole(role.id, isDefault)}
disabled={isDefault}
className={`w-4 h-4 rounded border-gray-300 focus:ring-brand-500 dark:border-gray-600 dark:bg-gray-700 ${
isDefault ? "text-gray-400" : "text-brand-500"
}`}
/>
<span className={`text-sm ${isSelected ? "text-gray-900 dark:text-white font-medium" : "text-gray-700 dark:text-gray-300"}`}>
{role.name}
</span>
<div className="flex flex-col">
<span className={`text-sm ${
isDefault
? "text-gray-500 font-normal"
: isSelected
? "text-gray-900 dark:text-white font-medium"
: "text-gray-700 dark:text-gray-300"
}`}>
{role.name}
</span>
{isDefault && (
<span className="text-[10px] text-gray-400 italic">
Mặc định không thể xóa
</span>
)}
</div>
</label>
);
})}

2
src/components/user-profile/UserMetaCard.tsx
View File

@@ -33,7 +33,7 @@ export default function UserMetaCard({ data }: { data: UserMetaCardProps }) {
"No roles available"}
</p>
<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">
<p className="text-sm text-gray-500 dark:text-gray-400 max-w-[450px] truncate">
{data.data?.profile?.bio || "No bio available"}
</p>
<div className="hidden h-3.5 w-px bg-gray-300 dark:bg-gray-700 xl:block"></div>

2
src/service/adminService.ts
View File

@@ -11,7 +11,7 @@ export const apiGetListUser = async (payload: getUserDto) => {
export const apiChangeRole = async (id: string, payload: any) => {
const response = await api.patch(API.Admin.CHANGE_ROLE(id), payload);
console.log("Response từ API sau khi đổi role:", response);
// console.log("Response từ API sau khi đổi role:", response);
return response?.data;
};
export const apiDeleteUser = async (id: string) => {