Merge branch '298-dialogs-are-unnecessarily-loading-data-submitting-data' into 'master'

Resolve "Dialogs are unnecessarily loading data/submitting data"

Closes #298

See merge request !383

aleksis/apps/alsijil/frontend/components/coursebook/Coursebook.vue

@@ -38,6 +38,7 @@
                   <absence-reason-buttons
                     allow-empty
                     empty-value="present"
+                    :custom-absence-reasons="absenceReasons"
                     @input="handleMultipleAction"
                   />
                 </v-col>
@@ -51,6 +52,7 @@
         <component
           :is="itemComponent"
           :extra-marks="extraMarks"
+          :absence-reasons="absenceReasons"
           :documentation="item"
           :affected-query="lastQuery"
           :value="(selectedParticipations[item.id] ??= [])"
@@ -84,6 +86,7 @@ import AbsenceCreationDialog from "./absences/AbsenceCreationDialog.vue";
 import { extraMarks } from "../extra_marks/extra_marks.graphql";
 import DocumentationLoader from "./documentation/DocumentationLoader.vue";
 import sendToServerMixin from "./absences/sendToServerMixin";
+import { absenceReasons } from "./absences/absenceReasons.graphql";
 
 export default {
   name: "Coursebook",
@@ -153,6 +156,7 @@ export default {
       currentDate: "",
       hashUpdater: false,
       extraMarks: [],
+      absenceReasons: [],
       selectedParticipations: {},
     };
   },
@@ -161,6 +165,10 @@ export default {
       query: extraMarks,
       update: (data) => data.items,
     },
+    absenceReasons: {
+      query: absenceReasons,
+      update: (data) => data.items,
+    },
   },
   computed: {
     // Assertion: Should only fire on page load or selection change.

aleksis/apps/alsijil/frontend/components/coursebook/absences/DocumentationAbsencesModal.vue

@@ -7,6 +7,8 @@
       <documentation-absences
         compact
         v-bind="$attrs"
+        :extra-marks="extraMarks"
+        :absence-reasons="absenceReasons"
         :dialog-activator="activator"
         :value="value"
         @input="$emit('input', $event)"
@@ -14,7 +16,12 @@
     </template>
     <!-- dialog view -> deactivate dialog -->
     <!-- cancel | save (through lesson-summary) -->
-    <documentation v-bind="$attrs" @close="popup = false" />
+    <documentation
+      v-bind="$attrs"
+      :extra-marks="extraMarks"
+      :absence-reasons="absenceReasons"
+      @close="popup = false"
+    />
   </mobile-fullscreen-dialog>
 </template>
 
@@ -40,6 +47,14 @@ export default {
       type: Array,
       required: true,
     },
+    extraMarks: {
+      type: Array,
+      required: true,
+    },
+    absenceReasons: {
+      type: Array,
+      required: true,
+    },
   },
 };
 </script>

aleksis/apps/alsijil/frontend/components/coursebook/absences/ManageStudentsDialog.vue

@@ -179,9 +179,9 @@ export default {
           <v-card-text>
             <absence-reason-group-select
               allow-empty
-              empty-value="present"
               :load-selected-chip="loading"
               :value="item.absenceReason?.id || 'present'"
+              :custom-absence-reasons="absenceReasons"
               @input="sendToServer([item], 'absenceReason', $event)"
             />
             <tardiness-field
@@ -212,6 +212,7 @@ export default {
           <absence-reason-buttons
             allow-empty
             empty-value="present"
+            :custom-absence-reasons="absenceReasons"
             @input="handleMultipleAction"
           />
         </div>

aleksis/apps/alsijil/frontend/components/coursebook/absences/ParticipationList.vue

@@ -26,8 +26,8 @@ import AbsenceReasonGroupSelect from "aleksis.apps.kolego/components/AbsenceReas
                 v-if="participation.absenceReason && !compact"
                 class="full-width"
                 allow-empty
-                empty-value="present"
                 :load-selected-chip="loading"
+                :custom-absence-reasons="absenceReasons"
                 :value="participation.absenceReason?.id || 'present'"
                 @input="sendToServer([participation], 'absenceReason', $event)"
               />
@@ -35,8 +35,8 @@ import AbsenceReasonGroupSelect from "aleksis.apps.kolego/components/AbsenceReas
             <v-list-item-action v-if="participation.absenceReason && compact">
               <absence-reason-group-select
                 allow-empty
-                empty-value="present"
                 :load-selected-chip="loading"
+                :custom-absence-reasons="absenceReasons"
                 :value="participation.absenceReason?.id || 'present'"
                 @input="sendToServer([participation], 'absenceReason', $event)"
               />

aleksis/apps/alsijil/frontend/components/coursebook/absences/absenceReasons.graphql

+query absenceReasons($orderBy: [String], $filters: JSONString) {
+  items: absenceReasons(orderBy: $orderBy, filters: $filters) {
+    id
+    shortName
+    name
+    colour
+    default
+    canEdit
+    canDelete
+  }
+}

aleksis/apps/alsijil/frontend/components/coursebook/documentation/DocumentationModal.vue

@@ -9,6 +9,7 @@
         v-bind="$attrs"
         :dialog-activator="activator"
         :extra-marks="extraMarks"
+        :absence-reasons="absenceReasons"
       />
     </template>
     <!-- dialog view -> deactivate dialog -->
@@ -16,6 +17,7 @@
     <documentation
       v-bind="$attrs"
       :extra-marks="extraMarks"
+      :absence-reasons="absenceReasons"
       @close="popup = false"
     />
   </mobile-fullscreen-dialog>
@@ -41,6 +43,10 @@ export default {
       type: Array,
       required: true,
     },
+    absenceReasons: {
+      type: Array,
+      required: true,
+    },
   },
 };
 </script>

aleksis/apps/alsijil/frontend/components/coursebook/documentation/documentationPartMixin.js

@@ -40,6 +40,13 @@ export default {
       type: Array,
       required: true,
     },
+    /**
+     * Once loaded list of absence reasons to avoid excessive network and database queries
+     */
+    absenceReasons: {
+      type: Array,
+      required: true,
+    },
   },
 
   computed: {
@@ -54,6 +61,7 @@ export default {
         dialogActivator: this.dialogActivator,
         affectedQuery: this.affectedQuery,
         extraMarks: this.extraMarks,
+        absenceReasons: this.absenceReasons,
       };
     },
   },