2020-12-14 14:50:37 +01:00
|
|
|
|
<ion-header>
|
|
|
|
|
<ion-toolbar>
|
|
|
|
|
<ion-buttons slot="start">
|
2021-04-27 15:21:09 +02:00
|
|
|
|
<ion-back-button [text]="'core.back' | translate"></ion-back-button>
|
2020-12-14 14:50:37 +01:00
|
|
|
|
</ion-buttons>
|
2021-11-23 15:06:01 +01:00
|
|
|
|
<ion-title>
|
|
|
|
|
<h1>{{ title | translate }}</h1>
|
|
|
|
|
</ion-title>
|
2020-12-14 14:50:37 +01:00
|
|
|
|
</ion-toolbar>
|
|
|
|
|
</ion-header>
|
|
|
|
|
<ion-content>
|
2021-03-12 12:22:55 +01:00
|
|
|
|
<ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="refreshData($event.target)">
|
2020-12-14 14:50:37 +01:00
|
|
|
|
<ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
|
|
|
|
|
</ion-refresher>
|
|
|
|
|
|
|
|
|
|
<core-loading [hideUntil]="loaded">
|
|
|
|
|
<form [formGroup]="form" *ngIf="!error" #editEventForm>
|
|
|
|
|
<!-- Event name. -->
|
|
|
|
|
<ion-item class="ion-text-wrap">
|
2021-03-04 14:45:05 +01:00
|
|
|
|
<ion-label position="stacked">
|
2021-06-09 11:19:58 +02:00
|
|
|
|
<p class="item-heading" [core-mark-required]="true">{{ 'addon.calendar.eventname' | translate }}</p>
|
2020-12-14 14:50:37 +01:00
|
|
|
|
</ion-label>
|
|
|
|
|
<ion-input type="text" name="name" [placeholder]="'addon.calendar.eventname' | translate" formControlName="name">
|
|
|
|
|
</ion-input>
|
2021-04-23 13:26:37 +02:00
|
|
|
|
<core-input-errors [control]="form.controls.name" [errorMessages]="errors"></core-input-errors>
|
2020-12-14 14:50:37 +01:00
|
|
|
|
</ion-item>
|
|
|
|
|
|
|
|
|
|
<!-- Date. -->
|
|
|
|
|
<ion-item class="ion-text-wrap">
|
2021-06-09 11:19:58 +02:00
|
|
|
|
<ion-label position="stacked">
|
|
|
|
|
<p class="item-heading" [core-mark-required]="true">{{ 'core.date' | translate }}</p>
|
|
|
|
|
</ion-label>
|
2021-04-23 15:28:42 +02:00
|
|
|
|
<ion-datetime formControlName="timestart" [placeholder]="'core.date' | translate" [displayFormat]="dateFormat"
|
2021-06-22 16:45:59 +02:00
|
|
|
|
[max]="maxDate" [min]="minDate" display-timezone="utc">
|
2020-12-14 14:50:37 +01:00
|
|
|
|
</ion-datetime>
|
2021-04-23 13:26:37 +02:00
|
|
|
|
<core-input-errors [control]="form.controls.timestart" [errorMessages]="errors"></core-input-errors>
|
2020-12-14 14:50:37 +01:00
|
|
|
|
</ion-item>
|
|
|
|
|
|
|
|
|
|
<!-- Type. -->
|
|
|
|
|
<ion-item class="ion-text-wrap addon-calendar-eventtype-container">
|
2021-05-11 11:54:30 +02:00
|
|
|
|
<ion-label>
|
2021-06-09 11:19:58 +02:00
|
|
|
|
<p class="item-heading" [core-mark-required]="true">{{ 'addon.calendar.eventkind' | translate }}</p>
|
2020-12-14 14:50:37 +01:00
|
|
|
|
</ion-label>
|
2021-05-11 11:54:30 +02:00
|
|
|
|
<p *ngIf="eventTypes.length == 1" slot="end">{{eventTypes[0].name | translate }}</p>
|
2021-11-23 15:06:01 +01:00
|
|
|
|
<ion-select *ngIf="eventTypes.length > 1" formControlName="eventtype" interface="action-sheet"
|
|
|
|
|
[interfaceOptions]="{header: 'addon.calendar.eventkind' | translate}">
|
2020-12-14 14:50:37 +01:00
|
|
|
|
<ion-select-option *ngFor="let type of eventTypes" [value]="type.value">
|
|
|
|
|
{{ type.name | translate }}
|
|
|
|
|
</ion-select-option>
|
|
|
|
|
</ion-select>
|
|
|
|
|
</ion-item>
|
|
|
|
|
|
|
|
|
|
<!-- Category. -->
|
|
|
|
|
<ion-item class="ion-text-wrap" *ngIf="typeControl.value == 'category'">
|
2021-06-09 11:19:58 +02:00
|
|
|
|
<ion-label>
|
|
|
|
|
<p class="item-heading" [core-mark-required]="true">{{ 'core.category' | translate }}</p>
|
|
|
|
|
</ion-label>
|
2021-06-17 13:13:44 +02:00
|
|
|
|
<ion-select formControlName="categoryid" interface="action-sheet" [placeholder]="'core.noselection' | translate"
|
|
|
|
|
[interfaceOptions]="{header: 'core.category' | translate}">
|
2020-12-14 14:50:37 +01:00
|
|
|
|
<ion-select-option *ngFor="let category of categories" [value]="category.id">
|
|
|
|
|
{{ category.name }}
|
|
|
|
|
</ion-select-option>
|
|
|
|
|
</ion-select>
|
|
|
|
|
</ion-item>
|
|
|
|
|
|
|
|
|
|
<!-- Course. -->
|
|
|
|
|
<ion-item class="ion-text-wrap" *ngIf="typeControl.value == 'course'">
|
2021-06-09 11:19:58 +02:00
|
|
|
|
<ion-label>
|
|
|
|
|
<p class="item-heading" [core-mark-required]="true">{{ 'core.course' | translate }}</p>
|
|
|
|
|
</ion-label>
|
2021-06-17 13:13:44 +02:00
|
|
|
|
<ion-select formControlName="courseid" interface="action-sheet" [placeholder]="'core.noselection' | translate"
|
|
|
|
|
[interfaceOptions]="{header: 'core.course' | translate}">
|
2020-12-14 14:50:37 +01:00
|
|
|
|
<ion-select-option *ngFor="let course of courses" [value]="course.id">{{ course.fullname }}</ion-select-option>
|
|
|
|
|
</ion-select>
|
|
|
|
|
</ion-item>
|
|
|
|
|
|
|
|
|
|
<!-- Group. -->
|
|
|
|
|
<ng-container *ngIf="typeControl.value == 'group'">
|
|
|
|
|
<!-- Select the course. -->
|
|
|
|
|
<ion-item class="ion-text-wrap">
|
2021-06-09 11:19:58 +02:00
|
|
|
|
<ion-label>
|
|
|
|
|
<p class="item-heading" [core-mark-required]="true">{{ 'core.course' | translate }}</p>
|
|
|
|
|
</ion-label>
|
2021-11-23 15:06:01 +01:00
|
|
|
|
<ion-select formControlName="groupcourseid" interface="action-sheet" [placeholder]="'core.noselection' | translate"
|
2021-06-17 13:13:44 +02:00
|
|
|
|
(ionChange)="groupCourseSelected()" [interfaceOptions]="{header: 'core.course' | translate}">
|
2020-12-14 14:50:37 +01:00
|
|
|
|
<ion-select-option *ngFor="let course of courses" [value]="course.id">
|
|
|
|
|
{{ course.fullname }}
|
|
|
|
|
</ion-select-option>
|
|
|
|
|
</ion-select>
|
|
|
|
|
</ion-item>
|
|
|
|
|
<!-- The course has no groups. -->
|
2021-01-29 13:28:13 +01:00
|
|
|
|
<ion-item class="ion-text-wrap core-danger-item" *ngIf="!loadingGroups && courseGroupSet && !groups.length">
|
2021-11-23 15:06:01 +01:00
|
|
|
|
<ion-label>
|
|
|
|
|
<p>{{ 'core.coursenogroups' | translate }}</p>
|
|
|
|
|
</ion-label>
|
2020-12-14 14:50:37 +01:00
|
|
|
|
</ion-item>
|
|
|
|
|
<!-- Select the group. -->
|
|
|
|
|
<ion-item class="ion-text-wrap" *ngIf="!loadingGroups && groups.length > 0">
|
2021-06-09 11:19:58 +02:00
|
|
|
|
<ion-label>
|
|
|
|
|
<p class="item-heading" [core-mark-required]="true">{{ 'core.group' | translate }}</p>
|
|
|
|
|
</ion-label>
|
2021-06-17 13:13:44 +02:00
|
|
|
|
<ion-select formControlName="groupid" interface="action-sheet" [placeholder]="'core.noselection' | translate"
|
|
|
|
|
[interfaceOptions]="{header: 'core.group' | translate}">
|
2020-12-14 14:50:37 +01:00
|
|
|
|
<ion-select-option *ngFor="let group of groups" [value]="group.id">{{ group.name }}</ion-select-option>
|
|
|
|
|
</ion-select>
|
|
|
|
|
</ion-item>
|
|
|
|
|
<!-- Loading groups. -->
|
|
|
|
|
<ion-item class="ion-text-wrap" *ngIf="loadingGroups">
|
2021-06-11 13:13:15 +02:00
|
|
|
|
<ion-label>
|
|
|
|
|
<ion-spinner *ngIf="loadingGroups" [attr.aria-label]="'core.loading' | translate"></ion-spinner>
|
|
|
|
|
</ion-label>
|
2020-12-14 14:50:37 +01:00
|
|
|
|
</ion-item>
|
|
|
|
|
</ng-container>
|
|
|
|
|
|
2021-11-17 14:32:17 +01:00
|
|
|
|
<!-- Reminders. Right now, only allow adding them here for new events. -->
|
|
|
|
|
<ng-container *ngIf="notificationsEnabled && !eventId">
|
|
|
|
|
<ion-item-divider class="addon-calendar-reminders-title">
|
|
|
|
|
<ion-label>
|
|
|
|
|
<p class="item-heading">{{ 'addon.calendar.reminders' | translate }}</p>
|
2021-06-09 11:19:58 +02:00
|
|
|
|
</ion-label>
|
2021-11-17 14:32:17 +01:00
|
|
|
|
<ion-button fill="clear" color="dark" (click)="addReminder()" slot="end"
|
|
|
|
|
[attr.aria-label]="'addon.calendar.setnewreminder' | translate">
|
|
|
|
|
<ion-icon name="fas-plus" slot="icon-only" aria-hidden="true"></ion-icon>
|
|
|
|
|
</ion-button>
|
|
|
|
|
</ion-item-divider>
|
|
|
|
|
<ion-item *ngFor="let reminder of reminders" class="ion-text-wrap">
|
|
|
|
|
<ion-label>
|
|
|
|
|
<p>{{ reminder.label }}</p>
|
2021-06-09 11:19:58 +02:00
|
|
|
|
</ion-label>
|
2021-11-23 15:06:01 +01:00
|
|
|
|
<ion-button fill="clear" (click)="removeReminder(reminder)" [attr.aria-label]="'core.delete' | translate" slot="end">
|
2021-11-17 14:32:17 +01:00
|
|
|
|
<ion-icon name="fas-trash" color="danger" slot="icon-only" aria-hidden="true"></ion-icon>
|
|
|
|
|
</ion-button>
|
2020-12-14 14:50:37 +01:00
|
|
|
|
</ion-item>
|
2021-11-17 14:32:17 +01:00
|
|
|
|
</ng-container>
|
2020-12-14 14:50:37 +01:00
|
|
|
|
|
2021-11-17 14:32:17 +01:00
|
|
|
|
<!-- Duration. -->
|
|
|
|
|
<div class="ion-text-wrap addon-calendar-radio-container">
|
|
|
|
|
<ion-radio-group formControlName="duration">
|
|
|
|
|
<ion-item-divider class="addon-calendar-radio-title">
|
|
|
|
|
<ion-label>
|
|
|
|
|
<p class="item-heading">{{ 'addon.calendar.eventduration' | translate }}</p>
|
|
|
|
|
</ion-label>
|
|
|
|
|
</ion-item-divider>
|
|
|
|
|
<ion-item>
|
2020-12-14 14:50:37 +01:00
|
|
|
|
<ion-label>
|
2021-11-17 14:32:17 +01:00
|
|
|
|
<p>{{ 'addon.calendar.durationnone' | translate }}</p>
|
2020-12-14 14:50:37 +01:00
|
|
|
|
</ion-label>
|
2021-11-17 14:32:17 +01:00
|
|
|
|
<ion-radio slot="end" [value]="0"></ion-radio>
|
2020-12-14 14:50:37 +01:00
|
|
|
|
</ion-item>
|
2021-11-17 14:32:17 +01:00
|
|
|
|
<ion-item lines="none">
|
|
|
|
|
<ion-label>
|
|
|
|
|
<p>{{ 'addon.calendar.durationuntil' | translate }}</p>
|
|
|
|
|
</ion-label>
|
|
|
|
|
<ion-radio slot="end" [value]="1"></ion-radio>
|
|
|
|
|
</ion-item>
|
|
|
|
|
<ion-item *ngIf="form.controls.duration.value === 1">
|
|
|
|
|
<ion-label position="stacked"></ion-label>
|
|
|
|
|
<ion-datetime formControlName="timedurationuntil" [max]="maxDate" [min]="minDate"
|
2021-11-23 15:06:01 +01:00
|
|
|
|
[placeholder]="'addon.calendar.durationuntil' | translate" [displayFormat]="dateFormat" display-timezone="utc">
|
2021-11-17 14:32:17 +01:00
|
|
|
|
</ion-datetime>
|
|
|
|
|
</ion-item>
|
|
|
|
|
<ion-item lines="none">
|
|
|
|
|
<ion-label>
|
|
|
|
|
<p>{{ 'addon.calendar.durationminutes' | translate }}</p>
|
2021-06-09 11:19:58 +02:00
|
|
|
|
</ion-label>
|
2021-11-17 14:32:17 +01:00
|
|
|
|
<ion-radio slot="end" [value]="2"></ion-radio>
|
|
|
|
|
</ion-item>
|
|
|
|
|
<ion-item *ngIf="form.controls.duration.value === 2">
|
|
|
|
|
<ion-label class="sr-only">{{ 'addon.calendar.durationminutes' | translate }}</ion-label>
|
|
|
|
|
<ion-input type="number" name="timedurationminutes" slot="end"
|
2021-11-23 15:06:01 +01:00
|
|
|
|
[placeholder]="'addon.calendar.durationminutes' | translate" formControlName="timedurationminutes"></ion-input>
|
2020-12-14 14:50:37 +01:00
|
|
|
|
</ion-item>
|
2021-11-17 14:32:17 +01:00
|
|
|
|
</ion-radio-group>
|
|
|
|
|
</div>
|
2020-12-14 14:50:37 +01:00
|
|
|
|
|
2021-11-17 14:32:17 +01:00
|
|
|
|
<!-- Repeat (for new events). -->
|
|
|
|
|
<ng-container *ngIf="!eventId || eventId < 0">
|
|
|
|
|
<ion-item class="ion-text-wrap divider" lines="none">
|
|
|
|
|
<ion-label>
|
|
|
|
|
<p class="item-heading">{{ 'addon.calendar.repeatevent' | translate }}</p>
|
|
|
|
|
</ion-label>
|
|
|
|
|
<ion-checkbox slot="end" formControlName="repeat"></ion-checkbox>
|
|
|
|
|
</ion-item>
|
|
|
|
|
<ion-item class="ion-text-wrap">
|
|
|
|
|
<ion-label position="stacked">
|
|
|
|
|
<p>{{ 'addon.calendar.repeatweeksl' | translate }}</p>
|
|
|
|
|
</ion-label>
|
|
|
|
|
<ion-input type="number" name="repeats" formControlName="repeats" [disabled]="!form.controls.repeat.value">
|
|
|
|
|
</ion-input>
|
|
|
|
|
</ion-item>
|
|
|
|
|
</ng-container>
|
2021-11-15 14:29:51 +01:00
|
|
|
|
|
2021-11-17 14:32:17 +01:00
|
|
|
|
<!-- Apply to all events or just this one (editing repeated events). -->
|
|
|
|
|
<div *ngIf="eventRepeatId" class="ion-text-wrap addon-calendar-radio-container">
|
|
|
|
|
<ion-radio-group formControlName="repeateditall">
|
|
|
|
|
<ion-item-divider class="addon-calendar-radio-title">
|
2021-11-15 14:29:51 +01:00
|
|
|
|
<ion-label>
|
2021-11-17 14:32:17 +01:00
|
|
|
|
<p class="item-heading">{{ 'addon.calendar.repeatedevents' | translate }}</p>
|
2021-11-15 14:29:51 +01:00
|
|
|
|
</ion-label>
|
|
|
|
|
</ion-item-divider>
|
2021-11-17 14:32:17 +01:00
|
|
|
|
<ion-item>
|
2021-11-15 14:29:51 +01:00
|
|
|
|
<ion-label>
|
2021-11-17 14:32:17 +01:00
|
|
|
|
<p>{{ 'addon.calendar.repeateditall' | translate:{$a: otherEventsCount} }}</p>
|
2021-11-15 14:29:51 +01:00
|
|
|
|
</ion-label>
|
2021-11-17 14:32:17 +01:00
|
|
|
|
<ion-radio slot="end" value="1"></ion-radio>
|
2021-11-15 14:29:51 +01:00
|
|
|
|
</ion-item>
|
|
|
|
|
<ion-item>
|
|
|
|
|
<ion-label>
|
2021-11-17 14:32:17 +01:00
|
|
|
|
<p>{{ 'addon.calendar.repeateditthis' | translate }}</p>
|
2021-11-15 14:29:51 +01:00
|
|
|
|
</ion-label>
|
2021-11-17 14:32:17 +01:00
|
|
|
|
<ion-radio slot="end" value="0"></ion-radio>
|
2021-11-15 14:29:51 +01:00
|
|
|
|
</ion-item>
|
2021-11-17 14:32:17 +01:00
|
|
|
|
</ion-radio-group>
|
2020-12-14 14:50:37 +01:00
|
|
|
|
</div>
|
|
|
|
|
|
2021-11-17 14:32:17 +01:00
|
|
|
|
<!-- Description. -->
|
|
|
|
|
<ion-item class="ion-text-wrap">
|
|
|
|
|
<ion-label position="stacked">
|
|
|
|
|
<p class="item-heading">{{ 'core.description' | translate }}</p>
|
|
|
|
|
</ion-label>
|
|
|
|
|
<core-rich-text-editor [control]="descriptionControl" [attr.aria-label]="'core.description' | translate"
|
2021-11-23 15:06:01 +01:00
|
|
|
|
[placeholder]="'core.description' | translate" name="description" [component]="component" [componentId]="eventId"
|
|
|
|
|
[autoSave]="false"></core-rich-text-editor>
|
2021-11-17 14:32:17 +01:00
|
|
|
|
</ion-item>
|
|
|
|
|
|
|
|
|
|
<!-- Location. -->
|
|
|
|
|
<ion-item class="ion-text-wrap">
|
|
|
|
|
<ion-label position="stacked">
|
|
|
|
|
<p class="item-heading">{{ 'core.location' | translate }}</p>
|
|
|
|
|
</ion-label>
|
|
|
|
|
<ion-input type="text" name="location" [placeholder]="'core.location' | translate" formControlName="location">
|
|
|
|
|
</ion-input>
|
|
|
|
|
</ion-item>
|
|
|
|
|
|
2020-12-14 14:50:37 +01:00
|
|
|
|
<ion-item>
|
|
|
|
|
<ion-label>
|
|
|
|
|
<ion-row>
|
|
|
|
|
<ion-col>
|
2021-06-09 11:19:58 +02:00
|
|
|
|
<ion-button expand="block" (click)="submit()" [disabled]="!form.valid" type="submit">
|
2020-12-14 14:50:37 +01:00
|
|
|
|
{{ 'core.save' | translate }}
|
|
|
|
|
</ion-button>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col *ngIf="hasOffline && eventId && eventId < 0">
|
2021-06-09 11:19:58 +02:00
|
|
|
|
<ion-button expand="block" color="light" (click)="discard()">
|
|
|
|
|
{{ 'core.discard' | translate }}
|
|
|
|
|
</ion-button>
|
2020-12-14 14:50:37 +01:00
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
</ion-label>
|
|
|
|
|
</ion-item>
|
|
|
|
|
</form>
|
|
|
|
|
</core-loading>
|
|
|
|
|
</ion-content>
|