Check/Uncheck learning contents

client/src/components/circle/LearningSequence.vue

@@ -3,7 +3,15 @@
 
 import ItCheckbox from '@/components/ui/ItCheckbox.vue';
 
-defineProps(['learningSequence'])
+const props = defineProps(['learningSequence', 'completionData'])
+
+const contentCompleted = (learningContent) => {
+  if (props.completionData?.json_data?.completed_learning_contents) {
+    return learningContent.translation_key in props.completionData.json_data.completed_learning_contents;
+  }
+
+  return false;
+}
 
 </script>
 
@@ -32,7 +40,7 @@ defineProps(['learningSequence'])
           class="flex items-center gap-4 pb-3"
         >
           <ItCheckbox
-            :modelValue="learningContent.completed"
+            :modelValue="contentCompleted(learningContent)"
             @click="$emit('toggleLearningContentCheckbox', learningContent)"
           >
             {{ learningContent.contents[0].type }}: {{ learningContent.title }}

client/src/views/CircleView.vue

@@ -13,6 +13,7 @@ export default {
       count: 0,
       circleData: {},
       learningSequences: [],
+      completionData: {},
     }
   },
   methods: {
@@ -23,66 +24,62 @@ export default {
       itPost('/api/completion/complete_learning_content/', {
         learning_content_key: learningContent.translation_key,
       }).then((data) => {
-        console.log(data);
+        this.completionData = data;
       });
-    }
+    },
+    createLearningSequences(circleData) {
+      // aggregate wagtail data into LearningSequence > LearningUnit > LearningPackage hierarchy
+      let learningSequence = null;
+      let learningUnit = null;
+      circleData.children.forEach((child) => {
+        // FIXME add error detection if the data does not conform to expectations
+        if(child.type === 'learnpath.LearningSequence') {
+          if(learningSequence) {
+            if(learningUnit) {
+              learningSequence.learningUnits.push(learningUnit);
+            }
+            this.learningSequences.push(learningSequence);
+          }
+          learningSequence = Object.assign(child, { learningUnits: [] });
+          learningUnit = { id: null, title: '', learningContents: [] };
+        } else if(child.type === 'learnpath.LearningUnit') {
+          if(learningUnit && learningUnit.learningContents.length) {
+            learningSequence.learningUnits.push(learningUnit);
+          }
+          learningUnit = Object.assign(child, { learningContents: [] });
+        } else {
+          learningUnit.learningContents.push(child);
+        }
+      });
+
+      if(learningUnit) {
+        learningSequence.learningUnits.push(learningUnit);
+      }
+      this.learningSequences.push(learningSequence);
+
+      // sum minutes
+      this.learningSequences.forEach((learningSequence) => {
+        learningSequence.minutes = 0;
+        learningSequence.learningUnits.forEach((learningUnit) => {
+          learningUnit.minutes = 0;
+          learningUnit.learningContents.forEach((learningContent) => {
+            learningUnit.minutes += learningContent.minutes;
+          });
+          learningSequence.minutes += learningUnit.minutes;
+        });
+      });
+
+      log.debug(this.learningSequences);
+    },
   },
   mounted() {
     log.debug('CircleView mounted', this.circleSlug);
     itGet(`/learnpath/api/circle/${this.circleSlug}/`).then((data) => {
       this.circleData = data;
+      this.createLearningSequences(data);
+
       itGet(`/api/completion/circle/${this.circleData.translation_key}/`).then((completionData) => {
-        let completedLearningContents = {};
+        this.completionData = completionData;
-        if (completionData?.json_data?.completed_learning_contents) {
-          completedLearningContents = completionData.json_data.completed_learning_contents;
-        }
-
-        // aggregate wagtail data into LearningSequence > LearningUnit > LearningPackage hierarchy
-        let learningSequence = null;
-        let learningUnit = null;
-        this.circleData.children.forEach((child) => {
-          // FIXME add error detection if the data does not conform to expectations
-          if(child.type === 'learnpath.LearningSequence') {
-            if(learningSequence) {
-              if(learningUnit) {
-                learningSequence.learningUnits.push(learningUnit);
-              }
-              this.learningSequences.push(learningSequence);
-            }
-            learningSequence = Object.assign(child, { learningUnits: [] });
-            learningUnit = { id: null, title: '', learningContents: [] };
-          } else if(child.type === 'learnpath.LearningUnit') {
-            if(learningUnit && learningUnit.learningContents.length) {
-              learningSequence.learningUnits.push(learningUnit);
-            }
-            learningUnit = Object.assign(child, { learningContents: [] });
-          } else {
-            // must be a LearningContent
-            if (child.translation_key in completedLearningContents) {
-              child.completed = true;
-            }
-            learningUnit.learningContents.push(child);
-          }
-        });
-
-        if(learningUnit) {
-          learningSequence.learningUnits.push(learningUnit);
-        }
-        this.learningSequences.push(learningSequence);
-
-        // sum minutes
-        this.learningSequences.forEach((learningSequence) => {
-          learningSequence.minutes = 0;
-          learningSequence.learningUnits.forEach((learningUnit) => {
-            learningUnit.minutes = 0;
-            learningUnit.learningContents.forEach((learningContent) => {
-              learningUnit.minutes += learningContent.minutes;
-            });
-            learningSequence.minutes += learningUnit.minutes;
-          });
-        });
-
-        log.debug(this.learningSequences);
       });
     });
   }
@@ -124,7 +121,10 @@ export default {
 
       <div class="flex-auto bg-gray-100 px-4 py-8 lg:px-24">
         <div v-for="learningSequence in learningSequences">
-          <LearningSequence :learning-sequence="learningSequence" @toggleLearningContentCheckbox="toggleLearningContentCheckbox"></LearningSequence>
+          <LearningSequence
+            :learning-sequence="learningSequence" @toggleLearningContentCheckbox="toggleLearningContentCheckbox"
+            :completion-data="completionData"
+          ></LearningSequence>
         </div>
 
       </div>