From c8f6a27c571e51bcc0ac0120968e6bc9a20c8dd7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thea=20Sch=C3=B6bl?= <dev@theaninova.de>
Date: Fri, 21 Oct 2022 16:03:49 +0200
Subject: [PATCH] fix: dashboard next unit structural directive causing
 animation issues

---
 .../dashboard/dashboard.component.html        | 30 ++++++++++---------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/src/app/modules/dashboard/dashboard.component.html b/src/app/modules/dashboard/dashboard.component.html
index 0c3cb0ae..67a0b543 100644
--- a/src/app/modules/dashboard/dashboard.component.html
+++ b/src/app/modules/dashboard/dashboard.component.html
@@ -25,26 +25,28 @@
     <ion-icon size="40" weight="300" name="grid_view"></ion-icon>
     <ion-label>{{ 'schedule.recurring' | translate }}</ion-label>
   </a>
+  <!-- Avoid structural directives here, they might interfere with the collapse animation -->
   <a
-    *ngIf="nextEvent && nextEvent.event"
-    [routerLink]="['/data-detail', nextEvent.event.uid]"
+    [routerLink]="
+      nextEvent?.event
+        ? ['/data-detail', nextEvent!.event.uid]
+        : ['/schedule/recurring']
+    "
     class="schedule-item-button"
   >
     <ion-label>{{ 'dashboard.schedule.title' | translate }}</ion-label>
     <ion-label>
-      {{ nextEvent.dates | nextDateInList | amDateFormat: 'll, HH:mm' }}
-      {{ 'timeSuffix' | translate }}
+      {{
+        nextEvent?.event
+          ? (nextEvent!.dates | nextDateInList | amDateFormat: 'll, HH:mm')
+          : ('dashboard.schedule.noEvent' | translate)
+      }}
     </ion-label>
-    <ion-label>{{ nextEvent.event.name }}</ion-label>
-  </a>
-  <a
-    *ngIf="!nextEvent || !nextEvent.event"
-    [routerLink]="['/schedule/recurring']"
-    class="schedule-item-button"
-  >
-    <ion-label>{{ 'dashboard.schedule.title' | translate }}</ion-label>
-    <ion-label>{{ 'dashboard.schedule.noEvent' | translate }}</ion-label>
-    <ion-label>{{ 'dashboard.schedule.noEventLink' | translate }}</ion-label>
+    <ion-label>{{
+      nextEvent?.event
+        ? nextEvent!.event.name
+        : ('dashboard.schedule.noEventLink' | translate)
+    }}</ion-label>
   </a>
 </div>