pixelfed/resources/assets/components/groups/GroupProfile.vue

<template>
	<div class="group-profile-component w-100 h-100">
		<div class="bg-white mb-3 border-bottom">
			<div class="container-xl header">
				<div class="header-jumbotron"></div>

				<div class="header-profile-card">
					<img :src="profile.avatar" class="avatar" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'">
					<p class="name">
						{{ profile.display_name }}
					</p>
					<p class="username text-muted">
						<span v-if="profile.local">&commat;{{ profile.username }}</span>
						<span v-else>{{ profile.acct }}</span>

						<span v-if="profile.is_admin" class="text-danger ml-1" title="Site administrator" data-toggle="tooltip" data-placement="bottom"><i class="far fa-users-crown"></i></span>
					</p>
				</div>
				<!-- <hr> -->
				<div class="header-navbar">
					<div></div>

					<div>
						<a
							v-if="currentProfile.id === profile.id"
							class="btn btn-light font-weight-bold mr-2"
							href="/settings/home">
							<i class="fas fa-edit mr-1"></i> Edit Profile
						</a>

						<a
							v-if="profile.relationship.following"
							class="btn btn-primary font-weight-bold mr-2"
							:href="profile.url">
							<i class="far fa-comment-alt-dots mr-1"></i> Message
						</a>

						<a
							v-if="profile.relationship.following"
							class="btn btn-light font-weight-bold mr-2"
							:href="profile.url">
							<i class="fas fa-user-check mr-1"></i> {{ profile.relationship.followed_by ? 'Friends' : 'Following' }}
						</a>

						<a
							v-if="!profile.relationship.following"
							class="btn btn-light font-weight-bold mr-2"
							:href="profile.url">
							<i class="fas fa-user mr-1"></i> View Main Profile
						</a>

						<div class="dropdown">
							<button class="btn btn-light font-weight-bold dropdown-toggle" type="button" id="amenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
								<i class="fas fa-ellipsis-h"></i>
							</button>
							<div class="dropdown-menu dropdown-menu-right" aria-labelledby="amenu">
								<a v-if="currentProfile.id != profile.id" class="dropdown-item font-weight-bold" :href="`/i/report?type=user&id=${profile.id}`">Report</a>
								<a v-if="currentProfile.id == profile.id" class="dropdown-item font-weight-bold" href="#">Leave Group</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="w-100 h-100 group-profile-feed">
			<div class="container-xl">
				<div class="row">
					<div class="col-12 col-md-5">
						<div class="card card-body shadow-sm infolet">
							<h5 class="font-weight-bold mb-3">Intro</h5>
							<div v-if="!profile.local" class="media mb-3 align-items-center">
								<div class="media-icon">
									<i class="far fa-globe" title="User is from a remote server" data-toggle="tooltip" data-placement="bottom"></i>
								</div>
								<div class="media-body">
									Remote member from <strong>{{ profile.acct.split('@')[1] }}</strong>
								</div>
							</div>
							<!-- <div v-if="profile.note.length" class="media mb-3 align-items-center">
								<i class="far fa-book-user fa-lg text-lighter mr-3" title="User bio" data-toggle="tooltip" data-placement="bottom"></i>
								<div class="media-body">
									<span v-html="profile.note"></span>
								</div>
							</div> -->
							<div class="media align-items-center">
								<div class="media-icon">
									<i class="fas fa-users" title="User joined group on this date" data-toggle="tooltip" data-placement="bottom"></i>
								</div>
								<div class="media-body">
									{{ roleTitle }} of <strong>{{ group.name }}</strong> since {{ profile.group.joined }}
								</div>
							</div>
						</div>

						<div v-if="canIntersect" class="card card-body shadow-sm infolet">
							<h5 class="font-weight-bold mb-3">Things in Common</h5>

							<div v-if="commonIntersects.friends.length" class="media mb-3 align-items-center" v-once>
								<div class="media-icon">
									<i class="far fa-user-friends"></i>
								</div>
								<div class="media-body">
									{{ commonIntersects.friends_count }} mutual friend<span v-if="commonIntersects.friends.length > 1">s</span> including
									<span v-for="(friend, index) in commonIntersects.friends"><a :href="friend.url" class="text-dark font-weight-bold">{{ friend.acct }}</a><span v-if="commonIntersects.friends.length > index + 1">, </span><span v-else> </span></span>
									<!-- <a href="#" class="text-dark font-weight-bold">dansup</a>, <a href="#" class="text-dark font-weight-bold">admin</a> and 1 other -->
								</div>
							</div>

							<div class="media mb-3 align-items-center">
								<div class="media-icon">
									<i class="fas fa-home"></i>
								</div>
								<div class="media-body">
									Lives in <strong>Canada</strong>
								</div>
							</div>

							<div v-if="commonIntersects.groups.length" class="media mb-3 align-items-center">
								<div class="media-icon">
									<i class="fas fa-users"></i>
								</div>
								<div class="media-body">
									Also member of <a :href="commonIntersects.groups[0].url" class="text-dark font-weight-bold">{{ commonIntersects.groups[0].name }}</a> and {{ commonIntersects.groups_count }} other groups
								</div>
							</div>

							<div v-if="commonIntersects.topics.length" class="media mb-0 align-items-center">
								<div class="media-icon">
									<i class="far fa-thumbs-up fa-lg text-lighter"></i>
								</div>
								<div class="media-body">
									Also interested in topics containing
									<span v-for="(topic, index) in commonIntersects.topics">
										<span v-if="commonIntersects.topics.length - 1 == index"> and </span><a :href="topic.url" class="font-weight-bold text-dark">#{{ topic.name }}</a><span v-if="commonIntersects.topics.length > index + 2">, </span>
									</span> hashtags
								</div>
							</div>
						</div>
					</div>

					<div class="col-12 col-md-7">
						<div class="card card-body shadow-sm">
							<h5 class="font-weight-bold mb-0">Group Posts</h5>
						</div>

						<div v-if="feedEmpty" class="pt-5 text-center">
							<h5>No New Posts</h5>
							<p>{{ profile.username }} hasn't posted anything yet in <strong>{{ group.name }}</strong>.</p>

							<a :href="group.url" class="font-weight-bold">Go Back</a>
						</div>

						<div v-if="feedLoaded" class="mt-2">
							<group-status
								v-for="(status, index) in feed"
								:key="'gps:' + status.id"
								:permalinkMode="true"
								:showGroupChevron="true"
								:group="group"
								:prestatus="status"
								:profile="profile"
								:group-id="group.id" />

							<div v-if="feed.length >= 1" :distance="800">
								<infinite-loading @infinite="infiniteFeed">
									<div slot="no-more"></div>
									<div slot="no-results"></div>
								</infinite-loading>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script type="text/javascript">
	import GroupStatus from '@/groups/partials/GroupStatus.vue';

	export default {
		props: {
			pg: {
				type: String
			},

			pp: {
				type: String
			}
		},

		components: {
			'group-status': GroupStatus
		},

		data() {
			return {
				currentProfile: {},
				roleTitle: 'Member',
				group: {},
				profile: {},
				feed: [],
				ids: [],
				feedLoaded: false,
				feedEmpty: false,
				page: 1,
				canIntersect: false,
				commonIntersects: []
			}
		},

		beforeMount() {
			$('body').css('background-color', '#f0f2f5');
			this.group = JSON.parse(this.pg);
			this.profile = JSON.parse(this.pp);

			if(this.profile.group.role == 'founder') {
				this.roleTitle = 'Admin';
			}
		},

		mounted() {
			axios.get('/api/pixelfed/v1/accounts/verify_credentials')
			.then(res => {
				this.currentProfile = res.data;
				this.fetchInitialFeed();
				if(res.data.id != this.profile.id) {
					this.fetchCommonIntersections();
				}
			})
			this.$nextTick(() => {
				$('[data-toggle="tooltip"]').tooltip();
			});
		},

		methods: {
			fetchInitialFeed() {
				axios.get(`/api/v0/groups/${this.group.id}/user/${this.profile.id}/feed`)
				.then(res => {
					this.feed = res.data.filter(s => {
						return s.pf_type != 'reply:text' || s.account.id != this.profile.id;
					});
					this.feedLoaded = true;
					this.feedEmpty = this.feed.length == 0;
					this.page++;
				});
			},

			infiniteFeed($state) {
				if(this.feed.length == 0) {
					$state.complete();
					return;
				}

				axios.get(`/api/v0/groups/${this.group.id}/user/${this.profile.id}/feed`, {
					params: {
						page: this.page
					},
				}).then(res => {
					if (res.data.length) {
						let data = res.data.filter(s => {
							return s.pf_type != 'reply:text' || s.account.id != this.profile.id;
						});
						let self = this;
						data.forEach(d => {
							if(self.ids.indexOf(d.id) == -1) {
								self.ids.push(d.id);
								self.feed.push(d);
							}
						});
						$state.loaded();
						this.page++;
					} else {
						$state.complete();
					}
				});
			},

			fetchCommonIntersections() {
				axios.get('/api/v0/groups/member/intersect/common', {
					params: {
						gid: this.group.id,
						pid: this.profile.id
					}
				}).then(res => {
					this.commonIntersects = res.data;
					this.canIntersect = res.data.groups.length || res.data.topics.length;
				});

			}
		}
	}
</script>

<style lang="scss">
	.group-profile-component {
		background-color: #f0f2f5;

		.header {
			&-jumbotron {
				background-color: #F3F4F6;
				height: 320px;
				border-bottom-left-radius: 20px;
				border-bottom-right-radius: 20px;
			}

			&-profile-card {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.avatar {
					width: 170px;
					height: 170px;
					border-radius: 50%;
					margin-top: -150px;
					margin-bottom: 20px;
				}

				.name {
					font-size: 30px;
					line-height: 30px;
					font-weight: 700;
					text-align: center;
					margin-bottom: 6px;
				}

				.username {
					font-size: 16px;
					font-weight: 500;
					text-align: center;
				}
			}

			&-navbar {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 60px;
				border-top: 1px solid #F3F4F6;

				.dropdown {
					display: inline-block;

					&-toggle:after {
						display: none;
					}
				}
			}
		}

		.group-profile-feed {
			min-height: 500px;
		}

		.infolet {
			margin-bottom: 1rem;

			.media {
				&-icon {
					display: flex;
					justify-content: center;
					width: 30px;
					margin-right: 10px;

					i {
						font-size: 1.1rem;
						color: #D1D5DB !important;
					}
				}
			}
		}

		.btn-light {
			border-color: #F3F4F6;
		}
	}
</style>