📝 CodeRabbit Chat: Add retry and unsaved notice for question list ordering

assets/controllers/bo/question_list_controller.js

@@ -1,7 +1,10 @@
 import {Controller} from '@hotwired/stimulus';
+import {Modal} from 'bootstrap';
+
+const RETRY_DELAY_MS = 1000;
 
 export default class extends Controller {
-  static targets = ['list', 'item', 'status'];
+  static targets = ['list', 'item', 'status', 'noticeModal'];
   static values = {
     reorderUrl: String,
     csrf: String,
@@ -24,6 +27,10 @@ export default class extends Controller {
       handle.setAttribute('draggable', 'true');
 
       handle.addEventListener('dragstart', (e) => {
+        if (this._locked) {
+          e.preventDefault();
+          return;
+        }
         this._dragging = el;
         e.dataTransfer.effectAllowed = 'move';
         setTimeout(() => el.classList.add('opacity-50'), 0);
@@ -107,15 +114,40 @@ export default class extends Controller {
       if (numberEl) numberEl.textContent = String(i + 1);
     });
 
-    try {
+    const attempt = async () => {
       const res = await fetch(this.reorderUrlValue, {method: 'POST', body: params});
-      if (res.ok) {
+      if (!res.ok) {
-        this._setStatus('saved');
+        throw new Error(`Unexpected response status: ${res.status}`);
-      } else {
-        this._setStatus('error');
       }
+    };
+
+    try {
+      await attempt();
     } catch {
-      this._setStatus('error');
+      await new Promise(resolve => setTimeout(resolve, RETRY_DELAY_MS));
+      try {
+        await attempt();
+      } catch {
+        this._setStatus('error');
+        this._lockReordering();
+        return;
+      }
+    }
+
+    this._setStatus('saved');
+  }
+
+  _lockReordering() {
+    this._locked = true;
+    this.itemTargets.forEach(el => {
+      const handle = el.querySelector('[data-drag-handle]');
+      if (handle) {
+        handle.removeAttribute('draggable');
+        handle.classList.add('opacity-25', 'pe-none');
+      }
+    });
+    if (this.hasNoticeModalTarget) {
+      Modal.getOrCreateInstance(this.noticeModalTarget).show();
     }
   }
 }

templates/backoffice/quiz/tab_overview.html.twig

@@ -152,6 +152,25 @@
                 </div>
             </div>
         </div>
+
+        <div class="modal fade" tabindex="-1"
+             data-bo--question-list-target="noticeModal"
+             aria-labelledby="questionReorderErrorModalLabel" aria-hidden="true">
+            <div class="modal-dialog">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title" id="questionReorderErrorModalLabel">{{ 'Could not save order'|trans }}</h5>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                    </div>
+                    <div class="modal-body">
+                        {{ 'The new question order could not be saved. Reordering has been disabled until you refresh the page.'|trans }}
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ 'Close'|trans }}</button>
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
 
     {{ _self.confirm_modal(

translations/messages+intl-icu.nl.xliff

@@ -181,6 +181,10 @@
         <source>Could not find candidate with name {name} in elimination.</source>
         <target>Kon geen kandidaat vinden met de naam {name} in de eliminatie</target>
       </trans-unit>
+      <trans-unit id="Cn0sav3" resname="Could not save order">
+        <source>Could not save order</source>
+        <target>Kon volgorde niet opslaan</target>
+      </trans-unit>
       <trans-unit id="0DvmToq" resname="Create a season">
         <source>Create a season</source>
         <target>Maak een seizoen aan</target>
@@ -649,6 +653,10 @@
         <source>Sync latest changes to this quiz</source>
         <target>Laatste wijzigingen synchroniseren naar deze quiz</target>
       </trans-unit>
+      <trans-unit id="F3q1oXk" resname="The new question order could not be saved. Reordering has been disabled until you refresh the page.">
+        <source>The new question order could not be saved. Reordering has been disabled until you refresh the page.</source>
+        <target>De nieuwe volgorde van de vragen kon niet worden opgeslagen. Herordenen is uitgeschakeld totdat u de pagina vernieuwt.</target>
+      </trans-unit>
       <trans-unit id="_z4el3Z" resname="The password fields must match.">
         <source>The password fields must match.</source>
         <target>De wachtwoorden moeten overeen komen.</target>