diff --git a/client/src/components/Window.tsx b/client/src/components/Window.tsx index e022e92..61c0678 100644 --- a/client/src/components/Window.tsx +++ b/client/src/components/Window.tsx @@ -1,6 +1,6 @@ import React, { useState } from 'react'; import { ThemeProvider, CssBaseline, createMuiTheme } from '@material-ui/core'; -import { QueryElem } from '../lib/Query'; +import { QueryElem } from '../lib/query/Query'; import QueryBuilder from './querybuilder/QueryBuilder'; const darkTheme = createMuiTheme({ diff --git a/client/src/components/querybuilder/QBQueryElem.tsx b/client/src/components/querybuilder/QBQueryElem.tsx index 2478610..1655ec8 100644 --- a/client/src/components/querybuilder/QBQueryElem.tsx +++ b/client/src/components/querybuilder/QBQueryElem.tsx @@ -1,22 +1,28 @@ import React from 'react'; -import { QueryLeafElem, QueryNodeElem, QueryElem, isLeafElem, isNodeElem } from '../../lib/Query'; +import { QueryLeafElem, QueryNodeElem, QueryElem, isLeafElem, isNodeElem } from '../../lib/query/Query'; import { QBQueryLeafElem } from './QBQueryLeafElem'; import { QBQueryNodeElem } from './QBQueryNodeElem'; export interface IProps { elem: QueryLeafElem | QueryNodeElem, - onReplace: (q: QueryElem) => void, + onReplace: (q: QueryElem | null) => void, + editingQuery: boolean, } export function QBQueryElem(props: IProps) { let e = props.elem; if (isLeafElem(e)) { - return + return } else if (isNodeElem(e)) { return } diff --git a/client/src/components/querybuilder/QBQueryElemMenu.tsx b/client/src/components/querybuilder/QBQueryElemMenu.tsx index 9d8ed8c..75d2167 100644 --- a/client/src/components/querybuilder/QBQueryElemMenu.tsx +++ b/client/src/components/querybuilder/QBQueryElemMenu.tsx @@ -1,7 +1,7 @@ import React, { useState } from 'react'; import { Menu, TextField } from '@material-ui/core'; import NestedMenuItem from "material-ui-nested-menu-item"; -import { QueryElem, QueryLeafBy, QueryLeafOp } from '../../lib/Query'; +import { QueryElem, QueryLeafBy, QueryLeafOp } from '../../lib/query/Query'; import Autocomplete from '@material-ui/lab/Autocomplete' export interface FreeSoloInputProps { diff --git a/client/src/components/querybuilder/QBQueryLeafElem.tsx b/client/src/components/querybuilder/QBQueryLeafElem.tsx index c53f5d3..01f83cb 100644 --- a/client/src/components/querybuilder/QBQueryLeafElem.tsx +++ b/client/src/components/querybuilder/QBQueryLeafElem.tsx @@ -1,57 +1,108 @@ import React from 'react'; -import { QueryLeafElem, QueryLeafBy, QueryLeafOp, QueryElem } from '../../lib/Query'; -import { Chip, Typography } from '@material-ui/core'; +import { QueryLeafElem, QueryLeafBy, QueryLeafOp, QueryElem } from '../../lib/query/Query'; +import { Chip, Typography, IconButton, Box } from '@material-ui/core'; import { QBQueryPlaceholder } from './QBQueryPlaceholder'; +import CloseIcon from '@material-ui/icons/Close'; export interface ElemChipProps { - label: any + label: any, + extraElements?: any, } export function LabeledElemChip(props: ElemChipProps) { - const label = {props.label} + const label = + {props.label} + {props.extraElements} + return } export interface LeafProps { - elem: QueryLeafElem - onReplace: (q: QueryElem) => void + elem: QueryLeafElem, + onReplace: (q: QueryElem) => void, + extraElements?: any, } export function QBQueryElemArtistEquals(props: LeafProps) { - return + return } export function QBQueryElemArtistLike(props: LeafProps) { - return + return } export function QBQueryElemTitleEquals(props: LeafProps) { - return + return } export function QBQueryElemTitleLike(props: LeafProps) { - return + return } -export function QBQueryLeafElem(props: LeafProps) { +export interface DeleteButtonProps { + onClick?: (e: any) => void, +} + +export function QBQueryElemDeleteButton(props: DeleteButtonProps) { + return + + +} + +export interface IProps { + elem: QueryLeafElem, + onReplace: (q: QueryElem | null) => void, + editingQuery: boolean, +} + +export function QBQueryLeafElem(props: IProps) { let e = props.elem; + const extraElements = props.editingQuery ? + props.onReplace(null)} + /> + : undefined; + if (e.a == QueryLeafBy.ArtistName && e.leafOp == QueryLeafOp.Equals && typeof e.b == "string") { - return + return } else if (e.a == QueryLeafBy.ArtistName && e.leafOp == QueryLeafOp.Like && typeof e.b == "string") { - return + return } if (e.a == QueryLeafBy.SongTitle && e.leafOp == QueryLeafOp.Equals && typeof e.b == "string") { - return + return } else if (e.a == QueryLeafBy.SongTitle && e.leafOp == QueryLeafOp.Like && typeof e.b == "string") { - return + return } else if (e.leafOp == QueryLeafOp.Placeholder) { return void, + onReplace: (q: QueryElem | null) => void, + editingQuery: boolean, } export function QBQueryNodeElem(props: NodeProps) { let e = props.elem; - const onReplace = (idx: number, q: QueryElem) => { + const onReplace = (idx: number, q: QueryElem | null) => { var ops = e.operands; - ops[idx] = q; - let newNode = { operands: ops, nodeOp: e.nodeOp }; + if (q) { + ops[idx] = q; + } else { + ops.splice(idx, 1); + } + let newNode = simplify({ operands: ops, nodeOp: e.nodeOp }); props.onReplace(newNode); } const children = e.operands.map((o: any, idx: number) => { - if (isNodeElem(o)) { - return onReplace(idx, q)} - /> - } - return onReplace(idx, q)} + onReplace={(q: QueryElem | null) => onReplace(idx, q)} + editingQuery={props.editingQuery} /> }); diff --git a/client/src/components/querybuilder/QBQueryPlaceholder.tsx b/client/src/components/querybuilder/QBQueryPlaceholder.tsx index 23ea5f7..4497e41 100644 --- a/client/src/components/querybuilder/QBQueryPlaceholder.tsx +++ b/client/src/components/querybuilder/QBQueryPlaceholder.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { Chip } from '@material-ui/core'; import { QBQueryElemMenu } from './QBQueryElemMenu'; -import { QueryElem } from '../../lib/Query'; +import { QueryElem } from '../../lib/query/Query'; export interface IProps { onReplace: (q: QueryElem) => void, diff --git a/client/src/components/querybuilder/QueryBuilder.tsx b/client/src/components/querybuilder/QueryBuilder.tsx index f8574e6..f14fb9e 100644 --- a/client/src/components/querybuilder/QueryBuilder.tsx +++ b/client/src/components/querybuilder/QueryBuilder.tsx @@ -2,7 +2,7 @@ import React, { useState } from 'react'; import { Box } from '@material-ui/core'; import QBQueryButton from './QBQueryButton'; import { QBQueryElem } from './QBQueryElem'; -import { QueryElem, addPlaceholders, removePlaceholders, simplify } from '../../lib/Query'; +import { QueryElem, addPlaceholders, removePlaceholders, simplify } from '../../lib/query/Query'; export interface IProps { query: QueryElem | null, @@ -33,6 +33,7 @@ export default function QueryBuilder(props: IProps) { {showQuery && } diff --git a/client/src/lib/Query.tsx b/client/src/lib/query/Query.tsx similarity index 100% rename from client/src/lib/Query.tsx rename to client/src/lib/query/Query.tsx