From 601377d5376507307cccbf1b1a3c91c74376033e Mon Sep 17 00:00:00 2001
From: Michael Mayer <michael@liquidbytes.net>
Date: Sun, 26 Jan 2020 16:06:03 +0100
Subject: [PATCH] Frontend: Improve file list #217

Signed-off-by: Michael Mayer <michael@liquidbytes.net>
---
 frontend/src/css/app.css                 |  5 +++
 frontend/src/dialog/photo-edit/files.vue | 43 +++++++++++++++---------
 2 files changed, 33 insertions(+), 15 deletions(-)

diff --git a/frontend/src/css/app.css b/frontend/src/css/app.css
index 54bd046be..779a32f5f 100644
--- a/frontend/src/css/app.css
+++ b/frontend/src/css/app.css
@@ -164,3 +164,8 @@ body.public #photoprism .p-public,
 body.readonly #photoprism .p-readonly {
     display: block;
 }
+
+div.v-dialog table.v-table thead th,
+div.v-dialog table.v-table tbody td {
+    padding: 0 16px;
+}
diff --git a/frontend/src/dialog/photo-edit/files.vue b/frontend/src/dialog/photo-edit/files.vue
index d61413d90..c0702ca4e 100644
--- a/frontend/src/dialog/photo-edit/files.vue
+++ b/frontend/src/dialog/photo-edit/files.vue
@@ -4,25 +4,37 @@
                 :headers="listColumns"
                 :items="model.Files"
                 hide-actions
-                class="elevation-0 p-files p-files-list p-results"
                 disable-initial-sort
+                class="elevation-0 p-files p-files-list p-results"
                 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>
+                    <a :href="'/api/v1/download/' + props.item.FileHash" class="secondary-dark--text" target="_blank">
+                        {{ props.item.FileName }}
+                    </a>
+                </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)">
+                <td class="text-xs-center">
                     <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>
+                <td class="text-xs-center">
+                    <v-icon v-if="props.item.FileSidecar" color="secondary-dark">check_box</v-icon>
+                    <v-icon v-else color="secondary-dark">check_box_outline_blank</v-icon>
+                </td>
+                <td class="text-xs-center">
+                    <v-icon v-if="props.item.FileMissing" color="secondary-dark">check_box</v-icon>
+                    <v-icon v-else color="secondary-dark">check_box_outline_blank</v-icon>
+                </td>
+                <td class="text-xs-center">
+                    <v-icon v-if="props.item.FileDuplicate" color="secondary-dark">check_box</v-icon>
+                    <v-icon v-else color="secondary-dark">check_box_outline_blank</v-icon>
+                </td>
             </template>
         </v-data-table>
     </div>
@@ -40,17 +52,18 @@
                 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'},
+                    {text: this.$gettext('Name'), value: 'FileName', sortable: false, align: 'left'},
+                    {text: this.$gettext('Type'), value: 'FileType', sortable: false},
+                    {text: this.$gettext('Width'), value: 'FileWidth', sortable: false},
+                    {text: this.$gettext('Height'), value: 'FileHeight', sortable: false},
+                    {text: this.$gettext('Primary'), value: 'FilePrimary', sortable: false, align: 'center'},
+                    {text: this.$gettext('Sidecar'), value: 'FileSidecar', sortable: false, align: 'center'},
+                    {text: this.$gettext('Missing'), value: 'FileMissing', sortable: false, align: 'center'},
+                    {text: this.$gettext('Duplicate'), value: 'FileDuplicate', sortable: false, align: 'center'},
                 ],
             };
         },
-        computed: {
-        },
+        computed: {},
         methods: {
             openPhoto() {
                 this.$viewer.show([this.model], 0)