mirror of
https://github.com/Portabase/portabase.git
synced 2026-07-14 11:16:13 +02:00
Some bug and visuals improvements.
This commit is contained in:
charlesgauthereau
@@ -1,20 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import {User, Settings, UserOrganization} from "@prisma/client";
|
||||
import {SettingsUsersTab} from "@/components/wrappers/dashboard/settings/SettingsUsersTab/SettingsUsersTab";
|
||||
|
||||
|
||||
export type SettingsTabsProps = {
|
||||
currentUser: User;
|
||||
users: UserOrganization[];
|
||||
settings: Settings;
|
||||
}
|
||||
|
||||
export const SettingsTabs = (props: SettingsTabsProps) => {
|
||||
|
||||
const {currentUser, users} = props;
|
||||
|
||||
return (
|
||||
<SettingsUsersTab currentUser={currentUser} users={users}/>
|
||||
)
|
||||
}
|
||||
@@ -1,97 +0,0 @@
|
||||
import {usersColumns} from "@/components/wrappers/dashboard/settings/SettingsUsersTab/columns-users-settings";
|
||||
import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from "@/components/ui/table";
|
||||
import {flexRender, Row} from "@tanstack/react-table";
|
||||
import {cn} from "@/lib/utils";
|
||||
|
||||
|
||||
export type SettingsUsersTabProps = {
|
||||
// currentUser: User;
|
||||
// users: UserOrganization[]
|
||||
}
|
||||
|
||||
export const SettingsUsersTab = (props: SettingsUsersTabProps) => {
|
||||
|
||||
// const {currentUser, users} = props;
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full py-4">
|
||||
<div className="flex gap-4 h-fit justify-between">
|
||||
<h1>List of organization's users</h1>
|
||||
</div>
|
||||
<div className="mt-5">
|
||||
{/*<DataTableWithPagination*/}
|
||||
{/* columns={usersColumns}*/}
|
||||
{/* data={users}*/}
|
||||
{/* DataTable={UsersDataTable}*/}
|
||||
{/* dataTableProps={{currentUser}}*/}
|
||||
{/*/>*/}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
|
||||
export type usersDataTableProps = {
|
||||
// currentUser: User;
|
||||
// table: any,
|
||||
}
|
||||
|
||||
export const UsersDataTable = (
|
||||
// {currentUser, table}: usersDataTableProps
|
||||
) => {
|
||||
|
||||
return (
|
||||
<div className="rounded-md border w-full ">
|
||||
{/*<Table className="w-full">*/}
|
||||
{/* <TableHeader>*/}
|
||||
{/* {table.getHeaderGroups().map((headerGroup) => (*/}
|
||||
{/* <TableRow key={headerGroup.id}>*/}
|
||||
{/* {headerGroup.headers.map((header) => {*/}
|
||||
{/* return (*/}
|
||||
{/* <TableHead key={header.id}>*/}
|
||||
{/* {header.isPlaceholder*/}
|
||||
{/* ? null*/}
|
||||
{/* : flexRender(*/}
|
||||
{/* header.column.columnDef.header,*/}
|
||||
{/* header.getContext()*/}
|
||||
{/* )}*/}
|
||||
{/* </TableHead>*/}
|
||||
{/* )*/}
|
||||
{/* })}*/}
|
||||
{/* </TableRow>*/}
|
||||
{/* ))}*/}
|
||||
{/* </TableHeader>*/}
|
||||
{/* <TableBody>*/}
|
||||
{/* {table.getRowModel().rows?.length ? (*/}
|
||||
{/* table.getRowModel().rows.map((row: Row<UserOrganization>) => {*/}
|
||||
{/* return(*/}
|
||||
{/* <TableRow*/}
|
||||
{/* className={cn((row.original.userId) === currentUser.id ? "opacity-40 pointer-events-none" : "")}*/}
|
||||
{/* key={row.id}*/}
|
||||
{/* data-state={row.getIsSelected() && "selected"}*/}
|
||||
{/* >*/}
|
||||
{/* {row.getVisibleCells().map((cell) => (*/}
|
||||
{/* <TableCell key={cell.id}>*/}
|
||||
{/* {flexRender(*/}
|
||||
{/* cell.column.columnDef.cell,*/}
|
||||
{/* cell.getContext(),*/}
|
||||
{/* )}*/}
|
||||
{/* </TableCell>*/}
|
||||
{/* ))}*/}
|
||||
{/* </TableRow>*/}
|
||||
{/* )*/}
|
||||
{/* }*/}
|
||||
|
||||
{/* )) : (*/}
|
||||
{/* <TableRow>*/}
|
||||
{/* <TableCell colSpan={table.getAllColumns().length} className="h-24 text-center">*/}
|
||||
{/* No results.*/}
|
||||
{/* </TableCell>*/}
|
||||
{/* </TableRow>*/}
|
||||
{/* )}*/}
|
||||
{/* </TableBody>*/}
|
||||
{/*</Table>*/}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
-60
@@ -1,60 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { ColumnDef } from "@tanstack/react-table";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { useMutation } from "@tanstack/react-query";
|
||||
import { toast } from "sonner";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
|
||||
import { updateUserOrganizationAction } from "@/components/wrappers/dashboard/settings/SettingsUsersTab/settings-user-tab.action";
|
||||
import {OrganizationMember} from "@/db/schema/03_member";
|
||||
|
||||
export const usersColumns: ColumnDef<OrganizationMember>[] = [
|
||||
{
|
||||
accessorKey: "role",
|
||||
header: "Role",
|
||||
cell: ({ row }) => {
|
||||
const router = useRouter();
|
||||
const [role, setRole] = useState<string>(row.getValue("role"));
|
||||
|
||||
const updateMutation = useMutation({
|
||||
mutationFn: () => updateUserOrganizationAction({ id: row.original.id, role: role }),
|
||||
onSuccess: () => {
|
||||
toast.success(`User updated successfully.`);
|
||||
// router.refresh()
|
||||
},
|
||||
onError: () => {
|
||||
toast.error(`An error occurred while updating user information.`);
|
||||
},
|
||||
});
|
||||
|
||||
const handleUpdateRole = async () => {
|
||||
const nextRole = role === "admin" ? "member" : role === "member" ? "admin" : "admin";
|
||||
setRole(nextRole);
|
||||
await updateMutation.mutateAsync();
|
||||
};
|
||||
|
||||
return (
|
||||
<Badge className="cursor-pointer" onClick={() => handleUpdateRole()} variant="outline">
|
||||
{role}
|
||||
</Badge>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: "user.name",
|
||||
header: "Name",
|
||||
},
|
||||
{
|
||||
accessorKey: "user.email",
|
||||
header: "Email",
|
||||
},
|
||||
{
|
||||
accessorKey: "updatedAt",
|
||||
header: "Updated At",
|
||||
cell: ({ row }) => {
|
||||
return new Date(row.getValue("updatedAt")).toLocaleString("fr-FR");
|
||||
},
|
||||
},
|
||||
];
|
||||
-30
@@ -1,30 +0,0 @@
|
||||
"use server"
|
||||
import {userAction} from "@/safe-actions";
|
||||
import {z} from "zod";
|
||||
import {prisma} from "@/prisma";
|
||||
|
||||
|
||||
export const updateUserOrganizationAction = userAction
|
||||
.schema(
|
||||
z.object({
|
||||
id: z.string(),
|
||||
role: z.string(),
|
||||
}
|
||||
)
|
||||
)
|
||||
.action(async ({parsedInput, ctx}) => {
|
||||
const updatedUserOrganization = await prisma.userOrganization.update({
|
||||
where: {
|
||||
id: parsedInput.id,
|
||||
},
|
||||
data: {
|
||||
role: parsedInput.role,
|
||||
},
|
||||
})
|
||||
return {
|
||||
data: updatedUserOrganization,
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
@@ -0,0 +1,57 @@
|
||||
"use client";
|
||||
|
||||
import { ColumnDef } from "@tanstack/react-table";
|
||||
import {MemberWithUser} from "@/db/schema/02_organization";
|
||||
import {useState} from "react";
|
||||
import {useSession} from "@/lib/auth/auth-client";
|
||||
import {useMutation} from "@tanstack/react-query";
|
||||
import {updateUserAction} from "@/components/wrappers/dashboard/profile/UserForm/user-form.action";
|
||||
import {toast} from "sonner";
|
||||
import {Badge} from "@/components/ui/badge";
|
||||
|
||||
export const organizationMemberColumns: ColumnDef<MemberWithUser>[] = [
|
||||
{
|
||||
accessorKey: "role",
|
||||
header: "Role",
|
||||
cell: ({row}) => {
|
||||
const [role, setRole] = useState<string>(row.getValue("role"));
|
||||
const { data: session } = useSession();
|
||||
const isCurrentUser = session?.user.email === row.original.user.email;
|
||||
|
||||
// const updateMutation = useMutation({
|
||||
// mutationFn: () => updateUserAction({id: row.original.id, data: {role: role}}),
|
||||
// onSuccess: () => {
|
||||
// toast.success(`User updated successfully.`);
|
||||
// },
|
||||
// onError: () => {
|
||||
// toast.error(`An error occurred while updating user information.`);
|
||||
// },
|
||||
// });
|
||||
|
||||
const handleUpdateRole = async () => {
|
||||
// const nextRole = role === "admin" ? "pending" : role === "pending" ? "user" : "admin";
|
||||
// setRole(nextRole);
|
||||
// await updateMutation.mutateAsync();
|
||||
};
|
||||
|
||||
return (
|
||||
<Badge
|
||||
className={isCurrentUser ? "cursor-not-allowed opacity-50" : "cursor-pointer"}
|
||||
onClick={isCurrentUser ? undefined : () => handleUpdateRole()}
|
||||
variant="outline"
|
||||
>
|
||||
{role}
|
||||
</Badge>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: "user.name",
|
||||
header: "Name",
|
||||
},
|
||||
{
|
||||
accessorKey: "user.email",
|
||||
header: "Email",
|
||||
}
|
||||
|
||||
];
|
||||
@@ -0,0 +1,23 @@
|
||||
import {DataTable} from "@/components/wrappers/common/table/data-table";
|
||||
import {usersColumnsAdmin} from "@/components/wrappers/dashboard/admin/columns-users";
|
||||
import {MemberWithUser, Organization, OrganizationWithMembers} from "@/db/schema/02_organization";
|
||||
import {OrganizationInvitation} from "@/db/schema/04_invitation";
|
||||
import {organizationMemberColumns} from "@/components/wrappers/dashboard/settings/columns-organization-members";
|
||||
|
||||
|
||||
interface SettingsOrganizationMembersTableProps {
|
||||
organization: OrganizationWithMembers
|
||||
}
|
||||
|
||||
export const SettingsOrganizationMembersTable = ({organization}: SettingsOrganizationMembersTableProps) => {
|
||||
return (
|
||||
<div className="flex flex-col h-full py-4">
|
||||
<div className="flex gap-4 h-fit justify-between">
|
||||
<h1>List of Organization members</h1>
|
||||
</div>
|
||||
<div className="mt-5 h-full">
|
||||
<DataTable columns={organizationMemberColumns} data={organization.members as MemberWithUser[]}/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user