Skip to content

Commit ff83223

Browse files
AntoLCAntoLC
committed
✨(frontend) add doc editor panel header
Add doc editor panel header to show the doc title and other info.
1 parent a603998 commit ff83223

File tree

16 files changed

+197
-16
lines changed

16 files changed

+197
-16
lines changed

‎CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ and this project adheres to
1313
- 🤡(demo) generate dummy documents on dev users #120
1414
- ✨(frontend) create side modal component #134
1515
- ✨(frontend) Doc grid actions (update / delete) #136
16+
- ✨(frontend) Doc editor header information #137
1617

1718
## Changed
1819

‎src/frontend/apps/e2e/__tests__/app-impress/doc-header.spec.ts‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import { expect, test } from '@playwright/test';
2+
3+
import { goToGridDoc } from './common';
4+
5+
test.beforeEach(async ({ page }) => {
6+
await page.goto('/');
7+
});
8+
9+
test.describe('Doc Header', () => {
10+
test('it checks the element are correctly displayed', async ({ page }) => {
11+
await page.route('**/documents/**/', async (route) => {
12+
const request = route.request();
13+
if (
14+
request.method().includes('GET') &&
15+
!request.url().includes('page=')
16+
) {
17+
await route.fulfill({
18+
json: {
19+
id: 'b0df4343-c8bd-4c20-9ff6-fbf94fc94egg',
20+
content: '',
21+
title: 'Mocked document',
22+
accesses: [
23+
{
24+
id: 'b0df4343-c8bd-4c20-9ff6-fbf94fc94egg',
25+
role: 'owner',
26+
user: {
27+
email: '[email protected]',
28+
},
29+
},
30+
{
31+
id: 'b0df4343-c8bd-4c20-9ff6-fbf94fc94egg',
32+
role: 'admin',
33+
user: {
34+
email: '[email protected]',
35+
},
36+
},
37+
{
38+
id: 'b0df4343-c8bd-4c20-9ff6-fbf94fc94egg',
39+
role: 'owner',
40+
user: {
41+
email: '[email protected]',
42+
},
43+
},
44+
],
45+
abilities: {
46+
destroy: true, // Means owner
47+
versions_destroy: true,
48+
versions_list: true,
49+
versions_retrieve: true,
50+
manage_accesses: true,
51+
update: true,
52+
partial_update: true,
53+
retrieve: true,
54+
},
55+
is_public: true,
56+
created_at: '2021-09-01T09:00:00Z',
57+
},
58+
});
59+
} else {
60+
await route.continue();
61+
}
62+
});
63+
64+
await goToGridDoc(page);
65+
66+
const card = page.getByLabel(
67+
'It is the card information about the document.',
68+
);
69+
await expect(card.locator('a').getByText('home')).toBeVisible();
70+
await expect(card.locator('h2').getByText('Mocked document')).toBeVisible();
71+
await expect(card.getByText('Public')).toBeVisible();
72+
await expect(
73+
card.getByText('Created at 09/01/2021, 11:00 AM'),
74+
).toBeVisible();
75+
await expect(
76+
card.getByText('Owners: [email protected] / [email protected]'),
77+
).toBeVisible();
78+
await expect(card.getByText('Your role: Owner')).toBeVisible();
79+
});
80+
});

‎src/frontend/apps/e2e/playwright.config.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ export default defineConfig({
4848
use: {
4949
...devices['Desktop Chrome'],
5050
locale: 'en-US',
51+
timezoneId: 'Europe/Paris',
5152
storageState: 'playwright/.auth/user-chromium.json',
5253
},
5354
dependencies: ['setup'],
@@ -57,6 +58,7 @@ export default defineConfig({
5758
use: {
5859
...devices['Desktop Safari'],
5960
locale: 'en-US',
61+
timezoneId: 'Europe/Paris',
6062
storageState: 'playwright/.auth/user-webkit.json',
6163
},
6264
dependencies: ['setup'],

‎src/frontend/apps/impress/src/components/Box.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ export interface BoxProps {
3535
$radius?: CSSProperties['borderRadius'];
3636
$transition?: CSSProperties['transition'];
3737
$width?: CSSProperties['width'];
38+
$wrap?: CSSProperties['flexWrap'];
3839
$zIndex?: CSSProperties['zIndex'];
3940
}
4041

@@ -65,6 +66,7 @@ export const Box = styled('div')<BoxProps>`
6566
${({ $radius }) => $radius && `border-radius: ${$radius};`}
6667
${({ $transition }) => $transition && `transition: ${$transition};`}
6768
${({ $width }) => $width && `width: ${$width};`}
69+
${({ $wrap }) => $wrap && `flex-wrap: ${$wrap};`}
6870
${({ $css }) => $css && `${$css};`}
6971
${({ $zIndex }) => $zIndex && `z-index: ${$zIndex};`}
7072
${({ $effect }) => {

‎src/frontend/apps/impress/src/components/Text.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ export interface TextProps extends BoxProps {
1313
ReactHTML,
1414
'p' | 'span' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
1515
>;
16+
$elipsis?: boolean;
1617
$weight?: CSSProperties['fontWeight'];
1718
$textAlign?: CSSProperties['textAlign'];
1819
// eslint-disable-next-line @typescript-eslint/ban-types
@@ -49,6 +50,9 @@ export const TextStyled = styled(Box)<TextProps>`
4950
${({ $theme, $variation }) =>
5051
`color: var(--c--theme--colors--${$theme}-${$variation});`}
5152
${({ $color }) => $color && `color: ${$color};`}
53+
${({ $elipsis }) =>
54+
$elipsis &&
55+
`white-space: nowrap; overflow: hidden; text-overflow: ellipsis;`}
5256
`;
5357

5458
export const Text = ({

‎src/frontend/apps/impress/src/features/docs/doc-editor/components/DocEditor.tsx‎

Lines changed: 4 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { Alert, VariantType } from '@openfun/cunningham-react';
22
import React from 'react';
33

4-
import { Box, Card, Text } from '@/components';
4+
import { Box, Card } from '@/components';
5+
import { DocHeader } from '@/features/docs/doc-header';
56
import { Doc } from '@/features/docs/doc-management';
6-
import { DocToolBox } from '@/features/docs/doc-tools';
77

88
import { BlockNoteEditor } from './BlockNoteEditor';
99

@@ -14,19 +14,9 @@ interface DocEditorProps {
1414
export const DocEditor = ({ doc }: DocEditorProps) => {
1515
return (
1616
<>
17-
<Box
18-
$direction="row"
19-
$margin={{ all: 'big', right: 'none' }}
20-
$align="center"
21-
$position="relative"
22-
>
23-
<Text as="h2" $align="center" $margin="auto">
24-
{doc.title}
25-
</Text>
26-
<DocToolBox doc={doc} />
27-
</Box>
17+
<DocHeader doc={doc} />
2818
{!doc.abilities.partial_update && (
29-
<Box className="m-b" $css="margin-top:0;">
19+
<Box $margin={{ all: 'small', top: 'none' }}>
3020
<Alert
3121
type={VariantType.WARNING}
3222
>{`Read only, you don't have the right to update this document.`}</Alert>

‎src/frontend/apps/impress/src/features/docs/doc-tools/api/useCreatePdf.tsx‎ renamed to ‎src/frontend/apps/impress/src/features/docs/doc-header/api/useCreatePdf.tsx‎

File renamed without changes.

‎src/frontend/apps/impress/src/features/docs/doc-tools/api/useTemplates.tsx‎ renamed to ‎src/frontend/apps/impress/src/features/docs/doc-header/api/useTemplates.tsx‎

File renamed without changes.

‎src/frontend/apps/impress/src/features/docs/doc-header/components/DocHeader.tsx‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
import React, { Fragment } from 'react';
2+
import { useTranslation } from 'react-i18next';
3+
4+
import { Box, Card, StyledLink, Text } from '@/components';
5+
import { useCunninghamTheme } from '@/cunningham';
6+
import {
7+
Doc,
8+
Role,
9+
currentDocRole,
10+
useTransRole,
11+
} from '@/features/docs/doc-management';
12+
import { useDate } from '@/hook';
13+
14+
import { DocToolBox } from './DocToolBox';
15+
16+
interface DocHeaderProps {
17+
doc: Doc;
18+
}
19+
20+
export const DocHeader = ({ doc }: DocHeaderProps) => {
21+
const { colorsTokens } = useCunninghamTheme();
22+
const { t } = useTranslation();
23+
const { formatDate } = useDate();
24+
const transRole = useTransRole();
25+
26+
return (
27+
<Card
28+
$margin="big"
29+
aria-label={t('It is the card information about the document.')}
30+
>
31+
<Box $padding="small" $direction="row" $align="center">
32+
<StyledLink href="/">
33+
<Text
34+
className="material-icons"
35+
$theme="primary"
36+
$size="2rem"
37+
$css={`&:hover {background-color: ${colorsTokens()['primary-100']}; };`}
38+
$hasTransition
39+
$radius="5px"
40+
$padding="tiny"
41+
>
42+
home
43+
</Text>
44+
</StyledLink>
45+
<Box
46+
$width="1px"
47+
$height="70%"
48+
$background={colorsTokens()['greyscale-100']}
49+
$margin={{ horizontal: 'small' }}
50+
/>
51+
<Text as="h2" $align="center" $margin={{ all: 'none', left: 'tiny' }}>
52+
{doc.title}
53+
</Text>
54+
<DocToolBox doc={doc} />
55+
</Box>
56+
<Box
57+
$direction="row"
58+
$align="center"
59+
$css="border-top:1px solid #eee"
60+
$padding={{ horizontal: 'big', vertical: 'tiny' }}
61+
$gap="0.5rem 2rem"
62+
$justify="space-between"
63+
$wrap="wrap"
64+
>
65+
<Box $direction="row" $align="center" $gap="0.5rem 2rem" $wrap="wrap">
66+
{doc.is_public && (
67+
<Text
68+
$weight="bold"
69+
$background={colorsTokens()['primary-600']}
70+
$color="white"
71+
$padding="xtiny"
72+
$radius="3px"
73+
$size="s"
74+
>
75+
{t('Public')}
76+
</Text>
77+
)}
78+
<Text $size="s" $display="inline">
79+
{t('Created at')} <strong>{formatDate(doc.created_at)}</strong>
80+
</Text>
81+
<Text $size="s" $display="inline" $elipsis $maxWidth="60vw">
82+
{t('Owners:')}{' '}
83+
<strong>
84+
{doc.accesses
85+
.filter((access) => access.role === Role.OWNER)
86+
.map((access, index, accesses) => (
87+
<Fragment key={`access-${index}`}>
88+
{access.user.email}{' '}
89+
{index < accesses.length - 1 ? ' / ' : ''}
90+
</Fragment>
91+
))}
92+
</strong>
93+
</Text>
94+
</Box>
95+
<Text $size="s" $display="inline">
96+
{t('Your role:')}{' '}
97+
<strong>{transRole(currentDocRole(doc.abilities))}</strong>
98+
</Text>
99+
</Box>
100+
</Card>
101+
);
102+
};

‎src/frontend/apps/impress/src/features/docs/doc-tools/components/DocToolBox.tsx‎ renamed to ‎src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
2828
const [isDropOpen, setIsDropOpen] = useState(false);
2929

3030
return (
31-
<Box $margin="big" $position="absolute" $css="right:1rem;">
31+
<Box $margin={{ left: 'auto' }}>
3232
<DropButton
3333
button={
3434
<IconOptions

0 commit comments

Comments
 (0)