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"
|
2021-01-14 18:18:34 +00:00
|
|
|
class="pa-0 elevation-0 secondary-light" style="margin-top: 1px;">
|
2021-01-05 18:54:01 +00:00
|
|
|
<template #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-img>
|
|
|
|
</td>
|
|
|
|
</tr>
|
2020-08-14 13:40:42 +00:00
|
|
|
<tr>
|
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>
|
2021-01-19 16:11:20 +00:00
|
|
|
<v-btn small depressed dark color="primary-button" class="ma-0 action-download"
|
2020-10-04 12:21:40 +00:00
|
|
|
@click.stop.prevent="downloadFile(file)">
|
2020-08-14 13:40:42 +00:00
|
|
|
<translate>Download</translate>
|
|
|
|
</v-btn>
|
2021-01-19 16:11:20 +00:00
|
|
|
<v-btn v-if="features.edit && file.Type === 'jpg' && !file.Primary" small depressed dark color="primary-button"
|
2021-01-05 18:54:01 +00:00
|
|
|
class="ma-0 action-primary"
|
|
|
|
@click.stop.prevent="primaryFile(file)">
|
2020-06-30 14:12:21 +00:00
|
|
|
<translate>Primary</translate>
|
|
|
|
</v-btn>
|
2021-01-19 16:11:20 +00:00
|
|
|
<v-btn v-if="features.edit && !file.Sidecar && !file.Primary && file.Root === '/'" small depressed dark color="primary-button"
|
2021-01-05 18:54:01 +00:00
|
|
|
class="ma-0 action-unstack"
|
|
|
|
@click.stop.prevent="unstackFile(file)">
|
2020-07-13 13:59:54 +00:00
|
|
|
<translate>Unstack</translate>
|
2020-06-30 14:12:21 +00:00
|
|
|
</v-btn>
|
2021-01-24 14:28:59 +00:00
|
|
|
<v-btn v-if="features.delete && !file.Primary" small depressed dark color="primary-button"
|
2021-01-05 18:54:01 +00:00
|
|
|
class="ma-0 action-delete"
|
|
|
|
@click.stop.prevent="showDeleteDialog(file)">
|
2020-10-04 12:21:40 +00:00
|
|
|
<translate>Delete</translate>
|
|
|
|
</v-btn>
|
2020-06-30 14:12:21 +00:00
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
2020-08-17 22:45:53 +00:00
|
|
|
<td title="Unique ID">
|
|
|
|
UID
|
2020-06-30 14:12:21 +00:00
|
|
|
</td>
|
|
|
|
<td>{{ file.UID | uppercase }}</td>
|
|
|
|
</tr>
|
2020-08-17 22:45:53 +00:00
|
|
|
<tr v-if="file.InstanceID" title="XMP">
|
2020-07-13 16:09:58 +00:00
|
|
|
<td>
|
2020-08-17 22:45:53 +00:00
|
|
|
<translate>Instance ID</translate>
|
|
|
|
</td>
|
|
|
|
<td>{{ file.InstanceID | uppercase }}</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td title="SHA-1">
|
2020-07-13 16:09:58 +00:00
|
|
|
<translate>Hash</translate>
|
|
|
|
</td>
|
|
|
|
<td>{{ file.Hash }}</td>
|
|
|
|
</tr>
|
2020-07-20 17:28:01 +00:00
|
|
|
<tr v-if="file.Root.length > 1">
|
2020-06-30 14:12:21 +00:00
|
|
|
<td>
|
2020-07-17 14:11:35 +00:00
|
|
|
<translate>Storage 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-08-14 13:40:42 +00:00
|
|
|
<td>{{ 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>
|
2020-10-04 12:21:40 +00:00
|
|
|
<td>
|
|
|
|
<translate>Yes</translate>
|
|
|
|
</td>
|
2020-07-06 08:32:37 +00:00
|
|
|
</tr>
|
|
|
|
<tr v-if="file.Portrait">
|
|
|
|
<td>
|
|
|
|
<translate>Portrait</translate>
|
|
|
|
</td>
|
2020-10-04 12:21:40 +00:00
|
|
|
<td>
|
|
|
|
<translate>Yes</translate>
|
|
|
|
</td>
|
2020-07-06 08:32:37 +00:00
|
|
|
</tr>
|
2020-07-16 11:02:48 +00:00
|
|
|
<tr v-if="file.Projection">
|
|
|
|
<td>
|
|
|
|
<translate>Projection</translate>
|
|
|
|
</td>
|
|
|
|
<td>{{ file.Projection | capitalize }}</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-20 17:28:01 +00:00
|
|
|
<td>{{ file.AspectRatio }}</td>
|
2020-07-13 16:09:58 +00:00
|
|
|
</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>
|
2020-10-04 12:21:40 +00:00
|
|
|
<td>
|
|
|
|
<translate>Yes</translate>
|
|
|
|
</td>
|
2020-06-30 14:12:21 +00:00
|
|
|
</tr>
|
2020-07-06 08:32:37 +00:00
|
|
|
<tr>
|
|
|
|
<td>
|
|
|
|
<translate>Added</translate>
|
|
|
|
</td>
|
2020-10-04 12:21:40 +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-10-04 12:21:40 +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-10-04 12:21:40 +00:00
|
|
|
<p-file-delete-dialog :show="deleteFile.dialog" @cancel="closeDeleteDialog"
|
2020-12-17 12:23:23 +00:00
|
|
|
@confirm="confirmDeleteFile"></p-file-delete-dialog>
|
2020-06-27 08:31:20 +00:00
|
|
|
</div>
|
2020-01-24 10:27:35 +00:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2020-10-04 12:21:40 +00:00
|
|
|
import Thumb from "model/thumb";
|
|
|
|
import {DateTime} from "luxon";
|
2021-01-17 10:28:39 +00:00
|
|
|
import Notify from "../../common/notify";
|
2020-04-21 14:46:08 +00:00
|
|
|
|
2020-10-04 12:21:40 +00:00
|
|
|
export default {
|
2021-01-05 18:54:01 +00:00
|
|
|
name: 'PTabPhotoFiles',
|
2020-10-04 12:21:40 +00:00
|
|
|
props: {
|
|
|
|
model: Object,
|
|
|
|
uid: String,
|
|
|
|
},
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
state: [true],
|
|
|
|
deleteFile: {
|
|
|
|
dialog: false,
|
|
|
|
file: null,
|
|
|
|
},
|
|
|
|
features: this.$config.settings().features,
|
|
|
|
config: this.$config.values,
|
|
|
|
readonly: this.$config.get("readonly"),
|
|
|
|
selected: [],
|
|
|
|
listColumns: [
|
|
|
|
{
|
|
|
|
text: this.$gettext('Primary'),
|
|
|
|
value: 'Primary',
|
|
|
|
sortable: false,
|
|
|
|
align: 'center',
|
|
|
|
class: 'p-col-primary'
|
2020-01-24 10:27:35 +00:00
|
|
|
},
|
2020-10-04 12:21:40 +00:00
|
|
|
{text: this.$gettext('Name'), value: 'Name', sortable: false, align: 'left'},
|
|
|
|
{text: this.$gettext('Dimensions'), value: '', sortable: false, class: 'hidden-sm-and-down'},
|
|
|
|
{text: this.$gettext('Size'), value: 'Size', sortable: false, class: 'hidden-xs-only'},
|
|
|
|
{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-10-04 12:21:40 +00:00
|
|
|
},
|
|
|
|
computed: {},
|
|
|
|
methods: {
|
|
|
|
openFile(file) {
|
|
|
|
this.$viewer.show([Thumb.fromFile(this.model, file)], 0);
|
|
|
|
},
|
|
|
|
downloadFile(file) {
|
2021-01-17 10:28:39 +00:00
|
|
|
Notify.success(this.$gettext("Downloading…"));
|
|
|
|
|
2020-10-04 12:21:40 +00:00
|
|
|
file.download();
|
|
|
|
},
|
|
|
|
showDeleteDialog(file) {
|
|
|
|
this.deleteFile.dialog = true;
|
|
|
|
this.deleteFile.file = file;
|
|
|
|
},
|
|
|
|
closeDeleteDialog() {
|
|
|
|
this.deleteFile.dialog = false;
|
|
|
|
this.deleteFile.file = null;
|
|
|
|
},
|
|
|
|
confirmDeleteFile() {
|
2020-12-17 12:23:23 +00:00
|
|
|
if (this.deleteFile.file && this.deleteFile.file.UID) {
|
2020-10-04 12:21:40 +00:00
|
|
|
this.model.deleteFile(this.deleteFile.file.UID).finally(() => this.closeDeleteDialog());
|
|
|
|
} else {
|
|
|
|
this.closeDeleteDialog();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
unstackFile(file) {
|
|
|
|
this.model.unstackFile(file.UID);
|
|
|
|
},
|
|
|
|
primaryFile(file) {
|
|
|
|
this.model.primaryFile(file.UID);
|
|
|
|
},
|
|
|
|
formatTime(s) {
|
|
|
|
return DateTime.fromISO(s).toLocaleString(DateTime.DATETIME_MED);
|
|
|
|
},
|
|
|
|
refresh() {
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
2020-01-24 10:27:35 +00:00
|
|
|
</script>
|