From b7c996dab2d4c9dcfe104dd27a59a872b8631308 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Sun, 22 Mar 2020 23:49:09 +0100
Subject: [PATCH] Only show inactive users title when there are such users

---
 client/src/components/profile/ClassList.vue | 39 ++++++++++++---------
 1 file changed, 22 insertions(+), 17 deletions(-)

diff --git a/client/src/components/profile/ClassList.vue b/client/src/components/profile/ClassList.vue
index 4c25025a..558e7da8 100644
--- a/client/src/components/profile/ClassList.vue
+++ b/client/src/components/profile/ClassList.vue
@@ -1,6 +1,8 @@
 <template>
   <div class="school-class">
-    <h2 class="school-class__heading"><span class="school-class__name" data-cy="school-class-name">{{name}}</span> <edit-class-name @edit="editClassName"></edit-class-name></h2>
+    <h2 class="school-class__heading"><span class="school-class__name" data-cy="school-class-name">{{name}}</span>
+      <edit-class-name @edit="editClassName"></edit-class-name>
+    </h2>
     <div class="school-class__members school-class-members">
       <ul class="school-class-members__list simple-list simple-list--active" data-cy="active-class-members-list">
         <li
@@ -17,22 +19,25 @@
             @click="$emit('remove', member)">Deaktivieren</a>
         </li>
       </ul>
-      <h3 class="school-class__inactive-heading">Deaktivierte Benutzer</h3>
-      <ul data-cy="inactive-class-members-list" class="simple-list simple-list--inactive">
-        <li
-          class="simple-list__item member-item"
-          data-cy="school-class-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="teacher"
-            @click="$emit('add', member)">Aktivieren</a>
-        </li>
-      </ul>
+      <template v-if="inactiveMembers.length">
+        <h3 class="school-class__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="school-class-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="teacher"
+              @click="$emit('add', member)">Aktivieren</a>
+          </li>
+        </ul>
+      </template>
+
     </div>
   </div>
 </template>