User interface overhaul #16
Merged
sander
merged 15 commits from ui_overhaul into master 5 years ago
42 changed files with 1357 additions and 1305 deletions
|
After Width: | Height: | Size: 9.7 KiB |
@ -1,115 +0,0 @@ |
|||||||
import React from 'react'; |
|
||||||
import MuiAppBar from '@material-ui/core/AppBar'; |
|
||||||
import Toolbar from '@material-ui/core/Toolbar'; |
|
||||||
import IconButton from '@material-ui/core/IconButton'; |
|
||||||
import Typography from '@material-ui/core/Typography'; |
|
||||||
import InputBase from '@material-ui/core/InputBase'; |
|
||||||
import { createStyles, fade, Theme, makeStyles } from '@material-ui/core/styles'; |
|
||||||
import MenuIcon from '@material-ui/icons/Menu'; |
|
||||||
import SearchIcon from '@material-ui/icons/Search'; |
|
||||||
import Tabs from '@material-ui/core/Tabs'; |
|
||||||
import Tab from '@material-ui/core/Tab'; |
|
||||||
|
|
||||||
const useStyles = makeStyles((theme: Theme) => |
|
||||||
createStyles({ |
|
||||||
root: { |
|
||||||
flexGrow: 1, |
|
||||||
}, |
|
||||||
menuButton: { |
|
||||||
marginRight: theme.spacing(2), |
|
||||||
}, |
|
||||||
title: { |
|
||||||
flexGrow: 1, |
|
||||||
display: 'none', |
|
||||||
[theme.breakpoints.up('sm')]: { |
|
||||||
display: 'block', |
|
||||||
}, |
|
||||||
}, |
|
||||||
search: { |
|
||||||
position: 'relative', |
|
||||||
borderRadius: theme.shape.borderRadius, |
|
||||||
backgroundColor: fade(theme.palette.common.white, 0.15), |
|
||||||
'&:hover': { |
|
||||||
backgroundColor: fade(theme.palette.common.white, 0.25), |
|
||||||
}, |
|
||||||
marginLeft: 0, |
|
||||||
width: '100%', |
|
||||||
[theme.breakpoints.up('sm')]: { |
|
||||||
marginLeft: theme.spacing(1), |
|
||||||
width: 'auto', |
|
||||||
}, |
|
||||||
}, |
|
||||||
searchIcon: { |
|
||||||
padding: theme.spacing(0, 2), |
|
||||||
height: '100%', |
|
||||||
position: 'absolute', |
|
||||||
pointerEvents: 'none', |
|
||||||
display: 'flex', |
|
||||||
alignItems: 'center', |
|
||||||
justifyContent: 'center', |
|
||||||
}, |
|
||||||
inputRoot: { |
|
||||||
color: 'inherit', |
|
||||||
}, |
|
||||||
inputInput: { |
|
||||||
padding: theme.spacing(1, 1, 1, 0), |
|
||||||
// vertical padding + font size from searchIcon
|
|
||||||
paddingLeft: `calc(1em + ${theme.spacing(4)}px)`, |
|
||||||
transition: theme.transitions.create('width'), |
|
||||||
width: '100%', |
|
||||||
[theme.breakpoints.up('sm')]: { |
|
||||||
width: '12ch', |
|
||||||
'&:focus': { |
|
||||||
width: '20ch', |
|
||||||
}, |
|
||||||
}, |
|
||||||
}, |
|
||||||
}), |
|
||||||
); |
|
||||||
|
|
||||||
export enum ActiveTab { |
|
||||||
Query = 0, |
|
||||||
} |
|
||||||
|
|
||||||
export interface IProps { |
|
||||||
activeTab: ActiveTab, |
|
||||||
onActiveTabChange: (tab:ActiveTab) => void |
|
||||||
} |
|
||||||
|
|
||||||
export default function AppBar(props: IProps) { |
|
||||||
const classes = useStyles(); |
|
||||||
|
|
||||||
return ( |
|
||||||
<div className={classes.root}> |
|
||||||
<MuiAppBar position="static"> |
|
||||||
<Toolbar> |
|
||||||
<IconButton |
|
||||||
edge="start" |
|
||||||
className={classes.menuButton} |
|
||||||
color="inherit" |
|
||||||
aria-label="open drawer" |
|
||||||
> |
|
||||||
<MenuIcon /> |
|
||||||
</IconButton> |
|
||||||
<Typography className={classes.title} variant="h6" noWrap>MuDBase</Typography> |
|
||||||
<div className={classes.search}> |
|
||||||
<div className={classes.searchIcon}> |
|
||||||
<SearchIcon /> |
|
||||||
</div> |
|
||||||
<InputBase |
|
||||||
placeholder="Search…" |
|
||||||
classes={{ |
|
||||||
root: classes.inputRoot, |
|
||||||
input: classes.inputInput, |
|
||||||
}} |
|
||||||
inputProps={{ 'aria-label': 'search' }} |
|
||||||
/> |
|
||||||
</div> |
|
||||||
</Toolbar> |
|
||||||
<Tabs value={props.activeTab} onChange={(evt:any, idx:any) => { props.onActiveTabChange(idx); }}> |
|
||||||
<Tab label="Query"/> |
|
||||||
</Tabs> |
|
||||||
</MuiAppBar> |
|
||||||
</div> |
|
||||||
); |
|
||||||
} |
|
||||||
@ -1,68 +0,0 @@ |
|||||||
import React from 'react'; |
|
||||||
|
|
||||||
import { Paper } from '@material-ui/core'; |
|
||||||
import { DisplayItem } from '../types/DisplayItem'; |
|
||||||
import DraggableItemListItem from './DraggableItemListItem'; |
|
||||||
import ItemList from './ItemList'; |
|
||||||
import * as serverApi from '../api'; |
|
||||||
import StoreIcon from '@material-ui/icons/Store'; |
|
||||||
import { ReactComponent as GooglePlayIcon } from '../assets/googleplaymusic_icon.svg'; |
|
||||||
|
|
||||||
type SongItem = serverApi.SongDetails; |
|
||||||
type ArtistItem = serverApi.ArtistDetails; |
|
||||||
export type Item = SongItem | ArtistItem; |
|
||||||
|
|
||||||
const getStoreIcon = (url: String) => { |
|
||||||
if (url.includes('play.google.com')) { |
|
||||||
return <GooglePlayIcon height='30px' width='30px' />; |
|
||||||
} |
|
||||||
return <StoreIcon />; |
|
||||||
} |
|
||||||
|
|
||||||
function toDisplayItem(item: Item): DisplayItem | undefined { |
|
||||||
if (serverApi.isSongDetails(item)) { |
|
||||||
return { |
|
||||||
title: item.title, |
|
||||||
artistNames: (item.artists && item.artists.map((artist: serverApi.ArtistDetails) => { |
|
||||||
return artist.name; |
|
||||||
})) || ['Unknown'], |
|
||||||
tagNames: (item.tags && item.tags.map((tag: serverApi.TagDetails) => { |
|
||||||
return tag.name; |
|
||||||
})) || [], |
|
||||||
storeLinks: (item.storeLinks && item.storeLinks.map((url: String) => { |
|
||||||
return { |
|
||||||
icon: getStoreIcon(url), |
|
||||||
url: url |
|
||||||
} |
|
||||||
})) || [], |
|
||||||
} |
|
||||||
} else if (serverApi.isArtistDetails(item)) { |
|
||||||
return { |
|
||||||
name: item.name ? item.name : "Unknown", |
|
||||||
tagNames: [], // TODO
|
|
||||||
storeLinks: (item.storeLinks && item.storeLinks.map((url: String) => { |
|
||||||
return { |
|
||||||
icon: getStoreIcon(url), |
|
||||||
url: url |
|
||||||
} |
|
||||||
})) || [], |
|
||||||
}; |
|
||||||
|
|
||||||
} |
|
||||||
return undefined; |
|
||||||
} |
|
||||||
|
|
||||||
interface IProps { |
|
||||||
items: Item[] |
|
||||||
} |
|
||||||
|
|
||||||
export default function BrowseWindow(props: IProps) { |
|
||||||
return <Paper> |
|
||||||
<ItemList> |
|
||||||
{props.items.map((item: Item) => { |
|
||||||
const di = toDisplayItem(item); |
|
||||||
return di && <DraggableItemListItem item={di} />; |
|
||||||
})} |
|
||||||
</ItemList> |
|
||||||
</Paper>; |
|
||||||
} |
|
||||||
@ -1,19 +0,0 @@ |
|||||||
import React from 'react'; |
|
||||||
import ItemListItem from './ItemListItem'; |
|
||||||
import { useDrag } from 'react-dnd'; |
|
||||||
import { dragTypes } from '../types/DragTypes'; |
|
||||||
|
|
||||||
export default function DraggableItemListItem(props: any) { |
|
||||||
const [ /*{ isDragging: boolean }*/ , drag] = useDrag({ |
|
||||||
item: { type: dragTypes.ListItem }, |
|
||||||
collect: (monitor: any) => ({ |
|
||||||
isDragging: !!monitor.isDragging(), |
|
||||||
}), |
|
||||||
}); |
|
||||||
|
|
||||||
return <div |
|
||||||
ref={drag} |
|
||||||
> |
|
||||||
<ItemListItem {...props} /> |
|
||||||
</div>; |
|
||||||
} |
|
||||||
@ -1,46 +0,0 @@ |
|||||||
import React from 'react'; |
|
||||||
import { Dialog, Grid, Typography, TextField, Button } from '@material-ui/core'; |
|
||||||
|
|
||||||
var cloneDeep = require('lodash/cloneDeep'); |
|
||||||
|
|
||||||
export interface ArtistProperties { |
|
||||||
name: String, |
|
||||||
} |
|
||||||
|
|
||||||
export interface IProps { |
|
||||||
dialogOpen: boolean, |
|
||||||
onClose?: () => void, |
|
||||||
onChangeArtistProperties?: (props: ArtistProperties) => void, |
|
||||||
artistProperties: ArtistProperties, |
|
||||||
onSubmit?: () => void, |
|
||||||
} |
|
||||||
|
|
||||||
export default function EditArtistDialog(props: IProps) { |
|
||||||
const onNameChange = (name: String) => { |
|
||||||
if (props.onChangeArtistProperties) { |
|
||||||
const p = cloneDeep(props.artistProperties); |
|
||||||
p.name = name; |
|
||||||
props.onChangeArtistProperties(p); |
|
||||||
} |
|
||||||
}; |
|
||||||
|
|
||||||
return <Dialog |
|
||||||
open={props.dialogOpen} |
|
||||||
onClose={props.onClose} |
|
||||||
> |
|
||||||
<Typography variant='h6' gutterBottom> |
|
||||||
Artist Details |
|
||||||
</Typography> |
|
||||||
<Grid container spacing={3}> |
|
||||||
<Grid item xs={12}> |
|
||||||
<TextField |
|
||||||
label="Name" |
|
||||||
value={props.artistProperties.name} |
|
||||||
onChange={(i: any) => onNameChange(i.target.value)} |
|
||||||
fullWidth |
|
||||||
/> |
|
||||||
</Grid> |
|
||||||
</Grid> |
|
||||||
<Button variant="contained" onClick={props.onSubmit}>Submit</Button> |
|
||||||
</Dialog> |
|
||||||
} |
|
||||||
@ -1,85 +0,0 @@ |
|||||||
import React, { useState, useEffect } from 'react'; |
|
||||||
import { Dialog, Grid, Typography, TextField, Button } from '@material-ui/core'; |
|
||||||
import { Autocomplete } from '@material-ui/lab'; |
|
||||||
|
|
||||||
var cloneDeep = require('lodash/cloneDeep'); |
|
||||||
|
|
||||||
export interface SongProperties { |
|
||||||
title: String, |
|
||||||
artistId: Number | undefined, |
|
||||||
} |
|
||||||
|
|
||||||
export interface ArtistProperties { |
|
||||||
name: String, |
|
||||||
id: Number, |
|
||||||
} |
|
||||||
|
|
||||||
export interface IProps { |
|
||||||
dialogOpen: boolean, |
|
||||||
onClose?: () => void, |
|
||||||
onChangeSongProperties?: (props: SongProperties) => void, |
|
||||||
songProperties: SongProperties, |
|
||||||
onSubmit?: () => void, |
|
||||||
artists: ArtistProperties[], |
|
||||||
} |
|
||||||
|
|
||||||
export default function EditSongDialog(props: IProps) { |
|
||||||
const onTitleChange = (title: String) => { |
|
||||||
if (props.onChangeSongProperties) { |
|
||||||
const p = cloneDeep(props.songProperties); |
|
||||||
p.title = title; |
|
||||||
props.onChangeSongProperties(p); |
|
||||||
} |
|
||||||
}; |
|
||||||
const onArtistChange = (artist: Number | undefined) => { |
|
||||||
if (props.onChangeSongProperties) { |
|
||||||
const p = cloneDeep(props.songProperties); |
|
||||||
p.artistId = artist; |
|
||||||
props.onChangeSongProperties(p); |
|
||||||
} |
|
||||||
}; |
|
||||||
|
|
||||||
return <Dialog |
|
||||||
open={props.dialogOpen} |
|
||||||
onClose={props.onClose} |
|
||||||
> |
|
||||||
<Typography variant='h6' gutterBottom> |
|
||||||
Song Details |
|
||||||
</Typography> |
|
||||||
<Grid container spacing={3}> |
|
||||||
<Grid item xs={12}> |
|
||||||
<TextField |
|
||||||
label="Song Title" |
|
||||||
value={props.songProperties.title} |
|
||||||
onChange={(i: any) => onTitleChange(i.target.value)} |
|
||||||
fullWidth |
|
||||||
/> |
|
||||||
</Grid> |
|
||||||
<Grid item xs={12}> |
|
||||||
{ // TODO: this autocomplete is not controlled but does send updates to the parent
|
|
||||||
// right away. In other words, there is no way to affect its value from outside
|
|
||||||
// the dialog.
|
|
||||||
} |
|
||||||
<Autocomplete |
|
||||||
options={props.artists} |
|
||||||
getOptionLabel={(option) => option.name as string} |
|
||||||
onChange={(event, newValue) => { |
|
||||||
if(newValue) { |
|
||||||
onArtistChange(newValue.id); |
|
||||||
} else { |
|
||||||
onArtistChange(undefined); |
|
||||||
} |
|
||||||
}} |
|
||||||
renderInput={ |
|
||||||
(params) => |
|
||||||
<TextField {...params} |
|
||||||
label="Artist" |
|
||||||
fullWidth |
|
||||||
/> |
|
||||||
} |
|
||||||
/> |
|
||||||
</Grid> |
|
||||||
</Grid> |
|
||||||
<Button variant="contained" onClick={props.onSubmit}>Submit</Button> |
|
||||||
</Dialog> |
|
||||||
} |
|
||||||
@ -1,189 +0,0 @@ |
|||||||
import React from 'react'; |
|
||||||
|
|
||||||
import { |
|
||||||
TextField, |
|
||||||
Paper, |
|
||||||
Select, |
|
||||||
MenuItem, |
|
||||||
Typography |
|
||||||
} from '@material-ui/core'; |
|
||||||
|
|
||||||
import { |
|
||||||
TitleQuery, |
|
||||||
ArtistQuery, |
|
||||||
isTitleQuery, |
|
||||||
isArtistQuery, |
|
||||||
Query, |
|
||||||
isAndQuery, |
|
||||||
isOrQuery, |
|
||||||
QueryKeys, |
|
||||||
} from '../types/Query'; |
|
||||||
|
|
||||||
interface TitleFilterControlProps { |
|
||||||
query: TitleQuery, |
|
||||||
onChangeQuery: (q: Query) => void, |
|
||||||
} |
|
||||||
function TitleFilterControl(props: TitleFilterControlProps) { |
|
||||||
return <TextField |
|
||||||
label="Title" |
|
||||||
value={props.query[QueryKeys.TitleLike]} |
|
||||||
onChange={(i: any) => props.onChangeQuery({ |
|
||||||
[QueryKeys.TitleLike]: i.target.value |
|
||||||
})} |
|
||||||
/> |
|
||||||
} |
|
||||||
|
|
||||||
interface ArtistFilterControlProps { |
|
||||||
query: ArtistQuery, |
|
||||||
onChangeQuery: (q: Query) => void, |
|
||||||
} |
|
||||||
function ArtistFilterControl(props: ArtistFilterControlProps) { |
|
||||||
return <TextField |
|
||||||
label="Name" |
|
||||||
value={props.query[QueryKeys.ArtistLike]} |
|
||||||
onChange={(i: any) => props.onChangeQuery({ |
|
||||||
[QueryKeys.ArtistLike]: i.target.value |
|
||||||
})} |
|
||||||
/> |
|
||||||
} |
|
||||||
|
|
||||||
interface AndNodeControlProps { |
|
||||||
query: any, |
|
||||||
onChangeQuery: (q: Query) => void, |
|
||||||
} |
|
||||||
function AndNodeControl(props: AndNodeControlProps) { |
|
||||||
const onChangeSubQuery = (a: Query, b: Query) => { |
|
||||||
props.onChangeQuery({ |
|
||||||
[QueryKeys.AndQuerySignature]: true, |
|
||||||
[QueryKeys.OperandA]: a, |
|
||||||
[QueryKeys.OperandB]: b |
|
||||||
}); |
|
||||||
} |
|
||||||
|
|
||||||
return <Paper> |
|
||||||
{props.query && isAndQuery(props.query) && <> |
|
||||||
<Typography>And</Typography> |
|
||||||
<FilterControl query={props.query.a} onChangeQuery={(q: Query) => { onChangeSubQuery(q, props.query.b); }} /> |
|
||||||
<FilterControl query={props.query.b} onChangeQuery={(q: Query) => { onChangeSubQuery(props.query.a, q); }} /> |
|
||||||
</>} |
|
||||||
</Paper>; |
|
||||||
} |
|
||||||
|
|
||||||
interface OrNodeControlProps { |
|
||||||
query: any, |
|
||||||
onChangeQuery: (q: Query) => void, |
|
||||||
} |
|
||||||
function OrNodeControl(props: OrNodeControlProps) { |
|
||||||
const onChangeSubQuery = (a: Query, b: Query) => { |
|
||||||
props.onChangeQuery({ |
|
||||||
[QueryKeys.OrQuerySignature]: true, |
|
||||||
[QueryKeys.OperandA]: a, |
|
||||||
[QueryKeys.OperandB]: b |
|
||||||
}); |
|
||||||
} |
|
||||||
|
|
||||||
return <Paper> |
|
||||||
{props.query && isOrQuery(props.query) && <> |
|
||||||
<Typography>Or</Typography> |
|
||||||
<FilterControl query={props.query.a} onChangeQuery={(q: Query) => { onChangeSubQuery(q, props.query.b); }} /> |
|
||||||
<FilterControl query={props.query.b} onChangeQuery={(q: Query) => { onChangeSubQuery(props.query.a, q); }} /> |
|
||||||
</>} |
|
||||||
</Paper>; |
|
||||||
} |
|
||||||
|
|
||||||
export interface IProps { |
|
||||||
query: Query | undefined, |
|
||||||
onChangeQuery: (query: Query) => void, |
|
||||||
} |
|
||||||
|
|
||||||
export function FilterControlLeaf(props: IProps) { |
|
||||||
const selectTypeOptions: string[] = ['Title', 'Artist']; |
|
||||||
const selectTypeOption: string = (props.query && isTitleQuery(props.query) && 'Title') || |
|
||||||
(props.query && isArtistQuery(props.query) && 'Artist') || |
|
||||||
"Unknown"; |
|
||||||
|
|
||||||
const selectInsertOptions: string[] = ['And', 'Or']; |
|
||||||
|
|
||||||
const handleQueryOnChange = (event: any) => { |
|
||||||
switch (event.target.value) { |
|
||||||
case 'Title': { |
|
||||||
props.onChangeQuery({ |
|
||||||
[QueryKeys.TitleLike]: '' |
|
||||||
}) |
|
||||||
break; |
|
||||||
} |
|
||||||
case 'Artist': { |
|
||||||
props.onChangeQuery({ |
|
||||||
[QueryKeys.ArtistLike]: '' |
|
||||||
}) |
|
||||||
break; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const handleInsertElem = (event: any) => { |
|
||||||
switch (event.target.value) { |
|
||||||
case 'And': { |
|
||||||
props.onChangeQuery({ |
|
||||||
[QueryKeys.AndQuerySignature]: true, |
|
||||||
[QueryKeys.OperandA]: props.query || { [QueryKeys.TitleLike]: '' }, |
|
||||||
[QueryKeys.OperandB]: { |
|
||||||
[QueryKeys.TitleLike]: '' |
|
||||||
} |
|
||||||
}) |
|
||||||
break; |
|
||||||
} |
|
||||||
case 'Or': { |
|
||||||
props.onChangeQuery({ |
|
||||||
[QueryKeys.OrQuerySignature]: true, |
|
||||||
[QueryKeys.OperandA]: props.query || { [QueryKeys.TitleLike]: '' }, |
|
||||||
[QueryKeys.OperandB]: { |
|
||||||
[QueryKeys.TitleLike]: '' |
|
||||||
} |
|
||||||
}) |
|
||||||
break; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
return <Paper> |
|
||||||
{/* The selector for inserting another element here. */} |
|
||||||
<Select |
|
||||||
onChange={handleInsertElem} |
|
||||||
> |
|
||||||
{selectInsertOptions.map((option: string) => { |
|
||||||
return <MenuItem value={option}>{option}</MenuItem> |
|
||||||
})} |
|
||||||
</Select> |
|
||||||
{/* The selector for the type of filter element. */} |
|
||||||
<Select |
|
||||||
value={selectTypeOption} |
|
||||||
onChange={handleQueryOnChange} |
|
||||||
> |
|
||||||
{selectTypeOptions.map((option: string) => { |
|
||||||
return <MenuItem value={option}>{option}</MenuItem> |
|
||||||
})} |
|
||||||
</Select> |
|
||||||
{props.query && isTitleQuery(props.query) && <TitleFilterControl query={props.query} onChangeQuery={props.onChangeQuery} />} |
|
||||||
{props.query && isArtistQuery(props.query) && <ArtistFilterControl query={props.query} onChangeQuery={props.onChangeQuery} />} |
|
||||||
</Paper>; |
|
||||||
} |
|
||||||
|
|
||||||
export function FilterControlNode(props: IProps) { |
|
||||||
return <> |
|
||||||
{props.query && isAndQuery(props.query) && <AndNodeControl {...props} />} |
|
||||||
{props.query && isOrQuery(props.query) && <OrNodeControl {...props} />} |
|
||||||
</>; |
|
||||||
} |
|
||||||
|
|
||||||
export default function FilterControl(props: IProps) { |
|
||||||
const isLeaf = (query: Query | undefined) => { |
|
||||||
return query && (isTitleQuery(query) || isArtistQuery(query)); |
|
||||||
} |
|
||||||
const isNode = (query: Query | undefined) => !isLeaf(query); |
|
||||||
|
|
||||||
return <> |
|
||||||
{isLeaf(props.query) && <FilterControlLeaf {...props} />} |
|
||||||
{isNode(props.query) && <FilterControlNode {...props} />} |
|
||||||
</> |
|
||||||
} |
|
||||||
@ -1,24 +0,0 @@ |
|||||||
import React from 'react'; |
|
||||||
import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'; |
|
||||||
import List from '@material-ui/core/List'; |
|
||||||
|
|
||||||
const useStyles = makeStyles((theme: Theme) => |
|
||||||
createStyles({ |
|
||||||
root: { |
|
||||||
flexGrow: 1, |
|
||||||
maxWidth: 752, |
|
||||||
}, |
|
||||||
}), |
|
||||||
); |
|
||||||
|
|
||||||
export default function ItemList(props:any) { |
|
||||||
const classes = useStyles(); |
|
||||||
|
|
||||||
return ( |
|
||||||
<div className={classes.root}> |
|
||||||
<List dense={true}> |
|
||||||
{props.children} |
|
||||||
</List> |
|
||||||
</div> |
|
||||||
); |
|
||||||
} |
|
||||||
@ -1,18 +0,0 @@ |
|||||||
import React, { useEffect } from 'react'; |
|
||||||
import ItemListItem from './ItemListItem'; |
|
||||||
import { ArtistDisplayItem, LoadingArtistDisplayItem } from '../types/DisplayItem'; |
|
||||||
|
|
||||||
export interface IProps { |
|
||||||
getDetails: () => Promise<ArtistDisplayItem> |
|
||||||
} |
|
||||||
|
|
||||||
export default function ItemListArtistItem(props: IProps) { |
|
||||||
const [ artist, setArtist ] = React.useState<ArtistDisplayItem | LoadingArtistDisplayItem>({ loadingArtist: true }); |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
props.getDetails() |
|
||||||
.then((details:ArtistDisplayItem) => { setArtist(details); }); |
|
||||||
}); |
|
||||||
|
|
||||||
return <ItemListItem item={artist}/> |
|
||||||
} |
|
||||||
@ -1,19 +0,0 @@ |
|||||||
import React from 'react'; |
|
||||||
import { DisplayItem, isSong, isLoadingSong, isArtist, isLoadingArtist } from '../types/DisplayItem'; |
|
||||||
import ItemListLoadedSongItem from './ItemListLoadedSongItem'; |
|
||||||
import ItemListLoadingSongItem from './ItemListLoadingSongItem'; |
|
||||||
import ItemListLoadedArtistItem from './ItemListLoadedArtistItem'; |
|
||||||
import ItemListLoadingArtistItem from './ItemListLoadingArtistItem'; |
|
||||||
|
|
||||||
export interface IProps { |
|
||||||
item: DisplayItem |
|
||||||
} |
|
||||||
|
|
||||||
export default function ItemListItem(props: IProps) { |
|
||||||
return <> |
|
||||||
{isSong(props.item) && <ItemListLoadedSongItem item={props.item}/>} |
|
||||||
{isLoadingSong(props.item) && <ItemListLoadingSongItem item={props.item}/>} |
|
||||||
{isArtist(props.item) && <ItemListLoadedArtistItem item={props.item}/>} |
|
||||||
{isLoadingArtist(props.item) && <ItemListLoadingArtistItem item={props.item}/>} |
|
||||||
</> |
|
||||||
} |
|
||||||
@ -1,35 +0,0 @@ |
|||||||
import React from 'react'; |
|
||||||
import ListItem from '@material-ui/core/ListItem'; |
|
||||||
import ListItemIcon from '@material-ui/core/ListItemIcon'; |
|
||||||
import ListItemText from '@material-ui/core/ListItemText'; |
|
||||||
import GroupIcon from '@material-ui/icons/Group'; |
|
||||||
import Chip from '@material-ui/core/Chip'; |
|
||||||
|
|
||||||
import { ArtistDisplayItem } from '../types/DisplayItem'; |
|
||||||
|
|
||||||
export interface IProps { |
|
||||||
item: ArtistDisplayItem |
|
||||||
} |
|
||||||
|
|
||||||
export default function ItemListLoadedArtistItem(props: IProps) { |
|
||||||
return ( |
|
||||||
<ListItem> |
|
||||||
<ListItemIcon> |
|
||||||
<GroupIcon /> |
|
||||||
</ListItemIcon> |
|
||||||
<ListItemText |
|
||||||
primary={props.item.name} |
|
||||||
/> |
|
||||||
{props.item.tagNames.map((tag: any) => { |
|
||||||
return <Chip label={tag}/> |
|
||||||
})} |
|
||||||
{props.item.storeLinks.map((link: any) => { |
|
||||||
return <a href={link.url} target="_blank" rel="noopener noreferrer"> |
|
||||||
<ListItemIcon> |
|
||||||
{link.icon} |
|
||||||
</ListItemIcon> |
|
||||||
</a>; |
|
||||||
})} |
|
||||||
</ListItem> |
|
||||||
); |
|
||||||
} |
|
||||||
@ -1,41 +0,0 @@ |
|||||||
import React from 'react'; |
|
||||||
import ListItem from '@material-ui/core/ListItem'; |
|
||||||
import ListItemIcon from '@material-ui/core/ListItemIcon'; |
|
||||||
import ListItemText from '@material-ui/core/ListItemText'; |
|
||||||
import MusicNoteIcon from '@material-ui/icons/MusicNote'; |
|
||||||
import Chip from '@material-ui/core/Chip'; |
|
||||||
|
|
||||||
import { SongDisplayItem } from '../types/DisplayItem'; |
|
||||||
|
|
||||||
export interface IProps { |
|
||||||
item: SongDisplayItem |
|
||||||
} |
|
||||||
|
|
||||||
export default function ItemListLoadedSongItem(props: IProps) { |
|
||||||
var artists = props.item.artistNames.length ? props.item.artistNames[0] : "Unknown"; |
|
||||||
for (var i: number = 1; i < props.item.artistNames.length; i++) { |
|
||||||
artists = artists.concat(", " + props.item.artistNames[i]); |
|
||||||
} |
|
||||||
|
|
||||||
return ( |
|
||||||
<ListItem> |
|
||||||
<ListItemIcon> |
|
||||||
<MusicNoteIcon /> |
|
||||||
</ListItemIcon> |
|
||||||
<ListItemText |
|
||||||
primary={props.item.title} |
|
||||||
secondary={artists} |
|
||||||
/> |
|
||||||
{props.item.tagNames.map((tag: any) => { |
|
||||||
return <Chip label={tag}/> |
|
||||||
})} |
|
||||||
{props.item.storeLinks.map((link: any) => { |
|
||||||
return <a href={link.url} target="_blank" rel="noopener noreferrer"> |
|
||||||
<ListItemIcon> |
|
||||||
{link.icon} |
|
||||||
</ListItemIcon> |
|
||||||
</a>; |
|
||||||
})} |
|
||||||
</ListItem> |
|
||||||
); |
|
||||||
} |
|
||||||
@ -1,22 +0,0 @@ |
|||||||
import React from 'react'; |
|
||||||
import ListItem from '@material-ui/core/ListItem'; |
|
||||||
import ListItemIcon from '@material-ui/core/ListItemIcon'; |
|
||||||
import GroupIcon from '@material-ui/icons/Group'; |
|
||||||
import CircularProgress from '@material-ui/core/CircularProgress'; |
|
||||||
|
|
||||||
import { LoadingArtistDisplayItem } from '../types/DisplayItem'; |
|
||||||
|
|
||||||
export interface IProps { |
|
||||||
item: LoadingArtistDisplayItem |
|
||||||
} |
|
||||||
|
|
||||||
export default function ItemListLoadingArtistItem(props: IProps) { |
|
||||||
return ( |
|
||||||
<ListItem> |
|
||||||
<ListItemIcon> |
|
||||||
<GroupIcon /> |
|
||||||
</ListItemIcon> |
|
||||||
<CircularProgress size={24}/> |
|
||||||
</ListItem> |
|
||||||
); |
|
||||||
} |
|
||||||
@ -1,22 +0,0 @@ |
|||||||
import React from 'react'; |
|
||||||
import ListItem from '@material-ui/core/ListItem'; |
|
||||||
import ListItemIcon from '@material-ui/core/ListItemIcon'; |
|
||||||
import MusicNoteIcon from '@material-ui/icons/MusicNote'; |
|
||||||
import CircularProgress from '@material-ui/core/CircularProgress'; |
|
||||||
|
|
||||||
import { LoadingSongDisplayItem } from '../types/DisplayItem'; |
|
||||||
|
|
||||||
export interface IProps { |
|
||||||
item: LoadingSongDisplayItem |
|
||||||
} |
|
||||||
|
|
||||||
export default function ItemListLoadingSongItem(props: IProps) { |
|
||||||
return ( |
|
||||||
<ListItem> |
|
||||||
<ListItemIcon> |
|
||||||
<MusicNoteIcon /> |
|
||||||
</ListItemIcon> |
|
||||||
<CircularProgress size={24}/> |
|
||||||
</ListItem> |
|
||||||
); |
|
||||||
} |
|
||||||
@ -1,18 +0,0 @@ |
|||||||
import React, { useEffect } from 'react'; |
|
||||||
import ItemListItem from './ItemListItem'; |
|
||||||
import { SongDisplayItem, LoadingSongDisplayItem } from '../types/DisplayItem'; |
|
||||||
|
|
||||||
export interface IProps { |
|
||||||
getDetails: () => Promise<SongDisplayItem> |
|
||||||
} |
|
||||||
|
|
||||||
export default function ItemListSongItem(props: IProps) { |
|
||||||
const [ song, setSong ] = React.useState<SongDisplayItem | LoadingSongDisplayItem>({ loadingSong: true }); |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
props.getDetails() |
|
||||||
.then((details:SongDisplayItem) => { setSong(details); }); |
|
||||||
}); |
|
||||||
|
|
||||||
return <ItemListItem item={song}/> |
|
||||||
} |
|
||||||
@ -1,198 +0,0 @@ |
|||||||
import React, { useState, useEffect } from 'react'; |
|
||||||
|
|
||||||
import { Query, toApiQuery, QueryOrdering, TypesIncluded, QueryKeys, OrderKey } from '../types/Query'; |
|
||||||
import FilterControl from './FilterControl'; |
|
||||||
import * as serverApi from '../api'; |
|
||||||
import BrowseWindow, { Item } from './BrowseWindow'; |
|
||||||
import { FormControl, FormLabel, FormGroup, FormControlLabel, Checkbox, Select, MenuItem } from '@material-ui/core'; |
|
||||||
|
|
||||||
const _ = require('lodash'); |
|
||||||
|
|
||||||
interface ItemTypeCheckboxesProps { |
|
||||||
types: TypesIncluded, |
|
||||||
onChange: (types: TypesIncluded) => void; |
|
||||||
} |
|
||||||
|
|
||||||
function ItemTypeCheckboxes(props: ItemTypeCheckboxesProps) { |
|
||||||
const songChange = (v: any) => { |
|
||||||
props.onChange({ |
|
||||||
[QueryKeys.Songs]: v.target.checked, |
|
||||||
[QueryKeys.Artists]: props.types[QueryKeys.Artists], |
|
||||||
[QueryKeys.Tags]: props.types[QueryKeys.Tags] |
|
||||||
}); |
|
||||||
} |
|
||||||
const artistChange = (v: any) => { |
|
||||||
props.onChange({ |
|
||||||
[QueryKeys.Songs]: props.types[QueryKeys.Songs], |
|
||||||
[QueryKeys.Artists]: v.target.checked, |
|
||||||
[QueryKeys.Tags]: props.types[QueryKeys.Tags] |
|
||||||
}); |
|
||||||
} |
|
||||||
const tagChange = (v: any) => { |
|
||||||
props.onChange({ |
|
||||||
[QueryKeys.Songs]: props.types[QueryKeys.Songs], |
|
||||||
[QueryKeys.Artists]: props.types[QueryKeys.Artists], |
|
||||||
[QueryKeys.Tags]: v.target.checked |
|
||||||
}); |
|
||||||
} |
|
||||||
|
|
||||||
return <FormControl component='fieldset'> |
|
||||||
<FormLabel component='legend'>Result types</FormLabel> |
|
||||||
<FormGroup> |
|
||||||
<FormControlLabel |
|
||||||
control={<Checkbox checked={props.types[QueryKeys.Songs]} onChange={songChange} name='Songs' />} |
|
||||||
label="Songs" |
|
||||||
/> |
|
||||||
<FormControlLabel |
|
||||||
control={<Checkbox checked={props.types[QueryKeys.Artists]} onChange={artistChange} name='Artists' />} |
|
||||||
label="Artists" |
|
||||||
/> |
|
||||||
<FormControlLabel |
|
||||||
control={<Checkbox checked={props.types[QueryKeys.Tags]} onChange={tagChange} name='Tags' />} |
|
||||||
label="Tags" |
|
||||||
/> |
|
||||||
</FormGroup> |
|
||||||
</FormControl>; |
|
||||||
} |
|
||||||
|
|
||||||
interface OrderingWidgetProps { |
|
||||||
ordering: QueryOrdering, |
|
||||||
onChange: (o: QueryOrdering) => void; |
|
||||||
} |
|
||||||
|
|
||||||
function OrderingWidget(props: OrderingWidgetProps) { |
|
||||||
const onTypeChange = (e: any) => { |
|
||||||
props.onChange({ |
|
||||||
[QueryKeys.OrderBy]: { |
|
||||||
[QueryKeys.OrderKey]: e.target.value, |
|
||||||
}, |
|
||||||
[QueryKeys.Ascending]: props.ordering[QueryKeys.Ascending], |
|
||||||
}); |
|
||||||
} |
|
||||||
const onAscendingChange = (e: any) => { |
|
||||||
props.onChange({ |
|
||||||
[QueryKeys.OrderBy]: props.ordering[QueryKeys.OrderBy], |
|
||||||
[QueryKeys.Ascending]: (e.target.value === 'asc'), |
|
||||||
}); |
|
||||||
} |
|
||||||
|
|
||||||
return <FormControl component='fieldset'> |
|
||||||
<FormLabel component='legend'>Ordering</FormLabel> |
|
||||||
<FormGroup> |
|
||||||
<Select |
|
||||||
onChange={onTypeChange} |
|
||||||
value={props.ordering[QueryKeys.OrderBy][QueryKeys.OrderKey]} |
|
||||||
> |
|
||||||
<MenuItem value={OrderKey.Name}>Name</MenuItem> |
|
||||||
</Select> |
|
||||||
<Select |
|
||||||
onChange={onAscendingChange} |
|
||||||
value={props.ordering[QueryKeys.Ascending] ? 'asc' : 'desc'} |
|
||||||
> |
|
||||||
<MenuItem value={'asc'}>Ascending</MenuItem> |
|
||||||
<MenuItem value={'desc'}>Descending</MenuItem> |
|
||||||
</Select> |
|
||||||
</FormGroup> |
|
||||||
</FormControl>; |
|
||||||
} |
|
||||||
|
|
||||||
function toServerOrdering(o: QueryOrdering | undefined): serverApi.Ordering { |
|
||||||
if (!o) { |
|
||||||
return { |
|
||||||
orderBy: { |
|
||||||
type: serverApi.OrderByType.Name |
|
||||||
}, |
|
||||||
ascending: true |
|
||||||
}; |
|
||||||
} |
|
||||||
|
|
||||||
const keys = { |
|
||||||
[OrderKey.Name]: serverApi.OrderByType.Name, |
|
||||||
}; |
|
||||||
|
|
||||||
return { |
|
||||||
orderBy: { |
|
||||||
type: keys[o[QueryKeys.OrderBy][QueryKeys.OrderKey]] |
|
||||||
}, |
|
||||||
ascending: o[QueryKeys.Ascending], |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
export interface IProps { |
|
||||||
query: Query | undefined, |
|
||||||
typesIncluded: TypesIncluded | undefined, |
|
||||||
resultOrder: QueryOrdering | undefined, |
|
||||||
onQueryChange: (q: Query) => void, |
|
||||||
onTypesChange: (t: TypesIncluded) => void, |
|
||||||
onOrderChange: (o: QueryOrdering) => void, |
|
||||||
} |
|
||||||
|
|
||||||
export default function QueryBrowseWindow(props: IProps) { |
|
||||||
const [songs, setSongs] = useState<serverApi.SongDetails[]>([]); |
|
||||||
const [artists, setArtists] = useState<serverApi.ArtistDetails[]>([]); |
|
||||||
//const [tags, setTags] = useState<serverApi.TagDetails[]>([]);
|
|
||||||
|
|
||||||
var items: Item[] = []; |
|
||||||
props.typesIncluded && props.typesIncluded[QueryKeys.Songs] && items.push(...songs); |
|
||||||
props.typesIncluded && props.typesIncluded[QueryKeys.Artists] && items.push(...artists); |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
if (!props.query) { return; } |
|
||||||
const q = _.cloneDeep(props.query); |
|
||||||
const r = _.cloneDeep(props.resultOrder); |
|
||||||
const t = _.cloneDeep(props.typesIncluded); |
|
||||||
|
|
||||||
const request: serverApi.QueryRequest = { |
|
||||||
query: toApiQuery(props.query), |
|
||||||
offsetsLimits: { |
|
||||||
songOffset: 0, |
|
||||||
songLimit: 5, // TODO
|
|
||||||
artistOffset: 0, |
|
||||||
artistLimit: 5, |
|
||||||
tagOffset: 0, |
|
||||||
tagLimit: 5, |
|
||||||
}, |
|
||||||
ordering: toServerOrdering(props.resultOrder), |
|
||||||
} |
|
||||||
const requestOpts = { |
|
||||||
method: 'POST', |
|
||||||
headers: { 'Content-Type': 'application/json' }, |
|
||||||
body: JSON.stringify(request) |
|
||||||
}; |
|
||||||
fetch((process.env.REACT_APP_BACKEND || "") + serverApi.QueryEndpoint, requestOpts) |
|
||||||
.then((response: any) => response.json()) |
|
||||||
.then((json: any) => { |
|
||||||
const match = _.isEqual(q, props.query) && _.isEqual(r, props.resultOrder) && _.isEqual(t, props.typesIncluded); |
|
||||||
'songs' in json && match && setSongs(json.songs); |
|
||||||
'artists' in json && match && setArtists(json.artists); |
|
||||||
}); |
|
||||||
}, [ props.query, props.resultOrder, props.typesIncluded ]); |
|
||||||
|
|
||||||
return <> |
|
||||||
<FormControl component='fieldset'> |
|
||||||
<FormLabel component='legend'>Query</FormLabel> |
|
||||||
<FilterControl |
|
||||||
query={props.query} |
|
||||||
onChangeQuery={props.onQueryChange} |
|
||||||
/> |
|
||||||
</FormControl> |
|
||||||
<ItemTypeCheckboxes |
|
||||||
types={props.typesIncluded || { |
|
||||||
[QueryKeys.Songs]: true, |
|
||||||
[QueryKeys.Artists]: true, |
|
||||||
[QueryKeys.Tags]: true, |
|
||||||
}} |
|
||||||
onChange={props.onTypesChange} |
|
||||||
/> |
|
||||||
<OrderingWidget |
|
||||||
ordering={props.resultOrder || { |
|
||||||
[QueryKeys.OrderBy]: { |
|
||||||
[QueryKeys.OrderKey]: OrderKey.Name |
|
||||||
}, |
|
||||||
[QueryKeys.Ascending]: true |
|
||||||
}} |
|
||||||
onChange={props.onOrderChange} |
|
||||||
/> |
|
||||||
<BrowseWindow items={items} /> |
|
||||||
</> |
|
||||||
} |
|
||||||
@ -0,0 +1,178 @@ |
|||||||
|
import React, { useState, useEffect } from 'react'; |
||||||
|
import { ThemeProvider, CssBaseline, createMuiTheme, AppBar, Box } from '@material-ui/core'; |
||||||
|
import { QueryElem, toApiQuery } from '../lib/query/Query'; |
||||||
|
import QueryBuilder from './querybuilder/QueryBuilder'; |
||||||
|
import * as serverApi from '../api'; |
||||||
|
import { SongTable } from './tables/ResultsTable'; |
||||||
|
import stringifyList from '../lib/stringifyList'; |
||||||
|
var _ = require('lodash'); |
||||||
|
|
||||||
|
const darkTheme = createMuiTheme({ |
||||||
|
palette: { |
||||||
|
type: 'dark' |
||||||
|
}, |
||||||
|
}); |
||||||
|
|
||||||
|
export async function getArtists(filter: string) { |
||||||
|
const query = filter.length > 0 ? { |
||||||
|
prop: serverApi.QueryElemProperty.artistName, |
||||||
|
propOperand: filter, |
||||||
|
propOperator: serverApi.QueryFilterOp.Like, |
||||||
|
} : {}; |
||||||
|
|
||||||
|
var q: serverApi.QueryRequest = { |
||||||
|
query: query, |
||||||
|
offsetsLimits: { |
||||||
|
artistOffset: 0, |
||||||
|
artistLimit: 100, |
||||||
|
}, |
||||||
|
ordering: { |
||||||
|
orderBy: { |
||||||
|
type: serverApi.OrderByType.Name, |
||||||
|
}, |
||||||
|
ascending: true, |
||||||
|
}, |
||||||
|
}; |
||||||
|
|
||||||
|
const requestOpts = { |
||||||
|
method: 'POST', |
||||||
|
headers: { 'Content-Type': 'application/json' }, |
||||||
|
body: JSON.stringify(q), |
||||||
|
}; |
||||||
|
|
||||||
|
return (async () => { |
||||||
|
const response = await fetch((process.env.REACT_APP_BACKEND || "") + serverApi.QueryEndpoint, requestOpts) |
||||||
|
let json: any = await response.json(); |
||||||
|
const names: string[] = json.artists.map((elem: any) => { return elem.name; }); |
||||||
|
return [...new Set(names)]; |
||||||
|
})(); |
||||||
|
} |
||||||
|
|
||||||
|
export async function getSongTitles(filter: string) { |
||||||
|
const query = filter.length > 0 ? { |
||||||
|
prop: serverApi.QueryElemProperty.songTitle, |
||||||
|
propOperand: filter, |
||||||
|
propOperator: serverApi.QueryFilterOp.Like, |
||||||
|
} : {}; |
||||||
|
|
||||||
|
var q: serverApi.QueryRequest = { |
||||||
|
query: query, |
||||||
|
offsetsLimits: { |
||||||
|
songOffset: 0, |
||||||
|
songLimit: 100, |
||||||
|
}, |
||||||
|
ordering: { |
||||||
|
orderBy: { |
||||||
|
type: serverApi.OrderByType.Name, |
||||||
|
}, |
||||||
|
ascending: true, |
||||||
|
}, |
||||||
|
}; |
||||||
|
|
||||||
|
const requestOpts = { |
||||||
|
method: 'POST', |
||||||
|
headers: { 'Content-Type': 'application/json' }, |
||||||
|
body: JSON.stringify(q), |
||||||
|
}; |
||||||
|
|
||||||
|
return (async () => { |
||||||
|
const response = await fetch((process.env.REACT_APP_BACKEND || "") + serverApi.QueryEndpoint, requestOpts) |
||||||
|
let json: any = await response.json(); |
||||||
|
const titles: string[] = json.songs.map((elem: any) => { return elem.title; }); |
||||||
|
return [...new Set(titles)]; |
||||||
|
})(); |
||||||
|
} |
||||||
|
|
||||||
|
export default function Window(props: any) { |
||||||
|
interface ResultsFor { |
||||||
|
for: QueryElem, |
||||||
|
results: any[], |
||||||
|
}; |
||||||
|
|
||||||
|
const [query, setQuery] = useState<QueryElem | null>(null); |
||||||
|
const [resultsFor, setResultsFor] = useState<ResultsFor | null>(null); |
||||||
|
|
||||||
|
const loading = query && (!resultsFor || !_.isEqual(resultsFor.for, query)); |
||||||
|
const showResults = (query && resultsFor && query == resultsFor.for) ? resultsFor.results : []; |
||||||
|
|
||||||
|
const songGetters = { |
||||||
|
getTitle: (song: any) => song.title, |
||||||
|
getArtist: (song: any) => stringifyList(song.artists, (a: any) => a.name), |
||||||
|
getAlbum: (song: any) => stringifyList(song.albums, (a: any) => a.name), |
||||||
|
} |
||||||
|
|
||||||
|
const doQuery = async (_query: QueryElem) => {
|
||||||
|
var q: serverApi.QueryRequest = { |
||||||
|
query: toApiQuery(_query), |
||||||
|
offsetsLimits: { |
||||||
|
songOffset: 0, |
||||||
|
songLimit: 100, |
||||||
|
}, |
||||||
|
ordering: { |
||||||
|
orderBy: { |
||||||
|
type: serverApi.OrderByType.Name, |
||||||
|
}, |
||||||
|
ascending: true, |
||||||
|
}, |
||||||
|
}; |
||||||
|
|
||||||
|
const requestOpts = { |
||||||
|
method: 'POST', |
||||||
|
headers: { 'Content-Type': 'application/json' }, |
||||||
|
body: JSON.stringify(q), |
||||||
|
}; |
||||||
|
|
||||||
|
return (async () => { |
||||||
|
const response = await fetch((process.env.REACT_APP_BACKEND || "") + serverApi.QueryEndpoint, requestOpts) |
||||||
|
let json: any = await response.json(); |
||||||
|
if(_.isEqual(query, _query)) { |
||||||
|
setResultsFor({ |
||||||
|
for: _query, |
||||||
|
results: json.songs, |
||||||
|
}) |
||||||
|
} |
||||||
|
})(); |
||||||
|
} |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (query) { |
||||||
|
doQuery(query); |
||||||
|
} else { |
||||||
|
setResultsFor(null); |
||||||
|
} |
||||||
|
}, [query]); |
||||||
|
|
||||||
|
return <ThemeProvider theme={darkTheme}> |
||||||
|
<CssBaseline /> |
||||||
|
<AppBar position="static" style={{ background: 'grey' }}> |
||||||
|
<Box m={0.5} display="flex" alignItems="center"> |
||||||
|
<img height="30px" src={process.env.PUBLIC_URL + "/logo.svg"} alt="error"></img> |
||||||
|
</Box> |
||||||
|
</AppBar> |
||||||
|
<Box width="100%" justifyContent="center" display="flex" flexWrap="wrap"> |
||||||
|
<Box |
||||||
|
m={1} |
||||||
|
width="80%" |
||||||
|
> |
||||||
|
<QueryBuilder |
||||||
|
query={query} |
||||||
|
onChangeQuery={setQuery} |
||||||
|
requestFunctions={{ |
||||||
|
getArtists: getArtists, |
||||||
|
getSongTitles: getSongTitles, |
||||||
|
}} |
||||||
|
/> |
||||||
|
</Box> |
||||||
|
<Box |
||||||
|
m={1} |
||||||
|
width="80%" |
||||||
|
> |
||||||
|
<SongTable |
||||||
|
songs={showResults} |
||||||
|
songGetters={songGetters} |
||||||
|
/> |
||||||
|
</Box> |
||||||
|
</Box> |
||||||
|
|
||||||
|
</ThemeProvider> |
||||||
|
} |
||||||
@ -0,0 +1,63 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import { Menu, MenuItem } from '@material-ui/core'; |
||||||
|
import NestedMenuItem from "material-ui-nested-menu-item"; |
||||||
|
import { QueryElem, QueryLeafBy, QueryLeafOp } from '../../lib/query/Query'; |
||||||
|
import QBSelectWithRequest from './QBSelectWithRequest'; |
||||||
|
import { Requests } from './QueryBuilder'; |
||||||
|
|
||||||
|
export interface MenuProps { |
||||||
|
anchorEl: null | HTMLElement, |
||||||
|
onClose: () => void, |
||||||
|
onCreateQuery: (q: QueryElem) => void, |
||||||
|
requestFunctions: Requests, |
||||||
|
} |
||||||
|
|
||||||
|
export function QBAddElemMenu(props: MenuProps) { |
||||||
|
let anchorEl = props.anchorEl; |
||||||
|
let onClose = props.onClose; |
||||||
|
|
||||||
|
return <Menu |
||||||
|
anchorEl={anchorEl} |
||||||
|
keepMounted |
||||||
|
open={Boolean(anchorEl)} |
||||||
|
onClose={onClose} |
||||||
|
> |
||||||
|
<MenuItem disabled={true}>New query element</MenuItem> |
||||||
|
<NestedMenuItem |
||||||
|
label="Song" |
||||||
|
parentMenuOpen={Boolean(anchorEl)} |
||||||
|
> |
||||||
|
<QBSelectWithRequest |
||||||
|
label="Title" |
||||||
|
getNewOptions={props.requestFunctions.getSongTitles} |
||||||
|
onSubmit={(s: string, exact: boolean) => { |
||||||
|
onClose(); |
||||||
|
props.onCreateQuery({ |
||||||
|
a: QueryLeafBy.SongTitle, |
||||||
|
leafOp: exact ? QueryLeafOp.Equals : QueryLeafOp.Like, |
||||||
|
b: s |
||||||
|
}); |
||||||
|
}} |
||||||
|
style={{ width: 300 }} |
||||||
|
/> |
||||||
|
</NestedMenuItem> |
||||||
|
<NestedMenuItem |
||||||
|
label="Artist" |
||||||
|
parentMenuOpen={Boolean(anchorEl)} |
||||||
|
> |
||||||
|
<QBSelectWithRequest |
||||||
|
label="Name" |
||||||
|
getNewOptions={props.requestFunctions.getArtists} |
||||||
|
onSubmit={(s: string, exact: boolean) => { |
||||||
|
onClose(); |
||||||
|
props.onCreateQuery({ |
||||||
|
a: QueryLeafBy.ArtistName, |
||||||
|
leafOp: exact ? QueryLeafOp.Equals : QueryLeafOp.Like, |
||||||
|
b: s |
||||||
|
}); |
||||||
|
}} |
||||||
|
style={{ width: 300 }} |
||||||
|
/> |
||||||
|
</NestedMenuItem> |
||||||
|
</Menu > |
||||||
|
} |
||||||
@ -0,0 +1,16 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import { Box, Paper } from '@material-ui/core'; |
||||||
|
|
||||||
|
export default function QBAndBlock(props: any) { |
||||||
|
return <Paper elevation={3}> |
||||||
|
<Box display="flex" flexDirection="column" alignItems="center"> |
||||||
|
<Box m={0.5} /> |
||||||
|
{props.children.map((child: any, idx: number) => { |
||||||
|
return <Box m={0.5} key={idx}> |
||||||
|
{child} |
||||||
|
</Box> |
||||||
|
})} |
||||||
|
<Box m={0.5} /> |
||||||
|
</Box> |
||||||
|
</Paper> |
||||||
|
} |
||||||
@ -0,0 +1,15 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import { IconButton } from '@material-ui/core'; |
||||||
|
import SearchIcon from '@material-ui/icons/Search'; |
||||||
|
import CheckIcon from '@material-ui/icons/Check'; |
||||||
|
|
||||||
|
export interface IProps { |
||||||
|
editing: boolean |
||||||
|
} |
||||||
|
|
||||||
|
export default function QBEditButton(props: any) { |
||||||
|
return <IconButton {...props}> |
||||||
|
{(!props.editing) && <SearchIcon style={{ fontSize: 80 }} />} |
||||||
|
{(props.editing) && <CheckIcon style={{ fontSize: 80 }} />} |
||||||
|
</IconButton> |
||||||
|
} |
||||||
@ -0,0 +1,122 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import { QueryLeafElem, QueryLeafBy, QueryLeafOp, QueryElem } from '../../lib/query/Query'; |
||||||
|
import { Chip, Typography, IconButton, Box } from '@material-ui/core'; |
||||||
|
import { QBPlaceholder } from './QBPlaceholder'; |
||||||
|
import DeleteIcon from '@material-ui/icons/Delete'; |
||||||
|
import { Requests } from './QueryBuilder'; |
||||||
|
|
||||||
|
export interface ElemChipProps { |
||||||
|
label: any, |
||||||
|
extraElements?: any, |
||||||
|
} |
||||||
|
|
||||||
|
export function LabeledElemChip(props: ElemChipProps) { |
||||||
|
const label = <Box display="flex" alignItems="center"> |
||||||
|
<Typography>{props.label}</Typography> |
||||||
|
{props.extraElements} |
||||||
|
</Box> |
||||||
|
return <Chip label={label} /> |
||||||
|
} |
||||||
|
|
||||||
|
export interface LeafProps { |
||||||
|
elem: QueryLeafElem, |
||||||
|
onReplace: (q: QueryElem) => void, |
||||||
|
extraElements?: any, |
||||||
|
} |
||||||
|
|
||||||
|
export function QBQueryElemArtistEquals(props: LeafProps) { |
||||||
|
return <LabeledElemChip |
||||||
|
label={"By " + props.elem.b} |
||||||
|
extraElements={props.extraElements} |
||||||
|
/> |
||||||
|
} |
||||||
|
|
||||||
|
export function QBQueryElemArtistLike(props: LeafProps) { |
||||||
|
return <LabeledElemChip label={"Artist like \"" + props.elem.b + "\""} |
||||||
|
extraElements={props.extraElements} |
||||||
|
/> |
||||||
|
} |
||||||
|
|
||||||
|
export function QBQueryElemTitleEquals(props: LeafProps) { |
||||||
|
return <LabeledElemChip |
||||||
|
label={"\"" + props.elem.b + "\""} |
||||||
|
extraElements={props.extraElements} |
||||||
|
/> |
||||||
|
} |
||||||
|
|
||||||
|
export function QBQueryElemTitleLike(props: LeafProps) { |
||||||
|
return <LabeledElemChip |
||||||
|
label={"Title like \"" + props.elem.b + "\""} |
||||||
|
extraElements={props.extraElements} |
||||||
|
/> |
||||||
|
} |
||||||
|
|
||||||
|
export interface DeleteButtonProps { |
||||||
|
onClick?: (e: any) => void, |
||||||
|
} |
||||||
|
|
||||||
|
export function QBQueryElemDeleteButton(props: DeleteButtonProps) { |
||||||
|
return <IconButton |
||||||
|
onClick={props.onClick} |
||||||
|
disableRipple={true} |
||||||
|
size="small" |
||||||
|
> |
||||||
|
<DeleteIcon /> |
||||||
|
</IconButton> |
||||||
|
} |
||||||
|
|
||||||
|
export interface IProps { |
||||||
|
elem: QueryLeafElem, |
||||||
|
onReplace: (q: QueryElem | null) => void, |
||||||
|
editingQuery: boolean, |
||||||
|
requestFunctions: Requests, |
||||||
|
} |
||||||
|
|
||||||
|
export function QBLeafElem(props: IProps) { |
||||||
|
let e = props.elem; |
||||||
|
|
||||||
|
const extraElements = props.editingQuery ? |
||||||
|
<Box m={0.5}> |
||||||
|
<QBQueryElemDeleteButton |
||||||
|
onClick={() => props.onReplace(null)} |
||||||
|
/> |
||||||
|
</Box> |
||||||
|
: undefined; |
||||||
|
|
||||||
|
if (e.a == QueryLeafBy.ArtistName && |
||||||
|
e.leafOp == QueryLeafOp.Equals && |
||||||
|
typeof e.b == "string") { |
||||||
|
return <QBQueryElemArtistEquals |
||||||
|
{...props} |
||||||
|
extraElements={extraElements} |
||||||
|
/> |
||||||
|
} else if (e.a == QueryLeafBy.ArtistName && |
||||||
|
e.leafOp == QueryLeafOp.Like && |
||||||
|
typeof e.b == "string") { |
||||||
|
return <QBQueryElemArtistLike |
||||||
|
{...props} |
||||||
|
extraElements={extraElements} |
||||||
|
/> |
||||||
|
} if (e.a == QueryLeafBy.SongTitle && |
||||||
|
e.leafOp == QueryLeafOp.Equals && |
||||||
|
typeof e.b == "string") { |
||||||
|
return <QBQueryElemTitleEquals |
||||||
|
{...props} |
||||||
|
extraElements={extraElements} |
||||||
|
/> |
||||||
|
} else if (e.a == QueryLeafBy.SongTitle && |
||||||
|
e.leafOp == QueryLeafOp.Like && |
||||||
|
typeof e.b == "string") { |
||||||
|
return <QBQueryElemTitleLike |
||||||
|
{...props} |
||||||
|
extraElements={extraElements} |
||||||
|
/> |
||||||
|
} else if (e.leafOp == QueryLeafOp.Placeholder) { |
||||||
|
return <QBPlaceholder |
||||||
|
onReplace={props.onReplace} |
||||||
|
requestFunctions={props.requestFunctions} |
||||||
|
/> |
||||||
|
} |
||||||
|
|
||||||
|
throw "Unsupported leaf element"; |
||||||
|
} |
||||||
@ -0,0 +1,47 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import QBOrBlock from './QBOrBlock'; |
||||||
|
import QBAndBlock from './QBAndBlock'; |
||||||
|
import { QueryNodeElem, QueryNodeOp, QueryElem, isNodeElem, simplify } from '../../lib/query/Query'; |
||||||
|
import { QBLeafElem } from './QBLeafElem'; |
||||||
|
import { QBQueryElem } from './QBQueryElem'; |
||||||
|
import { O_APPEND } from 'constants'; |
||||||
|
import { Requests } from './QueryBuilder'; |
||||||
|
|
||||||
|
export interface NodeProps { |
||||||
|
elem: QueryNodeElem, |
||||||
|
onReplace: (q: QueryElem | null) => void, |
||||||
|
editingQuery: boolean, |
||||||
|
requestFunctions: Requests, |
||||||
|
} |
||||||
|
|
||||||
|
export function QBNodeElem(props: NodeProps) { |
||||||
|
let e = props.elem; |
||||||
|
|
||||||
|
const onReplace = (idx: number, q: QueryElem | null) => { |
||||||
|
var ops = e.operands; |
||||||
|
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) => { |
||||||
|
return <QBQueryElem |
||||||
|
elem={o} |
||||||
|
onReplace={(q: QueryElem | null) => onReplace(idx, q)} |
||||||
|
editingQuery={props.editingQuery} |
||||||
|
requestFunctions={props.requestFunctions} |
||||||
|
/> |
||||||
|
}); |
||||||
|
|
||||||
|
if (e.nodeOp == QueryNodeOp.And) { |
||||||
|
return <QBAndBlock>{children}</QBAndBlock> |
||||||
|
} else if (e.nodeOp == QueryNodeOp.Or) { |
||||||
|
return <QBOrBlock>{children}</QBOrBlock> |
||||||
|
} |
||||||
|
|
||||||
|
throw "Unsupported node element"; |
||||||
|
} |
||||||
@ -0,0 +1,33 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import { Box, Typography } from '@material-ui/core'; |
||||||
|
|
||||||
|
export interface IProps { |
||||||
|
children: any, |
||||||
|
} |
||||||
|
|
||||||
|
export default function QBOrBlock(props: any) { |
||||||
|
const firstChild = Array.isArray(props.children) && props.children.length >= 1 ? |
||||||
|
props.children[0] : undefined; |
||||||
|
|
||||||
|
const otherChildren = Array.isArray(props.children) && props.children.length > 1 ? |
||||||
|
props.children.slice(1) : []; |
||||||
|
|
||||||
|
return <Box |
||||||
|
display="flex" |
||||||
|
alignItems="center" |
||||||
|
> |
||||||
|
<Box m={1}> |
||||||
|
{firstChild} |
||||||
|
</Box> |
||||||
|
{otherChildren.map((child: any, idx: number) => { |
||||||
|
return <Box display="flex" alignItems="center" key={idx}> |
||||||
|
<Box m={1}> |
||||||
|
<Typography variant="button">Or</Typography> |
||||||
|
</Box> |
||||||
|
<Box m={1}> |
||||||
|
{child} |
||||||
|
</Box> |
||||||
|
</Box>; |
||||||
|
})} |
||||||
|
</Box> |
||||||
|
} |
||||||
@ -0,0 +1,41 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import { Chip } from '@material-ui/core'; |
||||||
|
import { QBAddElemMenu } from './QBAddElemMenu'; |
||||||
|
import { QueryElem } from '../../lib/query/Query'; |
||||||
|
import { Requests } from './QueryBuilder'; |
||||||
|
|
||||||
|
export interface IProps { |
||||||
|
onReplace: (q: QueryElem) => void, |
||||||
|
requestFunctions: Requests, |
||||||
|
} |
||||||
|
|
||||||
|
export function QBPlaceholder(props: IProps & any) { |
||||||
|
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null); |
||||||
|
|
||||||
|
const onOpen = (event: any) => { |
||||||
|
setAnchorEl(event.currentTarget); |
||||||
|
}; |
||||||
|
const onClose = () => { |
||||||
|
setAnchorEl(null); |
||||||
|
}; |
||||||
|
const onCreate = (q: QueryElem) => { |
||||||
|
props.onReplace(q); |
||||||
|
}; |
||||||
|
|
||||||
|
return <> |
||||||
|
<Chip |
||||||
|
variant="outlined" |
||||||
|
label="" |
||||||
|
style={{ width: "50px" }} |
||||||
|
clickable={true} |
||||||
|
onClick={onOpen} |
||||||
|
component="div" |
||||||
|
/> |
||||||
|
<QBAddElemMenu |
||||||
|
anchorEl={anchorEl} |
||||||
|
onClose={onClose} |
||||||
|
onCreateQuery={onCreate} |
||||||
|
requestFunctions={props.requestFunctions} |
||||||
|
/> |
||||||
|
</> |
||||||
|
} |
||||||
@ -0,0 +1,34 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import { QueryLeafElem, QueryNodeElem, QueryElem, isLeafElem, isNodeElem } from '../../lib/query/Query'; |
||||||
|
import { QBLeafElem } from './QBLeafElem'; |
||||||
|
import { QBNodeElem } from './QBNodeElem'; |
||||||
|
import { Requests } from './QueryBuilder'; |
||||||
|
|
||||||
|
export interface IProps { |
||||||
|
elem: QueryLeafElem | QueryNodeElem, |
||||||
|
onReplace: (q: QueryElem | null) => void, |
||||||
|
editingQuery: boolean, |
||||||
|
requestFunctions: Requests, |
||||||
|
} |
||||||
|
|
||||||
|
export function QBQueryElem(props: IProps) { |
||||||
|
let e = props.elem; |
||||||
|
|
||||||
|
if (isLeafElem(e)) { |
||||||
|
return <QBLeafElem |
||||||
|
elem={e} |
||||||
|
onReplace={props.onReplace} |
||||||
|
editingQuery={props.editingQuery} |
||||||
|
requestFunctions={props.requestFunctions} |
||||||
|
/> |
||||||
|
} else if (isNodeElem(e)) { |
||||||
|
return <QBNodeElem |
||||||
|
elem={e} |
||||||
|
onReplace={props.onReplace} |
||||||
|
editingQuery={props.editingQuery} |
||||||
|
requestFunctions={props.requestFunctions} |
||||||
|
/> |
||||||
|
} |
||||||
|
|
||||||
|
throw new Error("Unsupported query element"); |
||||||
|
} |
||||||
@ -0,0 +1,121 @@ |
|||||||
|
import React, { useState, useEffect } from 'react'; |
||||||
|
import TextField from '@material-ui/core/TextField'; |
||||||
|
import Autocomplete from '@material-ui/lab/Autocomplete'; |
||||||
|
import CircularProgress from '@material-ui/core/CircularProgress'; |
||||||
|
|
||||||
|
interface IProps { |
||||||
|
getNewOptions: (textInput: string) => Promise<string[]>, |
||||||
|
label: string, |
||||||
|
onSubmit: (s: string, exactMatch: boolean) => void, |
||||||
|
} |
||||||
|
|
||||||
|
// Autocompleted combo box which can make asynchronous requests
|
||||||
|
// to get new options.
|
||||||
|
// Based on Material UI example: https://material-ui.com/components/autocomplete/
|
||||||
|
export default function QBSelectWithRequest(props: IProps & any) { |
||||||
|
interface OptionsFor { |
||||||
|
forInput: string, |
||||||
|
options: string[], |
||||||
|
}; |
||||||
|
|
||||||
|
const [open, setOpen] = useState(false); |
||||||
|
const [options, setOptions] = useState<OptionsFor | null>(null); |
||||||
|
const [input, setInput] = useState<string>(""); |
||||||
|
|
||||||
|
const { getNewOptions, label, onSubmit, ...restProps } = props; |
||||||
|
|
||||||
|
const loading: boolean = !options || options.forInput !== input; |
||||||
|
|
||||||
|
const updateOptions = (forInput: string, options: any[]) => { |
||||||
|
if (forInput === input) { |
||||||
|
console.log("setting options."); |
||||||
|
setOptions({ |
||||||
|
forInput: forInput, |
||||||
|
options: options, |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const startRequest = (_input: string) => { |
||||||
|
console.log('starting req', _input); |
||||||
|
setInput(_input); |
||||||
|
(async () => { |
||||||
|
const newOptions = await getNewOptions(_input); |
||||||
|
console.log('new options', newOptions); |
||||||
|
updateOptions(_input, newOptions); |
||||||
|
})(); |
||||||
|
}; |
||||||
|
|
||||||
|
// // Ensure a new request is made whenever the loading option is enabled.
|
||||||
|
// useEffect(() => {
|
||||||
|
// startRequest(input);
|
||||||
|
// }, []);
|
||||||
|
|
||||||
|
// Ensure options are cleared whenever the element is closed.
|
||||||
|
// useEffect(() => {
|
||||||
|
// if (!open) {
|
||||||
|
// setOptions(null);
|
||||||
|
// }
|
||||||
|
// }, [open]);
|
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
startRequest(input); |
||||||
|
}, [input]); |
||||||
|
|
||||||
|
const onInputChange = (e: any, val: any, reason: any) => { |
||||||
|
if (reason === 'reset') { |
||||||
|
// User selected a preset option.
|
||||||
|
props.onSubmit(val, true); |
||||||
|
} else { |
||||||
|
// User changed text, start a new request.
|
||||||
|
setInput(val); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
console.log("Render props:", props); |
||||||
|
|
||||||
|
return ( |
||||||
|
<Autocomplete |
||||||
|
{...restProps} |
||||||
|
open={open} |
||||||
|
onOpen={() => { |
||||||
|
setOpen(true); |
||||||
|
}} |
||||||
|
onClose={() => { |
||||||
|
setOpen(false); |
||||||
|
}} |
||||||
|
getOptionSelected={(option, value) => option === value} |
||||||
|
getOptionLabel={(option) => option} |
||||||
|
options={options ? options.options : null} |
||||||
|
loading={loading} |
||||||
|
freeSolo={true} |
||||||
|
value={input} |
||||||
|
onInputChange={onInputChange} |
||||||
|
onKeyDown={(e: any) => { |
||||||
|
// Prevent the event from propagating, because
|
||||||
|
// that would trigger keyboard navigation of the menu.
|
||||||
|
e.stopPropagation(); |
||||||
|
if (e.key === 'Enter') { |
||||||
|
// User submitted free-form value.
|
||||||
|
props.onSubmit(input, options && options.options.includes(input)); |
||||||
|
} |
||||||
|
}} |
||||||
|
renderInput={(params) => ( |
||||||
|
<TextField |
||||||
|
{...params} |
||||||
|
label={label} |
||||||
|
variant="outlined" |
||||||
|
InputProps={{ |
||||||
|
...params.InputProps, |
||||||
|
endAdornment: ( |
||||||
|
<React.Fragment> |
||||||
|
{loading ? <CircularProgress color="inherit" size={20} /> : null} |
||||||
|
{params.InputProps.endAdornment} |
||||||
|
</React.Fragment> |
||||||
|
), |
||||||
|
}} |
||||||
|
/> |
||||||
|
)} |
||||||
|
/> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,50 @@ |
|||||||
|
import React, { useState } from 'react'; |
||||||
|
import { Box } from '@material-ui/core'; |
||||||
|
import QBQueryButton from './QBEditButton'; |
||||||
|
import { QBQueryElem } from './QBQueryElem'; |
||||||
|
import { QueryElem, addPlaceholders, removePlaceholders, simplify } from '../../lib/query/Query'; |
||||||
|
|
||||||
|
|
||||||
|
export interface Requests { |
||||||
|
getArtists: (filter: string) => Promise<string[]>, |
||||||
|
getSongTitles: (filter: string) => Promise<string[]>, |
||||||
|
} |
||||||
|
|
||||||
|
export interface IProps { |
||||||
|
query: QueryElem | null, |
||||||
|
onChangeQuery: (q: QueryElem | null) => void, |
||||||
|
requestFunctions: Requests, |
||||||
|
} |
||||||
|
|
||||||
|
export default function QueryBuilder(props: IProps) { |
||||||
|
const [editing, setEditing] = useState<boolean>(false); |
||||||
|
|
||||||
|
const simpleQuery = simplify(props.query); |
||||||
|
const showQuery = editing ? |
||||||
|
addPlaceholders(simpleQuery, null) : simpleQuery; |
||||||
|
|
||||||
|
const onReplace = (q: any) => { |
||||||
|
const newQ = removePlaceholders(q); |
||||||
|
setEditing(false); |
||||||
|
props.onChangeQuery(newQ); |
||||||
|
} |
||||||
|
|
||||||
|
return <> |
||||||
|
<Box display="flex" alignItems="center"> |
||||||
|
<Box m={2}> |
||||||
|
<QBQueryButton |
||||||
|
onClick={() => setEditing(!editing)} |
||||||
|
editing={editing} |
||||||
|
/> |
||||||
|
</Box> |
||||||
|
<Box m={2}> |
||||||
|
{showQuery && <QBQueryElem |
||||||
|
elem={showQuery} |
||||||
|
onReplace={onReplace} |
||||||
|
editingQuery={editing} |
||||||
|
requestFunctions={props.requestFunctions} |
||||||
|
/>} |
||||||
|
</Box> |
||||||
|
</Box> |
||||||
|
</> |
||||||
|
} |
||||||
@ -0,0 +1,49 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import { TableContainer, Table, TableHead, TableRow, TableCell, Paper, makeStyles, TableBody } from '@material-ui/core'; |
||||||
|
|
||||||
|
export interface SongGetters { |
||||||
|
getTitle: (song: any) => string, |
||||||
|
getArtist: (song: any) => string, |
||||||
|
getAlbum: (song: any) => string, |
||||||
|
} |
||||||
|
|
||||||
|
export interface IProps { |
||||||
|
songs: any[], |
||||||
|
songGetters: SongGetters, |
||||||
|
} |
||||||
|
|
||||||
|
export function SongTable(props: IProps) { |
||||||
|
const useTableStyles = makeStyles({ |
||||||
|
table: { |
||||||
|
minWidth: 650, |
||||||
|
}, |
||||||
|
}); |
||||||
|
const classes = useTableStyles(); |
||||||
|
|
||||||
|
return ( |
||||||
|
<TableContainer component={Paper}> |
||||||
|
<Table className={classes.table} aria-label="a dense table"> |
||||||
|
<TableHead> |
||||||
|
<TableRow> |
||||||
|
<TableCell align="left">Title</TableCell> |
||||||
|
<TableCell align="left">Artist</TableCell> |
||||||
|
<TableCell align="left">Album</TableCell> |
||||||
|
</TableRow> |
||||||
|
</TableHead> |
||||||
|
<TableBody> |
||||||
|
{props.songs.map((song:any) => { |
||||||
|
const title = props.songGetters.getTitle(song); |
||||||
|
const artist = props.songGetters.getArtist(song); |
||||||
|
const album = props.songGetters.getAlbum(song); |
||||||
|
|
||||||
|
return <TableRow key={title}> |
||||||
|
<TableCell align="left">{title}</TableCell> |
||||||
|
<TableCell align="left">{artist}</TableCell> |
||||||
|
<TableCell align="left">{album}</TableCell> |
||||||
|
</TableRow> |
||||||
|
})} |
||||||
|
</TableBody> |
||||||
|
</Table> |
||||||
|
</TableContainer> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,186 @@ |
|||||||
|
import * as serverApi from '../../api'; |
||||||
|
|
||||||
|
export enum QueryLeafBy { |
||||||
|
ArtistName = 0, |
||||||
|
AlbumName, |
||||||
|
TagName, |
||||||
|
SongTitle |
||||||
|
} |
||||||
|
|
||||||
|
export enum QueryLeafOp { |
||||||
|
Equals = 0, |
||||||
|
Like, |
||||||
|
Placeholder, // Special op which indicates that this leaf is not filled in yet.
|
||||||
|
} |
||||||
|
|
||||||
|
export type QueryLeafOperand = string | number; |
||||||
|
|
||||||
|
export interface QueryLeafElem { |
||||||
|
a: QueryLeafBy; |
||||||
|
leafOp: QueryLeafOp; |
||||||
|
b: QueryLeafOperand; |
||||||
|
}; |
||||||
|
export function isLeafElem(q: QueryElem): q is QueryLeafElem { |
||||||
|
return 'leafOp' in q; |
||||||
|
} |
||||||
|
|
||||||
|
export enum QueryNodeOp { |
||||||
|
And = 0, |
||||||
|
Or, |
||||||
|
} |
||||||
|
|
||||||
|
export interface QueryNodeElem { |
||||||
|
operands: QueryElem[]; |
||||||
|
nodeOp: QueryNodeOp; |
||||||
|
} |
||||||
|
export function isNodeElem(q: QueryElem): q is QueryNodeElem { |
||||||
|
return 'nodeOp' in q; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
export function queryOr(...args: QueryElem[]) { |
||||||
|
return { |
||||||
|
operands: args, |
||||||
|
nodeOp: QueryNodeOp.Or |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export function queryAnd(...args: QueryElem[]) { |
||||||
|
return { |
||||||
|
operands: args, |
||||||
|
nodeOp: QueryNodeOp.And |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
export type QueryElem = QueryLeafElem | QueryNodeElem; |
||||||
|
|
||||||
|
// Take a query and add placeholders. The placeholders are empty
|
||||||
|
// leaves. They should be placed so that all possible node combinations
|
||||||
|
// from the existing nodes could have an added combinational leaf.
|
||||||
|
// In other words: for AND/OR, this should result in a query that has
|
||||||
|
// placeholders for all AND/OR combinations with existing nodes.
|
||||||
|
export function addPlaceholders( |
||||||
|
q: QueryElem | null, |
||||||
|
inNode: null | QueryNodeOp.And | QueryNodeOp.Or, |
||||||
|
): QueryElem { |
||||||
|
|
||||||
|
const makePlaceholder = () => { |
||||||
|
return { |
||||||
|
a: 0, |
||||||
|
leafOp: QueryLeafOp.Placeholder, |
||||||
|
b: "" |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
const otherOp: Record<QueryNodeOp, QueryNodeOp> = { |
||||||
|
[QueryNodeOp.And]: QueryNodeOp.Or, |
||||||
|
[QueryNodeOp.Or]: QueryNodeOp.And, |
||||||
|
} |
||||||
|
|
||||||
|
if (q == null) { |
||||||
|
return makePlaceholder(); |
||||||
|
} else if (isNodeElem(q)) { |
||||||
|
var operands = q.operands.map((op: any, idx: number) => { |
||||||
|
return addPlaceholders(op, q.nodeOp); |
||||||
|
}); |
||||||
|
operands.push(makePlaceholder()); |
||||||
|
const newBlock = { operands: operands, nodeOp: q.nodeOp }; |
||||||
|
|
||||||
|
if (inNode == null) { |
||||||
|
return { operands: [newBlock, makePlaceholder()], nodeOp: otherOp[q.nodeOp] }; |
||||||
|
} else { |
||||||
|
return newBlock; |
||||||
|
} |
||||||
|
} else if (isLeafElem(q) && |
||||||
|
q.leafOp != QueryLeafOp.Placeholder && |
||||||
|
inNode !== null) { |
||||||
|
return { operands: [q, makePlaceholder()], nodeOp: otherOp[inNode] }; |
||||||
|
} else if (isLeafElem(q) && |
||||||
|
q.leafOp != QueryLeafOp.Placeholder && |
||||||
|
inNode === null) { |
||||||
|
return { |
||||||
|
operands: [ |
||||||
|
{ operands: [q, makePlaceholder()], nodeOp: QueryNodeOp.And }, |
||||||
|
makePlaceholder(), |
||||||
|
], nodeOp: QueryNodeOp.Or |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
return q; |
||||||
|
} |
||||||
|
|
||||||
|
// See addPlaceholders.
|
||||||
|
export function removePlaceholders(q: QueryElem | null): QueryElem | null { |
||||||
|
if (q && isNodeElem(q)) { |
||||||
|
var newOperands: QueryElem[] = []; |
||||||
|
|
||||||
|
q.operands.forEach((op: any) => { |
||||||
|
if (isLeafElem(op) && op.leafOp == QueryLeafOp.Placeholder) { |
||||||
|
return; |
||||||
|
} |
||||||
|
const newOp = removePlaceholders(op); |
||||||
|
if (newOp) { |
||||||
|
newOperands.push(newOp); |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
if (newOperands.length == 0) { |
||||||
|
return null; |
||||||
|
} |
||||||
|
if (newOperands.length == 1) { |
||||||
|
return newOperands[0]; |
||||||
|
} |
||||||
|
return { operands: newOperands, nodeOp: q.nodeOp }; |
||||||
|
} else if (q && isLeafElem(q) && q.leafOp == QueryLeafOp.Placeholder) { |
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
return q; |
||||||
|
} |
||||||
|
|
||||||
|
export function simplify(q: QueryElem | null): QueryElem | null { |
||||||
|
if (q && isNodeElem(q)) { |
||||||
|
var newOperands: QueryElem[] = []; |
||||||
|
q.operands.forEach((o: QueryElem) => { |
||||||
|
const s = simplify(o); |
||||||
|
if (s !== null) { newOperands.push(s); } |
||||||
|
}) |
||||||
|
if (newOperands.length === 0) { return null; } |
||||||
|
if (newOperands.length === 1) { return newOperands[0]; } |
||||||
|
return { operands: newOperands, nodeOp: q.nodeOp }; |
||||||
|
} |
||||||
|
|
||||||
|
return q; |
||||||
|
} |
||||||
|
|
||||||
|
export function toApiQuery(q: QueryElem) : serverApi.Query { |
||||||
|
const propsMapping: any = { |
||||||
|
[QueryLeafBy.SongTitle]: serverApi.QueryElemProperty.songTitle, |
||||||
|
[QueryLeafBy.ArtistName]: serverApi.QueryElemProperty.artistName, |
||||||
|
} |
||||||
|
const leafOpsMapping: any = { |
||||||
|
[QueryLeafOp.Equals]: serverApi.QueryFilterOp.Eq, |
||||||
|
[QueryLeafOp.Like]: serverApi.QueryFilterOp.Like, |
||||||
|
} |
||||||
|
const nodeOpsMapping: any = { |
||||||
|
[QueryNodeOp.And]: serverApi.QueryElemOp.And, |
||||||
|
[QueryNodeOp.Or]: serverApi.QueryElemOp.Or, |
||||||
|
} |
||||||
|
|
||||||
|
if(isLeafElem(q)) { |
||||||
|
const r: serverApi.QueryElem = { |
||||||
|
prop: propsMapping[q.a], |
||||||
|
propOperator: leafOpsMapping[q.leafOp], |
||||||
|
propOperand: q.b, |
||||||
|
} |
||||||
|
return r; |
||||||
|
} else if(isNodeElem(q)) { |
||||||
|
const r = { |
||||||
|
children: q.operands.map((op: any) => toApiQuery(op)), |
||||||
|
childrenOperator: nodeOpsMapping[q.nodeOp] |
||||||
|
} |
||||||
|
return r; |
||||||
|
} |
||||||
|
|
||||||
|
return {}; |
||||||
|
} |
||||||
@ -0,0 +1,13 @@ |
|||||||
|
export default function stringifyList( |
||||||
|
s: any[], |
||||||
|
stringifyElem?: (e: any) => string, |
||||||
|
) { |
||||||
|
const stringify = stringifyElem || ((e: any) => e); |
||||||
|
var r = ""; |
||||||
|
if (s.length > 0) { r += stringify(s[0]) } |
||||||
|
for (let i = 1; i < s.length; i++) { |
||||||
|
r += ", " + stringify(s[i]); |
||||||
|
} |
||||||
|
|
||||||
|
return r; |
||||||
|
} |
||||||
@ -1,44 +0,0 @@ |
|||||||
export interface SongDisplayItem { |
|
||||||
title:String, |
|
||||||
artistNames:String[], |
|
||||||
tagNames:String[], |
|
||||||
storeLinks: { |
|
||||||
icon: JSX.Element, |
|
||||||
url: String, |
|
||||||
}[] |
|
||||||
} |
|
||||||
|
|
||||||
export interface LoadingSongDisplayItem { |
|
||||||
loadingSong: boolean, |
|
||||||
} |
|
||||||
|
|
||||||
export interface ArtistDisplayItem { |
|
||||||
name:String, |
|
||||||
tagNames:String[], |
|
||||||
storeLinks: { |
|
||||||
icon: JSX.Element, |
|
||||||
url: String, |
|
||||||
}[] |
|
||||||
} |
|
||||||
|
|
||||||
export interface LoadingArtistDisplayItem { |
|
||||||
loadingArtist: boolean, |
|
||||||
} |
|
||||||
|
|
||||||
export type DisplayItem = SongDisplayItem | LoadingSongDisplayItem | ArtistDisplayItem | LoadingArtistDisplayItem; |
|
||||||
|
|
||||||
export function isSong(item: DisplayItem): item is SongDisplayItem { |
|
||||||
return "title" in item; |
|
||||||
} |
|
||||||
|
|
||||||
export function isLoadingSong(item: DisplayItem): item is LoadingSongDisplayItem { |
|
||||||
return "loadingSong" in item; |
|
||||||
} |
|
||||||
|
|
||||||
export function isArtist(item: DisplayItem): item is ArtistDisplayItem { |
|
||||||
return "name" in item; |
|
||||||
} |
|
||||||
|
|
||||||
export function isLoadingArtist(item: DisplayItem): item is LoadingArtistDisplayItem { |
|
||||||
return "loadingArtist" in item; |
|
||||||
} |
|
||||||
@ -1,3 +0,0 @@ |
|||||||
export const dragTypes = { |
|
||||||
ListItem: 'list item' |
|
||||||
} |
|
||||||
@ -1,129 +0,0 @@ |
|||||||
import { QueryElemProperty, QueryFilterOp, QueryElemOp } from '../api'; |
|
||||||
|
|
||||||
export enum QueryKeys { |
|
||||||
TitleLike = 'tl', |
|
||||||
ArtistLike = 'al', |
|
||||||
AndQuerySignature = 'and', |
|
||||||
OrQuerySignature = 'or', |
|
||||||
OperandA = 'a', |
|
||||||
OperandB = 'b', |
|
||||||
Name = 'n', |
|
||||||
ArtistRanking = 'an', |
|
||||||
TagRanking = 'tn', |
|
||||||
Songs = 's', |
|
||||||
Artists = 'at', |
|
||||||
Tags = 't', |
|
||||||
OrderBy = 'ob', |
|
||||||
OrderKey = 'ok', |
|
||||||
Ascending = 'asc' |
|
||||||
} |
|
||||||
|
|
||||||
export interface TitleQuery { |
|
||||||
[QueryKeys.TitleLike]: String |
|
||||||
}; |
|
||||||
export function isTitleQuery(q: Query): q is TitleQuery { |
|
||||||
return QueryKeys.TitleLike in q; |
|
||||||
} |
|
||||||
export function TitleToApiQuery(q: TitleQuery) { |
|
||||||
return { |
|
||||||
'prop': QueryElemProperty.songTitle, |
|
||||||
'propOperand': '%' + q[QueryKeys.TitleLike] + '%', |
|
||||||
'propOperator': QueryFilterOp.Like, |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
export interface ArtistQuery { |
|
||||||
[QueryKeys.ArtistLike]: String |
|
||||||
}; |
|
||||||
export function isArtistQuery(q: Query): q is ArtistQuery { |
|
||||||
return QueryKeys.ArtistLike in q; |
|
||||||
} |
|
||||||
export function ArtistToApiQuery(q: ArtistQuery) { |
|
||||||
return { |
|
||||||
'prop': QueryElemProperty.artistName, |
|
||||||
'propOperand': '%' + q[QueryKeys.ArtistLike] + '%', |
|
||||||
'propOperator': QueryFilterOp.Like, |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
export interface AndQuery<T> { |
|
||||||
[QueryKeys.AndQuerySignature]: any, |
|
||||||
[QueryKeys.OperandA]: T, |
|
||||||
[QueryKeys.OperandB]: T, |
|
||||||
} |
|
||||||
export function isAndQuery(q: Query): q is AndQuery<Query> { |
|
||||||
return QueryKeys.AndQuerySignature in q; |
|
||||||
} |
|
||||||
export function AndToApiQuery(q: AndQuery<Query>) { |
|
||||||
return { |
|
||||||
'childrenOperator': QueryElemOp.And, |
|
||||||
'children': [ |
|
||||||
toApiQuery(q.a), |
|
||||||
toApiQuery(q.b), |
|
||||||
] |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
export interface OrQuery<T> { |
|
||||||
[QueryKeys.OrQuerySignature]: any, |
|
||||||
[QueryKeys.OperandA]: T, |
|
||||||
[QueryKeys.OperandB]: T, |
|
||||||
} |
|
||||||
export function isOrQuery(q: Query): q is OrQuery<Query> { |
|
||||||
return QueryKeys.OrQuerySignature in q; |
|
||||||
} |
|
||||||
export function OrToApiQuery(q: OrQuery<Query>) { |
|
||||||
return { |
|
||||||
'childrenOperator': QueryElemOp.Or, |
|
||||||
'children': [ |
|
||||||
toApiQuery(q.a), |
|
||||||
toApiQuery(q.b), |
|
||||||
] |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
export type Query = TitleQuery | ArtistQuery | AndQuery<Query> | OrQuery<Query>; |
|
||||||
|
|
||||||
export enum OrderKey { |
|
||||||
Name = 'n', |
|
||||||
} |
|
||||||
|
|
||||||
export interface QueryOrdering { |
|
||||||
[QueryKeys.OrderBy]: { |
|
||||||
[QueryKeys.OrderKey]: OrderKey, |
|
||||||
} |
|
||||||
[QueryKeys.Ascending]: boolean, |
|
||||||
} |
|
||||||
|
|
||||||
export interface TypesIncluded { |
|
||||||
[QueryKeys.Songs]: boolean, |
|
||||||
[QueryKeys.Artists]: boolean, |
|
||||||
[QueryKeys.Tags]: boolean, |
|
||||||
} |
|
||||||
|
|
||||||
export function isQuery(q: any): q is Query { |
|
||||||
return q != null && |
|
||||||
(isTitleQuery(q) || isArtistQuery(q) || isAndQuery(q) || isOrQuery(q)); |
|
||||||
} |
|
||||||
|
|
||||||
export function isQueryOrdering(q: any): q is QueryOrdering { |
|
||||||
return q != null && |
|
||||||
QueryKeys.OrderBy in q && |
|
||||||
QueryKeys.OrderKey in q[QueryKeys.OrderBy] && |
|
||||||
QueryKeys.Ascending in q; |
|
||||||
} |
|
||||||
|
|
||||||
export function isTypesIncluded(q: any): q is TypesIncluded { |
|
||||||
return q != null && |
|
||||||
QueryKeys.Songs in q && |
|
||||||
QueryKeys.Artists in q && |
|
||||||
QueryKeys.Tags in q; |
|
||||||
} |
|
||||||
|
|
||||||
export function toApiQuery(q: Query): any { |
|
||||||
return (isTitleQuery(q) && TitleToApiQuery(q)) || |
|
||||||
(isArtistQuery(q) && ArtistToApiQuery(q)) || |
|
||||||
(isAndQuery(q) && AndToApiQuery(q)) || |
|
||||||
(isOrQuery(q) && OrToApiQuery(q)) || |
|
||||||
{}; |
|
||||||
} |
|
||||||
|
After Width: | Height: | Size: 9.7 KiB |
|
After Width: | Height: | Size: 11 KiB |
Loading…
Reference in new issue