fixup! Circle config checkboxes

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
nextcloud · May 3, 2021 · e173810 · e173810
1 parent 5c2e58a
commit e173810
Show file tree

Hide file tree

Showing 13 changed files with 382 additions and 156 deletions.
diff --git a/src/components/AppContent/CircleContent.vue b/src/components/AppContent/CircleContent.vue
@@ -36,34 +36,36 @@
 				</EmptyContent>
 			</AppContentDetails>
 
-			<!-- not a member -->
-			<AppContentDetails v-else-if="!circle.isMember">
-				<EmptyContent v-if="!loadingJoin" icon="icon-circles">
-					{{ t('contacts', 'You are not a member of this circle') }}
-
-					<!-- Only show the join button if the circle is accepting requests -->
-					<template v-if="circle.canJoin" #desc>
-						<button :disabled="loadingJoin" class="primary" @click="requestJoin">
-							{{ t('contacts', 'Request to join') }}
-						</button>
-					</template>
-				</EmptyContent>
-
-				<EmptyContent v-else-if="circle.isPendingJoin" icon="icon-loading">
-					{{ t('contacts', 'Your request to join this circle is pending approval') }}
-				</EmptyContent>
-
-				<EmptyContent v-else icon="icon-loading">
-					{{ t('contacts', 'Joining circle') }}
-				</EmptyContent>
-			</AppContentDetails>
-
 			<template v-else>
 				<!-- member list -->
 				<MemberList :list="members" />
 
 				<!-- main contacts details -->
-				<CircleDetails :circle-id="selectedCircle" />
+				<CircleDetails :circle="circle">
+					<!-- not a member -->
+					<template v-if="!circle.isMember">
+						<!-- Join request in progress -->
+						<EmptyContent v-if="loadingJoin" icon="icon-loading">
+							{{ t('contacts', 'Joining circle') }}
+						</EmptyContent>
+
+						<!-- Pending request validation -->
+						<EmptyContent v-else-if="circle.isPendingJoin" icon="icon-loading">
+							{{ t('contacts', 'Your request to join this circle is pending approval') }}
+						</EmptyContent>
+
+						<EmptyContent v-else icon="icon-circles">
+							{{ t('contacts', 'You are not a member of this circle') }}
+
+							<!-- Only show the join button if the circle is accepting requests -->
+							<template v-if="circle.canJoin" #desc>
+								<button :disabled="loadingJoin" class="primary" @click="requestJoin">
+									{{ t('contacts', 'Request to join') }}
+								</button>
+							</template>
+						</EmptyContent>
+					</template>
+				</CircleDetails>
 			</template>
 		</div>
 	</AppContent>

diff --git a/src/components/AppNavigation/CircleNavigationItem.vue b/src/components/AppNavigation/CircleNavigationItem.vue
@@ -1,5 +1,5 @@
 <!--
-  - @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com>
+  - @copyright Copyright (c) 2021 John Molakvoæ <skjnldsv@protonmail.com>
   -
   - @author John Molakvoæ <skjnldsv@protonmail.com>
   -
@@ -25,7 +25,7 @@
 		:to="circle.router"
 		:title="circle.displayName"
 		:icon="circle.icon">
-		<template v-if="loading" slot="actions">
+		<template v-if="loadingAction" slot="actions">
 			<ActionText icon="icon-loading-small">
 				{{ t('contacts', 'Loading …') }}
 			</ActionText>
@@ -50,7 +50,7 @@
 			<!-- leave circle -->
 			<ActionButton
 				v-if="circle.canLeave"
-				@click="leaveCircle">
+				@click="confirmLeaveCircle">
 				{{ t('contacts', 'Leave circle') }}
 				<ExitToApp slot="icon"
 					:size="16"
@@ -71,7 +71,7 @@
 			<ActionButton
 				v-if="circle.canDelete"
 				icon="icon-delete"
-				@click="deleteCircle">
+				@click="confirmDeleteCircle">
 				{{ t('contacts', 'Delete') }}
 			</ActionButton>
 		</template>
@@ -83,8 +83,6 @@
 </template>
 
 <script>
-import { emit } from '@nextcloud/event-bus'
-
 import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
 import ActionLink from '@nextcloud/vue/dist/Components/ActionLink'
 import ActionText from '@nextcloud/vue/dist/Components/ActionText'
@@ -93,10 +91,8 @@ import AppNavigationItem from '@nextcloud/vue/dist/Components/AppNavigationItem'
 import ExitToApp from 'vue-material-design-icons/ExitToApp'
 import LocationEnter from 'vue-material-design-icons/LocationEnter'
 
-import { joinCircle } from '../../services/circles.ts'
-import { showError } from '@nextcloud/dialogs'
 import Circle from '../../models/circle.ts'
-import CopyToClipboardMixin from '../../mixins/CopyToClipboardMixin'
+import CircleActionsMixin from '../../mixins/CircleActionsMixin'
 
 export default {
 	name: 'CircleNavigationItem',
@@ -111,7 +107,7 @@ export default {
 		LocationEnter,
 	},
 
-	mixins: [CopyToClipboardMixin],
+	mixins: [CircleActionsMixin],
 
 	props: {
 		circle: {
@@ -120,87 +116,10 @@ export default {
 		},
 	},
 
-	data() {
-		return {
-			loading: false,
-		}
-	},
-
 	computed: {
-		copyButtonText() {
-			if (this.copied) {
-				return this.copySuccess
-					? t('contacts', 'Copied')
-					: t('contacts', 'Could not copy')
-			}
-			return t('contacts', 'Copy link')
-		},
-
-		circleUrl() {
-			const route = this.$router.resolve(this.circle.router)
-			return window.location.origin + route.href
-		},
-
-		joinButtonTitle() {
-			if (this.circle.requireJoinAccept) {
-				return t('contacts', 'Request to join')
-			}
-			return t('contacts', 'Join circle')
-		},
-
 		memberCount() {
 			return Object.values(this.circle?.members || []).length
 		},
 	},
-
-	methods: {
-		// Trigger the entity picker view
-		async addMemberToCircle() {
-			await this.$router.push(this.circle.router)
-			emit('contacts:circles:append', this.circle.id)
-		},
-
-		async joinCircle() {
-			this.loading = true
-			try {
-				await joinCircle(this.circle.id)
-			} catch (error) {
-				showError(t('contacts', 'Unable to join the circle'))
-			} finally {
-				this.loading = false
-			}
-
-		},
-
-		async leaveCircle() {
-			this.loading = true
-			const member = this.circle.initiator
-
-			try {
-				await this.$store.dispatch('deleteMemberFromCircle', {
-					member,
-					leave: true,
-				})
-			} catch (error) {
-				console.error('Could not leave the circle', member, error)
-				showError(t('contacts', 'Could not leave the circle {displayName}', this.circle))
-			} finally {
-				this.loading = false
-			}
-
-		},
-
-		async deleteCircle() {
-			this.loading = true
-
-			try {
-				this.$store.dispatch('deleteCircle', this.circle.id)
-			} catch (error) {
-				showError(t('contacts', 'Unable to delete the circle'))
-			} finally {
-				this.loading = false
-			}
-		},
-	},
 }
 </script>
diff --git a/src/components/AppNavigation/RootNavigation.vue b/src/components/AppNavigation/RootNavigation.vue
@@ -69,7 +69,7 @@
 				</AppNavigationCounter>
 			</AppNavigationItem>
 
-			<AppNavigationItem
+			<AppNavigationCaption
 				id="newgroup"
 				:force-menu="true"
 				:menu-open.sync="isNewGroupMenuOpen"
@@ -85,7 +85,7 @@
 						:placeholder="t('contacts','Group name')"
 						@submit.prevent.stop="createNewGroup" />
 				</template>
-			</AppNavigationItem>
+			</AppNavigationCaption>
 
 			<!-- Custom groups -->
 			<GroupNavigationItem
@@ -101,7 +101,7 @@
 				icon=""
 				@click="onToggleGroups" />
 
-			<AppNavigationItem
+			<AppNavigationCaption
 				id="newcircle"
 				:force-menu="true"
 				:menu-open.sync="isNewCircleMenuOpen"
@@ -117,7 +117,7 @@
 						:placeholder="t('contacts','Circle name')"
 						@submit.prevent.stop="createNewCircle" />
 				</template>
-			</AppNavigationItem>
+			</AppNavigationCaption>
 
 			<!-- Circles -->
 			<CircleNavigationItem
@@ -152,6 +152,7 @@ import AppNavigation from '@nextcloud/vue/dist/Components/AppNavigation'
 import AppNavigationCounter from '@nextcloud/vue/dist/Components/AppNavigationCounter'
 import AppNavigationItem from '@nextcloud/vue/dist/Components/AppNavigationItem'
 import AppNavigationSettings from '@nextcloud/vue/dist/Components/AppNavigationSettings'
+import AppNavigationCaption from '@nextcloud/vue/dist/Components/AppNavigationCaption'
 
 import naturalCompare from 'string-natural-compare'
 
@@ -171,6 +172,7 @@ export default {
 		AppNavigationCounter,
 		AppNavigationItem,
 		AppNavigationSettings,
+		AppNavigationCaption,
 		CircleNavigationItem,
 		GroupNavigationItem,
 		SettingsSection,