EditBar: WIP to be finished

src/app/_context/model-context.tsx

@@ -36,6 +36,10 @@ interface ContextProps {
   onConnectStart: (_: unknown, { nodeId }: { nodeId: unknown }) => void;
   onConnectEnd: (event: unknown) => void;
   blockId: string;
+  focus: unknown;
+  setFocus: Dispatch<SetStateAction<undefined>>;
+  updatedItem: unknown;
+  setUpdatedItem: Dispatch<SetStateAction<undefined>>;
 }
 
 let id = 0;
@@ -68,10 +72,16 @@ const ModelNodesContext = createContext<ContextProps>({
   onConnectEnd: () => null,
   onConnectStart: () => null,
   blockId: "",
+  focus: null,
+  setFocus: () => null,
+  updatedItem: null,
+  setUpdatedItem: () => null,
 });
 const ModelNodesContextProvider = ({
   children,
 }: HTMLAttributes<HTMLDivElement>) => {
+  const [focus, setFocus] = useState();
+  const [updatedItem, setUpdatedItem] = useState();
   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState([]);
   const connectingNodeId = useRef(null);
@@ -125,7 +135,6 @@ const ModelNodesContextProvider = ({
     [screenToFlowPosition],
   );
 
-
   return (
     <ModelNodesContext.Provider
       value={{
@@ -139,6 +148,10 @@ const ModelNodesContextProvider = ({
         onConnectEnd,
         onConnectStart,
         blockId: id.toString(),
+        focus,
+        setFocus,
+        updatedItem,
+        setUpdatedItem,
       }}
     >
       {children}

src/app/models/_components/dropdown-select.tsx

@@ -5,7 +5,6 @@ import {
   SelectContent,
   SelectGroup,
   SelectItem,
-  SelectLabel,
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
@@ -16,18 +15,21 @@ interface DropdownProps extends React.ComponentProps<typeof SelectTrigger> {
   placeholder: string;
   items: { value: string; label: string }[];
   onValueChange: string;
+  value: string
 }
 
 export function DropdownSelect({
   size,
   placeholder,
+  label,
   items,
   className,
   onValueChange,
+  value,
   ...props
 }: DropdownProps) {
   return (
-    <Select onValueChange={onValueChange}>
+    <Select value={value} onValueChange={onValueChange}>
       <SelectTrigger className={cn(size, className)} {...props}>
         <SelectValue placeholder={placeholder} />
       </SelectTrigger>

src/app/models/_components/droppable-list-view.tsx

@@ -33,12 +33,11 @@ interface DndListViewProps extends DragAndDropOptions {
 
 export default function DroppableListView(props: DndListViewProps) {
   const { list, blockId, ...otherProps } = props;
-  const { setNodes } = useModelNodesContext();
+  const { setNodes, setFocus, updatedItem } = useModelNodesContext();
   const [currId, setCurrId] = useState(+blockId);
 
   useEffect(() => {
     setCurrId(+blockId);
-    console.log("rendered:", +blockId);
   }, []);
 
   useEffect(() => {
@@ -48,6 +47,13 @@ export default function DroppableListView(props: DndListViewProps) {
     });
   }, [currId, list, setNodes]);
 
+  useEffect(() => {
+    if (updatedItem) {
+      list.update(updatedItem.id, updatedItem);
+    }
+  }, [updatedItem]); 
+
+
   const { dragAndDropHooks } = useDragAndDrop({
     // Only accept items with the following drag type
     acceptedDragTypes: [
@@ -57,20 +63,17 @@ export default function DroppableListView(props: DndListViewProps) {
 
     getAllowedDropOperations: () => ["move"],
 
-    getItems: (keys) => 
-        [...keys].map((key) => {
+    getItems: (keys) =>
+      [...keys].map((key) => {
         const item = list.getItem(key);
         // Setup the drag types and associated info for each dragged item.
         return {
           "custom-app-type-reorder": JSON.stringify(item),
           "text/plain": item.value,
         };
       }),
-      onInsert: async (e) => {
-      const {
-        items,
-        target
-      } = e;
+    onInsert: async (e) => {
+      const { items, target } = e;
 
       const processedItems = await Promise.all(
         items.map(async (item) => ({
@@ -91,14 +94,12 @@ export default function DroppableListView(props: DndListViewProps) {
     },
     onReorder: async (e) => {
       const { target, keys } = e;
-      console.log("reorder");
 
       if (target.dropPosition === "before") {
         list.moveBefore(target.key, [...keys]);
       } else if (target.dropPosition === "after") {
         list.moveAfter(target.key, [...keys]);
       }
-
     },
     onRootDrop: async (e) => {
       const { items } = e;
@@ -114,15 +115,13 @@ export default function DroppableListView(props: DndListViewProps) {
         })),
       );
       list.append(...processedItems);
-
     },
     ...otherProps,
   });
 
-  const handleDelete = (item : Param) => {
+  const handleDelete = (item: Param) => {
     list.remove(item.id);
   };
-
 
   return (
     <div className="p-4">
@@ -142,20 +141,38 @@ export default function DroppableListView(props: DndListViewProps) {
         {(item) => (
           <Item textValue={item.value}>
             <div className="mx-1 text-gray-500 hover:text-red-800">
-              <TrashIcon
-                onClick={() => handleDelete(item)}
+              <TrashIcon onClick={() => handleDelete(item)} />
+            </div>
+            <div
+              onClick={() => {
+                setFocus(item);
+              }}
+            >
+              <ParameterCell
+                id={item.id}
+                section={item.section}
+                value={item.value}
+                label={item.label}
+                format={item.format}
+                input={item.input}
+                operator={item.operator}
+                visible={item.visible}
               />
             </div>
-            <ParameterCell
-              id={item.id}
-              section={item.section}
-              value={item.value}
-              label={item.label}
-              format={item.format}
-              input={item.input}
-              operator={item.operator}
-              visible={item.visible}
-            />
+            <ActionMenu
+              onAction={(key) => {
+                key == "delete" && list.remove(item.id);
+              }}
+            >
+              <Item key="edit" textValue="Edit">
+                <Text>Edit</Text>
+                {/* <Edit /> */}
+              </Item>
+              <Item key="delete" textValue="Delete">
+                {/* <Delete /> */}
+                <Text>Delete</Text>
+              </Item>
+            </ActionMenu>
           </Item>
         )}
       </ListView>

src/app/models/_components/edit-bar-container.tsx

@@ -5,59 +5,65 @@ import { EDIT_OPTIONS, OPERATIONS } from "../_constants/constants";
 
 import { Checkbox } from "@/components/ui/checkbox";
 import { DropdownSelect } from "./dropdown-select";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Input } from "~/components/ui/input";
+import { useModelNodesContext } from "~/app/_context/model-context";
+import { createDynamicallyTrackedSearchParams } from "next/dist/client/components/search-params";
+import { get } from "node:https";
 
-interface EditBarProps {
-  blockTitle: string;
-  cellTitle: string;
-  blockAction: string;
-  setBlockAction: React.Dispatch<React.SetStateAction<string>>;
-  cellValue: string;
-  setCellValue: React.Dispatch<React.SetStateAction<string>>;
-  cellOperator: string;
-  setCellOperator: React.Dispatch<React.SetStateAction<string>>;
-  cellVisible: boolean;
-  setCellVisible: React.Dispatch<React.SetStateAction<boolean>>;
-}
+export function EditBar({}) {
+  const {focus, setFocus, setUpdatedItem} = useModelNodesContext()
+
+  const [cellValue, setCellValue] = useState("");
+  const [cellOperator, setCellOperator] = useState("");
+  const [cellVisible, setCellVisible] = useState(true);
+
+  const handleOperatorChange = (value: string) => {
+    setCellOperator(value);
+  };
+
+  const handleSetVisible = (cellVisible: boolean) => {
+    setCellVisible(cellVisible);
+  };
+
+  useEffect(() => {
+    if(focus) {
+      setCellVisible(focus.visible);
+      setCellValue(focus.input);
+      setCellOperator(focus.operator);
+    }
+
+  }, [focus])
+
+
+  useEffect(() => {
+    if (focus) {
+      const newItem = {
+        id: focus.id,
+        section: focus.section,
+        value: focus.value,
+        label: focus.label,
+        format: focus.format,
+        input:  cellValue,
+        operator: cellOperator,
+        visible: cellVisible,
+      }
+      setUpdatedItem(newItem);
+    }
+
+  }, [cellValue, cellOperator, cellVisible]);
+
+  function getLabelForValue(value : string) {
+    const operation = OPERATIONS.find(op => op.value === value);
+    return operation ? operation.label : "Operation";
+  }
 
-export function EditBar({
-  blockTitle,
-  cellTitle,
-  blockAction,
-  setBlockAction,
-  cellValue,
-  setCellValue,
-  cellOperator,
-  setCellOperator,
-  cellVisible,
-  setCellVisible,
-}: EditBarProps) {
   return (
     <>
-      <div className="width-4 grid grid-cols-10 items-center justify-center border">
-        <div className="col-span-8">
-          {/* {Block Title Here} */}
-          <span className="inline-block pl-4 align-middle font-bold">
-            {blockTitle}
-          </span>
-        </div>
-        <div className="col-span-2 flex justify-end">
-          <span className="">
-            <DropdownSelect
-              size={"w-[200px]"}
-              placeholder={"Edit"}
-              items={EDIT_OPTIONS}
-              className="rounded-none border-0 border-l shadow-none"
-              onValueChange={setBlockAction}
-            />
-          </span>
-        </div>
-      </div>
       <div className="grid grid-cols-10 items-center justify-center border-b border-l">
         <div className="col-span-2 border-r">
           <span className="inline-block pl-4 align-middle font-bold">
-            {cellTitle}
+            {focus ? focus.label : "Cell Title"}
           </span>
         </div>
         <div className="col-span-6">
@@ -66,24 +72,27 @@ export function EditBar({
               type="number"
               placeholder="Cell Value"
               className="w-full border-0 focus-visible:ring-0"
-              onChange={(e) => setCellValue(e.target.value)}
+              value={cellValue}
+              onChange={e => setCellValue(e.target.value)}
             />
           </span>
         </div>
         <div className="justify-left col-span-2 flex ">
           <span className="pl-1">
             <DropdownSelect
               size={"w-[165px]"}
-              placeholder={"Operation"}
+              placeholder="Operation"
               items={OPERATIONS}
-              className="rounded-none border-0 border-x shadow-none"
+              value={cellOperator}
+              className="rounded-none border-0 border-x shadow-none" 
               onValueChange={setCellOperator}
             />
           </span>
           <span className="border-r pl-3 pr-2 pt-2">
             <Checkbox
               checked={cellVisible}
-              onCheckedChange={() => setCellVisible(cellVisible)}
+              value={cellVisible}
+              onCheckedChange={handleSetVisible}
               className={"border border-dashed"}
             />
           </span>

src/app/models/_components/parameter-cell.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-interface Param {
+interface Param extends React.ComponentProps<"div"> {
   id: string;
   section: string;
   value: string;
@@ -11,16 +11,16 @@ interface Param {
   visible: boolean;
 }
 
-export function ParameterCell({ id, section, value, label, input, operator, visible }: Param) {
+export function ParameterCell({ id, section, value, label, input, operator, visible, ...props }: Param) {
 
-    return (
-        <>
-          <div className="flex-1 pr-2">{label}</div>
-          {input !== 0 && ( 
-             <div className="flex-1 p-2 text-right">
-              {input}
-            </div>
-          )}
-        </>
-    )
+  return (
+    <>
+      <div className="flex-1 pr-2">{label}</div>
+      {input !== 0 && ( 
+         <div className="flex-1 p-2 text-right">
+          {input}
+        </div>
+      )}
+    </>
+)
 }