Add query button with basic menu.

client/package-lock.json

@@ -8698,6 +8698,11 @@
         "react-double-scrollbar": "0.0.15"
       }
     },
+    "material-ui-nested-menu-item": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/material-ui-nested-menu-item/-/material-ui-nested-menu-item-1.0.2.tgz",
+      "integrity": "sha512-LZb8xI0FrAI/A3P2vT3CB9bmSoOFWOK0dikTc1t9VvEpp1a8hZkbVUz7VhETnoLUYu3NXCkgulmXcl3zitqI9A=="
+    },
     "md5.js": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",

client/package.json

@@ -18,6 +18,7 @@
     "jsurl": "^0.1.5",
     "lodash": "^4.17.20",
     "material-table": "^1.69.0",
+    "material-ui-nested-menu-item": "^1.0.2",
     "react": "^16.13.1",
     "react-dnd": "^11.1.3",
     "react-dnd-html5-backend": "^11.1.3",

client/src/components/Window.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ThemeProvider, CssBaseline, createMuiTheme } from '@material-ui/core';
-import { QBQueryElem } from './querybuilder/QBQueryElem';
 import { QueryLeafElem, QueryLeafBy, QueryLeafOp, QueryElem, QueryNodeElem, queryOr, queryAnd } from '../lib/Query';
+import QueryBuilder from './querybuilder/QueryBuilder';
 
 const darkTheme = createMuiTheme({
     palette: {
@@ -32,6 +32,6 @@ export default function Window(props: any) {
 
     return <ThemeProvider theme={darkTheme}>
         <CssBaseline />
-        <QBQueryElem elem={query} />
+        <QueryBuilder query={query} />
     </ThemeProvider>
 }

client/src/components/querybuilder/QBQueryButton.tsx

@@ -0,0 +1,122 @@
+import React, { useState } from 'react';
+import { IconButton, Menu, MenuItem, TextField, Box } from '@material-ui/core';
+import SearchIcon from '@material-ui/icons/Search';
+import NestedMenuItem from "material-ui-nested-menu-item";
+import { QueryElem, QueryLeafBy, QueryLeafOp } from '../../lib/Query';
+import Autocomplete from '@material-ui/lab/Autocomplete'
+
+export function QBQueryButtonBase(props: any) {
+    return <IconButton {...props}>
+        <SearchIcon style={{ fontSize: 80 }} />
+    </IconButton>
+}
+
+export interface FreeSoloInputProps {
+    label: string,
+    options: string[],
+    onSubmit: (s: string, exactMatch: boolean) => void,
+}
+
+export function QBMenuFreeSoloInput(props: FreeSoloInputProps) {
+    const [value, setValue] = useState<string>('');
+
+    const onInputChange = (event: any, _val: any, reason: any) => {
+        if (reason === 'reset') {
+            // User selected a preset option.
+            props.onSubmit(_val, true);
+        } else {
+            setValue(_val);
+        }
+    }
+
+    return <Autocomplete
+        style={{ width: 300 }}
+        options={props.options}
+        freeSolo={true}
+        onInputChange={onInputChange}
+        onKeyDown={(e: any) => {
+            if (e.key === 'Enter') {
+                // User submitted free-form value.
+                props.onSubmit(value, props.options.includes(value));
+            }
+        }}
+        renderInput={(params: any) => <TextField
+            {...params}
+            label={props.label}
+        />}
+    />
+}
+
+
+export interface MenuProps {
+    anchorEl: null | HTMLElement,
+    onClose: () => void,
+    onCreateQuery: (q: QueryElem) => void,
+}
+
+export function QBQueryButtonMenu(props: MenuProps) {
+    let anchorEl = props.anchorEl;
+    let onClose = props.onClose;
+
+    const artists = [
+        'Queens',
+        'Muse',
+        'Triggerfinger'
+    ];
+
+    return <Menu
+        id="simple-menu"
+        anchorEl={anchorEl}
+        keepMounted
+        open={Boolean(anchorEl)}
+        onClose={onClose}
+    >
+        <NestedMenuItem
+            label="Artist"
+            parentMenuOpen={Boolean(anchorEl)}
+        >
+            <QBMenuFreeSoloInput
+                options={artists}
+                label="Artist"
+                onSubmit={(s: string, exact: boolean) => {
+                    onClose();
+                    props.onCreateQuery({
+                        a: QueryLeafBy.ArtistName,
+                        op: exact ? QueryLeafOp.Equals : QueryLeafOp.Like,
+                        b: s
+                    });
+                }}
+            />
+        </NestedMenuItem>
+    </Menu >
+}
+
+export interface IProps {
+
+}
+
+export default function QBQueryButton(props: IProps) {
+    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+    const onOpen = (e: React.MouseEvent<HTMLButtonElement>) => {
+        setAnchorEl(e.currentTarget);
+    }
+    const onClose = () => {
+        setAnchorEl(null);
+    }
+    const onCreateQuery = (q: QueryElem) => {
+        console.log("created query:", q);
+    }
+
+    return <>
+        <QBQueryButtonBase
+            aria-controls="simple-menu"
+            aria-haspopup="true"
+            onClick={onOpen}
+        />
+        <QBQueryButtonMenu
+            anchorEl={anchorEl}
+            onClose={onClose}
+            onCreateQuery={onCreateQuery}
+        />
+    </>;
+}

client/src/components/querybuilder/QueryBuilder.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Box } from '@material-ui/core';
+import QBQueryButton from './QBQueryButton';
+import { QBQueryElem } from './QBQueryElem';
+import { QueryElem } from '../../lib/Query';
+
+export interface IProps {
+    query: QueryElem
+}
+
+export default function QueryBuilder(props: IProps) {
+    return <Box display="flex" alignItems="center">
+        <Box m={2}>
+            <QBQueryButton/>
+        </Box>
+        <Box m={2}>
+            <QBQueryElem elem={props.query}/>
+        </Box>
+    </Box>
+}