LessonNotes.vue

<script setup>
import AbsenceReasonChip from "aleksis.apps.kolego/components/AbsenceReasonChip.vue";
import ExtraMarkChip from "../../extra_marks/ExtraMarkChip.vue";
import TardinessChip from "../absences/TardinessChip.vue";
import PersonalNoteChip from "../personal_notes/PersonalNoteChip.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 && documentation.canViewParticipationStatus"
    >
      {{
        $t("alsijil.coursebook.participations.present_number", {
          present,
          total,
        })
      }}
    </v-chip>
    <v-chip
      dense
      color="success"
      outlined
      v-else-if="
        total == 1 && present == 1 && !documentation.canViewParticipationStatus
      "
    >
      {{ $t("alsijil.coursebook.participations.present") }}
    </v-chip>
    <absence-reason-chip
      v-for="[reasonId, participations] in Object.entries(absences)"
      :key="'reason-' + reasonId"
      :absence-reason="participations[0].absenceReason"
      dense
    >
      <template v-if="documentation.canViewParticipationStatus" #append>
        <span
          >:
          <span>
            {{
              participations
                .slice(0, 5)
                .map((participation) => participation.person.firstName)
                .join(", ")
            }}
          </span>
          <span v-if="participations.length > 5">
            <!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
            +{{ participations.length - 5 }}
            <!-- eslint-enable @intlify/vue-i18n/no-raw-text -->
          </span>
        </span>
      </template>
    </absence-reason-chip>

    <extra-mark-chip
      v-for="[markId, [mark, ...participations]] in Object.entries(
        extraMarkChips,
      )"
      :key="'extra-mark-' + markId"
      :extra-mark="mark"
      dense
    >
      <template v-if="documentation.canViewParticipationStatus" #append>
        <span
          >:
          <span>
            {{
              participations
                .slice(0, 5)
                .map((participation) => participation.person.firstName)
                .join(", ")
            }}
          </span>
          <span v-if="participations.length > 5">
            <!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
            +{{ participations.length - 5 }}
            <!-- eslint-enable @intlify/vue-i18n/no-raw-text -->
          </span>
        </span>
      </template>
    </extra-mark-chip>

    <tardiness-chip
      v-if="tardyParticipations.length > 0"
      :tardiness="
        !documentation.canViewParticipationStatus &&
        tardyParticipations.length == 1
          ? tardyParticipations[0].tardiness
          : undefined
      "
    >
      <template v-if="documentation.canViewParticipationStatus" #default>
        {{ $t("alsijil.personal_notes.late") }}
      </template>

      <template v-if="documentation.canViewParticipationStatus" #append>
        <span
          >:
          {{
            tardyParticipations
              .slice(0, 5)
              .map((participation) => participation.person.firstName)
              .join(", ")
          }}

          <span v-if="tardyParticipations.length > 5">
            <!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
            +{{ tardyParticipations.length - 5 }}
            <!-- eslint-enable @intlify/vue-i18n/no-raw-text -->
          </span>
        </span>
      </template>
    </tardiness-chip>

    <personal-note-chip
      v-if="!documentation.canViewParticipationStatus && total == 1"
      v-for="note in documentation?.participations[0]?.notesWithNote"
      :key="'text-note-note-' + note.id"
      :note="note"
    />

    <manage-students-trigger
      v-if="documentation.canEditParticipationStatus"
      :label-key="manageStudentsLabelKey"
      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;
    },
    /**
     * Return the number of present people.
     */
    present() {
      return this.documentation.participations.filter(
        (p) => p.absenceReason === null,
      ).length;
    },
    /**
     * Get all course attendants who have an absence reason, grouped by that reason.
     */
    absences() {
      return Object.groupBy(
        this.documentation.participations.filter(
          (p) => p.absenceReason !== null,
        ),
        ({ absenceReason }) => absenceReason.id,
      );
    },
    /**
     * Parse and combine all extraMark notes.
     *
     * Notes with extraMarks are grouped by ExtraMark. ExtraMarks with the showInCoursebook property set to false are ignored.
     * @return An object where the keys are extraMark IDs and the values have the structure [extraMark, note1, note2, ..., noteN]
     */
    extraMarkChips() {
      // Apply the inner function to each participation, with value being the resulting object
      return this.documentation.participations.reduce((value, p) => {
        // Go through every extra mark of this participation
        for (const { extraMark } of p.notesWithExtraMark) {
          // Only proceed if the extraMark should be displayed here
          if (!extraMark.showInCoursebook) {
            continue;
          }

          // value[extraMark.id] is an Array with the structure [extraMark, note1, note2, ..., noteN]
          if (value[extraMark.id]) {
            value[extraMark.id].push(p);
          } else {
            value[extraMark.id] = [
              this.extraMarks.find((e) => e.id === extraMark.id),
              p,
            ];
          }
        }

        return value;
      }, {});
    },
    /**
     * Return a list Participations with a set tardiness
     */
    tardyParticipations() {
      return this.documentation.participations.filter((p) => p.tardiness);
    },
    manageStudentsLabelKey() {
      if (this.total == 0) {
        return "alsijil.coursebook.notes.show_list";
      }
      return "";
    },
  },
};
</script>

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