feat: optimize member list

Signed-off-by: Kostiantyn Miakshyn <molodchick@gmail.com>

Author: Koc

src/components/AppContent/CircleContent.vue

@@ -58,12 +58,6 @@ export default {
 		},
 	},
 
-	data() {
-		return {
-			loadingList: false,
-		}
-	},
-
 	computed: {
 		// store variables
 		circles() {
@@ -82,25 +76,10 @@ export default {
 			return Object.values(this.circle?.members || [])
 		},
 
-		/**
-		 * Is the current circle empty
-		 *
-		 * @return {boolean}
-		 */
-		isEmptyCircle() {
-			return this.members.length === 0
-		},
-
 		...mapStores(useUserGroupStore),
 	},
 
 	watch: {
-		circle(newCircle) {
-			if (newCircle?.id) {
-				this.fetchCircleMembers(newCircle.id)
-			}
-		},
-
 		userGroup(newUserGroup) {
 			if (newUserGroup?.id) {
 				this.fetchUserGroupMembers(newUserGroup.id)
@@ -109,40 +88,18 @@ export default {
 	},
 
 	beforeMount() {
-		if (this.circle?.id) {
-			this.fetchCircleMembers(this.circle.id)
-		}
-
 		if (this.userGroup?.id) {
 			this.fetchUserGroupMembers(this.userGroup.id)
 		}
 	},
 
 	methods: {
-		async fetchCircleMembers(circleId) {
-			this.loadingList = true
-			this.logger.debug('Fetching members for', { circleId })
-
-			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
-			}
-		},
-
 		async fetchUserGroupMembers(userGroupId) {
-			this.loadingList = true
-
 			try {
 				await this.userGroupStore.getUserGroupMembers(userGroupId)
 			} catch (error) {
 				console.error(error)
 				showError(t('contacts', 'There was an error fetching the member list'))
-			} finally {
-				this.loadingList = false
 			}
 		},
 	},

src/components/MemberList/MemberList.vue

@@ -5,9 +5,9 @@
 
 <template>
 	<section class="member-list">
-		<NcEmptyContent v-if="loading" class="empty-content" :name="t('contacts', 'Loading members list …')">
+		<NcEmptyContent v-if="loading || loadingList" class="empty-content" :name="t('contacts', 'Loading members list …')">
 			<template #icon>
-				<IconLoading :size="20" />
+				<NcLoadingIcon :size="20" />
 			</template>
 		</NcEmptyContent>
 
@@ -20,26 +20,50 @@
 			</template>
 		</NcEmptyContent>
 
-		<NcEmptyContent
-			v-else-if="!hasMembers"
-			class="empty-content"
-			:name="t('contacts', 'You currently have no access to the member list')">
-			<template #icon>
-				<IconContact :size="20" />
+		<template v-else>
+			<div style="display: flex; margin-bottom: 2rem;">
+				<NcTextField
+					v-model="searchQuery"
+					:label="t('contacts', 'Search among current members')"
+					trailing-button-icon="close"
+					:show-trailing-button="searchQuery !== ''"
+					@trailing-button-click="clearSearchField">
+					<IconSearch :size="20" />
+				</NcTextField>
+
+				<NcSelect
+					v-model="searchRole"
+					:options="roles"
+					:multiple="false"
+					style="margin-top: 6px;min-width: 200px;margin-left: 1rem;" />
+			</div>
+
+			<NcEmptyContent
+				v-if="!hasMembers"
+				class="empty-content"
+				:name="hasActiveFilters ? t('contacts', 'No members found matching your search') : t('contacts', 'You currently have no access to the member list')">
+				<template #icon>
+					<IconContact :size="20" />
+				</template>
+			</NcEmptyContent>
+
+			<template v-else>
+				<VList
+					v-slot="{ item }"
+					class="member-list__virtual"
+					:style="virtualListStyle"
+					:data="flatList">
+					<MemberGridItem
+						:key="`member-grid-item-${item.id}`"
+						:member="item"
+						:is-team="!item.isUser" />
+				</VList>
+
+				<div v-if="isMembersLisTooLarge" class="member-list__too-large">
+					{{ membershipTooLargeMessage }}
+				</div>
 			</template>
-		</NcEmptyContent>
-
-		<VList
-			v-else
-			v-slot="{ item }"
-			class="member-list__virtual"
-			:style="virtualListStyle"
-			:data="flatList">
-			<MemberGridItem
-				:key="`member-grid-item-${item.id}`"
-				:member="item"
-				:is-team="!item.isUser" />
-		</VList>
+		</template>
 
 		<!-- member picker -->
 		<EntityPicker
@@ -62,26 +86,38 @@
 import { showError, showWarning } from '@nextcloud/dialogs'
 import { subscribe } from '@nextcloud/event-bus'
 import { t } from '@nextcloud/l10n'
-import { NcEmptyContent } from '@nextcloud/vue'
+import { NcEmptyContent, NcLoadingIcon, NcSelect, NcTextField } from '@nextcloud/vue'
+import { refDebounced } from '@vueuse/core'
 import { VList } from 'virtua/vue'
-import { defineComponent } from 'vue'
+import { defineComponent, ref } from 'vue'
 import IconContact from 'vue-material-design-icons/AccountMultipleOutline.vue'
+import IconSearch from 'vue-material-design-icons/Magnify.vue'
 import EntityPicker from '../EntityPicker/EntityPicker.vue'
 import MemberGridItem from './MemberGridItem.vue'
 import IsMobileMixin from '../../mixins/IsMobileMixin.ts'
 import RouterMixin from '../../mixins/RouterMixin.js'
-import { CIRCLES_MEMBER_GROUPING, SHARES_TYPES_MEMBER_MAP } from '../../models/constants.ts'
+import {
+	CIRCLES_MEMBER_GROUPING,
+	CIRCLES_MEMBER_LEVELS,
+	MAX_MEMBERS_TO_RENDER,
+	MemberLevels,
+	SHARES_TYPES_MEMBER_MAP,
+} from '../../models/constants.ts'
 import { getRecommendations, getSuggestions } from '../../services/collaborationAutocompletion.js'
 
 export default defineComponent({
 	name: 'MemberList',
 
 	components: {
+		IconSearch,
+		NcTextField,
+		NcSelect,
 		EntityPicker,
 		IconContact,
 		MemberGridItem,
 		NcEmptyContent,
 		VList,
+		NcLoadingIcon,
 	},
 
 	mixins: [IsMobileMixin, RouterMixin],
@@ -98,8 +134,35 @@ export default defineComponent({
 		},
 	},
 
+	setup() {
+		const searchQuery = ref('')
+		const clearSearchField = () => {
+			searchQuery.value = ''
+		}
+		const searchQueryDebounced = refDebounced(searchQuery, 500)
+
+		const searchRole = ref(null)
+		const roles = Object.entries(CIRCLES_MEMBER_LEVELS).map(([id, label]) => ({
+			id: Number(id),
+			label,
+		}))
+		roles.unshift({
+			id: Number(MemberLevels.NONE),
+			label: t('contacts', 'Pending'),
+		})
+
+		return {
+			searchQuery,
+			searchQueryDebounced,
+			clearSearchField,
+			searchRole,
+			roles,
+		}
+	},
+
 	data() {
 		return {
+			loadingList: false,
 			pickerLoading: false,
 			showPicker: false,
 			showPickerIntro: true,
@@ -118,12 +181,30 @@ export default defineComponent({
 		/**
 		 * Return the current circle
 		 *
-		 * @return {object}
+		 * @return {Circle}
 		 */
 		circle() {
 			return this.$store.getters.getCircle(this.selectedCircle)
 		},
 
+		members() {
+			return Object.values(this.$store.getters.getCircle(this.circle.id)?.members || [])
+		},
+
+		membershipTooLargeMessage() {
+			if (this.searchQueryDebounced || this.searchRole?.id) {
+				const searchQuery = this.searchQueryDebounced || '-'
+				const searchRole = this.searchRole?.label || 'any'
+				return `Search results (query: ${searchQuery}, role: ${searchRole}) contains too many entries.`
+			}
+
+			return 'Users list too large'
+		},
+
+		isMembersLisTooLarge() {
+			return this.flatList.length > MAX_MEMBERS_TO_RENDER
+		},
+
 		// Decode HTML entities in the circle display name so apostrophes (') and other
 		// HTML-encoded chars (e.g. &#39;) are shown correctly in the picker labels.
 		decodedTeamName(): string {
@@ -157,6 +238,10 @@ export default defineComponent({
 			return this.flatList.length > 0
 		},
 
+		hasActiveFilters() {
+			return this.searchQuery !== '' || this.searchRole !== null
+		},
+
 		virtualListStyle() {
 			const gridBaseline = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--default-grid-baseline')) || 4
 			const headerHeight = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--header-height')) || 50
@@ -168,6 +253,24 @@ export default defineComponent({
 		},
 	},
 
+	watch: {
+		searchQueryDebounced(value) {
+			this.fetchCircleMembers()
+		},
+
+		searchRole(value) {
+			this.fetchCircleMembers()
+		},
+
+		'circle.id': {
+			handler() {
+				this.fetchCircleMembers()
+			},
+
+			immediate: true,
+		},
+	},
+
 	mounted() {
 		subscribe('contacts:circles:append', this.onShowPicker)
 		subscribe('guests:user:created', this.onGuestCreated)
@@ -179,6 +282,8 @@ export default defineComponent({
 	},
 
 	methods: {
+		t,
+
 		/**
 		 * Measure the circle details header height from the DOM
 		 * and keep it updated via ResizeObserver.
@@ -296,6 +401,26 @@ export default defineComponent({
 			const results = await getSuggestions(guest.username, this.circle)
 			this.$refs.entityPicker.onClick(results[0])
 		},
+
+		async fetchCircleMembers() {
+			if (!this.circle?.canManageMembers) {
+				return
+			}
+
+			this.loadingList = true
+			const payload = { circleId: this.circle.id, search: this.searchQuery || null, role: this.searchRole?.id }
+			this.logger.debug('Fetching members for', payload)
+
+			try {
+				await this.$store.dispatch('getCircleMembers', payload)
+				console.log('debug: getCircleMembers', this.list)
+			} catch (error) {
+				console.error(error)
+				showError(t('contacts', 'There was an error fetching the member list'))
+			} finally {
+				this.loadingList = false
+			}
+		},
 	},
 })
 </script>
@@ -312,4 +437,10 @@ export default defineComponent({
 .empty-content {
 	height: 100%;
 }
+
+.member-list__too-large {
+	padding: var(--default-grid-baseline) 0;
+	text-align: center;
+	color: var(--color-text-maxcontrast);
+}
 </style>

src/components/MemberList/MemberListGroup.vue

@@ -6,6 +6,9 @@
 <script setup lang="ts">
 import type Member from '../../models/member.ts'
 
+import { t } from '@nextcloud/l10n'
+import { NcEmptyContent } from '@nextcloud/vue'
+import IconSearch from 'vue-material-design-icons/Magnify.vue'
 import MemberListItem from './MemberListItem.vue'
 
 defineProps<{
@@ -22,6 +25,17 @@ defineProps<{
 			class="member-list-group__heading">
 			{{ label }}
 		</h4>
+
+		<template v-if="!members.length">
+			<div style="margin-top: 2rem;">
+				<NcEmptyContent :name="t('contacts', 'No results found')">
+					<template #icon>
+						<IconSearch :size="20" />
+					</template>
+				</NcEmptyContent>
+			</div>
+		</template>
+
 		<ul :aria-labelledby="`member-list-group-${type}`" class="member-list-group__list">
 			<MemberListItem
 				v-for="member in members"
@@ -32,6 +46,13 @@ defineProps<{
 </template>
 
 <style scoped lang="scss">
+#member-list-group-1 {
+  margin-top: 0;
+  padding-top: 0;
+}
+.member-list-group__list-extended {
+  max-height: 200px;
+}
 .member-list-group {
 	&__heading {
 		display: flex;