Display loader and messages for empty coursebook correctly using slots of crud-iterator

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

@@ -31,59 +31,79 @@
       />
     </template>
     <template #default="{ items }">
-      <template v-if="!$refs.iterator.loading">
-        <v-list-item v-for="day in groupDocsByDay(items)" two-line>
-          <v-list-item-content>
-            <v-list-item-title>{{ $d(day[0], "short") }}</v-list-item-title>
-            <v-list max-width="100%">
-              <v-list-item v-for="doc in day.slice(1)">
-                <documentation-modal
-                  :documentation="doc"
-                  :affected-query="lastQuery"
-                />
-              </v-list-item>
-            </v-list>
-          </v-list-item-content>
-        </v-list-item>
-      </template>
-      <template v-else>
-        <v-list-item v-for="_ in 10">
-          <v-list-item-content>
-            <v-list-item-title>
-              <v-skeleton-loader type="heading"/>
-            </v-list-item-title>
-            <v-list max-width="100%">
-              <v-list-item v-for="_ in 5">
-                <v-card class="my-2 full-width">
-                  <div class="full-width d-flex flex-column align-stretch flex-md-row">
-                    <v-card-text>
-                      <v-skeleton-loader
-                        type="avatar, heading, chip"
-                        class="d-flex full-width align-center gap"
-                        height="100%"
-                      />
-                    </v-card-text>
-                    <v-card-text>
-                      <v-skeleton-loader
-                        type="heading@2"
-                        class="d-flex full-width align-center gap"
-                        height="100%"
-                      />
-                    </v-card-text>
-                    <v-card-text>
-                      <v-skeleton-loader
-                        type="chip@3"
-                        class="d-flex full-width align-center justify-end gap"
-                        height="100%"
-                      />
-                    </v-card-text>
-                  </div>
-                </v-card>
-              </v-list-item>
-            </v-list>
-          </v-list-item-content>
-        </v-list-item>
-      </template>
+      <v-list-item v-for="day in groupDocsByDay(items)" two-line>
+        <v-list-item-content>
+          <v-list-item-title>{{ $d(day[0], "short") }}</v-list-item-title>
+          <v-list max-width="100%">
+            <v-list-item v-for="doc in day.slice(1)">
+              <documentation-modal
+                :documentation="doc"
+                :affected-query="lastQuery"
+              />
+            </v-list-item>
+          </v-list>
+        </v-list-item-content>
+      </v-list-item>
+    </template>
+    <template #loading>
+      <v-list-item v-for="_ in 10">
+        <v-list-item-content>
+          <v-list-item-title>
+            <v-skeleton-loader type="heading"/>
+          </v-list-item-title>
+          <v-list max-width="100%">
+            <v-list-item v-for="_ in 5">
+              <v-card class="my-2 full-width">
+                <div class="full-width d-flex flex-column align-stretch flex-md-row">
+                  <v-card-text>
+                    <v-skeleton-loader
+                      type="avatar, heading, chip"
+                      class="d-flex full-width align-center gap"
+                      height="100%"
+                    />
+                  </v-card-text>
+                  <v-card-text>
+                    <v-skeleton-loader
+                      type="heading@2"
+                      class="d-flex full-width align-center gap"
+                      height="100%"
+                    />
+                  </v-card-text>
+                  <v-card-text>
+                    <v-skeleton-loader
+                      type="chip@3"
+                      class="d-flex full-width align-center justify-end gap"
+                      height="100%"
+                    />
+                  </v-card-text>
+                </div>
+              </v-card>
+            </v-list-item>
+          </v-list>
+        </v-list-item-content>
+      </v-list-item>
+    </template>
+
+    <template #no-data>
+      <v-list-item>
+        <v-list-item-content class="d-flex justify-center align-center flex-column full-width">
+          <div class="mb-4">
+            <v-icon large color="primary">mdi-book-off-outline</v-icon>
+          </div>
+          <v-list-item-title>{{ $t("alsijil.coursebook.no_data") }}</v-list-item-title>
+        </v-list-item-content>
+      </v-list-item>
+    </template>
+
+    <template #no-results>
+      <v-list-item>
+        <v-list-item-content class="d-flex justify-center align-center flex-column full-width">
+          <div class="mb-4">
+            <v-icon large color="primary">mdi-book-alert-outline</v-icon>
+          </div>
+          <v-list-item-title>{{ $t("alsijil.coursebook.no_results", { search: $refs.iterator.search }) }}</v-list-item-title>
+        </v-list-item-content>
+      </v-list-item>
     </template>
   </c-r-u-d-iterator>
 </template>

aleksis/apps/alsijil/frontend/messages/de.json

@@ -53,7 +53,9 @@
         "groups": "Klassen",
         "courses": "Kurse",
         "filter_for_obj": "Nach Klasse und Kurs filtern"
-      }
+      },
+      "no_data": "Keine Stunden der ausgewählten Gruppen und Kurse im aktuellen Zeitraum",
+      "no_results": "Keine Suchergebnisse für {search}"
     }
   }
 }

aleksis/apps/alsijil/frontend/messages/en.json

@@ -53,7 +53,9 @@
         "groups": "School classes",
         "courses": "Courses",
         "filter_for_obj": "Filter for school class and course"
-      }
+      },
+      "no_data": "No lessons for the selected groups and courses in this period",
+      "no_results": "No search results for {search}"
     }
   }
 }