From 003f88369e617510a0da6fe2182e7b27a65a1449 Mon Sep 17 00:00:00 2001
From: Hangzhi Yu <hangzhi@protonmail.com>
Date: Thu, 6 Jun 2024 18:13:58 +0200
Subject: [PATCH] Use generic infinite scrolling component for coursebook
---
.../components/coursebook/Coursebook.vue | 48 +++++---------
.../components/coursebook/CoursebookDay.vue | 66 -------------------
2 files changed, 15 insertions(+), 99 deletions(-)
delete mode 100644 aleksis/apps/alsijil/frontend/components/coursebook/CoursebookDay.vue
diff --git a/aleksis/apps/alsijil/frontend/components/coursebook/Coursebook.vue b/aleksis/apps/alsijil/frontend/components/coursebook/Coursebook.vue
index 4e673db88..4a072b2b5 100644
--- a/aleksis/apps/alsijil/frontend/components/coursebook/Coursebook.vue
+++ b/aleksis/apps/alsijil/frontend/components/coursebook/Coursebook.vue
@@ -1,5 +1,5 @@
<template>
- <c-r-u-d-iterator
+ <infinite-scrolling-date-sorted-c-r-u-d-iterator
i18n-key="alsijil.coursebook"
:gql-query="gqlQuery"
:gql-additional-query-args="gqlQueryArgs"
@@ -16,38 +16,22 @@
<template #additionalActions="{ attrs, on }">
<coursebook-filters v-model="filters" />
</template>
- <template #default="{ items }">
- <coursebook-loader />
- <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],
- },
- }"
- :date="date"
- :docs="docs"
- :lastQuery="lastQuery"
- :focus-on-mount="initDate && initDate.toMillis() === date.toMillis()"
- @init="transition"
- :key="'day-' + date"
- ref="days"
- />
- <coursebook-loader />
- <date-select-footer
- :value="currentDate"
- @input="gotoDate"
- @prev="gotoPrev"
- @next="gotoNext"
+ <template #item="{ item, lastQuery }">
+ <documentation-modal
+ :documentation="item"
+ :affected-query="lastQuery"
/>
</template>
+
<template #loading>
<coursebook-loader :number-of-days="10" :number-of-docs="5" />
</template>
+ <template #itemLoader>
+ <coursebook-loader />
+ </template>
+
<template #no-data>
<CoursebookEmptyMessage icon="mdi-book-off-outline">
{{ $t("alsijil.coursebook.no_data") }}
@@ -61,18 +45,17 @@
}}
</CoursebookEmptyMessage>
</template>
- </c-r-u-d-iterator>
+ </infinite-scrolling-date-sorted-c-r-u-d-iterator>
</template>
<script>
-import CRUDIterator from "aleksis.core/components/generic/CRUDIterator.vue";
-import DateSelectFooter from "aleksis.core/components/generic/DateSelectFooter.vue";
-import CoursebookDay from "./CoursebookDay.vue";
+import InfiniteScrollingDateSortedCRUDIterator from "aleksis.core/components/generic/InfiniteScrollingDateSortedCRUDIterator.vue";
import { DateTime, Interval } from "luxon";
import { documentationsForCoursebook } from "./coursebook.graphql";
import CoursebookFilters from "./CoursebookFilters.vue";
import CoursebookLoader from "./CoursebookLoader.vue";
import CoursebookEmptyMessage from "./CoursebookEmptyMessage.vue";
+import DocumentationModal from "./documentation/DocumentationModal.vue";
export default {
name: "Coursebook",
@@ -80,9 +63,8 @@ export default {
CoursebookEmptyMessage,
CoursebookFilters,
CoursebookLoader,
- CRUDIterator,
- DateSelectFooter,
- CoursebookDay,
+ DocumentationModal,
+ InfiniteScrollingDateSortedCRUDIterator,
},
props: {
filterType: {
diff --git a/aleksis/apps/alsijil/frontend/components/coursebook/CoursebookDay.vue b/aleksis/apps/alsijil/frontend/components/coursebook/CoursebookDay.vue
deleted file mode 100644
index 14411e9ce..000000000
--- a/aleksis/apps/alsijil/frontend/components/coursebook/CoursebookDay.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<template>
- <v-list-item :style="{ scrollMarginTop: '145px' }" two-line>
- <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,
- },
- },
- emits: ["init"],
- methods: {
- focus(how) {
- this.$el.scrollIntoView({
- behavior: how,
- block: "start",
- inline: "nearest",
- });
- console.log("focused @", this.date.toISODate());
- },
- },
- mounted() {
- if (this.focusOnMount) {
- this.$nextTick(this.focus("instant"));
- this.$emit("init");
- }
- },
-};
-</script>
--
GitLab