LessonNotes.vue

<script setup>
import AbsenceReasonChip from "aleksis.apps.kolego/components/AbsenceReasonChip.vue";
</script>

<template>
  <div
    class="d-flex align-center justify-space-between justify-md-end flex-wrap gap"
  >
    <v-chip dense color="success" outlined v-if="total > 0">
      {{ $t("alsijil.coursebook.present_number", { present, total }) }}
    </v-chip>
    <absence-reason-chip
      v-for="participation in absences"
      :key="'absence-' + participation.id"
      :absence-reason="participation.absenceReason"
      dense
    >
      <template #prepend> {{ participation.person.fullName }}: </template>
    </absence-reason-chip>

    <manage-students-trigger v-bind="documentationPartProps" />
  </div>
</template>

<script>
import documentationPartMixin from "./documentationPartMixin";
import ManageStudentsTrigger from "../absences/ManageStudentsTrigger.vue";

export default {
  name: "LessonNotes",
  components: { ManageStudentsTrigger },
  mixins: [documentationPartMixin],
  computed: {
    total() {
      return this.documentation.participations.length;
    },
    present() {
      return this.documentation.participations.filter(
        (p) => p.absenceReason === null,
      ).length;
    },
    absences() {
      // Get all course attendants who have an absence reason
      return this.documentation.participations.filter(
        (p) => p.absenceReason !== null,
      );
    },
  },
};
</script>

<style scoped>
.gap {
  gap: 0.25em;
}
</style>