mirror of
https://github.com/Shadowfita/docmost.git
synced 2025-11-13 16:22:32 +10:00
refactor directories
This commit is contained in:
Philipinho
@ -32,7 +32,7 @@ function EmojiPicker({ onEmojiSelect, icon, removeEmojiAction }: EmojiPickerInte
|
|||||||
position="bottom"
|
position="bottom"
|
||||||
>
|
>
|
||||||
<Popover.Target>
|
<Popover.Target>
|
||||||
<ActionIcon color="gray" variant="transparent" onClick={handlers.toggle}>
|
<ActionIcon c="gray" variant="transparent" onClick={handlers.toggle}>
|
||||||
{icon}
|
{icon}
|
||||||
</ActionIcon>
|
</ActionIcon>
|
||||||
</Popover.Target>
|
</Popover.Target>
|
||||||
@ -42,7 +42,7 @@ function EmojiPicker({ onEmojiSelect, icon, removeEmojiAction }: EmojiPickerInte
|
|||||||
skinTonePosition='search'
|
skinTonePosition='search'
|
||||||
theme={colorScheme}
|
theme={colorScheme}
|
||||||
/>
|
/>
|
||||||
<Button variant="default" color="gray"
|
<Button variant="default" c="gray"
|
||||||
size="xs"
|
size="xs"
|
||||||
style={{ position: 'absolute', zIndex: 2, bottom: '1rem', right: '1rem'}}
|
style={{ position: 'absolute', zIndex: 2, bottom: '1rem', right: '1rem'}}
|
||||||
onClick={handleRemoveEmoji}>
|
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 {
|
import { Group, Box, Button, TagsInput, Space, Select } from "@mantine/core";
|
||||||
Group,
|
import WorkspaceInviteSection from "@/features/settings/workspace/members/components/workspace-invite-section";
|
||||||
Box,
|
import React from "react";
|
||||||
Text,
|
|
||||||
Button,
|
|
||||||
TagsInput,
|
|
||||||
Space, Select,
|
|
||||||
} from '@mantine/core';
|
|
||||||
import WorkspaceInviteSection from '@/features/settings/workspace/members/components/workspace-invite-section';
|
|
||||||
import React from 'react';
|
|
||||||
|
|
||||||
enum UserRole {
|
enum UserRole {
|
||||||
GUEST = 'Guest',
|
OWNER = "Owner",
|
||||||
MEMBER = 'Member',
|
ADMIN = "Admin",
|
||||||
OWNER = 'Owner',
|
MEMBER = "Member",
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
export function WorkspaceInviteForm() {
|
export function WorkspaceInviteForm() {
|
||||||
|
|
||||||
function handleSubmit(data) {
|
function handleSubmit(data) {
|
||||||
console.log(data);
|
console.log(data);
|
||||||
}
|
}
|
||||||
@ -25,7 +16,6 @@ export function WorkspaceInviteForm() {
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Box maw="500" mx="auto">
|
<Box maw="500" mx="auto">
|
||||||
|
|
||||||
<WorkspaceInviteSection />
|
<WorkspaceInviteSection />
|
||||||
|
|
||||||
<Space h="md" />
|
<Space h="md" />
|
||||||
@ -35,7 +25,7 @@ export function WorkspaceInviteForm() {
|
|||||||
label="Invite from email"
|
label="Invite from email"
|
||||||
placeholder="enter valid emails addresses"
|
placeholder="enter valid emails addresses"
|
||||||
variant="filled"
|
variant="filled"
|
||||||
splitChars={[',', ' ']}
|
splitChars={[",", " "]}
|
||||||
maxDropdownHeight={200}
|
maxDropdownHeight={200}
|
||||||
maxTags={50}
|
maxTags={50}
|
||||||
/>
|
/>
|
||||||
@ -54,12 +44,9 @@ export function WorkspaceInviteForm() {
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
<Group justify="center" mt="md">
|
<Group justify="center" mt="md">
|
||||||
<Button>Send invitation
|
<Button>Send invitation</Button>
|
||||||
</Button>
|
|
||||||
</Group>
|
</Group>
|
||||||
|
|
||||||
</Box>
|
</Box>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -1,6 +1,5 @@
|
|||||||
import { IconUserPlus } from '@tabler/icons-react';
|
|
||||||
import { WorkspaceInviteForm } from '@/features/settings/workspace/members/components/workspace-invite-form';
|
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';
|
import { useDisclosure } from '@mantine/hooks';
|
||||||
|
|
||||||
export default function WorkspaceInviteModal() {
|
export default function WorkspaceInviteModal() {
|
||||||
@ -8,8 +7,8 @@ export default function WorkspaceInviteModal() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Button onClick={open} leftSection={<IconUserPlus size={18} />}>
|
<Button onClick={open}>
|
||||||
Invite Members
|
Invite members
|
||||||
</Button>
|
</Button>
|
||||||
|
|
||||||
<Modal size="600" opened={opened} onClose={close} title="Invite new members" centered>
|
<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