60 lines
1.3 KiB
Vue
60 lines
1.3 KiB
Vue
<template>
|
|
<div class="schoolclass">
|
|
<h2 class="schoolclass__name">{{name}}</h2>
|
|
<div class="schoolclass__members schoolclass-members">
|
|
<ul class="schoolclass-members__list members-list">
|
|
<li v-for="user in users" :key="user.id" class="members-list__item">
|
|
<p class="member-item"><span class="member-item__name">{{fullName(user)}}</span> <span class="member-item__role">{{role(user)}}</span></p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
props: ['users', 'name'],
|
|
methods: {
|
|
fullName (user) {
|
|
return `${user.firstName} ${user.lastName}`;
|
|
},
|
|
role ({permissions}) {
|
|
return permissions.indexOf('users.can_manage_school_class_content') > -1 ? 'Lehrperson' : '';
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "@/styles/_variables.scss";
|
|
|
|
$height: 52px;
|
|
|
|
.members-list {
|
|
&__item {
|
|
line-height: $height;
|
|
height: $height;
|
|
border-bottom: 1px solid $color-silver-dark;
|
|
}
|
|
}
|
|
|
|
.member-item {
|
|
|
|
line-height: $height;
|
|
height: $height;
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
&__name {
|
|
font-family: $sans-serif-font-family;
|
|
font-weight: $font-weight-bold;
|
|
}
|
|
|
|
&__role {
|
|
padding-right: $medium-spacing;
|
|
}
|
|
}
|
|
</style>
|