diff --git a/CHANGELOG.md b/CHANGELOG.md
index f37aa757..b017c634 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,7 @@ and this project adheres to
- 🤡(demo) generate dummy documents on dev users #120
- ✨(frontend) create side modal component #134
+- ✨(frontend) Doc grid actions (update / delete) #136
## Changed
diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-grid.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-grid.spec.ts
index b827a942..5a402951 100644
--- a/src/frontend/apps/e2e/__tests__/app-impress/doc-grid.spec.ts
+++ b/src/frontend/apps/e2e/__tests__/app-impress/doc-grid.spec.ts
@@ -171,14 +171,9 @@ test.describe('Documents Grid', () => {
const responsePage1 = await responsePromisePage1;
expect(responsePage1.ok()).toBeTruthy();
- const docNamePage1 = datagridPage1
- .getByRole('row')
- .nth(1)
- .getByRole('cell')
- .nth(1);
-
- await expect(docNamePage1).toHaveText(/.*/);
- const textDocNamePage1 = await docNamePage1.textContent();
+ await expect(
+ datagridPage1.getByRole('row').nth(1).getByRole('cell').nth(1),
+ ).toHaveText(/.*/);
await page.getByLabel('Go to page 2').click();
@@ -189,17 +184,62 @@ test.describe('Documents Grid', () => {
const responsePage2 = await responsePromisePage2;
expect(responsePage2.ok()).toBeTruthy();
- const docNamePage2 = datagridPage2
- .getByRole('row')
- .nth(1)
- .getByRole('cell')
- .nth(1);
+ await expect(
+ datagridPage2.getByRole('row').nth(1).getByRole('cell').nth(1),
+ ).toHaveText(/.*/);
+ });
- await expect(datagridPage2.getByLabel('Loading data')).toBeHidden();
+ test('it updates document', async ({ page }) => {
+ const datagrid = page
+ .getByLabel('Datagrid of the documents page 1')
+ .getByRole('table');
- await expect(docNamePage2).toHaveText(/.*/);
- const textDocNamePage2 = await docNamePage2.textContent();
+ const docRow = datagrid.getByRole('row').nth(1).getByRole('cell');
- expect(textDocNamePage1 !== textDocNamePage2).toBeTruthy();
+ const docName = await docRow.nth(1).textContent();
+
+ await docRow.getByLabel('Open the document options').click();
+
+ await page.getByText('Update document').click();
+
+ await page.getByLabel('Document name').fill(`${docName} updated`);
+
+ await page.getByText('Validate the modification').click();
+
+ await expect(datagrid.getByText(`${docName} updated`)).toBeVisible();
+ });
+
+ test('it deletes the document', async ({ page }) => {
+ const datagrid = page
+ .getByLabel('Datagrid of the documents page 1')
+ .getByRole('table');
+
+ const docRow = datagrid.getByRole('row').nth(1).getByRole('cell');
+
+ const docName = await docRow.nth(1).textContent();
+
+ await docRow.getByLabel('Open the document options').click();
+
+ await page
+ .getByRole('button', {
+ name: 'Delete document',
+ })
+ .click();
+
+ await expect(
+ page.locator('h2').getByText(`Deleting the document "${docName}"`),
+ ).toBeVisible();
+
+ await page
+ .getByRole('button', {
+ name: 'Confirm deletion',
+ })
+ .click();
+
+ await expect(
+ page.getByText('The document has been deleted.'),
+ ).toBeVisible();
+
+ await expect(datagrid.getByText(docName!)).toBeHidden();
});
});
diff --git a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx
index 191bd09d..90592be7 100644
--- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx
+++ b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx
@@ -17,6 +17,8 @@ import {
import { PAGE_SIZE } from '../conf';
+import { DocsGridActions } from './DocsGridActions';
+
const DocsGridStyle = createGlobalStyle`
& .c__datagrid{
max-height: 91%;
@@ -191,6 +193,12 @@ export const DocsGrid = () => {
);
},
},
+ {
+ id: 'column-actions',
+ renderCell: ({ row }) => {
+ return ;
+ },
+ },
]}
rows={docs}
isLoading={isLoading}
diff --git a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridActions.tsx b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridActions.tsx
new file mode 100644
index 00000000..5b6d85f2
--- /dev/null
+++ b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridActions.tsx
@@ -0,0 +1,71 @@
+import { Button } from '@openfun/cunningham-react';
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { Box, DropButton, IconOptions, Text } from '@/components';
+import {
+ Doc,
+ ModalRemoveDoc,
+ ModalUpdateDoc,
+} from '@/features/docs/doc-management';
+
+interface DocsGridActionsProps {
+ doc: Doc;
+}
+
+export const DocsGridActions = ({ doc }: DocsGridActionsProps) => {
+ const { t } = useTranslation();
+ const [isModalUpdateOpen, setIsModalUpdateOpen] = useState(false);
+ const [isModalRemoveOpen, setIsModalRemoveOpen] = useState(false);
+ const [isDropOpen, setIsDropOpen] = useState(false);
+
+ return (
+ <>
+
+ }
+ onOpenChange={(isOpen) => setIsDropOpen(isOpen)}
+ isOpen={isDropOpen}
+ >
+
+ {doc.abilities.partial_update && (
+
+ )}
+ {doc.abilities.destroy && (
+
+ )}
+
+
+ {isModalUpdateOpen && (
+ setIsModalUpdateOpen(false)} doc={doc} />
+ )}
+ {isModalRemoveOpen && (
+ setIsModalRemoveOpen(false)} doc={doc} />
+ )}
+ >
+ );
+};