Remove layers from legend

Vizzuality · Nov 28, 2023 · d381afe · d381afe
1 parent e849400
commit d381afe
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 3 deletions.
diff --git a/client/src/components/map/legend/item/index.tsx b/client/src/components/map/legend/item/index.tsx
@@ -28,6 +28,7 @@ export const LegendItem: React.FC<PropsWithChildren & LegendItemProps> = ({
   // events
   onChangeOpacity,
   onChangeVisibility,
+  onRemove,
 }) => {
   const validChildren = useMemo(() => {
     const chldn = Children.map(children, (Child) => {
@@ -78,6 +79,7 @@ export const LegendItem: React.FC<PropsWithChildren & LegendItemProps> = ({
               settingsManager={settingsManager}
               onChangeOpacity={onChangeOpacity}
               onChangeVisibility={onChangeVisibility}
+              onRemove={onRemove}
               InfoContent={InfoContent}
             />
           </header>

diff --git a/client/src/components/map/legend/item/toolbar/index.tsx b/client/src/components/map/legend/item/toolbar/index.tsx
@@ -1,7 +1,7 @@
 import { useState } from "react";
 
 import { PopoverArrow } from "@radix-ui/react-popover";
-import { LuEye, LuEyeOff, LuDroplet, LuInfo } from "react-icons/lu";
+import { LuEye, LuEyeOff, LuDroplet, LuInfo, LuX } from "react-icons/lu";
 
 import { cn } from "@/lib/classnames";
 
@@ -17,6 +17,7 @@ export const LegendItemToolbar: React.FC<LegendItemToolbarProps> = ({
   InfoContent,
   settings,
   settingsManager,
+  onRemove,
   onChangeOpacity,
   onChangeVisibility,
 }: LegendItemToolbarProps) => {
@@ -134,6 +135,31 @@ export const LegendItemToolbar: React.FC<LegendItemToolbarProps> = ({
             </Dialog>
           </div>
         )}
+
+        {onRemove && (
+          <div className="flex items-start">
+            <Tooltip delayDuration={500}>
+              <TooltipTrigger
+                type="button"
+                aria-label="Show info"
+                className={cn({
+                  "pointer-events-none": popoverOpen,
+                })}
+                onClick={() => {
+                  if (onRemove) onRemove();
+                }}
+              >
+                <LegendItemButton Icon={LuX} />
+              </TooltipTrigger>
+
+              <TooltipContent side="top" align="end" alignOffset={-10}>
+                <div className="text-xxs">Remove layer</div>
+
+                <TooltipArrow className="fill-white" width={10} height={5} />
+              </TooltipContent>
+            </Tooltip>
+          </div>
+        )}
       </div>
     </div>
   );

diff --git a/client/src/components/map/legend/types.ts b/client/src/components/map/legend/types.ts
@@ -15,6 +15,7 @@ type OnChangeOrder = (id: string[]) => void;
 type OnChangeOpacity = (opacity: number) => void;
 type OnChangeVisibility = (visibility: boolean) => void;
 type OnChangeColumn = (column: string) => void;
+type OnRemove = () => void;
 
 export type Settings = Record<string, unknown> & {
   opacity?: number;
@@ -31,6 +32,7 @@ export type LegendItemEvents = {
   onChangeOpacity?: OnChangeOpacity;
   onChangeVisibility?: OnChangeVisibility;
   onChangeColumn?: OnChangeColumn;
+  onRemove?: OnRemove;
 };
 /*
  * Legend

diff --git a/client/src/containers/map/legend/item.tsx b/client/src/containers/map/legend/item.tsx
@@ -7,7 +7,7 @@ import { useGetLayersId } from "@/types/generated/layer";
 import { LayerTyped, LegendConfig } from "@/types/layers";
 import { LegendType } from "@/types/legend";
 
-import { useSyncLayersSettings } from "@/app/store";
+import { useSyncDatasets, useSyncLayers, useSyncLayersSettings } from "@/app/store";
 
 import LegendItem from "@/components/map/legend/item";
 import {
@@ -45,10 +45,12 @@ const getSettingsManager = (data: LayerTyped = {} as LayerTyped): SettingsManage
 };
 
 const MapLegendItem = ({ id, ...props }: MapLegendItemProps) => {
+  const [, setLayers] = useSyncLayers();
+  const [, setDatasets] = useSyncDatasets();
   const [layersSettings] = useSyncLayersSettings();
 
   const { data, isError, isFetched, isFetching, isPlaceholderData } = useGetLayersId(id, {
-    populate: "metadata",
+    populate: "metadata,dataset",
   });
 
   const attributes = data?.data?.attributes as LayerTyped;
@@ -92,6 +94,24 @@ const MapLegendItem = ({ id, ...props }: MapLegendItemProps) => {
         name={attributes?.name}
         settingsManager={settingsManager}
         {...props}
+        onRemove={() => {
+          setDatasets((prev) => {
+            const current = [...prev];
+            const index = current.indexOf(attributes?.dataset?.data?.id as number);
+            if (index > -1) {
+              current.splice(index, 1);
+            }
+            return current;
+          });
+          setLayers((prev) => {
+            const current = [...prev];
+            const index = current.indexOf(id);
+            if (index > -1) {
+              current.splice(index, 1);
+            }
+            return current;
+          });
+        }}
         // InfoContent={!!metadata && <Metadata {...attributes} />}
       >
         {LEGEND_COMPONENT}