Merge branch 'vue' into add-new-props

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

css/Properties/Properties.scss

@@ -32,8 +32,8 @@
 		margin-bottom: $grid-height-unit;
 	}
 	// no delete icon on addressbook selector
-	&--addressbooks .icon-delete {
-		display: none;
+	&--addressbooks &__delete {
+		display: none !important;
 	}
 
 	&__delete {

css/contacts.scss

@@ -42,6 +42,7 @@ $grid-input-height-with-margin: #{$grid-height-unit - $grid-input-margin * 2};
 @import 'settings/settings-addressbook';
 @import 'settings/settings-addressbook-shares';
 @import 'settings/settings-addressbook-sharee';
+@import 'details';
 @import 'ContactDetails';
 @import './Properties/Properties';
 @import './Properties/PropertyTitle';

css/settings/settings-addressbook-sharee.scss

@@ -21,7 +21,7 @@
  *
  */
 
-.addressbook__sharee {
+.addressbook-sharee {
 	padding: 0 5px;
 	display: inline-flex;
 	align-items: center;
@@ -33,7 +33,7 @@
 		text-overflow: ellipsis;
 		display: inline-block;
 		vertical-align: top;
-		opacity: 0.5;
+		opacity: 0.7;
 	}
 	&__utils {
 		padding: 0 !important;
@@ -46,6 +46,9 @@
 		.checkbox + label {
 			padding: 0 !important;
 		}
+		label {
+			opacity: 0.7;
+		}
 	}
 
 	.icon {
@@ -56,10 +59,6 @@
 		display: inline-block;
 	}
 
-	.icon-group {
-		background-image: url(/apps/contacts/img/group.svg);
-	}
-
 	.icon-delete {
 		display: inline-block;
 		width: 24px;

css/settings/settings-addressbook-shares.scss

@@ -29,12 +29,20 @@
 		display: flex;
 		flex-direction: column;
 	}
+
 	&__shareematch--bold {
 		font-weight: bold;
 	}
+
+	.icon-loading::after {
+		top: 70%;
+		left: 95%;
+		height: 14px;
+		width: 14px;
+	}
+
 	.multiselect.multiselect-vue {
 		width: inherit;
-
 		.multiselect__tags:focus-within, 
 		.multiselect__tags:hover {
 			border-color: var(--color-primary-element);
@@ -44,6 +52,7 @@
 			display: none;
 		}
 	}
+
 	.multiselect.showContent {
 		.multiselect__content-wrapper {
 			display: inherit;

src/components/ContactDetails.vue

@@ -82,14 +82,16 @@
 			<section class="contact-details">
 
 				<!-- properties iteration -->
-				<contact-property v-for="(property, index) in sortedProperties" :key="index" :index="index"
+				<!-- 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" :index="index"
 					:sorted-properties="sortedProperties" :property="property" :contact="contact"
 					@updatedcontact="updateContact" />
 
-				<!-- addressbook change select -->
-				<property-select :prop-model="addressbookModel" :value.sync="addressbook"
-					:options="addressbooksOptions" class="property--addressbooks" />
+				<!-- addressbook change select - no last property because class is not applied here-->
+				<property-select :prop-model="addressbookModel" :value.sync="addressbook" :is-first-property="true"
+					:is-last-property="false" :options="addressbooksOptions" class="property--addressbooks" />
 
+				<!-- new property select -->
 				<add-new-prop :contact="contact" />
 			</section>
 		</template>
@@ -249,6 +251,7 @@ export default {
 		updateContact() {
 			this.$store.dispatch('updateContact', this.contact)
 		},
+
 		/**
 		 * Debounce the contact update for the header props
 		 * photo, fn, org, title
@@ -265,6 +268,13 @@ export default {
 			this.openedMenu = !this.openedMenu
 		},
 
+		/**
+		 * Dispatch contact deletion request
+		 */
+		deleteContact() {
+			this.$store.dispatch('deleteContact', this.contact)
+		},
+
 		/**
 		 * Move contact to the specified addressbook
 		 *

src/components/ContactDetails/ContactDetailsProperty.vue

@@ -217,8 +217,11 @@ export default {
 	},
 
 	methods: {
+		/**
+		 * Delete this property
+		 */
 		deleteProp() {
-			alert('deleted')
+			this.contact.vCard.removeProperty(this.property)
 		}
 	}
 

src/components/ContentList/ContentListItem.vue

@@ -36,6 +36,11 @@ export default {
 		selectedContact() {
 			return this.$route.params.selectedContact
 		},
+
+		/**
+		 * avatar color based on server toRgb method and the displayName
+		 * @returns {String} the color in css format
+		 */
 		colorAvatar() {
 			try {
 				let color = this.contact.uid.toRgb()
@@ -46,13 +51,25 @@ export default {
 		}
 	},
 	methods: {
+		/**
+		 * Checkbox management method
+		 */
 		toggleSelect() {
 			// toggle checkbox here because we stop the propagation to not trigger selectContact
+			// therefore the selectContact prevent the checkbox label+input propagation
 			this.$refs.selected.checked = !this.$refs.selected.checked
 		},
+
+		/**
+		 * Dispatch contact deletion request
+		 */
 		deleteContact() {
 			this.$store.dispatch('deleteContact', this.contact)
 		},
+
+		/**
+		 * Select this contact within the list
+		 */
 		selectContact() {
 			// change url with router
 			this.$router.push({ name: 'contact', params: { selectedGroup: this.selectedGroup, selectedContact: this.contact.key } })

src/components/Properties/PropertyDateTime.vue

@@ -106,6 +106,7 @@ export default {
 		/**
 		 * Since we're updating a local data based on the value prop,
 		 * we need to make sure to update the local data on pop change
+		 * TODO: check if this create performance drop
 		 */
 		value: function() {
 			this.localValue = this.value

src/components/Properties/PropertyGroups.vue

@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<div v-if="propModel" class="grid-span-1 property">
+	<div v-if="propModel" class="grid-span-2 property">
 
 		<div class="property__row">
 			<div class="property__label">{{ propModel.readableName }}</div>
@@ -92,6 +92,7 @@ export default {
 		/**
 		 * Since we're updating a local data based on the value prop,
 		 * we need to make sure to update the local data on pop change
+		 * TODO: check if this create performance drop
 		 */
 		value: function() {
 			this.localValue = this.value

src/components/Properties/PropertyMultipleText.vue

@@ -109,6 +109,7 @@ export default {
 		/**
 		 * Since we're updating a local data based on the value prop,
 		 * we need to make sure to update the local data on pop change
+		 * TODO: check if this create performance drop
 		 */
 		value: function() {
 			this.localValue = this.value

src/components/Properties/PropertySelect.vue

@@ -111,6 +111,7 @@ export default {
 		/**
 		 * Since we're updating a local data based on the value prop,
 		 * we need to make sure to update the local data on pop change
+		 * TODO: check if this create performance drop
 		 */
 		value: function() {
 			this.localValue = this.value

src/components/Properties/PropertyText.vue

@@ -105,6 +105,7 @@ export default {
 		/**
 		 * Since we're updating a local data based on the value prop,
 		 * we need to make sure to update the local data on pop change
+		 * TODO: check if this create performance drop
 		 */
 		value: function() {
 			this.localValue = this.value

src/components/Properties/PropertyTitle.vue

@@ -43,6 +43,5 @@ export default {
 			required: true
 		}
 	}
-
 }
 </script>

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">
@@ -29,6 +28,8 @@
 			<!-- 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">
@@ -46,6 +47,7 @@
 <script>
 import popoverMenu from '../core/popoverMenu'
 import shareAddressBook from './SettingsAddressbookShare'
+import renameAddressBookField from './SettingsRenameAddressbookField'
 
 import clickOutside from 'vue-click-outside'
 
@@ -54,6 +56,7 @@ export default {
 	components: {
 		popoverMenu,
 		shareAddressBook,
+		renameAddressBookField,
 		clickOutside
 	},
 	directives: {
@@ -71,43 +74,54 @@ export default {
 		return {
 			menuOpen: false,
 			shareOpen: false,
-			enabled: true
+			editingName: false,
+			newName: '' // new name for addressbook
 		}
 	},
 	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.editingName = true */
 				}
 			},
 			{
 				icon: 'checkbox',
 				text: 'Enabled',
 				input: 'checkbox',
 				model: this.enabled,
-				action: function toggleEnabled() {
-					alert('This addressbook is: enabled')
+				action: () => {
+					alert('change') // eslint-disable-line
+					this.$store.dispatch('toggleAddressbookEnabled', this.addressbook)
 				}
 			},
 			{
 				icon: 'icon-delete',
 				text: 'Delete',
-				action: function deleteAddressBook() {
-					alert('Delete AddressBook')
+				action: () => {
+					this.$store.dispatch('deleteAddressbook', this.addressbook)
 				}
 			}]
 		}
@@ -121,6 +135,12 @@ export default {
 		},
 		toggleMenu() {
 			this.menuOpen = !this.menuOpen
+		},
+		renameAddressBook() {
+			this.editingName = true
+			let addressbook = this.addressbook
+			let newName = this.newName
+			this.$store.dispatch('renameAddressbook', { addressbook, newName })
 		}
 	}
 }