From 833e8e29e2e5e9a1c3b374796e305f92ffe71ca0 Mon Sep 17 00:00:00 2001 From: hatim dinia Date: Wed, 11 Dec 2024 10:42:34 +0100 Subject: [PATCH] feat(ui): add command details on variants commands panel --- webapp/src/common/types.ts | 3 + .../CommandListItem/CommandDetails.tsx | 83 +++++++++++++++++++ .../CommandListItem/index.tsx | 9 +- .../CommandListItem/style.ts | 9 +- .../DraggableCommands/CommandListView.tsx | 6 +- .../Commands/Edition/commandTypes.ts | 22 ++++- .../Singlestudy/Commands/Edition/index.tsx | 24 +++--- .../App/Singlestudy/Commands/Edition/style.ts | 16 ++-- .../App/Singlestudy/Commands/Edition/utils.ts | 6 +- 9 files changed, 141 insertions(+), 37 deletions(-) create mode 100644 webapp/src/components/App/Singlestudy/Commands/Edition/DraggableCommands/CommandListItem/CommandDetails.tsx diff --git a/webapp/src/common/types.ts b/webapp/src/common/types.ts index 0674b5031a..ece13fa1ea 100644 --- a/webapp/src/common/types.ts +++ b/webapp/src/common/types.ts @@ -306,6 +306,9 @@ export interface CommandDTO { id?: string; action: string; args: object; + version?: number; + user_name?: string; + updated_at?: string; } export type Components = Record React.ReactNode>; diff --git a/webapp/src/components/App/Singlestudy/Commands/Edition/DraggableCommands/CommandListItem/CommandDetails.tsx b/webapp/src/components/App/Singlestudy/Commands/Edition/DraggableCommands/CommandListItem/CommandDetails.tsx new file mode 100644 index 0000000000..b7a184be3b --- /dev/null +++ b/webapp/src/components/App/Singlestudy/Commands/Edition/DraggableCommands/CommandListItem/CommandDetails.tsx @@ -0,0 +1,83 @@ +/** + * Copyright (c) 2024, RTE (https://www.rte-france.com) + * + * See AUTHORS.txt + * + * This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. + * + * SPDX-License-Identifier: MPL-2.0 + * + * This file is part of the Antares project. + */ + +import { Fragment } from "react"; +import { Box, Typography, Divider, Tooltip } from "@mui/material"; +import { CommandItem } from "../../commandTypes"; +import { PersonOutlineOutlined, UpdateOutlined } from "@mui/icons-material"; +import { format, formatDistanceToNow, parseISO } from "date-fns"; +import { enUS, fr } from "date-fns/locale"; +import { useTranslation } from "react-i18next"; +import { getCurrentLanguage } from "@/utils/i18nUtils"; + +interface Props { + item: CommandItem; +} + +const formatDate = (dateStr: string) => { + const date = parseISO(dateStr); + return format(date, "dd/MM/yyyy HH:mm"); +}; + +const formatDateWithLocale = (dateStr: string) => { + const date = parseISO(dateStr); + const lang = getCurrentLanguage(); + const locale = lang.startsWith("fr") ? fr : enUS; + + return formatDistanceToNow(date, { + addSuffix: true, + locale, + }); +}; + +function CommandDetails({ item }: Props) { + const [t] = useTranslation(); + const details = [ + { + icon: , + text: item.user || t("global.unknown"), + }, + { + icon: , + text: item.updatedAt ? formatDate(item.updatedAt) : t("global.unknown"), + tooltip: item.updatedAt + ? formatDateWithLocale(item.updatedAt) + : t("global.unknown"), + }, + ]; + + return ( + + {details.map((detail, index) => ( + + {index > 0 && ( + + )} + + {detail.icon} + {detail.tooltip ? ( + + {detail.text} + + ) : ( + {detail.text} + )} + + + ))} + + ); +} + +export default CommandDetails; diff --git a/webapp/src/components/App/Singlestudy/Commands/Edition/DraggableCommands/CommandListItem/index.tsx b/webapp/src/components/App/Singlestudy/Commands/Edition/DraggableCommands/CommandListItem/index.tsx index c53d7b7ef1..c8b3bf92d9 100644 --- a/webapp/src/components/App/Singlestudy/Commands/Edition/DraggableCommands/CommandListItem/index.tsx +++ b/webapp/src/components/App/Singlestudy/Commands/Edition/DraggableCommands/CommandListItem/index.tsx @@ -43,6 +43,7 @@ import { StyledDeleteIcon, } from "./style"; import CommandMatrixViewer from "./CommandMatrixViewer"; +import CommandDetails from "./CommandDetails"; export const Item = styled(Box)(({ theme }) => ({ boxSizing: "border-box", @@ -51,9 +52,6 @@ export const Item = styled(Box)(({ theme }) => ({ justifyContent: "space-between", alignItems: "flex-start", width: "100%", - height: "auto", - userSelect: "none", - maxWidth: "800px", })); interface StyleType { @@ -189,9 +187,8 @@ function CommandListItem({ onClick={() => onExpanded(index, !(expandedIndex === index))} > - - {item.action} - + {item.action} + diff --git a/webapp/src/components/App/Singlestudy/Commands/Edition/DraggableCommands/CommandListItem/style.ts b/webapp/src/components/App/Singlestudy/Commands/Edition/DraggableCommands/CommandListItem/style.ts index e0d056e66c..ea27e92815 100644 --- a/webapp/src/components/App/Singlestudy/Commands/Edition/DraggableCommands/CommandListItem/style.ts +++ b/webapp/src/components/App/Singlestudy/Commands/Edition/DraggableCommands/CommandListItem/style.ts @@ -22,6 +22,8 @@ export const ItemContainer = styled(Box, { display: "flex", justifyContent: "center", zIndex: onTopVisible ? 10000 : 9999, + width: "100%", + boxSizing: "border-box", })); export const DraggableAccorderon = styled(Accordion, { @@ -30,6 +32,9 @@ export const DraggableAccorderon = styled(Accordion, { flex: 1, boxSizing: "border-box", backgroundColor: PAPER_BACKGROUND_NO_TRANSPARENCY, + maxWidth: "800px", + width: "100%", + margin: "0 auto", ...(isDragging ? { borderColor: theme.palette.secondary.main, @@ -43,9 +48,9 @@ export const DraggableAccorderon = styled(Accordion, { export const StyledDeleteIcon = styled(DeleteIcon)(({ theme }) => ({ flex: "0 0 24px", color: theme.palette.error.light, - marginLeft: theme.spacing(1), - marginRight: theme.spacing(1), + margin: theme.spacing(0, 2), cursor: "pointer", + alignSelf: "center", "&:hover": { color: theme.palette.error.main, }, diff --git a/webapp/src/components/App/Singlestudy/Commands/Edition/DraggableCommands/CommandListView.tsx b/webapp/src/components/App/Singlestudy/Commands/Edition/DraggableCommands/CommandListView.tsx index 5ba09ec873..37dc79fb06 100644 --- a/webapp/src/components/App/Singlestudy/Commands/Edition/DraggableCommands/CommandListView.tsx +++ b/webapp/src/components/App/Singlestudy/Commands/Edition/DraggableCommands/CommandListView.tsx @@ -129,9 +129,9 @@ function CommandListView({ > {(provided) => ( {Row} diff --git a/webapp/src/components/App/Singlestudy/Commands/Edition/commandTypes.ts b/webapp/src/components/App/Singlestudy/Commands/Edition/commandTypes.ts index 76d63180d0..e43f205696 100644 --- a/webapp/src/components/App/Singlestudy/Commands/Edition/commandTypes.ts +++ b/webapp/src/components/App/Singlestudy/Commands/Edition/commandTypes.ts @@ -14,12 +14,32 @@ import { CommandResultDTO } from "../../../../../common/types"; +interface AntaresConfig { + version: string; + caption: string; + created: number; + lastsave: number; + author: string; +} + +interface CommandArgsData { + antares: AntaresConfig; +} + +export interface CommandArgsDTO { + data: CommandArgsData; + target: string; +} + export interface CommandItem { id?: string; action: string; updated: boolean; - args: object; + args: CommandArgsDTO | object; results?: CommandResultDTO; + version?: number; + user?: string; + updatedAt?: string; } export interface JsonCommandItem { diff --git a/webapp/src/components/App/Singlestudy/Commands/Edition/index.tsx b/webapp/src/components/App/Singlestudy/Commands/Edition/index.tsx index e8cafa7d4e..2ef264dc63 100644 --- a/webapp/src/components/App/Singlestudy/Commands/Edition/index.tsx +++ b/webapp/src/components/App/Singlestudy/Commands/Edition/index.tsx @@ -23,7 +23,7 @@ import BoltIcon from "@mui/icons-material/Bolt"; import debug from "debug"; import { AxiosError } from "axios"; import HelpIcon from "@mui/icons-material/Help"; -import { Box, Button, Tooltip, Typography } from "@mui/material"; +import { Box, Button, Skeleton, Tooltip, Typography } from "@mui/material"; import { useMountedState } from "react-use"; import { CommandItem, JsonCommandItem } from "./commandTypes"; import CommandListView from "./DraggableCommands/CommandListView"; @@ -50,7 +50,6 @@ import { CommandResultDTO } from "../../../../../common/types"; import CommandImportButton from "./DraggableCommands/CommandImportButton"; import { getTask } from "../../../../../services/api/tasks"; import { Body, EditHeader, Header, headerIconStyle, Root } from "./style"; -import SimpleLoader from "../../../../common/loaders/SimpleLoader"; import useEnqueueErrorSnackbar from "../../../../../hooks/useEnqueueErrorSnackbar"; import { addWsEventListener, @@ -500,7 +499,7 @@ function EditionView(props: Props) { )} - {loaded && commands.length > 0 ? ( + {commands.length > 0 ? ( - ) : ( - loaded && ( - - - - - - ) - )} - {!loaded && ( + ) : !loaded ? ( - + + + ) : ( + + + + )} {openClearCommandsDialog && ( diff --git a/webapp/src/components/App/Singlestudy/Commands/Edition/style.ts b/webapp/src/components/App/Singlestudy/Commands/Edition/style.ts index 50163125c0..0702c1cb23 100644 --- a/webapp/src/components/App/Singlestudy/Commands/Edition/style.ts +++ b/webapp/src/components/App/Singlestudy/Commands/Edition/style.ts @@ -14,18 +14,18 @@ import { Box, styled } from "@mui/material"; -export const Root = styled(Box)(({ theme }) => ({ - flex: 1, +export const Root = styled(Box)(() => ({ + width: "100%", height: "98%", display: "flex", flexFlow: "column nowrap", justifyContent: "flex-start", alignItems: "center", - overflowY: "hidden", + overflowY: "auto", })); -export const Header = styled(Box)(({ theme }) => ({ - width: "90%", +export const Header = styled(Box)(() => ({ + width: "95%", height: "80px", display: "flex", flexFlow: "row nowrap", @@ -33,7 +33,7 @@ export const Header = styled(Box)(({ theme }) => ({ alignItems: "center", })); -export const EditHeader = styled(Box)(({ theme }) => ({ +export const EditHeader = styled(Box)(() => ({ flex: 1, display: "flex", flexFlow: "row nowrap", @@ -43,10 +43,8 @@ export const EditHeader = styled(Box)(({ theme }) => ({ export const Body = styled(Box)(({ theme }) => ({ width: "100%", - maxHeight: "90%", - minHeight: "90%", + height: "100%", display: "flex", - flexFlow: "column nowrap", justifyContent: "flex-start", alignItems: "center", overflow: "auto", diff --git a/webapp/src/components/App/Singlestudy/Commands/Edition/utils.ts b/webapp/src/components/App/Singlestudy/Commands/Edition/utils.ts index e86abf59c0..bcb4a3ed47 100644 --- a/webapp/src/components/App/Singlestudy/Commands/Edition/utils.ts +++ b/webapp/src/components/App/Singlestudy/Commands/Edition/utils.ts @@ -49,13 +49,15 @@ export const reorder = ( export const fromCommandDTOToCommandItem = ( commands: CommandDTO[], ): CommandItem[] => { - const dtoItems: CommandItem[] = commands.map((elm) => ({ + return commands.map((elm) => ({ id: elm?.id, action: elm.action, args: elm.args, updated: false, + version: elm.version, + user: elm.user_name, + updatedAt: elm.updated_at, })); - return dtoItems; }; export const fromCommandDTOToJsonCommand = (