@mongoosejs/studio 0.0.6 → 0.0.8

package/frontend/index.js

@@ -12,6 +12,12 @@ module.exports = function(apiUrl, isLambda, options) {
       })
     ]
   }
+  if (options?.setAuthorizationHeaderFrom) {
+    config.plugins = config.plugins || [];
+    config.plugins.push(new webpack.DefinePlugin({
+      config__setAuthorizationHeaderFrom: `'${options.setAuthorizationHeaderFrom}'`
+    }));
+  }
   const compiler = webpack(config);
 
   if (options && options.watch) {

package/frontend/src/api.js

@@ -7,6 +7,16 @@ const client = axios.create({
 });
 
 window.apiClient = client;
+if (typeof config__setAuthorizationHeaderFrom === 'string' && config__setAuthorizationHeaderFrom) {
+  client.interceptors.request.use(req => {
+    const accessToken = window.localStorage.getItem(config__setAuthorizationHeaderFrom) || null;
+    if (accessToken) {
+      req.headers.authorization = accessToken;
+    }
+  
+    return req;
+  });
+}
 
 if (config__isLambda) {
   exports.Model = {

package/frontend/src/models/models.html

@@ -46,7 +46,7 @@
           </tr>
         </tbody>
       </table>
-      <div v-if="true" class="loader">
+      <div v-if="status === 'loading'" class="loader">
         <img src="images/loader.gif">
       </div>
     </div>

package/frontend/src/models/models.js

@@ -9,6 +9,8 @@ const appendCSS = require('../appendCSS');
 
 appendCSS(require('./models.css'));
 
+const limit = 50;
+
 module.exports = app => app.component('models', {
   template: template,
   props: ['model'],
@@ -18,7 +20,8 @@ module.exports = app => app.component('models', {
     documents: [],
     schemaPaths: [],
     numDocuments: 0,
-    status: 'init',
+    status: 'loading',
+    loadedAllDocs: false,
     edittingDoc: null,
     docEdits: null,
     filter: null,
@@ -28,7 +31,6 @@ module.exports = app => app.component('models', {
     sortBy: {},
     query: {},
     scrollHeight: 0,
-    limit: 50,
     interval: null
   }),
   created() {
@@ -64,14 +66,24 @@ module.exports = app => app.component('models', {
   },
   methods: {
     async onScroll() {
-      if (this.status === 'loading') {
+      if (this.status === 'loading' || this.loadedAllDocs) {
         return;
       }
       const container = this.$refs.documentsList;
       if (container.scrollHeight - container.clientHeight - 100 < container.scrollTop) {
         this.status = 'loading';
-        this.limit += 50;
-        await this.getDocuments();
+        const { docs } = await api.Model.getDocuments({
+          model: this.currentModel,
+          filter: this.filter,
+          sort: this.sortBy,
+          skip: this.documents.length,
+          limit
+        });
+        console.log('FX', docs.length, limit)
+        if (docs.length < limit) {
+          this.loadedAllDocs = true;
+        }
+        this.documents.push(...docs);
         this.status = 'loaded';
       }
     },
@@ -110,9 +122,12 @@ module.exports = app => app.component('models', {
         model: this.currentModel,
         filter: this.filter,
         sort: this.sortBy,
-        limit: this.limit
+        limit
       });
       this.documents = docs;
+      if (docs.length < limit) {
+        this.loadedAllDocs = true;
+      }
       this.schemaPaths = Object.keys(schemaPaths).sort((k1, k2) => {
         if (k1 === '_id' && k2 !== '_id') {
           return -1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mongoosejs/studio",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "dependencies": {
     "archetype": "0.13.0",
     "csv-stringify": "6.3.0",