Added x and ! icons to faild result in completion circles

amd/src/report-viewer-components.js

@@ -17,6 +17,7 @@ import Config from "core/config";
 
 // Make π available as a constant
 const π = Math.PI;
+// Gravity value for arrow lines - determines how much a line is pulled in the direction of the start/end before changing direction
 const LINE_GRAVITY = 1.3;
 
 export default {
@@ -147,6 +148,9 @@ export default {
                     type: String,
                     default: "",
                 },
+                icon: {
+                    type: String,
+                }
 
             },
             data() {
@@ -183,7 +187,9 @@ export default {
             methods: {
             },
             template: `
-            <svg width="1em" height="1em" viewBox="0 0 100 100">
+            <div style="display: inline-block; width: 1em; height: 1em; position:relative; padding: 0;">
+                <svg width="1em" height="1em" viewBox="0 0 100 100"
+                     style="position: absolute;top: 0;left: 0;">
                     <title>{{title}}</title>
                     <circle v-if="fraction >= 1.0" cx="50" cy="50" :r="radius" 
                         :style="'opacity: 1; stroke-width: '+ (stroke*100)+'; stroke: currentcolor; fill: none;'"/>
@@ -194,6 +200,11 @@ export default {
                             :style="'stroke-width: ' + (stroke*100) +'; stroke: currentcolor; fill: none;'"/>
                     </g>
                 </svg>
+                <i v-if='icon' :class="'fa fa-'+icon" 
+                    style=" position: absolute; top: 0.42em; left: 0.43em; text-align:center; display: inline-block; 
+                            width:1em; font-size: 0.55em; "
+                ></i>
+            </div>
             `,
         });
 
@@ -852,6 +863,22 @@ export default {
                             return "check-circle";
                     }
                 },
+                circle_icon(completion) {
+                    switch(completion){
+                        default: // case "incomplete"
+                            return null;
+                        case "failed":
+                            return "times";                            
+                        case "progress":
+                            return "exclamation";
+                        case "completed":
+                            return "check";
+                        case "good":
+                            return "check";
+                        case "excellent":
+                            return "check";
+                    }
+                },
             },
             template: `
             <b-card no-body :class="'r-item-competency completion-'+value.completion">
@@ -865,11 +892,12 @@ export default {
                     <b-col md="11">
                         <b-card-body class="align-items-center">
                             <template v-if='value.course.completion'>
-                                <r-progress-circle v-if='["progress","incomplete"].includes(value.completion)'
+                                <r-progress-circle v-if='["failed", "progress","incomplete"].includes(value.completion)'
                                     :value='value.course.completion.progress'
                                     :max='value.course.completion.count'
                                     :min='0'
                                     :class="'r-course-result r-completion-'+value.completion"
+                                    :icon='circle_icon(value.completion)'
                                     :title="text['completion_'+value.completion]"
                                 ></r-progress-circle>
                                 <i v-else v-b-popover.top 
@@ -909,16 +937,17 @@ export default {
                             <div class="r-completion-detail-header">
                                 <template v-if='value.course.completion'>
                                     {{text['completion_'+value.completion]}}
-                                    <r-progress-circle v-if='["progress","incomplete"].includes(value.completion)'
+                                    <r-progress-circle v-if='["failed","progress","incomplete"].includes(value.completion)'
                                         :value='value.course.completion.progress'
                                         :max='value.course.completion.count'
                                         :min='0'
                                         :title="text['completion_'+value.completion]"
                                         :class="'r-progress-circle-popup r-completion-'+value.completion"
-                                    ></r-progress-circle>
+                                        :icon='circle_icon(value.completion)'
-                                    <i v-else v-b-popover.top 
+                                    ></r-progress-circle
+                                    ><i v-else v-b-popover.top 
                                     :class="'fa fa-'+completion_icon(value.completion)+
-                                            ' r-completion-'+value.completion"
+                                            ' r-progress-icon-popup r-completion-'+value.completion"
                                     :title="text['completion_'+value.completion]"></i>
                                 </template>
                                 <template v-else>
@@ -1633,7 +1662,7 @@ export default {
         `,
     });
 
-    //TODO: Core completion version of student course info
+    //TAG: Core completion version of student course info
     Vue.component('r-item-teachercompletion',{
         props: {
             value : {

css/devstyles.css

@@ -835,10 +835,9 @@ tr.r-completion-category-header {
 
 .r-progress-circle-popup{
     position: relative;
-    top: -0.15em;
+    top: 0.1em;
 }
 
-
 .r-completion-detail-header {
     font-size: 20pt;
 }
@@ -879,6 +878,7 @@ table.r-item-course-grade-details td {
 }
 
 .r-course-detail-header-right {
+    width: 260px;
     text-align: end;
 }