Added pagination to gallery

openflexure_microscope/api/static/package-lock.json

@@ -2828,16 +2828,6 @@
           "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
           "dev": true
         },
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
         "browserslist": {
           "version": "4.14.3",
           "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.14.3.tgz",
@@ -2882,36 +2872,12 @@
           "integrity": "sha512-ziNcheTGTHlu9g34EVoHQdIu5g4foc8EsxMGC7Xkokmvw0dqNtX8BS8RgCgFBaAiSp2IdjvBxNdh0ssib28eVQ==",
           "dev": true
         },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true,
-          "optional": true
-        },
         "electron-to-chromium": {
           "version": "1.3.570",
           "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.570.tgz",
           "integrity": "sha512-Y6OCoVQgFQBP5py6A/06+yWxUZHDlNr/gNDGatjH8AZqXl8X0tE4LfjLJsXGz/JmWJz8a6K7bR1k+QzZ+k//fg==",
           "dev": true
         },
-        "emojis-list": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
-          "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
-          "dev": true,
-          "optional": true
-        },
         "fast-deep-equal": {
           "version": "3.1.3",
           "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -2945,35 +2911,6 @@
           "integrity": "sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==",
           "dev": true
         },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true,
-          "optional": true
-        },
-        "json5": {
-          "version": "2.1.3",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-2.1.3.tgz",
-          "integrity": "sha512-KXPvOm8K9IJKFM0bmdn8QXh7udDh1g/giieX0NLCaMnb4hEiVFqnop2ImTXCc5e0/oHz3LTqmHGtExn5hfMkOA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "minimist": "^1.2.5"
-          }
-        },
-        "loader-utils": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
-          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^2.1.2"
-          }
-        },
         "locate-path": {
           "version": "5.0.0",
           "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
@@ -3116,16 +3053,6 @@
             "ansi-regex": "^5.0.0"
           }
         },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        },
         "terser-webpack-plugin": {
           "version": "2.3.8",
           "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-2.3.8.tgz",
@@ -3152,31 +3079,6 @@
             "psl": "^1.1.28",
             "punycode": "^2.1.1"
           }
-        },
-        "vue-loader-v16": {
-          "version": "npm:vue-loader@16.0.0-beta.8",
-          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-beta.8.tgz",
-          "integrity": "sha512-oouKUQWWHbSihqSD7mhymGPX1OQ4hedzAHyvm8RdyHh6m3oIvoRF+NM45i/bhNOlo8jCnuJhaSUf/6oDjv978g==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "chalk": "^4.1.0",
-            "hash-sum": "^2.0.0",
-            "loader-utils": "^2.0.0"
-          },
-          "dependencies": {
-            "chalk": {
-              "version": "4.1.0",
-              "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
-              "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
-              "dev": true,
-              "optional": true,
-              "requires": {
-                "ansi-styles": "^4.1.0",
-                "supports-color": "^7.1.0"
-              }
-            }
-          }
         }
       }
     },
@@ -13389,6 +13291,104 @@
         }
       }
     },
+    "vue-loader-v16": {
+      "version": "npm:vue-loader@16.0.0-beta.9",
+      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-beta.9.tgz",
+      "integrity": "sha512-mu9pg6554GbXDSO8LlxkQM6qUJzUkb/A0FJc9LgRqnU9MCnhzEXwCt1Zx5NObvFpzs2mH2dH/uUCDwL8Qaz9sA==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "chalk": "^4.1.0",
+        "hash-sum": "^2.0.0",
+        "loader-utils": "^2.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true,
+          "optional": true
+        },
+        "emojis-list": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
+          "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
+          "dev": true,
+          "optional": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true,
+          "optional": true
+        },
+        "json5": {
+          "version": "2.1.3",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-2.1.3.tgz",
+          "integrity": "sha512-KXPvOm8K9IJKFM0bmdn8QXh7udDh1g/giieX0NLCaMnb4hEiVFqnop2ImTXCc5e0/oHz3LTqmHGtExn5hfMkOA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "minimist": "^1.2.5"
+          }
+        },
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "vue-observe-visibility": {
       "version": "0.4.6",
       "resolved": "https://registry.npmjs.org/vue-observe-visibility/-/vue-observe-visibility-0.4.6.tgz",
@@ -13446,6 +13446,12 @@
         "vue": "^2.6.10"
       }
     },
+    "vuejs-paginate": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/vuejs-paginate/-/vuejs-paginate-2.1.0.tgz",
+      "integrity": "sha512-gnwyXlmCiDOu9MLWxN5UJ4PGijKGNOMpHG8ujsrynCzTJljn/rp7Jq0WiDGDAMi5/u0AHuYIHhced+tUW4jblA==",
+      "dev": true
+    },
     "vuex": {
       "version": "3.5.1",
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.5.1.tgz",

openflexure_microscope/api/static/package.json

@@ -36,6 +36,7 @@
     "vue-plugin-load-script": "^1.3.2",
     "vue-template-compiler": "^2.6.12",
     "vue-tour": "^1.5.0",
+    "vuejs-paginate": "^2.1.0",
     "vuex": "^3.5.1"
   },
   "postcss": {

openflexure_microscope/api/static/src/components/tabContentComponents/galleryComponents/captureCard.vue

@@ -212,8 +212,9 @@ export default {
   },
 
   created: function() {
-    this.getTagRequest();
+    // Get initial metadata from prop
-    this.getAnnotationsRequest();
+    this.tags = this.captureState.metadata.image.tags;
+    this.annotations = this.captureState.metadata.annotations;
   },
 
   methods: {

openflexure_microscope/api/static/src/components/tabContentComponents/galleryComponents/scanCard.vue

@@ -6,12 +6,12 @@
       <a href="#">
         <img
           class="uk-width-1-1"
-          :data-src="thumbnail"
+          :data-src="scanState.thumbnail"
-          :alt="metadata.image.id"
+          :alt="scanState.metadata.image.id"
           width="300"
           height="225"
           uk-img
-          @click="$root.$emit('globalUpdateCaptureFolder', metadata.image.id)"
+          @click="onClick"
         />
       </a>
     </div>
@@ -22,7 +22,8 @@
         uk-grid
       >
         <div class="uk-margin-remove-top uk-padding-remove uk-width-expand">
-          <b>{{ metadata.type || "Dataset" }}: </b> {{ metadata.image.name }}
+          <b>{{ scanState.metadata.type || "Dataset" }}: </b>
+          {{ scanState.metadata.image.name }}
         </div>
         <div class="uk-margin-remove-top uk-padding-remove uk-width-auto">
           <a href="#" class="uk-icon" @click="delAllConfirm()">
@@ -34,7 +35,7 @@
       <div
         class="uk-text-meta uk-margin-remove-top uk-padding-remove uk-width-expand"
       >
-        <time>{{ metadata.image.acquisitionDate }}</time>
+        <time>{{ scanState.metadata.image.acquisitionDate }}</time>
       </div>
       <div
         class="uk-text-meta uk-margin-remove-top uk-padding-remove uk-width-auto"
@@ -45,7 +46,7 @@
 
     <div class="uk-card-footer uk-padding-small">
       <span
-        v-for="tag in metadata.image.tags"
+        v-for="tag in scanState.metadata.image.tags"
         :key="tag"
         class="uk-label uk-margin-small-right deletable-label"
       >
@@ -56,13 +57,16 @@
     <div :id="metadataModalID" uk-modal>
       <div class="uk-modal-dialog uk-modal-body">
         <button class="uk-modal-close-default" type="button" uk-close></button>
-        <h2 class="uk-modal-title">{{ metadata.image.name }}</h2>
+        <h2 class="uk-modal-title">{{ scanState.metadata.image.name }}</h2>
-        <p><b>Time: </b>{{ metadata.image.acquisitionDate }}</p>
+        <p><b>Time: </b>{{ scanState.metadata.image.acquisitionDate }}</p>
-        <p><b>ID: </b>{{ metadata.image.id }}</p>
+        <p><b>ID: </b>{{ scanState.metadata.image.id }}</p>
 
         <hr />
 
-        <div v-for="(value, key) in metadata.image.annotations" :key="key">
+        <div
+          v-for="(value, key) in scanState.metadata.image.annotations"
+          :key="key"
+        >
           <p>
             <b>{{ key }}: </b>{{ value }}
           </p>
@@ -80,17 +84,9 @@ export default {
   name: "ScanCard",
 
   props: {
-    metadata: {
+    scanState: {
       type: Object,
       required: true
-    },
-    thumbnail: {
-      type: String,
-      required: true
-    },
-    captures: {
-      type: Array,
-      required: true
     }
   },
 
@@ -109,7 +105,7 @@ export default {
     },
     allURLs: function() {
       var urls = [];
-      for (var capture of this.captures) {
+      for (var capture of this.scanState.captures) {
         urls.push(capture.links.self.href);
       }
       return urls;
@@ -117,8 +113,12 @@ export default {
   },
 
   methods: {
+    onClick: function() {
+      this.$emit("selectFolder", this.scanState.metadata.image.id);
+    },
+
     makeModalName: function(prefix) {
-      return prefix + this.metadata.image.id;
+      return prefix + this.scanState.metadata.image.id;
     },
 
     delAllConfirm: function() {
@@ -131,18 +131,10 @@ export default {
     },
 
     deleteAll: function() {
-      axios
+      axios.all(this.allURLs.map(l => axios.delete(l))).then(() => {
-        .all(this.allURLs.map(l => axios.delete(l)))
+        // Emit signal to update capture list
-        .then
+        this.$root.$emit("globalUpdateCaptures");
-        //axios.spread(function(...res) {
+      });
-        // all requests are now complete
-        //console.log(res);
-        //})
-        ()
-        .then(() => {
-          // Emit signal to update capture list
-          this.$root.$emit("globalUpdateCaptures");
-        });
     }
   }
 };

openflexure_microscope/api/static/src/components/tabContentComponents/galleryContent.vue

@@ -85,11 +85,7 @@
         v-if="galleryFolder"
         class="gallery-folder-heading uk-flex uk-flex-middle"
       >
-        <a
+        <a class="uk-icon uk-margin-remove" href="#" @click="galleryBack()">
-          class="uk-icon uk-margin-remove"
-          href="#"
-          @click="galleryFolder = ''"
-        >
           <i class="material-icons">arrow_back</i>
         </a>
         <div class="uk-margin-left">
@@ -102,25 +98,38 @@
 
       <!-- Gallery capture cards -->
       <div class="gallery-grid">
-        <div v-for="item in sortedItems" :key="item.metadata.id">
+        <div v-for="item in pagedItems" :key="item.metadata.id">
           <scanCard
             v-if="'isScan' in item"
-            :captures="item.captures"
+            :scan-state="item"
-            :metadata="item.metadata"
+            @selectFolder="selectFolder"
-            :thumbnail="item.thumbnail"
           />
           <captureCard v-else :capture-state="item" />
         </div>
       </div>
+
+      <Paginate
+        v-model="page"
+        :page-count="numberOfPages"
+        :page-range="3"
+        :margin-pages="1"
+        :container-class="'uk-pagination uk-flex-center'"
+        :prev-text="'Prev'"
+        :next-text="'Next'"
+        :page-class="'page-item'"
+        :disabled-class="'uk-disabled'"
+      >
+      </Paginate>
     </div>
   </div>
 </template>
 
 <script>
 import axios from "axios";
+import Paginate from "vuejs-paginate";
+
 import captureCard from "./galleryComponents/captureCard.vue";
 import scanCard from "./galleryComponents/scanCard.vue";
-
 import ZipDownloader from "./galleryComponents/zipDownloader";
 
 // Export main app
@@ -130,7 +139,8 @@ export default {
   components: {
     captureCard,
     scanCard,
-    ZipDownloader
+    ZipDownloader,
+    Paginate
   },
 
   data: function() {
@@ -140,7 +150,9 @@ export default {
       sortDescending: true,
       galleryFolder: "",
       scanTag: "scan",
-      unwatchStoreFunction: null
+      unwatchStoreFunction: null,
+      maxitems: 10,
+      page: 1
     };
   },
 
@@ -241,7 +253,6 @@ export default {
       // If galleryFolder (ie inside a scan folder), show scan captures
       // Otherwise, show root captures and scan cards
       if (this.galleryFolder) {
-        console.log(this.allScans[this.galleryFolder].captures);
         return this.allScans[this.galleryFolder].captures;
       } else {
         return this.noScanCaptures.concat(this.scanList);
@@ -275,6 +286,15 @@ export default {
     sortedItems: function() {
       // Sort filteredItems using sortCaptures function
       return this.sortCaptures(this.filteredItems);
+    },
+
+    pagedItems: function() {
+      let startIndex = (this.page - 1) * this.maxitems;
+      return this.sortedItems.slice(startIndex, startIndex + this.maxitems);
+    },
+
+    numberOfPages: function() {
+      return Math.floor(this.sortedItems.length / this.maxitems);
     }
   },
 
@@ -285,10 +305,6 @@ export default {
     this.$root.$on("globalUpdateCaptures", () => {
       this.updateCaptures();
     });
-    // A global signal listener to set the gallery folder
-    this.$root.$on("globalUpdateCaptureFolder", folder => {
-      this.galleryFolder = folder;
-    });
   },
 
   created: function() {
@@ -312,8 +328,6 @@ export default {
   beforeDestroy() {
     // Remove global signal listener to perform a gallery refresh
     this.$root.$off("globalUpdateCaptures");
-    // Remove global signal listener to set the gallery folder
-    this.$root.$off("globalUpdateCaptureFolder");
     // Then we call that function here to unwatch
     if (this.unwatchStoreFunction) {
       this.unwatchStoreFunction();
@@ -375,6 +389,16 @@ export default {
       } else {
         return list.sort(compare);
       }
+    },
+
+    galleryBack: function() {
+      this.galleryFolder = "";
+      this.page = 1;
+    },
+
+    selectFolder: function(folderID) {
+      console.log(folderID);
+      this.galleryFolder = folderID;
     }
   }
 };
@@ -396,6 +420,7 @@ export default {
   display: grid;
   grid-template-columns: repeat(auto-fill, 320px);
   justify-content: center;
+  overflow-y: auto;
 }
 
 .gallery-grid > div {