Add json download button

main/templates/main/snippets/export_user_skill_profile.html

@@ -1,14 +1,14 @@
-<!-- This template implements an export button to export the current user's skill profile as a CSV file.
- It works on the skill profile page.
+<!-- This template implements an export button to export the current user's skill profile as a CSV or json file.
 
 
-To use add a button with the class "export-skill-profile" to the page and include the following script at the end of the page.
-"{ % include "main/snippets/export_user_skill_profile.html" %}"
+To use add a button with the class `export-skill-profile-csv` and `export-skill-profile-json`
+ to the page and include the following script at the end of the page.
+`{ % include "main/snippets/export_user_skill_profile.html" %}`
 
 -->
 <script>
-    const exportSkillProfileButton = document.querySelector('.export-skill-profile');
-    exportSkillProfileButton.addEventListener('click', function () {
+    const exportSkillProfileCsvButton = document.querySelector('.export-skill-profile-csv');
+    exportSkillProfileCsvButton.addEventListener('click', function () {
       // The skill levels and chart data are passed from the Django view
       // We assume we receive the same data as the skill wheel.
       const skillLevels = {{ skill_levels|safe }};
@@ -30,4 +30,29 @@
       link.click();
       document.body.removeChild(link);
     });
+    const exportSkillProfileJSONButton = document.querySelector('.export-skill-profile-json');
+    exportSkillProfileJSONButton.addEventListener('click', function () {
+      // The skill levels and chart data are passed from the Django view
+      // We assume we receive the same data as the skill wheel.
+      const skillLevels = {{ skill_levels|safe }};
+      const charts = {{ chart_data|safe }};
+
+      const jsonData = charts.map(({user_data, user_id}) => {
+        return user_data.map(({category, skill, skill_level, subcategory}) => {
+          return {
+            category,
+            subcategory,
+            skill,
+            level: skill_level
+          };
+        });
+      }).flat();
+      const jsonContent = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(jsonData, null, 2));
+      const link = document.createElement("a");
+      link.setAttribute("href", encodedUri);
+      link.setAttribute("download", "skill_profile.json");
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    });
 </script>

main/templates/main/snippets/share_skill_profile_dropdown.html

@@ -1,4 +1,9 @@
-<!-- Share dropdown -->
+<!-- Share dropdown
+
+This template implements a share dropdown menu for the skill profile page.
+It includes options to open a shareable link, copy the link, and export the skill profile as CSV or JSON.
+
+-->
 <div class="dropdown nav d-none d-sm-block order-lg-3  justify-content-end">
     <li class="nav-item d-flex align-items-center justify-content-end">
         <a class="nav-link dropdown-toggle justify-content-end"
@@ -22,9 +27,12 @@
                 {% include "main/snippets/create_user_skill_profile_link.html" %}
             </li>
             <li>
-                <button class="dropdown-item export-skill-profile" href="#">Export as CSV</button>
-                {% include "main/snippets/export_user_skill_profile.html" %}
+                <button class="dropdown-item export-skill-profile-csv" href="#">Export as CSV</button>
             </li>
+            <li>
+                <button class="dropdown-item export-skill-profile-json" href="#">Export as JSON</button>
+            </li>
+            {% include "main/snippets/export_user_skill_profile.html" %}
         </ul>
     </li>
 </div>