TeamMembersPreview refactoring

resources/js/components/Teams/Components/TeamMembersPreview.vue

@@ -1,22 +1,39 @@
 <template>
 	<div class="team-folder">
-		<span v-if="count" class="member-count">
-			{{ count }}
+		<span v-if="limit" class="member-count">
+			{{ membersCount > 3 ? '3+' : membersCount }}
 		</span>
 		<div class="members">
-			<img v-for="member in members" :src="member" class="member" alt="">
+			<div v-for="member in members" class="member-preview">
+				<img v-if="member.data.attributes.avatar" :src="member.data.attributes.avatar" class="member" alt="avatar">
+				<img v-else src="/assets/images/default-avatar.png" class="member" alt="avatar">
+			</div>
 		</div>
 	</div>
 </template>
 
 <script>
 export default {
-	name: "TeamMembersPreview",
-	props: [
-		'members',
-		'count',
-	]
-}
+		name: "TeamMembersPreview",
+		props: [
+			'folder',
+			'limit',
+		],
+		computed: {
+			membersCount() {
+				return this.folder.data.relationships.members.data.length + this.folder.data.relationships.invitations.data.length
+			},
+			members() {
+				let allMembers = this.folder.data.relationships.members.data.concat(this.folder.data.relationships.invitations.data)
+
+				if (this.limit) {
+					return allMembers.slice(0, 3)
+				}
+
+				return allMembers
+			}
+		}
+	}
 </script>
 
 <style lang="scss" scoped>
@@ -32,22 +49,28 @@ export default {
 			color: $text-muted;
 			margin-right: 3px;
 			opacity: 0.7;
+			min-width: 14px;
+			text-align: left;
 		}
 
 		.members {
+			display: flex;
+
+			.member-preview {
+				margin-left: -10px;
+
+				&:first-child {
+					margin-left: 0;
+				}
+			}
 
 			.member {
 				width: 32px;
 				height: 32px;
 				object-fit: cover;
 				border-radius: 10px;
-				margin-left: -10px;
 				border: 2px solid white;
 				vertical-align: middle;
-
-				&:first-child {
-					margin-left: 0;
-				}
 			}
 		}
 	}