Fix empty search message

frontend/src/assets/lang/app/en.json

@@ -185,7 +185,8 @@
             },
             "noCourses":  {
                 "student": "No courses found. Register for a public course using the search function, or use an invitation link from a teacher.",
-                "teacher": "No courses found. Create a new course with the button below."
+                "teacher": "No courses found. Create a new course with the button below.",
+                "search": "No courses found for the given search criteria."
             },
             "noResults": "No results.",
             "noIncomingProjects": "No projects with a deadline within 7 days.",

frontend/src/assets/lang/app/nl.json

@@ -182,7 +182,8 @@
             },
             "noCourses": {
                 "student": "Geen vakken gevonden. Schrijf in op een openbaar vak met de zoekfunctie, of gebruik een uitnodiginslink van een lesgever.",
-                "teacher": "Geen vakken gevonden. Maak een vak aan met onderstaande knop."
+                "teacher": "Geen vakken gevonden. Maak een vak aan met onderstaande knop.",
+                "search": "Geen vakken gevonden voor de gegeven zoekcriteria."
             },
             "noResults": "Geen resultaten.",
             "noIncomingProjects": "Geen projecten met een deadline binnen de 7 dagen.",

frontend/src/views/courses/SearchCourseView.vue

@@ -1,49 +1,49 @@
-<script setup lang="ts">
-import SelectButton from 'primevue/selectbutton';
-import { computed, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-import PublicSearchCourseView from './search/PublicSearchCourseView.vue';
-import ProtectedSearchCourseView from './search/ProtectedSearchCourseView.vue';
-
-/* Composable injections */
-const { t } = useI18n();
-
-/* State of the public/protected course */
-const publicCourses = ref<boolean>(true);
-
-/* Options for the select button */
-const options = computed(() => [
-    { label: t('components.button.public'), value: true },
-    { label: t('components.button.protected'), value: false },
-]);
-</script>
-
-<template>
-    <!-- If the public option is set, display the search option for all the public courses -->
-    <PublicSearchCourseView v-if="publicCourses">
-        <template #publicButton>
-            <SelectButton
-                v-model="publicCourses"
-                :options="options"
-                option-value="value"
-                option-label="label"
-                :allow-empty="false"
-            />
-        </template>
-    </PublicSearchCourseView>
-
-    <!-- If the protected option is set, display the search option for all the protected courses -->
-    <ProtectedSearchCourseView v-else>
-        <template #publicButton>
-            <SelectButton
-                v-model="publicCourses"
-                :options="options"
-                option-value="value"
-                option-label="label"
-                :allow-empty="false"
-            />
-        </template>
-    </ProtectedSearchCourseView>
-</template>
-
-<style scoped lang="scss"></style>
+<script setup lang="ts">
+import SelectButton from 'primevue/selectbutton';
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import PublicSearchCourseView from './search/PublicSearchCourseView.vue';
+import ProtectedSearchCourseView from './search/ProtectedSearchCourseView.vue';
+
+/* Composable injections */
+const { t } = useI18n();
+
+/* State of the public/protected course */
+const publicCourses = ref<boolean>(true);
+
+/* Options for the select button */
+const options = computed(() => [
+    { label: t('components.button.public'), value: true },
+    { label: t('components.button.protected'), value: false },
+]);
+</script>
+
+<template>
+    <!-- If the public option is set, display the search option for all the public courses -->
+    <PublicSearchCourseView v-if="publicCourses">
+        <template #publicButton>
+            <SelectButton
+                v-model="publicCourses"
+                :options="options"
+                option-value="value"
+                option-label="label"
+                :allow-empty="false"
+            />
+        </template>
+    </PublicSearchCourseView>
+
+    <!-- If the protected option is set, display the search option for all the protected courses -->
+    <ProtectedSearchCourseView v-else>
+        <template #publicButton>
+            <SelectButton
+                v-model="publicCourses"
+                :options="options"
+                option-value="value"
+                option-label="label"
+                :allow-empty="false"
+            />
+        </template>
+    </ProtectedSearchCourseView>
+</template>
+
+<style scoped lang="scss"></style>

frontend/src/views/courses/search/ProtectedSearchCourseView.vue

@@ -74,7 +74,11 @@ onMounted(async () => {
                 </span>
 
                 <!-- Founded courses -->
-                <CourseGeneralList class="mt-3" :courses="pagination?.results ?? null" :cols="3" />
+                <CourseGeneralList class="mt-3" :courses="pagination?.results ?? null" :cols="3">
+                    <template #empty>
+                        <p>{{ t('components.list.noCourses.search') }}</p>
+                    </template>
+                </CourseGeneralList>
             </div>
         </div>
     </BaseLayout>

frontend/src/views/courses/search/PublicSearchCourseView.vue

@@ -114,7 +114,11 @@ onMounted(async () => {
                     {{ t('views.courses.search.results', [pagination.count]) }}
                 </p>
 
-                <CourseGeneralList class="mt-3" :courses="pagination?.results ?? null" :cols="3" />
+                <CourseGeneralList class="mt-3" :courses="pagination?.results ?? null" :cols="3">
+                    <template #empty>
+                        <p>{{ t('components.list.noCourses.search') }}</p>
+                    </template>
+                </CourseGeneralList>
 
                 <Paginator :rows="pageSize" :total-records="pagination?.count" v-model:first="first" />
             </div>