diff --git a/client/src/components/MainWindow.tsx b/client/src/components/MainWindow.tsx index 6cbdc67..d3c22cd 100644 --- a/client/src/components/MainWindow.tsx +++ b/client/src/components/MainWindow.tsx @@ -1,8 +1,11 @@ import React, { useReducer, useState, Reducer } from 'react'; -import { ThemeProvider, CssBaseline, createMuiTheme } from '@material-ui/core'; +import { ThemeProvider, CssBaseline, createMuiTheme, withWidth } from '@material-ui/core'; import { grey } from '@material-ui/core/colors'; import AppBar from './appbar/AppBar'; import QueryWindow, { QueryWindowReducer, QueryWindowState } from './windows/QueryWindow'; +import { NewTabProps } from './appbar/AddTabMenu'; +import { newWindowState, newWindowReducer, WindowState, WindowType } from './windows/Windows'; +import EditArtistWindow from './windows/EditArtistWindow'; var _ = require('lodash'); const darkTheme = createMuiTheme({ @@ -18,6 +21,7 @@ export interface MainWindowState { tabLabels: string[], tabStates: any[], tabReducers: Reducer[], + tabTypes: WindowType[], activeTab: number, } @@ -39,7 +43,8 @@ export function MainWindowReducer(state: MainWindowState, action: any) { tabStates: state.tabStates.filter((i: any, idx: number) => idx != action.idx), tabLabels: state.tabLabels.filter((i: any, idx: number) => idx != action.idx), tabReducers: state.tabReducers.filter((i: any, idx: number) => idx != action.idx), - activeTab: state.activeTab >= (newSize-1) ? (newSize-1) : state.activeTab, + tabTypes: state.tabTypes.filter((i: any, idx: number) => idx != action.idx), + activeTab: state.activeTab >= (newSize - 1) ? (newSize - 1) : state.activeTab, } case MainWindowStateActions.AddTab: return { @@ -47,6 +52,7 @@ export function MainWindowReducer(state: MainWindowState, action: any) { tabStates: [...state.tabStates, action.tabState], tabLabels: [...state.tabLabels, action.tabLabel], tabReducers: [...state.tabReducers, action.tabReducer], + tabTypes: [...state.tabTypes, action.tabType], } case MainWindowStateActions.DispatchToTab: return { @@ -72,21 +78,35 @@ export default function MainWindow(props: any) { resultsForQuery: null, }, ], - tabReducers: [QueryWindowReducer, QueryWindowReducer], + tabReducers: [QueryWindowReducer], + tabTypes: [WindowType.Query], activeTab: 0 }) - const queryWindows = state.tabStates.map((state: QueryWindowState, i: number) => { - return { - dispatch({ - type: MainWindowStateActions.DispatchToTab, - tabAction: action, - idx: i - }); - }} - /> + const windows = state.tabStates.map((tabState: any, i: number) => { + const tabDispatch = (action: any) => { + dispatch({ + type: MainWindowStateActions.DispatchToTab, + tabAction: action, + idx: i + }); + } + console.log("state", state); + + switch (state.tabTypes[i]) { + case WindowType.Query: + return + case WindowType.EditArtist: + return + default: + throw new Error("Unimplemented window type"); + } }); return @@ -96,19 +116,16 @@ export default function MainWindow(props: any) { selectedTab={state.activeTab} setSelectedTab={(t: number) => dispatch({ type: MainWindowStateActions.SetActiveTab, value: t })} onCloseTab={(t: number) => dispatch({ type: MainWindowStateActions.CloseTab, idx: t })} - onAddTab={() => { + onAddTab={(w: NewTabProps) => { dispatch({ type: MainWindowStateActions.AddTab, - tabState: { - editingQuery: false, - query: null, - resultsForQuery: null, - }, - tabLabel: "Query", - tabReducer: QueryWindowReducer, + tabState: newWindowState[w.windowType](), + tabLabel: w.title, + tabReducer: newWindowReducer[w.windowType], + tabType: w.windowType, }) }} /> - {queryWindows[state.activeTab]} + {windows[state.activeTab]} } \ No newline at end of file diff --git a/client/src/components/appbar/AddTabMenu.tsx b/client/src/components/appbar/AddTabMenu.tsx new file mode 100644 index 0000000..fb79682 --- /dev/null +++ b/client/src/components/appbar/AddTabMenu.tsx @@ -0,0 +1,37 @@ +import React from 'react'; +import { WindowType } from '../windows/Windows'; +import { Menu, MenuItem } from '@material-ui/core'; + +export interface NewTabProps { + title: string, + windowType: WindowType, +} + +export interface IProps { + anchorEl: null | HTMLElement, + onClose: () => void, + onCreateTab: (q: NewTabProps) => void, +} + +export default function AddTabMenu(props: IProps) { + return + New Tab + {([ + WindowType.Query, + WindowType.EditArtist + ]).map((v: WindowType) => { + props.onClose(); + props.onCreateTab({ + title: v, + windowType: v, + }) + }} + >{v})} + +} \ No newline at end of file diff --git a/client/src/components/appbar/AppBar.tsx b/client/src/components/appbar/AppBar.tsx index 0679f92..35839b6 100644 --- a/client/src/components/appbar/AppBar.tsx +++ b/client/src/components/appbar/AppBar.tsx @@ -2,13 +2,14 @@ import React, { useState } from 'react'; import { AppBar as MuiAppBar, Box, Tab as MuiTab, Tabs, IconButton } from '@material-ui/core'; import CloseIcon from '@material-ui/icons/Close'; import AddIcon from '@material-ui/icons/Add'; +import AddTabMenu, { NewTabProps } from './AddTabMenu'; export interface IProps { tabLabels: string[], selectedTab: number, setSelectedTab: (n: number) => void, onCloseTab: (idx: number) => void, - onAddTab: () => void, + onAddTab: (w: NewTabProps) => void, } export interface TabProps { @@ -45,19 +46,38 @@ export function Tab(props: any) { } export default function AppBar(props: IProps) { - return - - - error + const [addMenuAnchorEl, setAddMenuAnchorEl] = React.useState(null); + + const onOpenAddMenu = (event: any) => { + setAddMenuAnchorEl(event.currentTarget); + }; + const onCloseAddMenu = () => { + setAddMenuAnchorEl(null); + }; + const onAddTab = (w: NewTabProps) => { + props.onAddTab(w); + }; + + return <> + + + + error + + props.setSelectedTab(v)}> + {props.tabLabels.map((l: string, idx: number) => props.onCloseTab(idx)} + />)} + + - props.setSelectedTab(v)}> - {props.tabLabels.map((l: string, idx: number) => props.onCloseTab(idx)} - />)} - - - - + + + } \ No newline at end of file diff --git a/client/src/components/querybuilder/QBAddElemMenu.tsx b/client/src/components/querybuilder/QBAddElemMenu.tsx index 6433435..1aa2b1d 100644 --- a/client/src/components/querybuilder/QBAddElemMenu.tsx +++ b/client/src/components/querybuilder/QBAddElemMenu.tsx @@ -3,7 +3,7 @@ import { Menu, MenuItem } from '@material-ui/core'; import NestedMenuItem from "material-ui-nested-menu-item"; import { QueryElem, QueryLeafBy, QueryLeafOp, TagQueryInfo } from '../../lib/query/Query'; import QBSelectWithRequest from './QBSelectWithRequest'; -import { Requests, TagItem } from './QueryBuilder'; +import { Requests } from './QueryBuilder'; export interface MenuProps { anchorEl: null | HTMLElement, diff --git a/client/src/components/windows/EditArtistWindow.tsx b/client/src/components/windows/EditArtistWindow.tsx new file mode 100644 index 0000000..ba512a4 --- /dev/null +++ b/client/src/components/windows/EditArtistWindow.tsx @@ -0,0 +1,29 @@ +import React from 'react'; +import { Box } from '@material-ui/core'; + +export interface EditArtistWindowState { + +} + +export enum EditArtistWindowStateActions { +} + +export function EditArtistWindowReducer(state: EditArtistWindowState, action: any) { + return state; +} + +export interface IProps { + state: EditArtistWindowState, + dispatch: (action: any) => void +} + +export default function EditArtistWindow(props: IProps) { + return + + Hello! + + +} \ No newline at end of file diff --git a/client/src/components/windows/QueryWindow.tsx b/client/src/components/windows/QueryWindow.tsx index ff15103..d2f8339 100644 --- a/client/src/components/windows/QueryWindow.tsx +++ b/client/src/components/windows/QueryWindow.tsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from 'react'; +import React, { useEffect } from 'react'; import { createMuiTheme, Box, LinearProgress } from '@material-ui/core'; import { QueryElem, toApiQuery } from '../../lib/query/Query'; import QueryBuilder from '../querybuilder/QueryBuilder'; diff --git a/client/src/components/windows/Windows.tsx b/client/src/components/windows/Windows.tsx new file mode 100644 index 0000000..d052ee3 --- /dev/null +++ b/client/src/components/windows/Windows.tsx @@ -0,0 +1,27 @@ +import { QueryWindowReducer, QueryWindowState } from "./QueryWindow"; +import { EditArtistWindowReducer, EditArtistWindowState } from "./EditArtistWindow"; + +export enum WindowType { + Query = "Query", + EditArtist = "EditArtist", +} + +export type WindowState = QueryWindowState | EditArtistWindowState; + +export const newWindowReducer = { + [WindowType.Query]: QueryWindowReducer, + [WindowType.EditArtist]: EditArtistWindowReducer, +} + +export const newWindowState = { + [WindowType.Query]: () => { + return { + editingQuery: false, + query: null, + resultsForQuery: null, + }; + }, + [WindowType.EditArtist]: () => { + + } +} \ No newline at end of file