MOBILE-3636 assign: Edit feedback modal

src/addons/mod/assign/components/components.module.ts

@@ -24,6 +24,7 @@ import { AddonModAssignIndexComponent } from './index/index';
 import { AddonModAssignSubmissionComponent } from './submission/submission';
 import { AddonModAssignSubmissionPluginComponent } from './submission-plugin/submission-plugin';
 import { AddonModAssignFeedbackPluginComponent } from './feedback-plugin/feedback-plugin';
+import { AddonModAssignEditFeedbackModalComponent } from './edit-feedback-modal/edit-feedback-modal';
 
 @NgModule({
     declarations: [
@@ -31,6 +32,7 @@ import { AddonModAssignFeedbackPluginComponent } from './feedback-plugin/feedbac
         AddonModAssignSubmissionComponent,
         AddonModAssignSubmissionPluginComponent,
         AddonModAssignFeedbackPluginComponent,
+        AddonModAssignEditFeedbackModalComponent,
     ],
     imports: [
         CommonModule,
@@ -45,6 +47,7 @@ import { AddonModAssignFeedbackPluginComponent } from './feedback-plugin/feedbac
         AddonModAssignSubmissionComponent,
         AddonModAssignSubmissionPluginComponent,
         AddonModAssignFeedbackPluginComponent,
+        AddonModAssignEditFeedbackModalComponent,
     ],
 })
 export class AddonModAssignComponentsModule {}

src/addons/mod/assign/components/edit-feedback-modal/edit-feedback-modal.html

@@ -0,0 +1,21 @@
+<ion-header>
+    <ion-toolbar>
+        <ion-buttons slot="start">
+            <ion-back-button [attr.aria-label]="'core.back' | translate"></ion-back-button>
+        </ion-buttons>
+        <ion-title>{{ plugin.name }}</ion-title>
+        <ion-buttons slot="end">
+            <ion-button (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
+                <ion-icon slot="icon-only" name="fas-times"></ion-icon>
+            </ion-button>
+        </ion-buttons>
+    </ion-toolbar>
+</ion-header>
+<ion-content>
+    <form name="addon-mod_assign-edit-feedback-form" *ngIf="userId && plugin" #editFeedbackForm>
+        <addon-mod-assign-feedback-plugin [assign]="assign" [submission]="submission" [userId]="userId"
+            [plugin]="plugin" [edit]="true">
+        </addon-mod-assign-feedback-plugin>
+        <ion-button expand="block" (click)="done($event)">{{ 'core.done' | translate }}</ion-button>
+    </form>
+</ion-content>

src/addons/mod/assign/components/edit-feedback-modal/edit-feedback-modal.ts

@@ -0,0 +1,100 @@
+// (C) Copyright 2015 Moodle Pty Ltd.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+
+import { Component, Input, ViewChild, ElementRef } from '@angular/core';
+import { CoreSites } from '@services/sites';
+import { CoreDomUtils } from '@services/utils/dom';
+import { CoreUtils } from '@services/utils/utils';
+import { ModalController, Translate } from '@singletons';
+import { AddonModAssignAssign, AddonModAssignPlugin, AddonModAssignSubmission } from '../../services/assign';
+import { AddonModAssignFeedbackDelegate } from '../../services/feedback-delegate';
+
+/**
+ * Modal that allows editing a feedback plugin.
+ */
+@Component({
+    selector: 'addon-mod-assign-edit-feedback-modal',
+    templateUrl: 'edit-feedback-modal.html',
+})
+export class AddonModAssignEditFeedbackModalComponent {
+
+    @Input() assign!: AddonModAssignAssign; // The assignment.
+    @Input() submission!: AddonModAssignSubmission; // The submission.
+    @Input() plugin!: AddonModAssignPlugin; // The plugin object.
+    @Input() userId!: number; // The user ID of the submission.
+
+    @ViewChild('editFeedbackForm') formElement?: ElementRef;
+
+    /**
+     * Close modal checking if there are changes first.
+     *
+     * @param data Data to return to the page.
+     */
+    async closeModal(): Promise<void> {
+        const changed = await this.hasDataChanged();
+        if (changed) {
+            await CoreDomUtils.instance.showConfirm(Translate.instance.instant('core.confirmcanceledit'));
+        }
+
+        CoreDomUtils.instance.triggerFormCancelledEvent(this.formElement, CoreSites.instance.getCurrentSiteId());
+
+        ModalController.instance.dismiss();
+    }
+
+    /**
+     * Done editing.
+     *
+     * @param e Click event.
+     */
+    done(e: Event): void {
+        e.preventDefault();
+        e.stopPropagation();
+
+        CoreDomUtils.instance.triggerFormSubmittedEvent(this.formElement, false, CoreSites.instance.getCurrentSiteId());
+
+        // Close the modal, sending the input data.
+        ModalController.instance.dismiss(this.getInputData());
+    }
+
+    /**
+     * Get the input data.
+     *
+     * @return Object with the data.
+     */
+    protected getInputData(): Record<string, unknown> {
+        return CoreDomUtils.instance.getDataFromForm(document.forms['addon-mod_assign-edit-feedback-form']);
+    }
+
+    /**
+     * Check if data has changed.
+     *
+     * @return Promise resolved with boolean: whether the data has changed.
+     */
+    protected async hasDataChanged(): Promise<boolean> {
+        const changed = await CoreUtils.instance.ignoreErrors(
+            AddonModAssignFeedbackDelegate.instance.hasPluginDataChanged(
+                this.assign,
+                this.submission,
+                this.plugin,
+                this.getInputData(),
+                this.userId,
+            ),
+            true,
+        );
+
+        return !!changed;
+    }
+
+}