Add addressbook dav

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

src/components/Settings/SettingsNewAddressbook.vue

@@ -21,15 +21,14 @@
 -->
 
 <template>
-	<form id="new-addressbook-form" name="new-addressbook-form" class="new-addressbook"
-		@submit.prevent.stop="addAddressbook">
-		<input id="new-addressbook" ref="addressbook"
-			:placeholder="t('contacts', 'Address book name')"
+	<form id="new-addressbook-form" :disabled="loading" :class="{'icon-loading-small': loading}"
+		name="new-addressbook-form" class="new-addressbook" @submit.prevent.stop="addAddressbook">
+		<input id="new-addressbook" ref="addressbook" v-model="displayName"
+			:disabled="loading" :placeholder="t('contacts', 'Address book name')"
 			class="new-addressbook-input"
-			type="text"
-			autocomplete="off" autocorrect="off"
-			spellcheck="false">
-		<input type="submit" value="" class="icon-confirm">
+			type="text" autocomplete="off" autocorrect="off"
+			spellcheck="false" minlength="1" required>
+		<input class="icon-confirm" type="submit" value="">
 	</form>
 </template>
 
@@ -47,11 +46,8 @@ export default {
 	data() {
 		return {
 			// TODO: add pattern attribute to input, bind to addressBookRegex property
-		}
-	},
-	computed: {
-		menu() {
-			return []
+			loading: false,
+			displayName: ''
 		}
 	},
 	methods: {
@@ -59,8 +55,17 @@ export default {
 		 * Add a new address book
 		 */
 		addAddressbook() {
-			let addressbook = this.$refs.addressbook.value
-			this.$store.dispatch('appendAddressbook', { displayName: addressbook })
+			this.loading = true
+			this.$store.dispatch('appendAddressbook', { displayName: this.displayName })
+				.then(() => {
+					this.displayName = ''
+					this.loading = false
+				})
+				.catch((error) => {
+					console.error(error)
+					OC.Notification.showTemporary(t('contacts', 'An error occurred, unable to create the addressbook.'))
+					this.loading = false
+				})
 		}
 	}
 }

src/models/contact.js

@@ -232,9 +232,11 @@ export default class Contact {
 		}
 		if (this.vCard.hasProperty('n')) {
 			// reverse and join
-			return this.vCard.getFirstPropertyValue('n').filter(function(part) {
-				return part
-			}).join(' ')
+			return this.vCard.getFirstPropertyValue('n')
+				.filter(function(part) {
+					return part
+				})
+				.join(' ')
 		}
 		return null
 	}

src/store/contacts.js

@@ -193,7 +193,7 @@ const actions = {
 	/**
 	 * Delete a contact from the list and from the associated addressbook
 	 *
-	 * @param {Object} state
+	 * @param {Object} context
 	 * @param {Contact} contact the contact to delete
 	 */
 	deleteContact(context, contact) {
@@ -211,7 +211,7 @@ const actions = {
 	/**
 	 * Add a contact to the list and to the associated addressbook
 	 *
-	 * @param {Object} state
+	 * @param {Object} context
 	 * @param {Contact} contact the contact to delete
 	 */
 	addContact(context, contact) {
@@ -227,7 +227,7 @@ const actions = {
 	/**
 	 * Replac a contact by this new object
 	 *
-	 * @param {Object} state
+	 * @param {Object} context
 	 * @param {Contact} contact the contact to update
 	 */
 	updateContact(context, contact) {
@@ -237,6 +237,12 @@ const actions = {
 			.catch((error) => { throw error })
 	},
 
+	/**
+	 * Fetch the full vCard from the dav server
+	 *
+	 * @param {Object} context
+	 * @param {Contact} contact the contact to fetch
+	 */
 	fetchFullContact(context, contact) {
 		return contact.dav.fetchCompleteData()
 			.then(() => {