Frontend: Refactor photo selection #15
This commit is contained in:
parent
706b9d4fd2
commit
e49934ef40
|
@ -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;
|
||||
|
|
|
@ -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,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'},
|
||||
|
|
|
@ -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,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: {
|
||||
|
|
Loading…
Reference in a new issue