From 5f58bbdccb6da4845df1be45c32ab01ebfa68011 Mon Sep 17 00:00:00 2001
From: pallavibakale <pallavibakale09@gmail.com>
Date: Mon, 8 Jun 2026 13:30:21 -0400
Subject: [PATCH 1/4] fix(teams): restore selectedGroup on circle/user_group
 routes to fix "Unable to create contact" error (#5257)

Signed-off-by: pallavibakale <pallavibakale09@gmail.com>
---
 src/mixins/RouterMixin.js |  44 +-
 src/views/Contacts.vue    | 882 ++++++++++++++++++++------------------
 2 files changed, 495 insertions(+), 431 deletions(-)

diff --git a/src/mixins/RouterMixin.js b/src/mixins/RouterMixin.js
index e88635ff32..abe659a72c 100644
--- a/src/mixins/RouterMixin.js
+++ b/src/mixins/RouterMixin.js
@@ -2,23 +2,29 @@
  * SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
+
+import { ROUTE_CIRCLE, ROUTE_USER_GROUP } from '../models/constants.ts';
+
 export default {
-	computed: {
-		// router variables
-		selectedContact() {
-			return this.$route.params.selectedContact
-		},
-		selectedGroup() {
-			return this.$route.params.selectedGroup
-		},
-		selectedCircle() {
-			return this.$route.params.selectedCircle
-		},
-		selectedUserGroup() {
-			return this.$route.params.selectedUserGroup
-		},
-		selectedChart() {
-			return this.$route.params.selectedChart
-		},
-	},
-}
+  computed: {
+    // router variables
+    selectedContact() {
+      return this.$route.params.selectedContact;
+    },
+    selectedGroup() {
+      const { name } = this.$route;
+      if (name === 'circle') return ROUTE_CIRCLE;
+      if (name === 'user_group') return ROUTE_USER_GROUP;
+      return this.$route.params.selectedGroup;
+    },
+    selectedCircle() {
+      return this.$route.params.selectedCircle;
+    },
+    selectedUserGroup() {
+      return this.$route.params.selectedUserGroup;
+    },
+    selectedChart() {
+      return this.$route.params.selectedChart;
+    },
+  },
+};
diff --git a/src/views/Contacts.vue b/src/views/Contacts.vue
index 9def24512d..424f8e7dfe 100644
--- a/src/views/Contacts.vue
+++ b/src/views/Contacts.vue
@@ -4,431 +4,489 @@
 -->
 
 <template>
-	<Content :app-name="appName">
-		<!-- new-contact-button + navigation + settings -->
-		<RootNavigation
-			:loading="loadingContacts || loadingCircles">
-			<div class="import-and-new-contact-buttons">
-				<SettingsImportContacts v-if="!loadingContacts && isEmptyGroup && !isChartView && !isCirclesView" />
-				<!-- new-contact-button -->
-				<NcButton
-					v-if="!loadingContacts"
-					:disabled="!defaultAddressbook"
-					variant="secondary"
-					wide
-					@click="newContact">
-					<template #icon>
-						<IconAdd :size="20" />
-					</template>
-					{{ isCirclesView ? t('contacts', 'Add member') : t('contacts', 'New contact') }}
-				</NcButton>
-			</div>
-		</RootNavigation>
-
-		<!-- Main content: circle, chart or contacts -->
-		<UserGroupContent
-			v-if="selectedUserGroup"
-			:loding="loadingCircles" />
-		<CircleContent
-			v-if="selectedCircle || selectedUserGroup"
-			:loading="loadingCircles" />
-		<ChartContent
-			v-else-if="selectedChart"
-			:contacts-list="contacts" />
-		<ContactsContent
-			v-else
-			:contacts-list="contactsList"
-			:loading="loadingContacts"
-			@new-contact="newContact" />
-
-		<!-- Import modal -->
-		<Modal
-			v-if="isImporting"
-			:clear-view-delay="-1"
-			:can-close="isImportDone"
-			@close="closeImport">
-			<ImportView @close="closeImport" />
-		</Modal>
-
-		<!-- Select contacts group modal -->
-		<ContactsPicker />
-	</Content>
+  <Content :app-name="appName">
+    <!-- new-contact-button + navigation + settings -->
+    <RootNavigation :loading="loadingContacts || loadingCircles">
+      <div class="import-and-new-contact-buttons">
+        <SettingsImportContacts
+          v-if="
+            !loadingContacts && isEmptyGroup && !isChartView && !isCirclesView
+          "
+        />
+        <!-- new-contact-button -->
+        <NcButton
+          v-if="!loadingContacts"
+          :disabled="!defaultAddressbook"
+          variant="secondary"
+          wide
+          @click="newContact"
+        >
+          <template #icon>
+            <IconAdd :size="20" />
+          </template>
+          {{
+            isCirclesView
+              ? t('contacts', 'Add member')
+              : t('contacts', 'New contact')
+          }}
+        </NcButton>
+      </div>
+    </RootNavigation>
+
+    <!-- Main content: circle, chart or contacts -->
+    <UserGroupContent v-if="selectedUserGroup" :loding="loadingCircles" />
+    <CircleContent
+      v-if="selectedCircle || selectedUserGroup"
+      :loading="loadingCircles"
+    />
+    <ChartContent v-else-if="selectedChart" :contacts-list="contacts" />
+    <ContactsContent
+      v-else
+      :contacts-list="contactsList"
+      :loading="loadingContacts"
+      @new-contact="newContact"
+    />
+
+    <!-- Import modal -->
+    <Modal
+      v-if="isImporting"
+      :clear-view-delay="-1"
+      :can-close="isImportDone"
+      @close="closeImport"
+    >
+      <ImportView @close="closeImport" />
+    </Modal>
+
+    <!-- Select contacts group modal -->
+    <ContactsPicker />
+  </Content>
 </template>
 
 <script>
-import { getCurrentUser } from '@nextcloud/auth'
-import { showError } from '@nextcloud/dialogs'
-import { emit } from '@nextcloud/event-bus'
+import { getCurrentUser } from '@nextcloud/auth';
+import { showError } from '@nextcloud/dialogs';
+import { emit } from '@nextcloud/event-bus';
 import {
-	NcContent as Content,
-	NcModal as Modal,
-	NcButton,
-} from '@nextcloud/vue'
-import ICAL from 'ical.js'
-import IconAdd from 'vue-material-design-icons/Plus.vue'
-import ChartContent from '../components/AppContent/ChartContent.vue'
-import CircleContent from '../components/AppContent/CircleContent.vue'
-import ContactsContent from '../components/AppContent/ContactsContent.vue'
-import RootNavigation from '../components/AppNavigation/RootNavigation.vue'
-import SettingsImportContacts from '../components/AppNavigation/Settings/SettingsImportContacts.vue'
-import ContactsPicker from '../components/EntityPicker/ContactsPicker.vue'
-import ImportView from './Processing/ImportView.vue'
-import IsMobileMixin from '../mixins/IsMobileMixin.ts'
-import RouterMixin from '../mixins/RouterMixin.js'
-import { GROUP_ALL_CONTACTS, GROUP_NO_GROUP_CONTACTS, ROUTE_CIRCLE, ROUTE_USER_GROUP } from '../models/constants.ts'
-import Contact from '../models/contact.js'
-import rfcProps from '../models/rfcProps.js'
-import client from '../services/cdav.js'
-import isCirclesEnabled from '../services/isCirclesEnabled.js'
-import usePrincipalsStore from '../store/principals.js'
-import useUserGroupStore from '../store/userGroup.ts'
+  NcContent as Content,
+  NcModal as Modal,
+  NcButton,
+} from '@nextcloud/vue';
+import ICAL from 'ical.js';
+import IconAdd from 'vue-material-design-icons/Plus.vue';
+import ChartContent from '../components/AppContent/ChartContent.vue';
+import CircleContent from '../components/AppContent/CircleContent.vue';
+import ContactsContent from '../components/AppContent/ContactsContent.vue';
+import RootNavigation from '../components/AppNavigation/RootNavigation.vue';
+import SettingsImportContacts from '../components/AppNavigation/Settings/SettingsImportContacts.vue';
+import ContactsPicker from '../components/EntityPicker/ContactsPicker.vue';
+import ImportView from './Processing/ImportView.vue';
+import IsMobileMixin from '../mixins/IsMobileMixin.ts';
+import RouterMixin from '../mixins/RouterMixin.js';
+import {
+  GROUP_ALL_CONTACTS,
+  GROUP_NO_GROUP_CONTACTS,
+  ROUTE_CIRCLE,
+  ROUTE_USER_GROUP,
+} from '../models/constants.ts';
+import Contact from '../models/contact.js';
+import rfcProps from '../models/rfcProps.js';
+import client from '../services/cdav.js';
+import isCirclesEnabled from '../services/isCirclesEnabled.js';
+import usePrincipalsStore from '../store/principals.js';
+import useUserGroupStore from '../store/userGroup.ts';
 
 export default {
-	name: 'Contacts',
-
-	components: {
-		NcButton,
-		CircleContent,
-		ChartContent,
-		ContactsContent,
-		ContactsPicker,
-		Content,
-		ImportView,
-		IconAdd,
-		Modal,
-		RootNavigation,
-		SettingsImportContacts,
-	},
-
-	mixins: [
-		IsMobileMixin,
-		RouterMixin,
-	],
-
-	data() {
-		return {
-			// The object shorthand syntax is breaking builds (bug in @babel/preset-env)
-			/* eslint-disable object-shorthand */
-			appName: appName,
-
-			// Let's but the loading state to true if circles is enabled
-			loadingCircles: isCirclesEnabled,
-			loadingContacts: true,
-		}
-	},
-
-	computed: {
-		// store getters
-		addressbooks() {
-			return this.$store.getters.getAddressbooks
-		},
-
-		contacts() {
-			return this.$store.getters.getContacts
-		},
-
-		sortedContacts() {
-			return this.$store.getters.getSortedContacts
-		},
-
-		groups() {
-			return this.$store.getters.getGroups
-		},
-
-		circles() {
-			return this.$store.getters.getCircles
-		},
-
-		orderKey() {
-			return this.$store.getters.getOrderKey
-		},
-
-		importState() {
-			return this.$store.getters.getImportState
-		},
-
-		isEmptyGroup() {
-			return this.contactsList.length === 0
-		},
-
-		isChartView() {
-			return !!this.selectedChart
-		},
-
-		/**
-		 * Are we importing contacts ?
-		 *
-		 * @return {boolean}
-		 */
-		isImporting() {
-			return this.importState.stage !== 'default'
-		},
-
-		/**
-		 * Are we done importing contacts ?
-		 *
-		 * @return {boolean}
-		 */
-		isImportDone() {
-			return this.importState.stage === 'done'
-		},
-
-		// first enabled addressbook of the list
-		defaultAddressbook() {
-			return this.addressbooks.find((addressbook) => !addressbook.readOnly && addressbook.enabled)
-		},
-
-		/**
-		 * Contacts list based on the selected group.
-		 * Those filters are pretty fast, so let's only
-		 * intersect the groups contacts and the full
-		 * sorted contacts List.
-		 *
-		 * @return {Array}
-		 */
-		contactsList() {
-			if (this.selectedGroup === GROUP_ALL_CONTACTS) {
-				return this.sortedContacts
-			} else if (this.selectedGroup === GROUP_NO_GROUP_CONTACTS) {
-				return this.ungroupedContacts.map((contact) => this.sortedContacts.find((item) => item.key === contact.key))
-			} else if (this.selectedGroup === ROUTE_CIRCLE || this.selectedGroup === ROUTE_USER_GROUP) {
-				return []
-			}
-			const group = this.groups.filter((group) => group.name === this.selectedGroup)[0]
-			if (group) {
-				return this.sortedContacts.filter((contact) => group.contacts.indexOf(contact.key) >= 0)
-			}
-			return []
-		},
-
-		isCirclesView() {
-			return this.selectedGroup === ROUTE_CIRCLE || this.selectedGroup === ROUTE_USER_GROUP
-		},
-
-		ungroupedContacts() {
-			return this.sortedContacts.filter((contact) => this.contacts[contact.key].groups && this.contacts[contact.key].groups.length === 0)
-		},
-	},
-
-	watch: {
-		// watch url change and group select
-		selectedGroup() {
-			if (!this.isMobile && !this.selectedChart) {
-				this.selectFirstContactIfNone()
-			}
-		},
-
-		// watch url change and contact select
-		selectedContact() {
-			if (!this.isMobile && !this.selectedChart) {
-				this.selectFirstContactIfNone()
-			}
-		},
-	},
-
-	mounted() {
-		if (this.isCirclesEnabled) {
-			this.logger.info('Circles frontend enabled')
-		} else {
-			this.logger.info('No compatible version of circles found')
-		}
-	},
-
-	async beforeMount() {
-		// get addressbooks then get contacts
-		client.connect({ enableCardDAV: true }).then(() => {
-			this.logger.debug('Connected to dav!', { client })
-			const principalsStore = usePrincipalsStore()
-			principalsStore.setCurrentUserPrincipal(client)
-			this.$store.dispatch('getAddressbooks')
-				.then((addressbooks) => {
-					const writeableAddressBooks = addressbooks.filter((addressbook) => !addressbook.readOnly)
-
-					// No writeable addressbooks? Create a new one!
-					if (writeableAddressBooks.length === 0) {
-						this.$store.dispatch('appendAddressbook', { displayName: t('contacts', 'Contacts') })
-							.then(() => {
-								this.fetchContacts()
-							})
-					// else, let's get those contacts!
-					} else {
-						this.fetchContacts()
-					}
-				})
-				// check local storage for orderKey
-			if (localStorage.getItem('orderKey')) {
-				// run setOrder mutation with local storage key
-				this.$store.commit('setOrder', localStorage.getItem('orderKey'))
-			}
-		})
-
-		// Get circles if enabled
-		if (isCirclesEnabled) {
-			const userGroupStore = useUserGroupStore()
-			this.$store.dispatch('getCircles')
-				.then(userGroupStore.getUserGroups(getCurrentUser().uid))
-				.then(() => {
-					this.loadingCircles = false
-				})
-		}
-	},
-
-	methods: {
-		async newContact() {
-			if (this.isCirclesView) {
-				emit('contacts:circles:append', this.selectedCircle.id)
-				return
-			}
-
-			const contact = new Contact(
-				`
+  name: 'Contacts',
+
+  components: {
+    NcButton,
+    CircleContent,
+    ChartContent,
+    ContactsContent,
+    ContactsPicker,
+    Content,
+    ImportView,
+    IconAdd,
+    Modal,
+    RootNavigation,
+    SettingsImportContacts,
+  },
+
+  mixins: [IsMobileMixin, RouterMixin],
+
+  data() {
+    return {
+      // The object shorthand syntax is breaking builds (bug in @babel/preset-env)
+      /* eslint-disable object-shorthand */
+      appName: appName,
+
+      // Let's but the loading state to true if circles is enabled
+      loadingCircles: isCirclesEnabled,
+      loadingContacts: true,
+    };
+  },
+
+  computed: {
+    // store getters
+    addressbooks() {
+      return this.$store.getters.getAddressbooks;
+    },
+
+    contacts() {
+      return this.$store.getters.getContacts;
+    },
+
+    sortedContacts() {
+      return this.$store.getters.getSortedContacts;
+    },
+
+    groups() {
+      return this.$store.getters.getGroups;
+    },
+
+    circles() {
+      return this.$store.getters.getCircles;
+    },
+
+    orderKey() {
+      return this.$store.getters.getOrderKey;
+    },
+
+    importState() {
+      return this.$store.getters.getImportState;
+    },
+
+    isEmptyGroup() {
+      return this.contactsList.length === 0;
+    },
+
+    isChartView() {
+      return !!this.selectedChart;
+    },
+
+    /**
+     * Are we importing contacts ?
+     *
+     * @return {boolean}
+     */
+    isImporting() {
+      return this.importState.stage !== 'default';
+    },
+
+    /**
+     * Are we done importing contacts ?
+     *
+     * @return {boolean}
+     */
+    isImportDone() {
+      return this.importState.stage === 'done';
+    },
+
+    // first enabled addressbook of the list
+    defaultAddressbook() {
+      return this.addressbooks.find(
+        (addressbook) => !addressbook.readOnly && addressbook.enabled,
+      );
+    },
+
+    /**
+     * Contacts list based on the selected group.
+     * Those filters are pretty fast, so let's only
+     * intersect the groups contacts and the full
+     * sorted contacts List.
+     *
+     * @return {Array}
+     */
+    contactsList() {
+      if (this.selectedGroup === GROUP_ALL_CONTACTS) {
+        return this.sortedContacts;
+      } else if (this.selectedGroup === GROUP_NO_GROUP_CONTACTS) {
+        return this.ungroupedContacts.map((contact) =>
+          this.sortedContacts.find((item) => item.key === contact.key),
+        );
+      } else if (
+        this.selectedGroup === ROUTE_CIRCLE ||
+        this.selectedGroup === ROUTE_USER_GROUP
+      ) {
+        return [];
+      }
+      const group = this.groups.filter(
+        (group) => group.name === this.selectedGroup,
+      )[0];
+      if (group) {
+        return this.sortedContacts.filter(
+          (contact) => group.contacts.indexOf(contact.key) >= 0,
+        );
+      }
+      return [];
+    },
+
+    isCirclesView() {
+      return (
+        this.selectedGroup === ROUTE_CIRCLE ||
+        this.selectedGroup === ROUTE_USER_GROUP
+      );
+    },
+
+    ungroupedContacts() {
+      return this.sortedContacts.filter(
+        (contact) =>
+          this.contacts[contact.key].groups &&
+          this.contacts[contact.key].groups.length === 0,
+      );
+    },
+  },
+
+  watch: {
+    // watch url change and group select
+    selectedGroup() {
+      if (!this.isMobile && !this.selectedChart) {
+        this.selectFirstContactIfNone();
+      }
+    },
+
+    // watch url change and contact select
+    selectedContact() {
+      if (!this.isMobile && !this.selectedChart) {
+        this.selectFirstContactIfNone();
+      }
+    },
+  },
+
+  mounted() {
+    if (this.isCirclesEnabled) {
+      this.logger.info('Circles frontend enabled');
+    } else {
+      this.logger.info('No compatible version of circles found');
+    }
+  },
+
+  async beforeMount() {
+    // get addressbooks then get contacts
+    client.connect({ enableCardDAV: true }).then(() => {
+      this.logger.debug('Connected to dav!', { client });
+      const principalsStore = usePrincipalsStore();
+      principalsStore.setCurrentUserPrincipal(client);
+      this.$store.dispatch('getAddressbooks').then((addressbooks) => {
+        const writeableAddressBooks = addressbooks.filter(
+          (addressbook) => !addressbook.readOnly,
+        );
+
+        // No writeable addressbooks? Create a new one!
+        if (writeableAddressBooks.length === 0) {
+          this.$store
+            .dispatch('appendAddressbook', {
+              displayName: t('contacts', 'Contacts'),
+            })
+            .then(() => {
+              this.fetchContacts();
+            });
+          // else, let's get those contacts!
+        } else {
+          this.fetchContacts();
+        }
+      });
+      // check local storage for orderKey
+      if (localStorage.getItem('orderKey')) {
+        // run setOrder mutation with local storage key
+        this.$store.commit('setOrder', localStorage.getItem('orderKey'));
+      }
+    });
+
+    // Get circles if enabled
+    if (isCirclesEnabled) {
+      const userGroupStore = useUserGroupStore();
+      this.$store
+        .dispatch('getCircles')
+        .then(userGroupStore.getUserGroups(getCurrentUser().uid))
+        .then(() => {
+          this.loadingCircles = false;
+        });
+    }
+  },
+
+  methods: {
+    async newContact() {
+      if (this.selectedCircle) {
+        emit('contacts:circles:append', this.selectedCircle.id);
+        return;
+      }
+
+      const contact = new Contact(
+        `
 				BEGIN:VCARD
 				VERSION:4.0
 				PRODID:-//Nextcloud Contacts v${appVersion}
 				END:VCARD
-			`.trim().replace(/\t/gm, ''),
-				this.defaultAddressbook,
-			)
-
-			contact.fullName = t('contacts', 'Name')
-
-			contact.rev = ICAL.Time.fromJSDate(new Date(), true)
-
-			// itterate over all properties (filter is not usable on objects and we need the key of the property)
-			const properties = rfcProps.properties
-			for (const name in properties) {
-				if (properties[name].default) {
-					const defaultData = properties[name].defaultValue
-					let defaultValue = defaultData.value
-					if (Array.isArray(defaultValue)) {
-						defaultValue = [...defaultValue]
-					}
-					// add default field
-					const property = contact.vCard.addPropertyWithValue(name, defaultValue)
-					// add default type
-					if (defaultData.type) {
-						property.setParameter('type', defaultData.type)
-					}
-				}
-			}
-
-			// set group if it's selected already
-			// BUT NOT if it's the _fake_ groups like all contacts and not grouped
-			if ([GROUP_ALL_CONTACTS, GROUP_NO_GROUP_CONTACTS].indexOf(this.selectedGroup) === -1) {
-				contact.groups = [this.selectedGroup]
-			}
-			try {
-				// this will trigger the proper commits to groups, contacts and addressbook
-				await this.$store.dispatch('addContact', contact)
-				await this.$router.push({
-					name: 'contact',
-					params: {
-						selectedGroup: this.selectedGroup,
-						selectedContact: contact.key,
-					},
-				})
-			} catch (error) {
-				showError(t('contacts', 'Unable to create the contact.'))
-				console.error(error)
-			}
-		},
-
-		/**
-		 * Dispatch sorting update request to the store
-		 *
-		 * @param {string} orderKey the object key to order by
-		 */
-		updateSorting(orderKey = 'displayName') {
-			this.$store.commit('setOrder', orderKey)
-			this.$store.commit('sortContacts')
-		},
-
-		/**
-		 * Fetch the contacts of each addressbooks
-		 */
-		fetchContacts() {
-			// wait for all addressbooks to have fetch their contacts
-			// don't filter disabled at this point, because sum of contacts per address book is shown
-			Promise.all(this.addressbooks
-				.map((addressbook) => {
-					if (!addressbook.enabled) {
-						return Promise.resolve()
-					}
-					return this.$store.dispatch('getContactsFromAddressBook', { addressbook })
-				})).then(() => {
-				this.loadingContacts = false
-				if (!this.isMobile && !this.selectedChart) {
-					this.selectFirstContactIfNone()
-				}
-			})
-		},
-
-		/**
-		 * Select the first contact of the list
-		 * if none are selected already
-		 */
-		selectFirstContactIfNone() {
-			// Do not redirect if pending import
-			if (this.$route.name === 'import') {
-				return
-			}
-
-			const inList = this.contactsList.findIndex((contact) => contact.key === this.selectedContact) > -1
-			if (!this.selectedContact || !inList) {
-				// Unknown contact
-				if (this.selectedContact && !inList) {
-					showError(t('contacts', 'Contact not found'))
-					this.$router.push({
-						name: 'group',
-						params: {
-							selectedGroup: this.selectedGroup,
-						},
-					})
-				}
-
-				// Unknown group
-				if (!this.selectedCircle
-					&& !this.selectedUserGroup
-					&& !this.groups.find((group) => group.name === this.selectedGroup)
-					&& GROUP_ALL_CONTACTS !== this.selectedGroup
-					&& GROUP_NO_GROUP_CONTACTS !== this.selectedGroup
-					&& ROUTE_CIRCLE !== this.selectedGroup
-					&& ROUTE_USER_GROUP !== this.selectedGroup) {
-					showError(t('contacts', 'Group {group} not found', { group: this.selectedGroup }))
-					console.error('Group not found', this.selectedGroup)
-
-					this.$router.push({
-						name: 'root',
-					})
-					return
-				}
-
-				if (Object.keys(this.contactsList).length) {
-					this.$router.push({
-						name: 'contact',
-						params: {
-							selectedGroup: this.selectedGroup,
-							selectedContact: Object.values(this.contactsList)[0].key,
-						},
-					})
-				}
-			}
-		},
-
-		/**
-		 * Done importing, the user closed the import status screen
-		 */
-		closeImport() {
-			this.$store.dispatch('changeStage', 'default')
-		},
-	},
-}
+			`
+          .trim()
+          .replace(/\t/gm, ''),
+        this.defaultAddressbook,
+      );
+
+      contact.fullName = t('contacts', 'Name');
+
+      contact.rev = ICAL.Time.fromJSDate(new Date(), true);
+
+      // itterate over all properties (filter is not usable on objects and we need the key of the property)
+      const properties = rfcProps.properties;
+      for (const name in properties) {
+        if (properties[name].default) {
+          const defaultData = properties[name].defaultValue;
+          let defaultValue = defaultData.value;
+          if (Array.isArray(defaultValue)) {
+            defaultValue = [...defaultValue];
+          }
+          // add default field
+          const property = contact.vCard.addPropertyWithValue(
+            name,
+            defaultValue,
+          );
+          // add default type
+          if (defaultData.type) {
+            property.setParameter('type', defaultData.type);
+          }
+        }
+      }
+
+      // set group if it's selected already
+      // BUT NOT if it's the _fake_ groups like all contacts and not grouped
+      if (
+        ![
+          GROUP_ALL_CONTACTS,
+          GROUP_NO_GROUP_CONTACTS,
+          ROUTE_CIRCLE,
+          ROUTE_USER_GROUP,
+        ].includes(this.selectedGroup)
+      ) {
+        contact.groups = [this.selectedGroup];
+      }
+      try {
+        // this will trigger the proper commits to groups, contacts and addressbook
+        await this.$store.dispatch('addContact', contact);
+        await this.$router.push({
+          name: 'contact',
+          params: {
+            selectedGroup: this.selectedUserGroup
+              ? GROUP_ALL_CONTACTS
+              : this.selectedGroup,
+            selectedContact: contact.key,
+          },
+        });
+      } catch (error) {
+        showError(t('contacts', 'Unable to create the contact.'));
+        console.error(error);
+      }
+    },
+
+    /**
+     * Dispatch sorting update request to the store
+     *
+     * @param {string} orderKey the object key to order by
+     */
+    updateSorting(orderKey = 'displayName') {
+      this.$store.commit('setOrder', orderKey);
+      this.$store.commit('sortContacts');
+    },
+
+    /**
+     * Fetch the contacts of each addressbooks
+     */
+    fetchContacts() {
+      // wait for all addressbooks to have fetch their contacts
+      // don't filter disabled at this point, because sum of contacts per address book is shown
+      Promise.all(
+        this.addressbooks.map((addressbook) => {
+          if (!addressbook.enabled) {
+            return Promise.resolve();
+          }
+          return this.$store.dispatch('getContactsFromAddressBook', {
+            addressbook,
+          });
+        }),
+      ).then(() => {
+        this.loadingContacts = false;
+        if (!this.isMobile && !this.selectedChart) {
+          this.selectFirstContactIfNone();
+        }
+      });
+    },
+
+    /**
+     * Select the first contact of the list
+     * if none are selected already
+     */
+    selectFirstContactIfNone() {
+      // Do not redirect if pending import
+      if (this.$route.name === 'import') {
+        return;
+      }
+
+      const inList =
+        this.contactsList.findIndex(
+          (contact) => contact.key === this.selectedContact,
+        ) > -1;
+      if (!this.selectedContact || !inList) {
+        // Unknown contact
+        if (this.selectedContact && !inList) {
+          showError(t('contacts', 'Contact not found'));
+          this.$router.push({
+            name: 'group',
+            params: {
+              selectedGroup: this.selectedGroup,
+            },
+          });
+        }
+
+        // Unknown group
+        if (
+          !this.selectedCircle &&
+          !this.selectedUserGroup &&
+          !this.groups.find((group) => group.name === this.selectedGroup) &&
+          GROUP_ALL_CONTACTS !== this.selectedGroup &&
+          GROUP_NO_GROUP_CONTACTS !== this.selectedGroup &&
+          ROUTE_CIRCLE !== this.selectedGroup &&
+          ROUTE_USER_GROUP !== this.selectedGroup
+        ) {
+          showError(
+            t('contacts', 'Group {group} not found', {
+              group: this.selectedGroup,
+            }),
+          );
+          console.error('Group not found', this.selectedGroup);
+
+          this.$router.push({
+            name: 'root',
+          });
+          return;
+        }
+
+        if (Object.keys(this.contactsList).length) {
+          this.$router.push({
+            name: 'contact',
+            params: {
+              selectedGroup: this.selectedGroup,
+              selectedContact: Object.values(this.contactsList)[0].key,
+            },
+          });
+        }
+      }
+    },
+
+    /**
+     * Done importing, the user closed the import status screen
+     */
+    closeImport() {
+      this.$store.dispatch('changeStage', 'default');
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
 .import-and-new-contact-buttons {
-	display: flex;
-	flex-direction: column;
-	gap: 4px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
 }
 </style>

From 41b2540ed3342ba0d4e2347036c982b824af9b51 Mon Sep 17 00:00:00 2001
From: pallavibakale <pallavibakale09@gmail.com>
Date: Thu, 11 Jun 2026 11:36:34 -0400
Subject: [PATCH 2/4] fix: linting errors

Signed-off-by: pallavibakale <pallavibakale09@gmail.com>
---
 src/mixins/RouterMixin.js |  46 +-
 src/views/Contacts.vue    | 906 +++++++++++++++++++-------------------
 2 files changed, 464 insertions(+), 488 deletions(-)

diff --git a/src/mixins/RouterMixin.js b/src/mixins/RouterMixin.js
index abe659a72c..cb816a0a25 100644
--- a/src/mixins/RouterMixin.js
+++ b/src/mixins/RouterMixin.js
@@ -3,28 +3,28 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import { ROUTE_CIRCLE, ROUTE_USER_GROUP } from '../models/constants.ts';
+import { ROUTE_CIRCLE, ROUTE_USER_GROUP } from '../models/constants.ts'
 
 export default {
-  computed: {
-    // router variables
-    selectedContact() {
-      return this.$route.params.selectedContact;
-    },
-    selectedGroup() {
-      const { name } = this.$route;
-      if (name === 'circle') return ROUTE_CIRCLE;
-      if (name === 'user_group') return ROUTE_USER_GROUP;
-      return this.$route.params.selectedGroup;
-    },
-    selectedCircle() {
-      return this.$route.params.selectedCircle;
-    },
-    selectedUserGroup() {
-      return this.$route.params.selectedUserGroup;
-    },
-    selectedChart() {
-      return this.$route.params.selectedChart;
-    },
-  },
-};
+	computed: {
+		// router variables
+		selectedContact() {
+			return this.$route.params.selectedContact
+		},
+		selectedGroup() {
+			const { name } = this.$route
+			if (name === 'circle') { return ROUTE_CIRCLE }
+			if (name === 'user_group') { return ROUTE_USER_GROUP }
+			return this.$route.params.selectedGroup
+		},
+		selectedCircle() {
+			return this.$route.params.selectedCircle
+		},
+		selectedUserGroup() {
+			return this.$route.params.selectedUserGroup
+		},
+		selectedChart() {
+			return this.$route.params.selectedChart
+		},
+	},
+}
diff --git a/src/views/Contacts.vue b/src/views/Contacts.vue
index 424f8e7dfe..2877cf2fce 100644
--- a/src/views/Contacts.vue
+++ b/src/views/Contacts.vue
@@ -4,483 +4,459 @@
 -->
 
 <template>
-  <Content :app-name="appName">
-    <!-- new-contact-button + navigation + settings -->
-    <RootNavigation :loading="loadingContacts || loadingCircles">
-      <div class="import-and-new-contact-buttons">
-        <SettingsImportContacts
-          v-if="
-            !loadingContacts && isEmptyGroup && !isChartView && !isCirclesView
-          "
-        />
-        <!-- new-contact-button -->
-        <NcButton
-          v-if="!loadingContacts"
-          :disabled="!defaultAddressbook"
-          variant="secondary"
-          wide
-          @click="newContact"
-        >
-          <template #icon>
-            <IconAdd :size="20" />
-          </template>
-          {{
-            isCirclesView
-              ? t('contacts', 'Add member')
-              : t('contacts', 'New contact')
-          }}
-        </NcButton>
-      </div>
-    </RootNavigation>
-
-    <!-- Main content: circle, chart or contacts -->
-    <UserGroupContent v-if="selectedUserGroup" :loding="loadingCircles" />
-    <CircleContent
-      v-if="selectedCircle || selectedUserGroup"
-      :loading="loadingCircles"
-    />
-    <ChartContent v-else-if="selectedChart" :contacts-list="contacts" />
-    <ContactsContent
-      v-else
-      :contacts-list="contactsList"
-      :loading="loadingContacts"
-      @new-contact="newContact"
-    />
-
-    <!-- Import modal -->
-    <Modal
-      v-if="isImporting"
-      :clear-view-delay="-1"
-      :can-close="isImportDone"
-      @close="closeImport"
-    >
-      <ImportView @close="closeImport" />
-    </Modal>
-
-    <!-- Select contacts group modal -->
-    <ContactsPicker />
-  </Content>
+	<Content :app-name="appName">
+		<!-- new-contact-button + navigation + settings -->
+		<RootNavigation :loading="loadingContacts || loadingCircles">
+			<div class="import-and-new-contact-buttons">
+				<SettingsImportContacts
+					v-if="
+						!loadingContacts && isEmptyGroup && !isChartView && !isCirclesView
+					" />
+				<!-- new-contact-button -->
+				<NcButton
+					v-if="!loadingContacts"
+					:disabled="!defaultAddressbook"
+					variant="secondary"
+					wide
+					@click="newContact">
+					<template #icon>
+						<IconAdd :size="20" />
+					</template>
+					{{
+						isCirclesView
+							? t('contacts', 'Add member')
+							: t('contacts', 'New contact')
+					}}
+				</NcButton>
+			</div>
+		</RootNavigation>
+
+		<!-- Main content: circle, chart or contacts -->
+		<UserGroupContent v-if="selectedUserGroup" :loding="loadingCircles" />
+		<CircleContent
+			v-if="selectedCircle || selectedUserGroup"
+			:loading="loadingCircles" />
+		<ChartContent v-else-if="selectedChart" :contacts-list="contacts" />
+		<ContactsContent
+			v-else
+			:contacts-list="contactsList"
+			:loading="loadingContacts"
+			@new-contact="newContact" />
+
+		<!-- Import modal -->
+		<Modal
+			v-if="isImporting"
+			:clear-view-delay="-1"
+			:can-close="isImportDone"
+			@close="closeImport">
+			<ImportView @close="closeImport" />
+		</Modal>
+
+		<!-- Select contacts group modal -->
+		<ContactsPicker />
+	</Content>
 </template>
 
 <script>
-import { getCurrentUser } from '@nextcloud/auth';
-import { showError } from '@nextcloud/dialogs';
-import { emit } from '@nextcloud/event-bus';
+import { getCurrentUser } from '@nextcloud/auth'
+import { showError } from '@nextcloud/dialogs'
+import { emit } from '@nextcloud/event-bus'
 import {
-  NcContent as Content,
-  NcModal as Modal,
-  NcButton,
-} from '@nextcloud/vue';
-import ICAL from 'ical.js';
-import IconAdd from 'vue-material-design-icons/Plus.vue';
-import ChartContent from '../components/AppContent/ChartContent.vue';
-import CircleContent from '../components/AppContent/CircleContent.vue';
-import ContactsContent from '../components/AppContent/ContactsContent.vue';
-import RootNavigation from '../components/AppNavigation/RootNavigation.vue';
-import SettingsImportContacts from '../components/AppNavigation/Settings/SettingsImportContacts.vue';
-import ContactsPicker from '../components/EntityPicker/ContactsPicker.vue';
-import ImportView from './Processing/ImportView.vue';
-import IsMobileMixin from '../mixins/IsMobileMixin.ts';
-import RouterMixin from '../mixins/RouterMixin.js';
+	NcContent as Content,
+	NcModal as Modal,
+	NcButton,
+} from '@nextcloud/vue'
+import ICAL from 'ical.js'
+import IconAdd from 'vue-material-design-icons/Plus.vue'
+import ChartContent from '../components/AppContent/ChartContent.vue'
+import CircleContent from '../components/AppContent/CircleContent.vue'
+import ContactsContent from '../components/AppContent/ContactsContent.vue'
+import RootNavigation from '../components/AppNavigation/RootNavigation.vue'
+import SettingsImportContacts from '../components/AppNavigation/Settings/SettingsImportContacts.vue'
+import ContactsPicker from '../components/EntityPicker/ContactsPicker.vue'
+import ImportView from './Processing/ImportView.vue'
+import IsMobileMixin from '../mixins/IsMobileMixin.ts'
+import RouterMixin from '../mixins/RouterMixin.js'
 import {
-  GROUP_ALL_CONTACTS,
-  GROUP_NO_GROUP_CONTACTS,
-  ROUTE_CIRCLE,
-  ROUTE_USER_GROUP,
-} from '../models/constants.ts';
-import Contact from '../models/contact.js';
-import rfcProps from '../models/rfcProps.js';
-import client from '../services/cdav.js';
-import isCirclesEnabled from '../services/isCirclesEnabled.js';
-import usePrincipalsStore from '../store/principals.js';
-import useUserGroupStore from '../store/userGroup.ts';
+	GROUP_ALL_CONTACTS,
+	GROUP_NO_GROUP_CONTACTS,
+	ROUTE_CIRCLE,
+	ROUTE_USER_GROUP,
+} from '../models/constants.ts'
+import Contact from '../models/contact.js'
+import rfcProps from '../models/rfcProps.js'
+import client from '../services/cdav.js'
+import isCirclesEnabled from '../services/isCirclesEnabled.js'
+import usePrincipalsStore from '../store/principals.js'
+import useUserGroupStore from '../store/userGroup.ts'
 
 export default {
-  name: 'Contacts',
-
-  components: {
-    NcButton,
-    CircleContent,
-    ChartContent,
-    ContactsContent,
-    ContactsPicker,
-    Content,
-    ImportView,
-    IconAdd,
-    Modal,
-    RootNavigation,
-    SettingsImportContacts,
-  },
-
-  mixins: [IsMobileMixin, RouterMixin],
-
-  data() {
-    return {
-      // The object shorthand syntax is breaking builds (bug in @babel/preset-env)
-      /* eslint-disable object-shorthand */
-      appName: appName,
-
-      // Let's but the loading state to true if circles is enabled
-      loadingCircles: isCirclesEnabled,
-      loadingContacts: true,
-    };
-  },
-
-  computed: {
-    // store getters
-    addressbooks() {
-      return this.$store.getters.getAddressbooks;
-    },
-
-    contacts() {
-      return this.$store.getters.getContacts;
-    },
-
-    sortedContacts() {
-      return this.$store.getters.getSortedContacts;
-    },
-
-    groups() {
-      return this.$store.getters.getGroups;
-    },
-
-    circles() {
-      return this.$store.getters.getCircles;
-    },
-
-    orderKey() {
-      return this.$store.getters.getOrderKey;
-    },
-
-    importState() {
-      return this.$store.getters.getImportState;
-    },
-
-    isEmptyGroup() {
-      return this.contactsList.length === 0;
-    },
-
-    isChartView() {
-      return !!this.selectedChart;
-    },
-
-    /**
-     * Are we importing contacts ?
-     *
-     * @return {boolean}
-     */
-    isImporting() {
-      return this.importState.stage !== 'default';
-    },
-
-    /**
-     * Are we done importing contacts ?
-     *
-     * @return {boolean}
-     */
-    isImportDone() {
-      return this.importState.stage === 'done';
-    },
-
-    // first enabled addressbook of the list
-    defaultAddressbook() {
-      return this.addressbooks.find(
-        (addressbook) => !addressbook.readOnly && addressbook.enabled,
-      );
-    },
-
-    /**
-     * Contacts list based on the selected group.
-     * Those filters are pretty fast, so let's only
-     * intersect the groups contacts and the full
-     * sorted contacts List.
-     *
-     * @return {Array}
-     */
-    contactsList() {
-      if (this.selectedGroup === GROUP_ALL_CONTACTS) {
-        return this.sortedContacts;
-      } else if (this.selectedGroup === GROUP_NO_GROUP_CONTACTS) {
-        return this.ungroupedContacts.map((contact) =>
-          this.sortedContacts.find((item) => item.key === contact.key),
-        );
-      } else if (
-        this.selectedGroup === ROUTE_CIRCLE ||
-        this.selectedGroup === ROUTE_USER_GROUP
-      ) {
-        return [];
-      }
-      const group = this.groups.filter(
-        (group) => group.name === this.selectedGroup,
-      )[0];
-      if (group) {
-        return this.sortedContacts.filter(
-          (contact) => group.contacts.indexOf(contact.key) >= 0,
-        );
-      }
-      return [];
-    },
-
-    isCirclesView() {
-      return (
-        this.selectedGroup === ROUTE_CIRCLE ||
-        this.selectedGroup === ROUTE_USER_GROUP
-      );
-    },
-
-    ungroupedContacts() {
-      return this.sortedContacts.filter(
-        (contact) =>
-          this.contacts[contact.key].groups &&
-          this.contacts[contact.key].groups.length === 0,
-      );
-    },
-  },
-
-  watch: {
-    // watch url change and group select
-    selectedGroup() {
-      if (!this.isMobile && !this.selectedChart) {
-        this.selectFirstContactIfNone();
-      }
-    },
-
-    // watch url change and contact select
-    selectedContact() {
-      if (!this.isMobile && !this.selectedChart) {
-        this.selectFirstContactIfNone();
-      }
-    },
-  },
-
-  mounted() {
-    if (this.isCirclesEnabled) {
-      this.logger.info('Circles frontend enabled');
-    } else {
-      this.logger.info('No compatible version of circles found');
-    }
-  },
-
-  async beforeMount() {
-    // get addressbooks then get contacts
-    client.connect({ enableCardDAV: true }).then(() => {
-      this.logger.debug('Connected to dav!', { client });
-      const principalsStore = usePrincipalsStore();
-      principalsStore.setCurrentUserPrincipal(client);
-      this.$store.dispatch('getAddressbooks').then((addressbooks) => {
-        const writeableAddressBooks = addressbooks.filter(
-          (addressbook) => !addressbook.readOnly,
-        );
-
-        // No writeable addressbooks? Create a new one!
-        if (writeableAddressBooks.length === 0) {
-          this.$store
-            .dispatch('appendAddressbook', {
-              displayName: t('contacts', 'Contacts'),
-            })
-            .then(() => {
-              this.fetchContacts();
-            });
-          // else, let's get those contacts!
-        } else {
-          this.fetchContacts();
-        }
-      });
-      // check local storage for orderKey
-      if (localStorage.getItem('orderKey')) {
-        // run setOrder mutation with local storage key
-        this.$store.commit('setOrder', localStorage.getItem('orderKey'));
-      }
-    });
-
-    // Get circles if enabled
-    if (isCirclesEnabled) {
-      const userGroupStore = useUserGroupStore();
-      this.$store
-        .dispatch('getCircles')
-        .then(userGroupStore.getUserGroups(getCurrentUser().uid))
-        .then(() => {
-          this.loadingCircles = false;
-        });
-    }
-  },
-
-  methods: {
-    async newContact() {
-      if (this.selectedCircle) {
-        emit('contacts:circles:append', this.selectedCircle.id);
-        return;
-      }
-
-      const contact = new Contact(
-        `
+	name: 'Contacts',
+
+	components: {
+		NcButton,
+		CircleContent,
+		ChartContent,
+		ContactsContent,
+		ContactsPicker,
+		Content,
+		ImportView,
+		IconAdd,
+		Modal,
+		RootNavigation,
+		SettingsImportContacts,
+	},
+
+	mixins: [IsMobileMixin, RouterMixin],
+
+	data() {
+		return {
+			// The object shorthand syntax is breaking builds (bug in @babel/preset-env)
+			/* eslint-disable object-shorthand */
+			appName: appName,
+
+			// Let's but the loading state to true if circles is enabled
+			loadingCircles: isCirclesEnabled,
+			loadingContacts: true,
+		}
+	},
+
+	computed: {
+		// store getters
+		addressbooks() {
+			return this.$store.getters.getAddressbooks
+		},
+
+		contacts() {
+			return this.$store.getters.getContacts
+		},
+
+		sortedContacts() {
+			return this.$store.getters.getSortedContacts
+		},
+
+		groups() {
+			return this.$store.getters.getGroups
+		},
+
+		circles() {
+			return this.$store.getters.getCircles
+		},
+
+		orderKey() {
+			return this.$store.getters.getOrderKey
+		},
+
+		importState() {
+			return this.$store.getters.getImportState
+		},
+
+		isEmptyGroup() {
+			return this.contactsList.length === 0
+		},
+
+		isChartView() {
+			return !!this.selectedChart
+		},
+
+		/**
+		 * Are we importing contacts ?
+		 *
+		 * @return {boolean}
+		 */
+		isImporting() {
+			return this.importState.stage !== 'default'
+		},
+
+		/**
+		 * Are we done importing contacts ?
+		 *
+		 * @return {boolean}
+		 */
+		isImportDone() {
+			return this.importState.stage === 'done'
+		},
+
+		// first enabled addressbook of the list
+		defaultAddressbook() {
+			return this.addressbooks.find((addressbook) => !addressbook.readOnly && addressbook.enabled)
+		},
+
+		/**
+		 * Contacts list based on the selected group.
+		 * Those filters are pretty fast, so let's only
+		 * intersect the groups contacts and the full
+		 * sorted contacts List.
+		 *
+		 * @return {Array}
+		 */
+		contactsList() {
+			if (this.selectedGroup === GROUP_ALL_CONTACTS) {
+				return this.sortedContacts
+			} else if (this.selectedGroup === GROUP_NO_GROUP_CONTACTS) {
+				return this.ungroupedContacts.map((contact) => this.sortedContacts.find((item) => item.key === contact.key))
+			} else if (
+				this.selectedGroup === ROUTE_CIRCLE
+				|| this.selectedGroup === ROUTE_USER_GROUP
+			) {
+				return []
+			}
+			const group = this.groups.filter((group) => group.name === this.selectedGroup)[0]
+			if (group) {
+				return this.sortedContacts.filter((contact) => group.contacts.indexOf(contact.key) >= 0)
+			}
+			return []
+		},
+
+		isCirclesView() {
+			return (
+				this.selectedGroup === ROUTE_CIRCLE
+				|| this.selectedGroup === ROUTE_USER_GROUP
+			)
+		},
+
+		ungroupedContacts() {
+			return this.sortedContacts.filter((contact) => this.contacts[contact.key].groups
+				&& this.contacts[contact.key].groups.length === 0)
+		},
+	},
+
+	watch: {
+		// watch url change and group select
+		selectedGroup() {
+			if (!this.isMobile && !this.selectedChart) {
+				this.selectFirstContactIfNone()
+			}
+		},
+
+		// watch url change and contact select
+		selectedContact() {
+			if (!this.isMobile && !this.selectedChart) {
+				this.selectFirstContactIfNone()
+			}
+		},
+	},
+
+	mounted() {
+		if (this.isCirclesEnabled) {
+			this.logger.info('Circles frontend enabled')
+		} else {
+			this.logger.info('No compatible version of circles found')
+		}
+	},
+
+	async beforeMount() {
+		// get addressbooks then get contacts
+		client.connect({ enableCardDAV: true }).then(() => {
+			this.logger.debug('Connected to dav!', { client })
+			const principalsStore = usePrincipalsStore()
+			principalsStore.setCurrentUserPrincipal(client)
+			this.$store.dispatch('getAddressbooks').then((addressbooks) => {
+				const writeableAddressBooks = addressbooks.filter((addressbook) => !addressbook.readOnly)
+
+				// No writeable addressbooks? Create a new one!
+				if (writeableAddressBooks.length === 0) {
+					this.$store
+						.dispatch('appendAddressbook', {
+							displayName: t('contacts', 'Contacts'),
+						})
+						.then(() => {
+							this.fetchContacts()
+						})
+					// else, let's get those contacts!
+				} else {
+					this.fetchContacts()
+				}
+			})
+			// check local storage for orderKey
+			if (localStorage.getItem('orderKey')) {
+				// run setOrder mutation with local storage key
+				this.$store.commit('setOrder', localStorage.getItem('orderKey'))
+			}
+		})
+
+		// Get circles if enabled
+		if (isCirclesEnabled) {
+			const userGroupStore = useUserGroupStore()
+			this.$store
+				.dispatch('getCircles')
+				.then(userGroupStore.getUserGroups(getCurrentUser().uid))
+				.then(() => {
+					this.loadingCircles = false
+				})
+		}
+	},
+
+	methods: {
+		async newContact() {
+			if (this.selectedCircle) {
+				emit('contacts:circles:append', this.selectedCircle.id)
+				return
+			}
+
+			const contact = new Contact(
+				`
 				BEGIN:VCARD
 				VERSION:4.0
 				PRODID:-//Nextcloud Contacts v${appVersion}
 				END:VCARD
 			`
-          .trim()
-          .replace(/\t/gm, ''),
-        this.defaultAddressbook,
-      );
-
-      contact.fullName = t('contacts', 'Name');
-
-      contact.rev = ICAL.Time.fromJSDate(new Date(), true);
-
-      // itterate over all properties (filter is not usable on objects and we need the key of the property)
-      const properties = rfcProps.properties;
-      for (const name in properties) {
-        if (properties[name].default) {
-          const defaultData = properties[name].defaultValue;
-          let defaultValue = defaultData.value;
-          if (Array.isArray(defaultValue)) {
-            defaultValue = [...defaultValue];
-          }
-          // add default field
-          const property = contact.vCard.addPropertyWithValue(
-            name,
-            defaultValue,
-          );
-          // add default type
-          if (defaultData.type) {
-            property.setParameter('type', defaultData.type);
-          }
-        }
-      }
-
-      // set group if it's selected already
-      // BUT NOT if it's the _fake_ groups like all contacts and not grouped
-      if (
-        ![
-          GROUP_ALL_CONTACTS,
-          GROUP_NO_GROUP_CONTACTS,
-          ROUTE_CIRCLE,
-          ROUTE_USER_GROUP,
-        ].includes(this.selectedGroup)
-      ) {
-        contact.groups = [this.selectedGroup];
-      }
-      try {
-        // this will trigger the proper commits to groups, contacts and addressbook
-        await this.$store.dispatch('addContact', contact);
-        await this.$router.push({
-          name: 'contact',
-          params: {
-            selectedGroup: this.selectedUserGroup
-              ? GROUP_ALL_CONTACTS
-              : this.selectedGroup,
-            selectedContact: contact.key,
-          },
-        });
-      } catch (error) {
-        showError(t('contacts', 'Unable to create the contact.'));
-        console.error(error);
-      }
-    },
-
-    /**
-     * Dispatch sorting update request to the store
-     *
-     * @param {string} orderKey the object key to order by
-     */
-    updateSorting(orderKey = 'displayName') {
-      this.$store.commit('setOrder', orderKey);
-      this.$store.commit('sortContacts');
-    },
-
-    /**
-     * Fetch the contacts of each addressbooks
-     */
-    fetchContacts() {
-      // wait for all addressbooks to have fetch their contacts
-      // don't filter disabled at this point, because sum of contacts per address book is shown
-      Promise.all(
-        this.addressbooks.map((addressbook) => {
-          if (!addressbook.enabled) {
-            return Promise.resolve();
-          }
-          return this.$store.dispatch('getContactsFromAddressBook', {
-            addressbook,
-          });
-        }),
-      ).then(() => {
-        this.loadingContacts = false;
-        if (!this.isMobile && !this.selectedChart) {
-          this.selectFirstContactIfNone();
-        }
-      });
-    },
-
-    /**
-     * Select the first contact of the list
-     * if none are selected already
-     */
-    selectFirstContactIfNone() {
-      // Do not redirect if pending import
-      if (this.$route.name === 'import') {
-        return;
-      }
-
-      const inList =
-        this.contactsList.findIndex(
-          (contact) => contact.key === this.selectedContact,
-        ) > -1;
-      if (!this.selectedContact || !inList) {
-        // Unknown contact
-        if (this.selectedContact && !inList) {
-          showError(t('contacts', 'Contact not found'));
-          this.$router.push({
-            name: 'group',
-            params: {
-              selectedGroup: this.selectedGroup,
-            },
-          });
-        }
-
-        // Unknown group
-        if (
-          !this.selectedCircle &&
-          !this.selectedUserGroup &&
-          !this.groups.find((group) => group.name === this.selectedGroup) &&
-          GROUP_ALL_CONTACTS !== this.selectedGroup &&
-          GROUP_NO_GROUP_CONTACTS !== this.selectedGroup &&
-          ROUTE_CIRCLE !== this.selectedGroup &&
-          ROUTE_USER_GROUP !== this.selectedGroup
-        ) {
-          showError(
-            t('contacts', 'Group {group} not found', {
-              group: this.selectedGroup,
-            }),
-          );
-          console.error('Group not found', this.selectedGroup);
-
-          this.$router.push({
-            name: 'root',
-          });
-          return;
-        }
-
-        if (Object.keys(this.contactsList).length) {
-          this.$router.push({
-            name: 'contact',
-            params: {
-              selectedGroup: this.selectedGroup,
-              selectedContact: Object.values(this.contactsList)[0].key,
-            },
-          });
-        }
-      }
-    },
-
-    /**
-     * Done importing, the user closed the import status screen
-     */
-    closeImport() {
-      this.$store.dispatch('changeStage', 'default');
-    },
-  },
-};
+					.trim()
+					.replace(/\t/gm, ''),
+				this.defaultAddressbook,
+			)
+
+			contact.fullName = t('contacts', 'Name')
+
+			contact.rev = ICAL.Time.fromJSDate(new Date(), true)
+
+			// itterate over all properties (filter is not usable on objects and we need the key of the property)
+			const properties = rfcProps.properties
+			for (const name in properties) {
+				if (properties[name].default) {
+					const defaultData = properties[name].defaultValue
+					let defaultValue = defaultData.value
+					if (Array.isArray(defaultValue)) {
+						defaultValue = [...defaultValue]
+					}
+					// add default field
+					const property = contact.vCard.addPropertyWithValue(
+						name,
+						defaultValue,
+					)
+					// add default type
+					if (defaultData.type) {
+						property.setParameter('type', defaultData.type)
+					}
+				}
+			}
+
+			// set group if it's selected already
+			// BUT NOT if it's the _fake_ groups like all contacts and not grouped
+			if (
+				![
+					GROUP_ALL_CONTACTS,
+					GROUP_NO_GROUP_CONTACTS,
+					ROUTE_CIRCLE,
+					ROUTE_USER_GROUP,
+				].includes(this.selectedGroup)
+			) {
+				contact.groups = [this.selectedGroup]
+			}
+			try {
+				// this will trigger the proper commits to groups, contacts and addressbook
+				await this.$store.dispatch('addContact', contact)
+				await this.$router.push({
+					name: 'contact',
+					params: {
+						selectedGroup: this.selectedUserGroup
+							? GROUP_ALL_CONTACTS
+							: this.selectedGroup,
+						selectedContact: contact.key,
+					},
+				})
+			} catch (error) {
+				showError(t('contacts', 'Unable to create the contact.'))
+				console.error(error)
+			}
+		},
+
+		/**
+		 * Dispatch sorting update request to the store
+		 *
+		 * @param {string} orderKey the object key to order by
+		 */
+		updateSorting(orderKey = 'displayName') {
+			this.$store.commit('setOrder', orderKey)
+			this.$store.commit('sortContacts')
+		},
+
+		/**
+		 * Fetch the contacts of each addressbooks
+		 */
+		fetchContacts() {
+			// wait for all addressbooks to have fetch their contacts
+			// don't filter disabled at this point, because sum of contacts per address book is shown
+			Promise.all(this.addressbooks.map((addressbook) => {
+				if (!addressbook.enabled) {
+					return Promise.resolve()
+				}
+				return this.$store.dispatch('getContactsFromAddressBook', {
+					addressbook,
+				})
+			})).then(() => {
+				this.loadingContacts = false
+				if (!this.isMobile && !this.selectedChart) {
+					this.selectFirstContactIfNone()
+				}
+			})
+		},
+
+		/**
+		 * Select the first contact of the list
+		 * if none are selected already
+		 */
+		selectFirstContactIfNone() {
+			// Do not redirect if pending import
+			if (this.$route.name === 'import') {
+				return
+			}
+
+			const inList
+				= this.contactsList.findIndex((contact) => contact.key === this.selectedContact) > -1
+			if (!this.selectedContact || !inList) {
+				// Unknown contact
+				if (this.selectedContact && !inList) {
+					showError(t('contacts', 'Contact not found'))
+					this.$router.push({
+						name: 'group',
+						params: {
+							selectedGroup: this.selectedGroup,
+						},
+					})
+				}
+
+				// Unknown group
+				if (
+					!this.selectedCircle
+					&& !this.selectedUserGroup
+					&& !this.groups.find((group) => group.name === this.selectedGroup)
+					&& GROUP_ALL_CONTACTS !== this.selectedGroup
+					&& GROUP_NO_GROUP_CONTACTS !== this.selectedGroup
+					&& ROUTE_CIRCLE !== this.selectedGroup
+					&& ROUTE_USER_GROUP !== this.selectedGroup
+				) {
+					showError(t('contacts', 'Group {group} not found', {
+						group: this.selectedGroup,
+					}))
+					console.error('Group not found', this.selectedGroup)
+
+					this.$router.push({
+						name: 'root',
+					})
+					return
+				}
+
+				if (Object.keys(this.contactsList).length) {
+					this.$router.push({
+						name: 'contact',
+						params: {
+							selectedGroup: this.selectedGroup,
+							selectedContact: Object.values(this.contactsList)[0].key,
+						},
+					})
+				}
+			}
+		},
+
+		/**
+		 * Done importing, the user closed the import status screen
+		 */
+		closeImport() {
+			this.$store.dispatch('changeStage', 'default')
+		},
+	},
+}
 </script>
 
 <style lang="scss" scoped>

From ff7df94792d390b66024e5b3eaa7f12b09589543 Mon Sep 17 00:00:00 2001
From: pallavibakale <pallavibakale09@gmail.com>
Date: Thu, 11 Jun 2026 11:50:22 -0400
Subject: [PATCH 3/4] fix: linting issues

Signe-off-by: pallavibakale <pallavibakale09@gmail.com>
Signed-off-by: pallavibakale <pallavibakale09@gmail.com>
---
 src/views/Contacts.vue | 125 +++++++++++++++++------------------------
 1 file changed, 50 insertions(+), 75 deletions(-)

diff --git a/src/views/Contacts.vue b/src/views/Contacts.vue
index 2877cf2fce..4896e68ab6 100644
--- a/src/views/Contacts.vue
+++ b/src/views/Contacts.vue
@@ -6,12 +6,10 @@
 <template>
 	<Content :app-name="appName">
 		<!-- new-contact-button + navigation + settings -->
-		<RootNavigation :loading="loadingContacts || loadingCircles">
+		<RootNavigation
+			:loading="loadingContacts || loadingCircles">
 			<div class="import-and-new-contact-buttons">
-				<SettingsImportContacts
-					v-if="
-						!loadingContacts && isEmptyGroup && !isChartView && !isCirclesView
-					" />
+				<SettingsImportContacts v-if="!loadingContacts && isEmptyGroup && !isChartView && !isCirclesView" />
 				<!-- new-contact-button -->
 				<NcButton
 					v-if="!loadingContacts"
@@ -22,21 +20,21 @@
 					<template #icon>
 						<IconAdd :size="20" />
 					</template>
-					{{
-						isCirclesView
-							? t('contacts', 'Add member')
-							: t('contacts', 'New contact')
-					}}
+					{{ isCirclesView ? t('contacts', 'Add member') : t('contacts', 'New contact') }}
 				</NcButton>
 			</div>
 		</RootNavigation>
 
 		<!-- Main content: circle, chart or contacts -->
-		<UserGroupContent v-if="selectedUserGroup" :loding="loadingCircles" />
+		<UserGroupContent
+			v-if="selectedUserGroup"
+			:loding="loadingCircles" />
 		<CircleContent
 			v-if="selectedCircle || selectedUserGroup"
 			:loading="loadingCircles" />
-		<ChartContent v-else-if="selectedChart" :contacts-list="contacts" />
+		<ChartContent
+			v-else-if="selectedChart"
+			:contacts-list="contacts" />
 		<ContactsContent
 			v-else
 			:contacts-list="contactsList"
@@ -77,12 +75,7 @@ import ContactsPicker from '../components/EntityPicker/ContactsPicker.vue'
 import ImportView from './Processing/ImportView.vue'
 import IsMobileMixin from '../mixins/IsMobileMixin.ts'
 import RouterMixin from '../mixins/RouterMixin.js'
-import {
-	GROUP_ALL_CONTACTS,
-	GROUP_NO_GROUP_CONTACTS,
-	ROUTE_CIRCLE,
-	ROUTE_USER_GROUP,
-} from '../models/constants.ts'
+import { GROUP_ALL_CONTACTS, GROUP_NO_GROUP_CONTACTS, ROUTE_CIRCLE, ROUTE_USER_GROUP } from '../models/constants.ts'
 import Contact from '../models/contact.js'
 import rfcProps from '../models/rfcProps.js'
 import client from '../services/cdav.js'
@@ -107,7 +100,10 @@ export default {
 		SettingsImportContacts,
 	},
 
-	mixins: [IsMobileMixin, RouterMixin],
+	mixins: [
+		IsMobileMixin,
+		RouterMixin,
+	],
 
 	data() {
 		return {
@@ -195,10 +191,7 @@ export default {
 				return this.sortedContacts
 			} else if (this.selectedGroup === GROUP_NO_GROUP_CONTACTS) {
 				return this.ungroupedContacts.map((contact) => this.sortedContacts.find((item) => item.key === contact.key))
-			} else if (
-				this.selectedGroup === ROUTE_CIRCLE
-				|| this.selectedGroup === ROUTE_USER_GROUP
-			) {
+			} else if (this.selectedGroup === ROUTE_CIRCLE || this.selectedGroup === ROUTE_USER_GROUP) {
 				return []
 			}
 			const group = this.groups.filter((group) => group.name === this.selectedGroup)[0]
@@ -209,15 +202,11 @@ export default {
 		},
 
 		isCirclesView() {
-			return (
-				this.selectedGroup === ROUTE_CIRCLE
-				|| this.selectedGroup === ROUTE_USER_GROUP
-			)
+			return this.selectedGroup === ROUTE_CIRCLE || this.selectedGroup === ROUTE_USER_GROUP
 		},
 
 		ungroupedContacts() {
-			return this.sortedContacts.filter((contact) => this.contacts[contact.key].groups
-				&& this.contacts[contact.key].groups.length === 0)
+			return this.sortedContacts.filter((contact) => this.contacts[contact.key].groups && this.contacts[contact.key].groups.length === 0)
 		},
 	},
 
@@ -251,24 +240,22 @@ export default {
 			this.logger.debug('Connected to dav!', { client })
 			const principalsStore = usePrincipalsStore()
 			principalsStore.setCurrentUserPrincipal(client)
-			this.$store.dispatch('getAddressbooks').then((addressbooks) => {
-				const writeableAddressBooks = addressbooks.filter((addressbook) => !addressbook.readOnly)
-
-				// No writeable addressbooks? Create a new one!
-				if (writeableAddressBooks.length === 0) {
-					this.$store
-						.dispatch('appendAddressbook', {
-							displayName: t('contacts', 'Contacts'),
-						})
-						.then(() => {
-							this.fetchContacts()
-						})
+			this.$store.dispatch('getAddressbooks')
+				.then((addressbooks) => {
+					const writeableAddressBooks = addressbooks.filter((addressbook) => !addressbook.readOnly)
+
+					// No writeable addressbooks? Create a new one!
+					if (writeableAddressBooks.length === 0) {
+						this.$store.dispatch('appendAddressbook', { displayName: t('contacts', 'Contacts') })
+							.then(() => {
+								this.fetchContacts()
+							})
 					// else, let's get those contacts!
-				} else {
-					this.fetchContacts()
-				}
-			})
-			// check local storage for orderKey
+					} else {
+						this.fetchContacts()
+					}
+				})
+				// check local storage for orderKey
 			if (localStorage.getItem('orderKey')) {
 				// run setOrder mutation with local storage key
 				this.$store.commit('setOrder', localStorage.getItem('orderKey'))
@@ -278,8 +265,7 @@ export default {
 		// Get circles if enabled
 		if (isCirclesEnabled) {
 			const userGroupStore = useUserGroupStore()
-			this.$store
-				.dispatch('getCircles')
+			this.$store.dispatch('getCircles')
 				.then(userGroupStore.getUserGroups(getCurrentUser().uid))
 				.then(() => {
 					this.loadingCircles = false
@@ -300,9 +286,7 @@ export default {
 				VERSION:4.0
 				PRODID:-//Nextcloud Contacts v${appVersion}
 				END:VCARD
-			`
-					.trim()
-					.replace(/\t/gm, ''),
+			`.trim().replace(/\t/gm, ''),
 				this.defaultAddressbook,
 			)
 
@@ -320,10 +304,7 @@ export default {
 						defaultValue = [...defaultValue]
 					}
 					// add default field
-					const property = contact.vCard.addPropertyWithValue(
-						name,
-						defaultValue,
-					)
+					const property = contact.vCard.addPropertyWithValue(name, defaultValue)
 					// add default type
 					if (defaultData.type) {
 						property.setParameter('type', defaultData.type)
@@ -377,14 +358,13 @@ export default {
 		fetchContacts() {
 			// wait for all addressbooks to have fetch their contacts
 			// don't filter disabled at this point, because sum of contacts per address book is shown
-			Promise.all(this.addressbooks.map((addressbook) => {
-				if (!addressbook.enabled) {
-					return Promise.resolve()
-				}
-				return this.$store.dispatch('getContactsFromAddressBook', {
-					addressbook,
-				})
-			})).then(() => {
+			Promise.all(this.addressbooks
+				.map((addressbook) => {
+					if (!addressbook.enabled) {
+						return Promise.resolve()
+					}
+					return this.$store.dispatch('getContactsFromAddressBook', { addressbook })
+				})).then(() => {
 				this.loadingContacts = false
 				if (!this.isMobile && !this.selectedChart) {
 					this.selectFirstContactIfNone()
@@ -402,8 +382,7 @@ export default {
 				return
 			}
 
-			const inList
-				= this.contactsList.findIndex((contact) => contact.key === this.selectedContact) > -1
+			const inList = this.contactsList.findIndex((contact) => contact.key === this.selectedContact) > -1
 			if (!this.selectedContact || !inList) {
 				// Unknown contact
 				if (this.selectedContact && !inList) {
@@ -417,18 +396,14 @@ export default {
 				}
 
 				// Unknown group
-				if (
-					!this.selectedCircle
+				if (!this.selectedCircle
 					&& !this.selectedUserGroup
 					&& !this.groups.find((group) => group.name === this.selectedGroup)
 					&& GROUP_ALL_CONTACTS !== this.selectedGroup
 					&& GROUP_NO_GROUP_CONTACTS !== this.selectedGroup
 					&& ROUTE_CIRCLE !== this.selectedGroup
-					&& ROUTE_USER_GROUP !== this.selectedGroup
-				) {
-					showError(t('contacts', 'Group {group} not found', {
-						group: this.selectedGroup,
-					}))
+					&& ROUTE_USER_GROUP !== this.selectedGroup) {
+					showError(t('contacts', 'Group {group} not found', { group: this.selectedGroup }))
 					console.error('Group not found', this.selectedGroup)
 
 					this.$router.push({
@@ -461,8 +436,8 @@ export default {
 
 <style lang="scss" scoped>
 .import-and-new-contact-buttons {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
 }
 </style>

From 9651edcb4c71c244c627d93b123752fa17627b2b Mon Sep 17 00:00:00 2001
From: pallavibakale <pallavibakale09@gmail.com>
Date: Thu, 18 Jun 2026 11:53:00 -0400
Subject: [PATCH 4/4] fix: linting issues

Signed-off-by: pallavibakale <pallavibakale09@gmail.com>
---
 src/mixins/RouterMixin.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/mixins/RouterMixin.js b/src/mixins/RouterMixin.js
index cb816a0a25..c71791400a 100644
--- a/src/mixins/RouterMixin.js
+++ b/src/mixins/RouterMixin.js
@@ -13,8 +13,12 @@ export default {
 		},
 		selectedGroup() {
 			const { name } = this.$route
-			if (name === 'circle') { return ROUTE_CIRCLE }
-			if (name === 'user_group') { return ROUTE_USER_GROUP }
+			if (name === 'circle') { 
+				return ROUTE_CIRCLE 
+			}
+			if (name === 'user_group') { 
+				return ROUTE_USER_GROUP 
+			}
 			return this.$route.params.selectedGroup
 		},
 		selectedCircle() {