From c5b8b4fb1998fd0bcb63e6dfe876f1f1fcc6d1d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Fri, 8 Apr 2022 14:11:52 +0200
Subject: [PATCH] MOBILE-3833 assignment: Add collapsible footer action buttons

---
 .../index/addon-mod-assign-index.html         |   3 -
 .../addon-mod-assign-submission.html          | 159 ++++++++++--------
 .../components/submission/submission.ts       |   3 +-
 src/core/classes/tabs.ts                      |   3 +
 4 files changed, 90 insertions(+), 78 deletions(-)

diff --git a/src/addons/mod/assign/components/index/addon-mod-assign-index.html b/src/addons/mod/assign/components/index/addon-mod-assign-index.html
index 5aa7a97af..599a85136 100644
--- a/src/addons/mod/assign/components/index/addon-mod-assign-index.html
+++ b/src/addons/mod/assign/components/index/addon-mod-assign-index.html
@@ -134,6 +134,3 @@
         [moduleId]="module.id">
     </addon-mod-assign-submission>
 </core-loading>
-
-<core-course-module-navigation collapsible-footer [hidden]="showLoading" [courseId]="courseId" [currentModuleId]="module.id">
-</core-course-module-navigation>
diff --git a/src/addons/mod/assign/components/submission/addon-mod-assign-submission.html b/src/addons/mod/assign/components/submission/addon-mod-assign-submission.html
index 42dde1d55..753b18636 100644
--- a/src/addons/mod/assign/components/submission/addon-mod-assign-submission.html
+++ b/src/addons/mod/assign/components/submission/addon-mod-assign-submission.html
@@ -37,7 +37,7 @@
         </ion-item>
 
         <!-- Tabs: see the submission or grade it. -->
-        <core-tabs [selectedIndex]="selectedTab" [hideUntil]="loaded" parentScrollable="true" (ionChange)="tabSelected($event)">
+        <core-tabs [hideUntil]="loaded" parentScrollable="true" (ionChange)="tabSelected($event)">
             <!-- View the submission tab. -->
             <core-tab [title]="'addon.mod_assign.submission' | translate" id="submission">
                 <ng-template>
@@ -139,79 +139,6 @@
                         [submission]="userSubmission" [plugin]="plugin">
                     </addon-mod-assign-submission-plugin>
 
-                    <!-- Add or edit submission. -->
-                    <ion-item class="ion-text-wrap" *ngIf="canEdit">
-                        <ion-label>
-                            <div *ngIf="!unsupportedEditPlugins.length && !showErrorStatementEdit">
-                                <!-- If has offline data, show edit. -->
-                                <ion-button expand="block" class="ion-text-wrap" *ngIf="hasOffline" (click)="goToEdit()">
-                                    {{ 'addon.mod_assign.editsubmission' | translate }}
-                                </ion-button>
-                                <!-- If no submission or is new, show add submission. -->
-                                <ion-button expand="block" class="ion-text-wrap" (click)="goToEdit()" *ngIf="!hasOffline &&
-                                    (!userSubmission || !userSubmission!.status || userSubmission!.status == statusNew)">
-                                    <ng-container *ngIf="!assign?.timelimit || userSubmission?.timestarted">
-                                        {{ 'addon.mod_assign.addsubmission' | translate }}
-                                    </ng-container>
-                                    <ng-container *ngIf="assign?.timelimit && (!userSubmission || !userSubmission.timestarted)">
-                                        {{ 'addon.mod_assign.beginassignment' | translate }}
-                                    </ng-container>
-                                </ion-button>
-                                <!-- If reopened, show addfromprevious and addnewattempt. -->
-                                <ng-container *ngIf="!hasOffline && userSubmission?.status == statusReopened">
-                                    <ion-button *ngIf="!isPreviousAttemptEmpty" expand="block" class="ion-text-wrap"
-                                        (click)="copyPrevious()">
-                                        {{ 'addon.mod_assign.addnewattemptfromprevious' | translate }}
-                                    </ion-button>
-                                    <ion-button expand="block" class="ion-text-wrap" (click)="goToEdit()">
-                                        {{ 'addon.mod_assign.addnewattempt' | translate }}
-                                    </ion-button>
-                                </ng-container>
-                                <!-- Else show editsubmission. -->
-                                <ion-button expand="block" class="ion-text-wrap" *ngIf="!hasOffline && userSubmission &&
-                                    userSubmission!.status && userSubmission!.status != statusNew &&
-                                    userSubmission!.status != statusReopened" (click)="goToEdit()">
-                                    {{ 'addon.mod_assign.editsubmission' | translate }}
-                                </ion-button>
-                            </div>
-                            <div *ngIf="unsupportedEditPlugins && unsupportedEditPlugins.length && !showErrorStatementEdit">
-                                <p class="core-danger-item">{{ 'addon.mod_assign.erroreditpluginsnotsupported' | translate }}</p>
-                                <p class="core-danger-item" *ngFor="let name of unsupportedEditPlugins">{{ name }}</p>
-                            </div>
-                            <div *ngIf="showErrorStatementEdit">
-                                <p class="core-danger-item">{{ 'addon.mod_assign.cannoteditduetostatementsubmission' | translate }}</p>
-                            </div>
-                        </ion-label>
-                    </ion-item>
-
-                    <!-- Submit for grading form. -->
-                    <ng-container *ngIf="canSubmit">
-                        <ion-item class="ion-text-wrap" *ngIf="submissionStatement">
-                            <ion-label>
-                                <core-format-text [text]="submissionStatement" [filter]="false"></core-format-text>
-                            </ion-label>
-                            <ion-checkbox slot="end" name="submissionstatement" [(ngModel)]="acceptStatement">
-                            </ion-checkbox>
-                        </ion-item>
-                        <!-- Submit button. -->
-                        <ion-item class="ion-text-wrap" *ngIf="!showErrorStatementSubmit">
-                            <ion-label>
-                                <ion-button expand="block" class="ion-text-wrap" (click)="submitForGrading(acceptStatement)">
-                                    {{ 'addon.mod_assign.submitassignment' | translate }}
-                                </ion-button>
-                                <p>{{ 'addon.mod_assign.submitassignment_help' | translate }}</p>
-                            </ion-label>
-                        </ion-item>
-                        <!-- Error because we lack submissions statement. -->
-                        <ion-item class="ion-text-wrap" *ngIf="showErrorStatementSubmit">
-                            <ion-label>
-                                <p class="core-danger-item">
-                                    {{ 'addon.mod_assign.cannotsubmitduetostatementsubmission' | translate }}
-                                </p>
-                            </ion-label>
-                        </ion-item>
-                    </ng-container>
-
                     <!-- Team members that need to submit it too. -->
                     <ion-item-divider class="ion-text-wrap" *ngIf="membersToSubmit && membersToSubmit.length > 0">
                         <ion-label>
@@ -236,6 +163,90 @@
                             </ion-item>
                         </ng-container>
                     </ng-container>
+
+                    <!-- Add or edit submission. -->
+                    <div collapsible-footer *ngIf="loaded && !isSubmittedForGrading" [hidden]="selectedTab !== 'submission'" slot="fixed">
+                        <div class="list-item-limited-width adaptable-buttons-row" *ngIf="canEdit || canSubmit">
+                            <ng-container *ngIf="canEdit">
+                                <ng-container *ngIf=" !unsupportedEditPlugins.length && !showErrorStatementEdit">
+                                    <!-- If has offline data, show edit. -->
+                                    <ion-button expand="block" class="ion-text-wrap" *ngIf="hasOffline" (click)="goToEdit()">
+                                        {{ 'addon.mod_assign.editsubmission' | translate }}
+                                    </ion-button>
+                                    <!-- If no submission or is new, show add submission. -->
+                                    <ion-button expand="block" class="ion-text-wrap" (click)="goToEdit()" *ngIf="!hasOffline &&
+                                        (!userSubmission || !userSubmission!.status || userSubmission!.status == statusNew)">
+                                        <ng-container *ngIf="!assign?.timelimit || userSubmission?.timestarted">
+                                            {{ 'addon.mod_assign.addsubmission' | translate }}
+                                        </ng-container>
+                                        <ng-container *ngIf="assign?.timelimit && (!userSubmission || !userSubmission.timestarted)">
+                                            {{ 'addon.mod_assign.beginassignment' | translate }}
+                                        </ng-container>
+                                    </ion-button>
+                                    <!-- If reopened, show addfromprevious and addnewattempt. -->
+                                    <ng-container *ngIf="!hasOffline && userSubmission?.status == statusReopened">
+                                        <ion-button *ngIf="!isPreviousAttemptEmpty" expand="block" class="ion-text-wrap"
+                                            (click)="copyPrevious()">
+                                            {{ 'addon.mod_assign.addnewattemptfromprevious' | translate }}
+                                        </ion-button>
+                                        <ion-button expand="block" class="ion-text-wrap" (click)="goToEdit()">
+                                            {{ 'addon.mod_assign.addnewattempt' | translate }}
+                                        </ion-button>
+                                    </ng-container>
+                                    <!-- Else show editsubmission. -->
+                                    <ion-button expand="block" class="ion-text-wrap" *ngIf="!hasOffline && userSubmission &&
+                                        userSubmission!.status && userSubmission!.status != statusNew &&
+                                        userSubmission!.status != statusReopened" (click)="goToEdit()">
+                                        {{ 'addon.mod_assign.editsubmission' | translate }}
+                                    </ion-button>
+                                </ng-container>
+                                <ion-item class="core-danger-item ion-text-wrap" *ngIf="(unsupportedEditPlugins
+                                    && unsupportedEditPlugins.length && !showErrorStatementEdit)|| showErrorStatementEdit">
+                                    <ion-label>
+                                        <ng-container
+                                            *ngIf="unsupportedEditPlugins && unsupportedEditPlugins.length && !showErrorStatementEdit">
+                                            <p>{{ 'addon.mod_assign.erroreditpluginsnotsupported' | translate }}</p>
+                                            <p *ngFor="let name of unsupportedEditPlugins">{{ name }}</p>
+                                        </ng-container>
+                                        <ng-container *ngIf="showErrorStatementEdit">
+                                            <p>{{ 'addon.mod_assign.cannoteditduetostatementsubmission' | translate }}</p>
+                                        </ng-container>
+                                    </ion-label>
+                                </ion-item>
+
+                            </ng-container>
+
+                            <!-- Submit for grading form. -->
+                            <ng-container *ngIf="canSubmit">
+                                <ion-item class="ion-text-wrap" *ngIf="submissionStatement">
+                                    <ion-label>
+                                        <core-format-text [text]="submissionStatement" [filter]="false"></core-format-text>
+                                    </ion-label>
+                                    <ion-checkbox slot="end" name="submissionstatement" [(ngModel)]="acceptStatement">
+                                    </ion-checkbox>
+                                </ion-item>
+                                <!-- Submit button. -->
+                                <ion-item class="ion-text-wrap" *ngIf="!showErrorStatementSubmit">
+                                    <ion-label>
+                                        <ion-button expand="block" class="ion-text-wrap" (click)="submitForGrading(acceptStatement)">
+                                            {{ 'addon.mod_assign.submitassignment' | translate }}
+                                        </ion-button>
+                                        <p>{{ 'addon.mod_assign.submitassignment_help' | translate }}</p>
+                                    </ion-label>
+                                </ion-item>
+                                <!-- Error because we lack submissions statement. -->
+                                <ion-item class="ion-text-wrap" *ngIf="showErrorStatementSubmit">
+                                    <ion-label>
+                                        <p class="core-danger-item">
+                                            {{ 'addon.mod_assign.cannotsubmitduetostatementsubmission' | translate }}
+                                        </p>
+                                    </ion-label>
+                                </ion-item>
+                            </ng-container>
+                        </div>
+                        <core-course-module-navigation [courseId]="courseId" [currentModuleId]="moduleId">
+                        </core-course-module-navigation>
+                    </div>
                 </ng-template>
             </core-tab>
 
diff --git a/src/addons/mod/assign/components/submission/submission.ts b/src/addons/mod/assign/components/submission/submission.ts
index 3699d2c59..f3c2f3840 100644
--- a/src/addons/mod/assign/components/submission/submission.ts
+++ b/src/addons/mod/assign/components/submission/submission.ts
@@ -184,7 +184,7 @@ export class AddonModAssignSubmissionComponent implements OnInit, OnDestroy, Can
     }
 
     /**
-     * Component being initialized.
+     * @inheritdoc
      */
     ngOnInit(): void {
         this.isSubmittedForGrading = !!this.submitId;
@@ -1195,6 +1195,7 @@ export class AddonModAssignSubmissionComponent implements OnInit, OnDestroy, Can
      * @param tab The tab that was selected.
      */
     tabSelected(tab: CoreTabComponent): void {
+        this.selectedTab = tab.id;
         // Block sync when selecting grade tab, unblock when leaving it.
         this.setGradeSyncBlocked(tab.id === 'grade');
     }
diff --git a/src/core/classes/tabs.ts b/src/core/classes/tabs.ts
index 61f006286..166711854 100644
--- a/src/core/classes/tabs.ts
+++ b/src/core/classes/tabs.ts
@@ -482,6 +482,9 @@ export class CoreTabsBaseComponent<T extends CoreTabBase> implements OnInit, Aft
      */
     async selectTab(tabId: string, e?: Event): Promise<void> {
         const index = this.tabs.findIndex((tab) => tabId == tab.id);
+        if (index < 0) {
+            return;
+        }
 
         return this.selectByIndex(index, e);
     }