From 1b8463aca302e7805740db835326eef7e1ee0892 Mon Sep 17 00:00:00 2001
From: Hangzhi Yu <hangzhi@protonmail.com>
Date: Wed, 15 May 2024 02:34:44 +0200
Subject: [PATCH] Drop iterator mixin
---
.../components/SubstitutionOverview.vue | 6 +-
.../mixins/dateSortedIteratorMixin.js | 206 ------------------
2 files changed, 2 insertions(+), 210 deletions(-)
delete mode 100644 aleksis/apps/chronos/frontend/mixins/dateSortedIteratorMixin.js
diff --git a/aleksis/apps/chronos/frontend/components/SubstitutionOverview.vue b/aleksis/apps/chronos/frontend/components/SubstitutionOverview.vue
index 84607ef5..e3206e12 100644
--- a/aleksis/apps/chronos/frontend/components/SubstitutionOverview.vue
+++ b/aleksis/apps/chronos/frontend/components/SubstitutionOverview.vue
@@ -8,8 +8,6 @@ import {
createOrUpdateSubstitutions,
groupsByOwner,
} from "./amendLesson.graphql";
-
-import dateSortedIteratorMixin from "../mixins/dateSortedIteratorMixin.js";
</script>
<template>
@@ -26,6 +24,7 @@ import dateSortedIteratorMixin from "../mixins/dateSortedIteratorMixin.js";
:enable-edit="true"
:elevated="false"
:force-model-item-update="true"
+ ref="iterator"
>
<template #additionalActions="{ attrs, on }">
<v-autocomplete
@@ -104,7 +103,6 @@ import dateSortedIteratorMixin from "../mixins/dateSortedIteratorMixin.js";
<script>
export default {
name: "SubstitutionOverview",
- mixins: [dateSortedIteratorMixin],
props: {
objId: {
type: [Number, String],
@@ -131,7 +129,7 @@ export default {
},
hash: this.$route.hash,
});
- this.resetDate();
+ this.$refs.iterator.resetDate();
},
},
computed: {
diff --git a/aleksis/apps/chronos/frontend/mixins/dateSortedIteratorMixin.js b/aleksis/apps/chronos/frontend/mixins/dateSortedIteratorMixin.js
deleted file mode 100644
index 399351aa..00000000
--- a/aleksis/apps/chronos/frontend/mixins/dateSortedIteratorMixin.js
+++ /dev/null
@@ -1,206 +0,0 @@
-import { DateTime } from "luxon";
-
-export default {
- props: {
- /**
- * Number of consecutive days to load at once
- * This number of days is initially loaded and loaded
- * incrementally while scrolling.
- */
- dayIncrement: {
- type: Number,
- required: false,
- default: 7,
- },
- /**
- * Margin from list to top of viewport in pixels
- */
- topMargin: {
- type: Number,
- required: false,
- default: 165,
- },
- },
- data() {
- return {
- lastQuery: null,
- dateStart: "",
- dateEnd: "",
- ready: false,
- initDate: false,
- currentDate: "",
- hashUpdater: false,
- };
- },
- methods: {
- resetDate(toDate) {
- // Assure current date
- console.log("Resetting date range", this.$route.hash);
- this.currentDate = toDate || this.$route.hash?.substring(1);
- if (!this.currentDate) {
- console.log("Set default date");
- this.setDate(DateTime.now().toISODate());
- }
-
- const date = DateTime.fromISO(this.currentDate);
- this.initDate = date;
- this.dateStart = date.minus({ days: this.dayIncrement }).toISODate();
- this.dateEnd = date.plus({ days: this.dayIncrement }).toISODate();
- },
- transition() {
- this.initDate = false;
- this.ready = true;
- },
- groupItemsByDay(items) {
- // => {dt: {date: dt, itemsOfDay: doc ...} ...}
- const itemsByDay = items.reduce((byDay, item) => {
- // This works with dummy. Does actual doc have dateStart instead?
- const day = DateTime.fromISO(item.datetimeStart).startOf("day");
- byDay[day] ??= { date: day, itemsOfDay: [] };
- byDay[day].itemsOfDay.push(item);
- return byDay;
- }, {});
- // => [{date: dt, itemsOfDay: doc ..., idx: idx, lastIdx: last-idx} ...]
- // sorting is necessary since backend can send items unordered
- return Object.keys(itemsByDay)
- .sort()
- .map((key, idx, { length }) => {
- const day = itemsByDay[key];
- day.first = idx === 0;
- const lastIdx = length - 1;
- day.last = idx === lastIdx;
- return day;
- });
- },
- fetchMore(from, to, then) {
- console.log("fetching", from, to);
- this.lastQuery.fetchMore({
- variables: {
- dateStart: from,
- dateEnd: to,
- },
- // Transform the previous result with new data
- updateQuery: (previousResult, { fetchMoreResult }) => {
- console.log("Received more");
- then();
- return { items: previousResult.items.concat(fetchMoreResult.items) };
- },
- });
- },
- setDate(date) {
- this.currentDate = date;
- if (!this.hashUpdater) {
- this.hashUpdater = window.requestIdleCallback(() => {
- if (!(this.$route.hash.substring(1) === this.currentDate)) {
- this.$router.replace({ hash: this.currentDate });
- }
- this.hashUpdater = false;
- });
- }
- },
- fixScrollPos(height, top) {
- this.$nextTick(() => {
- if (height < document.documentElement.scrollHeight) {
- document.documentElement.scrollTop =
- document.documentElement.scrollHeight - height + top;
- this.ready = true;
- } else {
- // Update top, could have changed in the meantime.
- this.fixScrollPos(height, document.documentElement.scrollTop);
- }
- });
- },
- intersectHandler(date, first, last) {
- let once = true;
- return (entries) => {
- const entry = entries[0];
- if (entry.isIntersecting) {
- 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());
- this.ready = false;
- 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());
- this.ready = false;
- this.fetchMore(
- date.plus({ days: 1 }).toISODate(),
- date.plus({ days: this.dayIncrement }).toISODate(),
- () => {
- this.ready = true;
- },
- );
- once = false;
- }
- }
- };
- },
- // Improve me?
- // The navigation logic could be a bit simpler if the current days
- // where known as a sorted array (= result of groupItemsByDay) But
- // then the list would need its own component and this gets rather
- // complicated. Then the calendar could also show the present days
- // / gray out the missing.
- //
- // Next two: arg date is ts object
- findPrev(date) {
- return this.$refs.days
- .map((day) => day.date)
- .sort()
- .reverse()
- .find((date2) => date2 < date);
- },
- findNext(date) {
- return this.$refs.days
- .map((day) => day.date)
- .sort()
- .find((date2) => date2 > date);
- },
- gotoDate(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))
- ) {
- this.resetDate(date);
- }
- },
- gotoPrev() {
- const prev = this.findPrev(DateTime.fromISO(this.currentDate));
- if (prev) {
- this.gotoDate(prev.toISODate());
- }
- },
- gotoNext() {
- const next = this.findNext(DateTime.fromISO(this.currentDate));
- if (next) {
- this.gotoDate(next.toISODate());
- }
- },
- },
- created() {
- this.resetDate();
- },
-};
--
GitLab