From 189bc40f3c978c42db90c7fbb28b2ab3540928f4 Mon Sep 17 00:00:00 2001 From: Jonathan Weth <git@jonathanweth.de> Date: Tue, 23 Apr 2024 16:26:56 +0200 Subject: [PATCH] Reformat --- .../components/coursebook/Coursebook.vue | 93 ++++++++++--------- .../components/coursebook/CoursebookDay.vue | 13 +-- .../coursebook/CoursebookLoader.vue | 4 +- 3 files changed, 58 insertions(+), 52 deletions(-) diff --git a/aleksis/apps/alsijil/frontend/components/coursebook/Coursebook.vue b/aleksis/apps/alsijil/frontend/components/coursebook/Coursebook.vue index 94d9bb5ff..af143a59a 100644 --- a/aleksis/apps/alsijil/frontend/components/coursebook/Coursebook.vue +++ b/aleksis/apps/alsijil/frontend/components/coursebook/Coursebook.vue @@ -21,20 +21,20 @@ <coursebook-day v-for="{ date, docs, first, last } in groupDocsByDay(items)" v-intersect="{ - handler: intersectHandler(date, first, last), - options: { - rootMargin: '-' + topMargin + 'px 0px 0px 0px', - threshold: [0, 1], - }, - }" + handler: intersectHandler(date, first, last), + options: { + rootMargin: '-' + topMargin + 'px 0px 0px 0px', + threshold: [0, 1], + }, + }" :date="date" :docs="docs" :lastQuery="lastQuery" - :focus-on-mount="initDate && (initDate.toMillis() === date.toMillis())" + :focus-on-mount="initDate && initDate.toMillis() === date.toMillis()" @init="transition" :key="'day-' + date" ref="days" - /> + /> <coursebook-loader /> <date-select-footer @@ -42,13 +42,10 @@ @input="gotoDate" @prev="gotoPrev" @next="gotoNext" - /> + /> </template> <template #loading> - <coursebook-loader - :number-of-days="10" - :number-of-docs="5" - /> + <coursebook-loader :number-of-days="10" :number-of-docs="5" /> </template> <template #no-data> @@ -190,12 +187,12 @@ export default { methods: { resetDate(toDate) { // Assure current date - console.log('Resetting date range', this.$route.hash); + console.log("Resetting date range", this.$route.hash); this.currentDate = toDate || this.$route.hash?.substring(1); if (!this.currentDate) { - console.log('Set default date'); + console.log("Set default date"); this.setDate(DateTime.now().toISODate()); - } + } const date = DateTime.fromISO(this.currentDate); this.initDate = date; @@ -203,15 +200,15 @@ export default { this.dateEnd = date.plus({ days: this.dayIncrement }).toISODate(); }, transition() { - this.initDate = false - this.ready = true + this.initDate = false; + this.ready = true; }, groupDocsByDay(docs) { // => {dt: {date: dt, docs: doc ...} ...} const docsByDay = docs.reduce((byDay, doc) => { // This works with dummy. Does actual doc have dateStart instead? const day = DateTime.fromISO(doc.datetimeStart).startOf("day"); - byDay[day] ??= {date: day, docs: []}; + byDay[day] ??= { date: day, docs: [] }; byDay[day].docs.push(doc); return byDay; }, {}); @@ -219,7 +216,7 @@ export default { // sorting is necessary since backend can send docs unordered return Object.keys(docsByDay) .sort() - .map((key, idx, {length}) => { + .map((key, idx, { length }) => { const day = docsByDay[key]; day.first = idx === 0; const lastIdx = length - 1; @@ -229,7 +226,7 @@ export default { }, // docsByDay: {dt: [dt doc ...] ...} fetchMore(from, to, then) { - console.log('fetching', from, to); + console.log("fetching", from, to); this.lastQuery.fetchMore({ variables: { dateStart: from, @@ -237,10 +234,10 @@ export default { }, // Transform the previous result with new data updateQuery: (previousResult, { fetchMoreResult }) => { - console.log('Received more'); + console.log("Received more"); then(); return { items: previousResult.items.concat(fetchMoreResult.items) }; - } + }, }); }, setDate(date) { @@ -248,7 +245,7 @@ export default { if (!this.hashUpdater) { this.hashUpdater = window.requestIdleCallback(() => { if (!(this.$route.hash.substring(1) === this.currentDate)) { - this.$router.replace({ hash: this.currentDate }) + this.$router.replace({ hash: this.currentDate }); } this.hashUpdater = false; }); @@ -257,7 +254,8 @@ export default { fixScrollPos(height, top) { this.$nextTick(() => { if (height < document.documentElement.scrollHeight) { - document.documentElement.scrollTop = document.documentElement.scrollHeight - height + top; + document.documentElement.scrollTop = + document.documentElement.scrollHeight - height + top; this.ready = true; } else { // Update top, could have changed in the meantime. @@ -270,28 +268,35 @@ export default { return (entries) => { const entry = entries[0]; if (entry.isIntersecting) { - - if ((entry.boundingClientRect.top <= this.topMargin) || first) { - console.log('@ ', date.toISODate()); + if (entry.boundingClientRect.top <= this.topMargin || first) { + console.log("@ ", date.toISODate()); this.setDate(date.toISODate()); } if (once && this.ready && first) { - console.log('load up', date.toISODate()); + console.log("load up", date.toISODate()); this.ready = false; - this.fetchMore(date.minus({ days: this.dayIncrement }).toISODate(), - date.minus({ days: 1 }).toISODate(), - () => { - this.fixScrollPos(document.documentElement.scrollHeight, - document.documentElement.scrollTop); - }); + this.fetchMore( + date.minus({ days: this.dayIncrement }).toISODate(), + date.minus({ days: 1 }).toISODate(), + () => { + this.fixScrollPos( + document.documentElement.scrollHeight, + document.documentElement.scrollTop, + ); + }, + ); once = false; } else if (once && this.ready && last) { - console.log('load down', date.toISODate()); + console.log("load down", date.toISODate()); this.ready = false; - this.fetchMore(date.plus({ days: 1 }).toISODate(), - date.plus({ days: this.dayIncrement }).toISODate(), - () => { this.ready = true }); + this.fetchMore( + date.plus({ days: 1 }).toISODate(), + date.plus({ days: this.dayIncrement }).toISODate(), + () => { + this.ready = true; + }, + ); once = false; } } @@ -319,15 +324,19 @@ export default { .find((date2) => date2 > date); }, gotoDate(date) { - const present = this.$refs.days - .find((day) => day.date.toISODate() === date); + const present = this.$refs.days.find( + (day) => day.date.toISODate() === date, + ); if (present) { // React immediatly -> smoother navigation // Also intersect handler does not always react to scrollIntoView this.setDate(date); present.focus("smooth"); - } else if (!this.findPrev(DateTime.fromISO(date)) || !this.findNext(DateTime.fromISO(date))) { + } else if ( + !this.findPrev(DateTime.fromISO(date)) || + !this.findNext(DateTime.fromISO(date)) + ) { this.resetDate(date); } }, diff --git a/aleksis/apps/alsijil/frontend/components/coursebook/CoursebookDay.vue b/aleksis/apps/alsijil/frontend/components/coursebook/CoursebookDay.vue index 7b49df371..14411e9ce 100644 --- a/aleksis/apps/alsijil/frontend/components/coursebook/CoursebookDay.vue +++ b/aleksis/apps/alsijil/frontend/components/coursebook/CoursebookDay.vue @@ -1,8 +1,5 @@ <template> - <v-list-item - :style="{ scrollMarginTop: '145px' }" - two-line - > + <v-list-item :style="{ scrollMarginTop: '145px' }" two-line> <v-list-item-content> <v-subheader class="text-h6">{{ $d(date, "dateWithWeekday") @@ -48,21 +45,21 @@ export default { default: false, }, }, - emits: ['init'], + emits: ["init"], methods: { focus(how) { this.$el.scrollIntoView({ behavior: how, block: "start", - inline: "nearest" + inline: "nearest", }); - console.log('focused @', this.date.toISODate()); + console.log("focused @", this.date.toISODate()); }, }, mounted() { if (this.focusOnMount) { this.$nextTick(this.focus("instant")); - this.$emit('init'); + this.$emit("init"); } }, }; diff --git a/aleksis/apps/alsijil/frontend/components/coursebook/CoursebookLoader.vue b/aleksis/apps/alsijil/frontend/components/coursebook/CoursebookLoader.vue index dfcfe81a6..a5136eb9f 100644 --- a/aleksis/apps/alsijil/frontend/components/coursebook/CoursebookLoader.vue +++ b/aleksis/apps/alsijil/frontend/components/coursebook/CoursebookLoader.vue @@ -24,12 +24,12 @@ export default { numberOfDays: { type: Number, required: false, - default: 1 + default: 1, }, numberOfDocs: { type: Number, required: false, - default: 1 + default: 1, }, }, }; -- GitLab