refactor: Adapte code for Learning Path

Author: thomasdenecker

components/CardSession.vue

@@ -55,6 +55,11 @@ export default {
       var pathParts = stepPath.replace("/_dir", "");
       var id = pathParts.split("/");
       id = id[id.length - 1];
+
+      if (!pathParts.startsWith("/")) {
+        pathParts = "/" + pathParts;
+      }
+
       const router = useRouter();
       router.push({
         path: pathParts.replace(id, ""),

components/nav.vue

@@ -30,7 +30,7 @@
         <v-list>
           <v-list-item>
             <a
-              href="https://github.com/IFB-ElixirFr/Wasm4Learn-doc"
+              href="https://ifb-elixirfr.github.io/Wasm4Learn-doc/"
               target="_blank"
               style="all: unset; cursor: pointer"
               ><v-list-item-title>Documentation</v-list-item-title></a

pages/courses-all.vue

@@ -52,14 +52,16 @@
       </v-col>
       <v-col cols="2"
         ><h3>Filters</h3>
-
         <v-radio-group v-model="radioLang">
-          <v-radio
-            v-for="(l, kl) in lang"
-            :key="kl"
-            :label="l"
-            :value="l"
-          ></v-radio>
+          <div v-for="(type, kt) in filterDict" :key="kt">
+            <p class="text-h6">{{ kt }}</p>
+            <v-radio
+              v-for="(t, kt) in type"
+              :key="kt"
+              :label="t"
+              :value="t"
+            ></v-radio>
+          </div>
         </v-radio-group>
 
         <v-btn @click="filter" class="ma-2" block> Filter </v-btn>
@@ -74,7 +76,7 @@ import "/node_modules/flag-icons/css/flag-icons.min.css";
 
 // Funtion to filter a json
 function filterJson(item) {
-  return item.langName == this;
+  return item.name == this;
 }
 
 export default {
@@ -86,23 +88,37 @@ export default {
 
     var data = [];
     var lang = [];
+    var filterDict = {};
+
     for (const [knL1, nL1] of Object.entries(navigation.value)) {
       for (const [kn, n] of Object.entries(nL1.children)) {
+        if (!(nL1.title in filterDict)) {
+          filterDict[nL1.title] = [];
+        }
+        filterDict[nL1.title].push(n.title);
         lang.push(n.title);
-        for (const [kt, t] of Object.entries(n.children)) {
-          for (const [kc, c] of Object.entries(t.children)) {
-            var temp = c;
-            temp["parentPath"] = t._path;
-            temp["langImage"] = n.image;
-            temp["langName"] = n.title;
-            temp["type"] = t.title;
-            data.push(temp);
+        if (nL1.title === "Learning Path") {
+          var temp = n;
+          temp["parentPath"] = nL1._path;
+          temp["name"] = n.title;
+          temp["type"] = nL1.title;
+          data.push(temp);
+        } else {
+          for (const [kt, t] of Object.entries(n.children)) {
+            for (const [kc, c] of Object.entries(t.children)) {
+              var temp = c;
+              temp["parentPath"] = t._path;
+              temp["langImage"] = n.image;
+              temp["name"] = n.title;
+              temp["type"] = t.title;
+              data.push(temp);
+            }
           }
         }
       }
     }
 
-    return { navigation, data, lang };
+    return { navigation, data, lang, filterDict };
   },
   data() {
     return {

pages/index.vue

@@ -109,11 +109,15 @@
   <v-sheet style="background-color: #0080bc" id="getStarted">
     <v-container class="pa-10 text-white text-center">
       <p class="text-h3 ma-5">
-        <span style="color: #cddd00">Learning path</span> design by trainers
+        <span style="color: #cddd00">Pedagogical content</span> design by
+        trainers
       </p>
       <div v-for="(navel, key_navel) in navigation" :key="key_navel">
-        <p class="text-h4">By {{  navel.title }}</p>
-        <div class="d-flex flex-wrap justify-center">
+        <p class="text-h4">By {{ navel.title }}</p>
+        <div
+          class="d-flex flex-wrap justify-center"
+          v-if="navel.title != 'Learning Path'"
+        >
           <v-card
             width="300px"
             class="ma-5 rounded-lg"
@@ -139,6 +143,30 @@
             </v-card-text>
           </v-card>
         </div>
+        <div v-else class="d-flex flex-wrap justify-center">
+          <v-card
+            width="300px"
+            class="ma-5 rounded-lg"
+            v-for="(n, key) in navel.children"
+            :key="key"
+            @click="changePathLearningPath(navel._path, n._dir)"
+            elevation="5"
+          >
+            <v-card-text class="d-flex flex-column" style="height: 100%">
+              <div class="text-center mb-10" v-if="'image' in n">
+                <img :src="n.image" alt="logo" style="height: 100px" />
+              </div>
+              <h1>{{ n.title }}</h1>
+              <br />
+              <p class="text-subtitle-1">{{ n.description }}</p>
+              <br />
+              <v-spacer></v-spacer>
+              <div v-if="n.steps">
+                <p><b>Number of sessions</b> : {{ n.steps.length }}</p>
+              </div>
+            </v-card-text>
+          </v-card>
+        </div>
       </div>
     </v-container>
   </v-sheet>
@@ -238,6 +266,10 @@ export default {
       const router = useRouter();
       router.push({ path: path + "/" });
     },
+    changePathLearningPath(pathParent, dir) {
+      const router = useRouter();
+      router.push({ path: pathParent + "/", query: { id: dir } });
+    },
     getSection(n) {
       if (n.children !== undefined) {
         return n.children.length;