Fix grade and group selection with turbolinks

amnis-invictus · Dec 7, 2024 · 4a9de5d · 4a9de5d
1 parent f762496
commit 4a9de5d
Showing 1 changed file with 36 additions and 32 deletions.
diff --git a/app/assets/javascripts/rails_admin/custom/grade-groups.js b/app/assets/javascripts/rails_admin/custom/grade-groups.js
@@ -5,41 +5,45 @@ function arrayEq(a, b) {
   return true;
 }
 
-$('[data-component="grade-groups"]').each(function () {
-  const input = this.querySelector('input');
-  const gradeSelect = this.querySelector('select[data-target="grades"]');
-  const groupSelect = this.querySelector('select[data-target="groups"]');
+document.addEventListener('turbo:load', function () {
+  $('[data-component="grade-groups"]').each(function () {
+    const input = this.querySelector('input');
+    const gradeSelect = this.querySelector('select[data-target="grades"]');
+    const groupSelect = this.querySelector('select[data-target="groups"]');
+    const moveToGroupsButton = this.querySelector('button[data-action="move-to-groups"]');
+    const moveToGradesButton = this.querySelector('button[data-action="move-to-grades"]');
 
-  let value = JSON.parse(input.value);
-  const setValue = function (newValue) {
-    value = newValue;
-    input.value = JSON.stringify(value);
-  };
+    let value = JSON.parse(input.value);
+    const setValue = function (newValue) {
+      value = newValue;
+      input.value = JSON.stringify(value);
+    };
 
-  $('button[data-action="move-to-groups"]').on('click', function () {
-    const options = Array.from(gradeSelect.selectedOptions);
-    const grades = options.map(o => parseInt(o.value));
-    setValue([...value, grades]);
-    const newGroupOption = document.createElement('option');
-    newGroupOption.value = grades.join(',');
-    newGroupOption.text = options.map(o => o.text).join(', ');
-    groupSelect.appendChild(newGroupOption);
-    options.forEach(o => o.remove());
-  });
+    moveToGroupsButton.addEventListener('click', function () {
+      const options = Array.from(gradeSelect.selectedOptions);
+      const grades = options.map(o => parseInt(o.value));
+      setValue([...value, grades]);
+      const newGroupOption = document.createElement('option');
+      newGroupOption.value = grades.join(',');
+      newGroupOption.text = options.map(o => o.text).join(', ');
+      groupSelect.appendChild(newGroupOption);
+      options.forEach(o => o.remove());
+    });
 
-  $('button[data-action="move-to-grades"]').on('click', function () {
-    const options = Array.from(groupSelect.selectedOptions);
-    const groups = options.map(o => o.value.split(',').map(grade => parseInt(grade)));
-    const texts = options.map(o => o.text.split(','));
-    const newValue = value.filter(a => !groups.some(b => arrayEq(a, b)));
-    setValue(newValue);
-    options.forEach(o => o.remove());
-    groups.forEach((grades, i) => {
-      grades.forEach((grade, j) => {
-        const newGradeOption = document.createElement('option');
-        newGradeOption.value = grade;
-        newGradeOption.text = texts[i][j];
-        gradeSelect.appendChild(newGradeOption);
+    moveToGradesButton.addEventListener('click', function () {
+      const options = Array.from(groupSelect.selectedOptions);
+      const groups = options.map(o => o.value.split(',').map(grade => parseInt(grade)));
+      const texts = options.map(o => o.text.split(','));
+      const newValue = value.filter(a => !groups.some(b => arrayEq(a, b)));
+      setValue(newValue);
+      options.forEach(o => o.remove());
+      groups.forEach((grades, i) => {
+        grades.forEach((grade, j) => {
+          const newGradeOption = document.createElement('option');
+          newGradeOption.value = grade;
+          newGradeOption.text = texts[i][j];
+          gradeSelect.appendChild(newGradeOption);
+        });
       });
     });
   });