MOBILE-3947 chore: Migrate ion-datetime to Ionic 7

moodlehq · Nov 28, 2023 · 22d0d4e · 22d0d4e
1 parent 2db3635
commit 22d0d4e
Show file tree

Hide file tree

Showing 10 changed files with 59 additions and 50 deletions.
diff --git a/src/addons/calendar/pages/edit-event/edit-event.html b/src/addons/calendar/pages/edit-event/edit-event.html
@@ -29,8 +29,14 @@ <h1>{{ title | translate }}</h1>
                 <ion-label position="stacked">
                     <p class="item-heading" [core-mark-required]="true">{{ 'core.date' | translate }}</p>
                 </ion-label>
-                <ion-datetime formControlName="timestart" [placeholder]="'core.date' | translate" [displayFormat]="dateFormat"
-                    [max]="maxDate" [min]="minDate" [displayTimezone]="displayTimezone" />
+                <ion-datetime-button datetime="timestart" />
+                <ion-modal [keepContentsMounted]="true">
+                    <ng-template>
+                        <ion-datetime id="timestart" formControlName="timestart" presentation="date-time" [max]="maxDate" [min]="minDate">
+                            <span slot="title">{{'core.date' | translate}}</span>
+                        </ion-datetime>
+                    </ng-template>
+                </ion-modal>
                 <core-input-errors [control]="form.controls.timestart" [errorMessages]="errors" />
             </ion-item>
 
@@ -154,9 +160,15 @@ <h1>{{ title | translate }}</h1>
                     </ion-item>
                     <ion-item *ngIf="form.controls.duration.value === 1">
                         <ion-label position="stacked" />
-                        <ion-datetime formControlName="timedurationuntil" [max]="maxDate" [min]="minDate"
-                            [placeholder]="'addon.calendar.durationuntil' | translate" [displayFormat]="dateFormat"
-                            [displayTimezone]="displayTimezone" />
+                        <ion-datetime-button datetime="timedurationuntil" />
+                        <ion-modal [keepContentsMounted]="true">
+                            <ng-template>
+                                <ion-datetime id="timedurationuntil" formControlName="timedurationuntil" [max]="maxDate" [min]="minDate"
+                                    presentation="date-time">
+                                    <span slot="title">{{'addon.calendar.durationuntil' | translate}}</span>
+                                </ion-datetime>
+                            </ng-template>
+                        </ion-modal>
                     </ion-item>
                     <ion-item>
                         <ion-label>

diff --git a/src/addons/calendar/pages/edit-event/edit-event.ts b/src/addons/calendar/pages/edit-event/edit-event.ts
@@ -45,7 +45,6 @@ import { CoreForms } from '@singletons/form';
 import { CoreReminders, CoreRemindersService, CoreRemindersUnits } from '@features/reminders/services/reminders';
 import { CoreRemindersSetReminderMenuComponent } from '@features/reminders/components/set-reminder-menu/set-reminder-menu';
 import moment from 'moment-timezone';
-import { CoreAppProvider } from '@services/app';
 
 /**
  * Page that displays a form to create/edit an event.
@@ -61,7 +60,6 @@ export class AddonCalendarEditEventPage implements OnInit, OnDestroy, CanLeave {
     @ViewChild('editEventForm') formElement!: ElementRef;
 
     title = 'addon.calendar.newevent';
-    dateFormat: string;
     component = AddonCalendarProvider.COMPONENT;
     loaded = false;
     hasOffline = false;
@@ -78,7 +76,6 @@ export class AddonCalendarEditEventPage implements OnInit, OnDestroy, CanLeave {
     eventId?: number;
     maxDate: string;
     minDate: string;
-    displayTimezone?: string;
 
     // Form variables.
     form: FormGroup;
@@ -107,11 +104,6 @@ export class AddonCalendarEditEventPage implements OnInit, OnDestroy, CanLeave {
             required: Translate.instant('core.required'),
         };
 
-        // Calculate format to use. ion-datetime doesn't support escaping characters ([]), so we remove them.
-        this.dateFormat = CoreTimeUtils.convertPHPToMoment(Translate.instant('core.strftimedatetimeshort'))
-            .replace(/[[\]]/g, '');
-        this.displayTimezone = CoreAppProvider.getForcedTimezone();
-
         this.form = new FormGroup({});
 
         // Initialize form variables.

diff --git a/src/addons/mod/data/fields/date/component/addon-mod-data-field-date.html b/src/addons/mod/data/fields/date/component/addon-mod-data-field-date.html
@@ -1,12 +1,18 @@
-<span *ngIf="inputMode && form" [formGroup]="form">
+<span *ngIf="inputMode && form && searchFields" [formGroup]="form">
     <span *ngIf="editMode" [core-mark-required]="field.required" class="core-mark-required"></span>
-    <ion-datetime [formControlName]="'f_'+field.id" [placeholder]="'core.date' | translate" [max]="maxDate" [min]="minDate"
-        [disabled]="searchMode && !searchFields!['f_'+field.id+'_z']" [displayFormat]="format" [displayTimezone]="displayTimezone" />
+
+    <ion-datetime-button datetime="datetime" />
+    <ion-modal [keepContentsMounted]="true">
+        <ng-template>
+            <ion-datetime id="datetime" [formControlName]="'f_'+field.id" [max]="maxDate" [min]="minDate"
+                [disabled]="searchMode && !searchFields['f_'+field.id+'_z']" presentation="date" />
+        </ng-template>
+    </ion-modal>
     <core-input-errors *ngIf="error && editMode" [control]="form.controls['f_'+field.id]" [errorText]="error" />
 
     <ion-item *ngIf="searchMode">
         <ion-label>{{ 'addon.mod_data.usedate' | translate }}</ion-label>
-        <ion-checkbox slot="end" [formControlName]="'f_'+field.id+'_z'" [(ngModel)]="searchFields!['f_'+field.id+'_z']" />
+        <ion-checkbox slot="end" [formControlName]="'f_'+field.id+'_z'" [(ngModel)]="searchFields['f_'+field.id+'_z']" />
     </ion-item>
 </span>
 

diff --git a/src/addons/mod/data/fields/date/component/date.ts b/src/addons/mod/data/fields/date/component/date.ts
@@ -13,9 +13,7 @@
 // limitations under the License.
 
 import { Component } from '@angular/core';
-import { CoreAppProvider } from '@services/app';
 import { CoreTimeUtils } from '@services/utils/time';
-import { Translate } from '@singletons';
 import moment, { Moment } from 'moment-timezone';
 import { AddonModDataFieldPluginBaseComponent } from '../../../classes/base-field-plugin-component';
 
@@ -28,11 +26,9 @@ import { AddonModDataFieldPluginBaseComponent } from '../../../classes/base-fiel
 })
 export class AddonModDataFieldDateComponent extends AddonModDataFieldPluginBaseComponent {
 
-    format!: string;
     displayDate?: number;
     maxDate?: string;
     minDate?: string;
-    displayTimezone?: string;
 
     /**
      * @inheritdoc
@@ -48,23 +44,18 @@ export class AddonModDataFieldDateComponent extends AddonModDataFieldPluginBaseC
 
         let momentInstance: Moment;
 
-        // Calculate format to use.
-        this.format = CoreTimeUtils.fixFormatForDatetime(CoreTimeUtils.convertPHPToMoment(
-            Translate.instant('core.strftimedate'),
-        ));
         this.maxDate = CoreTimeUtils.getDatetimeDefaultMax();
         this.minDate = CoreTimeUtils.getDatetimeDefaultMin();
-        this.displayTimezone = CoreAppProvider.getForcedTimezone();
 
-        if (this.searchMode) {
+        if (this.searchMode && this.searchFields) {
             this.addControl('f_' + this.field.id + '_z');
 
-            momentInstance = this.searchFields!['f_' + this.field.id + '_y']
-                ? moment(this.searchFields!['f_' + this.field.id + '_y'] + '-' +
-                    this.searchFields!['f_' + this.field.id + '_m'] + '-' + this.searchFields!['f_' + this.field.id + '_d'])
+            momentInstance = this.searchFields['f_' + this.field.id + '_y']
+                ? moment(this.searchFields['f_' + this.field.id + '_y'] + '-' +
+                    this.searchFields['f_' + this.field.id + '_m'] + '-' + this.searchFields['f_' + this.field.id + '_d'])
                 : moment();
 
-            this.searchFields!['f_' + this.field.id] = CoreTimeUtils.toDatetimeFormat(momentInstance.unix() * 1000);
+            this.searchFields['f_' + this.field.id] = CoreTimeUtils.toDatetimeFormat(momentInstance.unix() * 1000);
         } else {
             momentInstance = this.value?.content
                 ? moment(parseInt(this.value.content, 10) * 1000)

diff --git a/src/addons/userprofilefield/datetime/component/addon-user-profile-field-datetime.html b/src/addons/userprofilefield/datetime/component/addon-user-profile-field-datetime.html
@@ -18,7 +18,12 @@
                 [courseId]="courseId" [wsNotFiltered]="true" />
         </span>
     </ion-label>
-    <ion-datetime [formControlName]="modelName" [placeholder]="'core.choosedots' | translate" [displayFormat]="format" [max]="max"
-        [min]="min" [monthNames]="monthNames" [displayTimezone]="displayTimezone" />
+
+    <ion-datetime-button datetime="datetime" />
+    <ion-modal [keepContentsMounted]="true">
+        <ng-template>
+            <ion-datetime id="datetime" [formControlName]="modelName" [presentation]="ionDateTimePresentation" [max]="max" [min]="min" />
+        </ng-template>
+    </ion-modal>
     <core-input-errors [control]="form.controls[modelName]" />
 </ion-item>
diff --git a/src/addons/userprofilefield/datetime/component/datetime.ts b/src/addons/userprofilefield/datetime/component/datetime.ts
@@ -19,10 +19,7 @@ import { CoreTimeUtils } from '@services/utils/time';
 import { CoreUtils } from '@services/utils/utils';
 import { AuthEmailSignupProfileField } from '@features/login/services/login-helper';
 import { CoreUserProfileField } from '@features/user/services/user';
-import { Translate } from '@singletons';
 import { CoreUserProfileFieldBaseComponent } from '@features/user/classes/base-profilefield-component';
-import { CoreLang } from '@services/lang';
-import { CoreAppProvider } from '@services/app';
 
 /**
  * Directive to render a datetime user profile field.
@@ -33,13 +30,11 @@ import { CoreAppProvider } from '@services/app';
 })
 export class AddonUserProfileFieldDatetimeComponent extends CoreUserProfileFieldBaseComponent {
 
-    format?: string;
+    ionDateTimePresentation = 'date';
     min?: string;
     max?: string;
     valueNumber?: number;
     displayValue?: string;
-    monthNames?: string[];
-    displayTimezone?: string;
 
     /**
      * Init the data when the field is meant to be displayed without editing.
@@ -64,16 +59,11 @@ export class AddonUserProfileFieldDatetimeComponent extends CoreUserProfileField
     protected initForEdit(field: AuthEmailSignupProfileField): void {
         super.initForEdit(field);
 
-        this.monthNames = CoreLang.getMonthNames();
-        this.displayTimezone = CoreAppProvider.getForcedTimezone();
-
         // Check if it's only date or it has time too.
         const hasTime = CoreUtils.isTrueOrOne(field.param3);
 
         // Calculate format to use.
-        this.format = CoreTimeUtils.fixFormatForDatetime(CoreTimeUtils.convertPHPToMoment(
-            Translate.instant('core.' + (hasTime ? 'strftimedatetime' : 'strftimedate')),
-        ));
+        this.ionDateTimePresentation = hasTime ? 'date-time' : 'date';
 
         // Check min value.
         if (field.param1 && Number(field.param1)) {

diff --git a/src/core/components/input-errors/input-errors.scss b/src/core/components/input-errors/input-errors.scss
@@ -1,7 +1,8 @@
 :host {
-    width: 100%;
-
+    display: contents;
     .core-input-error-container {
+        width: 100%;
+
         .core-input-error {
             padding: 4px;
             color: var(--danger);

diff --git a/src/core/components/sheet-modal/sheet-modal.scss b/src/core/components/sheet-modal/sheet-modal.scss
@@ -2,6 +2,7 @@
 
 :host {
     --backdrop-opacity: var(--ion-backdrop-opacity, 0.4);
+    --border-radius: var(--modal-radius);
 
     width: 100%;
     height: 100%;
@@ -17,7 +18,7 @@
     }
 
     .sheet-modal--wrapper {
-        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+        border-radius: var(--border-radius) var(--border-radius) 0 0;
         @include padding(24px, 16px, 24px, 16px);
 
         background-color: var(--ion-overlay-background-color, var(--ion-background-color, #fff));

diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
@@ -518,7 +518,7 @@ ion-alert .alert-button.timed-button{
 }
 
 ion-alert {
-    --border-radius: var(--radius-xl);
+    --border-radius: var(--modal-radius);
 
     &.md, &.ios {
         --max-width: 80%;
@@ -545,7 +545,7 @@ ion-alert {
 }
 
 ion-loading {
-    --border-radius: var(--radius-xl);
+    --border-radius: var(--modal-radius);
 
     .loading-wrapper {
         border-radius: var(--border-radius) !important;
@@ -1917,6 +1917,9 @@ ion-modal {
             --border-radius: var(--modal-radius);
         }
     }
+    &.ion-datetime-button-overlay {
+        --border-radius: var(--modal-radius);
+    }
 
     &.core-modal-lateral,
     &.core-modal-fullscreen {
@@ -1974,3 +1977,10 @@ ion-popover {
 [hidden] {
     display: none !important;
 }
+
+// Ion Datetime
+ion-item.item-label-stacked ion-datetime-button {
+    margin-top: 8px;
+    margin-bottom: 8px;
+    align-self: self-end;
+}
diff --git a/upgrade.txt b/upgrade.txt
@@ -9,6 +9,7 @@ For more information about upgrading, read the official documentation: https://m
  - Renamed CoreLoginSitesComponent to CoreLoginSitesModalComponent to make it clear that it's a modal and to avoid confusing it with the new CoreSitesListComponent.
  - Removed CoreToLocaleStringPipe deprecated since 3.6.0
  - With the upgrade to Ionic 7 ion-slides is no longer supported and now you need to use swiper-container and swiper-slide. More info here: https://ionicframework.com/docs/angular/slides
+ - With the upgrade to Ionic7 ion-datetime has changed its usage. We recommend using ion-datetime-button. More info here: https://ionicframework.com/docs/updating/6-0#datetime
 
 === 4.3.0 ===