Add localStorage saving to majorProjectForm

frontend/javascript/modules/majorProjectForm.js

@@ -1,13 +1,20 @@
 import FetchUtil from "../utils/fetchUtil";
 
-export default class MajorProjectForm {
+const CACHE_KEY = "majorProjectCache"
 
+export default class MajorProjectForm {
 
     constructor(form) {
         this.form = form;
         this.endpoint = '/major_project/submit';
         this.tags_written = false;
         this.tag_keys = ["Enter", "Comma", "Tab"];
+        try {
+            this.saveState = JSON.parse(localStorage.getItem(CACHE_KEY));
+        } catch (e) {
+            console.error(e);
+            this.saveState = {};
+        }
         this.render();
     }
 
@@ -18,8 +25,27 @@ export default class MajorProjectForm {
             .addEventListener('focusout', e => this.onWriteSkill(e));
         this.form.querySelector('input[id=skill-input]')
             .addEventListener('keypress', e => this.onKeyPress(e));
+        this.form.addEventListener('input', e => this.onInput());
+        if (this.saveState) {
+            for (const [key, value] of Object.entries(this.saveState)) {
+                if (key === 'skill-list') {
+                    value.forEach((skill) => this.addSkill(skill));
+                    this.tags_written = true;
+                    continue;
+                }
+                this.form.querySelector(`*[name=${key}]`).value = value;
+            }
+        }
     }
 
+    onInput() {
+        const formData = new FormData(this.form);
+        const formDataObject = Object.fromEntries(formData.entries());
+        formDataObject['skill-list'] = this.getSkills();
+        localStorage.setItem(CACHE_KEY, JSON.stringify(formDataObject));
+    }
+
+
     onKeyPress(e) {
         if (this.tag_keys.includes(e.code)) {
             e.preventDefault();
@@ -28,6 +54,24 @@ export default class MajorProjectForm {
         return false;
     }
 
+    getSkills() {
+        let skills = [];
+
+        for (const tag of this.form.getElementsByClassName('skill-tag')) {
+            skills.push(tag.textContent);
+        }
+
+        return skills;
+    }
+
+    addSkill(skill) {
+        let input = document.getElementById("skill-input")
+        let txt = skill.replaceAll(/[^a-zA-Z0-9\+\-\.\# ]/g, ''); // allowed characters Skillslist
+        if (txt) input.insertAdjacentHTML("beforebegin", '<span class="skill-tag" id=f"ski">' + txt + '</span>');
+        let skills = this.form.getElementsByClassName("skill-tag")
+        skills.item(skills.length - 1).addEventListener('click', e => this.onRemoveTag(e));
+    }
+
     onWriteSkill(e) {
         let input = document.getElementById("skill-input")
         if (!this.tags_written) {
@@ -36,27 +80,38 @@ export default class MajorProjectForm {
             const firstTag = document.getElementsByClassName("skill-tag").item(0);
             if (firstTag) firstTag.remove();
         }
-
-        let txt = input.value.replaceAll(/[^a-zA-Z0-9\+\-\.\# ]/g, ''); // allowed characters list
-        if (txt) input.insertAdjacentHTML("beforebegin", '<span class="skill-tag" id=f"ski">' + txt + '</span>');
-        let skills = this.form.getElementsByClassName("skill-tag")
-        skills.item(skills.length - 1).addEventListener('click', e => this.onRemoveTag(e));
+        this.addSkill(input.value);
         input.value = "";
+        this.onInput()
+
     }
 
     onRemoveTag(e) {
         e.target.remove();
+        this.onInput();
     }
 
+    clearForm() {
+        const skills = this.form.getElementsByClassName("skill-tag");
+        Array.from(skills).forEach(tag => tag.remove());
+        for (const [key, value] of Object.entries(this.saveState)) {
+            if (key === 'skill-list') {
+                // We already cleaned the skills ^^
+                continue;
+            }
+            this.form.querySelector(`*[name=${key}]`).value = "";
+        }
+        this.tags_written = false;
+        localStorage.removeItem(CACHE_KEY);
+    }
+
+
     _submitForm(e) {
         e.preventDefault();
 
-        let skills = [];
+        const skills = this.getSkills();
+
 
-        for (const tag of this.form.getElementsByClassName('skill-tag')) {
-            skills.push(tag.textContent);
-        }
-
         let projectName = this.form.querySelector('input[name=name]').value;
         let projectTldr = this.form.querySelector('input[name=tldr]').value;
         let projectTimeSpent = this.form.querySelector('textarea[name=time-commitment]').value;
@@ -90,6 +145,6 @@ export default class MajorProjectForm {
             warningText: "You will not be able to edit your " +
                 "project once it has been submitted.",
             successText: "Your project has been submitted."
-        });
+        }, () => this.clearForm());
     }
-}
+}