Selection Actions

src/components/SelectionActionDetail.tsx

@@ -0,0 +1,65 @@
+import { IonBadge, IonButton, IonContent, IonIcon, IonInput, IonItem, IonLabel, IonPopover } from "@ionic/react"
+import { trashOutline, eyeOutline, chevronForward, downloadOutline, checkmark } from "ionicons/icons" 
+import { useEffect, useState } from "react"
+
+import { InventorySelection } from "../context/inventory-selection.model"
+import { useOffline } from "../context/offline"
+import { useSelection } from "../context/selection"
+
+const SelectionActionDetail: React.FC<{selection: InventorySelection}> = ({ selection }) => {
+    // context to handle the name changes
+    const [currentTitle, setCurrentTitle] = useState<string>('')
+
+    // subscribe to the current active selection
+    const { activeSelection, setActiveSelection } = useSelection()
+
+    // get some selection context functions
+    const { dropSelection, updateSelection } = useOffline()
+
+    // add a handler to change the title
+    const onUpdateTitle = () => {
+        updateSelection({...selection, title: currentTitle})
+    }
+
+    useEffect(() => {
+        if (selection.title) {
+            setCurrentTitle(selection.title)
+        }
+    }, [selection])
+
+    return (
+        <IonItem lines="none" color={activeSelection?.selection.id === selection.id ? 'primary' : 'light'}>
+            <IonLabel>{selection.title}</IonLabel>
+            <IonBadge slot="start" color={activeSelection?.selection.id === selection.id ? 'light' : 'primary'}>{selection.treeIds.length}</IonBadge>
+            { activeSelection?.selection.id === selection.id ?  (<>
+                <IonButton slot="end" fill="clear" color="light" id={`selecion-menu-${selection.id}`}>
+                    <IonIcon icon={chevronForward} slot="icon-only" />
+                </IonButton>
+                <IonPopover trigger={`selecion-menu-${selection.id}`} triggerAction="click" side="right" alignment="center" reference="trigger" animated>
+                    <IonContent>
+                        <IonItem lines="none" color="primary">
+                            <IonInput type="text" value={currentTitle} onIonChange={e => setCurrentTitle(e.target.value as string)} />
+                            <IonButton slot="end" fill="clear" color="light" disabled={currentTitle==='' || selection.title===currentTitle}>
+                                <IonIcon icon={checkmark} slot="icon-only" />
+                            </IonButton>
+                        </IonItem>
+                        <IonItem lines="none" color="primary">
+                            <IonButton slot="end" fill="clear" color="light" disabled>
+                                <IonIcon icon={downloadOutline} slot="icon-only" />
+                            </IonButton>
+                            <IonButton slot="end" fill="clear" color="danger" onClick={() => dropSelection(selection.id)}>
+                                <IonIcon icon={trashOutline} slot="icon-only" />
+                            </IonButton>                                
+                        </IonItem>
+                    </IonContent>
+                </IonPopover>
+            </>) :  (
+                <IonButton slot="end" fill="clear" onClick={() => setActiveSelection(selection.id)}>
+                    <IonIcon icon={eyeOutline} slot="icon-only" />
+                </IonButton>
+            )}
+        </IonItem>
+    )
+}
+
+export default SelectionActionDetail

src/components/SelectionList.tsx

@@ -1,35 +1,29 @@
-import { IonBadge, IonButton, IonIcon, IonItem, IonLabel, IonList } from "@ionic/react"
-import { trashOutline } from "ionicons/icons"
+import { IonBadge, IonButton, IonContent, IonIcon, IonInput, IonItem, IonLabel, IonList, IonPopover } from "@ionic/react"
+import { trashOutline, eyeOutline, chevronForward, downloadOutline, addCircleOutline, checkmark } from "ionicons/icons"
 import { useOffline } from "../context/offline"
 import { useSelection } from "../context/selection"
+import SelectionActionDetail from "./SelectionActionDetail"
 
 const SelectionList: React.FC = () => {
     // load the selection-related functions from the offline context
-    // TODO: replace with data context, once implemented
-    const { createSelection, dropSelection } = useOffline()
-    const { selections } = useSelection()
+    const { createSelection } = useOffline()
+    const { selections, setActiveSelection } = useSelection()
 
-    // create random selection - DEBUG ONLY
-    const onCreateNewSelection = () => {
-        createSelection(
-            [42, 43, 44],
-            'Deleopment Selection',
-        )
+    // controller for adding new selections
+    const onNewSelection = () => {
+        createSelection([]).then(newSelection => {
+            setActiveSelection(newSelection.id)
+        })
     }
 
     return (
         <IonList>
             {selections?.map((s) => (
-                <IonItem key={s.id} lines="none">
-                    <IonLabel>{s.title}</IonLabel>
-                    <IonBadge slot="start">{s.treeIds.length}</IonBadge>
-                    <IonButton slot="end" fill="clear" onClick={() => dropSelection(s.id)}>
-                        <IonIcon icon={trashOutline} slot="icon-only" />
-                    </IonButton>
-                </IonItem>
+                <SelectionActionDetail selection={s} key={s.id} />
             ))}
-            {/* <IonButton fill="solid" expand="block" color="success" onClick={onCreateNewSelection}>NEW SELECTION</IonButton> */}
-            <IonButton fill="clear" expand="block" color="danger" disabled>DELETE ALl</IonButton>
+            <IonButton fill="clear" expand="full" onClick={onNewSelection}>
+                <IonIcon icon={addCircleOutline} slot="icon-only" />
+            </IonButton>
         </IonList>
     )
 }

src/pages/DesktopPage.tsx

@@ -13,6 +13,8 @@ import {
   IonLabel,
   IonPage,
   IonRow,
+  IonSegment,
+  IonSegmentButton,
   IonTitle,
   IonToolbar,
 } from "@ionic/react";
@@ -21,7 +23,7 @@ import {
   closeCircleOutline,
   settingsOutline,
 } from "ionicons/icons";
-import React from "react";
+import React, { useState } from "react";
 import InventoryList from "../components/InventoryList";
 import MainMap from "../components/map-components/MainMapMaplibre";
 import BaseLayerPopover from "../components/popover/BaseLayerPopover";
@@ -32,8 +34,12 @@ import FilterBarPopover from "../components/popover/RangeFilterPopover";
 import MapButtonGroup from "../components/MapButtonGroup";
 import ActiveMapSelectionButton from "../components/ActiveMapSelectionButton";
 import VariableSelectionPopover from "../components/popover/VariableSelectionPopover";
+import SelectionList from "../components/SelectionList";
 
 const DesktopPage: React.FC = () => {
+  // component state for rendering the correct sidebar
+  const [sidebarContent, setSidebarContent] = useState<'inventory' | 'selection'>('inventory')
+
   return (
     <IonPage>
       <IonHeader>
@@ -51,7 +57,15 @@ const DesktopPage: React.FC = () => {
           <IonRow>
             <IonCol sizeMd="5" sizeLg="3.3" sizeXl="2.6">
               <div style={{ height: "95vh", overflowY: "auto" }}>
-                <InventoryList />
+                <IonSegment value={sidebarContent} onIonChange={e => setSidebarContent(e.target.value as 'inventory' | 'selection')}>
+                  <IonSegmentButton value="inventory">
+                    <IonLabel>Inventory</IonLabel>
+                  </IonSegmentButton>
+                  <IonSegmentButton value="selection">
+                    <IonLabel>Selections</IonLabel>
+                  </IonSegmentButton>
+                </IonSegment>
+                { sidebarContent === 'inventory' ? <InventoryList /> : <SelectionList />}
               </div>
             </IonCol>
             <IonCol>