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 
51 
52 
53 
<style lang="scss">
</style>

<template>
	<modal id="itemLinkDialog" :shown="shown" @hide="shown = false">
		<h2>Add URL</h2>
		<form id="itemLinkForm" @submit.prevent="addLink">
			<div class="lpFields">
				<input v-model="url" v-select-on-bus="'focus-url-field'" type="text" d="itemLink" placeholder="Item Link">
				<div class="lpButtons">
					<input type="submit" class="lpButton" value="Save">
				</div>
			</div>
		</form>
	</modal>
</template>

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

export default {
	name: 'ItemLink',
	components: {
		modal,
	},
	data() {
		return {
			shown: false,
			item:  false,
			url:   '',
		};
	},
	beforeMount() {
		bus.$on('updateItemLink', (item) => {
			this.shown = true;
			this.item  = item;
			this.url   = item.url;
		});
	},
	mounted() {
		bus.$emit('focus-url-field');
	},
	methods: {
		addLink() {
			this.$store.commit('updateItemLink', {
				item: this.item,
				url:  this.url,
			});
			this.shown = false;
		},
	},
};
</script>