Settings - WIP
* User account settings * Workspace settings * Workspace membership management *
This commit is contained in:
Philipinho
@@ -0,0 +1,46 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
import ButtonWithIcon from "@/components/ui/button-with-icon";
|
||||
import { IconUserPlus } from "@tabler/icons-react";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { WorkspaceInviteForm } from "@/features/workspace/components/workspace-invite-form";
|
||||
|
||||
export default function WorkspaceInviteDialog() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<ButtonWithIcon
|
||||
icon={<IconUserPlus size="20" />}
|
||||
className="font-medium">
|
||||
Invite Members
|
||||
</ButtonWithIcon>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>
|
||||
Invite new members
|
||||
</DialogTitle>
|
||||
<DialogDescription>
|
||||
Here you can invite new members.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<ScrollArea className=" max-h-[60vh]">
|
||||
<WorkspaceInviteForm />
|
||||
</ScrollArea>
|
||||
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,154 @@
|
||||
"use client";
|
||||
|
||||
import * as z from "zod";
|
||||
import { useFieldArray, useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { IconTrashX } from "@tabler/icons-react";
|
||||
import ButtonWithIcon from "@/components/ui/button-with-icon";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
enum UserRole {
|
||||
GUEST = "guest",
|
||||
MEMBER = "member",
|
||||
OWNER = "owner",
|
||||
}
|
||||
|
||||
const inviteFormSchema = z.object({
|
||||
members: z
|
||||
.array(
|
||||
z.object({
|
||||
email: z.string({
|
||||
required_error: "Email is required",
|
||||
}).email({ message: "Please enter a valid email" }),
|
||||
role: z
|
||||
.string({
|
||||
required_error: "Please select a role",
|
||||
}),
|
||||
}),
|
||||
),
|
||||
});
|
||||
|
||||
type InviteFormValues = z.infer<typeof inviteFormSchema>
|
||||
|
||||
const defaultValues: Partial<InviteFormValues> = {
|
||||
members: [
|
||||
{ email: "user@example.com", role: "member" },
|
||||
],
|
||||
};
|
||||
|
||||
export function WorkspaceInviteForm() {
|
||||
|
||||
const form = useForm<InviteFormValues>({
|
||||
resolver: zodResolver(inviteFormSchema),
|
||||
defaultValues,
|
||||
mode: "onChange",
|
||||
});
|
||||
|
||||
const { fields, append, remove } = useFieldArray({
|
||||
name: "members",
|
||||
control: form.control,
|
||||
});
|
||||
|
||||
function onSubmit(data: InviteFormValues) {
|
||||
console.log(data);
|
||||
}
|
||||
|
||||
return (
|
||||
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
|
||||
<div>
|
||||
{
|
||||
fields.map((field, index) => {
|
||||
const key = index.toString();
|
||||
return (
|
||||
<div key={key} className="flex justify-between items-center py-2 gap-2">
|
||||
|
||||
<div className="flex-grow">
|
||||
{index === 0 && <FormLabel>Email</FormLabel>}
|
||||
<FormField
|
||||
control={form.control}
|
||||
key={field.id}
|
||||
name={`members.${index}.email`}
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex-grow">
|
||||
{index === 0 && <FormLabel>Role</FormLabel>}
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
key={field.id}
|
||||
name={`members.${index}.role`}
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<Select onValueChange={field.onChange} defaultValue={field.value}>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select a role for this member" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
{
|
||||
Object.keys(UserRole).map((key) => {
|
||||
const value = UserRole[key as keyof typeof UserRole];
|
||||
return (
|
||||
<SelectItem key={key} value={value}>
|
||||
{key.charAt(0).toUpperCase() + key.slice(1).toLowerCase()}
|
||||
</SelectItem>
|
||||
);
|
||||
})
|
||||
}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)} />
|
||||
</div>
|
||||
|
||||
<div className="flex items-center">
|
||||
{index != 0 &&
|
||||
<ButtonWithIcon
|
||||
icon={<IconTrashX size={16} />}
|
||||
variant="secondary"
|
||||
onClick={() => remove(index)}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
})
|
||||
}
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="mt-2"
|
||||
onClick={() => append({ email: "", role: UserRole.MEMBER })}
|
||||
>
|
||||
Add
|
||||
</Button>
|
||||
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end">
|
||||
<Button type="submit">Send Invitation</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
|
||||
);
|
||||
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
"use client";
|
||||
|
||||
import { useAtom } from "jotai/index";
|
||||
import { currentUserAtom } from "@/features/user/atoms/current-user-atom";
|
||||
import { useEffect, useState } from "react";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import toast from "react-hot-toast";
|
||||
|
||||
|
||||
export default function WorkspaceInviteSection() {
|
||||
const [currentUser] = useAtom(currentUserAtom);
|
||||
const [inviteLink, setInviteLink] = useState<string>("");
|
||||
|
||||
useEffect(() => {
|
||||
setInviteLink(`${window.location.origin}/invite/${currentUser.workspace.inviteCode}`);
|
||||
}, [currentUser.workspace.inviteCode]);
|
||||
|
||||
function handleCopy(): void {
|
||||
try {
|
||||
navigator.clipboard?.writeText(inviteLink);
|
||||
toast.success("Link copied successfully");
|
||||
} catch (err) {
|
||||
toast.error("Failed to copy to clipboard");
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div>
|
||||
<h2 className="font-semibold py-5">Invite members</h2>
|
||||
<p className="text-muted-foreground">
|
||||
Anyone with the link can join this workspace.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex space-x-2">
|
||||
<Input value={inviteLink} readOnly />
|
||||
<Button variant="secondary" className="shrink-0" onClick={handleCopy}>
|
||||
Copy link
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
"use client";
|
||||
|
||||
import { useAtom } from "jotai/index";
|
||||
import { currentUserAtom } from "@/features/user/atoms/current-user-atom";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { getWorkspaceUsers } from "@/features/workspace/services/workspace-service";
|
||||
import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
|
||||
export default function WorkspaceMembersTable() {
|
||||
const [currentUser] = useAtom(currentUserAtom);
|
||||
|
||||
const workspaceUsers = useQuery({
|
||||
queryKey: ["workspaceUsers", currentUser.workspace.id],
|
||||
queryFn: async () => {
|
||||
return await getWorkspaceUsers();
|
||||
},
|
||||
});
|
||||
|
||||
const { data, isLoading, isSuccess } = workspaceUsers;
|
||||
|
||||
return (
|
||||
<>
|
||||
{isSuccess &&
|
||||
|
||||
<Table>
|
||||
<TableCaption>Your workspace members will appear here.</TableCaption>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Name</TableHead>
|
||||
<TableHead>Email</TableHead>
|
||||
<TableHead>Role</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
|
||||
{
|
||||
data['users']?.map((user, index) => (
|
||||
<TableRow key={index}>
|
||||
<TableCell className="font-medium">{user.name}</TableCell>
|
||||
<TableCell>{user.email}</TableCell>
|
||||
<TableCell> <Badge variant="secondary">{user.workspaceRole}</Badge></TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
}
|
||||
|
||||
</TableBody>
|
||||
</Table>
|
||||
}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
"use client";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormDescription,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from "@/components/ui/form";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { currentUserAtom } from "@/features/user/atoms/current-user-atom";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { useAtom } from "jotai";
|
||||
import { useForm } from "react-hook-form";
|
||||
import * as z from "zod";
|
||||
import toast from "react-hot-toast";
|
||||
import { updateUser } from "@/features/user/services/user-service";
|
||||
import { useState } from "react";
|
||||
import { focusAtom } from "jotai-optics";
|
||||
import { updateWorkspace } from "@/features/workspace/services/workspace-service";
|
||||
import { IWorkspace } from "@/features/workspace/types/workspace.types";
|
||||
|
||||
const profileFormSchema = z.object({
|
||||
name: z.string(),
|
||||
});
|
||||
|
||||
type ProfileFormValues = z.infer<typeof profileFormSchema>;
|
||||
|
||||
const workspaceAtom = focusAtom(currentUserAtom, (optic) => optic.prop("workspace"));
|
||||
|
||||
export default function WorkspaceNameForm() {
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [currentUser] = useAtom(currentUserAtom);
|
||||
const [, setWorkspace] = useAtom(workspaceAtom);
|
||||
|
||||
const defaultValues: Partial<ProfileFormValues> = {
|
||||
name: currentUser?.workspace?.name,
|
||||
};
|
||||
|
||||
const form = useForm<ProfileFormValues>({
|
||||
resolver: zodResolver(profileFormSchema),
|
||||
defaultValues,
|
||||
});
|
||||
|
||||
async function onSubmit(data: Partial<IWorkspace>) {
|
||||
setIsLoading(true);
|
||||
|
||||
try {
|
||||
const updatedWorkspace = await updateWorkspace(data);
|
||||
setWorkspace(updatedWorkspace);
|
||||
toast.success("Updated successfully");
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
toast.error("Failed to update data.");
|
||||
}
|
||||
|
||||
setIsLoading(false);
|
||||
|
||||
}
|
||||
|
||||
return (
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="name"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Name</FormLabel>
|
||||
<FormControl>
|
||||
<Input className="max-w-md" placeholder="e.g ACME" {...field} />
|
||||
</FormControl>
|
||||
<FormDescription>
|
||||
Your workspace name.
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Button type="submit">Save</Button>
|
||||
</form>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user