Added results querying for albums and tags.

src/main.js

@@ -8,10 +8,10 @@ import { SearchBar } from './searchbar.js';
 import { InternalErrorPage } from './error.js';
 import { LoadingPage } from './loading.js';
 import { ProvideDB, DBTypeEnum, DBSourceEnum } from './database.js';
-import { GridGallery } from './gridgallery.js';
 import { UserQuery, user_query_from_search_string, maybe_image_query, do_image_query, maybe_album_query, do_album_query, maybe_tag_query, do_tag_query } from './queries.js';
 import { Browser } from './browser.js';
-import { UserQueryWidget } from './userquerywidget.js'
+import { UserQueryWidget } from './userquerywidget.js';
+import { ResultsView } from './resultsview.js';
 
 const useStyles = makeStyles(theme => ({
     root: {
@@ -42,6 +42,8 @@ export function LoadedMainPage(props) {
     const classes = useStyles();
     const [gallery_user_query, setGalleryUserQuery] = React.useState(new UserQuery());
     const [photos, setPhotos] = React.useState([]);
+    const [allAlbums, setAllAlbums] = React.useState([]);
+    const [allTags, setAllTags] = React.useState([]);
     const [albums, setAlbums] = React.useState([]);
     const [tags, setTags] = React.useState([]);
     const { database, photos_dir, thumbs_dir } = props;
@@ -54,18 +56,21 @@ export function LoadedMainPage(props) {
 
         do_album_query(sql_album_query, database)
             .then(albums => {
-                setAlbums(albums);
+                setAllAlbums(albums);
             });
 
         do_tag_query(sql_tag_query, database)
             .then(tags => {
-                setTags(tags);
+                setAllTags(tags);
             });
     }, [database]);
 
     useEffect(() => {
         var sql_image_query = maybe_image_query(gallery_user_query);
+        var sql_album_query = maybe_album_query(gallery_user_query);
+        var sql_tag_query = maybe_tag_query(gallery_user_query);
         setPhotos(false);
+        setAlbums(false);
         do_image_query(sql_image_query, database, photos_dir, thumbs_dir)
             .then(got_photos => {
                 // Make each photo fetch its thumbnail size before proceeding
@@ -78,6 +83,14 @@ export function LoadedMainPage(props) {
                         setPhotos(got_photos);
                     });
             });
+        do_album_query(sql_album_query, database)
+            .then(albums => {
+                setAlbums(albums);
+            });
+        do_tag_query(sql_tag_query, database)
+            .then(tags => {
+                setTags(tags);
+            });
     }, [gallery_user_query, database, photos_dir, thumbs_dir]);
 
     function onSearch(q) {
@@ -89,12 +102,12 @@ export function LoadedMainPage(props) {
         <>
             <Box className={classes.root}>
                 <Box className={classes.navigator}>
-                    <Box className={classes.margined}>{albums && <Browser albums={albums} tags={tags} onNewQuery={setGalleryUserQuery} />}</Box>
+                    <Box className={classes.margined}>{albums && <Browser albums={allAlbums} tags={allTags} onNewQuery={setGalleryUserQuery} />}</Box>
                 </Box>
                 <Box className={classes.searchandview}>
                     <Box className={classes.margined}><SearchBar onSubmit={onSearch} /></Box>
                     <Box className={classes.margined}><UserQueryWidget userQuery={gallery_user_query} onChange={setGalleryUserQuery} /></Box>
-                    <Box className={classes.margined}>{photos && <GridGallery photos={photos} />}</Box>
+                    <Box className={classes.margined}>{photos && <ResultsView photos={photos} albums={albums} tags={tags}/>}</Box>
                 </Box>
             </Box>
         </>
@@ -103,7 +116,7 @@ export function LoadedMainPage(props) {
 
 const theme = createMuiTheme({
     typography: {
-        fontFamily: [ 'Roboto', 'sans-serif' ].join(','),
+        fontFamily: ['Roboto', 'sans-serif'].join(','),
     },
 });
 

src/queries.js

@@ -153,10 +153,9 @@ export class MatchingFilter extends ResultFilter {
         } else if (this.match_type == MatchTypeEnum.MATCH_ALBUM_NATURAL) {
             throw new Error("Natural matching on album names is not yet supported.");
         } else if (this.match_type == MatchTypeEnum.MATCH_ALBUM_NAME_EQUALS) {
-            console.log('(Albums.relativePath REGEXP "\/(.*\/)*'
-                + escape_regex(this.match_from) + '")');
-            return '(Albums.relativePath REGEXP "' + escape_regex(this.match_from) + '")';
-            //+ '(\/[^\/]+)*")';
+            return '(Albums.relativePath REGEXP "\/(.*\/)*'
+                + escape_regex(this.match_from)
+                + '(\/[^\/]+)*")';
         } else if (this.match_type == MatchTypeEnum.MATCH_TAG_EQUALS) {
             return '(Tags.name="' + this.match_from + '")';
         }

src/resultsview.js

@@ -0,0 +1,110 @@
+import React from 'react';
+
+import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
+import ImportContactsIcon from '@material-ui/icons/ImportContacts';
+import Button from '@material-ui/core/Button';
+import LabelIcon from '@material-ui/icons/Label';
+
+import { GridGallery } from './gridgallery.js';
+
+const useStyles = makeStyles(theme => ({
+    root: {
+        width: "100%",
+    },
+    albumscontainer: {
+    },
+    albumitemcontainer: {
+        display: "block",
+    },
+    tagscontainer: {
+    },
+    tagitemcontainer: {
+        display: "block",
+    },
+}));
+
+export function AlbumItemView(props) {
+    const { album } = props;
+
+    return (
+        <Button
+            variant="outlined"
+            startIcon={<ImportContactsIcon />}>
+            {album.state.relative_path}
+        </Button>
+    )
+}
+
+export function AlbumsView(props) {
+    const classes = useStyles();
+    const { albums } = props;
+
+    return (
+        <Box className={classes.albumscontainer}>
+            {
+                albums.map(elem => {
+                    return (
+                        <Box className={classes.albumitemcontainer}>
+                            <AlbumItemView album={elem} />
+                        </Box>
+                    )
+                })
+            }
+        </Box>
+    )
+}
+
+export function TagItemView(props) {
+    const { tag } = props;
+
+    return (
+        <Button
+            variant="outlined"
+            startIcon={<LabelIcon />}>
+            {tag.state.name}
+        </Button>
+    )
+}
+
+export function TagsView(props) {
+    const classes = useStyles();
+    const { tags } = props;
+
+    return (
+        <Box className={classes.tagscontainer}>
+            {
+                tags.map(elem => {
+                    return (
+                        <Box className={classes.tagitemcontainer}>
+                            <TagItemView tag={elem} />
+                        </Box>
+                    )
+                })
+            }
+        </Box>
+    )
+}
+
+export function ImagesView(props) {
+    return <GridGallery {...props} />;
+}
+
+export function ResultsView(props) {
+    const classes = useStyles();
+    const { photos, albums, tags } = props;
+
+    return (
+        <Box className={classes.root}>
+            <Box className={classes.root}>
+                <ImagesView className={classes.root} photos={photos} />
+            </Box>
+            <Box className={classes.root}>
+                <AlbumsView className={classes.root} albums={albums} />
+            </Box>
+            <Box className={classes.root}>
+                <TagsView className={classes.root} tags={tags} />
+            </Box>
+        </Box>
+    )
+}