feat: maquette => edition guichet (description et zoom) #324 #327

assets/@types/app_espaceco.ts

@@ -40,3 +40,9 @@ export type SearchResult = {
     status: string;
     results: (Address | Poi)[];
 };
+
+export type SearchGridFilters = {
+    searchBy?: ("name" | "title")[];
+    fields?: ("name" | "title" | "type" | "extent" | "deleted")[];
+    adm?: boolean;
+};

assets/@types/espaceco.ts

@@ -10,6 +10,9 @@ export interface CommunityResponseDTO {
     default_comment: string | null;
     position: string | null;
     zoom: number;
+    zoom_min: number | null;
+    zoom_max: number | null;
+    extent: number[] | null;
     all_members_can_valid: boolean;
     open_without_affiliation: boolean;
     open_with_email?: string[];
@@ -27,6 +30,7 @@ export interface Grids {
     title: string;
     type: string;
     deleted: boolean;
+    extent: number[];
 }
 
 export interface CommunityPatchDTO extends Partial<Omit<CommunityResponseDTO, "logo_url">> {

assets/components/Input/AutocompleteSelect.tsx

@@ -76,7 +76,6 @@ const AutocompleteSelect = <T,>(props: AutocompleteSelectProps<T>) => {
                     {label}
                     {hintText && <span className="fr-hint-text">{hintText}</span>}
                 </label>
-
                 <Autocomplete
                     {...controllerField}
                     id={inputId}

assets/components/Utils/ZoomRange.tsx

@@ -1,4 +1,5 @@
 import { fr } from "@codegouvfr/react-dsfr";
+import { Range } from "@codegouvfr/react-dsfr/Range";
 import Map from "ol/Map";
 import { MapOptions } from "ol/PluggableMap";
 import View, { ViewOptions } from "ol/View";
@@ -7,19 +8,22 @@ import BaseLayer from "ol/layer/Base";
 import TileLayer from "ol/layer/Tile";
 import { fromLonLat } from "ol/proj";
 import WMTS, { optionsFromCapabilities } from "ol/source/WMTS";
-import { FC, memo, useCallback, useEffect, useRef } from "react";
+import { FC, memo, ReactNode, useCallback, useEffect, useRef } from "react";
 
 import olDefaults from "../../data/ol-defaults.json";
 import useCapabilities from "../../hooks/useCapabilities";
-import RangeSlider from "./RangeSlider";
 
+import { cx } from "@codegouvfr/react-dsfr/tools/cx";
 import "ol/ol.css";
-
 import "../../sass/components/zoom-range.scss";
 
 type ZoomRangeProps = {
+    label?: ReactNode;
+    hintText?: ReactNode;
     min: number;
     max: number;
+    small?: boolean;
+    disableSlider?: true;
     values: number[];
     onChange: (values: number[]) => void;
     center?: number[];
@@ -28,7 +32,7 @@ type ZoomRangeProps = {
 const ZoomRange: FC<ZoomRangeProps> = (props) => {
     const { data: capabilities } = useCapabilities();
 
-    const { min, max, values, center = olDefaults.center, onChange } = props;
+    const { label, hintText, min, max, disableSlider, values, onChange, small = false, center = olDefaults.center } = props;
 
     // References sur les deux cartes
     const leftMapRef = useRef<Map>();
@@ -91,18 +95,20 @@ const ZoomRange: FC<ZoomRangeProps> = (props) => {
 
     useEffect(() => {
         if (leftMapTargetRef.current) {
-            leftMapRef.current = createMap(leftMapTargetRef.current, olDefaults.zoom_levels.TOP);
+            const minValue = olDefaults.zoom_levels.TOP < min ? min : olDefaults.zoom_levels.TOP;
+            leftMapRef.current = createMap(leftMapTargetRef.current, minValue);
         }
 
         if (rightMapTargetRef.current) {
-            rightMapRef.current = createMap(rightMapTargetRef.current, olDefaults.zoom_levels.BOTTOM);
+            const maxValue = olDefaults.zoom_levels.BOTTOM > max ? max : olDefaults.zoom_levels.BOTTOM;
+            rightMapRef.current = createMap(rightMapTargetRef.current, maxValue);
         }
 
         return () => {
             leftMapRef.current?.setTarget(undefined);
             rightMapRef.current?.setTarget(undefined);
         };
-    }, [createMap]);
+    }, [min, max, createMap]);
 
     useEffect(() => {
         leftMapRef.current?.getView().setZoom(values[0]);
@@ -114,11 +120,43 @@ const ZoomRange: FC<ZoomRangeProps> = (props) => {
 
     return (
         <div className={fr.cx("fr-my-2v")}>
-            <div className="ui-map-zoom-levels">
-                <div ref={leftMapTargetRef} className="ui-top-zoom-level" />
-                <div ref={rightMapTargetRef} className="ui-bottom-zoom-level" />
+            {label && (
+                <label className={fr.cx("fr-label")}>
+                    {label}
+                    {hintText && <span className={"fr-hint-text"}>{hintText}</span>}
+                </label>
+            )}
+            <div className="frx-zoom-range">
+                <div ref={leftMapTargetRef} className={cx("frx-top-zoom", small && "frx-zoom-range-sm")} />
+                <div ref={rightMapTargetRef} className={cx("frx-bottom-zoom", small && "frx-zoom-range-sm")} />
             </div>
-            <RangeSlider min={min} max={max} values={values} onChange={(newValues) => onChange(newValues)} />
+            <Range
+                label={null}
+                min={min}
+                max={max}
+                disabled={disableSlider}
+                double
+                small
+                step={1}
+                nativeInputProps={[
+                    {
+                        value: values[0],
+                        onChange: (e) => {
+                            const v = values;
+                            v[0] = Number(e.currentTarget.value);
+                            onChange(v);
+                        },
+                    },
+                    {
+                        value: values[1],
+                        onChange: (e) => {
+                            const v = values;
+                            v[1] = Number(e.currentTarget.value);
+                            onChange(v);
+                        },
+                    },
+                ]}
+            />
         </div>
     );
 };

assets/espaceco/api/grid.ts

@@ -0,0 +1,25 @@
+import { GetResponse, SearchGridFilters } from "../../@types/app_espaceco";
+import { Grids } from "../../@types/espaceco";
+import { jsonFetch } from "../../modules/jsonFetch";
+import SymfonyRouting from "../../modules/Routing";
+
+const search = (text: string, filters: SearchGridFilters, otherOptions: RequestInit = {}) => {
+    const queryParams = { text: `${text}%` };
+    ["searchBy", "fields"].forEach((p) => {
+        if (filters[p] !== undefined) {
+            queryParams[p] = filters[p].join(",");
+        }
+    });
+    if (filters.adm !== undefined) {
+        queryParams["adm"] = new Boolean(filters.adm).toString();
+    }
+
+    const url = SymfonyRouting.generate("cartesgouvfr_api_espaceco_grid_search", queryParams);
+    return jsonFetch<GetResponse<Grids>>(url, {
+        ...otherOptions,
+    });
+};
+
+const grid = { search };
+
+export default grid;

assets/espaceco/api/index.ts

@@ -1,7 +1,9 @@
 import community from "./community";
+import grid from "./grid";
 
 const api = {
     community,
+    grid,
 };
 
 export default api;

assets/espaceco/pages/communities/ManageCommunityTr.ts

@@ -26,6 +26,21 @@ export const { i18n } = declareComponentKeys<
     | "modal.logo.title"
     | "modal.logo.file_hint"
     | "desc.keywords"
+    | "zoom.consistant_error"
+    | "zoom.position"
+    | "zoom.position_hint"
+    | "zoom.zoom_range"
+    | "zoom.zoom_range_hint"
+    | "zoom.manage_extent"
+    | "zoom.extent"
+    | "zoom.extent_hint"
+    | "zoom.choice.autocomplete"
+    | "zoom.choice.manual"
+    | "zoom.extent_enter_manually"
+    | "zoom.xmin"
+    | "zoom.xmax"
+    | "zoom.ymin"
+    | "zoom.ymax"
 >()("ManageCommunity");
 
 export const ManageCommunityFrTranslations: Translations<"fr">["ManageCommunity"] = {
@@ -59,6 +74,23 @@ export const ManageCommunityFrTranslations: Translations<"fr">["ManageCommunity"
     "modal.logo.title": "Logo du guichet",
     "modal.logo.file_hint": "Taille maximale : 5 Mo. Formats acceptés : jpg, png",
     "desc.keywords": "Mots-clés (optionnel)",
+    "zoom.consistant_error": "Emprise et position ne sont pas cohérents",
+    "zoom.position": "Position",
+    "zoom.position_hint": "Fixer la position et définissez le niveau de zoom (utilisez votre souris ou la barre de recherche ci-dessous",
+    "zoom.zoom_range": "Gérer les niveaux de zoom minimum et maximum permis (optionnel)",
+    "zoom.zoom_range_hint":
+        "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Libero quisquam hic veritatis, ex ipsum illo labore sint perspiciatis quidem architecto!",
+    "zoom.manage_extent": "Gérer les bornes de navigation (optionnel)",
+    "zoom.extent": "Bornes de navigation",
+    "zoom.extent_hint":
+        "Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime vitae maiores suscipit tempore sequi reiciendis nulla optio doloremque! Unde, illo nemo ab accusantium fugiat minus? Natus inventore dolore velit, nostrum dolores molestiae sint laborum, obcaecati, ullam provident repellat consectetur accusamus sunt rerum nobis sequi? Sed maxime fugit dolore! Ipsam, veritatis.",
+    "zoom.choice.autocomplete": "Recherche d'une emprise administrative",
+    "zoom.choice.manual": "Saisie manuelle",
+    "zoom.extent_enter_manually": "Entrer les coordonnées (lon,lat)",
+    "zoom.xmin": "X min",
+    "zoom.xmax": "X max",
+    "zoom.ymin": "Y min",
+    "zoom.ymax": "Y max",
 };
 
 export const ManageCommunityEnTranslations: Translations<"en">["ManageCommunity"] = {
@@ -92,4 +124,19 @@ export const ManageCommunityEnTranslations: Translations<"en">["ManageCommunity"
     "modal.logo.title": undefined,
     "modal.logo.file_hint": undefined,
     "desc.keywords": undefined,
+    "zoom.consistant_error": undefined,
+    "zoom.position": "Position",
+    "zoom.position_hint": undefined,
+    "zoom.zoom_range": undefined,
+    "zoom.zoom_range_hint": undefined,
+    "zoom.manage_extent": undefined,
+    "zoom.extent": undefined,
+    "zoom.extent_hint": undefined,
+    "zoom.choice.autocomplete": undefined,
+    "zoom.choice.manual": undefined,
+    "zoom.extent_enter_manually": undefined,
+    "zoom.xmin": "X min",
+    "zoom.xmax": "X max",
+    "zoom.ymin": "Y min",
+    "zoom.ymax": "Y max",
 };

assets/espaceco/pages/communities/SearchCommunity.tsx

@@ -39,6 +39,7 @@ const SearchCommunity: FC<SearchCommunityProps> = ({ filter, onChange }) => {
                     noOptionsText={t("no_options")}
                     getOptionLabel={(option) => option.name}
                     options={searchQuery.data || []}
+                    filterOptions={(x) => x}
                     renderInput={(params) => (
                         <TextField
                             {...params}

assets/espaceco/pages/communities/management/CommunityLogo.tsx

@@ -200,7 +200,7 @@ const CommunityLogo: FC<CommunityLogoProps> = ({ communityId, logoUrl }) => {
                             priority="tertiary no outline"
                             onClick={AddLogoModal.open}
                         />
-                        {logoUrl !== null && (
+                        {isValid && (
                             <Button
                                 title={t("logo_action", { action: "delete" })}
                                 iconId="fr-icon-delete-line"

assets/espaceco/pages/communities/management/SearchTr.tsx

@@ -0,0 +1,15 @@
+import { declareComponentKeys } from "i18nifty";
+import { Translations } from "../../../../i18n/i18n";
+
+// traductions
+export const { i18n } = declareComponentKeys<"no_results" | "loading">()("Search");
+
+export const SearchFrTranslations: Translations<"fr">["Search"] = {
+    no_results: "Aucun résultat",
+    loading: "Recherche en cours ...",
+};
+
+export const SearchEnTranslations: Translations<"en">["Search"] = {
+    no_results: "No results",
+    loading: "Searching ...",
+};