feat: format
This commit is contained in:
Joyelle Ndagijimana
parent
8f57da4bc1
commit
6d9396348a
2 changed files with 308 additions and 306 deletions
|
|
@ -163,10 +163,12 @@
|
||||||
|
|
||||||
<div v-else>
|
<div v-else>
|
||||||
<v-alert class="empty-message">
|
<v-alert class="empty-message">
|
||||||
<v-icon icon="mdi-information-outline" size="small" />
|
<v-icon
|
||||||
|
icon="mdi-information-outline"
|
||||||
|
size="small"
|
||||||
|
/>
|
||||||
{{ t("currently-no-groups") }}
|
{{ t("currently-no-groups") }}
|
||||||
</v-alert>
|
</v-alert>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</v-card-text>
|
</v-card-text>
|
||||||
</v-card>
|
</v-card>
|
||||||
|
|
|
||||||
|
|
@ -1,53 +1,53 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import {computed, ref, watch, watchEffect} from "vue";
|
import { computed, ref, watch, watchEffect } from "vue";
|
||||||
import {useI18n} from "vue-i18n";
|
import { useI18n } from "vue-i18n";
|
||||||
import {
|
import {
|
||||||
useAssignmentQuery,
|
useAssignmentQuery,
|
||||||
useDeleteAssignmentMutation,
|
useDeleteAssignmentMutation,
|
||||||
useUpdateAssignmentMutation,
|
useUpdateAssignmentMutation,
|
||||||
} from "@/queries/assignments.ts";
|
} from "@/queries/assignments.ts";
|
||||||
import UsingQueryResult from "@/components/UsingQueryResult.vue";
|
import UsingQueryResult from "@/components/UsingQueryResult.vue";
|
||||||
import {useGroupsQuery} from "@/queries/groups.ts";
|
import { useGroupsQuery } from "@/queries/groups.ts";
|
||||||
import {useGetLearningPathQuery} from "@/queries/learning-paths.ts";
|
import { useGetLearningPathQuery } from "@/queries/learning-paths.ts";
|
||||||
import type {Language} from "@/data-objects/language.ts";
|
import type { Language } from "@/data-objects/language.ts";
|
||||||
import type {AssignmentResponse} from "@/controllers/assignments.ts";
|
import type { AssignmentResponse } from "@/controllers/assignments.ts";
|
||||||
import type {GroupDTO, GroupDTOId} from "@dwengo-1/common/interfaces/group";
|
import type { GroupDTO, GroupDTOId } from "@dwengo-1/common/interfaces/group";
|
||||||
import GroupSubmissionStatus from "@/components/GroupSubmissionStatus.vue";
|
import GroupSubmissionStatus from "@/components/GroupSubmissionStatus.vue";
|
||||||
import GroupProgressRow from "@/components/GroupProgressRow.vue";
|
import GroupProgressRow from "@/components/GroupProgressRow.vue";
|
||||||
import type {AssignmentDTO} from "@dwengo-1/common/dist/interfaces/assignment.ts";
|
import type { AssignmentDTO } from "@dwengo-1/common/dist/interfaces/assignment.ts";
|
||||||
import GroupSelector from "@/components/assignments/GroupSelector.vue";
|
import GroupSelector from "@/components/assignments/GroupSelector.vue";
|
||||||
import DeadlineSelector from "@/components/assignments/DeadlineSelector.vue";
|
import DeadlineSelector from "@/components/assignments/DeadlineSelector.vue";
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
classId: string;
|
classId: string;
|
||||||
assignmentId: number;
|
assignmentId: number;
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
const isEditing = ref(false);
|
const isEditing = ref(false);
|
||||||
|
|
||||||
const {t} = useI18n();
|
const { t } = useI18n();
|
||||||
const lang = ref();
|
const lang = ref();
|
||||||
const groups = ref<GroupDTO[] | GroupDTOId[]>([]);
|
const groups = ref<GroupDTO[] | GroupDTOId[]>([]);
|
||||||
const learningPath = ref();
|
const learningPath = ref();
|
||||||
const form = ref();
|
const form = ref();
|
||||||
|
|
||||||
const editingLearningPath = ref(learningPath);
|
const editingLearningPath = ref(learningPath);
|
||||||
const description = ref("");
|
const description = ref("");
|
||||||
const deadline = ref<Date | null>(null);
|
const deadline = ref<Date | null>(null);
|
||||||
const editGroups = ref(false);
|
const editGroups = ref(false);
|
||||||
|
|
||||||
const assignmentQueryResult = useAssignmentQuery(() => props.classId, props.assignmentId);
|
const assignmentQueryResult = useAssignmentQuery(() => props.classId, props.assignmentId);
|
||||||
// Get learning path object
|
// Get learning path object
|
||||||
const lpQueryResult = useGetLearningPathQuery(
|
const lpQueryResult = useGetLearningPathQuery(
|
||||||
computed(() => assignmentQueryResult.data.value?.assignment?.learningPath ?? ""),
|
computed(() => assignmentQueryResult.data.value?.assignment?.learningPath ?? ""),
|
||||||
computed(() => assignmentQueryResult.data.value?.assignment?.language as Language),
|
computed(() => assignmentQueryResult.data.value?.assignment?.language as Language),
|
||||||
);
|
);
|
||||||
|
|
||||||
// Get all the groups withing the assignment
|
// Get all the groups withing the assignment
|
||||||
const groupsQueryResult = useGroupsQuery(props.classId, props.assignmentId, true);
|
const groupsQueryResult = useGroupsQuery(props.classId, props.assignmentId, true);
|
||||||
groups.value = groupsQueryResult.data.value?.groups ?? [];
|
groups.value = groupsQueryResult.data.value?.groups ?? [];
|
||||||
|
|
||||||
watchEffect(() => {
|
watchEffect(() => {
|
||||||
const assignment = assignmentQueryResult.data.value?.assignment;
|
const assignment = assignmentQueryResult.data.value?.assignment;
|
||||||
if (assignment) {
|
if (assignment) {
|
||||||
learningPath.value = assignment.learningPath;
|
learningPath.value = assignment.learningPath;
|
||||||
|
|
@ -58,12 +58,11 @@ watchEffect(() => {
|
||||||
editingLearningPath.value = lpQueryResult.data.value;
|
editingLearningPath.value = lpQueryResult.data.value;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
const hasSubmissions = ref<boolean>(false);
|
const hasSubmissions = ref<boolean>(false);
|
||||||
|
|
||||||
|
const allGroups = computed(() => {
|
||||||
const allGroups = computed(() => {
|
|
||||||
const groups = groupsQueryResult.data.value?.groups;
|
const groups = groupsQueryResult.data.value?.groups;
|
||||||
|
|
||||||
if (!groups) return [];
|
if (!groups) return [];
|
||||||
|
|
@ -76,57 +75,56 @@ const allGroups = computed(() => {
|
||||||
groupNo: index + 1, // New group number that will be used
|
groupNo: index + 1, // New group number that will be used
|
||||||
name: `${t("group")} ${index + 1}`,
|
name: `${t("group")} ${index + 1}`,
|
||||||
members: group.members,
|
members: group.members,
|
||||||
originalGroupNo: group.groupNumber
|
originalGroupNo: group.groupNumber,
|
||||||
}));
|
}));
|
||||||
});
|
});
|
||||||
|
|
||||||
const dialog = ref(false);
|
const dialog = ref(false);
|
||||||
const selectedGroup = ref({});
|
const selectedGroup = ref({});
|
||||||
|
|
||||||
function openGroupDetails(group: object): void {
|
function openGroupDetails(group: object): void {
|
||||||
selectedGroup.value = group;
|
selectedGroup.value = group;
|
||||||
dialog.value = true;
|
dialog.value = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const deleteAssignmentMutation = useDeleteAssignmentMutation();
|
||||||
const deleteAssignmentMutation = useDeleteAssignmentMutation();
|
async function deleteAssignment(num: number, clsId: string): Promise<void> {
|
||||||
async function deleteAssignment(num: number, clsId: string): Promise<void> {
|
|
||||||
deleteAssignmentMutation.mutate(
|
deleteAssignmentMutation.mutate(
|
||||||
{cid: clsId, an: num},
|
{ cid: clsId, an: num },
|
||||||
{
|
{
|
||||||
onSuccess: () => {
|
onSuccess: () => {
|
||||||
window.location.href = "/user/assignment";
|
window.location.href = "/user/assignment";
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function goToLearningPathLink(): string | undefined {
|
function goToLearningPathLink(): string | undefined {
|
||||||
const assignment = assignmentQueryResult.data.value?.assignment;
|
const assignment = assignmentQueryResult.data.value?.assignment;
|
||||||
const lp = lpQueryResult.data.value;
|
const lp = lpQueryResult.data.value;
|
||||||
|
|
||||||
if (!assignment || !lp) return undefined;
|
if (!assignment || !lp) return undefined;
|
||||||
|
|
||||||
return `/learningPath/${lp.hruid}/${assignment.language}/${lp.startNode.learningobjectHruid}?assignmentNo=${props.assignmentId}&classId=${props.classId}`;
|
return `/learningPath/${lp.hruid}/${assignment.language}/${lp.startNode.learningobjectHruid}?assignmentNo=${props.assignmentId}&classId=${props.classId}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
function goToGroupSubmissionLink(groupNo: number): string | undefined {
|
function goToGroupSubmissionLink(groupNo: number): string | undefined {
|
||||||
const lp = lpQueryResult.data.value;
|
const lp = lpQueryResult.data.value;
|
||||||
if (!lp) return undefined;
|
if (!lp) return undefined;
|
||||||
|
|
||||||
return `/learningPath/${lp.hruid}/${lp.language}/${lp.startNode.learningobjectHruid}?forGroup=${groupNo}&assignmentNo=${props.assignmentId}&classId=${props.classId}`;
|
return `/learningPath/${lp.hruid}/${lp.language}/${lp.startNode.learningobjectHruid}?forGroup=${groupNo}&assignmentNo=${props.assignmentId}&classId=${props.classId}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
const {mutate, data, isSuccess} = useUpdateAssignmentMutation();
|
const { mutate, data, isSuccess } = useUpdateAssignmentMutation();
|
||||||
|
|
||||||
watch([isSuccess, data], async ([success, newData]) => {
|
watch([isSuccess, data], async ([success, newData]) => {
|
||||||
if (success && newData?.assignment) {
|
if (success && newData?.assignment) {
|
||||||
await assignmentQueryResult.refetch();
|
await assignmentQueryResult.refetch();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
async function saveChanges(): Promise<void> {
|
async function saveChanges(): Promise<void> {
|
||||||
const {valid} = await form.value.validate();
|
const { valid } = await form.value.validate();
|
||||||
if (!valid) return;
|
if (!valid) return;
|
||||||
|
|
||||||
isEditing.value = false;
|
isEditing.value = false;
|
||||||
|
|
@ -141,9 +139,9 @@ async function saveChanges(): Promise<void> {
|
||||||
an: assignmentQueryResult.data.value?.assignment.id,
|
an: assignmentQueryResult.data.value?.assignment.id,
|
||||||
data: assignmentDTO,
|
data: assignmentDTO,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
async function handleGroupsUpdated(updatedGroups: string[][]): Promise<void> {
|
async function handleGroupsUpdated(updatedGroups: string[][]): Promise<void> {
|
||||||
const assignmentDTO: AssignmentDTO = {
|
const assignmentDTO: AssignmentDTO = {
|
||||||
groups: updatedGroups,
|
groups: updatedGroups,
|
||||||
};
|
};
|
||||||
|
|
@ -152,8 +150,7 @@ async function handleGroupsUpdated(updatedGroups: string[][]): Promise<void> {
|
||||||
an: assignmentQueryResult.data.value?.assignment.id,
|
an: assignmentQueryResult.data.value?.assignment.id,
|
||||||
data: assignmentDTO,
|
data: assignmentDTO,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
@ -275,9 +272,7 @@ async function handleGroupsUpdated(updatedGroups: string[][]): Promise<void> {
|
||||||
</using-query-result>
|
</using-query-result>
|
||||||
</v-card-subtitle>
|
</v-card-subtitle>
|
||||||
<v-card-text v-if="isEditing">
|
<v-card-text v-if="isEditing">
|
||||||
<deadline-selector
|
<deadline-selector v-model:deadline="deadline" />
|
||||||
v-model:deadline="deadline"
|
|
||||||
/>
|
|
||||||
</v-card-text>
|
</v-card-text>
|
||||||
<v-card-text
|
<v-card-text
|
||||||
v-if="!isEditing"
|
v-if="!isEditing"
|
||||||
|
|
@ -374,9 +369,7 @@ async function handleGroupsUpdated(updatedGroups: string[][]): Promise<void> {
|
||||||
:key="g.originalGroupNo"
|
:key="g.originalGroupNo"
|
||||||
>
|
>
|
||||||
<td>
|
<td>
|
||||||
<v-btn
|
<v-btn variant="text">
|
||||||
variant="text"
|
|
||||||
>
|
|
||||||
{{ g.name }}
|
{{ g.name }}
|
||||||
</v-btn>
|
</v-btn>
|
||||||
</td>
|
</td>
|
||||||
|
|
@ -398,8 +391,9 @@ async function handleGroupsUpdated(updatedGroups: string[][]): Promise<void> {
|
||||||
:class-id="classId"
|
:class-id="classId"
|
||||||
:language="lang"
|
:language="lang"
|
||||||
:go-to-group-submission-link="goToGroupSubmissionLink"
|
:go-to-group-submission-link="goToGroupSubmissionLink"
|
||||||
@update:hasSubmission="(hasSubmission) => hasSubmissions = hasSubmission"
|
@update:hasSubmission="
|
||||||
|
(hasSubmission) => (hasSubmissions = hasSubmission)
|
||||||
|
"
|
||||||
/>
|
/>
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
|
|
@ -417,8 +411,14 @@ async function handleGroupsUpdated(updatedGroups: string[][]): Promise<void> {
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td colspan="4" class="empty-message">
|
<td
|
||||||
<v-icon icon="mdi-information-outline" size="small" />
|
colspan="4"
|
||||||
|
class="empty-message"
|
||||||
|
>
|
||||||
|
<v-icon
|
||||||
|
icon="mdi-information-outline"
|
||||||
|
size="small"
|
||||||
|
/>
|
||||||
{{ t("currently-no-groups") }}
|
{{ t("currently-no-groups") }}
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
@ -448,96 +448,97 @@ async function handleGroupsUpdated(updatedGroups: string[][]): Promise<void> {
|
||||||
|
|
||||||
<v-card-actions>
|
<v-card-actions>
|
||||||
<v-spacer></v-spacer>
|
<v-spacer></v-spacer>
|
||||||
<v-btn text @click="editGroups = false">
|
<v-btn
|
||||||
|
text
|
||||||
|
@click="editGroups = false"
|
||||||
|
>
|
||||||
{{ t("cancel") }}
|
{{ t("cancel") }}
|
||||||
</v-btn>
|
</v-btn>
|
||||||
</v-card-actions>
|
</v-card-actions>
|
||||||
</v-card>
|
</v-card>
|
||||||
</v-dialog>
|
</v-dialog>
|
||||||
|
|
||||||
</v-container>
|
</v-container>
|
||||||
</using-query-result>
|
</using-query-result>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
@import "@/assets/assignment.css";
|
@import "@/assets/assignment.css";
|
||||||
|
|
||||||
.assignment-card-teacher {
|
.assignment-card-teacher {
|
||||||
width: 80%;
|
width: 80%;
|
||||||
padding: 2%;
|
padding: 2%;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-scroll {
|
.table-scroll {
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
-webkit-overflow-scrolling: touch;
|
-webkit-overflow-scrolling: touch;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
background-color: #0e6942;
|
background-color: #0e6942;
|
||||||
color: white;
|
color: white;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
table thead th:first-child {
|
table thead th:first-child {
|
||||||
border-top-left-radius: 10px;
|
border-top-left-radius: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table thead th:last-child {
|
.table thead th:last-child {
|
||||||
border-top-right-radius: 10px;
|
border-top-right-radius: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table tbody tr:nth-child(odd) {
|
.table tbody tr:nth-child(odd) {
|
||||||
background-color: white;
|
background-color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table tbody tr:nth-child(even) {
|
.table tbody tr:nth-child(even) {
|
||||||
background-color: #f6faf2;
|
background-color: #f6faf2;
|
||||||
}
|
}
|
||||||
|
|
||||||
td,
|
td,
|
||||||
th {
|
th {
|
||||||
border-bottom: 1px solid #0e6942;
|
border-bottom: 1px solid #0e6942;
|
||||||
border-top: 1px solid #0e6942;
|
border-top: 1px solid #0e6942;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
h1 {
|
|
||||||
color: #0e6942;
|
color: #0e6942;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
font-weight: bolder;
|
font-weight: bolder;
|
||||||
padding-top: 2%;
|
padding-top: 2%;
|
||||||
font-size: 50px;
|
font-size: 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
color: #0e6942;
|
color: #0e6942;
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.link {
|
.link {
|
||||||
color: #0b75bb;
|
color: #0b75bb;
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
main {
|
main {
|
||||||
margin-left: 30px;
|
margin-left: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-container {
|
.table-container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
overflow-x: visible;
|
overflow-x: visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table {
|
.table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-width: auto;
|
min-width: auto;
|
||||||
table-layout: auto;
|
table-layout: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 1200px) {
|
@media screen and (max-width: 1200px) {
|
||||||
h1 {
|
h1 {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
|
|
@ -584,11 +585,10 @@ main {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.group-members-dialog {
|
.group-members-dialog {
|
||||||
max-height: 80vh;
|
max-height: 80vh;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue