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

<template>
	<ul class="member-list">
		<li v-if="Object.values(members).length > 0" v-for="(entry, i) in members" :key="i" class="member-item">
			<div @click="deleteMember(entry)" class="terminate">
				<x-icon size="14" class="close-icon" />
			</div>
			<div class="member-preview">
				<div class="avatar">
					<img v-if="entry.avatar" :src="entry.avatar" alt="avatar">
					<TypedAvatar v-else :size="38" :letter="entry.email.substr(0, 1)" :color="entry.color"/>
				</div>
				<div v-if="entry.type === 'member'" class="info">
					<b class="title">{{ entry.name }}</b>
					<span class="subtitle">{{ entry.email }}</span>
				</div>
				<div v-if="entry.type === 'invitation'" class="info">
					<b class="title">{{ entry.email }}</b>
					<span v-if="entry.id" class="subtitle">{{ $t('Waiting for accept invitation...') }}</span>
				</div>
			</div>
			<div class="action">
				<PermissionToggleButton @input="updateMemberPermission(entry, $event)" :item="entry" />
			</div>
		</li>
	</ul>
</template>

<script>
	import PermissionToggleButton from "./PermissionToggleButton"
	import TypedAvatar from "../../Others/TypedAvatar"
	import {XIcon} from 'vue-feather-icons'

	export default {
		name: "TeamList",
		props: [
			'value',
		],
		components: {
			PermissionToggleButton,
			TypedAvatar,
			XIcon,
		},
		data() {
			return {
				members: undefined
			}
		},
		methods: {
			updateMemberPermission(member, value) {
				this.members.map(e => e === member ? e.permission = value : e)

				this.emitMembers()
			},
			deleteMember(member) {
				this.members = this.members.filter(m => m !== member)

				this.emitMembers()
			},
			emitMembers() {
				this.$emit('input', this.members)
			}
		},
		created() {
			this.members = this.value
		}
	}
</script>

<style lang="scss" scoped>
    @import "resources/sass/vuefilemanager/_inapp-forms.scss";
	@import '/resources/sass/vuefilemanager/_forms';

	.member-list {
		max-height: 270px;
		overflow-y: scroll;
	}

	.member-item {
		display: flex;
		align-items: center;
		padding: 8px 0;

		.terminate {
			line-height: 0;
			cursor: pointer;

			line {
				color: $light_text;
			}
		}

		.member-preview {
			display: flex;
			align-items: center;

			.avatar {
				padding: 0 12px;

				img {
					width: 38px;
					height: 38px;
					border-radius: 8px;
					object-fit: cover;
					display: block;
				}
			}

			.info {

				.title {
					@include font-size(15);
					font-weight: 700;
					display: block;
					max-width: 190px;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.subtitle {
					@include font-size(12);
					color: $text-muted;
					display: block;
				}
			}
		}

		.action {
			margin-left: auto;
		}
	}

	.dark-mode {

		.member-item .info .email {
			color: $dark_mode_text_secondary;
		}
	}
</style>