Open documentation dialog when clicking lesson note chips as participants

aleksis/apps/alsijil/frontend/components/coursebook/documentation/LessonNotes.vue

@@ -26,103 +26,145 @@ import PersonalNoteChip from "../personal_notes/PersonalNoteChip.vue";
       dense
       color="success"
       outlined
+      @click="$emit('open')"
+      v-bind="dialogActivator.attrs"
+      v-on="dialogActivator.on"
       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(", ")
-            }}
+
+    <template v-if="documentation.canViewParticipationStatus">
+      <absence-reason-chip
+        v-for="[reasonId, participations] in Object.entries(absences)"
+        :key="'reason-' + reasonId"
+        :absence-reason="participations[0].absenceReason"
+        dense
+      >
+        <template #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>
-          <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 -->
+        </template>
+      </absence-reason-chip>
+    </template>
+    <template v-else>
+      <absence-reason-chip
+        v-for="[reasonId, participations] in Object.entries(absences)"
+        :key="'reason-' + reasonId"
+        :absence-reason="participations[0].absenceReason"
+        dense
+        @click="$emit('open')"
+        v-bind="dialogActivator.attrs"
+        v-on="dialogActivator.on"
+      />
+    </template>
+
+    <template v-if="documentation.canViewParticipationStatus">
+      <extra-mark-chip
+        v-for="[markId, [mark, ...participations]] in Object.entries(
+          extraMarkChips,
+        )"
+        :key="'extra-mark-' + markId"
+        :extra-mark="mark"
+        dense
+      >
+        <template #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>
-        </span>
-      </template>
-    </absence-reason-chip>
+        </template>
+      </extra-mark-chip>
+    </template>
+    <template v-else>
+      <extra-mark-chip
+        v-for="[markId, [mark, ...participations]] in Object.entries(
+          extraMarkChips,
+        )"
+        :key="'extra-mark-' + markId"
+        :extra-mark="mark"
+        dense
+        @click="$emit('open')"
+        v-bind="dialogActivator.attrs"
+        v-on="dialogActivator.on"
+      />
+    </template>
 
-    <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>
+    <template v-if="documentation.canViewParticipationStatus">
+      <tardiness-chip v-if="tardyParticipations.length > 0">
+        <template #default>
+          {{ $t("alsijil.personal_notes.late") }}
+        </template>
+
+        <template #append>
+          <span
+            >:
             {{
-              participations
+              tardyParticipations
                 .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 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>
-        </span>
-      </template>
-    </tardiness-chip>
+        </template>
+      </tardiness-chip>
+    </template>
+    <template v-else>
+      <tardiness-chip
+        v-if="tardyParticipations.length > 0"
+        :tardiness="
+          tardyParticipations.length == 1
+            ? tardyParticipations[0].tardiness
+            : undefined
+        "
+        @click="$emit('open')"
+        v-bind="dialogActivator.attrs"
+        v-on="dialogActivator.on"
+      />
+    </template>
 
     <template v-if="!documentation.canViewParticipationStatus && total == 1">
       <personal-note-chip
         v-for="note in documentation?.participations[0]?.notesWithNote"
         :key="'text-note-note-' + note.id"
         :note="note"
+        @click="$emit('open')"
+        v-bind="dialogActivator.attrs"
+        v-on="dialogActivator.on"
       />
     </template>