send update contact requests one-by-one to prevent 412 etag conflicts

Signed-off-by: Georg Ehrke <developer@georgehrke.com>

3 files changed, 23 insertions, 40 deletions

diff --git a/package-lock.json b/package-lock.json
index d28667dd..1178b347 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1405,11 +1405,6 @@
 			"integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=",
 			"dev": true
 		},
-		"asap": {
-			"version": "2.0.6",
-			"resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
-			"integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY="
-		},
 		"asn1": {
 			"version": "0.2.4",
 			"resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.4.tgz",
@@ -4028,8 +4023,7 @@
 				"ansi-regex": {
 					"version": "2.1.1",
 					"bundled": true,
-					"dev": true,
-					"optional": true
+					"dev": true
 				},
 				"aproba": {
 					"version": "1.2.0",
@@ -4050,14 +4044,12 @@
 				"balanced-match": {
 					"version": "1.0.0",
 					"bundled": true,
-					"dev": true,
-					"optional": true
+					"dev": true
 				},
 				"brace-expansion": {
 					"version": "1.1.11",
 					"bundled": true,
 					"dev": true,
-					"optional": true,
 					"requires": {
 						"balanced-match": "^1.0.0",
 						"concat-map": "0.0.1"
@@ -4072,20 +4064,17 @@
 				"code-point-at": {
 					"version": "1.1.0",
 					"bundled": true,
-					"dev": true,
-					"optional": true
+					"dev": true
 				},
 				"concat-map": {
 					"version": "0.0.1",
 					"bundled": true,
-					"dev": true,
-					"optional": true
+					"dev": true
 				},
 				"console-control-strings": {
 					"version": "1.1.0",
 					"bundled": true,
-					"dev": true,
-					"optional": true
+					"dev": true
 				},
 				"core-util-is": {
 					"version": "1.0.2",
@@ -4202,8 +4191,7 @@
 				"inherits": {
 					"version": "2.0.3",
 					"bundled": true,
-					"dev": true,
-					"optional": true
+					"dev": true
 				},
 				"ini": {
 					"version": "1.3.5",
@@ -4215,7 +4203,6 @@
 					"version": "1.0.0",
 					"bundled": true,
 					"dev": true,
-					"optional": true,
 					"requires": {
 						"number-is-nan": "^1.0.0"
 					}
@@ -4230,7 +4217,6 @@
 					"version": "3.0.4",
 					"bundled": true,
 					"dev": true,
-					"optional": true,
 					"requires": {
 						"brace-expansion": "^1.1.7"
 					}
@@ -4238,14 +4224,12 @@
 				"minimist": {
 					"version": "0.0.8",
 					"bundled": true,
-					"dev": true,
-					"optional": true
+					"dev": true
 				},
 				"minipass": {
 					"version": "2.2.4",
 					"bundled": true,
 					"dev": true,
-					"optional": true,
 					"requires": {
 						"safe-buffer": "^5.1.1",
 						"yallist": "^3.0.0"
@@ -4264,7 +4248,6 @@
 					"version": "0.5.1",
 					"bundled": true,
 					"dev": true,
-					"optional": true,
 					"requires": {
 						"minimist": "0.0.8"
 					}
@@ -4345,8 +4328,7 @@
 				"number-is-nan": {
 					"version": "1.0.1",
 					"bundled": true,
-					"dev": true,
-					"optional": true
+					"dev": true
 				},
 				"object-assign": {
 					"version": "4.1.1",
@@ -4358,7 +4340,6 @@
 					"version": "1.4.0",
 					"bundled": true,
 					"dev": true,
-					"optional": true,
 					"requires": {
 						"wrappy": "1"
 					}
@@ -4444,8 +4425,7 @@
 				"safe-buffer": {
 					"version": "5.1.1",
 					"bundled": true,
-					"dev": true,
-					"optional": true
+					"dev": true
 				},
 				"safer-buffer": {
 					"version": "2.1.2",
@@ -4481,7 +4461,6 @@
 					"version": "1.0.2",
 					"bundled": true,
 					"dev": true,
-					"optional": true,
 					"requires": {
 						"code-point-at": "^1.0.0",
 						"is-fullwidth-code-point": "^1.0.0",
@@ -4501,7 +4480,6 @@
 					"version": "3.0.1",
 					"bundled": true,
 					"dev": true,
-					"optional": true,
 					"requires": {
 						"ansi-regex": "^2.0.0"
 					}
@@ -4545,14 +4523,12 @@
 				"wrappy": {
 					"version": "1.0.2",
 					"bundled": true,
-					"dev": true,
-					"optional": true
+					"dev": true
 				},
 				"yallist": {
 					"version": "3.0.2",
 					"bundled": true,
-					"dev": true,
-					"optional": true
+					"dev": true
 				}
 			}
 		},
@@ -7013,6 +6989,11 @@
 				}
 			}
 		},
+		"p-queue": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/p-queue/-/p-queue-3.0.0.tgz",
+			"integrity": "sha512-2tv/MRmPXfmfnjLLJAHl+DdU8p2DhZafAnlpm/C/T5BpF5L9wKz5tMin4A4N2zVpJL2YMhPlRmtO7s5EtNrjfA=="
+		},
 		"p-try": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/p-try/-/p-try-2.0.0.tgz",
diff --git a/package.json b/package.json
index dd1d634a..26034076 100644
--- a/package.json
+++ b/package.json
@@ -35,7 +35,6 @@
 		"test:watch": "mocha-webpack -w --webpack-config webpack.test.js --interactive false --require tests/setup.js \"tests/js/**/*.spec.js\""
 	},
 	"dependencies": {
-		"asap": "^2.0.6",
 		"cdav-library": "github:nextcloud/cdav-library",
 		"debounce": "^1.2.0",
 		"downloadjs": "^1.4.7",
@@ -44,6 +43,7 @@
 		"nextcloud-server": "^0.15.9",
 		"nextcloud-vue": "^0.5.1",
 		"p-limit": "^2.1.0",
+		"p-queue": "^3.0.0",
 		"uuid": "^3.3.2",
 		"v-tooltip": "^2.0.0-rc.33",
 		"vue": "^2.5.22",
diff --git a/src/components/ContactDetails.vue b/src/components/ContactDetails.vue
index 777a72c7..ab55c221 100644
--- a/src/components/ContactDetails.vue
+++ b/src/components/ContactDetails.vue
@@ -97,7 +97,7 @@
 				<!-- using contact.key in the key and index as key to avoid conflicts between similar data and exact key -->
 				<contact-property v-for="(property, index) in sortedProperties" :key="`${index}-${contact.key}-${property.name}`" :index="index"
 					:sorted-properties="sortedProperties" :property="property" :contact="contact"
-					@updatedcontact="updateContact" />
+					@updatedcontact="debounceUpdateContact" />
 
 				<!-- addressbook change select - no last property because class is not applied here,
 					empty property because this is a required prop on regular property-select. But since
@@ -119,7 +119,7 @@
 
 <script>
 import debounce from 'debounce'
-import asap from 'asap'
+import PQueue from 'p-queue'
 
 import rfcProps from 'Models/rfcProps'
 
@@ -129,6 +129,8 @@ import PropertySelect from './Properties/PropertySelect'
 import PropertyGroups from './Properties/PropertyGroups'
 import ContactAvatar from './ContactDetails/ContactDetailsAvatar'
 
+const updateQueue = new PQueue({ concurrency: 1 })
+
 export default {
 	name: 'ContactDetails',
 
@@ -309,7 +311,7 @@ export default {
 			},
 			set: function(data) {
 				this.contact.groups = data
-				this.updateContact()
+				this.debounceUpdateContact()
 			}
 		},
 
@@ -369,7 +371,7 @@ export default {
 		 * photo, fn, org, title
 		 */
 		debounceUpdateContact: debounce(function(e) {
-			asap(this.updateContact())
+			updateQueue.add(this.updateContact)
 		}, 500),
 
 		// menu handling