New circle intro

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

1 files changed, 64 insertions, 42 deletions

diff --git a/src/components/AppContent/CircleContent.vue b/src/components/AppContent/CircleContent.vue
index eda997df..7ccdd7af 100644
--- a/src/components/AppContent/CircleContent.vue
+++ b/src/components/AppContent/CircleContent.vue
@@ -28,53 +28,54 @@
 			</EmptyContent>
 		</div>
 
+		<div v-else-if="loading">
+			<EmptyContent icon="icon-loading">
+				{{ t('contacts', 'Loading circle …') }}
+			</EmptyContent>
+		</div>
+
 		<div v-else id="app-content-wrapper">
-			<!-- loading members -->
-			<AppContentDetails v-if="loading">
-				<EmptyContent icon="icon-loading">
-					{{ t('contacts', 'Loading circle members…') }}
-				</EmptyContent>
-			</AppContentDetails>
-
-			<template v-else>
-				<!-- member list -->
-				<MemberList :list="members" />
-
-				<!-- main contacts details -->
-				<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>
+			<!-- member list -->
+			<MemberList :list="members" :loading="loadingList" />
+
+			<!-- main contacts details -->
+			<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 {circle}', { circle: circle.displayName}) }}
+
+						<!-- Only show the join button if the circle is accepting requests -->
+						<template v-if="circle.canJoin" #desc>
+							<button :disabled="loadingJoin" class="primary" @click="requestJoin">
+								<Login slot="icon"
+									:size="16"
+									decorative />
+								{{ t('contacts', 'Request to join') }}
+							</button>
+						</template>
+					</EmptyContent>
+				</template>
+			</CircleDetails>
 		</div>
 	</AppContent>
 </template>
 <script>
-import AppContentDetails from '@nextcloud/vue/dist/Components/AppContentDetails'
 import AppContent from '@nextcloud/vue/dist/Components/AppContent'
 import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent'
 
+import Login from 'vue-material-design-icons/Login'
+
 import CircleDetails from '../CircleDetails'
 import MemberList from '../MemberList'
 import RouterMixin from '../../mixins/RouterMixin'
@@ -86,9 +87,9 @@ export default {
 
 	components: {
 		AppContent,
-		AppContentDetails,
 		CircleDetails,
 		EmptyContent,
+		Login,
 		MemberList,
 	},
 
@@ -104,6 +105,7 @@ export default {
 	data() {
 		return {
 			loadingJoin: false,
+			loadingList: false,
 		}
 	},
 
@@ -138,8 +140,17 @@ export default {
 	},
 
 	methods: {
-		fetchCircleMembers(circleId) {
-			this.$store.dispatch('getCircleMembers', circleId)
+		async fetchCircleMembers(circleId) {
+			this.loadingList = true
+
+			try {
+				await this.$store.dispatch('getCircleMembers', circleId)
+			} catch (error) {
+				console.error(error)
+				showError(t('contacts', 'There was an error fetching the member list'))
+			} finally {
+				this.loadingList = false
+			}
 		},
 
 		/**
@@ -165,4 +176,15 @@ export default {
 #app-content-wrapper {
 	display: flex;
 }
+
+// TODO: replace my button component when available
+button {
+	height: 44px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	span {
+		margin-right: 10px;
+	}
+}
 </style>