2019-05-19 15:52:23 +00:00
|
|
|
<template>
|
|
|
|
<v-data-table
|
|
|
|
:headers="listColumns"
|
|
|
|
:items="photos"
|
|
|
|
hide-actions
|
2019-05-20 23:39:52 +00:00
|
|
|
class="elevation-0 p-photos p-photo-list"
|
2019-05-19 15:52:23 +00:00
|
|
|
disable-initial-sort
|
|
|
|
item-key="ID"
|
2019-05-20 16:38:08 +00:00
|
|
|
v-model="selected"
|
2019-05-19 15:52:23 +00:00
|
|
|
:no-data-text="'No photos matched your search'"
|
|
|
|
>
|
2019-05-19 17:57:10 +00:00
|
|
|
<template slot="items" slot-scope="props" class="p-photo">
|
2019-05-19 15:52:23 +00:00
|
|
|
<td>
|
2019-05-20 23:39:52 +00:00
|
|
|
<v-btn icon small :ripple="false"
|
|
|
|
class="p-photo-select"
|
|
|
|
@click.stop.prevent="select(props.item)">
|
|
|
|
<v-icon v-if="selection.length && selection.includes(props.item.ID)" color="grey darken-2">check_circle</v-icon>
|
|
|
|
<v-icon v-else-if="!selection.includes(props.item.ID)" color="grey lighten-4">radio_button_off</v-icon>
|
|
|
|
</v-btn>
|
2019-05-19 15:52:23 +00:00
|
|
|
</td>
|
2019-05-20 23:39:52 +00:00
|
|
|
<td @click="open(props.index)" class="p-pointer">{{ props.item.PhotoTitle }}</td>
|
2019-05-19 15:52:23 +00:00
|
|
|
<td>{{ props.item.TakenAt | moment('DD/MM/YYYY hh:mm:ss') }}</td>
|
|
|
|
<td>{{ props.item.LocCountry }}</td>
|
|
|
|
<td>{{ props.item.CameraMake }} {{ props.item.CameraModel }}</td>
|
2019-05-20 23:39:52 +00:00
|
|
|
<td><v-btn icon small flat :ripple="false"
|
|
|
|
class="p-photo-like"
|
|
|
|
@click.stop.prevent="like(props.item)">
|
|
|
|
<v-icon v-if="props.item.PhotoFavorite" color="pink lighten-3">favorite</v-icon>
|
|
|
|
<v-icon v-else color="grey lighten-4">favorite_border</v-icon>
|
|
|
|
</v-btn>
|
|
|
|
</td>
|
2019-05-19 15:52:23 +00:00
|
|
|
</template>
|
|
|
|
</v-data-table>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
2019-05-19 16:19:41 +00:00
|
|
|
name: 'PPhotoList',
|
2019-05-19 15:52:23 +00:00
|
|
|
props: {
|
|
|
|
photos: Array,
|
2019-05-20 16:38:08 +00:00
|
|
|
selection: Array,
|
2019-05-19 15:52:23 +00:00
|
|
|
select: Function,
|
2019-05-20 16:38:08 +00:00
|
|
|
open: Function,
|
2019-05-19 15:52:23 +00:00
|
|
|
like: Function,
|
|
|
|
},
|
|
|
|
data() {
|
|
|
|
return {
|
2019-05-20 16:38:08 +00:00
|
|
|
'selected': [],
|
2019-05-19 15:52:23 +00:00
|
|
|
'listColumns': [
|
2019-05-20 23:39:52 +00:00
|
|
|
{text: '', value: '', align: 'center', sortable: false, class: 'p-col-select'},
|
2019-05-19 15:52:23 +00:00
|
|
|
{text: 'Title', value: 'PhotoTitle'},
|
|
|
|
{text: 'Taken At', value: 'TakenAt'},
|
|
|
|
{text: 'Country', value: 'LocCountry'},
|
|
|
|
{text: 'Camera', value: 'CameraModel'},
|
2019-05-20 23:39:52 +00:00
|
|
|
{text: 'Favorite', value: 'PhotoFavorite', align: 'left'},
|
2019-05-19 15:52:23 +00:00
|
|
|
],
|
|
|
|
};
|
|
|
|
},
|
|
|
|
methods: {
|
2019-05-20 23:39:52 +00:00
|
|
|
showSelected() {
|
|
|
|
console.log("selected", this.selected);
|
|
|
|
console.log("selection", this.selection);
|
|
|
|
}
|
2019-05-19 15:52:23 +00:00
|
|
|
}
|
|
|
|
};
|
|
|
|
</script>
|