Vue settings addressbook popovermenu

css/settings/settings-addressbook.scss

@@ -21,6 +21,24 @@
  *
  */
 
+
+.new-addressbook {
+	padding: 6px 0;
+	input {
+		border: none;
+		margin: 0;
+	}
+	#new-addressbook-form {
+		width: 100%;
+		display: inline-flex;
+		border: #dbdbdb solid 1px;
+		border-radius: 3px;
+	}
+	input.new-addressbook__submit {
+		opacity: 0.6;
+	}
+}
+
 .addressbook {
 	display: flex;
 	align-items: center;
@@ -33,7 +51,10 @@
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
+		padding-left: 7px;
+		opacity: 0.7;
 	}
+
 	&__share,
 	&__menu .icon-more {
 		width: 44px;
@@ -45,6 +66,7 @@
 			opacity: .7;
 		}
 	}
+
 	&__share {
 		margin-left: auto;
 	}

src/components/Settings/SettingsAddressbook.vue

@@ -22,14 +22,23 @@
   -->
 <template>
 	<div>
-		<li :class="{'disabled': !addressbook.enabled}" class="addressbook">
+		<li v-if="editingName" class="new-addressbook">
+			<form id="new-addressbook-form" name="new-addressbook-form"
+				class="new-addressbook__form" addressbooks="[object Object]"
+				@submit.prevent="updateAddressbookName">
+				<!-- rename addressbook input -->
+				<input :placeholder="addressbook.displayName"
+					v-model="newName" type="text">
+				<input type="submit" value=""
+					class="new-addressbook__submit inline-button icon-confirm action pull-right">
+			</form>
+		</li>
+		<li v-else :class="{'disabled': !addressbook.enabled}" class="addressbook">
 			<!-- addressbook name -->
 			<span class="addressbook__name">{{ addressbook.displayName }}</span>
 			<!-- sharing button -->
 			<a href="#" class="addressbook__share icon-shared"
 				@click="toggleShare" />
-			<!-- rename addressbook name -->
-			<rename-addressbook-field v-if="editingName" />
 			<!-- popovermenu -->
 			<a v-click-outside="closeMenu" href="#" class="addressbook__menu"
 				@click="toggleMenu">
@@ -75,7 +84,7 @@ export default {
 			menuOpen: false,
 			shareOpen: false,
 			editingName: false,
-			newName: '' // new name for addressbook
+			newName: this.addressbook.displayName // new name for addressbook
 		}
 	},
 	computed: {
@@ -85,48 +94,47 @@ export default {
 		// building the popover menu
 		menu() {
 			return [{
-				href: '#',
+				href: '/remote.php/dav/addressbooks/users/admin/Contacts/',
 				icon: 'icon-public',
-				text: 'Copy link',
-				action: () => {
-					alert('share link')
-				}
+				text: t('settings', 'Copy link'),
+				action: ''
 			},
 			{
-				href: '#',
+				href: '/remote.php/dav/addressbooks/users/admin/Contacts/?export',
 				icon: 'icon-download',
-				text: 'Download',
-				action: () => {
-					alert('download')
-				}
+				text: t('settings', 'Download'),
+				action: ''
 			},
 			{
 				icon: 'icon-rename',
-				text: 'Rename',
-				action: () => {
-					/* this.editingName = true */
-				}
+				text: t('settings', 'Rename'),
+				action: this.renameAddressbook
 			},
 			{
 				icon: 'checkbox',
-				text: 'Enabled',
+				text: this.enabled ? t('settings', 'Enabled') : t('settings', 'Disabled'),
 				input: 'checkbox',
 				model: this.enabled,
-				action: () => {
-					alert('change') // eslint-disable-line
-					this.$store.dispatch('toggleAddressbookEnabled', this.addressbook)
-				}
+				action: this.toggleAddressbookEnabled
 			},
 			{
 				icon: 'icon-delete',
-				text: 'Delete',
-				action: () => {
-					this.$store.dispatch('deleteAddressbook', this.addressbook)
-				}
+				text: t('settings', 'Delete'),
+				action: this.deleteAddressbook
 			}]
 		}
 	},
+	mounted() {
+		// required if popup needs to stay opened after menu click
+		this.popupItem = this.$el
+	},
 	methods: {
+		toggleAddressbookEnabled() {
+			this.$store.dispatch('toggleAddressbookEnabled', this.addressbook)
+		},
+		deleteAddressbook() {
+			this.$store.dispatch('deleteAddressbook', this.addressbook)
+		},
 		toggleShare() {
 			this.shareOpen = !this.shareOpen
 		},
@@ -136,11 +144,13 @@ export default {
 		toggleMenu() {
 			this.menuOpen = !this.menuOpen
 		},
-		renameAddressBook() {
+		renameAddressbook() {
 			this.editingName = true
+		},
+		updateAddressbookName() {
 			let addressbook = this.addressbook
 			let newName = this.newName
-			this.$store.dispatch('renameAddressbook', { addressbook, newName })
+			this.$store.dispatch('renameAddressbook', { addressbook, newName }).then(this.editingName = false)
 		}
 	}
 }

src/components/SettingsSection.vue

@@ -22,7 +22,7 @@
 
 <template>
 	<div>
-		<ul id="address-book-list">
+		<ul id="addressbook-list">
 			<address-book v-for="addressbook in addressbooks" :key="addressbook.id" :addressbook="addressbook" />
 		</ul>
 		<add-address-book :addressbooks="addressbooks" />

src/components/core/popoverMenu/popoverItem.vue

@@ -32,8 +32,8 @@
 		<!-- If item.input is set instead, an put will be used -->
 		<span v-else-if="item.input" class="menuitem">
 			<input :id="item.key" :type="item.input" :class="item.input"
-				v-model="item.model" @change="item.action">
-			<label :for="item.key">{{ item.text }}</label>
+				v-model="item.model">
+			<label :for="item.key" @click="item.action">{{ item.text }}</label>
 		</span>
 		<!-- If item.action is set instead, a button will be used -->
 		<button v-else-if="item.action" @click="item.action">

src/store/addressbooks.js

@@ -182,9 +182,7 @@ const mutations = {
 				}
 			}
 		})
-		console.log(addressbook) // eslint-disable-line
 		sharee = addressbook.shares.find(search => search === sharee)
-		console.log(sharee) // eslint-disable-line
 		sharee.writeable = !sharee.writeable
 	}
 
@@ -227,7 +225,35 @@ const actions = {
 	},
 
 	/**
-	 * Retrieve the contacts for the specified address book
+	 * Delete Addressbook
+	 * @param {Object} context Current context
+	 * @param {Object} addressbook
+	 */
+	deleteAddressbook(context, addressbook) {
+		context.commit('deleteAddressbook', addressbook)
+	},
+
+	/**
+	 * Toggle whether a Addressbook is Enabled
+	 * @param {Object} context Current context
+	 * @param {Object} addressbook
+	 */
+	toggleAddressbookEnabled(context, addressbook) {
+		context.commit('toggleAddressbookEnabled', addressbook)
+	},
+
+	/**
+	 * Rename a Addressbook
+	 * @param {Object} context Current context
+	 * @param {Object} data.addressbook
+	 * @param {String} data.newName
+	 */
+	renameAddressbook(context, { addressbook, newName }) {
+		context.commit('renameAddressbook', { addressbook, newName })
+	},
+
+	/**
+	 * Retrieve the contacts of the specified addressbook
 	 * and commit the results
 	 *
 	 * @param {Object} context