From 3f7dde49d020ef062f3449c7ba164a063d564eea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Mon, 12 Nov 2018 13:00:51 +0100
Subject: [PATCH] MOBILE-2149 course: Show section completion on the section
 selector

---
 .../components/format/core-course-format.html  | 18 +++++++++---------
 .../module-completion/module-completion.ts     | 18 ++++++++++++------
 .../section-selector/section-selector.html     |  1 +
 .../section-selector/section-selector.scss     | 11 +++++++++++
 .../pages/section-selector/section-selector.ts | 18 ++++++++++++++++++
 src/core/course/providers/course.ts            |  9 +++++++++
 6 files changed, 60 insertions(+), 15 deletions(-)
 create mode 100644 src/core/course/pages/section-selector/section-selector.scss

diff --git a/src/core/course/components/format/core-course-format.html b/src/core/course/components/format/core-course-format.html
index 944626d79..618a83d0d 100644
--- a/src/core/course/components/format/core-course-format.html
+++ b/src/core/course/components/format/core-course-format.html
@@ -7,15 +7,6 @@
 
 <!-- Default course format. -->
 <core-dynamic-component [component]="courseFormatComponent" [data]="data">
-    <!-- Course summary. By default we only display the course progress. -->
-    <core-dynamic-component [component]="courseSummaryComponent" [data]="data">
-        <ion-list no-lines *ngIf="selectedSection && selectedSection.id == allSectionsId && course.progress != null && course.progress >= 0" class="core-format-progress-list">
-            <ion-item class="core-course-progress">
-                <core-progress-bar [progress]="course.progress"></core-progress-bar>
-            </ion-item>
-        </ion-list>
-    </core-dynamic-component>
-
     <core-loading [hideUntil]="loaded">
         <!-- Section selector. -->
         <core-dynamic-component [component]="sectionSelectorComponent" [data]="data">
@@ -30,6 +21,15 @@
             </div>
         </core-dynamic-component>
 
+        <!-- Course summary. By default we only display the course progress. -->
+        <core-dynamic-component [component]="courseSummaryComponent" [data]="data">
+            <ion-list no-lines *ngIf="selectedSection && selectedSection.id == allSectionsId && course.progress != null && course.progress >= 0" class="core-format-progress-list">
+                <ion-item class="core-course-progress">
+                    <core-progress-bar [progress]="course.progress"></core-progress-bar>
+                </ion-item>
+            </ion-list>
+        </core-dynamic-component>
+
         <!-- Single section. -->
         <div *ngIf="selectedSection && selectedSection.id != allSectionsId">
             <core-dynamic-component [component]="singleSectionComponent" [data]="data">
diff --git a/src/core/course/components/module-completion/module-completion.ts b/src/core/course/components/module-completion/module-completion.ts
index 4d3ef1b6a..9edcd0e88 100644
--- a/src/core/course/components/module-completion/module-completion.ts
+++ b/src/core/course/components/module-completion/module-completion.ts
@@ -95,22 +95,28 @@ export class CoreCourseModuleCompletionComponent implements OnChanges {
         let langKey,
             image;
 
-        if (this.completion.tracking === 1 && this.completion.state === 0) {
+        if (this.completion.tracking === CoreCourseProvider.COMPLETION_TRACKING_MANUAL &&
+                this.completion.state === CoreCourseProvider.COMPLETION_INCOMPLETE) {
             image = 'completion-manual-n';
             langKey = 'core.completion-alt-manual-n';
-        } else if (this.completion.tracking === 1 && this.completion.state === 1) {
+        } else if (this.completion.tracking === CoreCourseProvider.COMPLETION_TRACKING_MANUAL &&
+                this.completion.state === CoreCourseProvider.COMPLETION_COMPLETE) {
             image = 'completion-manual-y';
             langKey = 'core.completion-alt-manual-y';
-        } else if (this.completion.tracking === 2 && this.completion.state === 0) {
+        } else if (this.completion.tracking === CoreCourseProvider.COMPLETION_TRACKING_AUTOMATIC &&
+                this.completion.state === CoreCourseProvider.COMPLETION_INCOMPLETE) {
             image = 'completion-auto-n';
             langKey = 'core.completion-alt-auto-n';
-        } else if (this.completion.tracking === 2 && this.completion.state === 1) {
+        } else if (this.completion.tracking === CoreCourseProvider.COMPLETION_TRACKING_AUTOMATIC &&
+                this.completion.state === CoreCourseProvider.COMPLETION_COMPLETE) {
             image = 'completion-auto-y';
             langKey = 'core.completion-alt-auto-y';
-        } else if (this.completion.tracking === 2 && this.completion.state === 2) {
+        } else if (this.completion.tracking === CoreCourseProvider.COMPLETION_TRACKING_AUTOMATIC &&
+                this.completion.state === CoreCourseProvider.COMPLETION_COMPLETE_PASS) {
             image = 'completion-auto-pass';
             langKey = 'core.completion-alt-auto-pass';
-        } else if (this.completion.tracking === 2 && this.completion.state === 3) {
+        } else if (this.completion.tracking === CoreCourseProvider.COMPLETION_TRACKING_AUTOMATIC &&
+                this.completion.state === CoreCourseProvider.COMPLETION_COMPLETE_FAIL) {
             image = 'completion-auto-fail';
             langKey = 'core.completion-alt-auto-fail';
         }
diff --git a/src/core/course/pages/section-selector/section-selector.html b/src/core/course/pages/section-selector/section-selector.html
index 3939c589f..76575b617 100644
--- a/src/core/course/pages/section-selector/section-selector.html
+++ b/src/core/course/pages/section-selector/section-selector.html
@@ -13,6 +13,7 @@
         <a ion-item *ngIf="!section.hiddenbynumsections && section.id != stealthModulesSectionId" text-wrap (click)="selectSection(section)" [class.core-primary-selected-item]="selected.id == section.id" [class.item-dimmed]="section.visible === 0 || section.uservisible === false" detail-none>
             <core-icon name="fa-folder" item-start></core-icon>
             <h2><core-format-text [text]="section.formattedName || section.name"></core-format-text></h2>
+            <core-progress-bar *ngIf="section.progress" [progress]="section.progress"></core-progress-bar>
             <ion-badge color="secondary" *ngIf="section.visible === 0 && section.uservisible !== false">{{ 'core.course.hiddenfromstudents' | translate }}</ion-badge>
             <ion-badge color="secondary" *ngIf="section.availabilityinfo"><core-format-text  [text]=" section.availabilityinfo"></core-format-text></ion-badge>
         </a>
diff --git a/src/core/course/pages/section-selector/section-selector.scss b/src/core/course/pages/section-selector/section-selector.scss
new file mode 100644
index 000000000..a5f45cbdc
--- /dev/null
+++ b/src/core/course/pages/section-selector/section-selector.scss
@@ -0,0 +1,11 @@
+ion-app.app-root page-core-course-section-selector {
+    core-progress-bar {
+        .core-progress-text {
+            line-height: 24px;
+            @include position(-8px, 10px, null, null);
+        }
+        progress {
+            margin: 8px 0 4px 0;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/core/course/pages/section-selector/section-selector.ts b/src/core/course/pages/section-selector/section-selector.ts
index ee504362e..c2ed6206f 100644
--- a/src/core/course/pages/section-selector/section-selector.ts
+++ b/src/core/course/pages/section-selector/section-selector.ts
@@ -34,6 +34,24 @@ export class CoreCourseSectionSelectorPage {
     constructor(navParams: NavParams, courseHelper: CoreCourseHelperProvider, private viewCtrl: ViewController) {
         this.sections = navParams.get('sections');
         this.selected = navParams.get('selected');
+        this.sections.forEach((section) => {
+            let complete = 0,
+                total = 0;
+            section.modules && section.modules.forEach((module) => {
+                if (typeof module.completiondata != 'undefined' &&
+                        module.completiondata.tracking > CoreCourseProvider.COMPLETION_TRACKING_NONE) {
+                    total++;
+                    if (module.completiondata.state == CoreCourseProvider.COMPLETION_COMPLETE ||
+                            module.completiondata.state == CoreCourseProvider.COMPLETION_COMPLETE_PASS) {
+                        complete++;
+                    }
+                }
+            });
+
+            if (total > 0) {
+                section.progress = complete / total * 100;
+            }
+        });
     }
 
     /**
diff --git a/src/core/course/providers/course.ts b/src/core/course/providers/course.ts
index 80b34b354..e3b647579 100644
--- a/src/core/course/providers/course.ts
+++ b/src/core/course/providers/course.ts
@@ -34,6 +34,15 @@ export class CoreCourseProvider {
     static ACCESS_GUEST = 'courses_access_guest';
     static ACCESS_DEFAULT = 'courses_access_default';
 
+    static COMPLETION_TRACKING_NONE = 0;
+    static COMPLETION_TRACKING_MANUAL = 1;
+    static COMPLETION_TRACKING_AUTOMATIC = 2;
+
+    static COMPLETION_INCOMPLETE = 0;
+    static COMPLETION_COMPLETE = 1;
+    static COMPLETION_COMPLETE_PASS = 2;
+    static COMPLETION_COMPLETE_FAIL = 3;
+
     protected ROOT_CACHE_KEY = 'mmCourse:';
 
     // Variables for database.