ctucx.git: ctucx.things

simple inventory management web-app

1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26 
27 
28 
29 
30 
31 
32 
33 
34 
35 
36 
37 
38 
39 
40 
41 
42 
43 
44 
45 
46 
47 
48 
49 
50 
<style lang="scss">
</style>

<template>
	<modal id="itemImageDialog" :shown="shown" @hide="shown = false">
		<h2>Add image</h2>
		<form id="itemImageUrlForm" @submit.prevent="saveImageUrl()">
			<div class="lpFields">
				<input id="itemImageUrl" v-model="imageUrl" type="text" placeholder="Image URL">
				<div class="lpButtons">
					<input type="submit" class="lpButton" value="Save">
				</div>
			</div>
		</form>
	</modal>
</template>

<script>
import modal from './modal.vue';

export default {
	name: 'ItemImage',
	components: {
		modal,
	},
	data() {
		return {
			shown:    false,
			item:     false,
			imageUrl: null,
		};
	},
	mounted() {
		bus.$on('updateItemImage', (item) => {
			this.shown    = true;
			this.item     = item;
			this.imageUrl = item.imageUrl;
		});
	},
	methods: {
		saveImageUrl() {
			this.$store.commit('updateItemImageUrl', {
				item:     this.item,
				imageUrl: this.imageUrl,
			});
			this.shown = false;
		},
	},
};
</script>