diff --git a/aleksis/apps/alsijil/frontend/components/coursebook/Coursebook.vue b/aleksis/apps/alsijil/frontend/components/coursebook/Coursebook.vue index e741bcdf00ee0439d457ab842be2dfcc48d4723c..7e017c7a98c4a73c587c1cf9e4c1b44f7a452e18 100644 --- a/aleksis/apps/alsijil/frontend/components/coursebook/Coursebook.vue +++ b/aleksis/apps/alsijil/frontend/components/coursebook/Coursebook.vue @@ -58,7 +58,7 @@ </div> </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), @@ -66,27 +66,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> @@ -113,7 +97,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 { coursesOfPerson, @@ -130,7 +114,7 @@ export default { CoursebookLoader, CRUDIterator, DateSelectFooter, - DocumentationModal, + CoursebookDay, }, props: { filterType: { @@ -159,7 +143,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? }; }, apollo: { @@ -215,6 +201,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(); }, diff --git a/aleksis/apps/alsijil/frontend/components/coursebook/CoursebookDay.vue b/aleksis/apps/alsijil/frontend/components/coursebook/CoursebookDay.vue new file mode 100644 index 0000000000000000000000000000000000000000..4c6171c8127cbdfd626e2de4147267cba2f52dbe --- /dev/null +++ b/aleksis/apps/alsijil/frontend/components/coursebook/CoursebookDay.vue @@ -0,0 +1,69 @@ +<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>