Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add publish function on list #1473

Merged
merged 5 commits into from
Oct 22, 2024
Merged

feat: add publish function on list #1473

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6a5e14b
feat: add publish function on list
m-maillot Sep 18, 2024
ee0a6db
feat: rename components
m-maillot Oct 1, 2024
827df44
fix: import issues
m-maillot Oct 22, 2024
6b796d9
feat: amélioration du wording
m-maillot Oct 22, 2024
34a7711
feat: amélioration du typage
m-maillot Oct 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
146 changes: 146 additions & 0 deletions targets/frontend/src/components/list/DataList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,146 @@
import * as React from "react";
import { useState } from "react";
import Box from "@mui/material/Box";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableRow from "@mui/material/TableRow";
import Checkbox from "@mui/material/Checkbox";
import { Toolbar } from "./Toolbard";
import { Head } from "./Head";
import { Data, HeadCell, Source } from "./type";
import { PublishModal } from "./PublishModal";

type Props<T extends Data> = {
source: Source;
readonly headCells: HeadCell<T>[];
rows: T[];
onClickItem: (id: string) => void;
onClickCreation: () => void;
setSearch: (value: string | undefined) => void;
customFilters?: React.ReactNode;
};

type ItemCheck = {
[id: string]: boolean;
};

export const DataList = <T extends Data>({
source,
headCells,
rows,
onClickItem,
onClickCreation,
setSearch,
customFilters,
}: Props<T>) => {
const [itemsCheck, setItemCheck] = useState<ItemCheck>({});
const [isOpen, showModal] = useState<boolean>(false);

const handleSelectAllClick = (event: React.ChangeEvent<HTMLInputElement>) => {
setItemCheck(
rows.reduce<ItemCheck>((acc, item) => {
acc[item.id] = event.target.checked;
return acc;
}, {})
);
};

const handleItemCheck = (id: string, checked: boolean) => {
setItemCheck({
...itemsCheck,
[id]: checked,
});
};

const handleClick = (id: string) => {
const atLeastOneChecked = Object.values(itemsCheck).some(
(checked) => checked
);
if (atLeastOneChecked) {
handleItemCheck(id, !itemsCheck[id]);
} else {
onClickItem(id);
}
};

const numSelected = (): number => {
return Object.values(itemsCheck).filter((item) => item).length;
};

return (
<Box sx={{ width: "100%" }}>
<Toolbar
numSelected={numSelected()}
onClickPublish={() => showModal(true)}
onClickCreation={onClickCreation}
setSearch={setSearch}
customFilters={customFilters}
/>
<TableContainer>
<Table sx={{ minWidth: 750 }} size="medium">
<Head
headCells={headCells}
numSelected={numSelected()}
onSelectAllClick={handleSelectAllClick}
rowCount={rows.length}
/>
<TableBody>
{rows.map((row, index) => {
const isItemSelected = itemsCheck[row.id] ?? false;
const labelId = `${source}-table-checkbox-${index}`;

return (
<TableRow
hover
key={row.id}
selected={isItemSelected}
sx={{ cursor: "pointer" }}
>
<TableCell padding="checkbox">
<Checkbox
color="primary"
checked={isItemSelected}
onChange={(event) =>
handleItemCheck(row.id, event.target.checked)
}
/>
</TableCell>
{headCells.map((head) => (
<TableCell
key={head.id}
id={labelId}
onClick={() => handleClick(row.id)}
>
{head.render
? head.render(row[head.dataIndex])
: (row[head.dataIndex] as React.ReactNode)}
</TableCell>
))}
</TableRow>
);
})}
</TableBody>
</Table>
</TableContainer>
{isOpen && (
<PublishModal
source={source}
contents={Object.entries(itemsCheck)
.filter(([_, value]) => value)
.map(([key, _]) => {
const find = rows.find((item) => item.id === key)!!;
return {
id: find.id,
title: find.title,
};
})}
open={isOpen}
onCancel={() => showModal(false)}
onClose={() => showModal(false)}
/>
)}
</Box>
);
};
40 changes: 40 additions & 0 deletions targets/frontend/src/components/list/Head.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import TableCell from "@mui/material/TableCell";
import Checkbox from "@mui/material/Checkbox";
import * as React from "react";
import { Data, HeadCell } from "./type";

export type HeadProps<T extends Data> = {
readonly headCells: HeadCell<T>[];
numSelected: number;
onSelectAllClick: (event: React.ChangeEvent<HTMLInputElement>) => void;
rowCount: number;
};

export const Head = <T extends Data>({
onSelectAllClick,
numSelected,
rowCount,
headCells,
}: HeadProps<T>) => {
return (
<TableHead>
<TableRow>
<TableCell padding="checkbox">
<Checkbox
color="primary"
indeterminate={numSelected > 0 && numSelected < rowCount}
checked={rowCount > 0 && numSelected === rowCount}
onChange={onSelectAllClick}
/>
</TableCell>
{headCells.map((headCell) => (
<TableCell key={headCell.id} padding="normal">
{headCell.label}
</TableCell>
))}
</TableRow>
</TableHead>
);
};
0 ...ets/frontend/src/components/list/index.js → targets/frontend/src/components/list/List.js
View file
Open in desktop
File renamed without changes.
64 changes: 64 additions & 0 deletions targets/frontend/src/components/list/PublishModal/ListContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
import {
CircularProgress,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
} from "@mui/material";
import { Content } from "./index";
import PauseCircleOutlineIcon from "@mui/icons-material/PauseCircleOutline";
import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline";
import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";

type ContentWithProgression = Content & {
status: "pending" | "processing" | "done" | "error";
};

type ListContentProps = {
contents: ContentWithProgression[];
};

const Status = ({ status }: Pick<ContentWithProgression, "status">) => {
switch (status) {
case "pending":
return <PauseCircleOutlineIcon color="disabled" />;
case "processing":
return <CircularProgress color="info" size="1.5rem" />;
case "done":
return <CheckCircleOutlineIcon color="success" />;
case "error":
return <ErrorOutlineIcon color="error" />;
}
};

export function ListContent({ contents }: ListContentProps): JSX.Element {
return (
<TableContainer sx={{ maxHeight: 440 }}>
<Table stickyHeader>
<TableHead>
<TableRow>
<TableCell>Titre</TableCell>
<TableCell align="right">Progression</TableCell>
</TableRow>
</TableHead>
<TableBody>
{contents.map((row) => (
<TableRow
key={row.id}
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
>
<TableCell component="th" scope="row">
{row.title}
</TableCell>
<TableCell align="right">
<Status status={row.status} />
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
);
}
Loading
Loading