From d104aa7358d1528cde260294d77d79ccde1c7936 Mon Sep 17 00:00:00 2001 From: Sander Vocke Date: Tue, 28 Jan 2020 12:52:59 +0100 Subject: [PATCH] Got editing working for const and logical op filters. --- src/database.js | 1 - src/map.js | 1 + src/queries.js | 3 +- src/userquerywidget.js | 223 ++++++++++++++++++++++++++++++++++++----- 4 files changed, 201 insertions(+), 27 deletions(-) create mode 100644 src/map.js diff --git a/src/database.js b/src/database.js index 5ca43be..57d72cb 100644 --- a/src/database.js +++ b/src/database.js @@ -16,7 +16,6 @@ export function alasql_async_queries(alasql_object, queries) { var p = Promise.resolve(null); for (let i = 0; i < queries.length; i++) { p = p.then(() => { - console.log(queries[i]); return alasql_object.promise(queries[i]); }); } diff --git a/src/map.js b/src/map.js new file mode 100644 index 0000000..20c492e --- /dev/null +++ b/src/map.js @@ -0,0 +1 @@ +// TODO https://leafletjs.com/examples/quick-start/ \ No newline at end of file diff --git a/src/queries.js b/src/queries.js index ac8c7db..551456e 100644 --- a/src/queries.js +++ b/src/queries.js @@ -219,7 +219,8 @@ export class UserQuery { // This query will return database entries with the fields "id", "uniqueHash", "relativePath" (of the album) and "name" for each matching image. export function image_query_with_where(maybe_where) { - return "SELECT Images.id, Images.name, Images.uniqueHash, Albums.relativePath FROM Images INNER JOIN Albums ON Images.album=Albums.id LEFT JOIN ImageTags ON Images.id=ImageTags.imageid LEFT JOIN Tags ON ImageTags.tagid=Tags.id " + (maybe_where ? maybe_where : "" + " GROUP BY id;"); + return "SELECT Images.id, Images.name, Images.uniqueHash, Albums.relativePath FROM Images INNER JOIN Albums ON Images.album=Albums.id LEFT JOIN ImageTags ON Images.id=ImageTags.imageid LEFT JOIN Tags ON ImageTags.tagid=Tags.id " + (maybe_where ? maybe_where : "" + ";"); + // TODO: GROUP BY is not working for some reason. } // This query will return database entries with the fields "id" and "relativePath" for each matching album. diff --git a/src/userquerywidget.js b/src/userquerywidget.js index 5d9011d..76c82e2 100644 --- a/src/userquerywidget.js +++ b/src/userquerywidget.js @@ -1,13 +1,19 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import Switch from '@material-ui/core/Switch'; import Box from '@material-ui/core/Box'; import FormControlLabel from '@material-ui/core/FormControlLabel'; +import FormControl from '@material-ui/core/FormControl'; import Button from '@material-ui/core/Button'; import LabelIcon from '@material-ui/icons/Label'; import ImportContactsIcon from '@material-ui/icons/ImportContacts'; import PhotoIcon from '@material-ui/icons/Photo'; import SearchIcon from '@material-ui/icons/Search'; +import Menu from '@material-ui/core/Menu'; +import MenuItem from '@material-ui/core/MenuItem'; +import DialogTitle from '@material-ui/core/DialogTitle'; +import Dialog from '@material-ui/core/Dialog'; +import Select from '@material-ui/core/Select'; import { makeStyles } from '@material-ui/core/styles'; @@ -40,14 +46,110 @@ const useStyles = makeStyles(theme => ({ }, })); +export function EditConstFilterExpression(props) { + const { onChange, filter } = props; + + var _ = require('lodash'); + + function handleResultToggled() { + var newfilter = _.cloneDeep(filter); + newfilter.constval = !filter.constval; + onChange(newfilter); + } + + return ( + + } + label={filter.constval ? "TRUE" : "FALSE"} + /> + ); +} + +export function EditLogicalOperatorFilterExpression(props) { + const { onChange, filter } = props; + + var _ = require('lodash'); + const id = _.uniqueId("logic_op_"); + const labelid = _.uniqueId("logic_op_label_"); + + function handleChange(e) { + console.log("changing to value: ", e.target.value); + var newfilter = _.cloneDeep(filter); + newfilter.operator = e.target.value; + onChange(newfilter); + } + + return ( + + + + ); +} + +export function EditFilterExpressionDialog(props) { + const classes = useStyles(); + const { onClose, startingFilter, open } = props; + const [filter, setFilter] = React.useState(startingFilter); + + useEffect(() => { + setFilter(startingFilter); + }, [startingFilter]); + + const handleClose = () => { + onClose(filter); + }; + + var _ = require('lodash'); + const id = _.uniqueId("simple_dialog_title_"); + + var control = <>; + var subprops = { + onChange: setFilter, + filter: filter, + }; + if (filter instanceof ConstFilter) { + control = + } else if (filter instanceof LogicalOperatorFilter) { + control = + }/* else if (expr instanceof MatchingFilter) { + filter_elem = + }*/ + + return ( + + Edit expression + {control} + + + ); +} + export function TagEqualsExpressionControl(props) { const classes = useStyles(); - const { name } = props; + const { name, onClick } = props; return ( <> @@ -57,12 +159,14 @@ export function TagEqualsExpressionControl(props) { export function AlbumEqualsExpressionControl(props) { const classes = useStyles(); - const { name } = props; + const { name, onClick } = props; return ( <> @@ -72,12 +176,14 @@ export function AlbumEqualsExpressionControl(props) { export function ImageNameEqualsExpressionControl(props) { const classes = useStyles(); - const { name } = props; + const { name, onClick } = props; return ( <> @@ -87,12 +193,14 @@ export function ImageNameEqualsExpressionControl(props) { export function ImageNameNaturalMatchExpressionControl(props) { const classes = useStyles(); - const { name } = props; + const { name, onClick } = props; return ( <> @@ -102,23 +210,23 @@ export function ImageNameNaturalMatchExpressionControl(props) { export function MatchingFilterExpressionControl(props) { const classes = useStyles(); - const { expr } = props; + const { expr, onClick } = props; var pretty_name = expr.match_from .replace(/^"/g, '') .replace(/"$/g, ''); if (expr.match_type === MatchTypeEnum.MATCH_TAG_EQUALS) { - return + return } else if (expr.match_type === MatchTypeEnum.MATCH_ALBUM_EQUALS) { - return + return } else if (expr.match_type === MatchTypeEnum.MATCH_ALBUM_EQUALS_OR_CHILD) { - return + return } else if (expr.match_type === MatchTypeEnum.MATCH_IMAGE_NAME_EQUALS) { - return + return } else if (expr.match_type === MatchTypeEnum.MATCH_IMAGE_NAME_NATURAL) { - return + return } else if (expr.match_type === MatchTypeEnum.MATCH_ALBUM_NAME_EQUALS) { - return + return } throw new Error('Cannot render matching filter control: unsupported type.'); @@ -126,7 +234,7 @@ export function MatchingFilterExpressionControl(props) { export function LogicalOperatorFilterExpressionControl(props) { const classes = useStyles(); - const { expr } = props; + const { expr, onClick, onChange } = props; var opstring = ""; if (expr.operator === LogicalOperatorEnum.AND) { @@ -135,24 +243,39 @@ export function LogicalOperatorFilterExpressionControl(props) { opstring = " OR "; } + var _ = require('lodash'); + const handleAChanged = (new_a) => { + var new_me = _.cloneDeep(expr); + new_me.sub_filter_a = new_a; + onChange(new_me); + } + const handleBChanged = (new_b) => { + var new_me = _.cloneDeep(expr); + new_me.sub_filter_b = new_b; + onChange(new_me); + } + return ( <> - + - + @@ -162,33 +285,84 @@ export function LogicalOperatorFilterExpressionControl(props) { export function ConstFilterExpressionControl(props) { const classes = useStyles(); - const { expr } = props; + const { expr, onClick } = props; return ( - ); } export function FilterExpressionControl(props) { - const { expr } = props; + const { expr, onChange } = props; + const [anchorEl, setAnchorEl] = React.useState(null); + const [editDialogOpen, setEditDialogOpen] = React.useState(false); + + var _ = require('lodash'); + const menu_id = _.uniqueId("filter_menu_"); + const handleClick = event => { + setAnchorEl(event.currentTarget); + }; + + const handleCloseMenu = () => { + setAnchorEl(null); + }; + + const handleOpenEditDialog = (filter) => { + handleCloseMenu(); + setEditDialogOpen(true); + } + + const handleCloseEditFilterDialog = (filter) => { + setEditDialogOpen(false); + onChange(filter); + }; + + var filter_elem = false; if (expr instanceof ConstFilter) { - return + filter_elem = } else if (expr instanceof LogicalOperatorFilter) { - return + filter_elem = } else if (expr instanceof MatchingFilter) { - return + filter_elem = + } else { + throw new Error('Unsupported filter expression'); } - throw new Error('Unsupported filter expression'); + return ( + <> + {filter_elem} + + Edit + + + + ); } export function FilterControl(props) { const classes = useStyles(); const { filter, onChange, resultType, resultTypeString } = props; + const enabled = !filter_is_const_false(filter); + function handleResultToggled() { if (enabled) { onChange(new ConstFilter(resultType, false)); @@ -198,7 +372,6 @@ export function FilterControl(props) { } } - const enabled = !filter_is_const_false(filter); return ( <> @@ -212,7 +385,7 @@ export function FilterControl(props) { } label={resultTypeString + ':'} /> - + );