Move trigger button for ManageStudentsDialog to separate component

aleksis/apps/alsijil/frontend/components/coursebook/absences/ManageStudentsTrigger.vue

+<script>
+import { DateTime } from "luxon";
+import ManageStudentsDialog from "./ManageStudentsDialog.vue";
+import documentationPartMixin from "../documentation/documentationPartMixin";
+
+export default {
+  name: "ManageStudentsTrigger",
+  components: { ManageStudentsDialog },
+  mixins: [documentationPartMixin],
+  data() {
+    return {
+      canOpenParticipation: false,
+      timeout: null,
+    };
+  },
+  mounted() {
+    const lessonStart = DateTime.fromISO(this.documentation.datetimeStart);
+    const now = DateTime.now();
+    this.canOpenParticipation = now >= lessonStart;
+
+    if (!this.canOpenParticipation) {
+      this.timeout = setTimeout(
+        () => (this.canOpenParticipation = true),
+        lessonStart.diff(now).toObject().milliseconds,
+      );
+    }
+  },
+  beforeDestroy() {
+    if (this.timeout) {
+      clearTimeout(this.timeout);
+    }
+  },
+};
+</script>
+
+<template>
+  <manage-students-dialog v-bind="documentationPartProps">
+    <template #activator="{ attrs, on }">
+      <v-chip
+        dense
+        color="primary"
+        outlined
+        :disabled="!canOpenParticipation"
+        v-bind="attrs"
+        v-on="on"
+      >
+        <v-icon>$edit</v-icon>
+      </v-chip>
+    </template>
+  </manage-students-dialog>
+</template>
+
+<style scoped></style>

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

@@ -28,23 +28,17 @@
       Hausaufgaben vergessen
     </v-chip>
     <!-- eslint-enable @intlify/vue-i18n/no-raw-text -->
-    <manage-students-dialog v-bind="documentationPartProps">
-      <template #activator="{ attrs, on }">
-        <v-chip dense color="primary" outlined v-bind="attrs" v-on="on">
-          <v-icon>$edit</v-icon>
-        </v-chip>
-      </template>
-    </manage-students-dialog>
+    <manage-students-trigger v-bind="documentationPartProps" />
   </div>
 </template>
 
 <script>
 import documentationPartMixin from "./documentationPartMixin";
-import ManageStudentsDialog from "../absences/ManageStudentsDialog.vue";
+import ManageStudentsTrigger from "../absences/ManageStudentsTrigger.vue";
 
 export default {
   name: "LessonNotes",
-  components: {ManageStudentsDialog},
+  components: { ManageStudentsTrigger },
   mixins: [documentationPartMixin],
 };
 </script>