cache last location in media picker

zero.Backoffice.UI/app/components/ui-datagrid.vue

@@ -59,7 +59,10 @@
     // whether the query params should be set for page + search
     setQuery: true,
     // custom scroll container
-    scrollContainerSelector: null
+    scrollContainerSelector: null,
+    // filter
+    page: 1,
+    pageSize: 30
   };
 
   export default {
@@ -87,13 +90,9 @@
       {
         this.filter.search = val;
       },
-      'value.items': function (val)
-      {
-        this.initialize();
-      },
       'filter.search': function (val)
       {
-        this.filter.page = 1;
+        //this.filter.page = 1;
         this.debouncedUpdate();
       }
     },
@@ -104,6 +103,7 @@
       isLoading: true,
       pages: 1,
       count: 0,
+      loaded: false,
       filter: {
         orderBy: null,
         orderIsDescending: true,
@@ -154,10 +154,16 @@
       // load items based on the current filter
       async load(initial)
       {
+        if (!this.loaded && !initial)
+        {
+          return;
+        }
+
         if (initial)
         {
-          this.filter.page = +this.$route.query.page || 1;
-          this.filter.search = this.$route.query.search;
+          this.filter.page = (!this.configuration.setQuery ? null : +this.$route.query.page) || this.configuration.page || 1;
+          this.filter.pageSize = this.configuration.pageSize || 30;
+          this.filter.search = (!this.configuration.setQuery ? null : this.$route.query.search) || this.configuration.search;
         }
 
         const result = await this.configuration.items(this.filter);
@@ -178,6 +184,11 @@
             this.$nextTick(() => container.scrollTo({ top: 0, behavior: 'smooth' }));
           }
         }
+
+        setTimeout(() =>
+        {
+          this.loaded = true;
+        }, 500);
       },
 
       // updates the list (debounced)
@@ -381,7 +392,7 @@
   }
 </script>
 
-<style>
+<style lang="scss">
   .ui-datagrid-items
   {
     display: grid;
@@ -410,6 +421,11 @@
     text-align: center;
     padding: 0 20px;
     font-size: var(--font-size);
+
+    .ui-loading
+    {
+      left: 0;
+    }
   }
 
   .ui-datagrid-empty-icon

zero.Backoffice.UI/app/modules/media/components/ui-mediapicker.vue

@@ -10,10 +10,12 @@
 
 <script>
   import api from '../api';
-  import { arrayMove } from '../../../utils';
+  import { arrayMove, generateId } from '../../../utils';
   import * as overlays from '../../../services/overlay';
   import MediaPreviews from './media-previews.vue';
 
+  let media_last_query = { parentId: null, search: null, page: 1 };
+
   export default {
     name: 'uiMediapicker',
 
@@ -91,14 +93,14 @@
           component: () => import('../overlays/media.vue'),
           display: 'editor',
           width: 1240,
-          model: {
-            parentId: null
-          }
+          model: { ...media_last_query }
         });
 
         if (result.eventType == 'confirm' && result.value)
         {
-          this.add(result.value);
+          let item = result.value.item;
+          media_last_query = JSON.parse(JSON.stringify(result.value.query));
+          this.add(item);
         }
       },
 

zero.Backoffice.UI/app/modules/media/overlays/media.vue

@@ -86,7 +86,10 @@
       gridConfig: {
         width: 180,
         selectable: true,
-        items: null
+        items: null,
+        page: 1,
+        pageSize: 50,
+        setQuery: false
       },
     }),
 
@@ -120,7 +123,9 @@
 
     mounted()
     {
-      this.parentId = this.config.parentId;
+      this.parentId = this.config.model.parentId;
+      this.search = this.config.model.search;
+      this.gridConfig.page = this.config.model.page || 1;
       this.gridConfig.items = this.getItems;
       this.gridConfig.scrollContainerSelector = '.media-overlay content';
       this.loaded = true;
@@ -136,20 +141,19 @@
           query = {};
         }
 
-        query.pageSize = 50;
-
         if (!query.search || !this.hierarchy.length)
         {
           const hierarchy = await api.folders.getHierarchy(this.id);
           this.hierarchy = hierarchy.data;
         }
 
+
         if (query.search)
         {
           return await api.search(this.search, this.id, query);
         }
 
-        return await api.folders.getChildren(this.id, true, query);
+        return await api.folders.getChildren(this.id, true, { ...query });
       },
 
 
@@ -161,14 +165,20 @@
         }
         else
         {
-          this.config.confirm(item);
+          this.config.confirm({
+            item,
+            query: {
+              search: this.search,
+              parentId: this.parentId,
+              page: this.$refs.grid.filter.page
+            }
+          });
         }
       },
 
 
       async selectItem(id)
       {
-        console.info(id);
         this.parentId = id;
         await this.refresh();
       },