beenull/photoprism
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Frontend: Refactor photo selection #15

Browse source
This commit is contained in:
Michael Mayer 2019-05-20 18:38:08 +02:00
parent 706b9d4fd2
commit e49934ef40
5 changed files with 32 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
frontend/src/app/pages/photos.vue
View file

@ -88,7 +88,8 @@
dark
fab
>
<v-icon>menu</v-icon>
<v-icon v-if="selected.length === 0">menu</v-icon>
<span v-else>{{ selected.length }}</span>
</v-btn>
<v-btn
fab
@ -135,27 +136,10 @@
</v-btn>
</v-speed-dial>
<p-photo-tiles v-if="query.view === 'tiles'" :photos="results" :open="openPhoto" :select="selectPhoto" :like="likePhoto"></p-photo-tiles>
<p-photo-mosaic v-if="query.view === 'mosaic'" :photos="results" :open="openPhoto" :select="selectPhoto" :like="likePhoto"></p-photo-mosaic>
<p-photo-details v-if="query.view === 'details'" :photos="results" :open="openPhoto" :select="selectPhoto" :like="likePhoto"></p-photo-details>
<p-photo-list v-if="query.view === 'list'" :photos="results" :selected-photos="selected" :open="openPhoto" :select="selectPhoto" :like="likePhoto"></p-photo-list>
<v-snackbar
v-model="snackbarVisible"
bottom
:timeout="0"
>
{{ snackbarText }}
<v-btn
class="pr-0"
color="primary"
icon
flat
@click="clearSelection()"
>
<v-icon>close</v-icon>
</v-btn>
</v-snackbar>
<p-photo-tiles v-if="query.view === 'tiles'" :photos="results" :selection="selected" :select="selectPhoto" :open="openPhoto" :like="likePhoto"></p-photo-tiles>
<p-photo-mosaic v-if="query.view === 'mosaic'" :photos="results" :selection="selected" :select="selectPhoto" :open="openPhoto" :like="likePhoto"></p-photo-mosaic>
<p-photo-details v-if="query.view === 'details'" :photos="results" :selection="selected" :select="selectPhoto" :open="openPhoto" :like="likePhoto"></p-photo-details>
<p-photo-list v-if="query.view === 'list'" :photos="results" :selection="selected" :select="selectPhoto" :open="openPhoto" :like="likePhoto"></p-photo-list>
</v-container>
<v-dialog v-model="dialog" dark persistent max-width="600px">
@ -334,7 +318,7 @@
</template>
<script>
import Photo from 'model/photo';
import Photo from "model/photo";
export default {
name: 'photos',
@ -353,8 +337,6 @@
}].concat(this.$config.getValue('countries'));
return {
'snackbarVisible': false,
'snackbarText': '',
'advandedSearch': false,
'window': {
width: 0,
@ -392,7 +374,7 @@
{value: 'imported', text: 'Recently imported'},
],
},
'view': view,
'viewType': view,
'loadMoreDisabled': true,
'pageSize': 60,
'offset': 0,
@ -444,22 +426,8 @@
this.selected[i].selected = false;
}
this.selected = [];
this.updateSnackbar();
},
updateSnackbar(text) {
if (!text) text = "";
this.snackbarText = text;
this.snackbarVisible = this.snackbarText !== "";
},
showSnackbar() {
this.snackbarVisible = this.snackbarText !== "";
},
hideSnackbar() {
this.snackbarVisible = false;
},
selectPhoto(photo, ev) {
selectPhoto(photo) {
if (photo.selected) {
for (let i = 0; i < this.selected.length; i++) {
if (this.selected[i].id === photo.id) {
@ -473,18 +441,6 @@
this.selected.push(photo);
photo.selected = true;
}
if (this.selected.length > 0) {
if (this.selected.length === 1) {
this.snackbarText = 'One photo selected';
} else {
this.snackbarText = this.selected.length + ' photos selected';
}
this.snackbarVisible = true;
} else {
this.snackbarText = '';
this.snackbarVisible = false;
}
},
likePhoto(photo) {
photo.PhotoFavorite = !photo.PhotoFavorite;

9
frontend/src/component/p-photo-details.vue
View file

@ -11,7 +11,7 @@
<v-layout row wrap>
<v-flex
v-for="(photo, index) in photos"
:key="photo.ID"
:key="index"
class="p-photo"
xs12 sm6 md4 lg3 d-flex
>
@ -40,13 +40,15 @@
<v-btn v-if="hover || photo.selected" :flat="!hover" icon large absolute
:ripple="false" style="right: 4px; bottom: 4px;"
class="p-photo-select"
@click.stop.prevent="select(photo)">
<v-icon v-if="photo.selected" color="white">check_box</v-icon>
<v-icon v-if="selection.length && photo.selected" color="white">check_box</v-icon>
<v-icon v-else color="white">check_box_outline_blank</v-icon>
</v-btn>
<v-btn v-if="hover || photo.PhotoFavorite" :flat="!hover" icon large absolute
:ripple="false" style="bottom: 4px; left: 4px"
class="p-photo-like"
@click.stop.prevent="like(photo)">
<v-icon v-if="photo.PhotoFavorite" color="white">favorite
</v-icon>
@ -83,8 +85,9 @@
name: 'PPhotoDetails',
props: {
photos: Array,
open: Function,
selection: Array,
select: Function,
open: Function,
like: Function,
},
methods: {

7
frontend/src/component/p-photo-list.vue
View file

@ -7,7 +7,7 @@
select-all
disable-initial-sort
item-key="ID"
v-model="selectedPhotos"
v-model="selected"
:no-data-text="'No photos matched your search'"
>
<template slot="items" slot-scope="props" class="p-photo">
@ -32,13 +32,14 @@
name: 'PPhotoList',
props: {
photos: Array,
selectedPhotos: Array,
open: Function,
selection: Array,
select: Function,
open: Function,
like: Function,
},
data() {
return {
'selected': [],
'listColumns': [
{text: 'Title', value: 'PhotoTitle'},
{text: 'Taken At', value: 'TakenAt'},

9
frontend/src/component/p-photo-mosaic.vue
View file

@ -11,7 +11,7 @@
<v-layout row wrap>
<v-flex
v-for="(photo, index) in photos"
:key="photo.ID"
:key="index"
v-bind:class="{ selected: photo.selected }"
class="p-photo"
xs4 sm3 md2 lg1 d-flex
@ -39,13 +39,15 @@
<v-btn v-if="hover || photo.selected" :flat="!hover" icon large absolute
:ripple="false" style="right: 1px; bottom: 1px;"
class="p-photo-select"
@click.stop.prevent="select(photo)">
<v-icon v-if="photo.selected" color="white">check_box</v-icon>
<v-icon v-if="selection.length && photo.selected" color="white">check_box</v-icon>
<v-icon v-else color="white">check_box_outline_blank</v-icon>
</v-btn>
<v-btn v-if="hover || photo.PhotoFavorite" :flat="!hover" icon large absolute
:ripple="false" style="bottom: 1px; left: 1px"
class="p-photo-like"
@click.stop.prevent="like(photo)">
<v-icon v-if="photo.PhotoFavorite" color="white">favorite</v-icon>
<v-icon v-else color="white">favorite_border</v-icon>
@ -63,8 +65,9 @@
name: 'PPhotoMosaic',
props: {
photos: Array,
open: Function,
selection: Array,
select: Function,
open: Function,
like: Function,
},
methods: {

11
frontend/src/component/p-photo-tiles.vue
View file

@ -11,7 +11,7 @@
<v-layout row wrap>
<v-flex
v-for="(photo, index) in photos"
:key="photo.ID"
:key="index"
v-bind:class="{ selected: photo.selected }"
class="p-photo"
xs12 sm6 md3 lg2 d-flex
@ -39,13 +39,15 @@
<v-btn v-if="hover || photo.selected" :flat="!hover" icon large absolute
:ripple="false" style="right: 4px; bottom: 4px;"
class="p-photo-select"
@click.stop.prevent="select(photo)">
<v-icon v-if="photo.selected" color="white">check_box</v-icon>
<v-icon v-else color="white">check_box_outline_blank</v-icon>
<v-icon v-if="selection.length && photo.selected" color="white">check_box</v-icon>
<v-icon v-else-if="!photo.selected" color="white">check_box_outline_blank</v-icon>
</v-btn>
<v-btn v-if="hover || photo.PhotoFavorite" :flat="!hover" icon large absolute
:ripple="false" style="bottom: 4px; left: 4px"
class="p-photo-like"
@click.stop.prevent="like(photo)">
<v-icon v-if="photo.PhotoFavorite" color="white">favorite</v-icon>
<v-icon v-else color="white">favorite_border</v-icon>
@ -63,8 +65,9 @@
name: 'PPhotoTiles',
props: {
photos: Array,
open: Function,
selection: Array,
select: Function,
open: Function,
like: Function,
},
methods: {