setup

2026-08-22 13:54:07 +00:00 · 2021-06-17 09:53:04 +08:00
commit 8fa80e4a1a
2382 changed files with 196486 additions and 0 deletions
@@ -0,0 +1,140 @@
+<template>
+	<div class="form-group" :class="{'has-error': form.errors.has(input_name)}">
+	    <label v-if="label" for="name">{{ label }}</label>
+		<vue-tags-input
+			ref="tags_input" 
+			v-model="tag"
+			:tags="tags"
+			:autocomplete-min-length="0"
+			:add-on-blur="false"
+			:autocomplete-items="autocompleteItems"
+			:before-deleting-tag="deleteTag"
+			:max-tags="limit_tag"
+			:add-only-from-autocomplete="!can_add_new_tag ? true : false"
+			:placeholder="''"
+			@tags-changed="update"
+			@before-adding-tag="checkTag"
+			@focus="focus()"
+		>
+		</vue-tags-input>
+        <div class="text-danger text-left" v-if="form.errors.has(input_name)" v-text="form.errors.get(input_name)"></div>
+	</div>
+</template>
+
+<script type="text/javascript">
+	export default {
+		props: {
+            input_name: String,
+            form: Object,
+            exist_data: Array,
+            data_set: Array,
+            placeholder: String,
+            label: String,
+            endpoint: String,
+            params: Object,
+            search_field: String,
+            is_array: Boolean,
+            limit_tag: Number,
+            return_key: String,
+            can_add_new_tag: Boolean 
+        },
+		data() {
+			let vm = this;
+			return {
+				tag: '',
+				original_tag: [],
+				tags: vm.exist_data ? vm.exist_data : [],
+				autocompleteItems: [],
+				pervious_item: []
+			}
+		},
+		methods: {
+			focus() {
+				let vm = this;
+				if (vm.pervious_item.length > 0) {
+					vm.pervious_item = [];
+					vm.initItems();
+				}
+			},
+			checkTag(obj) {
+				let vm = this;
+				if (vm.limit_tag >= vm.tags.length) {
+					vm.tags = [];					
+				}
+				obj.addTag();
+			},
+			update(newTags = '') {
+				let vm = this;
+				vm.tags = newTags;
+				vm.pervious_item = vm.autocompleteItems;
+				vm.autocompleteItems = [];
+				vm.keyConvert();
+				vm.$emit('clicked',  vm.extractRow(vm.tags));
+				vm.form.errors.clear(vm.input_name);
+		    },
+		    deleteTag() {
+				vm.$emit('clicked',  vm.extractRow(vm.tags));
+		    },
+		    keyConvert() {
+		    	let vm = this;
+		    	if (!vm.original) {
+					vm.form[vm.input_name] = General.getKey(vm.tags, (!vm.return_key ? 'id' : vm.return_key));
+		    	}
+		    	else {
+		    		vm.form[vm.input_name] = vm.original_tag;
+		    	}
+		    },
+			initItems() {
+				let vm = this;
+
+
+				if (vm.pervious_item.length > 0) {
+					return;
+				}
+
+				if (!vm.data_set) {
+					let search_field = {};
+					search_field[vm.search_field] = vm.array ? [vm.tag] : vm.tag;
+
+					let form = new Form({...vm.params, ...search_field});
+					General.getCall(vm.endpoint, form).then(data => {
+						vm.autocompleteItems = data.data.map(item => {
+		    			vm.original_tag.push(vm.tag);
+
+						return { 
+							id: item.id,
+							hash_id: (item.hash_id ? item.hash_id : ''),
+							row: item,
+							text: (item.name ? item.name : item.hash_id ) 
+						};
+						});
+					});
+				}
+				else {
+					vm.autocompleteItems = vm.data_set;
+				}
+		    },
+		    extractRow() {
+				let vm = this;
+		    	let return_row = [];
+				vm.tags.forEach(function(element, index) {
+					return_row.push(element.row);
+				});
+		    	return return_row;
+		    }
+		},
+		created() {
+			let vm = this;
+        	setTimeout(function(){
+        		vm.tags = vm.exist_data ? vm.exist_data : [];
+				vm.$emit('clicked', vm.extractRow(vm.tags));
+			}, 1000);
+
+			vm.initItems();
+
+		},
+		watch: {
+			'tag': 'initItems',
+		}
+	}
+</script>