Simple matching control.

src/userquerywidget.js

@@ -14,6 +14,7 @@ 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 TextField from '@material-ui/core/TextField';
 
 import { makeStyles } from '@material-ui/core/styles';
 
@@ -21,6 +22,7 @@ import {
     filter_is_const_false, ConstFilter, LogicalOperatorFilter, MatchingFilter,
     ResultTypeEnum, LogicalOperatorEnum, MatchTypeEnum, NegationFilter
 } from './queries.js'
+import { Typography } from '@material-ui/core';
 
 const useStyles = makeStyles(theme => ({
     root: {},
@@ -99,6 +101,49 @@ export function EditLogicalOperatorFilterExpression(props) {
     );
 }
 
+export function EditMatchingFilterExpression(props) {
+    const { onChange, filter } = props;
+    const classes = useStyles();
+
+    function handleTypeChange(e) {
+        var new_filter = _.cloneDeep(filter);
+        new_filter.match_type = e.target.value;
+        onChange(new_filter);
+    }
+
+    function handleMatchChange(e) {
+        var new_filter = _.cloneDeep(filter);
+        new_filter.match_from = e.target.value;
+        onChange(new_filter);
+    }
+
+    var _ = require('lodash');
+    const typeSelectId = _.uniqueId("select_");
+    const typeSelectLabelId = _.uniqueId("select_label_");
+
+    return (
+        <FormControl>
+            <Typography className={classes.margined}>TODO: make nice icons and autocomplete here</Typography>
+            <Select
+                className={classes.margined}
+                labelId={typeSelectLabelId}
+                id={typeSelectId}
+                value={filter.match_type}
+                onChange={handleTypeChange}
+            >
+                <MenuItem value={MatchTypeEnum.MATCH_IMAGE_NAME_EQUALS}>Image Name Equals</MenuItem>
+                <MenuItem value={MatchTypeEnum.MATCH_IMAGE_NAME_NATURAL}>Image Name Natural</MenuItem>
+                <MenuItem value={MatchTypeEnum.MATCH_ALBUM_EQUALS}>Album Equals</MenuItem>
+                <MenuItem value={MatchTypeEnum.MATCH_ALBUM_EQUALS_OR_CHILD}>Album Equals Or Child</MenuItem>
+                <MenuItem value={MatchTypeEnum.MATCH_ALBUM_NATURAL}>Album Natural</MenuItem>
+                <MenuItem value={MatchTypeEnum.MATCH_ALBUM_NAME_EQUALS}>Album Name Equals</MenuItem>
+                <MenuItem value={MatchTypeEnum.MATCH_TAG_EQUALS}>Tag Equals</MenuItem>
+            </Select>
+            <TextField className={classes.margined} label="Value" type="text" onChange={handleMatchChange} />
+        </FormControl>
+    );
+}
+
 export function EditFilterExpressionDialog(props) {
     const classes = useStyles();
     const { onClose, startingFilter, open } = props;
@@ -121,9 +166,9 @@ export function EditFilterExpressionDialog(props) {
 
     const handleTypeChange = e => {
         var val = e.target.value;
-        if(val == FilterTypeEnum.CONST) {
+        if (val == FilterTypeEnum.CONST) {
             setFilter(new ConstFilter(filter.result_type, true));
-        } else if(val == FilterTypeEnum.MATCHING) {
+        } else if (val == FilterTypeEnum.MATCHING) {
             setFilter(new MatchingFilter(filter.result_type, "", MatchTypeEnum.MATCH_IMAGE_NAME_NATURAL));
         } else {
             throw new Error('Unsupported filter type: ' + val);
@@ -131,10 +176,10 @@ export function EditFilterExpressionDialog(props) {
     }
 
     const getFilterType = filter => {
-        if(filter instanceof ConstFilter) { return FilterTypeEnum.CONST; }
-        else if(filter instanceof NegationFilter) { return FilterTypeEnum.NEGATION; }
-        else if(filter instanceof MatchingFilter) { return FilterTypeEnum.MATCHING; }
-        else if(filter instanceof LogicalOperatorFilter) { return FilterTypeEnum.LOGICAL; }
+        if (filter instanceof ConstFilter) { return FilterTypeEnum.CONST; }
+        else if (filter instanceof NegationFilter) { return FilterTypeEnum.NEGATION; }
+        else if (filter instanceof MatchingFilter) { return FilterTypeEnum.MATCHING; }
+        else if (filter instanceof LogicalOperatorFilter) { return FilterTypeEnum.LOGICAL; }
         else {
             throw new Error('Unsupported filter type: ' + filter);
         }
@@ -154,14 +199,14 @@ export function EditFilterExpressionDialog(props) {
         control = <EditConstFilterExpression {...subprops} />
     } else if (filter instanceof LogicalOperatorFilter) {
         control = <EditLogicalOperatorFilterExpression {...subprops} />
-    }/* else if (expr instanceof MatchingFilter) {
-        filter_elem = <MatchingFilterExpressionControl {...props} onClick={handleClick} />
-    }*/
+    } else if (filter instanceof MatchingFilter) {
+        control = <EditMatchingFilterExpression {...subprops} />
+    }
 
     return (
         <Dialog aria-labelledby={id} open={open}>
             <DialogTitle id={id}>Edit expression</DialogTitle>
-            <FormControl>
+            <FormControl className={classes.margined}>
                 <Select
                     labelId={selectLabelId}
                     id={selectId}
@@ -173,7 +218,7 @@ export function EditFilterExpressionDialog(props) {
                 </Select>
             </FormControl>
             {control}
-            <Button onClick={handleClose}>
+            <Button onClick={handleClose} className={classes.margined}>
                 Done
             </Button>
         </Dialog>