💻 autosave feature

messages.pot

@@ -1409,9 +1409,6 @@ msgstr ""
 msgid "runs_over_time"
 msgstr ""
 
-msgid "save"
-msgstr ""
-
 msgid "save_parse_warning"
 msgstr ""
 
@@ -1790,9 +1787,6 @@ msgstr ""
 msgid "update_adventure_prompt"
 msgstr ""
 
-msgid "update_profile"
-msgstr ""
-
 msgid "update_public"
 msgstr ""
 

static/js/appbundle.js

@@ -55067,6 +55067,7 @@ ${i2}` : o2;
     addCurlyBracesToCode: () => addCurlyBracesToCode,
     add_account_placeholder: () => add_account_placeholder,
     append_classname: () => append_classname,
+    autoSave: () => autoSave,
     changeUserEmail: () => changeUserEmail,
     change_language: () => change_language,
     change_password_student: () => change_password_student,
@@ -119089,6 +119090,41 @@ pygame.quit()
       window.location.replace("/download_microbit_files/");
     }
   }
+
+  // static/js/autosave.ts
+  var DEBOUNCE_TIMEOUT = 1e3;
+  var timeoutId = null;
+  function debounce3(func, delay) {
+    return (...args) => {
+      if (timeoutId !== null) {
+        clearTimeout(timeoutId);
+      }
+      timeoutId = setTimeout(() => {
+        func(...args);
+      }, delay);
+    };
+  }
+  function autoSave(formId, customEvent = null, triggerGetRequest = null, timeout2 = DEBOUNCE_TIMEOUT) {
+    const formElement = document.getElementById(formId);
+    console.log(formId, formElement, customEvent);
+    const handler2 = debounce3((e) => {
+      if (!customEvent && e.target.dataset["autosaved"]) {
+        return;
+      }
+      formElement.requestSubmit();
+      if (triggerGetRequest) {
+        const element = document.getElementById(triggerGetRequest.elementId);
+        const eventToTrigger = new Event(triggerGetRequest.trigger);
+        element.dispatchEvent(eventToTrigger);
+      }
+    }, timeout2);
+    if (customEvent) {
+      handler2(customEvent);
+    } else {
+      formElement.addEventListener("input", handler2);
+      formElement.addEventListener("change", handler2);
+    }
+  }
   return js_exports;
 })();
 /*!

static/js/autosave.ts

@@ -0,0 +1,62 @@
+
+const DEBOUNCE_TIMEOUT = 1000;
+
+let timeoutId: ReturnType<typeof setTimeout> | null = null;
+function debounce<F extends (...args: any[]) => any> (func: F, delay: number): (...args: Parameters<F>) => void {
+  return (...args: Parameters<F>) => {
+    if (timeoutId !== null) {
+      clearTimeout(timeoutId);
+    }
+
+    timeoutId = setTimeout(() => {
+      func(...args);
+    }, delay);
+  };
+}
+
+interface GetRequest {
+  trigger: string; // event type that we need to trigger.
+  elementId: string; // element's id to trigger the event on.
+}
+
+export function autoSave(formId: string,
+  customEvent: Event | null=null,
+  triggerGetRequest: GetRequest | null = null,
+  timeout: number=DEBOUNCE_TIMEOUT,
+   ) {
+  // Debounce function to prevent excessive requests
+    const formElement = document.getElementById(formId) as HTMLFormElement;
+    console.log(formId, formElement, customEvent)
+    const handler = debounce((e: Event) => {
+        if (!customEvent && (e.target as HTMLElement).dataset["autosaved"]) {
+          // If the event is not from a customEvent with is the element autosaved, we pass.
+          return
+        }
+
+          // Now we can simply trigger the submit event on the parent form element.
+          formElement.requestSubmit()
+
+          // Sometimes different components depend on each other, that is component A needs to be updated if component B
+          // has changed. This is made mainly for the customize-class (comp. A) and partial-sortable-adventures (comp. B)
+          //  we need A to be autosaved and since B is autosaved (via htmx), a get request on some of B's elemnts would
+          // allow us to "update" B when A changes. We'll probably use this approach elsewhere too!
+          // Moreover, a similar approach should be taken if we decide to allow syncronization between components in our platform.
+          // That is, one component sends/triggers an event on another. 
+          if (triggerGetRequest) {
+            const element = document.getElementById(triggerGetRequest.elementId) as HTMLElement;
+            const eventToTrigger = new Event(triggerGetRequest.trigger);
+            element.dispatchEvent(eventToTrigger);
+          }
+    }, timeout);
+
+  if (customEvent) {
+    // A custom event could be fired by an element that's not within the form but still attributes to the 
+    // submission. For instance, the CKEditor has its own elements and the listeners that we attach here 
+    // don't include those elements.
+    handler(customEvent);
+  } else {
+    // Add event listeners to all form elements
+    formElement.addEventListener('input', handler);
+    formElement.addEventListener('change', handler);
+  }
+}

static/js/index.ts

@@ -29,3 +29,4 @@ export { loadParsonsExercise } from './parsons';
 export * from './user-activity';
 export * from './adventure';
 export * from './microbit';
+export * from './autosave';

templates/customize-adventure.html

@@ -10,7 +10,8 @@
 <div class="flex flex-col gap-2">
     <h2>{{_('customize_adventure')}}</h2>
     <div class="border-gray-400 border rounded-lg p-4">
-        <form onsubmit="event.preventDefault (); hedyApp.update_adventure('{{ adventure.id }}', {% if adventure.content|length > 0 %}false{% else %}true{% endif %}, '{{_('update_adventure_prompt')}}')"
+        <form onsubmit="event.preventDefault (); hedyApp.update_adventure('{{ adventure.id }}', true, '{{_('update_adventure_prompt')}}')"
+            id="customize_adventure"
             data-te-validation-init>
             <div class="flex  gap-4">
                 <div class="flex flex-col w-full">
@@ -92,6 +93,7 @@ <h3 class="text-center mt-0 mb-4">{{_('general_settings')}}</h3>
                         <label for="search_tags_input" class="inline-block w-40 text-xl">{{_('tags')}}</label>
                         <div class="flex flex-row w-full relative" id="add_tags">
                                 <input type="text" name="tag" autocomplete="off" placeholder="{{_('tag_input_placeholder')}}" id="search_tags_input"
+                                    data-autosaved="true"
                                     class="appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 ltr:pr-8 rtl:pl-8 rounded"
                                     hx-trigger="enter"
                                     hx-post="/tags/create/{{adventure.id}}" hx-target="#tags-list" hx-swap="outerHTML"
@@ -166,8 +168,7 @@ <h3 class="text-center mt-0 mb-4">{{ _('adventure') }}
                 </div>
             </div>
             <div class="flex flex-row justify-end gap-2 my-4">
-                <button class="blue-btn" id="preview_adventure_button" onclick="hedyApp.preview_adventure();event.preventDefault();">{{_('preview')}}</button>
-                <button type="submit" class="green-btn" id="save_adventure_button" data-te-submit-btn-ref>{{_('save')}}</button>
+                <button class="green-btn" id="preview_adventure_button" onclick="hedyApp.preview_adventure();event.preventDefault();">{{_('preview')}}</button>
                 <button type="reset" class="red-btn" id="remove_adventure_button" onclick="hedyApp.delete_adventure('{{ adventure.id }}', '{{_('delete_adventure_prompt')}}')">{{_('remove')}}</button>
             </div>
         </form>
@@ -209,4 +210,13 @@ <h3>{{_('adventure_exp_classes')}}</h3>
         </div>
     </div>
 </div>
+<script>
+    document.addEventListener("DOMContentLoaded", () => {
+        hedyApp.autoSave("customize_adventure")
+        if (window.ckEditor) {
+            window.ckEditor.model.document.on("change:data", e => hedyApp.autoSave("customize_adventure", customEvent=e))
+        }
+    });
+</script>
+
 {% endblock %}

templates/customize-class.html

@@ -19,6 +19,9 @@ <h2>{{_('customize_class')}}: {{class_info.name}}</h2>
                         available_adventures=available_adventures)
     }}
 
+    <form onsubmit="event.preventDefault(); hedyApp.save_customizations('{{class_info.id}}')"
+        id="customize_class">
+
     <div class="flex flex-col lg:flex-row gap-4">
         <div class="flex flex-col gap- w-full"> 
             <div class="flex flex-col">
@@ -176,24 +179,21 @@ <h3 class="px-4"><u>{{_('other_settings')}}</u></h3>
                 </div>
             </div>
             {% if not (is_admin and class_info.teacher != username) %}
-            <div class="flex flex-col gap-2 mt-4">
                 <div class="flex ml-auto gap-2">
-                    <button data-cy="save_customizations" class="blue-btn"
-                            onclick="hedyApp.save_customizations('{{class_info.id}}')">
-                                {{_('save')}}
-                    </button>
                     <a href="/for-teachers/class/{{class_info.id}}/preview" class="green-btn" data-cy="preview_class_link">{{_('preview')}}</a>
-                </div>
-                <div class="flex ml-auto gap-2">
                     <button class="red-btn {% if not customizations %}hidden{% endif %}"
-                        id="remove_customizations_button" data-cy="remove_customizations_button"
+                        id="remove_customizations_button" type="button" data-cy="remove_customizations_button"
                         onclick='hedyApp.restore_customization_to_default({{_('remove_customizations_prompt')|default(None)|tojson}})'>
                             {{_('remove_customization')}}
                     </button>
                 </div>
-            </div>
             {% endif %}
         </div>
     </div>
+    </form>
 </div>
+<script>
+    document.addEventListener("DOMContentLoaded", () => hedyApp.autoSave("customize_class",
+        customEvent=null, triggerGetRequest={elementId: "levels-dropdown", trigger: "input"}));
+</script>
 {% endblock %}

templates/profile.html

@@ -152,9 +152,6 @@ <h2 class="profile-section-body-header">{{_('settings')}}</h2>
                     {% endfor %}
                 </select>
             </div>
-            <div class="mb-4">
-                <button type="submit" class="green-btn mt-4">{{_('update_profile')}}</button>
-            </div>
         </form>
         <button class="red-btn" onclick="hedyApp.destroy('{{_('are_you_sure')}}')" id="delete_profile_button">{{_('destroy_profile')}}</button>
        </div>
@@ -174,7 +171,6 @@ <h2 class="profile-section-body-header">{{_('change_password')}}</h2>
                     <label for="password_repeat" class="inline-block w-72">{{_('repeat_new_password')}}</label>
                     <input id="password_repeat" name="password_repeat" class="personal-input" minlength="6" type=password role="presentation" autocomplete="new-password" required>
                 </div>
-                <button type="submit" class="green-btn mt-2">{{_('change_password')}}</button>
             </form>
         </div>
         {% if not is_teacher and not user_data['teacher_request'] %}
@@ -185,4 +181,10 @@ <h1 id="teacher_toggle" class="section-header" onclick="$ ('#request-teacher-bod
         {% endif %}
    </div>
 </div>
+<script>
+    document.addEventListener("DOMContentLoaded", () => {
+        hedyApp.autoSave("profile",)
+        hedyApp.autoSave("change_password",)
+    });
+</script>
 {% endblock %}

tests/cypress/e2e/for-teacher_page/customize-adventure_page/autosave.cy.js

@@ -0,0 +1,35 @@
+import {loginForTeacher} from '../../tools/login/login.js'
+import {goToEditAdventure} from '../../tools/navigation/nav.js'
+
+describe('auto save', () => {
+  it('should work when changing the name field.', () => {
+    cy.intercept({
+      method: "POST",
+      url: "/for-teachers/customize-adventure",
+    }).as("customizeAdventure")
+
+    loginForTeacher("teacher1");
+    goToEditAdventure();
+
+    // the rest of the fields work similar to this.
+    cy.get('#custom_adventure_name')
+      .clear()
+      .type('changed')
+
+    // there's a debouncing of 1000 second before we issue an update.
+    cy.wait(1000)
+    cy.wait("@customizeAdventure").should('have.nested.property', 'response.statusCode', 200)
+
+    cy.get('#modal_alert_container')
+      .should('be.visible');
+    cy.get('#modal_alert_text')
+      .should('be.visible')
+
+    // update it to its expected name
+    cy.get('#custom_adventure_name')
+      .clear()
+      .type('adventure1')
+    cy.wait(1000)
+    cy.wait('@customizeAdventure').should('have.nested.property', 'response.statusCode', 200);
+  })
+})