feat(navigation): restore address book navigation in sidebar

src/components/AppNavigation/RootNavigation.vue

@@ -73,6 +73,28 @@
 				</template>
 			</AppNavigationItem>
 
+			<!-- Address books -->
+			<AppNavigationCaption :name="t('contacts', 'Address books')" />
+			<AppNavigationItem
+				v-for="addressbook in enabledAddressbooks"
+				:key="addressbook.id"
+				:name="addressbook.displayName"
+				:to="{
+					name: ROUTE_ADDRESSBOOK,
+					params: { selectedAddressbook: addressbook.id },
+				}"
+				:active="routeState === `${ROUTE_ADDRESSBOOK}:${addressbook.id}`"
+				@click="updateRouteState(`${ROUTE_ADDRESSBOOK}:${addressbook.id}`)">
+				<template #icon>
+					<IconAddressBook :size="20" />
+				</template>
+				<template #counter>
+					<NcCounterBubble
+						v-if="addressbookContactCount(addressbook)"
+						:count="addressbookContactCount(addressbook)" />
+				</template>
+			</AppNavigationItem>
+
 			<!-- Recently contacted group -->
 			<AppNavigationItem
 				v-if="isContactsInteractionEnabled && recentlyContactedContacts && recentlyContactedContacts.contacts.length > 0"
@@ -218,6 +240,7 @@ import IconUserFilled from 'vue-material-design-icons/Account.vue'
 import IconContactFilled from 'vue-material-design-icons/AccountMultiple.vue'
 import IconContact from 'vue-material-design-icons/AccountMultipleOutline.vue'
 import IconUser from 'vue-material-design-icons/AccountOutline.vue'
+import IconAddressBook from 'vue-material-design-icons/BookAccountOutline.vue'
 import IconError from 'vue-material-design-icons/AlertCircleOutline.vue'
 import Cog from 'vue-material-design-icons/CogOutline.vue'
 import IconAdd from 'vue-material-design-icons/Plus.vue'
@@ -227,7 +250,7 @@ import CircleNavigationItem from './CircleNavigationItem.vue'
 import ContactsSettings from './ContactsSettings.vue'
 import GroupNavigationItem from './GroupNavigationItem.vue'
 import RouterMixin from '../../mixins/RouterMixin.js'
-import { CHART_ALL_CONTACTS, CIRCLE_DESC, CONTACTS_SETTINGS, ELLIPSIS_COUNT, GROUP_ALL_CONTACTS, GROUP_NO_GROUP_CONTACTS, GROUP_RECENTLY_CONTACTED } from '../../models/constants.ts'
+import { CHART_ALL_CONTACTS, CIRCLE_DESC, CONTACTS_SETTINGS, ELLIPSIS_COUNT, GROUP_ALL_CONTACTS, GROUP_NO_GROUP_CONTACTS, GROUP_RECENTLY_CONTACTED, ROUTE_ADDRESSBOOK } from '../../models/constants.ts'
 import isCirclesEnabled from '../../services/isCirclesEnabled.js'
 import isContactsInteractionEnabled from '../../services/isContactsInteractionEnabled.js'
 import useUserGroupStore from '../../store/userGroup.ts'
@@ -247,6 +270,7 @@ export default {
 		Cog,
 		ContactsSettings,
 		GroupNavigationItem,
+		IconAddressBook,
 		IconContact,
 		IconContactFilled,
 		IconUser,
@@ -277,6 +301,7 @@ export default {
 			CHART_ALL_CONTACTS,
 			GROUP_NO_GROUP_CONTACTS,
 			GROUP_RECENTLY_CONTACTED,
+			ROUTE_ADDRESSBOOK,
 
 			// create group
 			isNewGroupMenuOpen: false,
@@ -301,6 +326,14 @@ export default {
 
 	computed: {
 		// store variables
+		addressbooks() {
+			return this.$store.getters.getAddressbooks
+		},
+
+		enabledAddressbooks() {
+			return this.addressbooks.filter((ab) => ab.enabled)
+		},
+
 		circles() {
 			return this.$store.getters.getCircles
 		},
@@ -426,6 +459,10 @@ export default {
 	},
 
 	methods: {
+		addressbookContactCount(addressbook) {
+			return Object.keys(addressbook.contacts || {}).length
+		},
+
 		toggleNewGroupMenu() {
 			this.isNewGroupMenuOpen = !this.isNewGroupMenuOpen
 		},

src/components/ContactDetails.vue

@@ -1015,13 +1015,23 @@ export default defineComponent({
 						addressbook,
 					})
 					// select the contact again
-					this.$router.push({
-						name: 'contact',
-						params: {
-							selectedGroup: this.$route.params.selectedGroup,
-							selectedContact: contact.key,
-						},
-					})
+					if (this.$route.params.selectedAddressbook) {
+						this.$router.push({
+							name: 'addressbook-contact',
+							params: {
+								selectedAddressbook: this.$route.params.selectedAddressbook,
+								selectedContact: contact.key,
+							},
+						})
+					} else {
+						this.$router.push({
+							name: 'contact',
+							params: {
+								selectedGroup: this.$route.params.selectedGroup,
+								selectedContact: contact.key,
+							},
+						})
+					}
 				} catch (error) {
 					console.error(error)
 					showError(t('contacts', 'An error occurred while trying to move the contact'))
@@ -1048,13 +1058,23 @@ export default defineComponent({
 						addressbook,
 					})
 					// select the contact again
-					this.$router.push({
-						name: 'contact',
-						params: {
-							selectedGroup: this.$route.params.selectedGroup,
-							selectedContact: contact.key,
-						},
-					})
+					if (this.$route.params.selectedAddressbook) {
+						this.$router.push({
+							name: 'addressbook-contact',
+							params: {
+								selectedAddressbook: this.$route.params.selectedAddressbook,
+								selectedContact: contact.key,
+							},
+						})
+					} else {
+						this.$router.push({
+							name: 'contact',
+							params: {
+								selectedGroup: this.$route.params.selectedGroup,
+								selectedContact: contact.key,
+							},
+						})
+					}
 				} catch (error) {
 					console.error(error)
 					showError(t('contacts', 'An error occurred while trying to copy the contact'))

src/components/ContactsList/ContactsListItem.vue

@@ -13,7 +13,7 @@
 			:key="source.key"
 			class="list-item-style envelope"
 			:name="source.displayName"
-			:to="isStatic ? undefined : { name: 'contact', params: { selectedGroup: selectedGroup, selectedContact: source.key } }">
+			:to="isStatic ? undefined : contactRoute">
 			<!-- @slot Icon slot -->
 
 			<template #icon>
@@ -153,6 +153,25 @@ export default {
 	},
 
 	computed: {
+		contactRoute() {
+			if (this.selectedAddressbook) {
+				return {
+					name: 'addressbook-contact',
+					params: {
+						selectedAddressbook: this.selectedAddressbook,
+						selectedContact: this.source.key,
+					},
+				}
+			}
+			return {
+				name: 'contact',
+				params: {
+					selectedGroup: this.selectedGroup,
+					selectedContact: this.source.key,
+				},
+			}
+		},
+
 		isFavorite() {
 			return this.source.favorite
 		},
@@ -269,11 +288,7 @@ export default {
 			if (this.isStatic) {
 				return
 			}
-			// change url with router
-			this.$router.push({
-				name: 'contact',
-				params: { selectedGroup: this.selectedGroup, selectedContact: this.source.key },
-			})
+			this.$router.push(this.contactRoute)
 		},
 
 		onSelectMultiple() {

src/mixins/RouterMixin.js

@@ -20,5 +20,8 @@ export default {
 		selectedChart() {
 			return this.$route.params.selectedChart
 		},
+		selectedAddressbook() {
+			return this.$route.params.selectedAddressbook
+		},
 	},
 }

src/models/constants.ts

@@ -28,6 +28,7 @@ export const CHART_ALL_CONTACTS: DefaultChart = t('contacts', 'Organization char
 export const ROUTE_CIRCLE = 'circle'
 export const ROUTE_CHART = 'chart'
 export const ROUTE_USER_GROUP = 'user_group'
+export const ROUTE_ADDRESSBOOK = 'addressbook'
 
 // Contact settings
 export const CONTACTS_SETTINGS: DefaultGroup = t('contacts', 'Contacts settings')

src/router/index.js

@@ -6,7 +6,7 @@
 import { generateUrl } from '@nextcloud/router'
 import { createRouter, createWebHistory } from 'vue-router'
 import Contacts from '../views/Contacts.vue'
-import { ROUTE_CHART, ROUTE_CIRCLE, ROUTE_USER_GROUP } from '../models/constants.ts'
+import { ROUTE_ADDRESSBOOK, ROUTE_CHART, ROUTE_CIRCLE, ROUTE_USER_GROUP } from '../models/constants.ts'
 
 // if index.php is in the url AND we got this far, then it's working:
 // let's keep using index.php in the url
@@ -57,6 +57,16 @@ export default createRouter({
 					name: 'user_group',
 					component: Contacts,
 				},
+				{
+					path: `${ROUTE_ADDRESSBOOK}/:selectedAddressbook`,
+					name: 'addressbook',
+					component: Contacts,
+				},
+				{
+					path: `${ROUTE_ADDRESSBOOK}/:selectedAddressbook/:selectedContact`,
+					name: 'addressbook-contact',
+					component: Contacts,
+				},
 			],
 		},
 	],

src/views/Contacts.vue

@@ -187,6 +187,14 @@ export default {
 		 * @return {Array}
 		 */
 		contactsList() {
+			if (this.selectedAddressbook) {
+				const addressbook = this.addressbooks.find((ab) => ab.id === this.selectedAddressbook)
+				if (addressbook) {
+					const contactKeys = new Set(Object.values(addressbook.contacts).map((c) => c.key))
+					return this.sortedContacts.filter((contact) => contactKeys.has(contact.key))
+				}
+				return []
+			}
 			if (this.selectedGroup === GROUP_ALL_CONTACTS) {
 				return this.sortedContacts
 			} else if (this.selectedGroup === GROUP_NO_GROUP_CONTACTS) {
@@ -280,14 +288,18 @@ export default {
 				return
 			}
 
+			const targetAddressbook = this.selectedAddressbook
+				? this.addressbooks.find((ab) => ab.id === this.selectedAddressbook) ?? this.defaultAddressbook
+				: this.defaultAddressbook
+
 			const contact = new Contact(
 				`
 				BEGIN:VCARD
 				VERSION:4.0
 				PRODID:-//Nextcloud Contacts v${appVersion}
 				END:VCARD
 			`.trim().replace(/\t/gm, ''),
-				this.defaultAddressbook,
+				targetAddressbook,
 			)
 
 			contact.fullName = t('contacts', 'Name')
@@ -320,13 +332,23 @@ export default {
 			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,
-					},
-				})
+				if (this.selectedAddressbook) {
+					await this.$router.push({
+						name: 'addressbook-contact',
+						params: {
+							selectedAddressbook: this.selectedAddressbook,
+							selectedContact: contact.key,
+						},
+					})
+				} else {
+					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)
@@ -368,8 +390,8 @@ export default {
 		 * if none are selected already
 		 */
 		selectFirstContactIfNone() {
-			// Do not redirect if pending import
-			if (this.$route.name === 'import') {
+			// Do not redirect if pending import or browsing an address book
+			if (this.$route.name === 'import' || this.$route.name === 'addressbook' || this.$route.name === 'addressbook-contact') {
 				return
 			}
 
@@ -389,6 +411,7 @@ export default {
 				// Unknown group
 				if (!this.selectedCircle
 					&& !this.selectedUserGroup
+					&& !this.selectedAddressbook
 					&& !this.groups.find((group) => group.name === this.selectedGroup)
 					&& GROUP_ALL_CONTACTS !== this.selectedGroup
 					&& GROUP_NO_GROUP_CONTACTS !== this.selectedGroup