From 3d828a7df04d148845507362c4db16f39a0d4c23 Mon Sep 17 00:00:00 2001
From: Reuben Dowle <reubendowle0@gmail.com>
Date: Thu, 20 Jul 2023 19:17:46 +1200
Subject: [PATCH] Frontend: Show thumbnail in the Labels tab of the edit dialog
 (#3532)

---
 frontend/src/dialog/photo/edit/labels.vue | 181 ++++++++++++----------
 1 file changed, 103 insertions(+), 78 deletions(-)

diff --git a/frontend/src/dialog/photo/edit/labels.vue b/frontend/src/dialog/photo/edit/labels.vue
index 8f9fb7fdb..e0a96c0f3 100644
--- a/frontend/src/dialog/photo/edit/labels.vue
+++ b/frontend/src/dialog/photo/edit/labels.vue
@@ -1,93 +1,115 @@
 <template>
   <div class="p-tab p-tab-photo-labels">
-    <v-data-table
-        v-model="selected"
-        :headers="listColumns"
-        :items="model.Labels"
-        hide-actions
-        class="elevation-0 p-files p-files-list p-results"
-        disable-initial-sort
-        item-key="ID"
-        :no-data-text="$gettext('No labels found')"
-    >
-      <template #items="props" class="p-file">
-        <td>
-          <v-edit-dialog
-              :return-value.sync="props.item.Label.Name"
-              lazy
-              class="p-inline-edit"
-              @save="renameLabel(props.item.Label)"
+    <v-layout row wrap align-top fill-height>
+      <v-flex
+        v-if="!$isMobile"
+        class="p-photo pa-2"
+        xs12 sm4 md2
+      >
+        <v-card tile
+                    class="ma-0 elevation-0"
+                    :title="model.Title">
+          <v-img :src="model.thumbnailUrl('tile_500')"
+                     aspect-ratio="1"
+                     class="card darken-1 elevation-0 clickable"
+                     @click.exact="openPhoto()"
           >
-            {{ props.item.Label.Name }}
-            <template #input>
+          </v-img>
+
+        </v-card>
+      </v-flex>
+      <v-flex xs12 sm8 md10 fill-height fill-width>
+        <v-data-table
+            v-model="selected"
+            :headers="listColumns"
+            :items="model.Labels"
+            hide-actions
+            class="elevation-0 p-files p-files-list p-results"
+            disable-initial-sort
+            item-key="ID"
+            :no-data-text="$gettext('No labels found')"
+        >
+          <template #items="props" class="p-file">
+            <td>
+              <v-edit-dialog
+                  :return-value.sync="props.item.Label.Name"
+                  lazy
+                  class="p-inline-edit"
+                  @save="renameLabel(props.item.Label)"
+              >
+                {{ props.item.Label.Name }}
+                <template #input>
+                  <v-text-field
+                      v-model="props.item.Label.Name"
+                      :rules="[nameRule]"
+                      :label="$gettext('Name')"
+                      color="secondary-dark"
+                      class="input-rename background-inherit elevation-0"
+                      single-line autofocus solo hide-details
+                  ></v-text-field>
+                </template>
+              </v-edit-dialog>
+            </td>
+            <td class="text-xs-left">{{ sourceName(props.item.LabelSrc) }}</td>
+            <td class="text-xs-center">{{ 100 - props.item.Uncertainty }}%</td>
+            <td class="text-xs-center">
+              <v-btn v-if="disabled" icon small flat :ripple="false"
+                     class="action-view" title="Search"
+                     @click.stop.prevent="searchLabel(props.item.Label)">
+                <v-icon color="secondary-dark">search</v-icon>
+              </v-btn>
+              <v-btn v-else-if="props.item.Uncertainty < 100 && props.item.LabelSrc === 'manual'" icon
+                     small flat :ripple="false"
+                     class="action-delete" title="Delete"
+                     @click.stop.prevent="removeLabel(props.item.Label)">
+                <v-icon color="secondary-dark">delete</v-icon>
+              </v-btn>
+              <v-btn v-else-if="props.item.Uncertainty < 100" icon small flat :ripple="false"
+                     class="action-remove" title="Remove"
+                     @click.stop.prevent="removeLabel(props.item.Label)">
+                <v-icon color="secondary-dark">remove</v-icon>
+              </v-btn>
+              <v-btn v-else icon small flat :ripple="false"
+                     class="action-on" title="Activate"
+                     @click.stop.prevent="activateLabel(props.item.Label)">
+                <v-icon color="secondary-dark">add</v-icon>
+              </v-btn>
+            </td>
+          </template>
+          <template v-if="!disabled" #footer>
+            <td>
               <v-text-field
-                  v-model="props.item.Label.Name"
+                  v-model="newLabel"
                   :rules="[nameRule]"
-                  :label="$gettext('Name')"
                   color="secondary-dark"
-                  class="input-rename background-inherit elevation-0"
-                  single-line autofocus solo hide-details
+                  browser-autocomplete="off"
+                  :label="$gettext('Name')"
+                  single-line
+                  flat solo hide-details
+                  autofocus
+                  class="input-label"
+                  @keyup.enter.native="addLabel"
               ></v-text-field>
-            </template>
-          </v-edit-dialog>
-        </td>
-        <td class="text-xs-left">{{ sourceName(props.item.LabelSrc) }}</td>
-        <td class="text-xs-center">{{ 100 - props.item.Uncertainty }}%</td>
-        <td class="text-xs-center">
-          <v-btn v-if="disabled" icon small flat :ripple="false"
-                 class="action-view" title="Search"
-                 @click.stop.prevent="searchLabel(props.item.Label)">
-            <v-icon color="secondary-dark">search</v-icon>
-          </v-btn>
-          <v-btn v-else-if="props.item.Uncertainty < 100 && props.item.LabelSrc === 'manual'" icon
-                 small flat :ripple="false"
-                 class="action-delete" title="Delete"
-                 @click.stop.prevent="removeLabel(props.item.Label)">
-            <v-icon color="secondary-dark">delete</v-icon>
-          </v-btn>
-          <v-btn v-else-if="props.item.Uncertainty < 100" icon small flat :ripple="false"
-                 class="action-remove" title="Remove"
-                 @click.stop.prevent="removeLabel(props.item.Label)">
-            <v-icon color="secondary-dark">remove</v-icon>
-          </v-btn>
-          <v-btn v-else icon small flat :ripple="false"
-                 class="action-on" title="Activate"
-                 @click.stop.prevent="activateLabel(props.item.Label)">
-            <v-icon color="secondary-dark">add</v-icon>
-          </v-btn>
-        </td>
-      </template>
-      <template v-if="!disabled" #footer>
-        <td>
-          <v-text-field
-              v-model="newLabel"
-              :rules="[nameRule]"
-              color="secondary-dark"
-              browser-autocomplete="off"
-              :label="$gettext('Name')"
-              single-line
-              flat solo hide-details
-              autofocus
-              class="input-label"
-              @keyup.enter.native="addLabel"
-          ></v-text-field>
-        </td>
-        <td class="text-xs-left">{{ sourceName('manual') }}</td>
-        <td class="text-xs-center">100%</td>
-        <td class="text-xs-center">
-          <v-btn icon small flat :ripple="false" title="Add"
-                 class="p-photo-label-add"
-                 @click.stop.prevent="addLabel">
-            <v-icon color="secondary-dark">add</v-icon>
-          </v-btn>
-        </td>
-      </template>
-    </v-data-table>
+            </td>
+            <td class="text-xs-left">{{ sourceName('manual') }}</td>
+            <td class="text-xs-center">100%</td>
+            <td class="text-xs-center">
+              <v-btn icon small flat :ripple="false" title="Add"
+                     class="p-photo-label-add"
+                     @click.stop.prevent="addLabel">
+                <v-icon color="secondary-dark">add</v-icon>
+              </v-btn>
+            </td>
+          </template>
+        </v-data-table>
+      </v-flex>
+    </v-layout>
   </div>
 </template>
 
 <script>
 import Label from "model/label";
+import Thumb from "model/thumb";
 
 export default {
   name: 'PTabPhotoLabels',
@@ -170,6 +192,9 @@ export default {
       this.$router.push({name: 'all', query: {q: 'label:' + label.Slug}}).catch(() => {});
       this.$emit('close');
     },
+    openPhoto() {
+      this.$viewer.show(Thumb.fromFiles([this.model]), 0);
+    },
   },
 };
 </script>