Use batch spaces in UI (#53)

* Add skip and take to spaces api * Add batch loading (infinity scroll) on spaces * User skip and take on load spaces in modal * Fix all skip and take query * Fix version container max width
AMEST · Sep 22, 2024 · 4b233b2 · 4b233b2
1 parent fc49bd5
commit 4b233b2
Show file tree

Hide file tree

Showing 8 changed files with 83 additions and 56 deletions.
diff --git a/src/Mimisbrunnr.Storage.MongoDb/Migrations/SpacesFlatPermissionMigrationModule.cs b/src/Mimisbrunnr.Storage.MongoDb/Migrations/SpacesFlatPermissionMigrationModule.cs
@@ -35,7 +35,7 @@ public override async Task ExecuteAsync(IServiceProvider provider, CancellationT
 
         private static async Task<Space[]> GetBatch(IRepository<Space> repository, int page)
         {
-            return await repository.GetAll().Take(BatchSize).Skip(BatchSize * page).ToArrayAsync();
+            return await repository.GetAll().Skip(BatchSize * page).Take(BatchSize).ToArrayAsync();
         }
 
     }

diff --git a/src/Mimisbrunnr.Web.Host/ClientApp/src/components/home/Version.vue b/src/Mimisbrunnr.Web.Host/ClientApp/src/components/home/Version.vue
@@ -1,34 +1,35 @@
-<template>
-  <div class="text-muted version">
-      Version: {{this.version}}
-  </div>
-</template>
-
-<script>
-import axios from 'axios'
-export default {
-    name: "Version",
-    data() {
-        return {
-            version: ""
-        }
-    },
-    mounted: async function(){
-        var versionRequest = await axios.get("/api/version");
-        if(versionRequest.status == 200)
-            this.version = versionRequest.data.version;
-    }
-}
-</script>
-
-<style scoped>
-.version{
-    position: absolute;
-    bottom: 1em;
-}
-@media (max-width: 860px) {
-  .version {
-    bottom: 4em;
-  }
-}
+<template>
+  <div class="text-muted version">
+      Version: {{this.version}}
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+export default {
+    name: "Version",
+    data() {
+        return {
+            version: ""
+        }
+    },
+    mounted: async function(){
+        var versionRequest = await axios.get("/api/version");
+        if(versionRequest.status == 200)
+            this.version = versionRequest.data.version;
+    }
+}
+</script>
+
+<style scoped>
+.version{
+    position: absolute;
+    bottom: 1em;
+    max-width: 90%;
+}
+@media (max-width: 860px) {
+  .version {
+    bottom: 4em;
+  }
+}
 </style>
diff --git a/src/Mimisbrunnr.Web.Host/ClientApp/src/components/space/modal/CopyPage.vue b/src/Mimisbrunnr.Web.Host/ClientApp/src/components/space/modal/CopyPage.vue
@@ -95,10 +95,8 @@ export default {
       var spaces = [];
       if (favorite.length > 0)
         spaces = favorite.map(i => i.space);
-      if (spaces.length == 0){
-        var allSpaces = await SpaceService.getSpaces();
-        spaces = allSpaces.slice(0, 5);
-      }
+      if (spaces.length == 0)
+        spaces = await SpaceService.getSpaces(5, 0);
       this.spaces = spaces;
     },
     close: function () {

diff --git a/src/Mimisbrunnr.Web.Host/ClientApp/src/components/space/modal/MovePage.vue b/src/Mimisbrunnr.Web.Host/ClientApp/src/components/space/modal/MovePage.vue
@@ -95,10 +95,8 @@ export default {
       var spaces = [];
       if (favorite.length > 0)
         spaces = favorite.map(i => i.space);
-      if (spaces.length == 0){
-        var allSpaces = await SpaceService.getSpaces();
-        spaces = allSpaces.slice(0, 5);
-      }
+      if (spaces.length == 0)
+        spaces = await SpaceService.getSpaces(5, 0);
       this.spaces = spaces;
     },
     close: function () {

diff --git a/src/Mimisbrunnr.Web.Host/ClientApp/src/services/spaceService.js b/src/Mimisbrunnr.Web.Host/ClientApp/src/services/spaceService.js
@@ -2,8 +2,12 @@ import axios from "axios";
 import { showToast } from "@/services/Utils";
 /*eslint-disable */
 var SpaceService = {
-    getSpaces: async function() {
-        var spacesRequest = await axios.get("/api/space", {
+    getSpaces: async function(take = null, skip = null) {
+        var url = "/api/space";
+        if (take){
+            url += `?take=${take}&skip=${skip ? skip : 0}`;
+        }
+        var spacesRequest = await axios.get(url, {
             validateStatus: false,
         });
         if (spacesRequest.status == 200) 

diff --git a/src/Mimisbrunnr.Web.Host/ClientApp/src/views/SpaceDirectory.vue b/src/Mimisbrunnr.Web.Host/ClientApp/src/views/SpaceDirectory.vue
@@ -1,5 +1,5 @@
 <template>
-  <b-container fluid class="spaces-container h-100vh">
+  <b-container fluid class="spaces-container h-100vh" id="space-container">
     <b-container class="text-left">
       <br />
       <div v-if="!this.isAnonymous">
@@ -56,6 +56,9 @@ export default {
     spaces: [],
     favoriteSpaces: [],
     searchText: "",
+    scrollMax: 0,
+    offset: 0,
+    batchSize: 12
   }),
   components: {
     FavoriteSpaceCard,
@@ -78,7 +81,11 @@ export default {
       if (searchResult != null) this.spaces = searchResult;
     }, 300),
     loadSpaces: async function () {
-      this.spaces = await SpaceService.getSpaces();
+      var spacesBatch = await SpaceService.getSpaces(this.batchSize, this.offset);
+      for (const space of spacesBatch)
+        this.spaces.push(space);
+      if(spacesBatch.length > 2)
+        this.scrollMax = this.scrollMax - 100;
     },
     loadFavorites: async function () {
       this.favoriteSpaces = await FavoriteService.getAll(15, 0, "space");
@@ -88,9 +95,29 @@ export default {
     // eslint-disable-next-line
     searchText(newValue, oldValue) {
       if (newValue.length > 2) this.search();
-      if (newValue.length == 0) this.loadSpaces();
+      if (newValue.length == 0) {
+        this.spaces = [];
+        this.scrollMax = 0;
+        this.offset = 0;
+        this.loadSpaces();
+      }
     },
   },
+  mounted: function (){
+    var self = this;
+    var spaceContainer = window.document.getElementById("space-container");
+    spaceContainer.onscroll = function () {
+        var headerNavHeight = window.document.getElementById("header-nav").clientHeight;
+        var wh = window.innerHeight-headerNavHeight;
+        if ((spaceContainer.scrollTop + wh > spaceContainer.scrollHeight - wh / 2) && (self.scrollMax != spaceContainer.scrollHeight)) {
+            // eslint-disable-next-line
+            console.log(`Download next ${self.batchSize} spaces. scrollTop: ${spaceContainer.scrollTop}`);
+            self.scrollMax = spaceContainer.scrollHeight
+            self.offset += self.batchSize;
+            self.loadSpaces();
+        }
+    }
+  },
   created: async function () {
     document.title = `${this.$t("spaceDirectory.title")} - ${
       this.$store.state.application.info.title

diff --git a/src/Mimisbrunnr.Web/Wiki/SpaceController.cs b/src/Mimisbrunnr.Web/Wiki/SpaceController.cs
@@ -35,9 +35,9 @@ public SpaceController(ISpaceService spaceService, IDataImportService spaceImpor
     [AllowAnonymous]
     [ProducesResponseType(typeof(SpaceModel[]), 200)]
     [ProducesResponseType(401)]
-    public async Task<IActionResult> GetAll()
+    public async Task<IActionResult> GetAll([FromQuery] int? take = null, [FromQuery] int? skip = null)
     {
-        return Ok(await _spaceService.GetAll(User?.ToInfo()));
+        return Ok(await _spaceService.GetAll(User?.ToInfo(), take, skip));
     }
 
     [HttpGet("{key}")]

diff --git a/src/Mimisbrunnr.Wiki/Services/SpaceManager.cs b/src/Mimisbrunnr.Wiki/Services/SpaceManager.cs
@@ -18,10 +18,10 @@ public async Task<Space[]> GetAll(int? take = null, int? skip = null)
     {
         var query = _spaceRepository.GetAll();
 
-        if (take.HasValue)
-            query = query.Take(take.Value);
         if (skip.HasValue)
             query = query.Skip(skip.Value);
+        if (take.HasValue)
+            query = query.Take(take.Value);
 
         return await query.ToArrayAsync();
     }
@@ -45,11 +45,10 @@ public async Task<Space[]> GetAllWithPermissions(UserInfo user = null,
             query = query.Where(g => g.PermissionsFlat.Any(p => permissionsArray.Contains(p)) || g.Type == SpaceType.Public);
         }
 
-        if (take.HasValue)
-            query = query.Take(take.Value);
         if (skip.HasValue)
             query = query.Skip(skip.Value);
-
+        if (take.HasValue)
+            query = query.Take(take.Value);
 
         return await query.ToArrayAsync();
     }
@@ -59,10 +58,10 @@ public async Task<Space[]> GetPublicSpaces(int? take = null, int? skip = null)
         var query = _spaceRepository.GetAll()
             .Where(space => space.Type == SpaceType.Public);
 
-        if (take.HasValue)
-            query = query.Take(take.Value);
         if (skip.HasValue)
             query = query.Skip(skip.Value);
+        if (take.HasValue)
+            query = query.Take(take.Value);
 
         return await query.ToArrayAsync();
     }