Support displaying dates of validity ranges in TimeGridField

aleksis/apps/lesrooster/frontend/components/validity_range/TimeGridField.vue

@@ -47,6 +47,13 @@ export default defineComponent({
       required: [(value) => !!value || this.$t("forms.errors.required")],
     };
   },
+  props: {
+    withDates: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
   methods: {
     getCreateData(item) {
       return {
@@ -80,16 +87,21 @@ export default defineComponent({
       );
     },
     formatItem(item) {
-      if (item.group === null) {
-        return this.$t(
-          "lesrooster.validity_range.time_grid.repr.generic",
-          item.validityRange,
-        );
+      const data = {
+        name: item.validityRange.name,
+        group: item.group ? item.group.name : "",
+        start: this.$d(this.$parseISODate(item.validityRange.dateStart)),
+        end: this.$d(this.$parseISODate(item.validityRange.dateEnd)),
+      };
+
+      let key = "generic";
+      if (item.group !== null) {
+        key = "group";
+      }
+      if (this.withDates) {
+        key = "dates_" + key;
       }
-      return this.$t("lesrooster.validity_range.time_grid.repr.default", [
-        item.validityRange.name,
-        item.group.name,
-      ]);
+      return this.$t(`lesrooster.validity_range.time_grid.repr.${key}`, data);
     },
   },
 });

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

@@ -30,8 +30,10 @@
         },
         "confirm_delete_body": "If you remove this group from the validity range, all connected data, like slots and lessons are deleted.",
         "repr": {
-          "default": "{0} ({1})",
-          "generic": "{name} (generic/catch-all)"
+          "default": "{name} ({group})",
+          "generic": "{name} (generic/catch-all)",
+          "dates_default": "{start}–{end} ({group})",
+          "dates_generic": "{start}–{end}"
         }
       }
     },