Added pagination to gallery (e1cca30d) · Commits · OpenFlexure / openflexure-microscope-server

openflexure_microscope/api/static/package-lock.json

+104 −98

Original line number	Diff line number	Diff line
		@@ -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

+1 −0

Original line number	Diff line number	Diff line
		@@ -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

+3 −2

Original line number	Diff line number	Diff line
		@@ -212,8 +212,9 @@ export default {
		},

		created: function() {
		this.getTagRequest();
		this.getAnnotationsRequest();
		// Get initial metadata from prop
		this.tags = this.captureState.metadata.image.tags;
		this.annotations = this.captureState.metadata.annotations;
		},

		methods: {

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

+25 −33

Original line number	Diff line number	Diff line
		@@ -6,12 +6,12 @@
		<a href="#">
		<img
		class="uk-width-1-1"
		:data-src="thumbnail"
		:alt="metadata.image.id"
		:data-src="scanState.thumbnail"
		: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>
		<p><b>Time: </b>{{ metadata.image.acquisitionDate }}</p>
		<p><b>ID: </b>{{ metadata.image.id }}</p>
		<h2 class="uk-modal-title">{{ scanState.metadata.image.name }}</h2>
		<p><b>Time: </b>{{ scanState.metadata.image.acquisitionDate }}</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,15 +131,7 @@ export default {
		},

		deleteAll: function() {
		axios
		.all(this.allURLs.map(l => axios.delete(l)))
		.then
		//axios.spread(function(...res) {
		// all requests are now complete
		//console.log(res);
		//})
		()
		.then(() => {
		axios.all(this.allURLs.map(l => axios.delete(l))).then(() => {
		// Emit signal to update capture list
		this.$root.$emit("globalUpdateCaptures");
		});

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

+44 −19

Original line number	Diff line number	Diff line
		@@ -85,11 +85,7 @@
		v-if="galleryFolder"
		class="gallery-folder-heading uk-flex uk-flex-middle"
		>
		<a
		class="uk-icon uk-margin-remove"
		href="#"
		@click="galleryFolder = ''"
		>
		<a class="uk-icon uk-margin-remove" href="#" @click="galleryBack()">
		<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"
		:metadata="item.metadata"
		:thumbnail="item.thumbnail"
		:scan-state="item"
		@selectFolder="selectFolder"
		/>
		<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 {