MemberList.vue

<!--
  - SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors
  - SPDX-License-Identifier: AGPL-3.0-or-later
-->

<template>
	<section class="member-list">
		<NcEmptyContent v-if="loading" class="empty-content" :name="t('contacts', 'Loading members list …')">
			<template #icon>
				<IconLoading :size="20" />
			</template>
		</NcEmptyContent>

		<NcEmptyContent
			v-else-if="!circle.isMember"
			class="empty-content"
			:name="t('contacts', 'The list of members is only visible to members of this team')">
			<template #icon>
				<IconContact :size="20" />
			</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>
		</NcEmptyContent>

		<div v-else class="member-grid">
			<MemberGridItem
				v-for="member in flatList"
				:key="`member-grid-item-${member.id}`"
				:member="member"
				:is-team="!member.isUser" />
		</div>

		<!-- member picker -->
		<EntityPicker
			v-if="showPicker"
			ref="entityPicker"
			v-model:selection="pickerSelection"
			:confirm-label="t('contacts', 'Add to {team}', { team: decodedTeamName })"
			:title-label="t('contacts', 'Invite members to {team}', { team: decodedTeamName })"
			:data-types="pickerTypes"
			:data-set="filteredPickerData"
			:internal-search="false"
			:loading="pickerLoading"
			@close="resetPicker"
			@search="onSearch"
			@submit="onPickerPick" />
	</section>
</template>

<script lang="ts">
import { showError, showWarning } from '@nextcloud/dialogs'
import { subscribe } from '@nextcloud/event-bus'
import { t } from '@nextcloud/l10n'
import { NcEmptyContent } from '@nextcloud/vue'
import { defineComponent } from 'vue'
import IconContact from 'vue-material-design-icons/AccountMultipleOutline.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 { getRecommendations, getSuggestions } from '../../services/collaborationAutocompletion.js'

export default defineComponent({
	name: 'MemberList',

	components: {
		EntityPicker,
		IconContact,
		MemberGridItem,
		NcEmptyContent,
	},

	mixins: [IsMobileMixin, RouterMixin],

	props: {
		list: {
			type: Array,
			required: true,
		},

		loading: {
			type: Boolean,
			default: false,
		},
	},

	data() {
		return {
			pickerLoading: false,
			showPicker: false,
			showPickerIntro: true,

			recommendations: [],
			pickerCircle: null,
			pickerData: [],
			pickerSelection: {},
			pickerTypes: CIRCLES_MEMBER_GROUPING,
		}
	},

	computed: {
		/**
		 * Return the current circle
		 *
		 * @return {object}
		 */
		circle() {
			return this.$store.getters.getCircle(this.selectedCircle)
		},

		// 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 {
			const raw = this.circle && this.circle.displayName ? this.circle.displayName : ''
			// Use a DOM textarea element to decode HTML entities safely.
			// This works for common entities such as &amp;, &lt;, &gt;, &#39;, etc.
			const ta = document.createElement('textarea')
			ta.innerHTML = raw
			return ta.value
		},

		filteredPickerData() {
			return this.pickerData.filter((entity) => {
				const type = SHARES_TYPES_MEMBER_MAP[entity.shareType]
				const list = this.list.filter(({ userType }) => userType === type)
				if (list) {
					return list.find((member) => member.userId === entity.shareWith) === undefined
				}
				// If the type doesn't exists, there is no member of this type
				return true
			})
		},

		flatList() {
			const teams = this.list.filter((member) => !member.isUser)
			const users = this.list.filter((member) => member.isUser)
			return [...teams, ...users]
		},

		hasMembers() {
			return this.flatList.length > 0
		},
	},

	mounted() {
		subscribe('contacts:circles:append', this.onShowPicker)
		subscribe('guests:user:created', this.onGuestCreated)
	},

	methods: {
		/**
		 * Show picker and fetch for recommendations
		 * Cache the circleId in case the url change or something
		 * and make sure we add them to the desired circle.
		 *
		 * @param {string} circleId the circle id to add members to
		 */
		async onShowPicker(circleId) {
			this.showPicker = true
			this.pickerLoading = true
			this.pickerCircle = circleId

			try {
				const results = await getRecommendations()
				// cache recommendations
				this.recommendations = results
				this.pickerData = results
			} catch (error) {
				console.error('Unable to get the recommendations list', error)
				// Do not show the error, let the user search
				// showError(t('contacts', 'Unable to get the recommendations list'))
			} finally {
				this.pickerLoading = false
			}
		},

		/**
		 * On EntityPicker search.
		 * Returns recommendations if empty
		 *
		 * @param {string} term the searched term
		 */
		async onSearch(term) {
			if (term.trim() === '') {
				this.pickerData = this.recommendations
				return
			}

			this.pickerLoading = true

			try {
				const results = await getSuggestions(term)
				this.pickerData = results
			} catch (error) {
				console.error('Unable to get the results', error)
				showError(t('contacts', 'Unable to get the results'))
			} finally {
				this.pickerLoading = false
			}
		},

		/**
		 * On picker submit
		 *
		 * @param {Array} selection the selection to add to the circle
		 */
		async onPickerPick(selection) {
			this.logger.info('Adding selection to circle', { selection, pickerCircle: this.pickerCircle })

			this.pickerLoading = true

			selection = selection.map((entry) => ({
				id: entry.shareWith,
				type: SHARES_TYPES_MEMBER_MAP[entry.shareType],
			}))

			try {
				const members = await this.$store.dispatch('addMembersToCircle', { circleId: this.pickerCircle, selection })

				if (members.length < selection.length) {
					showWarning(t('contacts', 'Some members could not be added'))
					// TODO filter successful members and edit selection
					this.pickerSelection = {}
					return
				}

				this.resetPicker()
			} catch (error) {
				showError(t('contacts', 'There was an issue adding members to the team'))
				console.error('There was an issue adding members to the circle', this.pickerCircle, error)
			} finally {
				this.pickerLoading = false
			}
		},

		/**
		 * Reset picker related variables
		 */
		resetPicker() {
			this.showPicker = false
			this.pickerCircle = null
			this.pickerData = []
			this.pickerSelection = {}
		},

		async onGuestCreated(guest) {
			const results = await getSuggestions(guest.username)
			this.$refs.entityPicker.onClick(results[0])
		},
	},
})
</script>

<style lang="scss" scoped>
.member-list {
	// Make virtual scroller scrollable
	max-height: 100%;
	max-width: 900px;
	overflow: auto;

	:deep(.empty-content) {
		margin: auto;
	}
}

.member-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;

	@media (max-width: 768px) {
		grid-template-columns: 1fr;
	}

	@media (min-width: 1200px) {
		grid-template-columns: repeat(3, 1fr);
	}
}

.empty-content {
	height: 100%;
}
</style>