Edit dialog: Implement stubs for files and labels #212 #217

Signed-off-by: Michael Mayer <michael@liquidbytes.net>

frontend/src/dialog/p-photo-edit-dialog.vue

@@ -1,6 +1,6 @@
 <template>
     <v-dialog fullscreen hide-overlay scrollable lazy
-            v-model="show" persistent class="p-photo-edit-dialog" @keydown.esc="cancel">
+              v-model="show" persistent class="p-photo-edit-dialog" @keydown.esc="cancel">
         <v-card color="application">
             <v-toolbar dark color="navigation">
                 <v-btn icon dark @click.stop="cancel">
@@ -29,33 +29,33 @@
                     height="64"
                     class="form"
             >
-                <v-tab id="tab-edit-general" ripple @click="changePath('/settings')">
+                <v-tab id="tab-edit-general" ripple>
                     <translate>General</translate>
                 </v-tab>
                 <v-tab-item>
                     <p-tab-photo-edit-meta :model="model" ref="meta" @cancel="cancel"></p-tab-photo-edit-meta>
                 </v-tab-item>
 
-                <v-tab id="tab-edit-labels" ripple @click="changePath('/settings')">
+                <v-tab id="tab-edit-labels" ripple>
                     <translate>Labels</translate>
                 </v-tab>
                 <v-tab-item lazy>
-                    <p-tab-photo-edit-todo :model="model"></p-tab-photo-edit-todo>
+                    <p-tab-photo-edit-labels :model="model"></p-tab-photo-edit-labels>
                 </v-tab-item>
 
-                <v-tab id="tab-edit-files" ripple @click="changePath('/settings')">
+                <v-tab id="tab-edit-files" ripple>
                     <translate>Files</translate>
                 </v-tab>
                 <v-tab-item lazy>
-                    <p-tab-photo-edit-todo :model="model"></p-tab-photo-edit-todo>
+                    <p-tab-photo-edit-files :model="model"></p-tab-photo-edit-files>
                 </v-tab-item>
 
-                <v-tab id="tab-edit-sharing" ripple @click="changePath('/settings')">
+                <!-- v-tab id="tab-edit-sharing" ripple @click="changePath('/settings')">
                     <translate>Sharing</translate>
                 </v-tab>
                 <v-tab-item lazy>
                     <p-tab-photo-edit-todo :model="model"></p-tab-photo-edit-todo>
-                </v-tab-item>
+                </v-tab-item -->
             </v-tabs>
         </v-card>
     </v-dialog>
@@ -63,6 +63,8 @@
 <script>
     import Photo from "../model/photo";
     import PhotoEditMeta from "./photo-edit/meta.vue";
+    import PhotoEditLabels from "./photo-edit/labels.vue";
+    import PhotoEditFiles from "./photo-edit/files.vue";
     import PhotoEditTodo from "./photo-edit/todo.vue";
 
     export default {
@@ -74,6 +76,8 @@
         },
         components: {
             'p-tab-photo-edit-meta': PhotoEditMeta,
+            'p-tab-photo-edit-labels': PhotoEditLabels,
+            'p-tab-photo-edit-files': PhotoEditFiles,
             'p-tab-photo-edit-todo': PhotoEditTodo,
         },
         data() {
@@ -101,12 +105,12 @@
                 this.$emit('confirm');
             },
             prev() {
-                if(this.selected > 0) {
+                if (this.selected > 0) {
                     this.find(this.selected - 1);
                 }
             },
             next() {
-                if(this.selected < this.selection.length) {
+                if (this.selected < this.selection.length) {
                     this.find(this.selected + 1);
                 }
             },
@@ -115,7 +119,7 @@
                     return;
                 }
 
-                if(!this.selection || !this.selection[index]) {
+                if (!this.selection || !this.selection[index]) {
                     this.$notify.error("Invalid photo selected");
                     return
                 }
@@ -125,6 +129,7 @@
                 this.selectedId = this.selection[index];
 
                 this.model.find(this.selectedId).then(model => {
+                    model.refreshFileAttr();
                     this.model = model;
                     this.$refs.meta.refresh(model);
                     this.loading = false;

frontend/src/dialog/p-photo-share-dialog.vue

@@ -119,6 +119,7 @@
                 this.selectedId = this.selection[index];
 
                 this.model.find(this.selectedId).then(model => {
+                    model.refreshFileAttr();
                     this.model = model;
                     this.$refs.meta.refresh(model);
                     this.loading = false;

frontend/src/dialog/photo-edit/files.vue

@@ -0,0 +1,64 @@
+<template>
+    <div class="p-tab p-tab-photo-edit-files">
+        <v-data-table
+                :headers="listColumns"
+                :items="model.Files"
+                hide-actions
+                class="elevation-0 p-files p-files-list p-results"
+                disable-initial-sort
+                item-key="ID"
+                v-model="selected"
+                :no-data-text="this.$gettext('No files found')"
+        >
+            <template slot="items" slot-scope="props" class="p-file">
+                <td @click="openPhoto(props.index)" class="p-pointer" align="left">{{ props.item.FileName }}</td>
+                <td>{{ props.item.FileType }}</td>
+                <td>{{ props.item.FileWidth ? props.item.FileWidth : "" }}</td>
+                <td>{{ props.item.FileHeight ? props.item.FileHeight : "" }}</td>
+                <td><v-btn icon small flat :ripple="false"
+                           class="p-photo-like"
+                           @click.stop.prevent="changePrimary(props.index)">
+                    <v-icon v-if="props.item.FilePrimary" color="secondary-dark">check_box</v-icon>
+                    <v-icon v-else color="secondary-dark">check_box_outline_blank</v-icon>
+                </v-btn>
+                </td>
+                <td>{{ props.item.CreatedAt | luxon:format('dd/MM/yyyy hh:mm:ss') }}</td>
+            </template>
+        </v-data-table>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'p-tab-photo-edit-files',
+        props: {
+            model: Object,
+        },
+        data() {
+            return {
+                config: this.$config.values,
+                readonly: this.$config.getValue("readonly"),
+                selected: [],
+                listColumns: [
+                    {text: this.$gettext('Name'), value: 'FileName', align: 'left'},
+                    {text: this.$gettext('Type'), value: 'FileType'},
+                    {text: this.$gettext('Width'), value: 'FileWidth'},
+                    {text: this.$gettext('Height'), value: 'FileHeight'},
+                    {text: this.$gettext('Primary'), value: 'FilePrimary', align: 'left'},
+                    {text: this.$gettext('Added'), value: 'CreatedAt'},
+                ],
+            };
+        },
+        computed: {
+        },
+        methods: {
+            openPhoto() {
+                this.$viewer.show([this.model], 0)
+            },
+            changePrimary() {
+            },
+            refresh() {
+            },
+        },
+    };
+</script>

frontend/src/dialog/photo-edit/labels.vue

@@ -0,0 +1,47 @@
+<template>
+    <div class="p-tab p-tab-photo-edit-labels">
+        <v-data-table
+                :headers="listColumns"
+                :items="model.Labels"
+                hide-actions
+                class="elevation-0 p-files p-files-list p-results"
+                disable-initial-sort
+                item-key="ID"
+                v-model="selected"
+                :no-data-text="this.$gettext('No labels found')"
+        >
+            <template slot="items" slot-scope="props" class="p-file">
+                <td>{{ props.item.LabelName }}</td>
+                <td>{{ props.item.LabelPriority }}</td>
+                <td align="left">{{ props.item.CreatedAt | luxon:format('dd/MM/yyyy hh:mm:ss') }}</td>
+            </template>
+        </v-data-table>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'p-tab-photo-edit-labels',
+        props: {
+            model: Object,
+        },
+        data() {
+            return {
+                config: this.$config.values,
+                readonly: this.$config.getValue("readonly"),
+                selected: [],
+                listColumns: [
+                    {text: this.$gettext('Label'), value: 'LabelName', align: 'left'},
+                    {text: this.$gettext('Priority'), value: 'LabelPriority'},
+                    {text: this.$gettext('Added'), value: 'CreatedAt', align: 'left'},
+                ],
+            };
+        },
+        computed: {
+        },
+        methods: {
+            refresh() {
+            },
+        },
+    };
+</script>

frontend/src/dialog/photo-edit/meta.vue

@@ -381,8 +381,6 @@
             refresh(model) {
                 if(!model.hasId()) return;
 
-                model.refreshFileAttr();
-
                 if(model.TakenAt) {
                     const date = DateTime.fromISO(model.TakenAt).toUTC();
                     this.date = date.toISODate();