started working on popover menu, have delete address function working and set up ready for rename and enable addressbook

3 files changed, 80 insertions, 16 deletions

diff --git a/src/components/Settings/SettingsAddressbook.vue b/src/components/Settings/SettingsAddressbook.vue
index fee2e324..ac105fe4 100644
--- a/src/components/Settings/SettingsAddressbook.vue
+++ b/src/components/Settings/SettingsAddressbook.vue
@@ -20,7 +20,6 @@
   - along with this program. If not, see <http://www.gnu.org/licenses/>.
   -
   -->
-
 <template>
 	<div>
 		<li :class="{'disabled': !addressbook.enabled}" class="addressbook">
@@ -70,28 +69,36 @@ export default {
 	data() {
 		return {
 			menuOpen: false,
-			shareOpen: false,
-			enabled: true
+			shareOpen: false
 		}
 	},
 	computed: {
+		enabled() {
+			return this.addressbook.enabled
+		},
 		// building the popover menu
 		menu() {
 			return [{
 				href: '#',
 				icon: 'icon-public',
-				text: 'Copy link'
+				text: 'Copy link',
+				action: () => {
+					alert('share link')
+				}
 			},
 			{
 				href: '#',
 				icon: 'icon-download',
-				text: 'Download'
+				text: 'Download',
+				action: () => {
+					alert('download')
+				}
 			},
 			{
 				icon: 'icon-rename',
 				text: 'Rename',
-				action: function renameAddressBook() {
-					alert('rename the address book')
+				action: () => {
+					this.$store.dispatch('renameAddressbook', this.addressbook)
 				}
 			},
 			{
@@ -99,15 +106,16 @@ export default {
 				text: 'Enabled',
 				input: 'checkbox',
 				model: this.enabled,
-				action: function toggleEnabled() {
-					alert('This addressbook is: enabled')
+				action: () => {
+					this.$store.dispatch('toggleAddressbookEnabled', this.addressbook)
 				}
 			},
 			{
 				icon: 'icon-delete',
 				text: 'Delete',
-				action: function deleteAddressBook() {
-					alert('Delete AddressBook')
+				action: () => {
+					console.log(this.$store) // eslint-disable-line
+					this.$store.dispatch('deleteAddressbook', this.addressbook)
 				}
 			}]
 		}
diff --git a/src/components/Settings/SettingsAddressbookShare.vue b/src/components/Settings/SettingsAddressbookShare.vue
index 73213a8e..38c29e87 100644
--- a/src/components/Settings/SettingsAddressbookShare.vue
+++ b/src/components/Settings/SettingsAddressbookShare.vue
@@ -21,7 +21,7 @@
 -->
 
 <template>
-	<div class="addressbook__shares">
+	<div class="addressbook-shares">
 		<multiselect
 			id="users-groups-search"
 			:options="usersOrGroups"
@@ -42,7 +42,7 @@
 			<template slot="singleLabel" slot-scope="props"><span class="option__desc"><span class="option__title">{{ props.option.matchpattern }}</span></span></template>
 			<template slot="option" slot-scope="props">
 				<div class="option__desc">
-					<span>{{ props.option.matchstart }}</span><span class="shareematch--bold">{{ props.option.matchpattern }}</span><span>{{ props.option.matchend }} {{ props.option.matchtag }}</span>
+					<span>{{ props.option.matchstart }}</span><span class="multiselect-vue__shareematch--bold">{{ props.option.matchpattern }}</span><span>{{ props.option.matchend }} {{ props.option.matchtag }}</span>
 				</div>
 			</template>
 			<span slot="noResult">{{ noResult }} </span>
diff --git a/src/store/addressbooks.js b/src/store/addressbooks.js
index 5d841310..9d849fa2 100644
--- a/src/store/addressbooks.js
+++ b/src/store/addressbooks.js
@@ -52,6 +52,37 @@ const mutations = {
 	},
 
 	/**
+	 * Delete addressbook
+	 *
+	 * @param {Object} state Default state
+	 * @param {Object} addressbooks Addressbook
+	 */
+	deleteAddressbook(state, addressbook) {
+		state.addressbooks.splice(state.addressbooks.indexOf(addressbook), 1)
+	},
+
+	/**
+	 * Toggle whether a Addressbook is Enabled
+	 * @param {Object} context Current context
+	 * @param {Object} addressbook
+	 */
+	toggleAddressbookEnabled(context, addressbook) {
+		addressbook = state.addressbooks.find(search => search.id === addressbook.id)
+		addressbook.enabled = !addressbook.enabled
+	},
+
+	/**
+	 * Rename a Addressbook
+	 * @param {Object} context Current context
+	 * @param {Object} data.addressbook
+	 * @param {String} data.newName
+	 */
+	renameAddressbook(context, { addressbook, newName }) {
+		addressbook = state.addressbooks.find(search => search.id === addressbook.id)
+		addressbook.displayName = newName
+	},
+
+	/**
 	 * Append a list of contacts to an addressbook
 	 * and remove duplicates
 	 *
@@ -203,6 +234,34 @@ const actions = {
 	},
 
 	/**
+	 * 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
 	 *
@@ -223,7 +282,6 @@ const actions = {
 	 * @param {Object} sharee Addressbook sharee object
 	 */
 	removeSharee(context, sharee) {
-		// Remove sharee from addressbook.
 		context.commit('removeSharee', sharee)
 	},
 
@@ -233,7 +291,6 @@ const actions = {
 	 * @param {Object} sharee Addressbook sharee object
 	 */
 	toggleShareeWritable(context, sharee) {
-		// Toggle sharee edit permissions.
 		context.commit('updateShareeWritable', sharee)
 	},
 
@@ -245,7 +302,6 @@ const actions = {
 	 * @param {Boolean} data.group group
 	 */
 	shareAddressbook(context, { addressbook, sharee, group }) {
-		// Share addressbook with entered group or user
 		context.commit('shareAddressbook', { addressbook, sharee, group })
 	}
 }