field input-select-search, semaphore await

package.json

@@ -23,6 +23,7 @@
 		"extends": "./node_modules/@signifly/config/eslint.vue.js"
 	},
 	"dependencies": {
+		"async-sema": "3.1.0",
 		"axios": "0.18.1",
 		"element-ui": "2.11.1",
 		"emojilib": "2.4.0",

src/components/fields/input-select-multi-search.vue

@@ -12,7 +12,6 @@
 			:reserve-keyword="true"
 			:remote-method="getItems"
 			@change="update"
-			@visible-change="initSearch"
 		>
 			<Option v-for="item in optionItemsC" v-bind="item" :key="item.value" />
 		</Select>
@@ -22,6 +21,8 @@
 <script>
 import {get, merge, uniqBy, pick} from "lodash";
 import {Select, Option} from "element-ui";
+const {Sema} = require("async-sema");
+const s = new Sema(1);
 
 export default {
 	components: {Select, Option},
@@ -65,7 +66,6 @@ export default {
 	},
 	data() {
 		return {
-			opened: false,
 			optionItems: []
 		};
 	},
@@ -88,22 +88,19 @@ export default {
 			}))
 	},
 	methods: {
-		initSearch() {
-			if (!this.opened) {
-				this.opened = true;
-				this.getItems();
-			}
-		},
-
 		async getItems(search) {
 			const key = this._options.key;
 
+			await s.acquire();
+
 			const {data} = await this.$axios.get(this.endpoint.url, {
 				params: merge({}, this.endpoint.params, {
 					filter: {search}
 				})
 			});
 
+			s.release();
+
 			this.optionItems = key ? get(data, key) : data;
 		},
 

src/components/fields/input-select-search.vue

@@ -9,7 +9,6 @@
 			:filterable="true"
 			:remote="true"
 			@change="update"
-			@visible-change="open"
 		>
 			<Option v-for="item in itemsC" :key="item.value" v-bind="item" />
 		</Select>
@@ -19,6 +18,8 @@
 <script>
 import {Select, Option} from "element-ui";
 import {merge, get, uniqBy} from "lodash";
+const {Sema} = require("async-sema");
+const s = new Sema(1);
 
 export default {
 	components: {Select, Option},
@@ -57,7 +58,6 @@ export default {
 	data() {
 		return {
 			selectedItem: null,
-			opened: false,
 			items: []
 		};
 	},
@@ -82,22 +82,19 @@ export default {
 		}
 	},
 	methods: {
-		open() {
-			if (!this.opened) {
-				this.opened = true;
-				this.getItems();
-			}
-		},
-
 		async getItems(search) {
 			const key = this._options.key;
 
+			await s.acquire();
+
 			const {data} = await this.$axios.get(this.endpoint.url, {
 				params: merge({}, this.endpoint.params, {
 					filter: {search}
 				})
 			});
 
+			s.release();
+
 			this.items = key ? get(data, key) : data;
 		},
 

yarn.lock

@@ -1841,6 +1841,11 @@ async-limiter@~1.0.0:
   resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.0.tgz#78faed8c3d074ab81f22b4e985d79e8738f720f8"
   integrity sha512-jp/uFnooOiO+L211eZOoSyzpOITMXx1rBITauYykG3BRYPu8h0UcxsPNB04RR5vo4Tyz3+ay17tR6JVf9qzYWg==
 
+[email protected]:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/async-sema/-/async-sema-3.1.0.tgz#3a813beb261e4cc58b19213916a48e931e21d21e"
+  integrity sha512-+JpRq3r0zjpRLDruS6q/nC4V5tzsaiu07521677Mdi5i+AkaU/aNJH38rYHJVQ4zvz+SSkjgc8FUI7qIZrR+3g==
+
 async-validator@~1.8.1:
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/async-validator/-/async-validator-1.8.5.tgz#dc3e08ec1fd0dddb67e60842f02c0cd1cec6d7f0"