Skip to content

Commit

Permalink
fix: améliore l'affichage responsive (refs #591)
Browse files Browse the repository at this point in the history
  • Loading branch information
@tonai
tonai committed Jan 10, 2025
1 parent 59b6c3d commit d354079
Show file tree
Hide file tree
Showing 11 changed files with 555 additions and 524 deletions.
2 changes: 1 addition & 1 deletion assets/components/Utils/MenuList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ type MenuListItemWithLinkProps = {
linkProps: RegisteredLinkProps;
};

type MenuListItem = MenuListItemCommon &
export type MenuListItem = MenuListItemCommon &
// onClick et linkProps sont mutuellement exclusifs
(MenuListItemWithOnClick | MenuListItemWithLinkProps);

Expand Down
169 changes: 74 additions & 95 deletions .../pages/datasheet/DatasheetView/DatasetListTab/PyramidRasterList/PyramidRasterListItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,16 +11,16 @@ import { DatastoreEndpoint, EndpointTypeEnum, OfferingTypeEnum, PyramidRaster, S
import StoredDataStatusBadge from "../../../../../../components/Utils/Badges/StoredDataStatusBadge";
import LoadingIcon from "../../../../../../components/Utils/LoadingIcon";
import LoadingText from "../../../../../../components/Utils/LoadingText";
import MenuList from "../../../../../../components/Utils/MenuList";
import Wait from "../../../../../../components/Utils/Wait";
import useToggle from "../../../../../../hooks/useToggle";
import { useTranslation } from "../../../../../../i18n/i18n";
import RQKeys from "../../../../../../modules/entrepot/RQKeys";
import { routes } from "../../../../../../router/router";
import { formatDateFromISO, offeringTypeDisplayName } from "../../../../../../utils";
import { offeringTypeDisplayName } from "../../../../../../utils";
import api from "../../../../../api";
import PyramidStoredDataDesc from "../PyramidStoredDataDesc";
import { PyramidRasterServiceChoiceDialog, type PyramidRasterServiceChoiceDialogProps } from "./PyramidRasterServiceChoiceDialog";
import ListItem from "../../ListItem";

const getHintText = (endpoints: DatastoreEndpoint[]): ReactNode => (
<ul className={fr.cx("fr-raw-list")}>
Expand Down Expand Up @@ -103,103 +103,82 @@ const PyramidRasterListItem: FC<PyramidRasterListItemProps> = ({ datasheetName,

return (
<>
<div className={fr.cx("fr-p-2v", "fr-mt-2v")} style={{ backgroundColor: fr.colors.decisions.background.contrast.grey.default }}>
<div className={fr.cx("fr-grid-row", "fr-grid-row--middle")}>
<div className={fr.cx("fr-col")}>
<div className={fr.cx("fr-grid-row", "fr-grid-row--middle", "fr-my-2v")}>
<Button
iconId={showDescription ? "ri-subtract-fill" : "ri-add-fill"}
size="small"
title={t("show_linked_datas")}
className={fr.cx("fr-mr-2v")}
priority="secondary"
onClick={toggleShowDescription}
/>
{pyramid.name}
</div>
</div>

<div className={fr.cx("fr-col")}>
<div className={fr.cx("fr-grid-row", "fr-grid-row--right", "fr-grid-row--middle")}>
<p className={fr.cx("fr-m-auto", "fr-mr-2v")}>{pyramid?.last_event?.date && formatDateFromISO(pyramid?.last_event?.date)}</p>
<StoredDataStatusBadge status={pyramid.status} />
<Button
onClick={async () => {
if (serviceChoiceDialogActions.current.open === undefined) return;

const { response: serviceType } = await serviceChoiceDialogActions.current.open({
title: t("choose_service_type"),
options: [
{
id: OfferingTypeEnum.WMSRASTER,
text: t("wms_raster_label"),
hintText: (
<>
{t("wms_raster_hint_text")}
{getHintText(wmsRasterEndpoints)}
</>
),
disabled: wmsRasterEndpoints.length === 0 || !isAvailable(wmsRasterEndpoints),
},
{
id: OfferingTypeEnum.WMTSTMS,
text: t("wmts_label"),
hintText: (
<>
{t("wmts_hint_text")}
{getHintText(wmtsEndpoints)}
</>
),
disabled: wmtsEndpoints.length === 0 || !isAvailable(wmtsEndpoints),
},
],
});

if (serviceType === undefined) return;

switch (serviceType) {
case OfferingTypeEnum.WMSRASTER:
routes
.datastore_pyramid_raster_wms_raster_service_new({ datastoreId, pyramidId: pyramid._id, datasheetName })
.push();
break;
case OfferingTypeEnum.WMTSTMS:
routes.datastore_pyramid_raster_wmts_service_new({ datastoreId, pyramidId: pyramid._id, datasheetName }).push();
break;
default:
throw new Error(`Publication ${serviceType} n'est pas encore implémentée`);
}
}}
className={fr.cx("fr-mr-2v")}
priority="secondary"
disabled={pyramid.status !== StoredDataStatusEnum.GENERATED}
>
{t("publish_pyramid_raster")}
</Button>
<MenuList
menuOpenButtonProps={{
iconId: "fr-icon-menu-2-fill",
title: t("other_actions"),
priority: "secondary",
}}
items={[
<ListItem
actionButton={
<Button
onClick={async () => {
if (serviceChoiceDialogActions.current.open === undefined) return;

const { response: serviceType } = await serviceChoiceDialogActions.current.open({
title: t("choose_service_type"),
options: [
{
text: t("show_details"),
iconId: "fr-icon-file-text-fill",
linkProps: routes.datastore_stored_data_details({ datastoreId, storedDataId: pyramid._id }).link,
id: OfferingTypeEnum.WMSRASTER,
text: t("wms_raster_label"),
hintText: (
<>
{t("wms_raster_hint_text")}
{getHintText(wmsRasterEndpoints)}
</>
),
disabled: wmsRasterEndpoints.length === 0 || !isAvailable(wmsRasterEndpoints),
},
{
text: tCommon("delete"),
iconId: "fr-icon-delete-line",
onClick: () => confirmRemovePyramidModal.open(),
id: OfferingTypeEnum.WMTSTMS,
text: t("wmts_label"),
hintText: (
<>
{t("wmts_hint_text")}
{getHintText(wmtsEndpoints)}
</>
),
disabled: wmtsEndpoints.length === 0 || !isAvailable(wmtsEndpoints),
},
]}
/>
</div>
</div>
</div>
{showDescription && <PyramidStoredDataDesc datastoreId={datastoreId} pyramid={pyramid} dataUsesQuery={dataUsesQuery} />}
</div>
],
});

if (serviceType === undefined) return;

switch (serviceType) {
case OfferingTypeEnum.WMSRASTER:
routes.datastore_pyramid_raster_wms_raster_service_new({ datastoreId, pyramidId: pyramid._id, datasheetName }).push();
break;
case OfferingTypeEnum.WMTSTMS:
routes.datastore_pyramid_raster_wmts_service_new({ datastoreId, pyramidId: pyramid._id, datasheetName }).push();
break;
default:
throw new Error(`Publication ${serviceType} n'est pas encore implémentée`);
}
}}
className={fr.cx("fr-mr-2v")}
priority="secondary"
disabled={pyramid.status !== StoredDataStatusEnum.GENERATED}
>
{t("publish_pyramid_raster")}
</Button>
}
badge={<StoredDataStatusBadge status={pyramid.status} />}
buttonTitle={t("show_linked_datas")}
date={pyramid?.last_event?.date}
menuListItems={[
{
text: t("show_details"),
iconId: "fr-icon-file-text-fill",
linkProps: routes.datastore_stored_data_details({ datastoreId, storedDataId: pyramid._id }).link,
},
{
text: tCommon("delete"),
iconId: "fr-icon-delete-line",
onClick: () => confirmRemovePyramidModal.open(),
},
]}
name={pyramid.name}
showDescription={showDescription}
toggleShowDescription={toggleShowDescription}
>
<PyramidStoredDataDesc datastoreId={datastoreId} pyramid={pyramid} dataUsesQuery={dataUsesQuery} />
</ListItem>

<PyramidRasterServiceChoiceDialog actions={serviceChoiceDialogActions.current} />
{deletePyramidMutation.error && (
<Alert
Expand Down
49 changes: 2 additions & 47 deletions assets/entrepot/pages/datasheet/DatasheetView/DatasetListTab/PyramidStoredDataDesc.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,11 @@
import { fr } from "@codegouvfr/react-dsfr";
import Badge from "@codegouvfr/react-dsfr/Badge";
import { UseQueryResult, useQuery } from "@tanstack/react-query";
import { FC, memo, useMemo } from "react";

import type { PyramidRaster, PyramidVector, VectorDb } from "../../../../../@types/app";
import type { OfferingListResponseDto, ProcessingExecutionStoredDataDto } from "../../../../../@types/entrepot";
import LoadingText from "../../../../../components/Utils/LoadingText";
import RQKeys from "../../../../../modules/entrepot/RQKeys";
import { offeringTypeDisplayName } from "../../../../../utils";
import api from "../../../../api";
import Desc from "../Desc";

type PyramidStoredDataDescProps = {
datastoreId: string;
Expand Down Expand Up @@ -37,49 +34,7 @@ const PyramidStoredDataDesc: FC<PyramidStoredDataDescProps> = ({ datastoreId, py
enabled: !!vectorDbUsedId,
});

return (
<div className={fr.cx("fr-grid-row", "fr-grid-row--middle", "fr-mt-2v", "fr-ml-10v")}>
<div className={fr.cx("fr-col")}>
{(dataUsesQuery.isFetching || vectorDbUsedQuery.isFetching) && <LoadingText as="p" withSpinnerIcon={true} />}

{vectorDbUsedQuery.data && (
<div
className={fr.cx("fr-grid-row", "fr-mt-2v", "fr-p-2v")}
style={{ backgroundColor: fr.colors.decisions.background.default.grey.default }}
>
<div className={fr.cx("fr-col", "fr-col-md-4")}>
<span className={fr.cx("fr-icon-database-fill")} /> Base de données utilisée
</div>
<div className={fr.cx("fr-col")}>
<ul className={fr.cx("fr-raw-list")}>
<li>{vectorDbUsedQuery.data.name}</li>
</ul>
</div>
</div>
)}

{dataUsesQuery.data?.offerings_list && dataUsesQuery.data?.offerings_list?.length > 0 && (
<div
className={fr.cx("fr-grid-row", "fr-mt-2v", "fr-p-2v")}
style={{ backgroundColor: fr.colors.decisions.background.default.grey.default }}
>
<div className={fr.cx("fr-col", "fr-col-md-4")}>
<span className={fr.cx("ri-image-line")} /> Services publiés ({dataUsesQuery.data?.offerings_list?.length})
</div>
<div className={fr.cx("fr-col")}>
<ul className={fr.cx("fr-raw-list")}>
{dataUsesQuery.data?.offerings_list.map((offering, i) => (
<li key={offering._id} className={fr.cx(i + 1 !== dataUsesQuery.data?.offerings_list.length && "fr-mb-2v")}>
{offering.layer_name} <Badge>{offeringTypeDisplayName(offering.type)}</Badge>
</li>
))}
</ul>
</div>
</div>
)}
</div>
</div>
);
return <Desc isFetching={dataUsesQuery.isFetching} databaseUsed={vectorDbUsedQuery.data?.name} publishedServices={dataUsesQuery.data?.offerings_list} />;
};

export default memo(PyramidStoredDataDesc);
Loading

0 comments on commit d354079

Please sign in to comment.