Skip to content

Commit c4cbda4

Browse files
AntoLCAntoLC
committed
save
1 parent 1e486c0 commit c4cbda4

File tree

6 files changed

+191
-7
lines changed

6 files changed

+191
-7
lines changed

‎src/frontend/apps/impress/src/features/docs/doc-tree/components/DocTree.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ type DocTreeProps = {
2828
export const DocTree = ({ currentDoc }: DocTreeProps) => {
2929
const { spacingsTokens } = useCunninghamTheme();
3030
const { isDesktop } = useResponsive();
31+
const { untitledDocument } = useTrans();
3132
const [treeRoot, setTreeRoot] = useState<HTMLElement | null>(null);
3233
const treeContext = useTreeContext<Doc | null>();
3334
const router = useRouter();
@@ -265,7 +266,7 @@ export const DocTree = ({ currentDoc }: DocTreeProps) => {
265266
ref={rootItemRef}
266267
data-testid="doc-tree-root-item"
267268
role="treeitem"
268-
aria-label={`${t('Root document {{title}}', { title: treeContext.root?.title || t('Untitled document') })}`}
269+
aria-label={`${t('Root document {{title}}', { title: treeContext.root?.title || untitledDocument })}`}
269270
aria-selected={rootIsSelected}
270271
tabIndex={0}
271272
onFocus={handleRootFocus}
@@ -325,7 +326,7 @@ export const DocTree = ({ currentDoc }: DocTreeProps) => {
325326
);
326327
router.push(`/docs/${treeContext?.root?.id}`);
327328
}}
328-
aria-label={`${t('Open root document')}: ${treeContext.root?.title || t('Untitled document')}`}
329+
aria-label={`${t('Open root document')}: ${treeContext.root?.title || untitledDocument}`}
329330
tabIndex={-1} // avoid double tabstop
330331
>
331332
<Box $direction="row" $align="center" $width="100%">

‎src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridActions.tsx‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,12 @@ import {
1111
useCreateFavoriteDoc,
1212
useDeleteFavoriteDoc,
1313
useDuplicateDoc,
14+
useTrans,
1415
} from '@/docs/doc-management';
1516
import { DocShareModal } from '@/docs/doc-share';
1617

18+
import { DocImportModal } from '../../docs-import/components/DocImportModal';
19+
1720
interface DocsGridActionsProps {
1821
doc: Doc;
1922
}
@@ -23,6 +26,8 @@ export const DocsGridActions = ({ doc }: DocsGridActionsProps) => {
2326

2427
const deleteModal = useModal();
2528
const shareModal = useModal();
29+
const importModal = useModal();
30+
const { untitledDocument } = useTrans();
2631

2732
const { mutate: duplicateDoc } = useDuplicateDoc();
2833

@@ -56,6 +61,14 @@ export const DocsGridActions = ({ doc }: DocsGridActionsProps) => {
5661

5762
testId: `docs-grid-actions-share-${doc.id}`,
5863
},
64+
{
65+
label: t('Move into a doc'),
66+
icon: 'copy_all',
67+
callback: () => {
68+
importModal.open();
69+
},
70+
testId: `docs-grid-actions-import-${doc.id}`,
71+
},
5972
{
6073
label: t('Duplicate'),
6174
icon: 'content_copy',
@@ -78,7 +91,7 @@ export const DocsGridActions = ({ doc }: DocsGridActionsProps) => {
7891
},
7992
];
8093

81-
const documentTitle = doc.title || t('Untitled document');
94+
const documentTitle = doc.title || untitledDocument;
8295
const menuLabel = t('Open the menu of actions for the document: {{title}}', {
8396
title: documentTitle,
8497
});
@@ -116,6 +129,13 @@ export const DocsGridActions = ({ doc }: DocsGridActionsProps) => {
116129
{shareModal.isOpen && (
117130
<DocShareModal doc={doc} onClose={shareModal.close} />
118131
)}
132+
{importModal.isOpen && (
133+
<DocImportModal
134+
doc={doc}
135+
onClose={importModal.close}
136+
isOpen={importModal.isOpen}
137+
/>
138+
)}
119139
</>
120140
);
121141
};

‎src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItem.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { css } from 'styled-components';
77
import { Box, Icon, StyledLink, Text } from '@/components';
88
import { useConfig } from '@/core';
99
import { useCunninghamTheme } from '@/cunningham';
10-
import { Doc, LinkReach, SimpleDocItem } from '@/docs/doc-management';
10+
import { Doc, LinkReach, SimpleDocItem, useTrans } from '@/docs/doc-management';
1111
import { useDate } from '@/hooks';
1212
import { useResponsiveStore } from '@/stores';
1313

@@ -26,6 +26,7 @@ export const DocsGridItem = ({ doc, dragMode = false }: DocsGridItemProps) => {
2626
const searchParams = useSearchParams();
2727
const target = searchParams.get('target');
2828
const isInTrashbin = target === 'trashbin';
29+
const { untitledDocument } = useTrans();
2930

3031
const { t } = useTranslation();
3132
const { isDesktop } = useResponsiveStore();
@@ -62,7 +63,7 @@ export const DocsGridItem = ({ doc, dragMode = false }: DocsGridItemProps) => {
6263
`}
6364
className="--docs--doc-grid-item"
6465
aria-label={t('Open document: {{title}}', {
65-
title: doc.title || t('Untitled document'),
66+
title: doc.title || untitledDocument,
6667
})}
6768
>
6869
<Box

‎src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridTrashbinActions.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,12 @@ import { useTranslation } from 'react-i18next';
66
import { css } from 'styled-components';
77

88
import { DropdownMenu, DropdownMenuOption, Icon } from '@/components';
9-
import { Doc, KEY_LIST_DOC, useRestoreDoc } from '@/docs/doc-management';
9+
import {
10+
Doc,
11+
KEY_LIST_DOC,
12+
useRestoreDoc,
13+
useTrans,
14+
} from '@/docs/doc-management';
1015

1116
import { KEY_LIST_DOC_TRASHBIN } from '../api';
1217

@@ -18,6 +23,7 @@ export const DocsGridTrashbinActions = ({
1823
doc,
1924
}: DocsGridTrashbinActionsProps) => {
2025
const { t } = useTranslation();
26+
const { untitledDocument } = useTrans();
2127
const { toast } = useToastProvider();
2228
const { mutate: restoreDoc, error } = useRestoreDoc({
2329
listInvalidQueries: [KEY_LIST_DOC, KEY_LIST_DOC_TRASHBIN],
@@ -61,7 +67,7 @@ export const DocsGridTrashbinActions = ({
6167
},
6268
];
6369

64-
const documentTitle = doc.title || t('Untitled document');
70+
const documentTitle = doc.title || untitledDocument;
6571
const menuLabel = t('Open the menu of actions for the document: {{title}}', {
6672
title: documentTitle,
6773
});

‎src/frontend/apps/impress/src/features/docs/docs-import/assets/illustration-docs-empty.png‎

293 KB
Loading

‎src/frontend/apps/impress/src/features/docs/docs-import/components/DocImportModal.tsx‎

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
import { Button, Modal, ModalSize } from '@gouvfr-lasuite/cunningham-react';
2+
import Image from 'next/image';
3+
import { useState } from 'react';
4+
import { Trans, useTranslation } from 'react-i18next';
5+
import { createGlobalStyle } from 'styled-components';
6+
import { useDebouncedCallback } from 'use-debounce';
7+
8+
import { Box, ButtonCloseModal, Text } from '@/components';
9+
import { QuickSearch } from '@/components/quick-search';
10+
import { Doc, useTrans } from '@/docs/doc-management';
11+
import { useResponsiveStore } from '@/stores';
12+
13+
import { DocSearchTarget } from '../../doc-search';
14+
import { DocSearchContent } from '../../doc-search/components/DocSearchContent';
15+
import EmptySearchIcon from '../assets/illustration-docs-empty.png';
16+
17+
export const DocImportModalStyle = createGlobalStyle`
18+
.c__modal__title {
19+
border-bottom: 1px solid var(--c--contextuals--border--surface--primary);
20+
}
21+
`;
22+
23+
type DocImportModalGlobalProps = {
24+
doc: Doc;
25+
isOpen: boolean;
26+
onClose: () => void;
27+
};
28+
29+
export const DocImportModal = ({
30+
doc,
31+
isOpen,
32+
onClose,
33+
}: DocImportModalGlobalProps) => {
34+
const { t } = useTranslation();
35+
const [loading, setLoading] = useState(false);
36+
const { untitledDocument } = useTrans();
37+
const docTitle = doc.title || untitledDocument;
38+
39+
const [search, setSearch] = useState('');
40+
const [docSelected, setDocSelected] = useState<Doc>();
41+
42+
const { isDesktop } = useResponsiveStore();
43+
44+
const handleInputSearch = useDebouncedCallback(setSearch, 300);
45+
46+
const handleSelect = (doc: Doc) => {
47+
setDocSelected(doc);
48+
};
49+
50+
return (
51+
<>
52+
<DocImportModalStyle />
53+
<Modal
54+
isOpen={isOpen}
55+
onClose={onClose}
56+
closeOnClickOutside
57+
size={isDesktop ? ModalSize.LARGE : ModalSize.FULL}
58+
hideCloseButton
59+
rightActions={
60+
<>
61+
<Button
62+
aria-label={t('Cancel the move')}
63+
variant="secondary"
64+
fullWidth
65+
//onClick={() => onClose()}
66+
>
67+
{t('Cancel')}
68+
</Button>
69+
<Button
70+
// aria-label={
71+
// format === DocDownloadFormat.PRINT ? t('Print') : t('Download')
72+
// }
73+
variant="primary"
74+
fullWidth
75+
//onClick={() => void onSubmit()}
76+
//disabled={isExporting}
77+
>
78+
{t('Move here')}
79+
</Button>
80+
</>
81+
}
82+
title={
83+
<Box>
84+
<Box
85+
$direction="row"
86+
$justify="space-between"
87+
$align="center"
88+
$width="100%"
89+
>
90+
<Text as="h2" $margin="0" $size="h6" $align="flex-start">
91+
{t('Move')}
92+
</Text>
93+
<ButtonCloseModal
94+
aria-label={t('Close the move modal')}
95+
onClick={() => onClose()}
96+
/>
97+
</Box>
98+
<Box $margin={{ top: 'sm' }}>
99+
<Text
100+
$size="sm"
101+
$variation="secondary"
102+
$display="inline"
103+
$weight="normal"
104+
>
105+
<Trans t={t}>
106+
Choose the new location for <strong>{docTitle}</strong>.
107+
</Trans>
108+
</Text>
109+
</Box>
110+
</Box>
111+
}
112+
>
113+
<Box
114+
aria-label={t('Move modal')}
115+
$direction="column"
116+
$justify="space-between"
117+
className="--docs--doc-move-modal"
118+
>
119+
<QuickSearch
120+
placeholder={t('Search for a doc')}
121+
loading={loading}
122+
onFilter={handleInputSearch}
123+
>
124+
<Box
125+
$padding={{ horizontal: '10px' }}
126+
$height={isDesktop ? '500px' : 'calc(100vh - 68px - 1rem)'}
127+
>
128+
{search.length === 0 && (
129+
<Box
130+
$direction="column"
131+
$height="100%"
132+
$align="center"
133+
$justify="center"
134+
>
135+
<Image
136+
width={320}
137+
src={EmptySearchIcon}
138+
alt={t('No active search')}
139+
/>
140+
</Box>
141+
)}
142+
{search && (
143+
<DocSearchContent
144+
search={search}
145+
filters={{ target: DocSearchTarget.ALL }}
146+
onSelect={handleSelect}
147+
onLoadingChange={setLoading}
148+
/>
149+
)}
150+
</Box>
151+
</QuickSearch>
152+
</Box>
153+
</Modal>
154+
</>
155+
);
156+
};

0 commit comments

Comments
 (0)