skillbox/client/src/components/profile/GroupList.vue

<template>
  <div class="group-list">
    <h1 class="group-list__header" data-cy="group-list-title">
      {{ title }}
    </h1>
    <router-link
      :to="showCodeRoute"
      class="group-list__code-link button button--primary"
      data-cy="show-code-button"
      v-if="showCode && !readOnly"
    >
      Zugangscode anzeigen
    </router-link>

    <div class="group-list__content">
      <h2 class="group-list__heading">
        <span class="group-list__name" data-cy="group-list-name">{{ name }}</span>
        <edit-group-name v-if="canEdit && !readOnly" @edit="$emit('edit')" />
      </h2>
      <div class="group-list__members group-list-members">
        <ul class="group-list-members__list simple-list simple-list--active" data-cy="active-class-members-list">
          <li
            class="simple-list__item member-item"
            data-cy="active-member"
            v-for="member in activeMembers"
            :key="member.id"
          >
            <span class="member-item__name">{{ fullName(member) }}</span>
            <span class="member-item__role">{{ role(member) }} </span>
            <a
              class="member-item__action simple-list__action"
              data-cy="leave-group"
              v-if="member.isMe && enableDeactivate"
              @click="$emit('leave', member)"
              >Verlassen</a
            >
            <a
              class="member-item__action simple-list__action"
              data-cy="remove-from-class"
              v-if="canEdit && enableDeactivate && !member.isMe"
              @click="$emit('remove', member)"
              >Deaktivieren</a
            >
          </li>
        </ul>
        <template v-if="inactiveMembers.length">
          <h3 class="group-list__inactive-heading">Deaktivierte Personen</h3>
          <ul data-cy="inactive-class-members-list" class="simple-list simple-list--inactive">
            <li
              class="simple-list__item member-item"
              data-cy="inactive-member"
              v-for="member in inactiveMembers"
              :key="member.id"
            >
              <span class="member-item__name">{{ fullName(member) }}</span>
              <span class="member-item__role">{{ role(member) }}</span>
              <a
                class="member-item__action simple-list__action"
                data-cy="add-to-class"
                v-if="canEdit && enableDeactivate"
                @click="$emit('add', member)"
                >Aktivieren</a
              >
              <a
                class="member-item__action simple-list__action"
                data-cy="rejoin-class"
                v-if="member.isMe && member.isTeacher"
                @click="$emit('add', member)"
                >Aktivieren</a
              >
            </li>
          </ul>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import EditGroupName from '@/components/profile/EditGroupName';

export default {
  // props: ['active-members', 'inactive-members', 'name', 'canEdit'],
  props: {
    title: {
      type: String,
      default: '',
    },
    showCode: {
      type: Boolean,
      default: false,
    },
    showCodeRoute: {
      type: Object,
      default: () => ({}),
    },
    readOnly: {
      type: Boolean,
      default: false,
    },
    activeMembers: {
      type: Array,
      default: () => [],
    },
    inactiveMembers: {
      type: Array,
      default: () => [],
    },
    name: {
      type: String,
      default: '',
    },
    canEdit: {
      type: Boolean,
      default: false,
    },
    enableDeactivate: {
      type: Boolean,
      default: false,
    },
  },

  components: {
    EditGroupName,
  },

  methods: {
    fullName(member) {
      return `${member.firstName} ${member.lastName}`;
    },
    role({ isTeacher }) {
      if (isTeacher === undefined) {
        return '';
      }
      return isTeacher ? 'Lehrperson' : 'Schüler';
    },
  },
};
</script>

<style scoped lang="scss">
@import '~styles/helpers';

.group-list {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  grid-template-areas: 'h b' 'c c';

  &__header {
    grid-area: h;
  }

  &__code-link {
    grid-area: b;
    justify-self: end;
    align-self: center;
  }

  &__content {
    grid-area: c;
    width: 100%;
    margin-bottom: $large-spacing;
  }

  &__inactive-heading {
    @include heading-4;
    margin-bottom: $small-spacing;
  }

  &__name {
    @include heading-2;
  }
}

.member-item {
  &__name {
    font-family: $sans-serif-font-family;
    font-weight: $font-weight-bold;
    flex: 2 1 auto;
  }

  &__role {
    @include desktop {
      flex: 0 1 110px;
      text-align: right;
    }
  }

  &__action {
    @include desktop {
      flex: 0 1 110px;
      padding-left: $large-spacing;
    }
  }
}
</style>