mirror of
https://github.com/docmost/docmost.git
synced 2025-11-13 03:42:36 +10:00
refactor directories
This commit is contained in:
Philipinho
@ -32,7 +32,7 @@ function EmojiPicker({ onEmojiSelect, icon, removeEmojiAction }: EmojiPickerInte
|
||||
position="bottom"
|
||||
>
|
||||
<Popover.Target>
|
||||
<ActionIcon color="gray" variant="transparent" onClick={handlers.toggle}>
|
||||
<ActionIcon c="gray" variant="transparent" onClick={handlers.toggle}>
|
||||
{icon}
|
||||
</ActionIcon>
|
||||
</Popover.Target>
|
||||
@ -42,7 +42,7 @@ function EmojiPicker({ onEmojiSelect, icon, removeEmojiAction }: EmojiPickerInte
|
||||
skinTonePosition='search'
|
||||
theme={colorScheme}
|
||||
/>
|
||||
<Button variant="default" color="gray"
|
||||
<Button variant="default" c="gray"
|
||||
size="xs"
|
||||
style={{ position: 'absolute', zIndex: 2, bottom: '1rem', right: '1rem'}}
|
||||
onClick={handleRemoveEmoji}>
|
||||
@ -1,25 +0,0 @@
|
||||
import React from "react";
|
||||
import AccountNameForm from '@/features/settings/account/settings/components/account-name-form';
|
||||
import ChangeEmail from '@/features/settings/account/settings/components/change-email';
|
||||
import ChangePassword from '@/features/settings/account/settings/components/change-password';
|
||||
import { Divider } from '@mantine/core';
|
||||
import AccountAvatar from '@/features/settings/account/settings/components/account-avatar';
|
||||
|
||||
export default function AccountSettings() {
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
<AccountAvatar />
|
||||
|
||||
<AccountNameForm />
|
||||
|
||||
<Divider my="lg" />
|
||||
|
||||
<ChangeEmail />
|
||||
|
||||
<Divider my="lg" />
|
||||
|
||||
<ChangePassword />
|
||||
</>);
|
||||
}
|
||||
@ -1,64 +0,0 @@
|
||||
import { focusAtom } from 'jotai-optics';
|
||||
import { currentUserAtom } from '@/features/user/atoms/current-user-atom';
|
||||
import { useState } from 'react';
|
||||
import { useAtom } from 'jotai';
|
||||
import { UserAvatar } from '@/components/ui/user-avatar';
|
||||
import { FileButton, Button, Text, Popover, Tooltip } from '@mantine/core';
|
||||
import { uploadAvatar } from '@/features/user/services/user-service';
|
||||
|
||||
const userAtom = focusAtom(currentUserAtom, (optic) => optic.prop('user'));
|
||||
|
||||
export default function AccountAvatar() {
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [currentUser] = useAtom(currentUserAtom);
|
||||
const [, setUser] = useAtom(userAtom);
|
||||
const [file, setFile] = useState<File | null>(null);
|
||||
const [previewUrl, setPreviewUrl] = useState<string | null>(null);
|
||||
|
||||
const handleFileChange = async (selectedFile: File) => {
|
||||
if (!selectedFile) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (previewUrl) {
|
||||
URL.revokeObjectURL(previewUrl);
|
||||
}
|
||||
|
||||
setFile(selectedFile);
|
||||
setPreviewUrl(URL.createObjectURL(selectedFile));
|
||||
|
||||
try {
|
||||
setIsLoading(true);
|
||||
const upload = await uploadAvatar(selectedFile);
|
||||
console.log(upload);
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<FileButton onChange={handleFileChange} accept="image/png,image/jpeg">
|
||||
{(props) => (
|
||||
<Tooltip label="Change photo"
|
||||
position="bottom"
|
||||
>
|
||||
<UserAvatar
|
||||
{...props}
|
||||
component="button"
|
||||
radius="xl"
|
||||
size="60px"
|
||||
avatarUrl={previewUrl || currentUser.user.avatarUrl}
|
||||
name={currentUser.user.name}
|
||||
style={{ cursor: 'pointer' }}
|
||||
/>
|
||||
</Tooltip>
|
||||
)}
|
||||
</FileButton>
|
||||
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -1,69 +0,0 @@
|
||||
import { useAtom } from 'jotai';
|
||||
import { focusAtom } from 'jotai-optics';
|
||||
import * as z from 'zod';
|
||||
import { useForm, zodResolver } from '@mantine/form';
|
||||
import { currentUserAtom } from '@/features/user/atoms/current-user-atom';
|
||||
import { updateUser } from '@/features/user/services/user-service';
|
||||
import { IUser } from '@/features/user/types/user.types';
|
||||
import { useState } from 'react';
|
||||
import { TextInput, Button } from '@mantine/core';
|
||||
import { notifications } from '@mantine/notifications';
|
||||
|
||||
const formSchema = z.object({
|
||||
name: z.string().min(2).max(40).nonempty('Your name cannot be blank'),
|
||||
});
|
||||
|
||||
type FormValues = z.infer<typeof formSchema>;
|
||||
|
||||
const userAtom = focusAtom(currentUserAtom, (optic) => optic.prop('user'));
|
||||
|
||||
export default function AccountNameForm() {
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [currentUser] = useAtom(currentUserAtom);
|
||||
const [, setUser] = useAtom(userAtom);
|
||||
|
||||
const form = useForm<FormValues>({
|
||||
validate: zodResolver(formSchema),
|
||||
initialValues: {
|
||||
name: currentUser?.user?.name,
|
||||
},
|
||||
});
|
||||
|
||||
async function handleSubmit(data: Partial<IUser>) {
|
||||
setIsLoading(true);
|
||||
|
||||
try {
|
||||
const updatedUser = await updateUser(data);
|
||||
setUser(updatedUser);
|
||||
notifications.show({
|
||||
message: 'Updated successfully',
|
||||
});
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
notifications.show({
|
||||
message: 'Failed to update data',
|
||||
color: 'red',
|
||||
});
|
||||
}
|
||||
|
||||
setIsLoading(false);
|
||||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={form.onSubmit(handleSubmit)}>
|
||||
<TextInput
|
||||
id="name"
|
||||
label="Name"
|
||||
placeholder="Your name"
|
||||
variant="filled"
|
||||
{...form.getInputProps('name')}
|
||||
rightSection={
|
||||
<Button type="submit" disabled={isLoading} loading={isLoading}>
|
||||
Save
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,83 +0,0 @@
|
||||
import { Modal, TextInput, Button, Text, Group, PasswordInput } from '@mantine/core';
|
||||
import * as z from 'zod';
|
||||
import { useState } from 'react';
|
||||
import { useAtom } from 'jotai';
|
||||
import { currentUserAtom } from '@/features/user/atoms/current-user-atom';
|
||||
import { useDisclosure } from '@mantine/hooks';
|
||||
import * as React from 'react';
|
||||
import { useForm, zodResolver } from '@mantine/form';
|
||||
|
||||
|
||||
export default function ChangeEmail() {
|
||||
const [currentUser] = useAtom(currentUserAtom);
|
||||
const [opened, { open, close }] = useDisclosure(false);
|
||||
|
||||
return (
|
||||
<Group justify="space-between" wrap="nowrap" gap="xl">
|
||||
<div>
|
||||
<Text size="md">Email</Text>
|
||||
<Text size="sm" c="dimmed">
|
||||
{currentUser.user.email}
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
<Button onClick={open} variant="default">Change email</Button>
|
||||
|
||||
<Modal opened={opened} onClose={close} title="Change email" centered>
|
||||
<Text mb="md">To change your email, you have to enter your password and new email.</Text>
|
||||
<ChangePasswordForm />
|
||||
</Modal>
|
||||
</Group>
|
||||
);
|
||||
}
|
||||
|
||||
const formSchema = z.object({
|
||||
email: z.string({ required_error: 'New email is required' }).email(),
|
||||
password: z.string({ required_error: 'your current password is required' }).min(8),
|
||||
});
|
||||
|
||||
type FormValues = z.infer<typeof formSchema>
|
||||
|
||||
function ChangePasswordForm() {
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
const form = useForm<FormValues>({
|
||||
validate: zodResolver(formSchema),
|
||||
initialValues: {
|
||||
password: '',
|
||||
email: '',
|
||||
},
|
||||
});
|
||||
|
||||
function handleSubmit(data: FormValues) {
|
||||
setIsLoading(true);
|
||||
console.log(data);
|
||||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={form.onSubmit(handleSubmit)}>
|
||||
|
||||
<PasswordInput
|
||||
label="Password"
|
||||
placeholder="Enter your password"
|
||||
variant="filled"
|
||||
mb="md"
|
||||
{...form.getInputProps('password')}
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
id="email"
|
||||
label="Email"
|
||||
description="Enter your new preferred email"
|
||||
placeholder="New email"
|
||||
variant="filled"
|
||||
mb="md"
|
||||
{...form.getInputProps('email')}
|
||||
/>
|
||||
|
||||
<Button type="submit" disabled={isLoading} loading={isLoading}>
|
||||
Change email
|
||||
</Button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
@ -1,85 +0,0 @@
|
||||
import { Button, Group, Text, Modal, PasswordInput } from '@mantine/core';
|
||||
import * as z from 'zod';
|
||||
import { useState } from 'react';
|
||||
import { useDisclosure } from '@mantine/hooks';
|
||||
import * as React from 'react';
|
||||
import { useForm, zodResolver } from '@mantine/form';
|
||||
|
||||
|
||||
export default function ChangePassword() {
|
||||
const [opened, { open, close }] = useDisclosure(false);
|
||||
|
||||
return (
|
||||
<Group justify="space-between" wrap="nowrap" gap="xl">
|
||||
<div>
|
||||
<Text size="md">Password</Text>
|
||||
<Text size="sm" c="dimmed">
|
||||
You can change your password here.
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
<Button onClick={open} variant="default">Change password</Button>
|
||||
|
||||
<Modal opened={opened} onClose={close} title="Change password" centered>
|
||||
<Text mb="md">Your password must be a minimum of 8 characters.</Text>
|
||||
<ChangePasswordForm />
|
||||
|
||||
</Modal>
|
||||
</Group>
|
||||
);
|
||||
}
|
||||
|
||||
const formSchema = z.object({
|
||||
current: z.string({ required_error: 'your current password is required' }).min(1),
|
||||
password: z.string({ required_error: 'New password is required' }).min(8),
|
||||
confirm_password: z.string({ required_error: 'Password confirmation is required' }).min(8),
|
||||
}).refine(data => data.password === data.confirm_password, {
|
||||
message: 'Your new password and confirmation does not match.',
|
||||
path: ['confirm_password'],
|
||||
});
|
||||
|
||||
type FormValues = z.infer<typeof formSchema>
|
||||
|
||||
function ChangePasswordForm() {
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
const form = useForm<FormValues>({
|
||||
validate: zodResolver(formSchema),
|
||||
initialValues: {
|
||||
current: '',
|
||||
password: '',
|
||||
confirm_password: '',
|
||||
},
|
||||
});
|
||||
|
||||
function handleSubmit(data: FormValues) {
|
||||
setIsLoading(true);
|
||||
console.log(data);
|
||||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={form.onSubmit(handleSubmit)}>
|
||||
|
||||
<PasswordInput
|
||||
label="Current password"
|
||||
name="current"
|
||||
placeholder="Enter your current password"
|
||||
variant="filled"
|
||||
mb="md"
|
||||
{...form.getInputProps('current')}
|
||||
/>
|
||||
|
||||
<PasswordInput
|
||||
label="New password"
|
||||
placeholder="Enter your new password"
|
||||
variant="filled"
|
||||
mb="md"
|
||||
{...form.getInputProps('password')}
|
||||
/>
|
||||
|
||||
<Button type="submit" disabled={isLoading} loading={isLoading}>
|
||||
Change password
|
||||
</Button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
@ -1,41 +0,0 @@
|
||||
import { useAtom } from 'jotai';
|
||||
import { currentUserAtom } from '@/features/user/atoms/current-user-atom';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Button, CopyButton, Text, TextInput } from '@mantine/core';
|
||||
|
||||
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]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div>
|
||||
<Text fw={500} mb="sm">Invite link</Text>
|
||||
<Text c="dimmed" mb="sm">
|
||||
Anyone with this link can join this workspace.
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
<TextInput
|
||||
variant="filled"
|
||||
value={inviteLink}
|
||||
readOnly
|
||||
rightSection={
|
||||
<CopyButton value={inviteLink}>
|
||||
{({ copied, copy }) => (
|
||||
<Button color={copied ? 'teal' : ''} onClick={copy}>
|
||||
{copied ? 'Copied' : 'Copy'}
|
||||
</Button>
|
||||
)}
|
||||
</CopyButton>
|
||||
}
|
||||
/>
|
||||
|
||||
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -1,68 +0,0 @@
|
||||
import { useAtom } from 'jotai';
|
||||
import { currentUserAtom } from '@/features/user/atoms/current-user-atom';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { getWorkspaceUsers } from '@/features/workspace/services/workspace-service';
|
||||
import { Group, Table, Avatar, Text, Badge } from '@mantine/core';
|
||||
|
||||
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 verticalSpacing="sm">
|
||||
<Table.Thead>
|
||||
<Table.Tr>
|
||||
<Table.Th>Name</Table.Th>
|
||||
<Table.Th>Status</Table.Th>
|
||||
<Table.Th>Role</Table.Th>
|
||||
</Table.Tr>
|
||||
</Table.Thead>
|
||||
|
||||
<Table.Tbody>
|
||||
|
||||
{
|
||||
data['users']?.map((user, index) => (
|
||||
<Table.Tr key={index}>
|
||||
|
||||
<Table.Td>
|
||||
<Group gap="sm">
|
||||
<Avatar size={40} src={user.name} radius={40} />
|
||||
<div>
|
||||
<Text fz="sm" fw={500}>
|
||||
{user.name}
|
||||
</Text>
|
||||
<Text fz="xs" c="dimmed">
|
||||
{user.email}
|
||||
</Text>
|
||||
</div>
|
||||
</Group>
|
||||
</Table.Td>
|
||||
|
||||
<Table.Td>
|
||||
<Badge variant="light">
|
||||
Active
|
||||
</Badge>
|
||||
</Table.Td>
|
||||
|
||||
<Table.Td>{user.workspaceRole}</Table.Td>
|
||||
</Table.Tr>
|
||||
))
|
||||
}
|
||||
|
||||
</Table.Tbody>
|
||||
</Table>
|
||||
}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -1,28 +0,0 @@
|
||||
import WorkspaceInviteSection from '@/features/settings/workspace/members/components/workspace-invite-section';
|
||||
import React from 'react';
|
||||
import WorkspaceInviteModal from '@/features/settings/workspace/members/components/workspace-invite-modal';
|
||||
import { Divider, Group, Space, Text } from '@mantine/core';
|
||||
|
||||
const WorkspaceMembersTable = React.lazy(() => import('@/features/settings/workspace/members/components/workspace-members-table'));
|
||||
|
||||
export default function WorkspaceMembers() {
|
||||
return (
|
||||
<>
|
||||
<WorkspaceInviteSection />
|
||||
|
||||
<Divider my="lg" />
|
||||
|
||||
<Group justify="space-between">
|
||||
<Text fw={500}>Members</Text>
|
||||
|
||||
<WorkspaceInviteModal />
|
||||
|
||||
</Group>
|
||||
|
||||
<Space h="lg" />
|
||||
|
||||
<WorkspaceMembersTable />
|
||||
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -1,65 +0,0 @@
|
||||
import { currentUserAtom } from '@/features/user/atoms/current-user-atom';
|
||||
import { useAtom } from 'jotai';
|
||||
import * as z from 'zod';
|
||||
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';
|
||||
import { TextInput, Button } from '@mantine/core';
|
||||
import { useForm, zodResolver } from '@mantine/form';
|
||||
import { notifications } from '@mantine/notifications';
|
||||
|
||||
const formSchema = z.object({
|
||||
name: z.string().nonempty('Workspace name cannot be blank'),
|
||||
});
|
||||
|
||||
type FormValues = z.infer<typeof formSchema>;
|
||||
|
||||
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 form = useForm<FormValues>({
|
||||
validate: zodResolver(formSchema),
|
||||
initialValues: {
|
||||
name: currentUser?.workspace?.name,
|
||||
},
|
||||
});
|
||||
|
||||
async function handleSubmit(data: Partial<IWorkspace>) {
|
||||
setIsLoading(true);
|
||||
|
||||
try {
|
||||
const updatedWorkspace = await updateWorkspace(data);
|
||||
setWorkspace(updatedWorkspace);
|
||||
notifications.show({ message: 'Updated successfully' });
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
notifications.show({
|
||||
message: 'Failed to update data',
|
||||
color: 'red',
|
||||
});
|
||||
}
|
||||
setIsLoading(false);
|
||||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={form.onSubmit(handleSubmit)}>
|
||||
<TextInput
|
||||
id="name"
|
||||
label="Name"
|
||||
placeholder="e.g ACME"
|
||||
variant="filled"
|
||||
{...form.getInputProps('name')}
|
||||
rightSection={
|
||||
<Button type="submit" disabled={isLoading} loading={isLoading}>
|
||||
Save
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
@ -1,6 +0,0 @@
|
||||
import WorkspaceNameForm from '@/features/settings/workspace/settings/components/workspace-name-form';
|
||||
|
||||
export default function WorkspaceSettings() {
|
||||
|
||||
return (<WorkspaceNameForm />);
|
||||
}
|
||||
@ -1,23 +1,14 @@
|
||||
import {
|
||||
Group,
|
||||
Box,
|
||||
Text,
|
||||
Button,
|
||||
TagsInput,
|
||||
Space, Select,
|
||||
} from '@mantine/core';
|
||||
import WorkspaceInviteSection from '@/features/settings/workspace/members/components/workspace-invite-section';
|
||||
import React from 'react';
|
||||
import { Group, Box, Button, TagsInput, Space, Select } from "@mantine/core";
|
||||
import WorkspaceInviteSection from "@/features/settings/workspace/members/components/workspace-invite-section";
|
||||
import React from "react";
|
||||
|
||||
enum UserRole {
|
||||
GUEST = 'Guest',
|
||||
MEMBER = 'Member',
|
||||
OWNER = 'Owner',
|
||||
OWNER = "Owner",
|
||||
ADMIN = "Admin",
|
||||
MEMBER = "Member",
|
||||
}
|
||||
|
||||
|
||||
export function WorkspaceInviteForm() {
|
||||
|
||||
function handleSubmit(data) {
|
||||
console.log(data);
|
||||
}
|
||||
@ -25,7 +16,6 @@ export function WorkspaceInviteForm() {
|
||||
return (
|
||||
<>
|
||||
<Box maw="500" mx="auto">
|
||||
|
||||
<WorkspaceInviteSection />
|
||||
|
||||
<Space h="md" />
|
||||
@ -35,7 +25,7 @@ export function WorkspaceInviteForm() {
|
||||
label="Invite from email"
|
||||
placeholder="enter valid emails addresses"
|
||||
variant="filled"
|
||||
splitChars={[',', ' ']}
|
||||
splitChars={[",", " "]}
|
||||
maxDropdownHeight={200}
|
||||
maxTags={50}
|
||||
/>
|
||||
@ -54,12 +44,9 @@ export function WorkspaceInviteForm() {
|
||||
/>
|
||||
|
||||
<Group justify="center" mt="md">
|
||||
<Button>Send invitation
|
||||
</Button>
|
||||
<Button>Send invitation</Button>
|
||||
</Group>
|
||||
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
|
||||
}
|
||||
@ -1,6 +1,5 @@
|
||||
import { IconUserPlus } from '@tabler/icons-react';
|
||||
import { WorkspaceInviteForm } from '@/features/settings/workspace/members/components/workspace-invite-form';
|
||||
import { Button, Divider, Modal, ScrollArea, Text } from '@mantine/core';
|
||||
import { Button, Divider, Modal, ScrollArea } from '@mantine/core';
|
||||
import { useDisclosure } from '@mantine/hooks';
|
||||
|
||||
export default function WorkspaceInviteModal() {
|
||||
@ -8,8 +7,8 @@ export default function WorkspaceInviteModal() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button onClick={open} leftSection={<IconUserPlus size={18} />}>
|
||||
Invite Members
|
||||
<Button onClick={open}>
|
||||
Invite members
|
||||
</Button>
|
||||
|
||||
<Modal size="600" opened={opened} onClose={close} title="Invite new members" centered>
|
||||
@ -0,0 +1,41 @@
|
||||
import { useAtom } from "jotai";
|
||||
import { currentUserAtom } from "@/features/user/atoms/current-user-atom";
|
||||
import { useEffect, useState } from "react";
|
||||
import { Button, CopyButton, Group, Text, TextInput } from "@mantine/core";
|
||||
|
||||
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]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div>
|
||||
<Text fw={500} mb="sm">
|
||||
Invite link
|
||||
</Text>
|
||||
<Text c="dimmed" mb="sm">
|
||||
Anyone with this link can join this workspace.
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
<Group>
|
||||
<div style={{ flex: 1 }}>
|
||||
<TextInput variant="filled" value={inviteLink} readOnly />
|
||||
</div>
|
||||
<CopyButton value={inviteLink}>
|
||||
{({ copied, copy }) => (
|
||||
<Button color={copied ? "teal" : ""} onClick={copy}>
|
||||
{copied ? "Copied" : "Copy"}
|
||||
</Button>
|
||||
)}
|
||||
</CopyButton>
|
||||
</Group>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,50 @@
|
||||
import { Group, Table, Avatar, Text, Badge } from "@mantine/core";
|
||||
import { useWorkspaceMembersQuery } from "@/features/workspace/queries/workspace-query";
|
||||
import { UserAvatar } from "@/components/ui/user-avatar.tsx";
|
||||
import React from "react";
|
||||
|
||||
export default function WorkspaceMembersTable() {
|
||||
const { data, isLoading } = useWorkspaceMembersQuery();
|
||||
|
||||
return (
|
||||
<>
|
||||
{data && (
|
||||
<Table verticalSpacing="sm">
|
||||
<Table.Thead>
|
||||
<Table.Tr>
|
||||
<Table.Th>User</Table.Th>
|
||||
<Table.Th>Status</Table.Th>
|
||||
<Table.Th>Role</Table.Th>
|
||||
</Table.Tr>
|
||||
</Table.Thead>
|
||||
|
||||
<Table.Tbody>
|
||||
{data?.items.map((user, index) => (
|
||||
<Table.Tr key={index}>
|
||||
<Table.Td>
|
||||
<Group gap="sm">
|
||||
<UserAvatar avatarUrl={user.avatarUrl} name={user.name} />
|
||||
<div>
|
||||
<Text fz="sm" fw={500}>
|
||||
{user.name}
|
||||
</Text>
|
||||
<Text fz="xs" c="dimmed">
|
||||
{user.email}
|
||||
</Text>
|
||||
</div>
|
||||
</Group>
|
||||
</Table.Td>
|
||||
|
||||
<Table.Td>
|
||||
<Badge variant="light">Active</Badge>
|
||||
</Table.Td>
|
||||
|
||||
<Table.Td>{user.role}</Table.Td>
|
||||
</Table.Tr>
|
||||
))}
|
||||
</Table.Tbody>
|
||||
</Table>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,65 @@
|
||||
import { currentUserAtom } from "@/features/user/atoms/current-user-atom";
|
||||
import { useAtom } from "jotai";
|
||||
import * as z from "zod";
|
||||
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";
|
||||
import { TextInput, Button } from "@mantine/core";
|
||||
import { useForm, zodResolver } from "@mantine/form";
|
||||
import { notifications } from "@mantine/notifications";
|
||||
|
||||
const formSchema = z.object({
|
||||
name: z.string().nonempty("Workspace name cannot be blank"),
|
||||
});
|
||||
|
||||
type FormValues = z.infer<typeof formSchema>;
|
||||
|
||||
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 form = useForm<FormValues>({
|
||||
validate: zodResolver(formSchema),
|
||||
initialValues: {
|
||||
name: currentUser?.workspace?.name,
|
||||
},
|
||||
});
|
||||
|
||||
async function handleSubmit(data: Partial<IWorkspace>) {
|
||||
setIsLoading(true);
|
||||
|
||||
try {
|
||||
const updatedWorkspace = await updateWorkspace(data);
|
||||
setWorkspace(updatedWorkspace);
|
||||
notifications.show({ message: "Updated successfully" });
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
notifications.show({
|
||||
message: "Failed to update data",
|
||||
color: "red",
|
||||
});
|
||||
}
|
||||
setIsLoading(false);
|
||||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={form.onSubmit(handleSubmit)}>
|
||||
<TextInput
|
||||
id="name"
|
||||
label="Name"
|
||||
placeholder="e.g ACME"
|
||||
variant="filled"
|
||||
{...form.getInputProps("name")}
|
||||
/>
|
||||
<Button mt="sm" type="submit" disabled={isLoading} loading={isLoading}>
|
||||
Save
|
||||
</Button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user