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,24 +24,14 @@ export default {
       itPost('/api/completion/complete_learning_content/', {
         learning_content_key: learningContent.translation_key,
       }).then((data) => {
-        console.log(data);
+        this.completionData = data;
       });
-    }
     },
-  mounted() {
-    log.debug('CircleView mounted', this.circleSlug);
-    itGet(`/learnpath/api/circle/${this.circleSlug}/`).then((data) => {
-      this.circleData = data;
-      itGet(`/api/completion/circle/${this.circleData.translation_key}/`).then((completionData) => {
-        let completedLearningContents = {};
-        if (completionData?.json_data?.completed_learning_contents) {
-          completedLearningContents = completionData.json_data.completed_learning_contents;
-        }
-
+    createLearningSequences(circleData) {
       // aggregate wagtail data into LearningSequence > LearningUnit > LearningPackage hierarchy
       let learningSequence = null;
       let learningUnit = null;
-        this.circleData.children.forEach((child) => {
+      circleData.children.forEach((child) => {
         // FIXME add error detection if the data does not conform to expectations
         if(child.type === 'learnpath.LearningSequence') {
           if(learningSequence) {
@@ -57,10 +48,6 @@ export default {
           }
           learningUnit = Object.assign(child, { learningContents: [] });
         } else {
-            // must be a LearningContent
-            if (child.translation_key in completedLearningContents) {
-              child.completed = true;
-            }
           learningUnit.learningContents.push(child);
         }
       });
@@ -83,6 +70,16 @@ export default {
       });
 
       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) => {
+        this.completionData = completionData;
       });
     });
   }
@@ -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>