Skip to content

Commit d5c6a0a

Browse files
samuel-gomezsamuel-gomez
authored
Merge pull request #100 from samuel-gomez/feat/add-shared-table-row-headers
Feat(shared table | demo): add row headers
2 parents 445e66a + e019771 commit d5c6a0a

File tree

38 files changed

+305
-85
lines changed

38 files changed

+305
-85
lines changed

‎features/Demos/Employees/Employees.feature‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
Feature: Consultation des collaborateurs
2+
3+
@RG1
4+
Scenario: Affichage de la liste des collaborateurs
5+
Given Je suis un utilisateur connu et connecté avec le profil "Admin"
6+
When J'accède à la page des collaborateurs
7+
Then la page contient un tableau répertoriant la liste des collaborateurs
8+
And le tableau présente des entêtes de colonnes dans l’ordre suivant : "", "Collaborateur 1", "Collaborateur 2"
9+
And le tableau contient 3 lignes avec 3 colonnes dans l'ordre suivant :
10+
| | employee1 | employee2 |
11+
| Contact | James Philips | Marie Beauchamp |
12+
| Position | Directeur des ventes | Manager des ventes |
13+
| Email | jp@1ltd.example.com | marie@2co.example.com |

‎src/App/Routes/Routes.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { RouteSecure } from './RouteSecure';
66

77
const Home = lazy(() => import('pages/Home'));
88
const Members = lazy(() => import('pages/Demos/Members'));
9+
const Employees = lazy(() => import('pages/Demos/Employees'));
910
const MembersNew = lazy(() => import('pages/Demos/MembersNew'));
1011
const ProtectedPage = lazy(() => import('pages/Demos/ProtectedPage'));
1112
const SearchMembers = lazy(() => import('pages/Demos/SearchMembers'));
@@ -61,6 +62,7 @@ const RoutesCmpt = ({ RouteSecureCmpt = RouteSecure }: TRoutesCmpt) => (
6162
<Route path={ROUTE_URLS.MEMBERS} element={<Members />} />
6263
<Route path={ROUTE_URLS.MEMBERSNEW} element={<MembersNew />} />
6364
<Route path={ROUTE_URLS.SEARCHMEMBERS} element={<SearchMembers />} />
65+
<Route path={ROUTE_URLS.EMPLOYEES} element={<Employees />} />
6466
<Route path={ROUTE_URLS.MODAL_CUSTOM} element={<ModalCustom />} />
6567
<Route path={ROUTE_URLS.NOTIFICATION} element={<Notification />} />
6668
<Route path={ROUTE_URLS.ACCORDION} element={<Accordion />} />

‎src/App/Routes/constants.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { ROUTE_URL_EMPLOYEES as EMPLOYEES } from 'pages/Demos/Employees/constants';
12
import { ROUTE_URL_MEMBERS as MEMBERS } from 'pages/Demos/Members/constants';
23
import { ROUTE_URL_MEMBERSNEW as MEMBERSNEW } from 'pages/Demos/MembersNew/constants';
34
import { ROUTE_URL_MODAL_CUSTOM as MODAL_CUSTOM } from 'pages/Demos/ModalCustom/constants';
@@ -11,8 +12,8 @@ import { ROUTE_URL_ACTION as ACTION } from 'pages/Demos/Action/constants';
1112
import { ROUTE_URL_ALERT as ALERT } from 'pages/Demos/Alert/constants';
1213
import { ROUTE_URL_BADGE as BADGE } from 'pages/Demos/Badge/constants';
1314
import { ROUTE_URL_BUTTON as BUTTON } from 'pages/Demos/Button/constants';
14-
import { ROUTE_URL_CHECKBOX_INPUT as CHECKBOX_INPUT } from 'pages/Demos/CheckboxInput/constants';
1515
import { ROUTE_URL_CARD as CARD } from 'pages/Demos/Card/constants';
16+
import { ROUTE_URL_CHECKBOX_INPUT as CHECKBOX_INPUT } from 'pages/Demos/CheckboxInput/constants';
1617
import { ROUTE_URL_DATE_INPUT as DATE_INPUT } from 'pages/Demos/DateInput/constants';
1718
import { ROUTE_URL_FILE_INPUT as FILE_INPUT } from 'pages/Demos/FileInput/constants';
1819
import { ROUTE_URL_FOOTER as FOOTER } from 'pages/Demos/Footer/constants';
@@ -35,8 +36,8 @@ import { ROUTE_URL_STEPPER as STEPPER } from 'pages/Demos/Stepper/constants';
3536
import { ROUTE_URL_SWITCH as SWITCH } from 'pages/Demos/Switch/constants';
3637
import { ROUTE_URL_TABLE as TABLE } from 'pages/Demos/Table/constants';
3738
import { ROUTE_URL_TABS as TABS } from 'pages/Demos/Tabs/constants';
38-
import { ROUTE_URL_TEXTAREA_INPUT as TEXTAREA_INPUT } from 'pages/Demos/TextareaInput/constants';
3939
import { ROUTE_URL_TEXT_INPUT as TEXT_INPUT } from 'pages/Demos/TextInput/constants';
40+
import { ROUTE_URL_TEXTAREA_INPUT as TEXTAREA_INPUT } from 'pages/Demos/TextareaInput/constants';
4041
import { ROUTE_URL_TITLE as TITLE } from 'pages/Demos/Title/constants';
4142
import { ROUTE_URL_TITLE_BAR as TITLE_BAR } from 'pages/Demos/TitleBar/constants';
4243

@@ -51,6 +52,7 @@ const URLS_FULL_DEMOS = {
5152
MEMBERS,
5253
MEMBERSNEW,
5354
SEARCHMEMBERS,
55+
EMPLOYEES,
5456
MODAL_CUSTOM,
5557
NOTIFICATION,
5658
};

‎src/Layout/Menu/constants.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,10 @@ const MENU_ITEMS = [
1212
url: ROUTE_URL.DEMOS,
1313
basePathChildren: ROUTE_URL.DEMOS,
1414
children: [
15+
{
16+
label: 'Collaborateurs',
17+
url: ROUTE_URL.EMPLOYEES,
18+
},
1519
{
1620
label: 'Membres',
1721
url: ROUTE_URL.MEMBERS,

‎src/pages/Demos/Employees/Employees.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import Layout, { type TLayoutPage } from 'Layout';
2+
import Table from 'shared/components/Table';
3+
import { type TItems } from 'shared/components/Table/Body/Body';
4+
import { TABLE_DATA, TABLE_HEADERS, TABLE_ITEMS_TYPE, TITLE, TITLE_BAR } from './constants';
5+
6+
export type TRequests = TLayoutPage & {
7+
requests?: TItems[];
8+
title?: string;
9+
headers?: typeof TABLE_HEADERS;
10+
};
11+
12+
const Employees = ({ requests = TABLE_DATA, titleBar = TITLE_BAR, title = TITLE, headers = TABLE_HEADERS }: TRequests) => (
13+
<Layout propsTitle={{ title: titleBar, backHome: true }}>
14+
<h1 className="af-title--content">{title}</h1>
15+
<Table title={title} items={requests} headers={headers} itemsType={TABLE_ITEMS_TYPE} />
16+
</Layout>
17+
);
18+
19+
export default Employees;

‎src/pages/Demos/Employees/__tests__/Employees.spec.tsx‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import { defineFeature, loadFeature } from 'jest-cucumber';
2+
import { render, screen } from 'shared/testsUtils/customRender';
3+
import {
4+
JeSuisUnUtilisateurConnuEtConnecteAvecleProfil,
5+
LaPageContientUnTableau,
6+
LeTableauContientLesLignesCorrespondantAuxDonneesRecues,
7+
LeTableauPresenteDesEntetesDeColonnesDansLOrdreSuivant,
8+
} from 'shared/testsUtils/sharedScenarios';
9+
import Employees from '../Employees';
10+
11+
const feature = loadFeature('features/Demos/Employees/Employees.feature');
12+
const tableItemsType = 'collaborateurs';
13+
14+
defineFeature(feature, test => {
15+
let role: string;
16+
17+
test('Affichage de la liste des collaborateurs', ({ given, when, then, and }) => {
18+
JeSuisUnUtilisateurConnuEtConnecteAvecleProfil(given, (roleMock: string) => {
19+
role = roleMock;
20+
});
21+
22+
when("J'accède à la page des collaborateurs", async () => {
23+
render(<Employees />, {}, { role });
24+
expect(await screen.findByText(/Samuel/)).toBeInTheDocument();
25+
});
26+
27+
LaPageContientUnTableau(then, 'la page contient un tableau répertoriant la liste des collaborateurs', tableItemsType);
28+
29+
LeTableauPresenteDesEntetesDeColonnesDansLOrdreSuivant(
30+
and,
31+
/^le tableau présente des entêtes de colonnes dans l’ordre suivant : "(.*)", "(.*)", "(.*)"$/,
32+
tableItemsType,
33+
);
34+
35+
LeTableauContientLesLignesCorrespondantAuxDonneesRecues(
36+
and,
37+
/^le tableau contient (\d+) lignes avec (\d+) colonnes dans l'ordre suivant :$/,
38+
tableItemsType,
39+
);
40+
});
41+
});

‎src/pages/Demos/Employees/constants.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import tableData from './tableData.json';
2+
3+
export const TITLE_BAR = 'Gestion des collaborateurs';
4+
export const TITLE = 'Liste des collaborateurs';
5+
export const ROUTE_URL_EMPLOYEES = 'employees';
6+
export const TABLE_ITEMS_TYPE = 'collaborateurs';
7+
8+
export const SERVICE_NAME = 'employees';
9+
10+
export const TABLE_HEADERS = [
11+
{ id: 'header', key: 'header', isBlank: true },
12+
{ id: 'employee1', key: 'employee1', label: 'Collaborateur 1', field: 'employee1' },
13+
{ id: 'employee2', key: 'employee2', label: 'Collaborateur 2', field: 'employee2' },
14+
];
15+
16+
export const TABLE_DATA = Object.values(tableData);

‎src/pages/Demos/Employees/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export { default } from './Employees';
2+
export { ROUTE_URL_EMPLOYEES, TITLE, TITLE_BAR } from './constants';

‎src/pages/Demos/Employees/tableData.json‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
[
2+
{
3+
"key": "1",
4+
"cols": {
5+
"header": {
6+
"id": "contact",
7+
"label": "Contact",
8+
"isHeader": true
9+
},
10+
"employee1": {
11+
"label": "James Philips",
12+
"headers": "employee1 contact"
13+
},
14+
"employee2": {
15+
"label": "Marie Beauchamp",
16+
"headers": "employee2 contact"
17+
}
18+
}
19+
},
20+
{
21+
"key": "2",
22+
"cols": {
23+
"header": {
24+
"id": "position",
25+
"label": "Position",
26+
"isHeader": true
27+
},
28+
"employee1": {
29+
"label": "Directeur des ventes",
30+
"headers": "employee1 position"
31+
},
32+
"employee2": {
33+
"label": "Manager des ventes",
34+
"headers": "employee2 position"
35+
}
36+
}
37+
},
38+
{
39+
"key": "3",
40+
"cols": {
41+
"header": {
42+
"id": "email",
43+
"label": "Email",
44+
"isHeader": true
45+
},
46+
"employee1": {
47+
"label": "[email protected]",
48+
"headers": "employee1 email"
49+
},
50+
"employee2": {
51+
"label": "[email protected]",
52+
"headers": "employee2 email"
53+
}
54+
}
55+
}
56+
]

‎src/shared/components/Table/Body/Body.tsx‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,13 @@
11
import { Table as TableTk } from '@axa-fr/react-toolkit-all';
22
import type { ReactNode } from 'react';
33
import Line from './Line';
4-
5-
export type Tcol = {
6-
label?: string;
7-
hover?: string;
8-
children?: ReactNode;
9-
classModifier?: string;
10-
};
4+
import { type Tcol } from './types';
115

126
export type TCols = {
137
[k: string]: Tcol;
148
};
159

16-
type TItems = {
10+
export type TItems = {
1711
key: string;
1812
classModifier?: string;
1913
cols: TCols;

0 commit comments

Comments
 (0)