Handle circles being disabled

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

5 files changed, 100 insertions, 56 deletions

diff --git a/src/components/AppNavigation/RootNavigation.vue b/src/components/AppNavigation/RootNavigation.vue
index ca094fac..91c81cc7 100644
--- a/src/components/AppNavigation/RootNavigation.vue
+++ b/src/components/AppNavigation/RootNavigation.vue
@@ -21,11 +21,11 @@
   -->
 
 <template>
-	<AppNavigation>
+	<AppNavigation :class="{'icon-loading': loading}">
 		<slot />
 
 		<!-- groups list -->
-		<template v-if="!loading" #list>
+		<template #list>
 			<!-- All contacts group -->
 			<AppNavigationItem id="everyone"
 				:title="GROUP_ALL_CONTACTS"
@@ -93,43 +93,45 @@
 				:key="group.key"
 				:group="group" />
 
-			<!-- Toggle groups ellipsis -->
-			<AppNavigationItem
-				v-if="groupsMenu.length > ELLIPSIS_COUNT"
-				:title="collapseGroupsTitle"
-				class="app-navigation__collapse"
-				icon=""
-				@click="onToggleGroups" />
-
-			<!-- New circle button caption and modal -->
-			<AppNavigationCaption
-				id="newcircle"
-				:title="t('contacts', 'Circles')"
-				@click.prevent.stop="toggleNewCircleModal">
-				<template slot="actions">
-					<ActionButton icon="icon-add" @click="toggleNewCircleModal">
-						{{ t('contacts', 'Create a new circle') }}
-					</ActionButton>
-				</template>
-			</AppNavigationCaption>
-			<NewCircleIntro v-if="isNewCircleModalOpen"
-				:loading="createCircleLoading"
-				@close="closeNewCircleIntro"
-				@submit="createNewCircle" />
-
-			<!-- Circles -->
-			<CircleNavigationItem
-				v-for="circle in ellipsisCirclesMenu"
-				:key="circle.key"
-				:circle="circle" />
-
-			<!-- Toggle circles ellipsis -->
-			<AppNavigationItem
-				v-if="circlesMenu.length > ELLIPSIS_COUNT"
-				:title="collapseCirclesTitle"
-				class="app-navigation__collapse"
-				icon=""
-				@click="onToggleCircles" />
+			<template v-if="isCirclesEnabled">
+				<!-- Toggle groups ellipsis -->
+				<AppNavigationItem
+					v-if="groupsMenu.length > ELLIPSIS_COUNT"
+					:title="collapseGroupsTitle"
+					class="app-navigation__collapse"
+					icon=""
+					@click="onToggleGroups" />
+
+				<!-- New circle button caption and modal -->
+				<AppNavigationCaption
+					id="newcircle"
+					:title="t('contacts', 'Circles')"
+					@click.prevent.stop="toggleNewCircleModal">
+					<template slot="actions">
+						<ActionButton icon="icon-add" @click="toggleNewCircleModal">
+							{{ t('contacts', 'Create a new circle') }}
+						</ActionButton>
+					</template>
+				</AppNavigationCaption>
+				<NewCircleIntro v-if="isNewCircleModalOpen"
+					:loading="createCircleLoading"
+					@close="closeNewCircleIntro"
+					@submit="createNewCircle" />
+
+				<!-- Circles -->
+				<CircleNavigationItem
+					v-for="circle in ellipsisCirclesMenu"
+					:key="circle.key"
+					:circle="circle" />
+
+				<!-- Toggle circles ellipsis -->
+				<AppNavigationItem
+					v-if="circlesMenu.length > ELLIPSIS_COUNT"
+					:title="collapseCirclesTitle"
+					class="app-navigation__collapse"
+					icon=""
+					@click="onToggleCircles" />
+			</template>
 		</template>
 
 		<!-- settings -->
@@ -159,7 +161,10 @@ import CircleNavigationItem from './CircleNavigationItem'
 import GroupNavigationItem from './GroupNavigationItem'
 import NewCircleIntro from '../EntityPicker/NewCircleIntro'
 import SettingsSection from './SettingsSection'
+
+import isCirclesEnabled from '../../services/isCirclesEnabled'
 import isContactsInteractionEnabled from '../../services/isContactsInteractionEnabled'
+
 import RouterMixin from '../../mixins/RouterMixin'
 
 export default {
@@ -210,6 +215,7 @@ export default {
 			createCircleLoading: false,
 			createCircleError: null,
 
+			isCirclesEnabled,
 			isContactsInteractionEnabled,
 
 			collapsedGroups: true,
@@ -262,7 +268,8 @@ export default {
 			return menu
 		},
 		ellipsisGroupsMenu() {
-			if (this.collapsedGroups) {
+			// If circles is not enabled, we show everything
+			if (this.isCirclesEnabled && this.collapsedGroups) {
 				return this.groupsMenu.slice(0, ELLIPSIS_COUNT)
 			}
 			return this.groupsMenu
@@ -270,7 +277,7 @@ export default {
 
 		// generate circles menu from the circles store
 		circlesMenu() {
-			const menu = this.circles
+			const menu = this.circles || []
 			menu.sort((a, b) => naturalCompare(a.toString(), b.toString(), { caseInsensitive: true }))
 
 			return menu
diff --git a/src/services/isCirclesEnabled.js b/src/services/isCirclesEnabled.js
new file mode 100644
index 00000000..8960de3e
--- /dev/null
+++ b/src/services/isCirclesEnabled.js
@@ -0,0 +1,26 @@
+/**
+ * @copyright Copyright (c) 2021 John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @author John Molakvoæ <skjnldsv@protonmail.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/>.
+ *
+ */
+
+import { loadState } from '@nextcloud/initial-state'
+
+const isCirclesEnabled = loadState('contacts', 'isCirclesEnabled', false)
+export default isCirclesEnabled
diff --git a/src/services/isContactsInteractionEnabled.js b/src/services/isContactsInteractionEnabled.js
index f6434245..dbe8b80d 100644
--- a/src/services/isContactsInteractionEnabled.js
+++ b/src/services/isContactsInteractionEnabled.js
@@ -22,5 +22,5 @@
 
 import { loadState } from '@nextcloud/initial-state'
 
-const contactsinteraction = loadState('contacts', 'contactsinteraction')
-export default contactsinteraction
+const isContactsInteractionEnabled = loadState('contacts', 'isContactsInteractionEnabled', false)
+export default isContactsInteractionEnabled
diff --git a/src/store/index.js b/src/store/index.js
index 89a2fa9f..9f7cb923 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -29,19 +29,26 @@ import contacts from './contacts'
 import groups from './groups'
 import importState from './importState'
 
+import isCirclesEnabled from '../services/isCirclesEnabled'
+
 Vue.use(Vuex)
 
 const mutations = {}
 
-export default new Store({
-	modules: {
-		addressbooks,
-		circles,
-		contacts,
-		groups,
-		importState,
-	},
+const modules = {
+	addressbooks,
+	contacts,
+	groups,
+	importState,
+}
 
+// If circles is enabled let's init the store
+if (isCirclesEnabled) {
+	modules.circles = circles
+}
+
+export default new Store({
+	modules,
 	mutations,
 
 	/**
diff --git a/src/views/Contacts.vue b/src/views/Contacts.vue
index a616377b..72f3fd5e 100644
--- a/src/views/Contacts.vue
+++ b/src/views/Contacts.vue
@@ -84,6 +84,7 @@ import Contact from '../models/contact'
 import rfcProps from '../models/rfcProps'
 
 import client from '../services/cdav'
+import isCirclesEnabled from '../services/isCirclesEnabled'
 
 export default {
 	name: 'Contacts',
@@ -122,7 +123,8 @@ export default {
 
 	data() {
 		return {
-			loadingCircles: true,
+			// Let's but the loading state to true if circles is enabled
+			loadingCircles: isCirclesEnabled,
 			loadingContacts: true,
 		}
 	},
@@ -240,10 +242,12 @@ export default {
 			}
 		})
 
-		// Get circles
-		this.$store.dispatch('getCircles').then(() => {
-			this.loadingCircles = false
-		})
+		// Get circles if enabled
+		if (isCirclesEnabled) {
+			this.$store.dispatch('getCircles').then(() => {
+				this.loadingCircles = false
+			})
+		}
 	},
 
 	methods: {