MOBILE-3833 module: Only show uncompleted completion conditions

src/core/features/course/components/module-completion/core-course-module-completion.html

@@ -5,21 +5,24 @@
 
             <ng-container *ngIf="completion.istrackeduser">
                 <ng-container *ngFor="let rule of details">
-                    <ion-chip *ngIf="rule.statuscomplete" color="success" role="listitem" [attr.aria-label]="rule.accessibleDescription">
+                    <ion-chip *ngIf="rule.statuscomplete" color="success" role="listitem" [attr.aria-label]="rule.accessibleDescription"
+                        class="completioninfo completion_complete">
                         <ion-icon name="fas-check" [attr.aria-label]="'core.course.completion_automatic:done' | translate "></ion-icon>
                         <ion-label>
                             {{ rule.rulevalue.description }}
                         </ion-label>
                     </ion-chip>
 
-                    <ion-chip *ngIf="rule.statuscompletefail" color="danger" role="listitem" [attr.aria-label]="rule.accessibleDescription">
+                    <ion-chip *ngIf="rule.statuscompletefail" color="danger" role="listitem" [attr.aria-label]="rule.accessibleDescription"
+                        class="completioninfo completion_fail">
                         <ion-icon name="fas-times" [attr.aria-label]="'core.course.completion_automatic:failed' | translate "></ion-icon>
                         <ion-label>
                             {{ rule.rulevalue.description }}
                         </ion-label>
                     </ion-chip>
 
-                    <ion-chip *ngIf="rule.statusincomplete" color="dark" role="listitem" [attr.aria-label]="rule.accessibleDescription">
+                    <ion-chip *ngIf="rule.statusincomplete" color="dark" role="listitem" [attr.aria-label]="rule.accessibleDescription"
+                        class="completioninfo completion_incomplete">
                         <ion-icon name="fas-edit" [attr.aria-label]="'core.course.completion_automatic:todo' | translate "></ion-icon>
                         <ion-label>
                             {{ rule.rulevalue.description }}
@@ -29,7 +32,7 @@
             </ng-container>
 
             <ng-container *ngIf="!completion.istrackeduser">
-                <ion-chip *ngFor="let rule of details" role="listitem">
+                <ion-chip *ngFor="let rule of details" role="listitem" class="core-module-completion-todo">
                     <ion-icon name="fas-edit" [attr.aria-label]="'core.course.completion_automatic:todo' | translate "></ion-icon>
                     <ion-label>
                         {{ rule.rulevalue.description }}

src/core/features/course/components/module-completion/module-completion.scss

@@ -1,12 +0,0 @@
-:host {
-    .core-module-automatic-completion-conditions {
-        ion-badge {
-            font-weight: normal;
-            margin-right: 5px;
-
-            &[color="medium"] {
-                color: black;
-            }
-        }
-    }
-}

src/core/features/course/components/module-completion/module-completion.ts

@@ -36,7 +36,6 @@ import { Translate } from '@singletons';
 @Component({
     selector: 'core-course-module-completion',
     templateUrl: 'core-course-module-completion.html',
-    styleUrls: ['module-completion.scss'],
 })
 export class CoreCourseModuleCompletionComponent extends CoreCourseModuleCompletionBaseComponent {
 

src/core/features/course/components/module/core-course-module.html

@@ -71,7 +71,7 @@
                 </core-format-text>
 
                 <!-- Module completion. Only auto conditions-->
-                <core-course-module-completion *ngIf="module.completiondata && module.uservisible" [completion]="module.completiondata"
+                <core-course-module-completion *ngIf="autoCompletionTodo && module.uservisible" [completion]="module.completiondata"
                     [moduleName]="module.name" [moduleId]="module.id" [showCompletionConditions]="showCompletionConditions">
                 </core-course-module-completion>
 

src/core/features/course/components/module/module.scss

@@ -8,6 +8,10 @@
         margin-right: var(--horizontal-margin);
     }
 
+    ion-item {
+        --padding-start: 12px;
+    }
+
     ion-item.core-module-main-item {
         --min-height: 52px;
 
@@ -84,4 +88,7 @@
         @include margin-horizontal(null, 8px);
     }
 
+    .core-course-module-info ::ng-deep core-course-module-completion .core-module-automatic-completion-conditions .completioninfo.completion_complete {
+        display: none;
+    }
 }

src/core/features/course/components/module/module.ts

@@ -20,7 +20,7 @@ import {
     CoreCourseModuleCompletionData,
     CoreCourseSection,
 } from '@features/course/services/course-helper';
-import { CoreCourse } from '@features/course/services/course';
+import { CoreCourse, CoreCourseModuleCompletionStatus, CoreCourseModuleCompletionTracking } from '@features/course/services/course';
 import { CoreCourseModuleDelegate, CoreCourseModuleHandlerButton } from '@features/course/services/module-delegate';
 import {
     CoreCourseModulePrefetchDelegate,
@@ -55,6 +55,8 @@ export class CoreCourseModuleComponent implements OnInit, OnDestroy {
     showManualCompletion = false; // Whether to show manual completion when completion conditions are disabled.
     prefetchStatusIcon = ''; // Module prefetch status icon.
     prefetchStatusText = ''; // Module prefetch status text.
+    autoCompletionTodo = false;
+
     protected prefetchHandler?: CoreCourseModulePrefetchHandler;
 
     protected moduleStatusObserver?: CoreEventObserver;
@@ -73,10 +75,18 @@ export class CoreCourseModuleComponent implements OnInit, OnDestroy {
 
         this.module.handlerData.a11yTitle = this.module.handlerData.a11yTitle ?? this.module.handlerData.title;
 
+        const completionStatus = this.showCompletionConditions && this.module.completiondata?.isautomatic &&
+            this.module.completiondata.tracking == CoreCourseModuleCompletionTracking.COMPLETION_TRACKING_AUTOMATIC
+            ? this.module.completiondata.state
+            : undefined;
+
+        this.autoCompletionTodo = completionStatus == CoreCourseModuleCompletionStatus.COMPLETION_INCOMPLETE ||
+            completionStatus == CoreCourseModuleCompletionStatus.COMPLETION_COMPLETE_FAIL;
+
         this.hasInfo = !!(
             this.module.description ||
             (this.showActivityDates && this.module.dates && this.module.dates.length) ||
-            (this.module.completiondata && this.showCompletionConditions && this.module.completiondata.isautomatic) ||
+            (this.autoCompletionTodo) ||
             (this.module.visible === 0 && (!this.section || this.section.visible)) ||
             (this.module.visible !== 0 && this.module.isStealth) ||
             (this.module.availabilityinfo)