75 lines
2.3 KiB
Vue
75 lines
2.3 KiB
Vue
<script setup lang="ts">
|
|
import { ref } 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>
|