pixelfed/resources/assets/components/groups/partials/GroupMembers.vue

<template>
	<div class="group-members-component">
		<div class="row justify-content-center">
			<div class="col-12 col-md-8 mb-5">
				<div v-if="isAdmin && requestCount && !hideHeader" class="card card-body border shadow-sm bg-dark text-light mb-4 rounded-pill p-2 pl-3">
					<div class="d-flex align-items-center justify-content-between">
						<span class="lead mb-0 text-lighter">
							<i class="fal fa-exclamation-triangle mr-2 text-warning"></i>
							You have <strong class="text-white">{{ requestCount }}</strong> member applications to review
						</span>
						<span>
							<button class="btn btn-primary font-weight-bold rounded-pill btn-sm px-3" @click="reviewApplicants()">Review</button>
						</span>
					</div>
				</div>

				<div class="card card-body border shadow-sm">
					<div v-if="!hideHeader">
						<p class="d-flex align-items-center mb-0">
							<span class="lead font-weight-bold">Members</span>
							<span class="mx-2">·</span>
							<span class="text-muted">{{group.member_count}}</span>
						</p>
						<!-- <p class="text-muted mb-0">
							New people who join this group will appear here. <a class="font-weight-bold text-dark" href="#">Learn More</a>
						</p> -->
						<div class="form-group mt-3" style="position: relative;">
							<i class="fas fa-search fa-lg text-lighter" style="position: absolute;left:20px; top:50%;transform:translateY(-50%);"></i>
							<input class="form-control form-control-lg bg-light border rounded-pill" style="padding-left: 50px;padding-right: 50px;" placeholder="Find a member" v-model="memberSearchModel">
							<button class="btn btn-primary font-weight-bold rounded-pill px-3" style="position: absolute;right: 6px; top: 50%;transform: translateY(-50%);">Search</button>
						</div>

						<hr>
					</div>

					<div v-if="tab == 'list'">
						<div class="group-members-component-paginated-list py-3">
							<div class="media align-items-center">
								<a :href="profile.url" class="text-dark text-decoration-none">
									<img
                                        :src="profile?.avatar"
                                        width="56"
                                        height="56"
                                        class="rounded-circle border mr-2"
                                        onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'"
                                    />
								</a>
								<div class="media-body">
									<p class="lead font-weight-bold mb-0">
										{{profile.username}}
										<span class="member-label rounded ml-1">Me</span>
									</p>
									<p class="text-muted mb-0">Founded group {{formatDate(group.created_at)}}</p>
								</div>
								<!-- <button class="btn btn-light border">
									<i class="fas fa-ellipsis-h text-muted"></i>
								</button> -->
							</div>
						</div>

						<hr v-if="mutual.length > 0">

						<div v-if="mutual.length > 0" class="group-members-component-paginated-list">
							<p class="font-weight-bold mb-1">Mutual Friends</p>

							<div v-for="(member, index) in mutual" class="media align-items-center py-3">
								<a :href="member.url" class="text-dark text-decoration-none">
                                    <img
                                        :src="member?.avatar"
                                        width="56"
                                        height="56"
                                        class="rounded-circle border mr-2"
                                        onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'"
                                    />
								</a>

								<div class="media-body">
									<p class="lead font-weight-bold mb-0">
										<a :href="member.url" class="text-dark text-decoration-none" :title="member.acct" data-toggle="tooltip">{{member.username}}</a>
										<span v-if="member.role == 'founder'" class="member-label rounded ml-1">Admin</span>
										<span v-if="!member.local" class="remote-label rounded ml-1">Remote</span>
									</p>
									<p class="text-muted mb-0">Member since {{formatDate(member.joined)}}</p>
								</div>
								<a
									class="btn btn-light lead font-weight-bolder px-3 border"
									:href="'/account/direct/t/' + member.id">
									<i class="far fa-comment-dots mr-1"></i> Message
								</a>
								<b-dropdown
									v-if="isAdmin"
									toggle-class="btn btn-light font-weight-bold px-3 border ml-2"
									toggle-tag="a"
									:lazy="true"
									right
									no-caret>
									<template #button-content>
										<i class="fas fa-ellipsis-h"></i>
									</template>
									<b-dropdown-item :href="member.url">View Profile</b-dropdown-item>
									<b-dropdown-item :href="'/account/direct/t/'+member.id">Send Message</b-dropdown-item>
									<b-dropdown-item>View Activity</b-dropdown-item>
									<b-dropdown-divider></b-dropdown-divider>
									<b-dropdown-item link-class="font-weight-bold" @click.prevent="openInteractionLimitModal(member)">Limit interactions</b-dropdown-item>
									<b-dropdown-item link-class="font-weight-bold text-danger">Remove from group</b-dropdown-item>
								</b-dropdown>
							</div>
						</div>

						<hr v-if="members.length > 0">

						<div v-if="members.length > 0" class="group-members-component-paginated-list">
							<p class="font-weight-bold mb-1">Other Members</p>

							<div v-for="(member, index) in members" class="media align-items-center py-3">
								<a :href="member.url" class="text-dark text-decoration-none">
                                    <img
                                        :src="member?.avatar"
                                        width="56"
                                        height="56"
                                        class="rounded-circle border mr-2"
                                        onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'"
                                    />
								</a>

								<div class="media-body">
									<p class="lead font-weight-bold mb-0">
										<a :href="member.url" class="text-dark text-decoration-none" :title="member.acct" data-toggle="tooltip">{{member.username}}</a>
										<span v-if="member.is_admin" class="member-label rounded ml-1">Admin</span>
										<span v-if="!member.local" class="remote-label rounded ml-1">Remote</span>
									</p>
									<p class="text-muted mb-0">Member since {{formatDate(member.joined)}}</p>
								</div>
								<button
									:class="[ member.following ? 'btn-primary' : 'btn-light']"
									class="btn lead font-weight-bolder px-4 border"
									@click="follow(index)">
									<span v-if="member.following">
										Following
									</span>
									<span v-else>
										<i class="fas fa-user-plus mr-2"></i> Follow
									</span>
								</button>
								<b-dropdown
									v-if="isAdmin"
									toggle-class="btn btn-light font-weight-bold px-3 border ml-2"
									toggle-tag="a"
									:lazy="true"
									right
									no-caret>
									<template #button-content>
										<i class="fas fa-ellipsis-h"></i>
									</template>
									<b-dropdown-item :href="member.url" link-class="font-weight-bold">View Profile</b-dropdown-item>
									<b-dropdown-item :href="'/account/direct/t/'+member.id" link-class="font-weight-bold">Send Message</b-dropdown-item>
									<b-dropdown-item link-class="font-weight-bold">View Activity</b-dropdown-item>
									<b-dropdown-divider></b-dropdown-divider>
									<b-dropdown-item link-class="font-weight-bold" @click.prevent="openInteractionLimitModal(member)">Limit interactions</b-dropdown-item>
									<b-dropdown-item link-class="font-weight-bold text-danger">Remove from group</b-dropdown-item>
								</b-dropdown>
							</div>
						</div>

						<p v-if="members.length > 0 && hasNextPage" class="mt-4">
							<button class="btn btn-light btn-block border font-weight-bold" @click="loadNextPage">Load more</button>
						</p>
					</div>

					<div v-if="tab == 'search'" class="d-flex justify-content-center align-items-center" style="min-height: 100px;">
						<div class="text-center text-muted">
							<div class="spinner-border" role="status">
								<span class="sr-only">Loading...</span>
							</div>
							<p class="lead mb-0 mt-2">Loading results ...</p>
						</div>
					</div>

					<div v-if="tab == 'results'">
						<div v-if="results.length > 0" class="group-members-component-paginated-list">
							<p class="font-weight-bold mb-1">Results</p>

							<div v-for="(member, index) in results" class="media align-items-center py-3">
								<a :href="member.url" class="text-dark text-decoration-none">
                                    <img
                                        :src="member?.avatar"
                                        width="56"
                                        height="56"
                                        class="rounded-circle border mr-2"
                                        onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'"
                                    />
								</a>

								<div class="media-body">
									<p class="lead font-weight-bold mb-0">
										<a :href="member.url" class="text-dark text-decoration-none" :title="member.acct" data-toggle="tooltip">{{member.username}}</a>
										<span v-if="member.role == 'founder'" class="member-label rounded ml-1">Admin</span>
										<span v-if="!member.local" class="remote-label rounded ml-1">Remote</span>
									</p>
									<p class="text-muted mb-0">Member since {{formatDate(member.joined)}}</p>
								</div>
								<a
									class="btn btn-light lead font-weight-bolder px-3 border"
									:href="'/account/direct/t/' + member.id">
									<i class="far fa-comment-dots mr-1"></i> Message
								</a>
								<b-dropdown
									v-if="isAdmin"
									toggle-class="btn btn-light font-weight-bold px-3 border ml-2"
									toggle-tag="a"
									:lazy="true"
									right
									no-caret>
									<template #button-content>
										<i class="fas fa-ellipsis-h"></i>
									</template>
									<b-dropdown-item :href="member.url">View Profile</b-dropdown-item>
									<b-dropdown-item :href="'/account/direct/t/'+member.id">Send Message</b-dropdown-item>
									<b-dropdown-item>View Activity</b-dropdown-item>
									<b-dropdown-divider></b-dropdown-divider>
									<b-dropdown-item link-class="font-weight-bold" @click.prevent="openInteractionLimitModal(member)">Limit interactions</b-dropdown-item>
									<b-dropdown-item link-class="font-weight-bold text-danger">Remove from group</b-dropdown-item>
								</b-dropdown>
							</div>
							<p class="text-center mt-5">
								<a href="#" class="font-weight-bold" @click="backFromSearch">Go back</a>
							</p>
						</div>
						<div v-else class="text-center text-muted mt-3">
							<p class="lead">No results found.</p>
							<p>
								<a href="#" class="font-weight-bold" @click="backFromSearch">Go back</a>
							</p>
						</div>
					</div>

					<div v-if="tab == 'memberInteractionLimits'">
						<div v-if="results.length > 0" class="group-members-component-paginated-list">
							<p class="font-weight-bold mb-1">Interaction Limits</p>

							<div v-for="(member, index) in results" class="media align-items-center py-3">
								<a :href="member.url" class="text-dark text-decoration-none">
                                    <img
                                        :src="member?.avatar"
                                        width="56"
                                        height="56"
                                        class="rounded-circle border mr-2"
                                        onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'"
                                    />
								</a>

								<div class="media-body">
									<p class="lead font-weight-bold mb-0">
										<a :href="member.url" class="text-dark text-decoration-none">{{member.username}}</a>
										<span v-if="member.role == 'founder'" class="member-label rounded ml-1">Admin</span>
									</p>
									<p class="text-muted mb-0">Member since {{formatDate(member.joined)}}</p>
								</div>
								<a
									class="btn btn-light lead font-weight-bolder px-3 border"
									:href="'/account/direct/t/' + member.id">
									<i class="far fa-comment-dots mr-1"></i> Message
								</a>
								<b-dropdown
									v-if="isAdmin"
									toggle-class="btn btn-light font-weight-bold px-3 border ml-2"
									toggle-tag="a"
									:lazy="true"
									right
									no-caret>
									<template #button-content>
										<i class="fas fa-ellipsis-h"></i>
									</template>
									<b-dropdown-item :href="member.url">View Profile</b-dropdown-item>
									<b-dropdown-item :href="'/account/direct/t/'+member.id">Send Message</b-dropdown-item>
									<b-dropdown-item>View Activity</b-dropdown-item>
									<b-dropdown-divider></b-dropdown-divider>
									<b-dropdown-item link-class="font-weight-bold" @click.prevent="openInteractionLimitModal(member)">Limit interactions</b-dropdown-item>
									<b-dropdown-item link-class="font-weight-bold text-danger">Remove from group</b-dropdown-item>
								</b-dropdown>
							</div>
							<p class="text-center mt-5">
								<a href="#" class="font-weight-bold" @click.prevent="backFromSearch">Go back</a>
							</p>
						</div>
						<div v-else class="text-center text-muted mt-3">
							<p class="lead">No results found.</p>
							<p>
								<a href="#" class="font-weight-bold" @click.prevent="backFromSearch">Go back</a>
							</p>
						</div>
					</div>

					<div v-if="tab == 'review'">
						<div v-if="reviewsLoaded">

							<div class="group-members-component-paginated-list">
								<div class="d-flex justify-content-between align-items-center">
									<div class="d-flex">
										<button class="btn btn-link btn-sm mr-2" @click="backFromReview">
											<i class="far fa-chevron-left fa-lg"></i>
										</button>

										<p class="font-weight-bold mb-0">Review Membership Applicants</p>
									</div>
								</div>
								<hr>

								<div v-for="(member, index) in applicants" class="media align-items-center py-3">
									<a :href="member.url" class="text-dark text-decoration-none">
                                        <img
                                            :src="member?.avatar"
                                            width="56"
                                            height="56"
                                            class="rounded-circle border mr-2"
                                            onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'"
                                        />
									</a>

									<div class="media-body">
										<p class="lead font-weight-bold mb-0">
											<a :href="member.url" class="text-dark text-decoration-none" :title="member.acct" data-toggle="tooltip">{{member.username}}</a>
											<span v-if="!member.local" class="remote-label rounded ml-1">Remote</span>
										</p>
										<p class="text-muted mb-0 small">
											<span>
												{{ member.followers_count }} Followers
											</span>

											<span class="mx-1">·</span>

											<span>
												Joined {{formatDate(member.created_at)}}
											</span>
										</p>
									</div>

									<button
										type="button"
										class="btn btn-light lead font-weight-bolder px-3 border"
										@click="handleApplicant(index, 'ignore')">
										<i class="far fa-times mr-1"></i> Ignore
									</button>

									<button
										type="button"
										class="btn btn-danger lead font-weight-bolder px-3 border"
										@click="handleApplicant(index, 'reject')">
										<i class="far fa-times mr-1"></i> Reject
									</button>

									<button
										type="button"
										class="btn btn-primary lead font-weight-bolder px-3 border"
										@click="handleApplicant(index, 'approve')">
										<i class="far fa-check mr-1"></i> Approve
									</button>
								</div>

								<button
									v-if="applicantsCanLoadMore"
									class="btn btn-light font-weight-bold btn-block"
									@click="loadMoreApplicants"
									:disabled="loadingMoreApplicants">
									Load More
								</button>

								<div v-if="!applicants || !applicants.length">
									<p class="text-center lead mb-0">No content found</p>
									<p class="text-center mb-0">
										<a class="font-weight-bold" href="#" @click.prevent="backFromReview">Go back</a>
									</p>
								</div>
							</div>

						</div>

						<div v-else class="d-flex align-items-center justify-content-center" style="min-height: 100px;">
							<b-spinner variant="muted"  />
						</div>
					</div>

					<div v-if="tab == 'loading'" class="d-flex align-items-center justify-content-center" style="min-height: 100px;">
						<b-spinner variant="muted"  />
					</div>
				</div>
			</div>
		</div>

		<group-interaction-limits-modal
			ref="interactionModal"
			:group="group"
			:profile="activeProfile"
			/>

	</div>
</template>

<script type="text/javascript">
	import InteractionModal from './MemberLimitInteractionsModal.vue';

	export default {
		props: {
			group: {
				type: Object
			},

			profile: {
				type: Object
			},

			requestCount: {
				type: Number
			},

			isAdmin: {
				type: Boolean
			}
		},

		components: {
			'group-interaction-limits-modal': InteractionModal
		},

		data() {
			return {
				members: [],
				mutual: [],
				results: [],
				page: 1,
				hasNextPage: true,
				tab: 'list',
				memberSearchModel: null,
				activeProfile: undefined,
				hideHeader: false,
				reviewsLoaded: false,
				applicants: [],
				applicantsPage: 1,
				applicantsCanLoadMore: false,
				loadingMoreApplicants: false
			}
		},

		mounted() {
			this.fetchMembers();
			let u = new URLSearchParams(window.location.search);

			if(this.group.self.role == 'founder') {
				this.isAdmin = true;

				if(u.has('a')) {
					if(u.get('a') == 'il') {
						this.tab = 'loading';
						let pid = u.get('pid');
						axios.get('/api/v0/groups/members/get', {
							params: {
								gid: this.group.id,
								pid: pid
							}
						})
						.then(res => {
							this.results.push(res.data);
							this.tab = 'memberInteractionLimits';
							this.openInteractionLimitModal(res.data);
						});
					}

					if(u.get('a') == 'review') {
						this.reviewApplicants();
					}
				}
			} else if (u.has('a')) {
				history.pushState(null, null, `/groups/${this.group.id}/members`);
			}

		},

		watch: {
			memberSearchModel: function(val) {
				this.handleSearch();
			}
		},

		methods: {
			fetchMembers() {
				axios.get('/api/v0/groups/members/list', {
					params: {
						gid: this.group.id,
						page: this.page
					}
				}).then(res => {
					let data = res.data.filter(m => {
						return m.id != this.profile.id;
					});
					this.members = data.filter(m => {
						return !m.following
					});
					this.mutual = data.filter(m => {
						return m.following
					});
					this.page++;
					this.$nextTick(() => {
						$('[data-toggle="tooltip"]').tooltip()
					});
				}).catch(err => {
					console.log(res.response);
				})
			},

			loadNextPage() {
				axios.get('/api/v0/groups/members/list', {
					params: {
						gid: this.group.id,
						page: this.page
					}
				}).then(res => {
					if(res.data.length == 0) {
						this.hasNextPage = false;
						return;
					}

					let data = res.data.filter(m => {
						return m.id != this.profile.id;
					});
					this.members.push(...data.filter(m => {
						return !m.following
					}));
					this.mutual.push(...data.filter(m => {
						return m.following
					}));
					this.page++;
					this.$nextTick(() => {
						$('[data-toggle="tooltip"]').tooltip()
					});
				}).catch(err => {
					console.log(err.response);
				})
			},

			follow(index) {
				axios.post('/i/follow', {
					item: this.members[index].id
				}).then(res => {
					this.members[index].following = !this.members[index].following;
				}).catch(err => {
					console.log(err.response);
				})
			},

			formatDate(ts) {
				return new Date(ts).toDateString();
			},

			handleSearch() {
				if(!this.memberSearchModel || this.memberSearchModel == "" || this.memberSearchModel.length == 0) {
					this.tab == 'list';
					this.memberSearchModel = null;
					return;
				}

				this.tab = 'search';
				this.results = this.members.concat(this.mutual).filter(profile => {
					return profile.username.includes(this.memberSearchModel);
				});

				// if(this.results.length) {
					this.tab = 'results';
				// }
			},

			backFromSearch() {
				event.currentTarget.blur();
				this.memberSearchModel = null;
				this.tab = 'list';
				history.pushState(null, null, `/groups/${this.group.id}/members`);
			},

			openInteractionLimitModal(member) {
				this.activeProfile = member;
				setTimeout(() => {
					this.$refs.interactionModal.open();
				}, 500);
			},

			reviewApplicants() {
				this.hideHeader = true;
				this.tab = 'review';
				history.pushState(null, null, `/groups/${this.group.id}/members?a=review`);

				axios.get('/api/v0/groups/members/requests', {
					params: {
						gid: this.group.id
					}
				})
				.then(res => {
					this.applicants = res.data;
					this.reviewsLoaded = true;
					this.applicantsPage = 2;
					this.applicantsCanLoadMore = res.data.length == 10;
				})
			},

			handleApplicant(index, action) {
				event.currentTarget.blur();

				if(action == 'ignore') {
					this.applicants.splice(index, 1);
					return;
				}

				this.tab = 'loading';

				if(!window.confirm('Are you sure you want to perform this action?')) {
					return;
				}

				axios.post('/api/v0/groups/members/request', {
					gid: this.group.id,
					pid: this.applicants[index].id,
					action: action
				})
				.then(res => {
					this.applicants.splice(index, 1);
					this.tab = 'review';
					this.$emit('decrementrc');
					if(action == 'approve') {
						this.$emit('incrementMemberCount');
					}
				})
			},

			backFromReview() {
				event.currentTarget.blur();
				this.memberSearchModel = null;
				this.tab = 'list';
				this.hideHeader = false;
				history.pushState(null, null, `/groups/${this.group.id}/members`);
			},

			loadMoreApplicants() {
				this.loadingMoreApplicants = true;

				axios.get('/api/v0/groups/members/requests', {
					params: {
						gid: this.group.id,
						page: this.applicantsPage
					}
				})
				.then(res => {
					this.applicants.push(...res.data);
					this.applicantsCanLoadMore = res.data.length == 10;
					this.applicantsPage++;
					this.loadingMoreApplicants = false;
				})
			}
		}
	}
</script>

<style lang="scss">
	.group-members-component {
		min-height: 100vh;

		.member-label {
			padding: 2px 5px;
			font-size: 12px;
			color: rgba(75, 119, 190, 1);
			background: rgba(137, 196, 244, 0.2);
			border: 1px solid rgba(137, 196, 244, 0.3);
			font-weight: 400;
			text-transform: capitalize;
		}

		.remote-label {
			padding: 2px 5px;
			font-size: 12px;
			color: #B45309;
			background: #FEF3C7;
			border: 1px solid #FCD34D;
			font-weight: 400;
			text-transform: capitalize;
		}
	}
</style>