From 066e16b53d1f676bd27f7a2069ddc446b2fb5101 Mon Sep 17 00:00:00 2001
From: Avinash Gusain <avinashg@e.email>
Date: Wed, 21 Jun 2023 12:50:37 +0530
Subject: [PATCH] starred group

Signed-off-by: Avinash Gusain <avinashg@e.email>
---
 l10n/de.js                                    |   3 +-
 l10n/de.json                                  |   3 +-
 l10n/de_DE.js                                 |   3 +-
 l10n/de_DE.json                               |   3 +-
 l10n/es.js                                    |   3 +-
 l10n/es.json                                  |   3 +-
 l10n/fr.js                                    |   3 +-
 l10n/fr.json                                  |   3 +-
 l10n/it.js                                    |   3 +-
 l10n/it.json                                  |   3 +-
 .../AppNavigation/GroupNavigationItem.vue     |  14 +-
 src/components/ContactDetails.vue             |  19 ++-
 .../ContactDetails/ContactDetailsStarred.vue  | 120 +++++++++++++++++
 .../ContactsList/ContactsListItem.vue         |  41 ++++++
 src/components/DetailsHeader.vue              |  18 ++-
 .../EntityPicker/ContactsPicker.vue           |   4 +
 src/components/Properties/PropertyGroups.vue  | 124 +++++++++++++++++-
 17 files changed, 345 insertions(+), 25 deletions(-)
 create mode 100644 src/components/ContactDetails/ContactDetailsStarred.vue

diff --git a/l10n/de.js b/l10n/de.js
index 8101de659..b1bbdab76 100644
--- a/l10n/de.js
+++ b/l10n/de.js
@@ -289,6 +289,7 @@ OC.L10N.register(
     "An error has occurred in circle(s). Check the console for more details." : "Es ist ein Fehler in Kreis(en) ist aufgetreten. Weitere Informationen findest du in der Konsole.",
     "Unable to create circle {circleName}" : "Kreis {circleName} konnte nicht erstellt werden",
     "Unable to delete circle {circleId}" : "Kontakt konnte nicht gelöscht werden",
-    "Unable to delete contact" : "Kontakt konnte nicht gelöscht werden"
+    "Unable to delete contact" : "Kontakt konnte nicht gelöscht werden",
+    "Favorites" : "Favoriten"
 },
 "nplurals=2; plural=(n != 1);");
diff --git a/l10n/de.json b/l10n/de.json
index 8d978589f..ab3888dfa 100644
--- a/l10n/de.json
+++ b/l10n/de.json
@@ -287,6 +287,7 @@
     "An error has occurred in circle(s). Check the console for more details." : "Es ist ein Fehler in Kreis(en) ist aufgetreten. Weitere Informationen findest du in der Konsole.",
     "Unable to create circle {circleName}" : "Kreis {circleName} konnte nicht erstellt werden",
     "Unable to delete circle {circleId}" : "Kontakt konnte nicht gelöscht werden",
-    "Unable to delete contact" : "Kontakt konnte nicht gelöscht werden"
+    "Unable to delete contact" : "Kontakt konnte nicht gelöscht werden",
+    "Favorites" : "Favoriten"
 },"pluralForm" :"nplurals=2; plural=(n != 1);"
 }
\ No newline at end of file
diff --git a/l10n/de_DE.js b/l10n/de_DE.js
index c2877d645..1b6c9def3 100644
--- a/l10n/de_DE.js
+++ b/l10n/de_DE.js
@@ -291,6 +291,7 @@ OC.L10N.register(
     "An error has occurred in circle(s). Check the console for more details." : "In Kreis(en) ist ein Fehler aufgetreten. Weitere Informationen finden Sie in der Konsole.",
     "Unable to create circle {circleName}" : "Fehler beim Erstellen des Kreises {circleName}",
     "Unable to delete circle {circleId}" : "Fehler beim Löschen des Kreises {circleId}",
-    "Unable to delete contact" : "Kontakt konnte nicht gelöscht werden"
+    "Unable to delete contact" : "Kontakt konnte nicht gelöscht werden",
+    "Favorites" : "Favoriten"
 },
 "nplurals=2; plural=(n != 1);");
diff --git a/l10n/de_DE.json b/l10n/de_DE.json
index 8bdab8c10..517ccc66a 100644
--- a/l10n/de_DE.json
+++ b/l10n/de_DE.json
@@ -289,6 +289,7 @@
     "An error has occurred in circle(s). Check the console for more details." : "In Kreis(en) ist ein Fehler aufgetreten. Weitere Informationen finden Sie in der Konsole.",
     "Unable to create circle {circleName}" : "Fehler beim Erstellen des Kreises {circleName}",
     "Unable to delete circle {circleId}" : "Fehler beim Löschen des Kreises {circleId}",
-    "Unable to delete contact" : "Kontakt konnte nicht gelöscht werden"
+    "Unable to delete contact" : "Kontakt konnte nicht gelöscht werden",
+    "Favorites" : "Favoriten"
 },"pluralForm" :"nplurals=2; plural=(n != 1);"
 }
\ No newline at end of file
diff --git a/l10n/es.js b/l10n/es.js
index 0ce96ee19..52d5c489a 100644
--- a/l10n/es.js
+++ b/l10n/es.js
@@ -291,6 +291,7 @@ OC.L10N.register(
     "An error has occurred in circle(s). Check the console for more details." : "Ha ocurrido un error en uno o varios circles. Chequee la consola para más detalles.",
     "Unable to create circle {circleName}" : "No se pudo crear el círculo {circleName}",
     "Unable to delete circle {circleId}" : "No se pudo eliminar el círculo {circleId}",
-    "Unable to delete contact" : "No se ha podido eliminar el contacto"
+    "Unable to delete contact" : "No se ha podido eliminar el contacto",
+    "Favorites" : "Favoritos"
 },
 "nplurals=3; plural=n == 1 ? 0 : n != 0 && n % 1000000 == 0 ? 1 : 2;");
diff --git a/l10n/es.json b/l10n/es.json
index 0ac9d704b..8c49da270 100644
--- a/l10n/es.json
+++ b/l10n/es.json
@@ -289,6 +289,7 @@
     "An error has occurred in circle(s). Check the console for more details." : "Ha ocurrido un error en uno o varios circles. Chequee la consola para más detalles.",
     "Unable to create circle {circleName}" : "No se pudo crear el círculo {circleName}",
     "Unable to delete circle {circleId}" : "No se pudo eliminar el círculo {circleId}",
-    "Unable to delete contact" : "No se ha podido eliminar el contacto"
+    "Unable to delete contact" : "No se ha podido eliminar el contacto",
+    "Favorites" : "Favoritos"
 },"pluralForm" :"nplurals=3; plural=n == 1 ? 0 : n != 0 && n % 1000000 == 0 ? 1 : 2;"
 }
\ No newline at end of file
diff --git a/l10n/fr.js b/l10n/fr.js
index 1cfc5cb64..474ed8c59 100644
--- a/l10n/fr.js
+++ b/l10n/fr.js
@@ -291,6 +291,7 @@ OC.L10N.register(
     "An error has occurred in circle(s). Check the console for more details." : "Une erreur est survenue dans le·s cercle·s. Vérifiez la console pour plus de détails.",
     "Unable to create circle {circleName}" : "Impossible de créer le cercle {circleName}",
     "Unable to delete circle {circleId}" : "Impossible de supprimer le cercle {circleId}",
-    "Unable to delete contact" : "Impossible de supprimer le contact."
+    "Unable to delete contact" : "Impossible de supprimer le contact.",
+    "Favorites" : "Favoris"
 },
 "nplurals=3; plural=(n == 0 || n == 1) ? 0 : n != 0 && n % 1000000 == 0 ? 1 : 2;");
diff --git a/l10n/fr.json b/l10n/fr.json
index 650096a64..6e02d7a48 100644
--- a/l10n/fr.json
+++ b/l10n/fr.json
@@ -289,6 +289,7 @@
     "An error has occurred in circle(s). Check the console for more details." : "Une erreur est survenue dans le·s cercle·s. Vérifiez la console pour plus de détails.",
     "Unable to create circle {circleName}" : "Impossible de créer le cercle {circleName}",
     "Unable to delete circle {circleId}" : "Impossible de supprimer le cercle {circleId}",
-    "Unable to delete contact" : "Impossible de supprimer le contact."
+    "Unable to delete contact" : "Impossible de supprimer le contact.",
+    "Favorites" : "Favoris"
 },"pluralForm" :"nplurals=3; plural=(n == 0 || n == 1) ? 0 : n != 0 && n % 1000000 == 0 ? 1 : 2;"
 }
\ No newline at end of file
diff --git a/l10n/it.js b/l10n/it.js
index f1ddf462a..561d40a2e 100644
--- a/l10n/it.js
+++ b/l10n/it.js
@@ -271,6 +271,7 @@ OC.L10N.register(
     "_{failed} contact failed to be read_::_{failed} contacts failed to be read_" : ["lettura di {failed} contatto non riuscita","lettura di {failed} contatti non riuscita","lettura di {failed} contatti non riuscita"],
     "Unable to create circle {circleName}" : "Impossibile creare la cerchia {circleName}",
     "Unable to delete circle {circleId}" : "Impossibile eliminare la cerchia {circleId}",
-    "Unable to delete contact" : "Impossibile eliminare il contatto"
+    "Unable to delete contact" : "Impossibile eliminare il contatto",
+    "Favorites" : "Preferiti"
 },
 "nplurals=3; plural=n == 1 ? 0 : n != 0 && n % 1000000 == 0 ? 1 : 2;");
diff --git a/l10n/it.json b/l10n/it.json
index e1c925c63..e14c8e468 100644
--- a/l10n/it.json
+++ b/l10n/it.json
@@ -269,6 +269,7 @@
     "_{failed} contact failed to be read_::_{failed} contacts failed to be read_" : ["lettura di {failed} contatto non riuscita","lettura di {failed} contatti non riuscita","lettura di {failed} contatti non riuscita"],
     "Unable to create circle {circleName}" : "Impossibile creare la cerchia {circleName}",
     "Unable to delete circle {circleId}" : "Impossibile eliminare la cerchia {circleId}",
-    "Unable to delete contact" : "Impossibile eliminare il contatto"
+    "Unable to delete contact" : "Impossibile eliminare il contatto",
+    "Favorites" : "Preferiti"
 },"pluralForm" :"nplurals=3; plural=n == 1 ? 0 : n != 0 && n % 1000000 == 0 ? 1 : 2;"
 }
\ No newline at end of file
diff --git a/src/components/AppNavigation/GroupNavigationItem.vue b/src/components/AppNavigation/GroupNavigationItem.vue
index 968210f10..cf720dc4c 100644
--- a/src/components/AppNavigation/GroupNavigationItem.vue
+++ b/src/components/AppNavigation/GroupNavigationItem.vue
@@ -22,9 +22,10 @@
 <template>
 	<AppNavigationItem :key="group.key"
 		:to="group.router"
-		:title="group.name">
+		:title="getTitle(group)">
 		<template #icon>
-			<IconContact :size="20" />
+			<IconStar v-if="group.name ==='starred'" :size="20" />
+			<IconContact v-else :size="20" />
 		</template>
 		<template slot="actions">
 			<ActionButton :close-after-click="true"
@@ -77,6 +78,7 @@ import IconContact from 'vue-material-design-icons/AccountMultiple.vue'
 import IconAdd from 'vue-material-design-icons/Plus.vue'
 import IconDownload from 'vue-material-design-icons/Download.vue'
 import IconEmail from 'vue-material-design-icons/Email.vue'
+import IconStar from 'vue-material-design-icons/Star.vue'
 
 export default {
 	name: 'GroupNavigationItem',
@@ -89,6 +91,7 @@ export default {
 		IconAdd,
 		IconDownload,
 		IconEmail,
+		IconStar,
 	},
 
 	props: {
@@ -180,6 +183,13 @@ export default {
 			// have to explicitly set the "to:" or "bcc:" header.
 			window.location.href = `mailto:?${mode}=${emails.map(encodeURIComponent).join(',')}`
 		},
+		getTitle(group) {
+			if (group.name === 'starred') {
+				return t('contacts', 'Favorites')
+			} else {
+				return group.name
+			}
+		},
 
 	},
 }
diff --git a/src/components/ContactDetails.vue b/src/components/ContactDetails.vue
index d9f7a7b12..60ea3a32c 100644
--- a/src/components/ContactDetails.vue
+++ b/src/components/ContactDetails.vue
@@ -36,14 +36,17 @@
 
 		<template v-else>
 			<!-- contact header -->
-			<DetailsHeader>
+			<DetailsHeader :contact="contact"
+				@group-updated="updatedValue">
 				<!-- avatar and upload photo -->
 				<ContactAvatar slot="avatar"
+					:contact="contact"
+					@update-local-contact="updateLocalContact" />
+				<ContactDetailsStarred slot="starred"
 					:contact="contact"
 					:is-read-only="isReadOnly"
 					:reload-bus="reloadBus"
 					@update-local-contact="updateLocalContact" />
-
 				<!-- fullname -->
 				<template #title>
 					<div v-if="isReadOnly">
@@ -306,6 +309,7 @@ import validate from '../services/validate.js'
 import AddNewProp from './ContactDetails/ContactDetailsAddNewProp.vue'
 import ContactAvatar from './ContactDetails/ContactDetailsAvatar.vue'
 import ContactDetailsProperty from './ContactDetails/ContactDetailsProperty.vue'
+import ContactDetailsStarred from './ContactDetails/ContactDetailsStarred.vue'
 import DetailsHeader from './DetailsHeader.vue'
 import PropertyGroups from './Properties/PropertyGroups.vue'
 import PropertyRev from './Properties/PropertyRev.vue'
@@ -321,6 +325,7 @@ export default {
 		AppContentDetails,
 		ContactAvatar,
 		ContactDetailsProperty,
+		ContactDetailsStarred,
 		DetailsHeader,
 		EmptyContent,
 		IconContact,
@@ -373,8 +378,8 @@ export default {
 			qrcode: '',
 			showPickAddressbookModal: false,
 			pickedAddressbook: null,
+			groupValue: '',
 			editMode: false,
-
 			contactDetailsSelector: '.contact-details',
 			excludeFromBirthdayKey: 'x-nc-exclude-from-birthday-calendar',
 
@@ -595,7 +600,6 @@ export default {
 		// unbind capture ctrl+s
 		document.removeEventListener('keydown', this.onCtrlSave)
 	},
-
 	methods: {
 		/**
 		 * Send the local clone of contact to the store
@@ -835,6 +839,10 @@ export default {
 			this.pickedAddressbook = null
 		},
 
+		updatedValue(newValue) {
+			this.groupValue = newValue
+		},
+
 		/**
 		 * Should display the property
 		 *
@@ -911,4 +919,7 @@ section.contact-details {
 		}
 	}
 }
+.header-icon{
+	display: none;
+}
 </style>
diff --git a/src/components/ContactDetails/ContactDetailsStarred.vue b/src/components/ContactDetails/ContactDetailsStarred.vue
new file mode 100644
index 000000000..3ed84d8cb
--- /dev/null
+++ b/src/components/ContactDetails/ContactDetailsStarred.vue
@@ -0,0 +1,120 @@
+<!--
+  - @copyright Copyright (c) 2023 Avinash Gusain <avinash.gusain.ext@murena.com>
+  -
+  - @author Avinash Gusain <avinash.gusain.ext@murena.com>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+  -
+  -->
+
+<template>
+	<div class="contact-header-starred__wrapper">
+		<ActionButton :disabled="isLoading" @click="callValidateGroup('starred')">
+			<template #icon>
+				<IconStar :class="{ 'starred-icon': starred }" :size="24" />
+			</template>
+		</ActionButton>
+	</div>
+</template>
+
+<script>
+import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import IconStar from 'vue-material-design-icons/Star.vue'
+
+export default {
+	name: 'ContactDetailsStarred',
+
+	components: {
+		ActionButton,
+		IconStar,
+	},
+
+	props: {
+		contact: {
+			type: Object,
+			required: true,
+		},
+	},
+
+	data() {
+		return {
+			starred: false,
+			isLoading: false,
+		}
+	},
+	created() {
+		this.handleStarred = (response) => {
+			this.starred = response
+			this.isLoading = false
+		}
+		this.handleIsStarred = (response) => {
+			if (this.contact.key === response.contact.key) {
+				this.starred = response.starred
+			}
+		}
+		this.$root.$on('starred-response', this.handleStarred)
+		this.$root.$on('is-starred', this.handleIsStarred)
+	},
+	methods: {
+	/**
+	 * Dispatch contact addition to group
+	 *
+	 * @param {string} groupName the group name
+	 */
+		callValidateGroup(groupName) {
+			this.$nextTick(() => {
+				this.isLoading = true
+				this.starred = !this.starred
+				this.$root.$emit('starred-update', groupName, this.starred)
+			})
+		},
+
+	},
+
+}
+</script>
+<style lang="scss" scoped>
+.contact-header-starred {
+	&__wrapper {
+		position: relative;
+		height: 75px;
+		li {
+			list-style-type:none;
+			width:24px;
+			margin: 0 16px;
+			height: 36px;
+			line-height: 36px;
+			.starred-icon {
+				::v-deep .material-design-icon__svg {
+					fill: #FC0;
+					path {
+						stroke: #FC0;
+						stroke-width: 1px;
+					}
+				}
+			}
+			::v-deep .material-design-icon__svg {
+				fill: var(--color-primary-text);
+				path {
+					stroke: var(--icon-inactive-color);
+					stroke-width: 1px;
+				}
+			}
+		}
+	}
+}
+
+</style>
diff --git a/src/components/ContactsList/ContactsListItem.vue b/src/components/ContactsList/ContactsListItem.vue
index e9d2284da..77bc51146 100644
--- a/src/components/ContactsList/ContactsListItem.vue
+++ b/src/components/ContactsList/ContactsListItem.vue
@@ -11,7 +11,11 @@
 				<BaseAvatar :display-name="source.displayName" :url="avatarUrl" :size="40" />
 			</div>
 		</template>
+
 		<template #subtitle>
+			<span v-if="starredSelected">
+				<IconStar class="starred" :size="24" />
+			</span>
 			<div class="envelope__subtitle">
 				<span class="envelope__subtitle__subject">
 					{{ source.email }}
@@ -26,12 +30,14 @@ import {
 	NcListItem as ListItem,
 	NcAvatar as BaseAvatar,
 } from '@nextcloud/vue'
+import IconStar from 'vue-material-design-icons/Star.vue'
 
 export default {
 	name: 'ContactsListItem',
 
 	components: {
 		ListItem,
+		IconStar,
 		BaseAvatar,
 	},
 
@@ -52,6 +58,7 @@ export default {
 	data() {
 		return {
 			avatarUrl: undefined,
+			starredSelected: false,
 		}
 	},
 
@@ -79,6 +86,16 @@ export default {
 	},
 	async mounted() {
 		await this.loadAvatarUrl()
+		await this.isStarred()
+		this.handleStarredListUpdate = (response) => {
+			if (this.source.key === response.contact.key) {
+				this.starredSelected = response.starred
+			}
+		}
+		this.$root.$on('starred-list-update', this.handleStarredListUpdate)
+	},
+	beforeDestroy() {
+		this.$root.$off('starred-list-update', this.handleStarredListUpdate)
 	},
 	methods: {
 
@@ -120,6 +137,9 @@ export default {
 				this.avatarUrl = `${this.source.url}?photo`
 			}
 		},
+		async isStarred() {
+			this.starredSelected = this.source.groups.some(element => element.includes('starred'))
+		},
 	},
 }
 </script>
@@ -145,6 +165,27 @@ export default {
 
 .list-item-style {
 	list-style: none;
+	position: relative;
+	::v-deep .line-one{
+		display: inline-block;
+		width: 80%;
+	}
+	::v-deep .line-two{
+		.starred{
+			position: absolute;
+			right: 10px;
+			top: 20px;
+		}
+	}
+}
+.starred {
+	::v-deep .material-design-icon__svg {
+		fill: #FC0;
+		path {
+			stroke: #FC0;
+			stroke-width: 1px;
+		}
+	}
 }
 
 </style>
diff --git a/src/components/DetailsHeader.vue b/src/components/DetailsHeader.vue
index 31788e196..bfb434139 100644
--- a/src/components/DetailsHeader.vue
+++ b/src/components/DetailsHeader.vue
@@ -28,7 +28,9 @@
 			<div class="contact-header__avatar">
 				<slot name="avatar" :avatar-size="avatarSize" />
 			</div>
-
+			<div class="contact-header__starred">
+				<slot name="starred" />
+			</div>
 			<!-- fullname, org, title -->
 			<div class="contact-header__infos">
 				<h2 class="contact-header__infos-title">
@@ -37,13 +39,10 @@
 				<div v-if="$slots.subtitle" class="contact-header__infos-subtitle">
 					<slot name="subtitle" />
 				</div>
-			</div>
 		</div>
 
 		<!-- actions -->
 		<div class="contact-header__actions">
-			<slot name="actions" />
-
 			<!-- menu actions -->
 			<Actions ref="actions"
 				class="header-menu"
@@ -65,9 +64,18 @@ export default {
 		Actions,
 	},
 
+	props: {
+		contact: {
+			type: Contact,
+			default: null,
+			required: true,
+		},
+	},
+
 	data() {
 		return {
 			avatarSize: 75,
+			starred: false,
 		}
 	},
 
@@ -127,7 +135,6 @@ $top-padding: 50px;
 		width: $contact-details-label-max-width;
 		min-width: 0; // Has to be zero unless we implement wrapping
 	}
-
 	// ORG-TITLE-NAME
 	&__infos {
 		flex-direction: column;
@@ -148,7 +155,6 @@ $top-padding: 50px;
 		::v-deep input {
 			flex: 1 auto;
 		}
-
 		&-title ::v-deep input {
 			font-weight: bold;
 		}
diff --git a/src/components/EntityPicker/ContactsPicker.vue b/src/components/EntityPicker/ContactsPicker.vue
index edb5463d4..c96b3ff67 100644
--- a/src/components/EntityPicker/ContactsPicker.vue
+++ b/src/components/EntityPicker/ContactsPicker.vue
@@ -142,6 +142,10 @@ export default {
 					requests.push(limit(() => appendContactToGroup(contact, groupName)
 						.then((response) => {
 							this.$store.dispatch('addContactToGroup', { contact, groupName })
+							if (groupName === 'starred') {
+								this.$root.$emit('is-starred', { starred: true, contact: this.contacts[entity.id] })
+								this.$root.$emit('starred-list-update', { starred: true, contact: this.contacts[entity.id] })
+							}
 							this.processStatus.progress++
 							this.processStatus.success++
 						})
diff --git a/src/components/Properties/PropertyGroups.vue b/src/components/Properties/PropertyGroups.vue
index cf788f695..f4e188ff5 100644
--- a/src/components/Properties/PropertyGroups.vue
+++ b/src/components/Properties/PropertyGroups.vue
@@ -104,6 +104,10 @@ export default {
 			type: Boolean,
 			required: true,
 		},
+		groupValue: {
+			type: String,
+			default: null,
+		},
 	},
 
 	data() {
@@ -150,6 +154,21 @@ export default {
 		},
 	},
 
+	mounted() {
+		this.handleStarred = (groupName, starredValue) => {
+			if (starredValue === true) {
+				this.addValidateGroup(groupName)
+			} else {
+				this.removeValidateGroup(groupName)
+			}
+		}
+		this.$root.$on('starred-update', this.handleStarred)
+		this.$root.$emit('is-starred', { starred: this.searchContactToGroup(), contact: this.contact })
+	},
+	beforeDestroy() {
+		this.$root.$off('starred-update', this.handleStarred)
+	},
+
 	methods: {
 
 		/**
@@ -171,8 +190,23 @@ export default {
 				groupName,
 			})
 			this.updateValue()
+			if (groupName === 'starred') {
+				this.$root.$emit('is-starred', { starred: true, contact: this.contact })
+				this.$root.$emit('starred-list-update', { starred: true, contact: this.contact })
+			}
+		},
+		/**
+		 * Dispatch contact removal from group
+		 *
+		 * @param {string} groupName the group name
+		 */
+		 searchContactToGroup() {
+			const group = this.$store.getters.getGroups.find(search => search.name === 'starred')
+			if (group && Array.isArray(group.contacts) && group.contacts.includes(this.contact.key) === true) {
+				return true
+			}
+			return false
 		},
-
 		/**
 		 * Dispatch contact removal from group
 		 *
@@ -185,9 +219,12 @@ export default {
 			})
 			const group = this.$store.getters.getGroups.find(search => search.name === groupName)
 			if (group.contacts.length === 0) {
-				this.$emit('update:value', [])
+				this.updateValue()
+			}
+			if (groupName === 'starred') {
+				this.$root.$emit('is-starred', { starred: false, contact: this.contact })
+				this.$root.$emit('starred-list-update', { starred: false, contact: this.contact })
 			}
-
 		},
 
 		/**
@@ -201,6 +238,87 @@ export default {
 			this.localValue.push(groupName)
 			return true
 		},
+		/**
+		 * Dispatch contact addition to group
+		 *
+		 * @param {string} groupName the group name
+		 */
+		async addStarredContactToGroup(groupName) {
+			await this.$store.dispatch('addContactToGroup', {
+				contact: this.contact,
+				groupName,
+			})
+			this.updateValue()
+		},
+		/**
+		 * Add Validate groupname and dispatch creation
+		 *
+		 * @param {string} groupName the group name
+		 * @return {boolean}
+		 */
+		 addValidateGroup(groupName) {
+			if (this.localValue.some(element => element.includes('starred')) === false) {
+				this.localValue.push(groupName)
+			}
+			const group = this.$store.getters.getGroups.find(search => search.name === groupName)
+			if (group && Array.isArray(group.contacts) && group.contacts.includes(this.contact.key) === false) {
+				this.addStarredContactToGroup(groupName)
+			}
+			if (typeof group === 'undefined') {
+				this.addStarredContactToGroup(groupName)
+			}
+			this.$root.$emit('starred-list-update', { starred: true, contact: this.contact })
+			this.$root.$emit('starred-response', true)
+			return true
+		},
+
+		/**
+		 * Add Validate groupname and dispatch creation
+		 *
+		 * @param {string} groupName the group name
+		 *  @return {boolean}
+		 */
+		removeValidateGroup(groupName) {
+			const group = this.$store.getters.getGroups.find(search => search.name === groupName)
+			if (group && Array.isArray(group.contacts) && group.contacts.includes(this.contact.key) === true) {
+				 this.$store.dispatch('removeContactToGroup', {
+					contact: this.contact,
+					groupName,
+				})
+			}
+			if (this.localValue.some(element => element.includes('starred')) === true) {
+				const index = this.localValue.indexOf(groupName)
+				if (index !== -1) {
+					this.localValue.splice(index, 1)
+				}
+			}
+			this.updateValue()
+			this.$root.$emit('starred-list-update', { starred: false, contact: this.contact })
+			this.$root.$emit('starred-response', false)
+			return true
+		},
 	},
 }
 </script>
+<style lang="scss" scoped>
+.property__label:not(.multiselect) {
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	opacity: 0.7;
+}
+.property__row {
+	position: relative;
+	display: flex;
+	align-items: center;
+}
+.property__label, .property__label.multiselect {
+	flex: 1 0;
+	width: 60px;
+	min-width: 60px !important;
+	max-width: 120px;
+	user-select: none;
+	text-align: right;
+	background-size: 16px;
+}
+</style>