2020-01-24 10:27:35 +00:00
|
|
|
<template>
|
2020-06-27 08:31:20 +00:00
|
|
|
<div class="p-tab p-tab-photo-files">
|
2020-06-30 14:12:21 +00:00
|
|
|
<v-expansion-panel expand class="pa-0 elevation-0 secondary" :value="state">
|
|
|
|
<v-expansion-panel-content v-for="(file, index) in model.fileModels()" :key="index"
|
|
|
|
class="pa-0 elevation-0 grey lighten-4" style="margin-top: 1px;">
|
|
|
|
<template v-slot:header>
|
2020-07-06 08:32:37 +00:00
|
|
|
<div class="caption">{{ file.baseName(70) }}</div>
|
2020-06-30 14:12:21 +00:00
|
|
|
</template>
|
|
|
|
<v-card>
|
|
|
|
<v-card-text class="white pa-0">
|
|
|
|
<v-container fluid class="pa-0">
|
|
|
|
<v-layout row wrap fill-height
|
|
|
|
align-center
|
|
|
|
justify-center>
|
|
|
|
<v-flex xs12 class="pa-0">
|
|
|
|
<div class="v-table__overflow">
|
|
|
|
<table class="v-datatable v-table theme--light photo-files">
|
|
|
|
<tbody>
|
|
|
|
<tr v-if="file.Type === 'jpg'">
|
|
|
|
<td>
|
|
|
|
<translate>Preview</translate>
|
|
|
|
</td>
|
|
|
|
<td>
|
|
|
|
<v-img :src="file.thumbnailUrl('tile_224')"
|
|
|
|
aspect-ratio="1"
|
|
|
|
max-width="112"
|
|
|
|
max-height="112"
|
|
|
|
class="accent lighten-2 elevation-0 clickable"
|
|
|
|
@click.exact="openFile(file)"
|
|
|
|
>
|
|
|
|
<v-layout
|
|
|
|
slot="placeholder"
|
|
|
|
fill-height
|
|
|
|
align-center
|
|
|
|
justify-center
|
|
|
|
ma-0
|
|
|
|
>
|
|
|
|
<v-progress-circular indeterminate
|
|
|
|
color="accent lighten-5"></v-progress-circular>
|
|
|
|
</v-layout>
|
|
|
|
</v-img>
|
|
|
|
</td>
|
|
|
|
</tr>
|
2020-07-14 09:00:49 +00:00
|
|
|
<tr v-if="!file.Sidecar && !file.Primary && !file.Root">
|
2020-06-30 14:12:21 +00:00
|
|
|
<td>
|
2020-07-13 16:09:58 +00:00
|
|
|
<translate>Actions</translate>
|
2020-06-30 14:12:21 +00:00
|
|
|
</td>
|
|
|
|
<td>
|
|
|
|
<v-btn small depressed dark color="secondary-dark" class="ma-0 action-primary"
|
2020-07-14 09:00:49 +00:00
|
|
|
@click.stop.prevent="primary(file)" v-if="file.Type === 'jpg' && !file.Primary">
|
2020-06-30 14:12:21 +00:00
|
|
|
<translate>Primary</translate>
|
|
|
|
</v-btn>
|
2020-07-13 13:59:54 +00:00
|
|
|
<v-btn small depressed dark color="secondary-dark" class="ma-0 action-unstack"
|
|
|
|
@click.stop.prevent="unstack(file)">
|
|
|
|
<translate>Unstack</translate>
|
2020-06-30 14:12:21 +00:00
|
|
|
</v-btn>
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td>
|
|
|
|
<translate>UID</translate>
|
|
|
|
</td>
|
|
|
|
<td>{{ file.UID | uppercase }}</td>
|
|
|
|
</tr>
|
2020-07-13 16:09:58 +00:00
|
|
|
<tr>
|
|
|
|
<td>
|
|
|
|
<translate>Hash</translate>
|
|
|
|
</td>
|
|
|
|
<td>{{ file.Hash }}</td>
|
|
|
|
</tr>
|
2020-07-06 08:32:37 +00:00
|
|
|
<tr v-if="file.Root">
|
2020-06-30 14:12:21 +00:00
|
|
|
<td>
|
2020-07-06 08:32:37 +00:00
|
|
|
<translate>Folder</translate>
|
2020-06-30 14:12:21 +00:00
|
|
|
</td>
|
2020-07-13 14:29:36 +00:00
|
|
|
<td>{{ file.Root | capitalize }}</td>
|
2020-06-30 14:12:21 +00:00
|
|
|
</tr>
|
2020-07-06 08:32:37 +00:00
|
|
|
<tr v-if="file.Name">
|
2020-06-30 14:12:21 +00:00
|
|
|
<td>
|
2020-07-06 08:32:37 +00:00
|
|
|
<translate>Name</translate>
|
2020-06-30 14:12:21 +00:00
|
|
|
</td>
|
2020-07-06 08:32:37 +00:00
|
|
|
<td @click.stop.prevent="download(file)" class="clickable">{{ file.Name }}</td>
|
2020-06-30 14:12:21 +00:00
|
|
|
</tr>
|
2020-07-06 08:32:37 +00:00
|
|
|
<tr v-if="file.OriginalName">
|
2020-06-30 14:12:21 +00:00
|
|
|
<td>
|
2020-07-06 08:32:37 +00:00
|
|
|
<translate>Original Name</translate>
|
2020-06-30 14:12:21 +00:00
|
|
|
</td>
|
2020-07-06 08:32:37 +00:00
|
|
|
<td>{{ file.OriginalName }}</td>
|
2020-06-30 14:12:21 +00:00
|
|
|
</tr>
|
2020-07-13 16:09:58 +00:00
|
|
|
<tr>
|
|
|
|
<td>
|
|
|
|
<translate>Size</translate>
|
|
|
|
</td>
|
|
|
|
<td>{{ file.sizeInfo() }}</td>
|
|
|
|
</tr>
|
2020-06-30 14:12:21 +00:00
|
|
|
<tr v-if="file.Type">
|
|
|
|
<td>
|
|
|
|
<translate>Type</translate>
|
|
|
|
</td>
|
|
|
|
<td>{{ file.typeInfo() }}</td>
|
|
|
|
</tr>
|
|
|
|
<tr v-if="file.Codec">
|
|
|
|
<td>
|
|
|
|
<translate>Codec</translate>
|
|
|
|
</td>
|
2020-06-30 20:10:43 +00:00
|
|
|
<td>{{ file.Codec | uppercase }}</td>
|
2020-06-30 14:12:21 +00:00
|
|
|
</tr>
|
2020-07-06 08:32:37 +00:00
|
|
|
<tr v-if="file.Primary">
|
|
|
|
<td>
|
|
|
|
<translate>Primary</translate>
|
|
|
|
</td>
|
|
|
|
<td><translate>Yes</translate></td>
|
|
|
|
</tr>
|
|
|
|
<tr v-if="file.Portrait">
|
|
|
|
<td>
|
|
|
|
<translate>Portrait</translate>
|
|
|
|
</td>
|
|
|
|
<td><translate>Yes</translate></td>
|
|
|
|
</tr>
|
2020-07-13 16:09:58 +00:00
|
|
|
<tr v-if="file.AspectRatio">
|
2020-07-06 08:32:37 +00:00
|
|
|
<td>
|
2020-07-13 16:09:58 +00:00
|
|
|
<translate>Aspect Ratio</translate>
|
2020-07-06 08:32:37 +00:00
|
|
|
</td>
|
2020-07-13 16:09:58 +00:00
|
|
|
<td>{{ file.AspectRatio }}</td>
|
|
|
|
</tr>
|
|
|
|
<tr v-if="file.MainColor">
|
|
|
|
<td>
|
|
|
|
<translate>Main Color</translate>
|
|
|
|
</td>
|
|
|
|
<td>{{ file.MainColor | capitalize }}</td>
|
|
|
|
</tr>
|
|
|
|
<tr v-if="file.Type === 'jpg'">
|
|
|
|
<td>
|
|
|
|
<translate>Chroma</translate>
|
|
|
|
</td>
|
|
|
|
<td>{{ file.Chroma }} / 100</td>
|
2020-07-06 08:32:37 +00:00
|
|
|
</tr>
|
2020-06-30 14:12:21 +00:00
|
|
|
<tr v-if="file.Error">
|
|
|
|
<td>
|
|
|
|
<translate>Error</translate>
|
|
|
|
</td>
|
|
|
|
<td>{{ file.Error }}</td>
|
|
|
|
</tr>
|
|
|
|
<tr v-if="file.Missing">
|
|
|
|
<td>
|
|
|
|
<translate>Missing</translate>
|
|
|
|
</td>
|
|
|
|
<td><translate>Yes</translate></td>
|
|
|
|
</tr>
|
|
|
|
<tr v-if="file.Duplicate">
|
|
|
|
<td>
|
|
|
|
<translate>Duplicate</translate>
|
|
|
|
</td>
|
|
|
|
<td><translate>Yes</translate></td>
|
|
|
|
</tr>
|
2020-07-06 08:32:37 +00:00
|
|
|
<tr>
|
|
|
|
<td>
|
|
|
|
<translate>Added</translate>
|
|
|
|
</td>
|
2020-07-13 16:09:58 +00:00
|
|
|
<td>{{ formatTime(file.CreatedAt) }} <translate>in</translate> {{ Math.round(file.CreatedIn / 1000000) | number('0,0') }} ms</td>
|
2020-07-06 08:32:37 +00:00
|
|
|
</tr>
|
2020-07-13 16:09:58 +00:00
|
|
|
<tr v-if="file.UpdatedIn">
|
2020-07-06 08:32:37 +00:00
|
|
|
<td>
|
|
|
|
<translate>Updated</translate>
|
|
|
|
</td>
|
2020-07-13 16:09:58 +00:00
|
|
|
<td>{{ formatTime(file.UpdatedAt) }} <translate>in</translate> {{ Math.round(file.UpdatedIn / 1000000) | number('0,0') }} ms</td>
|
2020-07-06 08:32:37 +00:00
|
|
|
</tr>
|
2020-06-30 14:12:21 +00:00
|
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
</div>
|
|
|
|
</v-flex>
|
|
|
|
</v-layout>
|
|
|
|
</v-container>
|
|
|
|
</v-card-text>
|
|
|
|
</v-card>
|
|
|
|
</v-expansion-panel-content>
|
|
|
|
</v-expansion-panel>
|
2020-06-27 08:31:20 +00:00
|
|
|
</div>
|
2020-01-24 10:27:35 +00:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2020-04-21 14:46:08 +00:00
|
|
|
import Thumb from "model/thumb";
|
2020-06-30 14:12:21 +00:00
|
|
|
import {DateTime} from "luxon";
|
2020-04-21 14:46:08 +00:00
|
|
|
|
2020-01-24 10:27:35 +00:00
|
|
|
export default {
|
2020-06-10 11:16:24 +00:00
|
|
|
name: 'p-tab-photo-files',
|
2020-01-24 10:27:35 +00:00
|
|
|
props: {
|
|
|
|
model: Object,
|
2020-07-06 08:32:37 +00:00
|
|
|
uid: String,
|
2020-01-24 10:27:35 +00:00
|
|
|
},
|
|
|
|
data() {
|
|
|
|
return {
|
2020-06-30 14:12:21 +00:00
|
|
|
state: [true],
|
2020-01-24 10:27:35 +00:00
|
|
|
config: this.$config.values,
|
2020-04-26 12:31:33 +00:00
|
|
|
readonly: this.$config.get("readonly"),
|
2020-01-24 10:27:35 +00:00
|
|
|
selected: [],
|
|
|
|
listColumns: [
|
2020-06-30 14:12:21 +00:00
|
|
|
{
|
|
|
|
text: this.$gettext('Primary'),
|
|
|
|
value: 'Primary',
|
|
|
|
sortable: false,
|
|
|
|
align: 'center',
|
|
|
|
class: 'p-col-primary'
|
|
|
|
},
|
2020-05-23 18:58:58 +00:00
|
|
|
{text: this.$gettext('Name'), value: 'Name', sortable: false, align: 'left'},
|
2020-04-21 08:23:27 +00:00
|
|
|
{text: this.$gettext('Dimensions'), value: '', sortable: false, class: 'hidden-sm-and-down'},
|
2020-05-23 18:58:58 +00:00
|
|
|
{text: this.$gettext('Size'), value: 'Size', sortable: false, class: 'hidden-xs-only'},
|
2020-01-29 18:12:31 +00:00
|
|
|
{text: this.$gettext('Type'), value: '', sortable: false, align: 'left'},
|
|
|
|
{text: this.$gettext('Status'), value: '', sortable: false, align: 'left'},
|
2020-01-24 10:27:35 +00:00
|
|
|
],
|
|
|
|
};
|
|
|
|
},
|
2020-01-26 15:06:03 +00:00
|
|
|
computed: {},
|
2020-01-24 10:27:35 +00:00
|
|
|
methods: {
|
2020-06-30 14:12:21 +00:00
|
|
|
openFile(file) {
|
|
|
|
this.$viewer.show([Thumb.fromFile(this.model, file)], 0);
|
2020-01-24 10:27:35 +00:00
|
|
|
},
|
2020-06-30 16:35:42 +00:00
|
|
|
download(file) {
|
|
|
|
file.download();
|
|
|
|
},
|
2020-07-13 13:59:54 +00:00
|
|
|
unstack(file) {
|
|
|
|
this.model.unstackFile(file.UID);
|
2020-04-21 08:23:27 +00:00
|
|
|
},
|
2020-06-30 14:58:32 +00:00
|
|
|
primary(file) {
|
|
|
|
this.model.primaryFile(file.UID);
|
2020-01-29 18:12:31 +00:00
|
|
|
},
|
2020-06-30 14:12:21 +00:00
|
|
|
formatTime(s) {
|
2020-07-03 15:35:10 +00:00
|
|
|
return DateTime.fromISO(s).toLocaleString(DateTime.DATETIME_MED);
|
2020-01-24 10:27:35 +00:00
|
|
|
},
|
|
|
|
refresh() {
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
</script>
|