Skip to content

Commit

Permalink
feat(redmine 1302081): add inputs to modify title and description in …
Browse files Browse the repository at this point in the history 
…detail tab
  • Loading branch information
@subraAntoine
subraAntoine committed Jul 1, 2024
1 parent cd3bd24 commit 76564a7
Show file tree
Hide file tree
Showing 3 changed files with 227 additions and 66 deletions.
5 changes: 5 additions & 0 deletions .changeset/small-singers-juggle.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'storybook-pages': minor
---

Add inputs to modify title and description in detail tab on agenda item page
159 changes: 102 additions & 57 deletions packages/storybook-pages/src/Pages/AgendaItemPage/AgendaItemPage.mock.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,11 @@ export const menusMock: IMenuItem<string>[] = [
];

export interface IAgendaItemTab {
content: ReactNode;
content: {
composent?: ReactNode;
description?: string;
title?: string;
};
id: string;
}

Expand All @@ -56,92 +60,133 @@ export const tabsMock: IAgendaItemOrder[] = [
id: '1',
tabs: [
{
content: (
<>
<p>Content of Order 1</p>
<p>Tab order</p>
</>
),
content: {
composent: (
<>
<p>Content of Order 1</p>
<p>Tab order</p>
</>
),
},

id: 'order',
},
{
content: (
<>
<p>Content of Order 1</p>
<p>Tab details</p>
</>
),
content: {
description: '',
title: 'Titre tab détails order 1',
},
id: 'details',
},
{
content: (
<>
<p>Content of Order 1</p>
<p>Tab conflicts</p>
</>
),
content: {
composent: (
<>
<p>Content of Order 1</p>
<p>Tab conflicts</p>
</>
),
},
id: 'conflicts',
},
{
content: (
<>
<p>Content of Order 1</p>
<p>Tab sends</p>
</>
),
content: {
composent: (
<>
<p>Content of Order 1</p>
<p>Tab sends</p>
</>
),
},
id: 'sends',
},
{
content: (
<>
<p>Content of Order 1</p>
<p>Tab pv</p>
</>
),
content: {
composent: (
<>
<p>Content of Order 1</p>
<p>Tab pv</p>
</>
),
},
id: 'pv',
},
{
content: (
<>
<p>Content of Order 1</p>
<p>Tab decisions</p>
</>
),
content: {
composent: (
<>
<p>Content of Order 1</p>
<p>Tab decisions</p>
</>
),
},
id: 'decisions',
},
{
content: (
<>
<p>Content of Order 1</p>
<p>Tab history</p>
</>
),
content: {
composent: (
<>
<p>Content of Order 1</p>
<p>Tab history</p>
</>
),
},
id: 'history',
},
],
},
{
id: '2',
tabs: [
{ content: 'Content of Order 2, Tab order', id: 'order' },
{ content: 'Content of Order 2, Tab details', id: 'details' },
{ content: 'Content of Order 2, Tab conflicts', id: 'conflicts' },
{ content: 'Content of Order 2, Tab sends', id: 'sends' },
{ content: 'Content of Order 2, Tab pv', id: 'pv' },
{ content: 'Content of Order 2, Tab decisions', id: 'decisions' },
{ content: 'Content of Order 2, Tab history', id: 'history' },
{ content: { composent: 'Content of Order 2, Tab order' }, id: 'order' },
{
content: {
description: '',
title: 'Titre tab détails order 2',
},
id: 'details',
},
{
content: { composent: 'Content of Order 2, Tab conflicts' },
id: 'conflicts',
},
{ content: { composent: 'Content of Order 2, Tab sends' }, id: 'sends' },
{ content: { composent: 'Content of Order 2, Tab pv' }, id: 'pv' },
{
content: { composent: 'Content of Order 2, Tab decisions' },
id: 'decisions',
},
{
content: { composent: 'Content of Order 2, Tab history' },
id: 'history',
},
],
},
{
id: '3',
tabs: [
{ content: 'Content of Order 3, Tab order', id: 'order' },
{ content: 'Content of Order 3, Tab details', id: 'details' },
{ content: 'Content of Order 3, Tab conflicts', id: 'conflicts' },
{ content: 'Content of Order 3, Tab sends', id: 'sends' },
{ content: 'Content of Order 3, Tab pv', id: 'pv' },
{ content: 'Content of Order 3, Tab decisions', id: 'decisions' },
{ content: 'Content of Order 3, Tab history', id: 'history' },
{ content: { composent: 'Content of Order 3, Tab order' }, id: 'order' },
{
content: {
description: '',
title: 'Titre tab détails order 3',
},
id: 'details',
},
{
content: { composent: 'Content of Order 3, Tab conflicts' },
id: 'conflicts',
},
{ content: { composent: 'Content of Order 3, Tab order' }, id: 'sends' },
{ content: { composent: 'Content of Order 3, Tab pv' }, id: 'pv' },
{
content: { composent: 'Content of Order 3, Tab decisions' },
id: 'decisions',
},
{
content: { composent: 'Content of Order 3, Tab history' },
id: 'history',
},
],
},
];
129 changes: 120 additions & 9 deletions packages/storybook-pages/src/Pages/AgendaItemPage/AgendaItemPage.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,13 @@
'use client';

import type { ReactElement } from 'react';
import type { IAgendaItemOrder } from './AgendaItemPage.mock';
import type { ReactElement, ReactNode } from 'react';

import { AppShell, Button, Tabs } from '@mantine/core';
import { AppShell, Button, Group, Stack, Tabs, TextInput } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';
import {
Breadcrumbs,
ConfirmModal,
FoldableColumnLayout,
SidebarMenu,
} from '@smile/haring-react';
Expand All @@ -18,9 +21,21 @@ import {
} from './AgendaItemPage.mock';
import classes from './AgendaItemPage.module.css';

interface IModalConfig {
mode: string;
value?: string;
}

export function AgendaItemPage(): ReactElement {
const [openedMenu, setOpenedMenu] = useState<number>(0);
const [activeTab, setActiveTab] = useState<string | null>('order');
const [tabData, setTabData] = useState<IAgendaItemOrder[]>(tabsMock);
const [modalConfig, setModalConfig] = useState<IModalConfig>({
mode: '',
value: '',
});

const [opened, { open, close }] = useDisclosure(false);

function handlePrevious(): void {
const previousIndex = openedMenu - 1;
Expand All @@ -36,6 +51,88 @@ export function AgendaItemPage(): ReactElement {
setOpenedMenu(newOpenedId);
}

const tabContent = (): ReactNode => {
if (activeTab === 'details') {
const activeTabData = tabData.find(
(o) => o.id === menusMock[openedMenu].id,
);
const tabContent = activeTabData?.tabs.find((t) => t.id === activeTab)
?.content;

if (tabContent) {
const { title, description } = tabContent;
return (
<Stack>
<Group>
<h2>Titre :</h2>
<h3>{title}</h3>
<Button
onClick={() => {
setModalConfig({
mode: 'title',
value: title,
});
open();
}}
>
Modifier
</Button>
</Group>

<Stack>
<Group>
<h2>Description : </h2>
<Button
onClick={() => {
setModalConfig({
mode: 'description',
value: description,
});
open();
}}
>
Modifier
</Button>
</Group>
<p>{description}</p>
</Stack>
</Stack>
);
}

return <h1>Details</h1>;
}
return tabData
.find((o) => o.id === menusMock[openedMenu].id)
?.tabs.find((t) => t.id === activeTab)?.content.composent;
};

const handleConfirmModal = (): void => {
const newTabData = tabData.map((order) => {
if (order.id === menusMock[openedMenu].id) {
return {
...order,
tabs: order.tabs.map((tab) => {
if (tab.id === activeTab) {
return {
...tab,
content: {
...tab.content,
[modalConfig.mode]: modalConfig.value,
},
};
}
return tab;
}),
};
}
return order;
});

setTabData(newTabData);
close();
};

return (
<AppShell classNames={{ main: classes.main }} padding={0}>
<AppShell.Main>
Expand Down Expand Up @@ -71,13 +168,27 @@ export function AgendaItemPage(): ReactElement {
<Tabs.Tab value="history">{texts.history}</Tabs.Tab>
</Tabs.List>
</Tabs>
<div className={classes.content}>
{
tabsMock
.find((o) => o.id === menusMock[openedMenu].id)
?.tabs.find((t) => t.id === activeTab)?.content
}
</div>
<div className={classes.content}>{tabContent()}</div>
<ConfirmModal
cancelColor="red"
confirmColor="black"
onCancel={() => {
setModalConfig({ ...modalConfig, value: '' });
close();
}}
onClose={close}
onConfirm={handleConfirmModal}
opened={opened}
>
<h1>Modify {modalConfig.mode}</h1>
<TextInput
label={modalConfig.mode}
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
setModalConfig({ ...modalConfig, value: e.target.value })
}
value={modalConfig.value}
/>
</ConfirmModal>
<div className={classes.pagination}>
<Button onClick={handlePrevious}>{texts.previous}</Button>
<Button onClick={handleNext}>{texts.next}</Button>
Expand Down

0 comments on commit 76564a7

Please sign in to comment.