Restructure CalendarOverview in more components and add some comments

aleksis/core/frontend/components/calendar/CalendarControlBar.vue

+<script>
+export default {
+  name: "CalendarControlBar",
+  emits: ["prev", "next", "today"],
+};
+</script>
+
+<template>
+  <div class="d-flex justify-center">
+    <v-btn icon class="mx-2" @click="$emit('prev')">
+      <v-icon>mdi-chevron-left</v-icon>
+    </v-btn>
+    <v-btn outlined text class="mx-2" @click="$emit('today')">
+      <v-icon left>mdi-calendar-today-outline</v-icon>
+      {{ $t("calendar.today") }}
+    </v-btn>
+    <v-btn icon class="mx-2" @click="$emit('next')">
+      <v-icon>mdi-chevron-right</v-icon>
+    </v-btn>
+  </div>
+</template>

aleksis/core/frontend/components/calendar/CalendarOverview.vue

@@ -14,28 +14,21 @@
         {{ $refs.calendar.title }}
       </h1>
       <v-row align="stretch">
-        <v-col
-          cols="12"
-          sm="4"
-          lg="3"
-          xl="2"
-          align-self="center"
-          class="d-flex justify-center"
-        >
-          <v-btn icon class="mx-2" @click="$refs.calendar.prev()">
-            <v-icon>mdi-chevron-left</v-icon>
-          </v-btn>
-          <v-btn outlined text class="mx-2" @click="calendarFocus = ''">
-            <v-icon left>mdi-calendar-today-outline</v-icon>
-            {{ $t("calendar.today") }}
-          </v-btn>
-          <v-btn icon class="mx-2" @click="$refs.calendar.next()">
-            <v-icon>mdi-chevron-right</v-icon>
-          </v-btn>
+        <!-- Control bar with prev, next and today buttons -->
+        <v-col cols="12" sm="4" lg="3" xl="2" align-self="center">
+          <calendar-control-bar
+            @prev="$refs.calendar.prev()"
+            @next="$refs.calendar.next()"
+            @today="calendarFocus = new Date()"
+          />
         </v-col>
+
+        <!-- Calendar title with current calendar time range -->
         <v-col v-if="$vuetify.breakpoint.lgAndUp" align-self="center">
           <h1 class="mx-2" v-if="$refs.calendar">{{ $refs.calendar.title }}</h1>
         </v-col>
+
+        <!-- Button menu for selecting currently active calendars (only tablets/mobile) -->
         <v-col
           v-if="$vuetify.breakpoint.mdAndDown"
           cols="12"
@@ -54,7 +47,10 @@
             />
           </button-menu>
         </v-col>
+
         <v-spacer v-if="$vuetify.breakpoint.lgAndUp" />
+
+        <!-- Calendar type select (month, week, day) -->
         <v-col
           cols="12"
           sm="4"
@@ -62,30 +58,20 @@
           align-self="center"
           :align="$vuetify.breakpoint.smAndUp ? 'right' : 'center'"
         >
-          <v-btn-toggle dense v-model="currentCalendarType" class="mx-2">
-            <v-btn
-              v-for="calendarType in availableCalendarTypes"
-              :value="calendarType.type"
-              :key="calendarType.type"
-            >
-              <v-icon v-if="$vuetify.breakpoint.smAndDown">{{
-                "mdi-" + calendarType.icon
-              }}</v-icon>
-              <span class="hidden-sm-and-down">{{
-                nameForMenu(calendarType)
-              }}</span>
-            </v-btn>
-          </v-btn-toggle>
+          <calendar-type-select v-model="currentCalendarType" />
         </v-col>
       </v-row>
       <v-row>
         <v-col v-if="$vuetify.breakpoint.lgAndUp" lg="3" xl="2">
+          <!-- Mini date picker -->
           <v-date-picker
             no-title
             v-model="calendarFocus"
             :style="{ margin: '0px -8px' }"
             :first-day-of-week="1"
           ></v-date-picker>
+
+          <!-- Calendar select (only desktop) -->
           <v-list flat subheader>
             <v-subheader>
               {{ $t("calendar.my_calendars") }}
@@ -102,6 +88,8 @@
             </v-btn>
           </v-list>
         </v-col>
+
+        <!-- Actual calendar -->
         <v-col lg="9" xl="10">
           <v-sheet height="600">
             <v-expand-transition>
@@ -160,10 +148,14 @@ import {
 
 import gqlCalendarOverview from "./calendarOverview.graphql";
 import gqlSetCalendarStatus from "./setCalendarStatus.graphql";
+import CalendarControlBar from "./CalendarControlBar.vue";
+import CalendarTypeSelect from "./CalendarTypeSelect.vue";
 
 export default {
   name: "CalendarOverview",
   components: {
+    CalendarTypeSelect,
+    CalendarControlBar,
     ButtonMenu,
     CalendarSelect,
   },
@@ -178,23 +170,6 @@ export default {
       selectedEvent: {},
       selectedElement: null,
       selectedOpen: false,
-      availableCalendarTypes: [
-        {
-          type: "month",
-          translationKey: "calendar.month",
-          icon: "calendar-month-outline",
-        },
-        {
-          type: "week",
-          translationKey: "calendar.week",
-          icon: "calendar-week-outline",
-        },
-        {
-          type: "day",
-          translationKey: "calendar.day",
-          icon: "calendar-today-outline",
-        },
-      ],
       fetchedDateRange: { start: null, end: null },
     };
   },
@@ -228,9 +203,6 @@ export default {
     },
   },
   methods: {
-    nameForMenu: function (item) {
-      return this.$t(item.translationKey);
-    },
     viewDay({ date }) {
       this.calendarFocus = date;
       this.currentCalendarType = "day";

aleksis/core/frontend/components/calendar/CalendarTypeSelect.vue

+<script>
+export default {
+  name: "CalendarTypeSelect",
+  props: {
+    value: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      innerValue: this.value,
+      availableCalendarTypes: [
+        {
+          type: "month",
+          translationKey: "calendar.month",
+          icon: "calendar-month-outline",
+        },
+        {
+          type: "week",
+          translationKey: "calendar.week",
+          icon: "calendar-week-outline",
+        },
+        {
+          type: "day",
+          translationKey: "calendar.day",
+          icon: "calendar-today-outline",
+        },
+      ],
+    };
+  },
+  watch: {
+    value(val) {
+      this.innerValue = val;
+    },
+    innerValue(val) {
+      this.$emit("input", val);
+    },
+  },
+  methods: {
+    nameForMenu(item) {
+      return this.$t(item.translationKey);
+    },
+  },
+};
+</script>
+
+<template>
+  <v-btn-toggle dense v-model="innerValue" class="mx-2">
+    <v-btn
+      v-for="calendarType in availableCalendarTypes"
+      :value="calendarType.type"
+      :key="calendarType.type"
+    >
+      <v-icon v-if="$vuetify.breakpoint.smAndDown">{{
+        "mdi-" + calendarType.icon
+      }}</v-icon>
+      <span class="hidden-sm-and-down">{{ nameForMenu(calendarType) }}</span>
+    </v-btn>
+  </v-btn-toggle>
+</template>