Show readonly information with own components, add matching notices for future/empty documentations

aleksis/apps/alsijil/frontend/components/coursebook/coursebook.graphql

@@ -60,6 +60,7 @@ query documentationsForCoursebook(
     dateEnd
     oldId
     canEdit
+    futureNotice
     canDelete
   }
 }

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

+<template>
+  <v-card outlined dense rounded="lg" v-bind="$attrs" v-on="$listeners">
+    <div class="font-weight-medium mr-2">
+      {{ $t("alsijil.coursebook.summary.topic") }}:
+    </div>
+    <div class="text-truncate">{{ documentation.topic || "–" }}</div>
+
+    <div class="font-weight-medium mr-2">
+      {{ $t("alsijil.coursebook.summary.homework.label") }}:
+    </div>
+    <div class="text-truncate">{{ documentation.homework || "–" }}</div>
+
+    <div class="font-weight-medium mr-2">
+      {{ $t("alsijil.coursebook.summary.group_note.label") }}:
+    </div>
+    <div class="text-truncate">{{ documentation.groupNote || "–" }}</div>
+  </v-card>
+</template>
+
+<script>
+export default {
+  name: "DocumentationCompactDetails",
+  props: {
+    documentation: {
+      type: Object,
+      required: true,
+    },
+  },
+};
+</script>

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

+<template>
+  <div v-bind="$attrs" v-on="$listeners">
+    <v-card outlined dense rounded="lg" class="mb-2">
+      <v-card-title class="text-subtitle-2 pb-1 font-weight-medium">
+        {{ $t("alsijil.coursebook.summary.topic") }}
+      </v-card-title>
+      <v-card-text>{{ documentation.topic || "–" }}</v-card-text>
+    </v-card>
+    <v-card outlined dense rounded="lg" class="mb-2">
+      <v-card-title class="text-subtitle-2 pb-1 font-weight-medium">
+        {{ $t("alsijil.coursebook.summary.homework.label") }}
+      </v-card-title>
+      <v-card-text>{{ documentation.homework || "–" }}</v-card-text>
+    </v-card>
+    <v-card outlined dense rounded="lg">
+      <v-card-title class="text-subtitle-2 pb-1 font-weight-medium">
+        {{ $t("alsijil.coursebook.summary.group_note.label") }}
+      </v-card-title>
+      <v-card-text>{{ documentation.groupNote || "–" }}</v-card-text>
+    </v-card>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "DocumentationFullDetails",
+  props: {
+    documentation: {
+      type: Object,
+      required: true,
+    },
+  },
+};
+</script>

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

@@ -17,7 +17,13 @@ import PersonChip from "aleksis.core/components/person/PersonChip.vue";
         </time>
       </div>
     </div>
-    <span :class="{ 'text-right': !largeGrid }">
+    <span
+      :class="{
+        'text-right': !largeGrid,
+        'text-subtitle-1': largeGrid,
+        'font-weight-medium': largeGrid,
+      }"
+    >
       {{ documentation.course?.name }}
     </span>
     <div

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

@@ -5,7 +5,41 @@
       class="d-flex flex-column flex-md-row align-stretch align-md-center gap justify-start fill-height"
       v-if="compact"
     >
+      <documentation-compact-details
+        v-bind="dialogActivator.attrs"
+        v-on="dialogActivator.on"
+        v-if="
+          !documentation.canEdit &&
+          (documentation.topic ||
+            documentation.homework ||
+            documentation.groupNote)
+        "
+        :documentation="documentation"
+        @click="$emit('open')"
+        :class="{
+          'flex-grow-1 min-width pa-1 read-only-grid': true,
+          'full-width': $vuetify.breakpoint.mobile,
+        }"
+      />
+      <v-alert
+        v-else-if="documentation.futureNotice"
+        type="warning"
+        outlined
+        class="min-width flex-grow-1 mb-0"
+      >
+        {{ $t("alsijil.coursebook.notices.future") }}
+      </v-alert>
+      <v-alert
+        v-else-if="!documentation.canEdit"
+        type="info"
+        outlined
+        class="min-width flex-grow-1 mb-0"
+      >
+        {{ $t("alsijil.coursebook.notices.no_entry") }}
+      </v-alert>
+
       <v-text-field
+        v-if="documentation.canEdit"
         :class="{
           'flex-grow-1 min-width': true,
           'full-width': $vuetify.breakpoint.mobile,
@@ -18,7 +52,6 @@
         @focusout="save"
         @keydown.enter="saveAndBlur"
         :loading="loading"
-        :readonly="!documentation.canEdit"
       >
         <template #append>
           <v-scroll-x-transition>
@@ -33,6 +66,7 @@
           'flex-grow-1 max-width': true,
           'full-width': $vuetify.breakpoint.mobile,
         }"
+        v-if="documentation.canEdit"
       >
         <v-card
           v-bind="dialogActivator.attrs"
@@ -62,37 +96,44 @@
     <!-- Are focusout & enter enough trigger? -->
     <v-text-field
       filled
-      v-if="!compact"
+      v-if="!compact && documentation.canEdit"
       :label="$t('alsijil.coursebook.summary.topic')"
       :value="documentation.topic"
       @input="topic = $event"
-      :readonly="!documentation.canEdit"
     />
     <v-textarea
       filled
       auto-grow
       rows="3"
       clearable
-      v-if="!compact"
+      v-if="!compact && documentation.canEdit"
       :label="$t('alsijil.coursebook.summary.homework.label')"
       :value="documentation.homework"
       @input="homework = $event"
-      :readonly="!documentation.canEdit"
     />
     <v-textarea
       filled
       auto-grow
       rows="3"
       clearable
-      v-if="!compact"
+      v-if="!compact && documentation.canEdit"
       :label="$t('alsijil.coursebook.summary.group_note.label')"
       :value="documentation.groupNote"
       @input="groupNote = $event"
-      :readonly="!documentation.canEdit"
+    />
+
+    <documentation-full-details
+      v-if="!compact && !documentation.canEdit"
+      :documentation="documentation"
     />
   </div>
 </template>
 
+<script setup>
+import DocumentationCompactDetails from "./DocumentationCompactDetails.vue";
+import DocumentationFullDetails from "./DocumentationFullDetails.vue";
+</script>
+
 <script>
 import createOrPatchMixin from "aleksis.core/mixins/createOrPatchMixin.js";
 import documentationPartMixin from "./documentationPartMixin";
@@ -225,4 +266,10 @@ export default {
   display: grid;
   grid-template-columns: auto min-content;
 }
+
+.read-only-grid {
+  display: grid;
+  grid-template-columns: min-content auto;
+  grid-template-rows: auto;
+}
 </style>

aleksis/apps/alsijil/frontend/messages/en.json

@@ -57,6 +57,10 @@
           "empty": "No group note"
         }
       },
+      "notices": {
+        "future": "Editing this lesson isn't allowed as this lesson is in the future.",
+        "no_entry": "There is no entry for this lesson yet."
+      },
       "filter": {
         "own": "Only show own lessons",
         "groups": "Groups",

aleksis/apps/alsijil/schema/documentation.py

@@ -11,6 +11,7 @@ from graphene_django_cud.mutations import (
 )
 from guardian.shortcuts import get_objects_for_user
 
+from aleksis.apps.alsijil.util.predicates import can_edit_documentation, is_in_allowed_time_range
 from aleksis.apps.chronos.models import LessonEvent
 from aleksis.apps.cursus.models import Subject
 from aleksis.apps.cursus.schema import CourseType, SubjectType
@@ -50,6 +51,8 @@ class DocumentationType(PermissionsTypeMixin, DjangoFilterMixin, DjangoObjectTyp
     course = graphene.Field(CourseType, required=False)
     subject = graphene.Field(SubjectType, required=False)
 
+    future_notice = graphene.Boolean(required=False)
+
     old_id = graphene.ID(required=False)
 
     @staticmethod
@@ -58,6 +61,13 @@ class DocumentationType(PermissionsTypeMixin, DjangoFilterMixin, DjangoObjectTyp
             return root.teachers
         return root.lesson_event.teachers
 
+    @staticmethod
+    def resolve_future_notice(root: Documentation, info, **kwargs):
+        """Show whether the user can't edit the documentation because it's in the future."""
+        return not is_in_allowed_time_range(info.context.user, root) and can_edit_documentation(
+            info.context.user, root
+        )
+
     @classmethod
     def get_queryset(cls, queryset, info):
         return get_objects_for_user(info.context.user, "alsijil.view_documentation", queryset)