Vmeda.Online/src/addon/calendar/pages/edit-event/edit-event.html

<ion-header>
    <ion-navbar core-back-button>
        <ion-title><core-format-text [text]="title | translate"></core-format-text></ion-title>
    </ion-navbar>
</ion-header>
<ion-content>
    <ion-refresher [enabled]="loaded" (ionRefresh)="refreshData($event)">
        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
    </ion-refresher>

    <core-loading [hideUntil]="loaded">
        <form ion-list [formGroup]="eventForm">
            <!-- Event name. -->
            <ion-item text-wrap>
                <ion-label stacked><h2 [core-mark-required]="true">{{ 'addon.calendar.eventname' | translate }}</h2></ion-label>
                <ion-input type="text" name="name" [placeholder]="'addon.calendar.eventname' | translate" [formControlName]="'name'"></ion-input>
                <core-input-errors item-content [control]="eventForm.controls.name" [errorMessages]="errors"></core-input-errors>
            </ion-item>

            <!-- Date. -->
            <ion-item text-wrap>
                <ion-label stacked><h2 [core-mark-required]="true">{{ 'core.date' | translate }}</h2></ion-label>
                <ion-datetime [formControlName]="'timestart'" [placeholder]="'core.date' | translate" [displayFormat]="dateFormat"></ion-datetime>
                <core-input-errors item-content [control]="eventForm.controls.timestart" [errorMessages]="errors"></core-input-errors>
            </ion-item>

            <!-- Type. -->
            <ion-item text-wrap class="addon-calendar-eventtype-container">
                <ion-label id="addon-calendar-eventtype-label"><h2 [core-mark-required]="true">{{ 'addon.calendar.eventtype' | translate }}</h2></ion-label>
                <ion-select [formControlName]="'eventtype'" aria-labelledby="addon-calendar-eventtype-label" interface="action-sheet" [disabled]="eventTypes.length == 1">
                    <ion-option *ngFor="let type of eventTypes" [value]="type.value">{{ type.name | translate }}</ion-option>
                </ion-select>
            </ion-item>

            <!-- Category. -->
            <ion-item text-wrap *ngIf="eventTypeControl.value == 'category'">
                <ion-label id="addon-calendar-category-label"><h2 [core-mark-required]="true">{{ 'core.category' | translate }}</h2></ion-label>
                <ion-select [formControlName]="'categoryid'" aria-labelledby="addon-calendar-category-label" interface="action-sheet" [placeholder]="'core.noselection' | translate">
                    <ion-option *ngFor="let category of categories" [value]="category.id">{{ category.name }}</ion-option>
                </ion-select>
            </ion-item>

            <!-- Course. -->
            <ion-item text-wrap *ngIf="eventTypeControl.value == 'course'">
                <ion-label id="addon-calendar-course-label"><h2 [core-mark-required]="true">{{ 'core.course' | translate }}</h2></ion-label>
                <ion-select [formControlName]="'courseid'" aria-labelledby="addon-calendar-course-label" interface="action-sheet" [placeholder]="'core.noselection' | translate">
                    <ion-option *ngFor="let course of courses" [value]="course.id"><core-format-text [text]="course.fullname"></core-format-text></ion-option>
                </ion-select>
            </ion-item>

            <!-- Group. -->
            <ng-container *ngIf="eventTypeControl.value == 'group'">
                <!-- Select the course. -->
                <ion-item text-wrap>
                    <ion-label id="addon-calendar-groupcourse-label"><h2 [core-mark-required]="true">{{ 'core.course' | translate }}</h2></ion-label>
                    <ion-select [formControlName]="'groupcourseid'" aria-labelledby="addon-calendar-groupcourse-label" interface="action-sheet" [placeholder]="'core.noselection' | translate" (ionChange)="groupCourseSelected($event)">
                        <ion-option *ngFor="let course of courses" [value]="course.id"><core-format-text [text]="course.fullname"></core-format-text></ion-option>
                    </ion-select>
                </ion-item>
                <!-- The course has no groups. -->
                <ion-item text-wrap *ngIf="!loadingGroups && courseGroupSet && !groups.length" class="core-danger-item">
                    <p>{{ 'core.coursenogroups' | translate }}</p>
                </ion-item>
                <!-- Select the group. -->
                <ion-item text-wrap *ngIf="!loadingGroups && groups.length > 0">
                    <ion-label id="addon-calendar-group-label"><h2 [core-mark-required]="true">{{ 'core.group' | translate }}</h2></ion-label>
                    <ion-select [formControlName]="'groupid'" aria-labelledby="addon-calendar-group-label" interface="action-sheet" [placeholder]="'core.noselection' | translate">
                        <ion-option *ngFor="let group of groups" [value]="group.id">{{ group.name }}</ion-option>
                    </ion-select>
                </ion-item>
                <!-- Loading groups. -->
                <ion-item text-wrap *ngIf="loadingGroups">
                    <ion-spinner *ngIf="loadingGroups"></ion-spinner>
                </ion-item>
            </ng-container>

            <!-- Advanced options. -->
            <ion-item-divider text-wrap (click)="toggleAdvanced()" class="core-expandable">
                <core-icon *ngIf="!advanced" name="fa-caret-right" item-start></core-icon>
                <span *ngIf="!advanced">{{ 'core.showmore' | translate }}</span>
                <core-icon *ngIf="advanced" name="fa-caret-down" item-start></core-icon>
                <span *ngIf="advanced">{{ 'core.showless' | translate }}</span>
            </ion-item-divider>

            <ng-container *ngIf="advanced">
                <!-- Description. -->
                <ion-item text-wrap>
                    <ion-label stacked><h2>{{ 'core.description' | translate }}</h2></ion-label>
                    <core-rich-text-editor item-content [control]="descriptionControl" [placeholder]="'core.description' | translate" name="description" [component]="component" [componentId]="eventId"></core-rich-text-editor>
                </ion-item>

                <!-- Location. -->
                <ion-item text-wrap>
                    <ion-label stacked><h2>{{ 'core.location' | translate }}</h2></ion-label>
                    <ion-input type="text" name="location" [placeholder]="'core.location' | translate" [formControlName]="'location'"></ion-input>
                </ion-item>

                <!-- Duration. -->
                <div text-wrap radio-group [formControlName]="'duration'" class="addon-calendar-duration-container">
                    <ion-item class="addon-calendar-duration-title"><h2>{{ 'addon.calendar.eventduration' | translate }}</h2></ion-item>
                    <ion-item>
                        <ion-label>{{ 'addon.calendar.durationnone' | translate }}</ion-label>
                        <ion-radio [value]="0"></ion-radio>
                    </ion-item>
                    <ion-item>
                        <ion-label>{{ 'addon.calendar.durationuntil' | translate }}</ion-label>
                        <ion-radio [value]="1"></ion-radio>
                    </ion-item>
                    <ion-item text-wrap>
                        <ion-datetime [formControlName]="'timedurationuntil'" [placeholder]="'addon.calendar.durationuntil' | translate" [displayFormat]="dateFormat" [disabled]="eventForm.controls.duration.value != 1"></ion-datetime>
                    </ion-item>
                    <ion-item>
                        <ion-label>{{ 'addon.calendar.durationminutes' | translate }}</ion-label>
                        <ion-radio [value]="2"></ion-radio>
                    </ion-item>
                    <ion-item text-wrap>
                        <ion-input type="number" name="timedurationminutes" [placeholder]="'addon.calendar.durationminutes' | translate" [formControlName]="'timedurationminutes'" [disabled]="eventForm.controls.duration.value != 2"></ion-input>
                    </ion-item>
                </div>

                <!-- Repeat. -->
                <ion-item text-wrap>
                    <ion-label><h2>{{ 'addon.calendar.repeatevent' | translate }}</h2></ion-label>
                    <ion-checkbox item-end [formControlName]="'repeat'"></ion-checkbox>
                </ion-item>
                <ion-item text-wrap *ngIf="eventForm.controls.repeat.value">
                    <ion-label stacked><h2>{{ 'addon.calendar.repeatweeksl' | translate }}</h2></ion-label>
                    <ion-input type="number" name="repeats" [formControlName]="'repeats'"></ion-input>
                </ion-item>
            </ng-container>

            <ion-item>
                <ion-row>
                    <ion-col>
                        <button ion-button block (click)="submit()" [disabled]="!eventForm.valid">{{ 'core.save' | translate }}</button>
                    </ion-col>
                    <ion-col *ngIf="hasOffline">
                        <button ion-button block color="light" (click)="discard()">{{ 'core.discard' | translate }}</button>
                    </ion-col>
                </ion-row>
            </ion-item>
        </form>
    </core-loading>
</ion-content>