Focus intial day

Each day is now a component with a focus method.
The magic number: scrollMarginTop: '145px
Is the height of both headers & should be accessible in
script/template; but isn't.

aleksis/apps/alsijil/frontend/components/coursebook/Coursebook.vue

@@ -17,7 +17,7 @@
       <coursebook-filters v-model="filters" />
     </template>
     <template #default="{ items }">
-      <v-list-item
+      <coursebook-day
         v-for="{ date, docs, idx, lastIdx } in groupDocsByDay(items)"
         v-intersect="{
             handler: intersectHandler(date, idx, lastIdx),
@@ -25,27 +25,11 @@
               threshold: [0, 1],
             },
           }"
-        two-line
-        :key="'day-' + date"
-        :id="'documentation_' + date.toISODate()"
-      >
-        <v-list-item-content>
-          <v-subheader class="text-h6">{{
-            $d(day[0], "dateWithWeekday")
-          }}</v-subheader>
-          <v-list max-width="100%" class="pt-0 mt-n1">
-            <v-list-item
-              v-for="doc in docs"
-              :key="'documentation-' + (doc.oldId || doc.id)"
-            >
-              <documentation-modal
-                :documentation="doc"
-                :affected-query="lastQuery"
-              />
-            </v-list-item>
-          </v-list>
-        </v-list-item-content>
-      </v-list-item>
+        :date="date"
+        :docs="docs"
+        :lastQuery="lastQuery"
+        :focus-on-mount="gotoDate.toMillis() === date.toMillis()"
+        />
 
       <date-select-footer :value="$route.hash.substring(1)" />
     </template>
@@ -72,7 +56,7 @@
 <script>
 import CRUDIterator from "aleksis.core/components/generic/CRUDIterator.vue";
 import DateSelectFooter from "aleksis.core/components/generic/DateSelectFooter.vue";
-import DocumentationModal from "./documentation/DocumentationModal.vue";
+import CoursebookDay from "./CoursebookDay.vue";
 import { DateTime, Interval } from "luxon";
 import { documentationsForCoursebook } from "./coursebook.graphql";
 import CoursebookFilters from "./CoursebookFilters.vue";
@@ -87,7 +71,7 @@ export default {
     CoursebookLoader,
     CRUDIterator,
     DateSelectFooter,
-    DocumentationModal,
+    CoursebookDay,
   },
   props: {
     filterType: {
@@ -116,7 +100,9 @@ export default {
       courses: [],
       incomplete: false,
       // TODO: Start with false until main query finished
-      ready: true,
+      ready: false,
+      gotoDate: false,
+      // TODO: Who sets ready true & gotoDate false?
     };
   },
   computed: {
@@ -181,6 +167,7 @@ export default {
       } 
 
       const date = DateTime.fromISO(this.$route.hash.substring(1));
+      this.gotoDate = date;
       this.dateStart = date.minus({ days: 3 }).toISODate();
       this.dateEnd = date.plus({ days: 4 }).toISODate();
     },

aleksis/apps/alsijil/frontend/components/coursebook/CoursebookDay.vue

+<template>
+  <v-list-item
+    :style="{ scrollMarginTop: '145px' }"
+    two-line
+    :key="'day-' + date"
+  >
+    <v-list-item-content>
+      <v-subheader class="text-h6">{{
+        $d(date, "dateWithWeekday")
+      }}</v-subheader>
+      <v-list max-width="100%" class="pt-0 mt-n1">
+        <v-list-item
+          v-for="doc in docs"
+          :key="'documentation-' + (doc.oldId || doc.id)"
+        >
+          <documentation-modal
+            :documentation="doc"
+            :affected-query="lastQuery"
+          />
+        </v-list-item>
+      </v-list>
+    </v-list-item-content>
+  </v-list-item>
+</template>
+
+<script>
+import DocumentationModal from "./documentation/DocumentationModal.vue";
+export default {
+  name: "CoursebookDay",
+  components: {
+    DocumentationModal,
+  },
+  props: {
+    date: {
+      type: Object,
+      required: true,
+    },
+    docs: {
+      type: Array,
+      required: true,
+    },
+    lastQuery: {
+      type: Object,
+      required: true,
+    },
+    focusOnMount: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  methods: {
+    focus(how) {
+      this.$el.scrollIntoView({
+        behavior: how,
+        block: "start",
+        inline: "nearest"
+      });
+    },
+  },
+  mounted() {
+    console.log('mounted ', this.date.toISODate(), this.focusOnMount);
+    if (this.focusOnMount) {
+      this.$nextTick(this.focus("instant"));
+      console.log('focused @', this.date.toISODate());
+    }
+  },
+};
+</script>