added TypedAvatar.vue component

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

@@ -3,7 +3,7 @@
 		<div class="info">
 			<b class="title">The Team Project</b>
 			<span class="subtitle">Last update a week ago</span>
-			<TeamMembersPreview :folder="clipboard[0]" class="members" />
+			<TeamMembersPreview :folder="clipboard[0]" :avatar-size="32" class="members" />
 		</div>
 	</div>
 </template>

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

@@ -6,7 +6,8 @@
 			</div>
 			<div class="member-preview">
 				<div class="avatar">
-					<img :src="entry.type === 'member' ? entry.avatar : '/assets/images/default-avatar.png'" alt="avatar">
+					<img v-if="entry.avatar" :src="entry.avatar" alt="avatar">
+					<TypedAvatar v-else :size="38" :letter="entry.email.substr(0, 1)" />
 				</div>
 				<div v-if="entry.type === 'member'" class="info">
 					<b class="title">{{ entry.name }}</b>
@@ -25,7 +26,8 @@
 </template>
 
 <script>
-	import PermissionToggleButton from "./PermissionToggleButton";
+	import PermissionToggleButton from "./PermissionToggleButton"
+	import TypedAvatar from "../../Others/TypedAvatar"
 	import {XIcon} from 'vue-feather-icons'
 
 	export default {
@@ -35,6 +37,7 @@
 		],
 		components: {
 			PermissionToggleButton,
+			TypedAvatar,
 			XIcon,
 		},
 		data() {

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

@@ -3,7 +3,7 @@
 		<div v-if="! clipboard[0]" class="empty-state">
 			<span>Not selected</span>
 		</div>
-		<TeamMembersPreview v-else :folder="clipboard[0]" :limit="true" class="widget" />
+		<TeamMembersPreview v-else :folder="clipboard[0]" :limit="true" :avatar-size="32" class="widget" />
 	</div>
 </template>
 

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

@@ -4,21 +4,26 @@
 			{{ membersCount > 3 ? '3+' : membersCount }}
 		</span>
 		<div class="members">
-			<div v-for="member in members" class="member-preview">
+			<div v-for="member in members" :key="member.data.id" :title="member.data.attributes.email" 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">
+				<TypedAvatar v-else :size="avatarSize" :letter="member.data.attributes.email.substr(0, 1)" />
 			</div>
 		</div>
 	</div>
 </template>
 
 <script>
-export default {
+	import TypedAvatar from "../../Others/TypedAvatar";
+	export default {
 		name: "TeamMembersPreview",
 		props: [
 			'folder',
 			'limit',
+			'avatarSize'
 		],
+		components: {
+			TypedAvatar,
+		},
 		computed: {
 			membersCount() {
 				return this.folder.data.relationships.members.data.length + this.folder.data.relationships.invitations.data.length