Refactor attendance page, add components for the check and the status
This commit is contained in:
parent
abe60e7468
commit
f8b8347bb9
|
|
@ -1,27 +1,29 @@
|
|||
<script setup lang="ts">
|
||||
import ItCheckbox from "@/components/ui/ItCheckbox.vue";
|
||||
import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
|
||||
import ItPersonRow from "@/components/ui/ItPersonRow.vue";
|
||||
import { useCourseSessionDetailQuery, useCurrentCourseSession } from "@/composables";
|
||||
import type { AttendanceUserStatus } from "@/gql/graphql";
|
||||
import { graphqlClient } from "@/graphql/client";
|
||||
import type {
|
||||
AttendanceUserStatus,
|
||||
CourseSessionAttendanceCourseObjectType,
|
||||
} from "@/gql/graphql";
|
||||
import { ATTENDANCE_CHECK_MUTATION } from "@/graphql/mutations";
|
||||
import { ATTENDANCE_CHECK_QUERY } from "@/graphql/queries";
|
||||
import { exportAttendance } from "@/services/dashboard";
|
||||
import { useExpertCockpitStore } from "@/stores/expertCockpit";
|
||||
import { useUserStore } from "@/stores/user";
|
||||
import type { DropdownSelectable } from "@/types";
|
||||
import { openDataAsXls } from "@/utils/export";
|
||||
import { useMutation } from "@urql/vue";
|
||||
import dayjs from "dayjs";
|
||||
import { useTranslation } from "i18next-vue";
|
||||
import { useMutation, useQuery } from "@urql/vue";
|
||||
import { useDateFormat } from "@vueuse/core";
|
||||
import log from "loglevel";
|
||||
import { computed, onMounted, reactive, watch } from "vue";
|
||||
import { computed, onMounted, ref } from "vue";
|
||||
import AttendanceCheck from "../cockpitPage/AttendanceCheck.vue";
|
||||
import AttendanceStatus from "../cockpitPage/AttendanceStatus.vue";
|
||||
|
||||
const { t } = useTranslation();
|
||||
const attendanceMutation = useMutation(ATTENDANCE_CHECK_MUTATION);
|
||||
const courseSessionDetailResult = useCourseSessionDetailQuery();
|
||||
const userStore = useUserStore();
|
||||
const courseSession = useCurrentCourseSession();
|
||||
const expertCockpitStore = useExpertCockpitStore();
|
||||
|
||||
const attendanceCourses = computed(() => {
|
||||
return courseSessionDetailResult.courseSessionDetail.value?.attendance_courses ?? [];
|
||||
|
|
@ -33,44 +35,28 @@ const courseSessionDetail = computed(() => {
|
|||
|
||||
const attendanceCourseCircleId = computed(() => {
|
||||
const selectedAttendandeCourse = attendanceCourses.value.find(
|
||||
(course) => course.id === state.attendanceCourseSelected.id
|
||||
(course) => course.id === currentCourse.value.id
|
||||
);
|
||||
return selectedAttendandeCourse?.learning_content?.circle?.id;
|
||||
});
|
||||
|
||||
const presenceCoursesDropdownOptions = computed(() => {
|
||||
return attendanceCourses.value.map(
|
||||
(attendanceCourse) =>
|
||||
({
|
||||
id: attendanceCourse.id,
|
||||
name: `${t("a.Präsenzkurs")} ${
|
||||
attendanceCourse.learning_content.circle?.title
|
||||
} ${dayjs(attendanceCourse.due_date?.start).format("DD.MM.YYYY")}`,
|
||||
}) as DropdownSelectable
|
||||
);
|
||||
});
|
||||
// const currentCircle = computed(() => expertCockpitStore.currentCircle);
|
||||
|
||||
const state = reactive({
|
||||
userPresence: new Map<string, boolean>(),
|
||||
attendanceCourseSelected: presenceCoursesDropdownOptions.value[0],
|
||||
disclaimerConfirmed: false,
|
||||
attendanceSaved: false,
|
||||
});
|
||||
const currentCourse = computed(() => expertCockpitStore.currentCourse);
|
||||
// const currentCourse = computed(() => {
|
||||
// return attendanceCourses.value.find(
|
||||
// (i) => i.learning_content.circle?.id == currentCircle.value?.id
|
||||
// );
|
||||
// });
|
||||
|
||||
watch(
|
||||
attendanceCourses,
|
||||
(newVal) => {
|
||||
if (newVal && newVal.length > 0) {
|
||||
state.attendanceCourseSelected = presenceCoursesDropdownOptions.value[0];
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
const userPresence = ref(new Map<string, boolean>());
|
||||
const disclaimerConfirmed = ref(false);
|
||||
const attendanceSaved = ref(false);
|
||||
|
||||
function resetState() {
|
||||
state.userPresence = new Map<string, boolean>();
|
||||
state.disclaimerConfirmed = false;
|
||||
state.attendanceSaved = false;
|
||||
userPresence.value = new Map<string, boolean>();
|
||||
disclaimerConfirmed.value = false;
|
||||
attendanceSaved.value = false;
|
||||
}
|
||||
|
||||
const onSubmit = async () => {
|
||||
|
|
@ -78,54 +64,62 @@ const onSubmit = async () => {
|
|||
user_id: string;
|
||||
status: AttendanceUserStatus;
|
||||
};
|
||||
const attendanceUserList: UserPresence[] = Array.from(state.userPresence.keys()).map(
|
||||
console.log(Array.from(userPresence.value.keys()));
|
||||
const attendanceUserList: UserPresence[] = Array.from(userPresence.value.keys()).map(
|
||||
(key) => ({
|
||||
user_id: key,
|
||||
status: state.userPresence.get(key) ? "PRESENT" : "ABSENT",
|
||||
status: userPresence.value.get(key) ? "PRESENT" : "ABSENT",
|
||||
})
|
||||
);
|
||||
console.log(attendanceUserList);
|
||||
const res = await attendanceMutation.executeMutation({
|
||||
attendanceCourseId: state.attendanceCourseSelected.id.toString(),
|
||||
attendanceCourseId: (
|
||||
currentCourse.value as CourseSessionAttendanceCourseObjectType
|
||||
).id.toString(),
|
||||
attendanceUserList: attendanceUserList,
|
||||
});
|
||||
if (res.error) {
|
||||
log.error("Could not submit attendance check: ", res.error);
|
||||
return;
|
||||
}
|
||||
state.disclaimerConfirmed = false;
|
||||
state.attendanceSaved = true;
|
||||
disclaimerConfirmed.value = false;
|
||||
attendanceSaved.value = true;
|
||||
log.info("Attendance check submitted: ", res);
|
||||
};
|
||||
|
||||
const loadAttendanceData = async () => {
|
||||
resetState();
|
||||
// with changing variables `useQuery` does not seem to work correctly
|
||||
if (state.attendanceCourseSelected) {
|
||||
const res = await graphqlClient.query(
|
||||
ATTENDANCE_CHECK_QUERY,
|
||||
{
|
||||
courseSessionId: state.attendanceCourseSelected.id.toString(),
|
||||
if (currentCourse.value) {
|
||||
const result = await useQuery({
|
||||
query: ATTENDANCE_CHECK_QUERY,
|
||||
variables: {
|
||||
courseSessionId: currentCourse.value.id.toString(),
|
||||
},
|
||||
{
|
||||
requestPolicy: "network-only",
|
||||
}
|
||||
);
|
||||
requestPolicy: "network-only",
|
||||
});
|
||||
console.log(result.data.value?.course_session_attendance_course);
|
||||
const attendanceUserList =
|
||||
res.data?.course_session_attendance_course?.attendance_user_list ?? [];
|
||||
result.data?.value?.course_session_attendance_course?.attendance_user_list ?? [];
|
||||
console.log(attendanceUserList);
|
||||
for (const user of attendanceUserList) {
|
||||
if (!user) continue;
|
||||
state.userPresence.set(user.user_id, user.status === "PRESENT");
|
||||
userPresence.value.set(user.user_id, user.status === "PRESENT");
|
||||
}
|
||||
if (attendanceUserList.length !== 0) {
|
||||
state.attendanceSaved = true;
|
||||
attendanceSaved.value = true;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function editAgain() {
|
||||
state.attendanceSaved = false;
|
||||
attendanceSaved.value = false;
|
||||
}
|
||||
|
||||
const toggleDisclaimer = (newValue: boolean) => {
|
||||
disclaimerConfirmed.value = newValue;
|
||||
};
|
||||
|
||||
async function exportData() {
|
||||
const data = await exportAttendance(
|
||||
{
|
||||
|
|
@ -137,19 +131,26 @@ async function exportData() {
|
|||
openDataAsXls(data.encoded_data, data.file_name);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
onMounted(async () => {
|
||||
log.debug("AttendanceCheckPage mounted");
|
||||
loadAttendanceData();
|
||||
});
|
||||
|
||||
watch(
|
||||
() => state.attendanceCourseSelected,
|
||||
() => {
|
||||
log.debug("attendanceCourseSelected changed", state.attendanceCourseSelected);
|
||||
loadAttendanceData();
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
const courseDueDate = computed(() => {
|
||||
if (currentCourse.value && currentCourse.value.due_date?.start) {
|
||||
return currentCourse.value.due_date.start;
|
||||
}
|
||||
return "";
|
||||
});
|
||||
|
||||
const formattedCourseDueDate = computed(() => {
|
||||
if (courseDueDate.value) {
|
||||
return useDateFormat(courseDueDate.value, "D. MMMM YYYY", {
|
||||
locales: "de-CH",
|
||||
});
|
||||
}
|
||||
return "";
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -165,9 +166,8 @@ watch(
|
|||
</router-link>
|
||||
</nav>
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="pb-4 text-xl font-bold">{{ $t("a.Anwesenheit Präsenzkurse") }}</h3>
|
||||
<button
|
||||
v-if="state.attendanceSaved"
|
||||
v-if="attendanceSaved"
|
||||
class="flex"
|
||||
data-cy="export-button"
|
||||
@click="exportData"
|
||||
|
|
@ -176,54 +176,32 @@ watch(
|
|||
<span class="ml inline-block">{{ $t("a.Als Excel exportieren") }}</span>
|
||||
</button>
|
||||
</div>
|
||||
<section v-if="attendanceCourses.length && state.attendanceCourseSelected">
|
||||
<div class="flex flex-row flex-wrap justify-between bg-white p-6">
|
||||
<ItDropdownSelect
|
||||
v-model="state.attendanceCourseSelected"
|
||||
:items="presenceCoursesDropdownOptions ?? []"
|
||||
></ItDropdownSelect>
|
||||
<div
|
||||
v-if="!state.attendanceSaved"
|
||||
class="flex flex-row flex-wrap items-center space-y-2 md:space-y-0"
|
||||
>
|
||||
<ItCheckbox
|
||||
:checkbox-item="{
|
||||
value: true,
|
||||
checked: state.disclaimerConfirmed,
|
||||
}"
|
||||
@toggle="state.disclaimerConfirmed = !state.disclaimerConfirmed"
|
||||
></ItCheckbox>
|
||||
<p class="w-64 pr-4 text-sm">
|
||||
{{
|
||||
$t(
|
||||
"Ich will die Anwesenheit der untenstehenden Personen definitiv bestätigen."
|
||||
)
|
||||
}}
|
||||
</p>
|
||||
<button
|
||||
class="btn-primary"
|
||||
:disabled="!state.disclaimerConfirmed"
|
||||
@click="onSubmit"
|
||||
>
|
||||
{{ $t("Anwesenheit bestätigen") }}
|
||||
</button>
|
||||
<section v-if="attendanceCourses.length && currentCourse">
|
||||
<div class="flex flex-col justify-between gap-8 bg-white py-6">
|
||||
<div class="flex flex-col gap-2 px-6">
|
||||
<h3 class="pb-1 text-4xl font-bold">{{ $t("a.Präsenzkurs") }}</h3>
|
||||
<h5>Circle "{{ currentCourse?.learning_content.circle?.title }}"</h5>
|
||||
<h5>{{ formattedCourseDueDate }}</h5>
|
||||
</div>
|
||||
<div v-else class="self-center">
|
||||
<p class="text-base">
|
||||
{{ $t("a.Die Anwesenheit wurde definitiv bestätigt") }}
|
||||
</p>
|
||||
<button class="btn-link link" @click="editAgain()">
|
||||
{{ $t("a.Erneut bearbeiten") }}
|
||||
</button>
|
||||
<div class="px-6">
|
||||
<AttendanceStatus
|
||||
class="px-6"
|
||||
:done="attendanceSaved"
|
||||
:date="courseDueDate"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<AttendanceCheck
|
||||
:attendance-saved="attendanceSaved"
|
||||
:disclaimer-confirmed="disclaimerConfirmed"
|
||||
@reopen="editAgain"
|
||||
@toggle="toggleDisclaimer"
|
||||
@confirm="onSubmit"
|
||||
/>
|
||||
|
||||
<div class="mt-4 flex flex-col bg-white p-6">
|
||||
<div
|
||||
v-for="(csu, index) in courseSessionDetailResult.filterMembers()"
|
||||
:key="csu.user_id"
|
||||
>
|
||||
<div class="border-t border-gray-500 px-6">
|
||||
<ItPersonRow
|
||||
v-for="(csu, index) in courseSessionDetailResult.filterMembers()"
|
||||
:key="csu.user_id"
|
||||
:name="`${csu.first_name} ${csu.last_name}`"
|
||||
:avatar-url="csu.avatar_url"
|
||||
:class="0 === index ? 'border-none' : ''"
|
||||
|
|
@ -233,16 +211,13 @@ watch(
|
|||
>
|
||||
<template #leading>
|
||||
<ItCheckbox
|
||||
:disabled="state.attendanceSaved"
|
||||
:disabled="attendanceSaved"
|
||||
:checkbox-item="{
|
||||
value: true,
|
||||
checked: state.userPresence.get(csu.user_id) as boolean,
|
||||
checked: userPresence.get(csu.user_id) as boolean,
|
||||
}"
|
||||
@toggle="
|
||||
state.userPresence.set(
|
||||
csu.user_id,
|
||||
!state.userPresence.get(csu.user_id)
|
||||
)
|
||||
userPresence.set(csu.user_id, !userPresence.get(csu.user_id))
|
||||
"
|
||||
></ItCheckbox>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,45 @@
|
|||
<script setup lang="ts">
|
||||
import ItCheckbox from "@/components/ui/ItCheckbox.vue";
|
||||
export interface Props {
|
||||
attendanceSaved: boolean;
|
||||
disclaimerConfirmed: boolean;
|
||||
}
|
||||
defineProps<Props>();
|
||||
defineEmits(["toggle", "reopen", "confirm"]);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="!attendanceSaved" class="flex flex-col gap-4 px-6">
|
||||
<div class="flex flex-row content-center items-center">
|
||||
<ItCheckbox
|
||||
:checkbox-item="{
|
||||
value: true,
|
||||
checked: disclaimerConfirmed,
|
||||
}"
|
||||
@toggle="$emit('toggle', !disclaimerConfirmed)"
|
||||
></ItCheckbox>
|
||||
<p class="text-sm">
|
||||
{{
|
||||
$t(
|
||||
"Ich will die Anwesenheit der untenstehenden Personen definitiv bestätigen."
|
||||
)
|
||||
}}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
class="btn-primary w-64"
|
||||
:disabled="!disclaimerConfirmed"
|
||||
@click="$emit('confirm')"
|
||||
>
|
||||
{{ $t("Anwesenheit bestätigen") }}
|
||||
</button>
|
||||
</div>
|
||||
<div v-else class="px-6">
|
||||
<p class="text-base">
|
||||
{{ $t("a.Die Anwesenheit wurde definitiv bestätigt") }}
|
||||
</p>
|
||||
<button class="btn-link link" @click="$emit('reopen')">
|
||||
{{ $t("a.Erneut bearbeiten") }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -68,7 +68,7 @@ const text = computed(() => {
|
|||
|
||||
<template>
|
||||
<div
|
||||
class="space-between flex flex-row items-center gap-1 rounded py-1 pl-2 pr-4"
|
||||
class="space-between inline-flex flex-row items-center gap-1 rounded py-1 pl-2 pr-4"
|
||||
:class="style"
|
||||
>
|
||||
<component :is="icon" class="h-7 w-7" />
|
||||
|
|
|
|||
|
|
@ -1,50 +1,15 @@
|
|||
import { useCourseData } from "@/composables";
|
||||
import { useCourseData, useCourseSessionDetailQuery } from "@/composables";
|
||||
import type { CourseSessionAttendanceCourseObjectType } from "@/gql/graphql";
|
||||
import { useUserStore } from "@/stores/user";
|
||||
import type { CircleLight, CourseSessionUser, ExpertSessionUser } from "@/types";
|
||||
import log from "loglevel";
|
||||
import { defineStore } from "pinia";
|
||||
import { computed, ref } from "vue";
|
||||
|
||||
type CircleExpertCockpit = CircleLight & {
|
||||
name: string;
|
||||
};
|
||||
|
||||
export type ExpertCockpitStoreState = {
|
||||
courseSessionMembers: CourseSessionUser[] | undefined;
|
||||
circles: CircleExpertCockpit[] | undefined;
|
||||
currentCircle: CircleExpertCockpit | undefined;
|
||||
};
|
||||
|
||||
export const useExpertCockpitStore = defineStore({
|
||||
id: "expertCockpit",
|
||||
state: () => {
|
||||
return {
|
||||
courseSessionMembers: undefined,
|
||||
circles: [],
|
||||
currentCircle: undefined,
|
||||
} as ExpertCockpitStoreState;
|
||||
},
|
||||
actions: {
|
||||
async loadCircles(
|
||||
courseSlug: string,
|
||||
currentCourseSessionUser: CourseSessionUser | undefined
|
||||
) {
|
||||
log.debug("loadCircles called", courseSlug);
|
||||
|
||||
this.circles = await courseCircles(courseSlug, currentCourseSessionUser);
|
||||
|
||||
if (this.circles?.length) {
|
||||
await this.setCurrentCourseCircle(this.circles[0].slug);
|
||||
}
|
||||
},
|
||||
async setCurrentCourseCircle(circleSlug: string) {
|
||||
this.currentCircle = this.circles?.find((c) => c.slug === circleSlug);
|
||||
},
|
||||
async setCurrentCourseCircleFromEvent(event: CircleLight) {
|
||||
await this.setCurrentCourseCircle(event.slug);
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
async function courseCircles(
|
||||
courseSlug: string,
|
||||
currentCourseSessionUser: CourseSessionUser | undefined
|
||||
|
|
@ -74,3 +39,57 @@ async function courseCircles(
|
|||
|
||||
return [];
|
||||
}
|
||||
|
||||
export type ExpertCockpitStoreState = {
|
||||
courseSessionMembers: CourseSessionUser[] | undefined;
|
||||
circles: CircleExpertCockpit[] | undefined;
|
||||
currentCircle: CircleExpertCockpit | undefined;
|
||||
};
|
||||
|
||||
export const useExpertCockpitStore = defineStore("expertCockpit", () => {
|
||||
const courseSessionMembers = ref<CourseSessionUser[] | undefined>(undefined);
|
||||
const circles = ref<CircleExpertCockpit[] | undefined>([]);
|
||||
const currentCircle = ref<CircleExpertCockpit | undefined>(undefined);
|
||||
const courseSessionDetailResult = useCourseSessionDetailQuery();
|
||||
|
||||
const attendanceCourses = computed(() => {
|
||||
return (
|
||||
courseSessionDetailResult.courseSessionDetail.value?.attendance_courses ?? []
|
||||
);
|
||||
});
|
||||
|
||||
const currentCourse = computed(() => {
|
||||
return attendanceCourses.value.find(
|
||||
(i) => i.learning_content.circle?.id == currentCircle.value?.id
|
||||
);
|
||||
});
|
||||
|
||||
const loadCircles = async (
|
||||
courseSlug: string,
|
||||
currentCourseSessionUser: CourseSessionUser | undefined
|
||||
) => {
|
||||
log.debug("loadCircles called", courseSlug);
|
||||
|
||||
circles.value = await courseCircles(courseSlug, currentCourseSessionUser);
|
||||
|
||||
if (circles.value?.length) {
|
||||
await setCurrentCourseCircle(circles.value[0].slug);
|
||||
}
|
||||
};
|
||||
|
||||
const setCurrentCourseCircle = async (circleSlug: string) => {
|
||||
currentCircle.value = circles.value?.find((c) => c.slug === circleSlug);
|
||||
};
|
||||
const setCurrentCourseCircleFromEvent = async (event: CircleLight) => {
|
||||
await setCurrentCourseCircle(event.slug);
|
||||
};
|
||||
|
||||
return {
|
||||
courseSessionMembers,
|
||||
circles,
|
||||
currentCircle,
|
||||
loadCircles,
|
||||
currentCourse,
|
||||
setCurrentCourseCircleFromEvent,
|
||||
};
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue