116 lines
3.3 KiB
TypeScript
116 lines
3.3 KiB
TypeScript
import { ViewLayout } from '@/application/types';
|
|
import { ReactComponent as Add } from '@/assets/add_circle.svg';
|
|
import { NormalModal } from '@/components/_shared/modal';
|
|
import { notify } from '@/components/_shared/notify';
|
|
import { useAppHandlers, useAppOutline } from '@/components/app/app.hooks';
|
|
import CreateSpaceModal from '@/components/app/view-actions/CreateSpaceModal';
|
|
import SpaceList from '@/components/publish/header/duplicate/SpaceList';
|
|
import { Button } from '@mui/material';
|
|
import React, { useCallback, useMemo } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
function NewPage() {
|
|
const { t } = useTranslation();
|
|
const [open, setOpen] = React.useState<boolean>(false);
|
|
const [loading, setLoading] = React.useState<boolean>(false);
|
|
const [selectedSpaceId, setSelectedSpaceId] = React.useState<string>('');
|
|
const outline = useAppOutline();
|
|
const spaceList = useMemo(() => {
|
|
if (!outline) return [];
|
|
|
|
return outline.map(view => {
|
|
return {
|
|
id: view.view_id,
|
|
extra: JSON.stringify(view.extra),
|
|
name: view.name,
|
|
isPrivate: view.is_private,
|
|
};
|
|
});
|
|
}, [outline]);
|
|
|
|
const onClose = React.useCallback(() => {
|
|
setOpen(false);
|
|
}, []);
|
|
|
|
const {
|
|
addPage,
|
|
openPageModal,
|
|
} = useAppHandlers();
|
|
|
|
const [createSpaceOpen, setCreateSpaceOpen] = React.useState(false);
|
|
|
|
const handleAddPage = useCallback(async (parentId: string) => {
|
|
if (!addPage || !openPageModal) return;
|
|
setLoading(true);
|
|
try {
|
|
const viewId = await addPage(parentId, {
|
|
layout: ViewLayout.Document,
|
|
});
|
|
|
|
openPageModal(viewId);
|
|
onClose();
|
|
// eslint-disable-next-line
|
|
} catch (e: any) {
|
|
|
|
notify.error(e.message);
|
|
} finally {
|
|
setLoading(false);
|
|
|
|
}
|
|
}, [addPage, openPageModal, onClose]);
|
|
|
|
return (
|
|
<>
|
|
<Button
|
|
onClick={() => setOpen(true)}
|
|
startIcon={<Add className={'w-5 h-5 mr-[1px]'}/>}
|
|
size={'small'}
|
|
className={'text-sm font-normal py-1.5 justify-start w-full hover:bg-fill-list-hover'}
|
|
color={'inherit'}
|
|
>
|
|
{t('newPageText')}
|
|
</Button>
|
|
<NormalModal
|
|
okText={t('button.add')}
|
|
title={t('publish.duplicateTitle')}
|
|
open={open}
|
|
onClose={onClose}
|
|
classes={{ container: 'items-start max-md:mt-auto max-md:items-center mt-[10%] ' }}
|
|
onOk={() => {
|
|
void handleAddPage(selectedSpaceId);
|
|
}}
|
|
okButtonProps={{
|
|
disabled: !selectedSpaceId,
|
|
}}
|
|
okLoading={loading}
|
|
>
|
|
<SpaceList
|
|
loading={false}
|
|
spaceList={spaceList}
|
|
value={selectedSpaceId}
|
|
onChange={setSelectedSpaceId}
|
|
title={<div className={'flex items-center text-sm text-text-caption'}>
|
|
{t('publish.addTo')}
|
|
{` ${t('web.or')} `}
|
|
<Button
|
|
onClick={() => {
|
|
setCreateSpaceOpen(true);
|
|
}}
|
|
size={'small'}
|
|
className={'text-sm mx-1'}
|
|
>{t('space.createNewSpace')}</Button>
|
|
</div>}
|
|
/>
|
|
</NormalModal>
|
|
<CreateSpaceModal
|
|
open={createSpaceOpen}
|
|
onClose={() => setCreateSpaceOpen(false)}
|
|
onCreated={(spaceId: string) => {
|
|
void handleAddPage(spaceId);
|
|
}}
|
|
/>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default NewPage; |