tdpeuter/2025SELab2-project-Dwengo
tdpeuter/2025SELab2-project-Dwengo
Archived
1
Fork 0
Code Issues Releases 4 Packages 2 Wiki Activity

feat: search bar component toegevoegd

Browse source
This commit is contained in:
Joyelle Ndagijimana 2025-03-25 23:14:58 +01:00
parent ca59f8b767
commit aa33d32fa8
1 changed files with 34 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

45
frontend/src/views/assignments/CreateAssignment.vue
View file

@ -7,6 +7,15 @@
const step = ref(1); const step = ref(1);
const loading = ref(false)
function onClick () {
loading.value = true
}
const searchQuery = ref("");
// Use a list with all themes so learning-paths can be filtered by theme // Use a list with all themes so learning-paths can be filtered by theme
const themeItems = ref(Object.keys(THEMESITEMS).slice(1)); const themeItems = ref(Object.keys(THEMESITEMS).slice(1));
const value = shallowRef([]); const value = shallowRef([]);
@ -21,17 +30,31 @@
<template v-slot:item.1> <template v-slot:item.1>
<v-card title="Select a learning path" flat> <v-card title="Select a learning path" flat>
<v-container class="step-container"> <v-container class="step-container">
<v-select <v-card-text>
v-model="value" <v-select
:items="themeItems.map(theme => ({ title: t(`theme-options.${theme}`), value: theme }))" v-model="value"
label="Filter by themes" :items="themeItems.map(theme => ({ title: t(`theme-options.${theme}`), value: theme }))"
chips variant="solo"
multiple label="Filter by themes"
deletable-chips chips
clearable multiple
></v-select> deletable-chips
clearable
></v-select>
</v-card-text>
<v-card-text>
<v-text-field
:loading="loading"
append-inner-icon="mdi-magnify"
density="compact"
label="Search"
variant="solo"
hide-details
single-line
@click:append-inner="onClick"
></v-text-field>
</v-card-text>
</v-container> </v-container>
</v-card> </v-card>
</template> </template>
@ -88,7 +111,7 @@
.step-container { .step-container {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; flex-direction: column;
min-height: 200px; min-height: 200px;
} }