mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-08-05 19:40:30 +08:00
feat: mock login
This commit is contained in:
DiamondThree
@@ -0,0 +1,198 @@
|
|||||||
|
import {
|
||||||
|
StyledMemberAvatar,
|
||||||
|
StyledMemberButtonContainer,
|
||||||
|
StyledMemberEmail,
|
||||||
|
StyledMemberInfo,
|
||||||
|
StyledMemberListContainer,
|
||||||
|
StyledMemberListItem,
|
||||||
|
StyledMemberName,
|
||||||
|
StyledMemberNameContainer,
|
||||||
|
StyledMemberRoleContainer,
|
||||||
|
StyledMemberTitleContainer,
|
||||||
|
StyledMoreVerticalButton,
|
||||||
|
} from './style';
|
||||||
|
import { MoreVerticalIcon, EmailIcon, TrashIcon } from '@blocksuite/icons';
|
||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
import { Button, IconButton } from '@/ui/button';
|
||||||
|
import { InviteMembers } from '../invite-members/index';
|
||||||
|
// import { Member, getDataCenter } from '@affine/datacenter';
|
||||||
|
// import { Avatar } from '@mui/material';
|
||||||
|
import { Menu, MenuItem } from '@/ui/menu';
|
||||||
|
import { Empty } from '@/ui/empty';
|
||||||
|
import {
|
||||||
|
deleteMember,
|
||||||
|
getMembers,
|
||||||
|
getUserInfo,
|
||||||
|
Login,
|
||||||
|
User,
|
||||||
|
Workspace,
|
||||||
|
} from '@/hooks/mock-data/mock';
|
||||||
|
|
||||||
|
// import { useAppState } from '@/providers/app-state-provider';
|
||||||
|
export const MembersPage = ({ workspace }: { workspace: Workspace }) => {
|
||||||
|
const [isInviteModalShow, setIsInviteModalShow] = useState(false);
|
||||||
|
const [members, setMembers] = useState<User[]>([]);
|
||||||
|
const [userInfo, setUserInfo] = useState<User>();
|
||||||
|
// const refreshMembers = useCallback(() => {
|
||||||
|
// getDataCenter()
|
||||||
|
// .then(dc =>
|
||||||
|
// dc.apis.getWorkspaceMembers({
|
||||||
|
// id: workspace.id,
|
||||||
|
// })
|
||||||
|
// )
|
||||||
|
// .then(data => {
|
||||||
|
// setMembers(data);
|
||||||
|
// })
|
||||||
|
// .catch(err => {
|
||||||
|
// console.log(err);
|
||||||
|
// });
|
||||||
|
// }, [workspace.id]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setUser();
|
||||||
|
setMembersList();
|
||||||
|
// refreshMembers();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const setUser = () => {
|
||||||
|
const user = getUserInfo();
|
||||||
|
user && setUserInfo(user);
|
||||||
|
};
|
||||||
|
const setMembersList = () => {
|
||||||
|
const members = getMembers(workspace.id);
|
||||||
|
members && setMembers(members);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{userInfo ? (
|
||||||
|
<>
|
||||||
|
<StyledMemberTitleContainer>
|
||||||
|
<StyledMemberNameContainer>
|
||||||
|
Users({members.length})
|
||||||
|
</StyledMemberNameContainer>
|
||||||
|
<StyledMemberRoleContainer>Access level</StyledMemberRoleContainer>
|
||||||
|
</StyledMemberTitleContainer>
|
||||||
|
<StyledMemberListContainer>
|
||||||
|
{members.length === 0 && (
|
||||||
|
<Empty
|
||||||
|
width={648}
|
||||||
|
sx={{ marginTop: '60px' }}
|
||||||
|
height={300}
|
||||||
|
></Empty>
|
||||||
|
)}
|
||||||
|
{members.length ? (
|
||||||
|
members.map((member, index) => {
|
||||||
|
return (
|
||||||
|
<StyledMemberListItem key={index}>
|
||||||
|
<StyledMemberNameContainer>
|
||||||
|
<StyledMemberAvatar alt="member avatar">
|
||||||
|
<EmailIcon></EmailIcon>
|
||||||
|
</StyledMemberAvatar>
|
||||||
|
|
||||||
|
<StyledMemberInfo>
|
||||||
|
<StyledMemberName>{member.name}</StyledMemberName>
|
||||||
|
|
||||||
|
<StyledMemberEmail>{member.email}</StyledMemberEmail>
|
||||||
|
</StyledMemberInfo>
|
||||||
|
</StyledMemberNameContainer>
|
||||||
|
<StyledMemberRoleContainer>
|
||||||
|
{/* {member.accepted
|
||||||
|
? member.type !== 99
|
||||||
|
? 'Member'
|
||||||
|
: 'Workspace Owner'
|
||||||
|
: 'Pending'} */}
|
||||||
|
Pending
|
||||||
|
</StyledMemberRoleContainer>
|
||||||
|
<StyledMoreVerticalButton>
|
||||||
|
<Menu
|
||||||
|
content={
|
||||||
|
<>
|
||||||
|
<MenuItem
|
||||||
|
onClick={() => {
|
||||||
|
deleteMember(workspace.id, 0);
|
||||||
|
setMembersList();
|
||||||
|
// confirm({
|
||||||
|
// title: 'Delete Member?',
|
||||||
|
// content: `will delete member`,
|
||||||
|
// confirmText: 'Delete',
|
||||||
|
// confirmType: 'danger',
|
||||||
|
// }).then(confirm => {
|
||||||
|
// getDataCenter()
|
||||||
|
// .then(dc =>
|
||||||
|
// dc.apis.removeMember({
|
||||||
|
// permissionId: member.id,
|
||||||
|
// })
|
||||||
|
// )
|
||||||
|
// .then(() => {
|
||||||
|
// // console.log('data: ', data);
|
||||||
|
// toast('Moved to Trash');
|
||||||
|
// // refreshMembers();
|
||||||
|
// });
|
||||||
|
// });
|
||||||
|
}}
|
||||||
|
icon={<TrashIcon />}
|
||||||
|
>
|
||||||
|
Delete
|
||||||
|
</MenuItem>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
placement="bottom-end"
|
||||||
|
disablePortal={true}
|
||||||
|
>
|
||||||
|
<IconButton>
|
||||||
|
<MoreVerticalIcon />
|
||||||
|
</IconButton>
|
||||||
|
</Menu>
|
||||||
|
</StyledMoreVerticalButton>
|
||||||
|
</StyledMemberListItem>
|
||||||
|
);
|
||||||
|
})
|
||||||
|
) : (
|
||||||
|
<></>
|
||||||
|
)}
|
||||||
|
</StyledMemberListContainer>
|
||||||
|
<StyledMemberButtonContainer>
|
||||||
|
<Button
|
||||||
|
onClick={() => {
|
||||||
|
setIsInviteModalShow(true);
|
||||||
|
}}
|
||||||
|
type="primary"
|
||||||
|
shape="circle"
|
||||||
|
>
|
||||||
|
Invite Members
|
||||||
|
</Button>
|
||||||
|
<InviteMembers
|
||||||
|
onClose={() => {
|
||||||
|
setIsInviteModalShow(false);
|
||||||
|
}}
|
||||||
|
onInviteSuccess={() => {
|
||||||
|
setMembersList();
|
||||||
|
setIsInviteModalShow(false);
|
||||||
|
// refreshMembers();
|
||||||
|
}}
|
||||||
|
workspaceId={workspace.id}
|
||||||
|
open={isInviteModalShow}
|
||||||
|
></InviteMembers>
|
||||||
|
</StyledMemberButtonContainer>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<div>
|
||||||
|
Collaborating with other members requires AFFiNE Cloud service.
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Button
|
||||||
|
onClick={() => {
|
||||||
|
Login();
|
||||||
|
setUser();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Enable AFFiNE Cloud
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,122 @@
|
|||||||
|
import {
|
||||||
|
StyledCopyButtonContainer,
|
||||||
|
StyledPublishContent,
|
||||||
|
StyledPublishCopyContainer,
|
||||||
|
StyledPublishExplanation,
|
||||||
|
StyledSettingH2,
|
||||||
|
} from './style';
|
||||||
|
|
||||||
|
import { Button } from '@/ui/button';
|
||||||
|
import Input from '@/ui/input';
|
||||||
|
import { toast } from '@/ui/toast';
|
||||||
|
import { Workspace } from '@/hooks/mock-data/mock';
|
||||||
|
import useTemporaryHelper from '@/hooks/use-temporary-helper';
|
||||||
|
import { useConfirm } from '@/providers/confirm-provider';
|
||||||
|
|
||||||
|
export const PublishPage = ({ workspace }: { workspace: Workspace }) => {
|
||||||
|
const shareUrl =
|
||||||
|
window.location.host + '/workspace/' + workspace.id + '?share=true';
|
||||||
|
|
||||||
|
const { login, updateWorkspaceMeta, user, currentWorkspace } =
|
||||||
|
useTemporaryHelper();
|
||||||
|
const { confirm } = useConfirm();
|
||||||
|
|
||||||
|
const togglePublic = (flag: boolean) => {
|
||||||
|
updateWorkspaceMeta(currentWorkspace.id, { isPublish: flag });
|
||||||
|
};
|
||||||
|
|
||||||
|
const copyUrl = () => {
|
||||||
|
navigator.clipboard.writeText(shareUrl);
|
||||||
|
toast('Copied url to clipboard');
|
||||||
|
};
|
||||||
|
|
||||||
|
const enableAffineCloud = () => {
|
||||||
|
confirm({
|
||||||
|
title: 'Enable AFFiNE Cloud?',
|
||||||
|
content: `If enabled, the data in this workspace will be backed up and synchronized via AFFiNE Cloud.`,
|
||||||
|
confirmText: user ? 'Enable' : 'Sign in and Enable',
|
||||||
|
cancelText: 'Skip',
|
||||||
|
}).then(confirm => {
|
||||||
|
if (user) {
|
||||||
|
updateWorkspaceMeta(currentWorkspace.id, { isPublish: true });
|
||||||
|
} else {
|
||||||
|
confirm && login();
|
||||||
|
updateWorkspaceMeta(currentWorkspace.id, { isPublish: true });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{currentWorkspace.type === 'cloud' ? (
|
||||||
|
<div>
|
||||||
|
<StyledPublishContent>
|
||||||
|
{currentWorkspace?.isPublish ? (
|
||||||
|
<>
|
||||||
|
<StyledPublishExplanation>
|
||||||
|
Publishing to web requires AFFiNE Cloud service .
|
||||||
|
</StyledPublishExplanation>
|
||||||
|
<StyledSettingH2 marginTop={48}>
|
||||||
|
Share with link
|
||||||
|
</StyledSettingH2>
|
||||||
|
<StyledPublishCopyContainer>
|
||||||
|
<Input width={500} value={shareUrl} disabled={true}></Input>
|
||||||
|
<StyledCopyButtonContainer>
|
||||||
|
<Button onClick={copyUrl} type="primary" shape="circle">
|
||||||
|
Copy Link
|
||||||
|
</Button>
|
||||||
|
</StyledCopyButtonContainer>
|
||||||
|
</StyledPublishCopyContainer>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<StyledPublishExplanation>
|
||||||
|
After publishing to the web, everyone can view the content of
|
||||||
|
this workspace through the link.
|
||||||
|
</StyledPublishExplanation>
|
||||||
|
)}
|
||||||
|
</StyledPublishContent>
|
||||||
|
{!currentWorkspace?.isPublish ? (
|
||||||
|
<Button
|
||||||
|
onClick={() => {
|
||||||
|
togglePublic(true);
|
||||||
|
}}
|
||||||
|
type="primary"
|
||||||
|
shape="circle"
|
||||||
|
>
|
||||||
|
Publish to web
|
||||||
|
</Button>
|
||||||
|
) : (
|
||||||
|
<Button
|
||||||
|
onClick={() => {
|
||||||
|
togglePublic(false);
|
||||||
|
}}
|
||||||
|
type="primary"
|
||||||
|
shape="circle"
|
||||||
|
>
|
||||||
|
Stop publishing
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<StyledPublishContent>
|
||||||
|
<>
|
||||||
|
<StyledPublishExplanation>
|
||||||
|
Publishing to web requires AFFiNE Cloud service.
|
||||||
|
</StyledPublishExplanation>
|
||||||
|
|
||||||
|
<StyledPublishCopyContainer>
|
||||||
|
<Button
|
||||||
|
onClick={() => {
|
||||||
|
enableAffineCloud();
|
||||||
|
}}
|
||||||
|
type="primary"
|
||||||
|
shape="circle"
|
||||||
|
>
|
||||||
|
Enable AFFiNE Cloud
|
||||||
|
</Button>
|
||||||
|
</StyledPublishCopyContainer>
|
||||||
|
</>
|
||||||
|
</StyledPublishContent>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,91 @@
|
|||||||
|
import {
|
||||||
|
StyledPublishContent,
|
||||||
|
StyledPublishCopyContainer,
|
||||||
|
StyledPublishExplanation,
|
||||||
|
} from './style';
|
||||||
|
import { DownloadIcon } from '@blocksuite/icons';
|
||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
import { Button } from '@/ui/button';
|
||||||
|
import { Menu, MenuItem } from '@/ui/menu';
|
||||||
|
import {
|
||||||
|
deleteMember,
|
||||||
|
getActiveWorkspace,
|
||||||
|
updateWorkspaceMeta,
|
||||||
|
Workspace,
|
||||||
|
} from '@/hooks/mock-data/mock';
|
||||||
|
|
||||||
|
export const SyncPage = ({ workspace }: { workspace: Workspace }) => {
|
||||||
|
const [workspaceType, setWorkspaceType] = useState('local');
|
||||||
|
useEffect(() => {
|
||||||
|
setType();
|
||||||
|
});
|
||||||
|
const setType = () => {
|
||||||
|
const ACTIVEworkspace = getActiveWorkspace();
|
||||||
|
ACTIVEworkspace && setWorkspaceType(ACTIVEworkspace.type);
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<StyledPublishContent>
|
||||||
|
{workspaceType === 'local' ? (
|
||||||
|
<>
|
||||||
|
<StyledPublishExplanation>
|
||||||
|
{workspace.name} is Local Workspace. All data is stored on the
|
||||||
|
current device. You can enable AFFiNE Cloud for this workspace to
|
||||||
|
keep data in sync with the cloud.
|
||||||
|
</StyledPublishExplanation>
|
||||||
|
|
||||||
|
<StyledPublishCopyContainer>
|
||||||
|
<Button
|
||||||
|
onClick={() => {
|
||||||
|
updateWorkspaceMeta(workspace.id, {
|
||||||
|
type: 'cloud',
|
||||||
|
});
|
||||||
|
setType();
|
||||||
|
}}
|
||||||
|
type="primary"
|
||||||
|
shape="circle"
|
||||||
|
>
|
||||||
|
Enable AFFiNE Cloud
|
||||||
|
</Button>
|
||||||
|
</StyledPublishCopyContainer>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<StyledPublishExplanation>
|
||||||
|
<code>{workspace.name}</code> is Cloud Workspace. All data will be
|
||||||
|
synchronized and saved to the AFFiNE
|
||||||
|
</StyledPublishExplanation>
|
||||||
|
<StyledPublishCopyContainer>
|
||||||
|
<Menu
|
||||||
|
content={
|
||||||
|
<>
|
||||||
|
<MenuItem
|
||||||
|
onClick={() => {
|
||||||
|
deleteMember(workspace.id, 0);
|
||||||
|
}}
|
||||||
|
icon={<DownloadIcon />}
|
||||||
|
>
|
||||||
|
Download core data to device
|
||||||
|
</MenuItem>
|
||||||
|
<MenuItem
|
||||||
|
onClick={() => {
|
||||||
|
deleteMember(workspace.id, 0);
|
||||||
|
}}
|
||||||
|
icon={<DownloadIcon />}
|
||||||
|
>
|
||||||
|
Download all data to device
|
||||||
|
</MenuItem>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
placement="bottom-end"
|
||||||
|
disablePortal={true}
|
||||||
|
>
|
||||||
|
<Button>Download all data to device</Button>
|
||||||
|
</Menu>
|
||||||
|
</StyledPublishCopyContainer>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</StyledPublishContent>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -1,23 +1,7 @@
|
|||||||
import Modal, { ModalCloseButton } from '@/ui/modal';
|
import Modal, { ModalCloseButton } from '@/ui/modal';
|
||||||
import {
|
import {
|
||||||
StyledCopyButtonContainer,
|
|
||||||
StyledMemberAvatar,
|
|
||||||
StyledMemberButtonContainer,
|
|
||||||
StyledMemberEmail,
|
|
||||||
StyledMemberInfo,
|
|
||||||
StyledMemberListContainer,
|
|
||||||
StyledMemberListItem,
|
|
||||||
StyledMemberName,
|
|
||||||
StyledMemberNameContainer,
|
|
||||||
StyledMemberRoleContainer,
|
|
||||||
StyledMemberTitleContainer,
|
|
||||||
StyledMoreVerticalButton,
|
|
||||||
StyledPublishContent,
|
|
||||||
StyledPublishCopyContainer,
|
|
||||||
StyledPublishExplanation,
|
|
||||||
StyledSettingContainer,
|
StyledSettingContainer,
|
||||||
StyledSettingContent,
|
StyledSettingContent,
|
||||||
StyledSettingH2,
|
|
||||||
StyledSettingSidebar,
|
StyledSettingSidebar,
|
||||||
StyledSettingSidebarHeader,
|
StyledSettingSidebarHeader,
|
||||||
StyledSettingTabContainer,
|
StyledSettingTabContainer,
|
||||||
@@ -28,36 +12,14 @@ import {
|
|||||||
EditIcon,
|
EditIcon,
|
||||||
UsersIcon,
|
UsersIcon,
|
||||||
PublishIcon,
|
PublishIcon,
|
||||||
MoreVerticalIcon,
|
|
||||||
EmailIcon,
|
|
||||||
TrashIcon,
|
|
||||||
DownloadIcon,
|
|
||||||
CloudInsyncIcon,
|
CloudInsyncIcon,
|
||||||
} from '@blocksuite/icons';
|
} from '@blocksuite/icons';
|
||||||
import { useEffect, useState } from 'react';
|
import { useEffect, useState } from 'react';
|
||||||
import { Button, IconButton } from '@/ui/button';
|
|
||||||
import Input from '@/ui/input';
|
|
||||||
import { InviteMembers } from '../invite-members/index';
|
|
||||||
// import { Member, getDataCenter } from '@affine/datacenter';
|
|
||||||
// import { Avatar } from '@mui/material';
|
|
||||||
import { Menu, MenuItem } from '@/ui/menu';
|
|
||||||
import { toast } from '@/ui/toast';
|
|
||||||
import { Empty } from '@/ui/empty';
|
|
||||||
// import { useAppState } from '@/providers/app-state-provider';
|
|
||||||
import { GeneralPage } from './general';
|
import { GeneralPage } from './general';
|
||||||
import {
|
import { getActiveWorkspace } from '@/hooks/mock-data/mock';
|
||||||
deleteMember,
|
import MembersPage from './MembersPage';
|
||||||
getActiveWorkspace,
|
import PublishPage from './PublishPage';
|
||||||
getMembers,
|
import SyncPage from './SyncPage';
|
||||||
getUserInfo,
|
|
||||||
Login,
|
|
||||||
setWorkspacePublish,
|
|
||||||
updateWorkspaceMeta,
|
|
||||||
User,
|
|
||||||
Workspace,
|
|
||||||
} from '@/hooks/mock-data/mock';
|
|
||||||
import useTemporaryHelper from '@/hooks/use-temporary-helper';
|
|
||||||
import { useConfirm } from '@/providers/confirm-provider';
|
|
||||||
|
|
||||||
enum ActiveTab {
|
enum ActiveTab {
|
||||||
'general' = 'general',
|
'general' = 'general',
|
||||||
@@ -194,354 +156,3 @@ export const WorkspaceSetting = ({
|
|||||||
</Modal>
|
</Modal>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const MembersPage = ({ workspace }: { workspace: Workspace }) => {
|
|
||||||
const [isInviteModalShow, setIsInviteModalShow] = useState(false);
|
|
||||||
const [members, setMembers] = useState<User[]>([]);
|
|
||||||
const [userInfo, setUserInfo] = useState<User>();
|
|
||||||
// const refreshMembers = useCallback(() => {
|
|
||||||
// getDataCenter()
|
|
||||||
// .then(dc =>
|
|
||||||
// dc.apis.getWorkspaceMembers({
|
|
||||||
// id: workspace.id,
|
|
||||||
// })
|
|
||||||
// )
|
|
||||||
// .then(data => {
|
|
||||||
// setMembers(data);
|
|
||||||
// })
|
|
||||||
// .catch(err => {
|
|
||||||
// console.log(err);
|
|
||||||
// });
|
|
||||||
// }, [workspace.id]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setUser();
|
|
||||||
setMembersList();
|
|
||||||
// refreshMembers();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const setUser = () => {
|
|
||||||
const user = getUserInfo();
|
|
||||||
user && setUserInfo(user);
|
|
||||||
};
|
|
||||||
const setMembersList = () => {
|
|
||||||
const members = getMembers(workspace.id);
|
|
||||||
members && setMembers(members);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
{userInfo ? (
|
|
||||||
<>
|
|
||||||
<StyledMemberTitleContainer>
|
|
||||||
<StyledMemberNameContainer>
|
|
||||||
Users({members.length})
|
|
||||||
</StyledMemberNameContainer>
|
|
||||||
<StyledMemberRoleContainer>Access level</StyledMemberRoleContainer>
|
|
||||||
</StyledMemberTitleContainer>
|
|
||||||
<StyledMemberListContainer>
|
|
||||||
{members.length === 0 && (
|
|
||||||
<Empty
|
|
||||||
width={648}
|
|
||||||
sx={{ marginTop: '60px' }}
|
|
||||||
height={300}
|
|
||||||
></Empty>
|
|
||||||
)}
|
|
||||||
{members.length ? (
|
|
||||||
members.map((member, index) => {
|
|
||||||
return (
|
|
||||||
<StyledMemberListItem key={index}>
|
|
||||||
<StyledMemberNameContainer>
|
|
||||||
<StyledMemberAvatar alt="member avatar">
|
|
||||||
<EmailIcon></EmailIcon>
|
|
||||||
</StyledMemberAvatar>
|
|
||||||
|
|
||||||
<StyledMemberInfo>
|
|
||||||
<StyledMemberName>{member.name}</StyledMemberName>
|
|
||||||
|
|
||||||
<StyledMemberEmail>{member.email}</StyledMemberEmail>
|
|
||||||
</StyledMemberInfo>
|
|
||||||
</StyledMemberNameContainer>
|
|
||||||
<StyledMemberRoleContainer>
|
|
||||||
{/* {member.accepted
|
|
||||||
? member.type !== 99
|
|
||||||
? 'Member'
|
|
||||||
: 'Workspace Owner'
|
|
||||||
: 'Pending'} */}
|
|
||||||
Pending
|
|
||||||
</StyledMemberRoleContainer>
|
|
||||||
<StyledMoreVerticalButton>
|
|
||||||
<Menu
|
|
||||||
content={
|
|
||||||
<>
|
|
||||||
<MenuItem
|
|
||||||
onClick={() => {
|
|
||||||
deleteMember(workspace.id, 0);
|
|
||||||
setMembersList();
|
|
||||||
// confirm({
|
|
||||||
// title: 'Delete Member?',
|
|
||||||
// content: `will delete member`,
|
|
||||||
// confirmText: 'Delete',
|
|
||||||
// confirmType: 'danger',
|
|
||||||
// }).then(confirm => {
|
|
||||||
// getDataCenter()
|
|
||||||
// .then(dc =>
|
|
||||||
// dc.apis.removeMember({
|
|
||||||
// permissionId: member.id,
|
|
||||||
// })
|
|
||||||
// )
|
|
||||||
// .then(() => {
|
|
||||||
// // console.log('data: ', data);
|
|
||||||
// toast('Moved to Trash');
|
|
||||||
// // refreshMembers();
|
|
||||||
// });
|
|
||||||
// });
|
|
||||||
}}
|
|
||||||
icon={<TrashIcon />}
|
|
||||||
>
|
|
||||||
Delete
|
|
||||||
</MenuItem>
|
|
||||||
</>
|
|
||||||
}
|
|
||||||
placement="bottom-end"
|
|
||||||
disablePortal={true}
|
|
||||||
>
|
|
||||||
<IconButton>
|
|
||||||
<MoreVerticalIcon />
|
|
||||||
</IconButton>
|
|
||||||
</Menu>
|
|
||||||
</StyledMoreVerticalButton>
|
|
||||||
</StyledMemberListItem>
|
|
||||||
);
|
|
||||||
})
|
|
||||||
) : (
|
|
||||||
<></>
|
|
||||||
)}
|
|
||||||
</StyledMemberListContainer>
|
|
||||||
<StyledMemberButtonContainer>
|
|
||||||
<Button
|
|
||||||
onClick={() => {
|
|
||||||
setIsInviteModalShow(true);
|
|
||||||
}}
|
|
||||||
type="primary"
|
|
||||||
shape="circle"
|
|
||||||
>
|
|
||||||
Invite Members
|
|
||||||
</Button>
|
|
||||||
<InviteMembers
|
|
||||||
onClose={() => {
|
|
||||||
setIsInviteModalShow(false);
|
|
||||||
}}
|
|
||||||
onInviteSuccess={() => {
|
|
||||||
setMembersList();
|
|
||||||
setIsInviteModalShow(false);
|
|
||||||
// refreshMembers();
|
|
||||||
}}
|
|
||||||
workspaceId={workspace.id}
|
|
||||||
open={isInviteModalShow}
|
|
||||||
></InviteMembers>
|
|
||||||
</StyledMemberButtonContainer>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<div>
|
|
||||||
Collaborating with other members requires AFFiNE Cloud service.
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Button
|
|
||||||
onClick={() => {
|
|
||||||
Login();
|
|
||||||
setUser();
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Enable AFFiNE Cloud
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const PublishPage = ({ workspace }: { workspace: Workspace }) => {
|
|
||||||
const shareUrl =
|
|
||||||
window.location.host + '/workspace/' + workspace.id + '?share=true';
|
|
||||||
|
|
||||||
const { login, updateWorkspaceMeta, user, currentWorkspace } =
|
|
||||||
useTemporaryHelper();
|
|
||||||
const { confirm } = useConfirm();
|
|
||||||
|
|
||||||
const togglePublic = (flag: boolean) => {
|
|
||||||
updateWorkspaceMeta(currentWorkspace.id, { isPublish: flag });
|
|
||||||
};
|
|
||||||
|
|
||||||
const copyUrl = () => {
|
|
||||||
navigator.clipboard.writeText(shareUrl);
|
|
||||||
toast('Copied url to clipboard');
|
|
||||||
};
|
|
||||||
|
|
||||||
const enableAffineCloud = () => {
|
|
||||||
confirm({
|
|
||||||
title: 'Enable AFFiNE Cloud?',
|
|
||||||
content: `If enabled, the data in this workspace will be backed up and synchronized via AFFiNE Cloud.`,
|
|
||||||
confirmText: user ? 'Enable' : 'Sign in and Enable',
|
|
||||||
cancelText: 'Skip',
|
|
||||||
}).then(confirm => {
|
|
||||||
if (user) {
|
|
||||||
updateWorkspaceMeta(currentWorkspace.id, { isPublish: true });
|
|
||||||
} else {
|
|
||||||
confirm && login();
|
|
||||||
updateWorkspaceMeta(currentWorkspace.id, { isPublish: true });
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{user ? (
|
|
||||||
<div>
|
|
||||||
<StyledPublishContent>
|
|
||||||
{currentWorkspace?.isPublish ? (
|
|
||||||
<>
|
|
||||||
<StyledPublishExplanation>
|
|
||||||
Publishing to web requires AFFiNE Cloud service .
|
|
||||||
</StyledPublishExplanation>
|
|
||||||
<StyledSettingH2 marginTop={48}>
|
|
||||||
Share with link
|
|
||||||
</StyledSettingH2>
|
|
||||||
<StyledPublishCopyContainer>
|
|
||||||
<Input width={500} value={shareUrl} disabled={true}></Input>
|
|
||||||
<StyledCopyButtonContainer>
|
|
||||||
<Button onClick={copyUrl} type="primary" shape="circle">
|
|
||||||
Copy Link
|
|
||||||
</Button>
|
|
||||||
</StyledCopyButtonContainer>
|
|
||||||
</StyledPublishCopyContainer>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<StyledPublishExplanation>
|
|
||||||
After publishing to the web, everyone can view the content of
|
|
||||||
this workspace through the link.
|
|
||||||
</StyledPublishExplanation>
|
|
||||||
)}
|
|
||||||
</StyledPublishContent>
|
|
||||||
{!currentWorkspace?.isPublish ? (
|
|
||||||
<Button
|
|
||||||
onClick={() => {
|
|
||||||
togglePublic(true);
|
|
||||||
}}
|
|
||||||
type="primary"
|
|
||||||
shape="circle"
|
|
||||||
>
|
|
||||||
Publish to web
|
|
||||||
</Button>
|
|
||||||
) : (
|
|
||||||
<Button
|
|
||||||
onClick={() => {
|
|
||||||
togglePublic(false);
|
|
||||||
}}
|
|
||||||
type="primary"
|
|
||||||
shape="circle"
|
|
||||||
>
|
|
||||||
Stop publishing
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<StyledPublishContent>
|
|
||||||
<>
|
|
||||||
<StyledPublishExplanation>
|
|
||||||
Publishing to web requires AFFiNE Cloud service.
|
|
||||||
</StyledPublishExplanation>
|
|
||||||
|
|
||||||
<StyledPublishCopyContainer>
|
|
||||||
<Button
|
|
||||||
onClick={() => {
|
|
||||||
enableAffineCloud();
|
|
||||||
}}
|
|
||||||
type="primary"
|
|
||||||
shape="circle"
|
|
||||||
>
|
|
||||||
Enable AFFiNE Cloud
|
|
||||||
</Button>
|
|
||||||
</StyledPublishCopyContainer>
|
|
||||||
</>
|
|
||||||
</StyledPublishContent>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
const SyncPage = ({ workspace }: { workspace: Workspace }) => {
|
|
||||||
const [workspaceType, setWorkspaceType] = useState('local');
|
|
||||||
useEffect(() => {
|
|
||||||
setType();
|
|
||||||
});
|
|
||||||
const setType = () => {
|
|
||||||
const ACTIVEworkspace = getActiveWorkspace();
|
|
||||||
ACTIVEworkspace && setWorkspaceType(ACTIVEworkspace.type);
|
|
||||||
};
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<StyledPublishContent>
|
|
||||||
{workspaceType === 'local' ? (
|
|
||||||
<>
|
|
||||||
<StyledPublishExplanation>
|
|
||||||
{workspace.name} is Local Workspace. All data is stored on the
|
|
||||||
current device. You can enable AFFiNE Cloud for this workspace to
|
|
||||||
keep data in sync with the cloud.
|
|
||||||
</StyledPublishExplanation>
|
|
||||||
|
|
||||||
<StyledPublishCopyContainer>
|
|
||||||
<Button
|
|
||||||
onClick={() => {
|
|
||||||
updateWorkspaceMeta(workspace.id, {
|
|
||||||
type: 'cloud',
|
|
||||||
});
|
|
||||||
setType();
|
|
||||||
}}
|
|
||||||
type="primary"
|
|
||||||
shape="circle"
|
|
||||||
>
|
|
||||||
Enable AFFiNE Cloud
|
|
||||||
</Button>
|
|
||||||
</StyledPublishCopyContainer>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<StyledPublishExplanation>
|
|
||||||
<code>{workspace.name}</code> is Cloud Workspace. All data will be
|
|
||||||
synchronized and saved to the AFFiNE
|
|
||||||
</StyledPublishExplanation>
|
|
||||||
<StyledPublishCopyContainer>
|
|
||||||
<Menu
|
|
||||||
content={
|
|
||||||
<>
|
|
||||||
<MenuItem
|
|
||||||
onClick={() => {
|
|
||||||
deleteMember(workspace.id, 0);
|
|
||||||
}}
|
|
||||||
icon={<DownloadIcon />}
|
|
||||||
>
|
|
||||||
Download core data to device
|
|
||||||
</MenuItem>
|
|
||||||
<MenuItem
|
|
||||||
onClick={() => {
|
|
||||||
deleteMember(workspace.id, 0);
|
|
||||||
}}
|
|
||||||
icon={<DownloadIcon />}
|
|
||||||
>
|
|
||||||
Download all data to device
|
|
||||||
</MenuItem>
|
|
||||||
</>
|
|
||||||
}
|
|
||||||
placement="bottom-end"
|
|
||||||
disablePortal={true}
|
|
||||||
>
|
|
||||||
<Button>Download all data to device</Button>
|
|
||||||
</Menu>
|
|
||||||
</StyledPublishCopyContainer>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</StyledPublishContent>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|||||||
Reference in New Issue
Block a user