From 326f3788faf8b04802bfcf3e0e99b600304d2ec6 Mon Sep 17 00:00:00 2001 From: Jordan Date: Thu, 29 Feb 2024 11:10:04 -0800 Subject: [PATCH] i need to make the library dialog a datagrid. --- src/App.tsx | 6 ++-- src/components/LibraryItem.tsx | 2 +- src/components/NewLibraryItem.tsx | 50 ++++++++++++++----------------- src/components/Nugget.css | 18 +++++++---- src/components/Nugget.tsx | 6 +++- src/components/Operation.css | 21 ++++++++++--- src/components/Operation.tsx | 4 +-- src/components/PromptComposer.css | 6 ++++ src/components/PromptComposer.tsx | 6 ++-- src/components/PromptLibrary.css | 15 ++++++++++ src/components/PromptLibrary.tsx | 28 +++++++++++------ src/components/TextPrompt.tsx | 9 ++++-- 12 files changed, 113 insertions(+), 58 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 3fa48b6..e8ef74f 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -54,11 +54,11 @@ function App() { const promptItems = [ { id: uuid4(), items: [ - { id: uuid4(), item: libItems[0] }, - { id: uuid4(), item: libItems[1] }, + { id: uuid4(), item: libItems[0], score: -2 }, + { id: uuid4(), item: libItems[1], score: 1 }, ], op: Op.AND, }, - { id: uuid4(), item: libItems[2] }, + { id: uuid4(), item: libItems[2], score: 0, }, ] as Composition; $library.set(libItems); diff --git a/src/components/LibraryItem.tsx b/src/components/LibraryItem.tsx index b7e2447..cfacd25 100644 --- a/src/components/LibraryItem.tsx +++ b/src/components/LibraryItem.tsx @@ -10,7 +10,7 @@ export interface StyleProps { export function LibraryItem(props: StyleProps) { const { item, onInsertItem } = props return ( -
+
diff --git a/src/components/NewLibraryItem.tsx b/src/components/NewLibraryItem.tsx index ef32922..5ec2b96 100644 --- a/src/components/NewLibraryItem.tsx +++ b/src/components/NewLibraryItem.tsx @@ -1,4 +1,4 @@ -import { Button, FormControl, InputLabel, MenuItem, TextField } from "@material-ui/core"; +import { Button, Container, FormControl, InputLabel, MenuItem, Table, TableRow, TextField } from "@material-ui/core"; import Select, { SelectChangeEvent } from '@mui/material/Select'; import { Category, LibraryItem, addItemToLibrary, categoryHasName } from "../lib/prompt"; import { ChangeEvent, useState } from "react"; @@ -46,32 +46,28 @@ export function NewLibraryItem(props: NewLibraryItemProps) { const catChoices = Object.keys(Category); return ( -
- -
- Category - -
-
- {categoryHasName(category) ? (Name) : <>} - {categoryHasName(category) ? () : <>} -
-
- Prompt - - -
+ + + Category + + {categoryHasName(category) && <> + Name + + } + Prompt + + -
+ ) } \ No newline at end of file diff --git a/src/components/Nugget.css b/src/components/Nugget.css index 934320e..184ab6e 100644 --- a/src/components/Nugget.css +++ b/src/components/Nugget.css @@ -1,13 +1,19 @@ -.nugget { +.nugget.toplevel { border: 1px solid slategray; - border-radius: 10pt; display: inline-flex; - margin: 10pt; +} + +.operation .nugget { + border: 1px solid white; + border-radius: 2pt; + display: inline-flex; } .nugget > .text, .nugget > .score, .nugget.buttons { - display: flex; padding: 4pt; - margin-top: 10pt; - vertical-align: text-bottom; + display: inline-block; +} + +.nugget .buttons button { + max-height: 12pt; } \ No newline at end of file diff --git a/src/components/Nugget.tsx b/src/components/Nugget.tsx index db5b939..25e0067 100644 --- a/src/components/Nugget.tsx +++ b/src/components/Nugget.tsx @@ -11,6 +11,7 @@ import { useStore } from '@nanostores/react'; export interface NuggetProps extends PromptItemProps { nugget: NuggetType, + isTopLevel?: boolean, } export default function Nugget(props: NuggetProps) { @@ -22,6 +23,7 @@ export default function Nugget(props: NuggetProps) { onDrop, onMouseEnter, onMouseLeave, + isTopLevel, } = props; const scoreDisp = nugget.score > 0 ? "+" + nugget.score : nugget.score; @@ -30,6 +32,8 @@ export default function Nugget(props: NuggetProps) { const composition = useStore($composition) const thisId = `prompt-item-${nugget.id}` + const className = isTopLevel ? 'nugget toplevel prompt-item' : 'nugget child prompt-item'; + const handleOnDragStart = () => { onDragStart ? onDragStart(nugget) : null; } @@ -66,7 +70,7 @@ export default function Nugget(props: NuggetProps) { return (
@@ -100,7 +100,7 @@ function Operation(props: OperationProps) {
{ operation.items.map(nugget => { - return + return }) }
diff --git a/src/components/PromptComposer.css b/src/components/PromptComposer.css index 3e01b90..0cf0912 100644 --- a/src/components/PromptComposer.css +++ b/src/components/PromptComposer.css @@ -2,4 +2,10 @@ position: absolute; right: 10pt; top: 10pt; +} + +.prompt-item { + margin: 4pt; + padding: 2pt; + border-radius: 5pt; } \ No newline at end of file diff --git a/src/components/PromptComposer.tsx b/src/components/PromptComposer.tsx index a49384e..47f4a82 100644 --- a/src/components/PromptComposer.tsx +++ b/src/components/PromptComposer.tsx @@ -72,7 +72,7 @@ export default function PromptComposer(props: PromptComposerProps) { return ("op" in promptItem ? - : ) + : ) } return ( @@ -90,9 +90,9 @@ export default function PromptComposer(props: PromptComposerProps) {
{ slottedComposition.map((itemCol, i) => ( - + <> {itemCol.map((promptItem, j) => promptItemFactory(promptItem, `item-${j}-${j}`))} - + )) }
diff --git a/src/components/PromptLibrary.css b/src/components/PromptLibrary.css index 90f8ea4..e698a97 100644 --- a/src/components/PromptLibrary.css +++ b/src/components/PromptLibrary.css @@ -1,3 +1,18 @@ .prompt-library-dialog .categories div { display: inline; + margin: 20pt; +} + + +.library-item button, .library-item span { + display: inline-block; + vertical-align: sub; +} + +.new-item-form { + border: 1px solid blue; +} + +.hidden { + display: none; } \ No newline at end of file diff --git a/src/components/PromptLibrary.tsx b/src/components/PromptLibrary.tsx index 7adb887..57b2adc 100644 --- a/src/components/PromptLibrary.tsx +++ b/src/components/PromptLibrary.tsx @@ -34,7 +34,7 @@ export function PromptLibrary(props: SimpleDialogProps) { const [doCreate, setDoCreate] = useState(false); - const [visibleCategories, setVisibleCategories] = useState([] as Category[]); + const [visibleCategories, setVisibleCategories] = useState(Object.keys(Category) as Category[]); const handleOnAddItem = (item: LibItemType) => { // onAddItem(item); @@ -44,12 +44,22 @@ export function PromptLibrary(props: SimpleDialogProps) { onInsertItem(item); } - const filterCat = (catKey: string, v: ChangeEvent) => { - const isChecked = v.target.value === '1'; - setVisibleCategories((visibleCategories.includes(catKey as Category) && !isChecked) ? visibleCategories.filter(c => c != catKey) : [...visibleCategories, catKey as Category]); - document.querySelectorAll(`.category-${catKey}`).forEach($el => { - if (isChecked) show($el) - else hide($el) + const filterCat = (catKey: string) => { + document.querySelectorAll(`.library-item`).forEach($el => { + console.log("Found %x", $el); + show($el); + }); + if (visibleCategories.includes(catKey as Category)) { + setVisibleCategories(visibleCategories.filter((v) => v !== catKey)); + } else { + setVisibleCategories([...visibleCategories, catKey as Category]); + } + console.log(visibleCategories); + document.querySelectorAll(`.library-item`).forEach($el => { + Object.keys(Category).forEach(c => { + if (c in visibleCategories) show($el) + else hide($el) + }) }); } @@ -69,8 +79,8 @@ export function PromptLibrary(props: SimpleDialogProps) {
{categoryChoices.map(catKey => { return ( -
- filterCat(catKey, v)} /> +
filterCat(catKey)}> + {title(catKey)}
) diff --git a/src/components/TextPrompt.tsx b/src/components/TextPrompt.tsx index 546c5bb..deaaa54 100644 --- a/src/components/TextPrompt.tsx +++ b/src/components/TextPrompt.tsx @@ -3,9 +3,14 @@ import { $textComposition } from "../lib/prompt"; import "./TextPrompt.css"; import { useStore } from "@nanostores/react"; -export function TextPrompt () { +export function TextPrompt() { const text = useStore($textComposition); return ( - + <> + + ) } \ No newline at end of file