From 5bb61931d2eaf94b96c8503394f53d052bcf8a62 Mon Sep 17 00:00:00 2001 From: pattytejada Date: Fri, 26 Apr 2024 00:28:03 -0700 Subject: [PATCH 1/3] EditBar: WIP to be finished --- src/app/_context/model-context.tsx | 8 +- .../_components/droppable-list-view.tsx | 62 ++++++++------- .../models/_components/edit-bar-container.tsx | 76 +++++++++++-------- src/app/models/_components/parameter-cell.tsx | 24 +++--- src/app/models/editor/[modelId]/page.tsx | 47 ++---------- src/app/models/page.tsx | 62 +++++++-------- 6 files changed, 137 insertions(+), 142 deletions(-) diff --git a/src/app/_context/model-context.tsx b/src/app/_context/model-context.tsx index f19af7a..1449ff3 100644 --- a/src/app/_context/model-context.tsx +++ b/src/app/_context/model-context.tsx @@ -36,6 +36,8 @@ interface ContextProps { onConnectStart: (_: unknown, { nodeId }: { nodeId: unknown }) => void; onConnectEnd: (event: unknown) => void; blockId: string; + focus: unknown; + setFocus: Dispatch>; } let id = 0; @@ -68,10 +70,13 @@ const ModelNodesContext = createContext({ onConnectEnd: () => null, onConnectStart: () => null, blockId: "", + focus: null, + setFocus: () => null, }); const ModelNodesContextProvider = ({ children, }: HTMLAttributes) => { + const [focus, setFocus] = useState(); const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes); const [edges, setEdges, onEdgesChange] = useEdgesState([]); const connectingNodeId = useRef(null); @@ -125,7 +130,6 @@ const ModelNodesContextProvider = ({ [screenToFlowPosition], ); - return ( {children} diff --git a/src/app/models/_components/droppable-list-view.tsx b/src/app/models/_components/droppable-list-view.tsx index 5c1bbda..65c3757 100644 --- a/src/app/models/_components/droppable-list-view.tsx +++ b/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 } = useModelNodesContext(); const [currId, setCurrId] = useState(+blockId); useEffect(() => { setCurrId(+blockId); - console.log("rendered:", +blockId); }, []); useEffect(() => { @@ -57,8 +56,8 @@ 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 { @@ -66,11 +65,8 @@ export default function DroppableListView(props: DndListViewProps) { "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 +87,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 +108,13 @@ export default function DroppableListView(props: DndListViewProps) { })), ); list.append(...processedItems); - }, ...otherProps, }); - const handleDelete = (item : Param) => { + const handleDelete = (item: Param) => { list.remove(item.id); }; - return (
@@ -142,20 +134,38 @@ export default function DroppableListView(props: DndListViewProps) { {(item) => (
- handleDelete(item)} + handleDelete(item)} /> +
+
{ + setFocus(item); + }} + > +
- + { + key == "delete" && list.remove(item.id); + }} + > + + Edit + {/* */} + + + {/* */} + Delete + + )} diff --git a/src/app/models/_components/edit-bar-container.tsx b/src/app/models/_components/edit-bar-container.tsx index e700f99..fb8ad51 100644 --- a/src/app/models/_components/edit-bar-container.tsx +++ b/src/app/models/_components/edit-bar-container.tsx @@ -5,41 +5,55 @@ 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"; -interface EditBarProps { - blockTitle: string; - cellTitle: string; - blockAction: string; - setBlockAction: React.Dispatch>; - cellValue: string; - setCellValue: React.Dispatch>; - cellOperator: string; - setCellOperator: React.Dispatch>; - cellVisible: boolean; - setCellVisible: React.Dispatch>; -} +export function EditBar({}) { + const {focus} = useModelNodesContext() + + const [blockTitle, setBlockTitle] = useState(""); + const [blockAction, setBlockAction] = useState(""); + const [cellValue, setCellValue] = useState(""); + const [cellOperator, setCellOperator] = useState(""); + const [cellVisible, setCellVisible] = useState(true); + + const handleBlockActionChange = (value: string) => { + setBlockAction(value); + }; + + const handleCellValueChange = (value: string) => { + setCellValue(value); + }; + + const handleOperatorChange = (value: string) => { + setCellOperator(value); + }; + + const handleSetVisible = (cellVisible: boolean) => { + setCellVisible(cellVisible); + }; + + useEffect(() => { + console.log(focus); + const id = focus.id + + // TO DO: + // Using the useEffect, everytime a new cell is clicked + // update the id and maintain the new values for + // cellValue, cellOperator, cellVisible if they were changed + // Using this we can resave the data using droppable-list-view.txt line 43 + + }, [focus, cellValue, cellOperator, cellVisible]); -export function EditBar({ - blockTitle, - cellTitle, - blockAction, - setBlockAction, - cellValue, - setCellValue, - cellOperator, - setCellOperator, - cellVisible, - setCellVisible, -}: EditBarProps) { return ( <>
{/* {Block Title Here} */} - {blockTitle} + {"Block Title"}
@@ -49,7 +63,7 @@ export function EditBar({ placeholder={"Edit"} items={EDIT_OPTIONS} className="rounded-none border-0 border-l shadow-none" - onValueChange={setBlockAction} + onValueChange={handleBlockActionChange} />
@@ -57,7 +71,7 @@ export function EditBar({
- {cellTitle} + {focus ? focus.label : "Cell Title"}
@@ -66,7 +80,7 @@ export function EditBar({ type="number" placeholder="Cell Value" className="w-full border-0 focus-visible:ring-0" - onChange={(e) => setCellValue(e.target.value)} + onChange={e => setCellValue(e.target.value)} />
@@ -77,13 +91,13 @@ export function EditBar({ placeholder={"Operation"} items={OPERATIONS} className="rounded-none border-0 border-x shadow-none" - onValueChange={setCellOperator} + onValueChange={handleOperatorChange} /> setCellVisible(cellVisible)} + onCheckedChange={handleSetVisible} className={"border border-dashed"} /> diff --git a/src/app/models/_components/parameter-cell.tsx b/src/app/models/_components/parameter-cell.tsx index 46aafbf..0cab2c4 100644 --- a/src/app/models/_components/parameter-cell.tsx +++ b/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 ( - <> -
{label}
- {input !== 0 && ( -
- {input} -
- )} - - ) + return ( + <> +
{label}
+ {input !== 0 && ( +
+ {input} +
+ )} + +) } \ No newline at end of file diff --git a/src/app/models/editor/[modelId]/page.tsx b/src/app/models/editor/[modelId]/page.tsx index 69d9d1f..0ddbc22 100644 --- a/src/app/models/editor/[modelId]/page.tsx +++ b/src/app/models/editor/[modelId]/page.tsx @@ -1,6 +1,6 @@ "use client"; "use client"; -import React, { useState, useEffect } from "react"; +import React, { useState, useEffect, useContext } from "react"; import { EditBar } from "../../_components/edit-bar-container"; import { defaultTheme, Provider } from "@adobe/react-spectrum"; import { SearchBar } from "../../_components/search-bar"; @@ -8,7 +8,10 @@ import { useListData } from "@adobe/react-spectrum"; import DraggableListView from "../../_components/draggable-list-view"; import { PARAMS } from "../../_constants/constants"; import { ReactFlowProvider } from "reactflow"; -import { ModelNodesContextProvider } from "~/app/_context/model-context"; +import { + ModelNodesContextProvider, + useModelNodesContext, +} from "~/app/_context/model-context"; import Canvas from "../../_components/canvas"; type Props = { params: { modelId: string }; @@ -17,33 +20,6 @@ type Props = { const ModelCreatorView = ({ params }: Props) => { const { modelId } = params; - const [blockTitle, setBlockTitle] = useState(""); - const [blockAction, setBlockAction] = useState(""); - const [cellTitle, setCellTitle] = useState(""); - const [cellValue, setCellValue] = useState(""); - const [cellOperator, setCellOperator] = useState(""); - const [cellVisible, setCellVisible] = useState(true); - - const handleBlockActionChange = (value: string) => { - setBlockAction(value); - }; - - const handleCellValueChange = (value: string) => { - setCellValue(value); - }; - - const handleOperatorChange = (value: string) => { - setCellOperator(value); - }; - - const handleSetVisible = (cellVisible: boolean) => { - setCellVisible(cellVisible); - }; - - // useEffect(() => { - // console.log(); - // }, []); - const sourceList = useListData({ initialItems: PARAMS, }); @@ -58,18 +34,7 @@ const ModelCreatorView = ({ params }: Props) => {
- +
diff --git a/src/app/models/page.tsx b/src/app/models/page.tsx index 5c9fa07..856820a 100644 --- a/src/app/models/page.tsx +++ b/src/app/models/page.tsx @@ -21,39 +21,39 @@ const Models = async () => { const session = await getServerAuthSession(); const models = await api.models.getAll({ user_id: session?.user.id ?? "" }); return ( -
-

- Models -

-
-
- - -
-
- {models.map((model) => ( - - - {model.name} - {model.description} - - - - - Updated:{" "} - {model.updatedAt.toLocaleDateString() + - " " + - model.updatedAt.toLocaleTimeString()} - - - - - ))} -
+
+

+ Models +

+
+
+ + +
+
+ {models.map((model) => ( + + + {model.name} + {model.description} + + + + + Updated:{" "} + {model.updatedAt.toLocaleDateString() + + " " + + model.updatedAt.toLocaleTimeString()} + + + + + ))}
+
); }; From 80826e85a61c8d5784260d229c543e5177b703ea Mon Sep 17 00:00:00 2001 From: pattytejada Date: Sun, 28 Apr 2024 20:19:39 -0700 Subject: [PATCH 2/3] EditoBarito: Fix and finish implementing Edit Bar --- src/app/_context/model-context.tsx | 7 ++ .../models/_components/dropdown-select.tsx | 6 +- .../_components/droppable-list-view.tsx | 9 ++- .../models/_components/edit-bar-container.tsx | 77 +++++++++---------- src/app/models/_constants/constants.tsx | 4 +- 5 files changed, 57 insertions(+), 46 deletions(-) diff --git a/src/app/_context/model-context.tsx b/src/app/_context/model-context.tsx index 1449ff3..111d306 100644 --- a/src/app/_context/model-context.tsx +++ b/src/app/_context/model-context.tsx @@ -38,6 +38,8 @@ interface ContextProps { blockId: string; focus: unknown; setFocus: Dispatch>; + updatedItem: unknown; + setUpdatedItem: Dispatch>; } let id = 0; @@ -72,11 +74,14 @@ const ModelNodesContext = createContext({ blockId: "", focus: null, setFocus: () => null, + updatedItem: null, + setUpdatedItem: () => null, }); const ModelNodesContextProvider = ({ children, }: HTMLAttributes) => { const [focus, setFocus] = useState(); + const [updatedItem, setUpdatedItem] = useState(); const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes); const [edges, setEdges, onEdgesChange] = useEdgesState([]); const connectingNodeId = useRef(null); @@ -145,6 +150,8 @@ const ModelNodesContextProvider = ({ blockId: id.toString(), focus, setFocus, + updatedItem, + setUpdatedItem, }} > {children} diff --git a/src/app/models/_components/dropdown-select.tsx b/src/app/models/_components/dropdown-select.tsx index ce7a5e3..5f1d121 100644 --- a/src/app/models/_components/dropdown-select.tsx +++ b/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 { placeholder: string; items: { value: string; label: string }[]; onValueChange: string; + value: string } export function DropdownSelect({ size, placeholder, + label, items, className, onValueChange, + value, ...props }: DropdownProps) { return ( - diff --git a/src/app/models/_components/droppable-list-view.tsx b/src/app/models/_components/droppable-list-view.tsx index 65c3757..3afeb4b 100644 --- a/src/app/models/_components/droppable-list-view.tsx +++ b/src/app/models/_components/droppable-list-view.tsx @@ -33,7 +33,7 @@ interface DndListViewProps extends DragAndDropOptions { export default function DroppableListView(props: DndListViewProps) { const { list, blockId, ...otherProps } = props; - const { setNodes, setFocus } = useModelNodesContext(); + const { setNodes, setFocus, updatedItem } = useModelNodesContext(); const [currId, setCurrId] = useState(+blockId); useEffect(() => { @@ -47,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: [ diff --git a/src/app/models/_components/edit-bar-container.tsx b/src/app/models/_components/edit-bar-container.tsx index fb8ad51..2f2f86f 100644 --- a/src/app/models/_components/edit-bar-container.tsx +++ b/src/app/models/_components/edit-bar-container.tsx @@ -9,24 +9,15 @@ 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"; export function EditBar({}) { - const {focus} = useModelNodesContext() + const {focus, setFocus, setUpdatedItem} = useModelNodesContext() - const [blockTitle, setBlockTitle] = useState(""); - const [blockAction, setBlockAction] = useState(""); const [cellValue, setCellValue] = useState(""); const [cellOperator, setCellOperator] = useState(""); const [cellVisible, setCellVisible] = useState(true); - const handleBlockActionChange = (value: string) => { - setBlockAction(value); - }; - - const handleCellValueChange = (value: string) => { - setCellValue(value); - }; - const handleOperatorChange = (value: string) => { setCellOperator(value); }; @@ -36,38 +27,39 @@ export function EditBar({}) { }; useEffect(() => { - console.log(focus); - const id = focus.id + 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); + } - // TO DO: - // Using the useEffect, everytime a new cell is clicked - // update the id and maintain the new values for - // cellValue, cellOperator, cellVisible if they were changed - // Using this we can resave the data using droppable-list-view.txt line 43 + }, [cellValue, cellOperator, cellVisible]); - }, [focus, cellValue, cellOperator, cellVisible]); + function getLabelForValue(value : string) { + const operation = OPERATIONS.find(op => op.value === value); + return operation ? operation.label : "Operation"; + } return ( <> -
-
- {/* {Block Title Here} */} - - {"Block Title"} - -
-
- - - -
-
@@ -80,6 +72,7 @@ export function EditBar({}) { type="number" placeholder="Cell Value" className="w-full border-0 focus-visible:ring-0" + value={cellValue} onChange={e => setCellValue(e.target.value)} /> @@ -88,15 +81,17 @@ export function EditBar({}) { diff --git a/src/app/models/_constants/constants.tsx b/src/app/models/_constants/constants.tsx index 4a0d4a7..f8eaa08 100644 --- a/src/app/models/_constants/constants.tsx +++ b/src/app/models/_constants/constants.tsx @@ -196,8 +196,8 @@ export const PARAMS = [ value: "bathrooms", label: "Bathrooms", format: "number", - input: 0, - operator: "", + input: 4, + operator: "addition", visible: true, }, { From f828dc2e5428bb23414cf1f64dcc5d65685560ff Mon Sep 17 00:00:00 2001 From: dennisongaia Date: Sun, 28 Apr 2024 20:42:55 -0700 Subject: [PATCH 3/3] EditoBarito: Fix constants --- src/app/models/_constants/constants.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/models/_constants/constants.tsx b/src/app/models/_constants/constants.tsx index f8eaa08..4a0d4a7 100644 --- a/src/app/models/_constants/constants.tsx +++ b/src/app/models/_constants/constants.tsx @@ -196,8 +196,8 @@ export const PARAMS = [ value: "bathrooms", label: "Bathrooms", format: "number", - input: 4, - operator: "addition", + input: 0, + operator: "", visible: true, }, {