Merge branch 'gallery-fixes' into 'v3'

Gallery fixes

See merge request openflexure/openflexure-microscope-server!591

webapp/eslint.config.mjs

@@ -5,7 +5,7 @@ import prettierConfig from "eslint-config-prettier";
 import globals from "globals";
 import pinia from "eslint-plugin-pinia";
 
-const isProd = process.env.NODE_ENV === "production";
+const isDev = process.env.NODE_ENV === "development";
 
 export default [
   {
@@ -38,8 +38,8 @@ export default [
     rules: {
       "prettier/prettier": "warn",
       // Environment-based rules
-      "no-console": isProd ? "warn" : "off",
-      "no-debugger": isProd ? "warn" : "off",
+      "no-console": isDev ? "off" : ["warn", { allow: ["warn", "error"] }],
+      "no-debugger": isDev ? "off" : "warn",
 
       // Vue deprecations
       "vue/no-deprecated-slot-attribute": "warn",

webapp/src/App.vue

@@ -387,11 +387,4 @@ html {
   padding: 0;
   height: 100%;
 }
-
-.thumbnail-fit {
-  max-height: 120px;
-  max-width: 240px;
-  object-fit: contain;
-  overflow-y: hidden;
-}
 </style>

webapp/src/components/tabContentComponents/galleryComponents/galleryCard.vue

@@ -5,10 +5,11 @@
         <div class="view-image uk-padding-remove uk-height-1-1">
           <img
             id="thumbnail-stitched-image"
+            :class="[itemData?.dzi ? 'thumbnail-fit clickable' : 'thumbnail-fit disabled']"
             class="thumbnail-fit"
             :src="thumbnailPath"
             onerror="this.src = '/titleiconpink.svg'"
-            @click="requestViewer"
+            @click="itemData?.dzi && requestViewer()"
           />
         </div>
       </div>
@@ -192,4 +193,19 @@ ul {
 .gallery-card-title {
   text-align: center;
 }
+
+.thumbnail-fit {
+  max-height: 120px;
+  max-width: 240px;
+  object-fit: contain;
+  overflow-y: hidden;
+}
+
+.clickable {
+  cursor: pointer;
+}
+
+.disabled {
+  cursor: not-allowed;
+}
 </style>

webapp/src/components/tabContentComponents/galleryContent.vue

@@ -61,7 +61,7 @@
       </div>
     </div>
     <PaginateLinks
-      :total-pages="numberOfPages"
+      :total-pages="totalPages"
       :current-page="currentPage"
       @change-page="changePage"
     />
@@ -119,8 +119,7 @@ export default {
         return null;
       }
     },
-    // name changed as paginateLinks has the prop totalPages
-    numberOfPages() {
+    totalPages() {
       return Math.ceil((this.all_items?.length || 0) / this.itemsPerPage);
     },
     paginatedItems() {
@@ -190,7 +189,6 @@ export default {
           return b.created - a.created;
         });
         this.all_items = all_items;
-        console.debug("Gallery size: %s", this.all_items.length);
       } catch (err) {
         console.error("Failed to refresh gallery items.");
         console.error(err);