75 lines
2.2 KiB
Vue
75 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
import {ref, defineProps, defineEmits} from 'vue';
|
|
import {useI18n} from 'vue-i18n';
|
|
import UsingQueryResult from "@/components/UsingQueryResult.vue";
|
|
import type {StudentsResponse} from "@/controllers/students.ts";
|
|
import {useClassStudentsQuery} from "@/queries/classes.ts";
|
|
|
|
const props = defineProps<{
|
|
classId: string | undefined
|
|
groups: string[][],
|
|
}>();
|
|
const emit = defineEmits(['groupCreated']);
|
|
const {t} = useI18n();
|
|
|
|
const selectedStudents = ref([]);
|
|
|
|
const studentQueryResult = useClassStudentsQuery(() => props.classId, true);
|
|
|
|
function filterStudents(data: StudentsResponse): { title: string, value: string }[] {
|
|
const students = data.students;
|
|
const studentsInGroups = props.groups.flat();
|
|
|
|
return students
|
|
?.map(st => ({
|
|
title: `${st.firstName} ${st.lastName}`,
|
|
value: st.username,
|
|
}))
|
|
.filter(student => !studentsInGroups.includes(student.value));
|
|
}
|
|
|
|
|
|
function createGroup(): void {
|
|
if (selectedStudents.value.length) {
|
|
// Extract only usernames (student.value)
|
|
const usernames = selectedStudents.value.map(student => student.value);
|
|
emit('groupCreated', usernames);
|
|
selectedStudents.value = []; // Reset selection after creating group
|
|
}
|
|
};
|
|
</script>
|
|
|
|
|
|
<template>
|
|
<using-query-result
|
|
:query-result="studentQueryResult"
|
|
v-slot="{ data }: { data: StudentsResponse }"
|
|
>
|
|
<h3>{{ t('create-groups') }}</h3>
|
|
<v-card-text>
|
|
<v-combobox
|
|
v-model="selectedStudents"
|
|
:items="filterStudents(data)"
|
|
item-title="title"
|
|
item-value="value"
|
|
:label="t('choose-students')"
|
|
variant="outlined"
|
|
clearable
|
|
multiple
|
|
hide-details
|
|
density="compact"
|
|
chips
|
|
append-inner-icon="mdi-magnify"
|
|
></v-combobox>
|
|
|
|
<v-btn @click="createGroup" color="primary" class="mt-2" size="small">
|
|
{{ t('create-group') }}
|
|
</v-btn>
|
|
</v-card-text>
|
|
</using-query-result>
|
|
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|