Added functioning tag deletion (9fde5619) · Commits · OpenFlexure / openflexure-microscope-server

src/components/paneDisplayComponents/galleryComponents/captureCard.vue

+128 −15

Original line number	Diff line number	Diff line
		<template>
		<div class="captureCard uk-card uk-card-default uk-padding-small uk-width-medium uk-margin-right">
		<div class="captureCard uk-card uk-card-default uk-card-hover uk-padding-remove uk-width-medium uk-margin-right">

		<div class="uk-card-media-top">

		<a class="lightbox-link" v-bind:href="ImgURL" v-bind:data-caption="metadata.filename">
		<img class="uk-width-1-1" v-bind:src="ThumbURL" v-bind:alt="metadata.id" uk-img>
		</a>

		<div class="uk-card-header uk-padding-small">
		<div class="uk-grid-small uk-flex-middle" uk-grid>
		<div class="uk-width-auto">
		<img class="uk-border-circle" width="40" height="40" src="../../../assets/images/logo.png">
		</div>
		<div class="uk-width-expand">
		<h3 class="uk-card-title uk-margin-remove-bottom">Title</h3>

		<div class="uk-card-body uk-padding-small">
		<p> {{ metadata.filename }} </p>
		<p class="uk-text-meta uk-margin-remove-top"><time>{{ metadata.time }}</time></p>

		</div>
		</div>

		<div class="uk-card-footer uk-padding-small">
		<span v-for="tag in tags" :key="tag" v-on:click="delTagConfirm(tag)" class="uk-label uk-margin-small-right deletable-label"> {{ tag }} </span>

		<a v-bind:href="TagModalTarget" uk-toggle>
		<span class="uk-label uk-label-success uk-margin-small-right">Add</span>
		</a>

		</div>

		<div class="uk-card-body uk-padding-small">
		{{ metadata.id }}
		<div v-bind:id="TagModalID" uk-modal>

		<form class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical" @submit.prevent="handleTagSubmit">

		<div class="uk-inline">
		<span class="uk-form-icon" uk-icon="icon: tag"></span>
		<input v-model="newtag" class="uk-input uk-form-width-medium uk-form-small" type="text" name="tagname" placeholder="tag">

		<button class="uk-button uk-button-default uk-margin-left uk-form-small uk-modal-close" type="button">Cancel</button>
		<button type="submit" class="uk-button uk-button-primary uk-margin-left uk-form-small">Save</button>
		</div>

		<div class="uk-card-footer uk-padding-small">
		<span class="uk-label uk-margin-small-right">Tag1</span>
		<span class="uk-label uk-margin-small-right">Tag2</span>
		</form>

		</div>

		</div>
		</template>

		<script>
		import UIkit from 'uikit';
		import axios from 'axios'

		// Export main app
		export default {
		@@ -42,11 +62,104 @@ export default {
		}
		},

		data: function () {
		return {
		tags: [],
		newtag: "",
		}
		},

		methods: {
		handleTagSubmit: function(event) {
		console.log(this.TagURL);
		console.log(this.newtag);
		this.newTagRequest(this.newtag);
		this.newtag = "";
		UIkit.modal(event.target.parentNode).hide();
		},

		newTagRequest: function(tag_string) {
		// Send tag PUT request
		axios.put(this.TagURL, [tag_string])
		.then(response => {
		// Update tag array
		this.getTagRequest()
		})
		.catch(error => {
		this.$store.dispatch('handleHTTPError', error); // Let store handle error
		})
		},

		delTagConfirm: function(tag_string) {
		var self = this;
		UIkit.modal.confirm(`Remove tag '${tag_string}'?`).then(function() {
		self.delTagRequest(tag_string)
		}, function () {
		console.log('Rejected.')
		});
		},

		delTagRequest: function(tag_string) {
		console.log(tag_string)
		// Send tag DELETE request
		axios.delete(this.TagURL, {data: [tag_string]})
		.then(response => {
		// Update tag array
		this.getTagRequest()
		})
		.catch(error => {
		this.$store.dispatch('handleHTTPError', error); // Let store handle error
		})
		},

		getTagRequest: function() {
		// Send tag request
		axios.get(this.TagURL)
		.then(response => {
		this.tags = response.data.metadata.tags
		})
		.catch(error => {
		this.$store.dispatch('handleHTTPError', error); // Let store handle error
		})
		},

		makeModalName: function(prefix) {
		return prefix + this.metadata.id
		}

		},

		created: function () {
		this.getTagRequest()
		},

		computed: {
		TagModalID: function () {
		return this.makeModalName("tag-modal-")
		},
		TagModalTarget: function () {
		return "#" + this.TagModalID
		},
		ThumbURL: function () {
		return this.$store.getters.uri + "/camera/capture/" + this.metadata.id + "/download?thumbnail=true"
		},
		ImgURL: function () {
		return this.$store.getters.uri + "/camera/capture/" + this.metadata.id + "/download/" + this.metadata.filename
		},
		TagURL: function () {
		return this.$store.getters.uri + "/camera/capture/" + this.metadata.id + "/tags"
		}
		}

		}
		</script>

		<style scoped lang="less">
		.deletable-label {
		cursor: pointer;
		}

		.deletable-label:hover {
		background-color: #f0506e;
		}
		</style>
		No newline at end of file

src/components/paneDisplayComponents/galleryDisplay.vue

+18 −10

Original line number	Diff line number	Diff line
		<template>
		<div class="galleryDisplay uk-padding uk-padding-remove-right">

		<div class="uk-grid-medium uk-padding uk-padding-remove-right" uk-grid>
		<div uk-lightbox="toggle: .lightbox-link">
		<div class="uk-grid-medium uk-padding uk-padding-remove-right uk-grid-match" uk-grid>

		<captureCard
		v-for="capture in captureList"
		@@ -13,6 +14,8 @@
		</div>

		</div>

		</div>
		</template>

		<script>
		@@ -39,7 +42,6 @@ export default {
		axios.get(this.captureApiUri)
		.then(response => {
		this.$store.dispatch('updateState'); // Update store state for good measure
		console.log(response.data)
		this.captureList = response.data; // Update boxes from response
		})
		.catch(error => {
		@@ -55,8 +57,14 @@ export default {
		computed: {
		captureApiUri: function () {
		return this.$store.getters.uri + "/camera/capture"
		},
		orderedcaptureList: function () {
		return _.orderBy(this.captureList, 'metadata_path', 'desc')
		}
		}

		}
		</script>

		<style scoped lang="less">
		</style>

src/components/panelDisplay.vue

+1 −1

Original line number	Diff line number	Diff line
		@@ -6,7 +6,7 @@
		</ul>
		<ul class="uk-switcher uk-flex uk-flex-1">
		<li class="uk-height-1-1 uk-width-1-1 "><streamDisplay/></li>
		<li v-if="$store.getters.ready" class="uk-height-1-1 uk-width-1-1 "><galleryDisplay/></li>
		<li v-if="$store.getters.ready" class="uk-height-1-1 uk-width-1-1 uk-overflow-auto "><galleryDisplay/></li>
		</ul>
		</div>
		</template>