From c8f1ca4f62af776ceed440e1f0e192d6302b0c27 Mon Sep 17 00:00:00 2001
From: Jan-Hendrik Willms <tleilax+studip@gmail.com>
Date: Thu, 27 Mar 2025 19:47:27 +0100
Subject: refine view toggling, fetching of courses and general store usage

---
 app/controllers/search/courses.php                 |  8 ----
 .../JsonApi/Routes/Tree/CoursesOfTreeNode.php      |  1 -
 resources/vue/components/StudipPagination.vue      |  5 +-
 resources/vue/components/tree/StudipTree.vue       | 21 ++++-----
 resources/vue/components/tree/StudipTreeList.vue   | 14 +-----
 resources/vue/components/tree/StudipTreeTable.vue  | 16 +------
 .../vue/components/tree/StudipTreeTableRows.vue    |  2 -
 resources/vue/mixins/TreeMixin.js                  | 54 ++++++++++++++--------
 resources/vue/store/TreeStore.js                   | 36 +++++++++------
 9 files changed, 74 insertions(+), 83 deletions(-)

diff --git a/app/controllers/search/courses.php b/app/controllers/search/courses.php
index 8349ccb..6809814 100644
--- a/app/controllers/search/courses.php
+++ b/app/controllers/search/courses.php
@@ -13,12 +13,6 @@
 
 class Search_CoursesController extends AuthenticatedController
 {
-
-    /**
-     * @var string Holds the URL parameter with selected navigation option
-     */
-    private $nav_option = null;
-
     public function __construct(\Trails\Dispatcher $dispatcher)
     {
         $this->allow_nobody = Config::get()->COURSE_SEARCH_IS_VISIBLE_NOBODY;
@@ -68,8 +62,6 @@ class Search_CoursesController extends AuthenticatedController
             Studip\VueApp::create('tree/StudipTree')
                 ->withProps([
                     'breadcrumb-icon' => $this->breadcrumbIcon,
-                    'sem-class'       => $this->semClass,
-                    'semester'        => $this->semester,
                     'start-id'        => $this->startId,
                     'title'           => $this->treeTitle,
                     'with-courses'    => true,
diff --git a/lib/classes/JsonApi/Routes/Tree/CoursesOfTreeNode.php b/lib/classes/JsonApi/Routes/Tree/CoursesOfTreeNode.php
index 4c452c4..c3c0e6c 100644
--- a/lib/classes/JsonApi/Routes/Tree/CoursesOfTreeNode.php
+++ b/lib/classes/JsonApi/Routes/Tree/CoursesOfTreeNode.php
@@ -7,7 +7,6 @@ use JsonApi\Errors\BadRequestException;
 use JsonApi\Routes\Tree\Helpers\TreeNodeCourse;
 use Psr\Http\Message\ServerRequestInterface as Request;
 use Psr\Http\Message\ResponseInterface as Response;
-use JsonApi\Errors\AuthorizationFailedException;
 use JsonApi\Errors\RecordNotFoundException;
 use JsonApi\JsonApiController;
 use StudipTreeNode;
diff --git a/resources/vue/components/StudipPagination.vue b/resources/vue/components/StudipPagination.vue
index 5e6893b..9ea068e 100644
--- a/resources/vue/components/StudipPagination.vue
+++ b/resources/vue/components/StudipPagination.vue
@@ -39,11 +39,11 @@
 <script>
 export default {
     name: 'studip-pagination',
-    emits: ['updateOffset'],
+    emits: ['updateOffset', 'update:currentOffset'],
     props: {
         currentOffset: {
             type: Number,
-            required: true
+            default: 0
         },
         totalItems: {
             type: Number,
@@ -95,6 +95,7 @@ export default {
         },
         updateOffset(offset) {
             this.$emit('updateOffset', parseInt(offset, 10));
+            this.$emit('update:currentOffset', parseInt(offset, 10));
         }
     }
 }
diff --git a/resources/vue/components/tree/StudipTree.vue b/resources/vue/components/tree/StudipTree.vue
index f4090c2..7e0d599 100644
--- a/resources/vue/components/tree/StudipTree.vue
+++ b/resources/vue/components/tree/StudipTree.vue
@@ -10,7 +10,7 @@
                        :with-children="withChildren"
                        :visible-children-only="visibleChildrenOnly"
                        :with-courses="withCourses"
-                       :node="startNode"
+                       :node="currentNode"
                        :breadcrumb-icon="breadcrumbIcon"
                        :editable="editable"
                        :edit-url="editUrl"
@@ -98,14 +98,6 @@ export default {
             type: Boolean,
             default: false
         },
-        semester: {
-            type: String,
-            default: ''
-        },
-        semClass: {
-            type: Number,
-            default: 0
-        },
         breadcrumbIcon: {
             type: String,
             default: 'literature'
@@ -221,8 +213,15 @@ export default {
             PageLayout.title = title.slice(0, -1).join('-') + '/ ' + nodeTitle + ' -' + title[title.length - 1];
         }
     },
-    mounted() {
-        window.focus();
+    created() {
+        this.$store.subscribe(mutation => {
+            if (mutation.type === 'treestore/SET_VIEW_TYPE') {
+                this.pushState(
+                    {viewType: mutation.payload},
+                    {show_as: mutation.payload === 'list' ? null : mutation.payload},
+                );
+            }
+        });
 
         const loadingIndicator = axios.interceptors.request.use(config => {
             setTimeout(() => {
diff --git a/resources/vue/components/tree/StudipTreeList.vue b/resources/vue/components/tree/StudipTreeList.vue
index 8380dc7..d96c235 100644
--- a/resources/vue/components/tree/StudipTreeList.vue
+++ b/resources/vue/components/tree/StudipTreeList.vue
@@ -84,8 +84,7 @@
                     <td colspan="2">
                         <studip-pagination :items-per-page="limit"
                                            :total-items="totalCourseCount"
-                                           :current-offset="offset"
-                                           @updateOffset="updateOffset"
+                                           v-model:current-offset="page"
                         />
                     </td>
                 </tr>
@@ -121,8 +120,7 @@
                     <td colspan="2">
                         <studip-pagination :items-per-page="limit"
                                            :total-items="totalCourseCount"
-                                           :current-offset="offset"
-                                           @updateOffset="updateOffset"
+                                           v-model:current-offset="page"
                         />
                     </td>
                 </tr>
@@ -203,14 +201,6 @@ export default {
             type: Boolean,
             default: false
         },
-        semester: {
-            type: String,
-            default: ''
-        },
-        semClass: {
-            type: Number,
-            default: 0
-        },
         showStructureAsNavigation: {
             type: Boolean,
             default: false
diff --git a/resources/vue/components/tree/StudipTreeTable.vue b/resources/vue/components/tree/StudipTreeTable.vue
index 4c8c8f4..759768e 100644
--- a/resources/vue/components/tree/StudipTreeTable.vue
+++ b/resources/vue/components/tree/StudipTreeTable.vue
@@ -74,8 +74,6 @@
                                          :editable="editable"
                                          :children="children"
                                          :index="index"
-                                         :semester="semester"
-                                         :sem-class="semClass"
                                          :node="node"
                                          @open:node="element => openNode(element)"
                     ></StudipTreeTableRows>
@@ -95,8 +93,7 @@
                 <td colspan="4">
                     <studip-pagination :items-per-page="limit"
                                        :total-items="totalCourseCount"
-                                       :current-offset="offset"
-                                       @updateOffset="updateOffset"
+                                       v-model:current-offset="page"
                     />
                 </td>
             </tr>
@@ -138,8 +135,7 @@
                     <td colspan="4">
                         <studip-pagination :items-per-page="limit"
                                            :total-items="totalCourseCount"
-                                           :current-offset="offset"
-                                           @updateOffset="updateOffset"
+                                           v-model:current-offset="page"
                         />
                     </td>
                 </tr>
@@ -224,14 +220,6 @@ export default {
             type: Boolean,
             default: false
         },
-        semester: {
-            type: String,
-            default: ''
-        },
-        semClass: {
-            type: Number,
-            default: 0
-        },
         showStructureAsNavigation: {
             type: Boolean,
             default: false
diff --git a/resources/vue/components/tree/StudipTreeTableRows.vue b/resources/vue/components/tree/StudipTreeTableRows.vue
index e13b97d..8117663 100644
--- a/resources/vue/components/tree/StudipTreeTableRows.vue
+++ b/resources/vue/components/tree/StudipTreeTableRows.vue
@@ -58,8 +58,6 @@ export default {
         editable: Boolean,
         element: Object,
         index: Number,
-        semester: String,
-        semClass: Number,
         node: Object,
     }
 };
diff --git a/resources/vue/mixins/TreeMixin.js b/resources/vue/mixins/TreeMixin.js
index ef4d81f..43ef469 100644
--- a/resources/vue/mixins/TreeMixin.js
+++ b/resources/vue/mixins/TreeMixin.js
@@ -10,19 +10,26 @@ export const TreeMixin = {
     },
     data() {
         return {
+            currentNode: null,
             showProgressIndicatorTimeout: 500,
-            totalCourseCount: 0,
-            offset: 0
+            page: 0
         };
     },
     computed: {
         ...mapState('treestore', {
+            semester: 'semesterId',
+            semClass: 'semClass',
             limit: 'courseLimit',
             viewType: 'viewType',
         }),
         ...mapGetters('treestore', [
             'getNodeCourseInfo',
+            'getNodeCoursesTotal',
         ]),
+
+        totalCourseCount() {
+            return this.getNodeCoursesTotal(this.currentNode.id);
+        }
     },
     methods: {
         ...mapActions('treestore', [
@@ -35,6 +42,18 @@ export const TreeMixin = {
             initializeFromLocalStorage: 'INITIALIZE_FROM_LOCAL_STORAGE',
         }),
 
+        pushState(state, parameters = {}) {
+            const url = new URL(location.href);
+            Object.entries(parameters).forEach(([key, value]) => {
+                if (value === null && url.searchParams.has(key)) {
+                    url.searchParams.delete(key);
+                } else {
+                    url.searchParams.set(key, value);
+                }
+            });
+            window.history.pushState(state, '', url);
+        },
+
         async openNode(node, pushState = true) {
             this.currentNode = node;
             this.$emit('change-current-node', node);
@@ -48,18 +67,14 @@ export const TreeMixin = {
 
             if (this.withCourses) {
                 this.courses = await this.fetchNodeCourses(node);
-                    // .then(response => {
-                    //     this.totalCourseCount = response.data.meta.page.total;
-                    //     this.offset = Math.ceil(response.data.meta.page.offset / this.limit);
-                    //     this.courses = response.data.data;
-                    // });
             }
 
             // Update browser history.
             if (pushState) {
-                const url = new URL(location.href);
-                url.searchParams.set('node_id', node.id);
-                window.history.pushState({nodeId: node.id}, '', url);
+                this.pushState(
+                    {nodeId: node.id},
+                    {node_id: node.id},
+                );
             }
 
             // Update node_id for semester selector.
@@ -108,17 +123,16 @@ export const TreeMixin = {
             });
             STUDIP.Vue.emit('sort-tree-children', { parent: parentId, children: children });
         },
-        updateOffset(newOffset) {
-            this.getNodeCourses(this.currentNode, newOffset, this.semester, this.semClass, '', this.showingAllCourses)
-                .then(courses => {
-                    this.courseCount = courses.data.meta.page.total;
-                    this.currentOffset = courses.data.meta.page.offset;
-                    this.offset = newOffset;
-                    this.courses = courses.data.data;
-                });
+        async updateOffset(page) {
+            this.courses = await this.fetchNodeCourses({
+                id: this.currentNode.id,
+                page
+            });
         }
     },
-    created() {
-//        this.initializeFromLocalStorage();
+    watch: {
+        page(current) {
+            this.updateOffset(current);
+        }
     }
 }
diff --git a/resources/vue/store/TreeStore.js b/resources/vue/store/TreeStore.js
index c5f0157..9d9cf00 100644
--- a/resources/vue/store/TreeStore.js
+++ b/resources/vue/store/TreeStore.js
@@ -53,7 +53,7 @@ export default {
 
     state: () => ({
         courses: new Map(),
-        courseLimit: 50,
+        courseLimit: 5, // TODO: 50
         nodes: new Map(),
         nodeChildren: new Map(),
         nodeCourseInfo: new Map(),
@@ -77,13 +77,22 @@ export default {
             return state.nodeChildren.get(id).map(id => state.nodes.get(id));
         },
         getNodeCourseInfo: (state) => (id) => state.nodeCourseInfo.get(id) ?? null,
-        getNodeCourses: (state) => (id, offset = 0) => {
-            if (!state.nodeCourses.has(id)) {
+        getNodeCourses: (state) => (id, page = 0) => {
+            if (
+                !state.nodeCourses.has(id)
+                || state.nodeCourses.get(id).courses[page] === undefined
+            ) {
                 return null;
             }
             return state.nodeCourses.get(id)
-                .slice(offset, state.courseLimit)
+                .courses[page]
                 .map(id => state.courses.get(id));
+        },
+        getNodeCoursesTotal: (state) => (id) => {
+            if (!state.nodeCourses.has(id)) {
+                return null;
+            }
+            return state.nodeCourses.get(id).total;
         }
     },
     mutations: {
@@ -109,13 +118,13 @@ export default {
             state.nodeCourseInfo.set(data.id, data.courses);
         },
         SET_NODE_COURSES(state, data) {
-            if (data.offset === undefined || data.reset === true) {
-                state.nodeCourses.set(data.id, data.courses);
-            } else {
-                const courses = state.nodeCourses.get(data.id) ?? [];
-                courses.splice(data.offset, 0, ...data.courses);
-                state.nodeCourses.set(data.id, courses);
-            }
+            const paginatedCourses = state.nodeCourses.has(data.id) ? state.nodeCourses.get(data.id).courses : {};
+            paginatedCourses[data.page] = data.courses;
+
+            state.nodeCourses.set(data.id, {
+                courses: paginatedCourses,
+                total: data.total
+            });
         },
         SET_SEMESTER(state, semesterId) {
             state.nodeCourseInfo.clear();
@@ -228,7 +237,7 @@ export default {
                         'filter[semclass]': state.semClass,
                     }
                 },
-                () => getters.getNodeCourses(data.id, data.page * state.courseLimit),
+                () => getters.getNodeCourses(data.id, data.page),
                 (response) => {
                     const courseIds = [];
                     response.data.forEach(course => {
@@ -239,7 +248,8 @@ export default {
                     commit('SET_NODE_COURSES', {
                         id: data.id,
                         courses: courseIds,
-                        offset: data.page * state.courseLimit,
+                        page: data.page,
+                        total: response.meta.page.total,
                     });
 
                     return response.data;
-- 
cgit v1.0