From 6d94c961f17634aba51327c815c20942557db9b3 Mon Sep 17 00:00:00 2001
From: Dani Palou <dani@moodle.com>
Date: Thu, 18 Jul 2019 12:56:55 +0200
Subject: [PATCH] MOBILE-3021 calendar: Improve event page display

---
 scripts/langindex.json                        |  6 ++--
 .../calendar/addon-calendar-calendar.html     |  1 +
 .../components/calendar/calendar.scss         |  7 +++++
 src/addon/calendar/lang/en.json               |  1 +
 src/addon/calendar/pages/event/event.html     | 28 ++++++++++++++-----
 src/addon/calendar/pages/event/event.ts       | 25 ++++-------------
 src/assets/lang/en.json                       |  1 +
 7 files changed, 41 insertions(+), 28 deletions(-)

diff --git a/scripts/langindex.json b/scripts/langindex.json
index d80355727..aa47c8821 100644
--- a/scripts/langindex.json
+++ b/scripts/langindex.json
@@ -30,6 +30,7 @@
   "addon.block_badges.pluginname": "block_badges",
   "addon.block_blogmenu.pluginname": "block_blog_menu",
   "addon.block_blogrecent.nocourses": "block_blog_recent",
+  "addon.block_blogrecent.pluginname": "block_blog_recent",
   "addon.block_blogtags.pluginname": "block_blog_tags",
   "addon.block_calendarmonth.pluginname": "block_calendar_month",
   "addon.block_calendarupcoming.pluginname": "block_calendar_upcoming",
@@ -51,12 +52,12 @@
   "addon.block_newsitems.pluginname": "block_news_items",
   "addon.block_onlineusers.pluginname": "block_online_users",
   "addon.block_privatefiles.pluginname": "block_private_files",
+  "addon.block_recentactivity.pluginname": "block_recent_activity",
   "addon.block_recentlyaccessedcourses.nocourses": "block_recentlyaccessedcourses",
   "addon.block_recentlyaccessedcourses.pluginname": "block_recentlyaccessedcourses",
   "addon.block_recentlyaccesseditems.noitems": "block_recentlyaccesseditems",
-  "addon.block_recentactivity.pluginname": "block_recent_activity",
+  "addon.block_recentlyaccesseditems.pluginname": "block_recentlyaccesseditems",
   "addon.block_rssclient.pluginname": "block_rss_client",
-  "addon.block_glossaryrandom.pluginname": "block_glossary_random",
   "addon.block_selfcompletion.pluginname": "block_selfcompletion",
   "addon.block_sitemainmenu.pluginname": "block_site_main_menu",
   "addon.block_starredcourses.nocourses": "block_starredcourses",
@@ -149,6 +150,7 @@
   "addon.calendar.upcomingevents": "calendar",
   "addon.calendar.wed": "calendar",
   "addon.calendar.wednesday": "calendar",
+  "addon.calendar.when": "calendar",
   "addon.calendar.yesterday": "calendar",
   "addon.competency.activities": "tool_lp",
   "addon.competency.competencies": "competency",
diff --git a/src/addon/calendar/components/calendar/addon-calendar-calendar.html b/src/addon/calendar/components/calendar/addon-calendar-calendar.html
index ea373d297..1cc977fdf 100644
--- a/src/addon/calendar/components/calendar/addon-calendar-calendar.html
+++ b/src/addon/calendar/components/calendar/addon-calendar-calendar.html
@@ -43,6 +43,7 @@
                             <span class="calendar_event_type calendar_event_{{event.formattedType}}"></span>
                             <ion-icon *ngIf="event.offline && !event.deleted" name="time"></ion-icon>
                             <ion-icon *ngIf="event.deleted" name="trash"></ion-icon>
+                            <img *ngIf="event.moduleIcon" src="{{event.moduleIcon}}" alt="" role="presentation" class="core-module-icon">
                             {{ event.timestart * 1000 | coreFormatDate: timeFormat }}
                             {{event.name}}
                         </p>
diff --git a/src/addon/calendar/components/calendar/calendar.scss b/src/addon/calendar/components/calendar/calendar.scss
index af7182c32..b764187e4 100644
--- a/src/addon/calendar/components/calendar/calendar.scss
+++ b/src/addon/calendar/components/calendar/calendar.scss
@@ -48,4 +48,11 @@ ion-app.app-root addon-calendar-calendar {
             background-color: $calendar-event-site-color;
         }
     }
+
+    .core-module-icon {
+        @include margin-horizontal(1px, 1px);
+        width: 16px;
+        height: 16px;
+        display: inline;
+    }
 }
\ No newline at end of file
diff --git a/src/addon/calendar/lang/en.json b/src/addon/calendar/lang/en.json
index 8d19b4559..be2bab15a 100644
--- a/src/addon/calendar/lang/en.json
+++ b/src/addon/calendar/lang/en.json
@@ -65,5 +65,6 @@
     "upcomingevents": "Upcoming events",
     "wed": "Wed",
     "wednesday": "Wednesday",
+    "when": "When",
     "yesterday": "Yesterday"
 }
\ No newline at end of file
diff --git a/src/addon/calendar/pages/event/event.html b/src/addon/calendar/pages/event/event.html
index 6e64b6fe0..366327f66 100644
--- a/src/addon/calendar/pages/event/event.html
+++ b/src/addon/calendar/pages/event/event.html
@@ -1,6 +1,10 @@
 <ion-header>
     <ion-navbar core-back-button>
-        <ion-title><core-format-text [text]="title"></core-format-text></ion-title>
+        <ion-title>
+            <img *ngIf="event && event.moduleIcon" src="{{event.moduleIcon}}" alt="" role="presentation" class="core-module-icon">
+            <core-icon *ngIf="event && event.icon && !event.moduleIcon" [name]="event.icon" item-start></core-icon>
+            <core-format-text *ngIf="event" [text]="event.name"></core-format-text>
+        </ion-title>
         <ion-buttons end>
             <!-- The context menu will be added in here. -->
         </ion-buttons>
@@ -26,14 +30,26 @@
 
         <ion-card>
             <ion-card-content *ngIf="event">
-                <ion-item text-wrap>
+                <ion-item text-wrap *ngIf="isSplitViewOn">
+                    <img *ngIf="event.moduleIcon" src="{{event.moduleIcon}}" item-start alt="" role="presentation" class="core-module-icon">
                     <core-icon *ngIf="event.icon && !event.moduleIcon" [name]="event.icon" item-start></core-icon>
-                    <h2><core-format-text [text]="event.name"></core-format-text></h2>
-                    <p><core-format-text [text]="event.formattedtime"></core-format-text></p>
+                    <h2>{{ 'addon.calendar.eventname' | translate }}</h2>
+                    <p><core-format-text [text]="event.name"></core-format-text></p>
                     <ion-note item-end *ngIf="event.deleted">
                         <ion-icon name="trash"></ion-icon> {{ 'core.deletedoffline' | translate }}
                     </ion-note>
                 </ion-item>
+                <ion-item>
+                    <h2>{{ 'addon.calendar.when' | translate }}</h2>
+                    <p><core-format-text [text]="event.formattedtime"></core-format-text></p>
+                    <ion-note item-end *ngIf="!isSplitViewOn && event.deleted">
+                        <ion-icon name="trash"></ion-icon> {{ 'core.deletedoffline' | translate }}
+                    </ion-note>
+                </ion-item>
+                <ion-item>
+                    <h2>{{ 'addon.calendar.eventtype' | translate }}</h2>
+                    <p>{{ 'addon.calendar.type' + event.formattedType | translate }}</p>
+                </ion-item>
                 <a ion-item text-wrap *ngIf="courseName" [href]="courseUrl" core-link capture="true">
                     <h2>{{ 'core.course' | translate}}</h2>
                     <p><core-format-text [text]="courseName"></core-format-text></p>
@@ -46,10 +62,8 @@
                     <h2>{{ 'core.category' | translate}}</h2>
                     <p><core-format-text [text]="categoryPath"></core-format-text></p>
                 </a>
-                <ion-item text-wrap *ngIf="event.moduleIcon">
-                    <img *ngIf="event.moduleIcon" src="{{event.moduleIcon}}" item-start alt="" role="presentation" class="core-module-icon"> {{event.moduleName}}
-                </ion-item>
                 <ion-item text-wrap *ngIf="event.description">
+                    <h2>{{ 'core.description' | translate}}</h2>
                     <p>
                         <core-format-text [text]="event.description"></core-format-text>
                     </p>
diff --git a/src/addon/calendar/pages/event/event.ts b/src/addon/calendar/pages/event/event.ts
index 7af265152..fb9354748 100644
--- a/src/addon/calendar/pages/event/event.ts
+++ b/src/addon/calendar/pages/event/event.ts
@@ -57,7 +57,6 @@ export class AddonCalendarEventPage implements OnDestroy {
     notificationMax: string;
     notificationTimeText: string;
     event: any = {};
-    title: string;
     courseName: string;
     groupName: string;
     courseUrl = '';
@@ -236,8 +235,6 @@ export class AddonCalendarEventPage implements OnDestroy {
             this.courseUrl = '';
             this.moduleUrl = '';
 
-            // Guess event title.
-            let title = this.translate.instant('addon.calendar.type' + event.eventtype);
             if (event.moduleIcon) {
                 // It's a module event, translate the module name to the current language.
                 const name = this.courseProvider.translateModuleName(event.modulename);
@@ -245,27 +242,12 @@ export class AddonCalendarEventPage implements OnDestroy {
                     event.moduleName = name;
                 }
 
-                // Calculate the title of the page;
-                if (title == 'addon.calendar.type' + event.eventtype) {
-                    title = this.translate.instant('core.mod_' + event.modulename + '.' + event.eventtype);
-
-                    if (title == 'core.mod_' + event.modulename + '.' + event.eventtype) {
-                        title = name;
-                    }
-                }
-
                 // Get the module URL.
                 if (canGetById) {
                     this.moduleUrl = event.url;
                 }
-            } else {
-                if (title == 'addon.calendar.type' + event.eventtype) {
-                    title = event.name;
-                }
             }
 
-            this.title = title;
-
             // If the event belongs to a course, get the course name and the URL to view it.
             if (canGetById && event.course && event.course.id != this.siteHomeId) {
                 this.courseName = event.course.fullname;
@@ -403,7 +385,12 @@ export class AddonCalendarEventPage implements OnDestroy {
     refreshEvent(sync?: boolean, showErrors?: boolean): Promise<any> {
         this.syncIcon = 'spinner';
 
-        return this.calendarProvider.invalidateEvent(this.eventId).catch(() => {
+        const promises = [];
+
+        promises.push(this.calendarProvider.invalidateEvent(this.eventId));
+        promises.push(this.calendarProvider.invalidateTimeFormat());
+
+        return Promise.all(promises).catch(() => {
             // Ignore errors.
         }).then(() => {
             return this.fetchEvent(sync, showErrors);
diff --git a/src/assets/lang/en.json b/src/assets/lang/en.json
index b78160d84..a8564ee92 100644
--- a/src/assets/lang/en.json
+++ b/src/assets/lang/en.json
@@ -149,6 +149,7 @@
     "addon.calendar.upcomingevents": "Upcoming events",
     "addon.calendar.wed": "Wed",
     "addon.calendar.wednesday": "Wednesday",
+    "addon.calendar.when": "When",
     "addon.calendar.yesterday": "Yesterday",
     "addon.competency.activities": "Activities",
     "addon.competency.competencies": "Competencies",