Merge pull request #1609 from crazyserver/MOBILE-2689

Mobile 2689

scripts/langindex.json

@@ -1176,6 +1176,7 @@
   "core.course.warningmanualcompletionmodified": "local_moodlemobileapp",
   "core.course.warningofflinemanualcompletiondeleted": "local_moodlemobileapp",
   "core.coursedetails": "moodle",
+  "core.courses.addtofavourites": "block_myoverview",
   "core.courses.allowguests": "enrol_guest",
   "core.courses.availablecourses": "moodle",
   "core.courses.cannotretrievemorecategories": "local_moodlemobileapp",
@@ -1201,6 +1202,7 @@
   "core.courses.password": "local_moodlemobileapp",
   "core.courses.paymentrequired": "moodle",
   "core.courses.paypalaccepted": "enrol_paypal",
+  "core.courses.removefromfavourites": "block_myoverview",
   "core.courses.search": "moodle",
   "core.courses.searchcourses": "moodle",
   "core.courses.searchcoursesadvice": "local_moodlemobileapp",

src/assets/lang/en.json

@@ -1176,6 +1176,7 @@
     "core.course.warningmanualcompletionmodified": "The manual completion of an activity was modified on the site.",
     "core.course.warningofflinemanualcompletiondeleted": "Some offline manual completion of course '{{name}}' has been deleted. {{error}}",
     "core.coursedetails": "Course details",
+    "core.courses.addtofavourites": "Star this course",
     "core.courses.allowguests": "This course allows guest users to enter",
     "core.courses.availablecourses": "Available courses",
     "core.courses.cannotretrievemorecategories": "Categories deeper than level {{$a}} cannot be retrieved.",
@@ -1201,6 +1202,7 @@
     "core.courses.password": "Enrolment key",
     "core.courses.paymentrequired": "This course requires a payment for entry.",
     "core.courses.paypalaccepted": "PayPal payments accepted",
+    "core.courses.removefromfavourites": "Unstar this course",
     "core.courses.search": "Search",
     "core.courses.searchcourses": "Search courses",
     "core.courses.searchcoursesadvice": "You can use the search courses button to find courses to access as a  guest or enrol yourself in courses that allow it.",

src/core/courses/components/course-options-menu/core-courses-course-options-menu.html

@@ -1,5 +1,6 @@
 <ion-item text-wrap (click)="action('download')" *ngIf="downloadCourseEnabled">
-    <ion-icon [name]="prefetch.prefetchCourseIcon" item-start></ion-icon>
+    <ion-icon *ngIf="prefetch.prefetchCourseIcon != 'spinner'" [name]="prefetch.prefetchCourseIcon" item-start></ion-icon>
+    <ion-spinner *ngIf="prefetch.prefetchCourseIcon == 'spinner'" item-start></ion-spinner>
     <h2>{{ prefetch.title | translate }}</h2>
 </ion-item>
 <ion-item text-wrap (click)="action('hide')" *ngIf="!course.hidden">
@@ -10,4 +11,12 @@
     <core-icon name="fa-eye-slash" item-start></core-icon>
     <h2>{{ 'core.courses.show' | translate }}</h2>
 </ion-item>
+<ion-item text-wrap (click)="action('favourite')" *ngIf="!course.isfavourite">
+    <core-icon name="fa-star" item-start></core-icon>
+    <h2>{{ 'core.courses.addtofavourites' | translate }}</h2>
+</ion-item>
+<ion-item text-wrap (click)="action('unfavourite')" *ngIf="course.isfavourite">
+    <core-icon name="fa-star-o" item-start></core-icon>
+    <h2>{{ 'core.courses.removefromfavourites' | translate }}</h2>
+</ion-item>
 

src/core/courses/components/course-progress/core-courses-course-progress.html

@@ -1,10 +1,12 @@
 <ion-card [attr.course-color]="course.id % 10">
     <div (click)="openCourse(course)" class="core-course-thumb" [class.core-course-color-img]="course.courseImage">
         <img *ngIf="course.courseImage" [src]="course.courseImage" core-external-content alt=""/>
-        <core-icon name="fa-star" *ngIf="course.isfavourite"></core-icon>
     </div>
     <ion-item tappable text-wrap detail-none (click)="openCourse(course)" [title]="course.displayname || course.fullname" class="core-course-link" [class.item-disabled]="course.visible == 0" [class.core-course-more-than-title]="(course.summary && course.summary.length) || (course.progress != null && course.progress >= 0)">
-        <h2><core-format-text [text]="course.displayname || course.fullname"></core-format-text></h2>
+        <h2>
+            <core-icon name="fa-star" *ngIf="course.isfavourite"></core-icon>
+            <core-format-text [text]="course.displayname || course.fullname"></core-format-text>
+        </h2>
 
         <div class="core-button-spinner" *ngIf="downloadCourseEnabled && !courseOptionMenuEnabled">
             <!-- Download course. -->
@@ -16,13 +18,13 @@
         </div>
 
         <div class="core-button-spinner" *ngIf="courseOptionMenuEnabled">
-            <!-- Options menu. -->
-            <button ion-button icon-only clear color="dark" (click)="showCourseOptionsMenu($event)" *ngIf="prefetchCourseData.prefetchCourseIcon != 'spinner' && !showSpinner">
-                <core-icon name="more"></core-icon>
-            </button>
-
             <!-- Download course spinner. -->
             <ion-spinner *ngIf="prefetchCourseData.prefetchCourseIcon == 'spinner' || showSpinner"></ion-spinner>
+
+            <!-- Options menu. -->
+            <button ion-button icon-only clear color="dark" (click)="showCourseOptionsMenu($event)" *ngIf="!showSpinner">
+                <core-icon name="more"></core-icon>
+            </button>
         </div>
     </ion-item>
     <ion-item text-wrap *ngIf="course.summary && course.summary.length" [class.item-disabled]="course.visible == 0">

src/core/courses/components/course-progress/course-progress.scss

@@ -1,3 +1,5 @@
+$core-star-color: $core-color !default;
+
 ion-app.app-root core-courses-course-progress {
     ion-card.card {
         display: flex;
@@ -29,16 +31,6 @@ ion-app.app-root core-courses-course-progress {
                 bottom: 0;
                 margin: auto;
             }
-
-            ion-icon {
-                position: absolute;
-                @include position(0, null, null, 0);
-                padding: 16px;
-                color: $gray-darker;
-                 -webkit-text-stroke-width: 0.5px;
-                 -webkit-text-stroke-color: $gray-lighter;
-                font-size: 16px;
-            }
         }
 
         .core-course-link {
@@ -55,11 +47,24 @@ ion-app.app-root core-courses-course-progress {
             h2 {
                 margins: 6px 0;
                 flex-grow: 1;
+
+                ion-icon {
+                    margin-right: 4px;
+                    color: $core-star-color;
+                }
             }
 
             &.core-course-more-than-title {
                 padding-bottom: 0;
             }
+
+            .core-button-spinner .spinner {
+                vertical-align: middle;
+            }
+
+            .item-button[icon-only] {
+                min-width: 50px;
+            }
         }
         .label {
             @include margin(0, 0, 0, null);

src/core/courses/components/course-progress/course-progress.ts

@@ -178,7 +178,9 @@ export class CoreCoursesCourseProgressComponent implements OnInit, OnDestroy {
             if (action) {
                 switch (action) {
                     case 'download':
-                        this.prefetchCourse(e);
+                        if (this.prefetchCourseData.prefetchCourseIcon != 'spinner') {
+                            this.prefetchCourse(e);
+                        }
                         break;
                     case 'hide':
                         this.setCourseHidden(true);
@@ -186,6 +188,12 @@ export class CoreCoursesCourseProgressComponent implements OnInit, OnDestroy {
                     case 'show':
                         this.setCourseHidden(false);
                         break;
+                    case 'favourite':
+                        this.setCourseFavourite(true);
+                        break;
+                    case 'unfavourite':
+                        this.setCourseFavourite(false);
+                        break;
                     default:
                         break;
                 }
@@ -214,6 +222,23 @@ export class CoreCoursesCourseProgressComponent implements OnInit, OnDestroy {
         });
     }
 
+    /**
+     * Favourite/Unfavourite the course from the course list.
+     *
+     * @param {boolean} favourite True to favourite and false to unfavourite.
+     */
+    protected setCourseFavourite(favourite: boolean): void {
+        this.showSpinner = true;
+
+        this.coursesProvider.setFavouriteCourse(this.course.id, favourite).then(() => {
+            this.course.isfavourite = favourite;
+            this.eventsProvider.trigger(
+                CoreCoursesProvider.EVENT_MY_COURSES_UPDATED, {course: this.course}, this.sitesProvider.getCurrentSiteId());
+        }).finally(() => {
+            this.showSpinner = false;
+        });
+    }
+
     /**
      * Component destroyed.
      */

src/core/courses/lang/en.json

@@ -1,4 +1,5 @@
 {
+    "addtofavourites": "Star this course",
     "allowguests": "This course allows guest users to enter",
     "availablecourses": "Available courses",
     "cannotretrievemorecategories": "Categories deeper than level {{$a}} cannot be retrieved.",
@@ -24,6 +25,7 @@
     "password": "Enrolment key",
     "paymentrequired": "This course requires a payment for entry.",
     "paypalaccepted": "PayPal payments accepted",
+    "removefromfavourites": "Unstar this course",
     "search": "Search",
     "searchcourses": "Search courses",
     "searchcoursesadvice": "You can use the search courses button to find courses to access as a  guest or enrol yourself in courses that allow it.",

src/core/courses/providers/courses.ts

@@ -938,4 +938,27 @@ export class CoreCoursesProvider {
             });
         });
     }
+
+    /**
+     * Set favourite property on a course.
+     *
+     * @param {number} courseId   Course ID.
+     * @param {boolean} favourite If favourite or unfavourite.
+     * @param {string} [siteId] Site ID. If not defined, use current site.
+     * @return {Promise<any>} Promise resolved when done.
+     */
+    setFavouriteCourse(courseId: number, favourite: boolean, siteId?: string): Promise<any> {
+        return this.sitesProvider.getSite(siteId).then((site) => {
+            const params: any = {
+                    courses: [
+                        {
+                            id: courseId,
+                            favourite: favourite ? 1 : 0
+                        }
+                    ]
+                };
+
+            return site.write('core_course_set_favourite_courses', params);
+        });
+    }
 }