diff --git a/src/main.js b/src/main.js index 8e15558..d8c72c6 100644 --- a/src/main.js +++ b/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) { <> - {albums && } + {albums && } - {photos && } + {photos && } @@ -103,7 +116,7 @@ export function LoadedMainPage(props) { const theme = createMuiTheme({ typography: { - fontFamily: [ 'Roboto', 'sans-serif' ].join(','), + fontFamily: ['Roboto', 'sans-serif'].join(','), }, }); diff --git a/src/queries.js b/src/queries.js index 87d30c3..fe7bb0c 100644 --- a/src/queries.js +++ b/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 + '")'; } diff --git a/src/resultsview.js b/src/resultsview.js new file mode 100644 index 0000000..b9905d8 --- /dev/null +++ b/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 ( + + ) +} + +export function AlbumsView(props) { + const classes = useStyles(); + const { albums } = props; + + return ( + + { + albums.map(elem => { + return ( + + + + ) + }) + } + + ) +} + +export function TagItemView(props) { + const { tag } = props; + + return ( + + ) +} + +export function TagsView(props) { + const classes = useStyles(); + const { tags } = props; + + return ( + + { + tags.map(elem => { + return ( + + + + ) + }) + } + + ) +} + +export function ImagesView(props) { + return ; +} + +export function ResultsView(props) { + const classes = useStyles(); + const { photos, albums, tags } = props; + + return ( + + + + + + + + + + + + ) +} \ No newline at end of file