From 22e70ae92b35578b559e6644dccb8d4bfd06af1e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thea=20Sch=C3=B6bl?= <wulkanat@gmail.com>
Date: Thu, 6 Apr 2023 08:46:01 +0000
Subject: [PATCH] feat: show in-place in date series modal, resolves #385

feat: show start date for date series modal ranges, resolves #386
refactor: reformat date series modal to be more readable
fix: add message for malformed date series, resolves #388
---
 cypress/integration/ical.spec.ts              |  4 +-
 .../data/chips/edit-event-selection.html      | 47 +++++++++++++------
 .../data/chips/edit-event-selection.scss      |  7 ++-
 src/assets/i18n/de.json                       |  3 +-
 src/assets/i18n/en.json                       |  3 +-
 5 files changed, 45 insertions(+), 19 deletions(-)

diff --git a/cypress/integration/ical.spec.ts b/cypress/integration/ical.spec.ts
index 1a0f5c7a..fd0f62f6 100644
--- a/cypress/integration/ical.spec.ts
+++ b/cypress/integration/ical.spec.ts
@@ -30,14 +30,14 @@ describe('ical', function () {
 
     cy.get('ion-app > ion-modal').within(() => {
       cy.get('ion-footer > ion-toolbar > ion-button').should('have.attr', 'disabled');
-      cy.contains('ion-item', /eine Stunde um 19. Jan. 2059, \d+:00/).click();
+      cy.contains('ion-item', /19\.\s+Januar\s+2059,\s+\d{2}:00\s+-\s+\d{2}:00/).click();
       cy.get('ion-footer > ion-toolbar > ion-button').should('not.have.attr', 'disabled');
       cy.get('ion-footer > ion-toolbar > ion-button').click();
     });
 
     cy.get('add-event-review-modal').within(() => {
       cy.get('ion-item-group').should('contain', 'UNIcert (Test)');
-      cy.contains('ion-item-group', /19. Jan. 2059, \d+:00/);
+      cy.contains('ion-item-group', /19\.\s+Jan\.\s+2059,\s+\d{2}:00/);
     });
   });
 });
diff --git a/src/app/modules/data/chips/edit-event-selection.html b/src/app/modules/data/chips/edit-event-selection.html
index dbb99b1a..aaa54486 100644
--- a/src/app/modules/data/chips/edit-event-selection.html
+++ b/src/app/modules/data/chips/edit-event-selection.html
@@ -1,5 +1,5 @@
 <!--
-  ~ Copyright (C) 2022 StApps
+  ~ Copyright (C) 2023 StApps
   ~ This program is free software: you can redistribute it and/or modify it
   ~ under the terms of the GNU General Public License as published by the Free
   ~ Software Foundation, version 3.
@@ -38,20 +38,39 @@
       *ngFor="let date of frequency.children"
       (click)="modified.emit(); date.selected = !date.selected; frequency.notifyChildChanged()"
     >
-      <ion-label *ngIf="date.item.dates.length > 1; else single_event" class="ion-text-wrap">
-        {{ date.item.duration | amDuration: 'hours' }}
-        {{ 'data.chips.add_events.popover.AT' | translate }}
-        {{ date.item.dates[0] | amDateFormat: 'HH:mm ddd' }}
-        {{ 'data.chips.add_events.popover.UNTIL' | translate }}
-        {{ date.item.dates[date.item.dates.length - 1] | amDateFormat: 'll' }}
+      <ion-label>
+        <ng-container *ngIf="date.item.dates.length > 1; else single_event">
+          <ion-text>
+            {{ date.item.dates[0] | amDateFormat: 'dddd, LT' }} -
+            {{ date.item.dates[0] | amAdd: date.item.duration | amDateFormat: 'LT' }}
+          </ion-text>
+          <br />
+          <ion-text>
+            {{ date.item.dates[0] | amDateFormat: 'LL' }} -
+            {{ date.item.dates[date.item.dates.length - 1] | amDateFormat: 'LL' }}
+          </ion-text>
+        </ng-container>
+        <ng-template #single_event>
+          <ion-text *ngIf="date.item.dates[0] as time; else noDates">
+            {{ time | amDateFormat: 'LL, LT' }} -
+            {{ time | amAdd: date.item.duration | amDateFormat: 'LT' }}
+          </ion-text>
+          <ng-template #noDates>
+            <ion-text color="danger">{{ 'data.chips.add_events.popover.DATA_ERROR' | translate }}</ion-text>
+            <br />
+            <ion-text *ngFor="let id of date.item.identifiers | keyvalue">
+              {{ id.key }}: {{ id.value }}
+            </ion-text>
+          </ng-template>
+        </ng-template>
+        <ng-container class="ion-align-items-center" *ngIf="date.item.inPlace">
+          <br />
+          <ion-text color="medium" class="place">
+            <ion-icon name="pin_drop"></ion-icon>
+            <span> {{ 'inPlace.name' | thingTranslate: date.item }}</span>
+          </ion-text>
+        </ng-container>
       </ion-label>
-      <ng-template #single_event>
-        <ion-label class="ion-text-wrap">
-          {{ date.item.duration | amDuration: 'hours' }}
-          {{ 'data.chips.add_events.popover.AT' | translate }}
-          {{ date.item.dates[date.item.dates.length - 1] | amDateFormat: 'll, HH:mm' }}
-        </ion-label>
-      </ng-template>
       <ion-checkbox slot="end" [checked]="date.selected"> </ion-checkbox>
     </ion-item>
   </ion-list>
diff --git a/src/app/modules/data/chips/edit-event-selection.scss b/src/app/modules/data/chips/edit-event-selection.scss
index f347a8e7..56e868e9 100644
--- a/src/app/modules/data/chips/edit-event-selection.scss
+++ b/src/app/modules/data/chips/edit-event-selection.scss
@@ -1,5 +1,5 @@
 /*!
- * Copyright (C) 2022 StApps
+ * Copyright (C) 2023 StApps
  * This program is free software: you can redistribute it and/or modify it
  * under the terms of the GNU General Public License as published by the Free
  * Software Foundation, version 3.
@@ -42,3 +42,8 @@ ion-item-divider.ios > ion-checkbox {
 ion-list.md {
   padding-top: 0;
 }
+
+.place {
+  display: inline-flex;
+  align-items: center;
+}
diff --git a/src/assets/i18n/de.json b/src/assets/i18n/de.json
index 3ce22d59..78e91970 100644
--- a/src/assets/i18n/de.json
+++ b/src/assets/i18n/de.json
@@ -153,7 +153,8 @@
           "ALL": "Alle Termine",
           "AT": "um",
           "UNTIL": "bis",
-          "SINGLE": "Einzel"
+          "SINGLE": "Einzel",
+          "DATA_ERROR": "Fehlerhafte Daten"
         }
       }
     },
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index 4075ccf1..769c8618 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -153,7 +153,8 @@
           "ALL": "All Events",
           "AT": "at",
           "UNTIL": "until",
-          "SINGLE": "single"
+          "SINGLE": "single",
+          "DATA_ERROR": "Invalid data"
         }
       }
     },