flameresttable 1.0.90 → 1.0.91

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flameresttable",
-  "version": "1.0.90",
+  "version": "1.0.91",
   "main": "./src/plugin.ts",
   "repository": {
     "type": "git",

package/src/App.vue

@@ -47,6 +47,8 @@ opts.Remove.can = true;
 
 opts.onRowClickOpenSlot = 'rowspace';
 
+opts.Pagination.type = 'scrollable';
+
 opts.LoadParams.sort = ['-dt1'];
 
 </script>

package/src/Table/FlameTable.ts

@@ -70,6 +70,16 @@ export default class FlameTable<T> {
    */
   public exportStatus: 'completed' | 'exportprocess' | string = 'completed';
 
+  /**
+   * Состояние загрузки
+   */
+  public loadingStatus: 'completed' | 'process' | string = 'process';
+
+  /**
+   * Последний прогруженный элемент
+   */
+  public lastLoadedID: number = 0;
+
   /**
    * Проинициализировать модели
    */
@@ -116,18 +126,26 @@ export default class FlameTable<T> {
     // Предзагружаем колонки
     this.preloadRelated()
 
+
+
   }
 
   /**
    * Загрузить результаты от RESTа в таблицу
    * @param rows Отданный объект
    */
-  public load(rows: Rows<T>) {
+  public load(rows: Rows<T>, isAppend: boolean) {
 
     rows.pages = rows.pages ?? { count: 0, page: 1, perPage: 1, total: 0 };
 
     if (rows.data) {
-      this.Rows.rows = (rows.data ?? []) as any;
+
+      // Заполняем массив
+      if (isAppend)
+        this.Rows.rows.push(...(rows.data ?? []) as any);
+      else
+        this.Rows.rows = (rows.data ?? []) as any;
+
       Object.keys(this.Pager).forEach((key) => (this.Pager as any)[key] = (rows.pages as any)[key])
 
       // удаляем чтобы при перезагрузке не сохранялось состояние пред. строк
@@ -212,7 +230,7 @@ export default class FlameTable<T> {
    * @param CustomLoadParams Применить кастомные параметры загрузки
    * @param exportFilename имя файла для экспорта, если указано, данные будут выгружены
    */
-  public async update(CustomLoadParams: ITableLoadParams = {}, exportFilename: string | null = null) {
+  public async update(CustomLoadParams: ITableLoadParams = {}, exportFilename: string | null = null, from: 'pager' | 'filters' = 'pager') {
 
     // Дополняем загрузочные параметры фильтрами
     const filters = merge(this.applyFiltersParams(), CustomLoadParams);
@@ -221,14 +239,25 @@ export default class FlameTable<T> {
     const isNeedUpdate = this.opts.onBeforeUpdate(filters, exportFilename !== null);
     if (!isNeedUpdate) return;
 
-    const rows: Rows<T> = await (this.model as any).constructor.all(merge({}, this.opts.LoadParams, filters, { page: this.Pager.page, perPage: this.Pager.perPage }));
+    // Запускаем прогрузку
+    this.loadingStatus = 'process';
 
-    if (exportFilename === null) {
+    // совмещаем все параметры загрузки
+    const allParams = merge({}, { page: this.Pager.page, perPage: this.Pager.perPage }, this.opts.LoadParams, filters);
 
-      // Строки: загружаем
-      this.load(rows);
+    // Если всё уже загружено
+    if (this.Pager.total !== 0 && allParams.page > this.Pager.total / this.Pager.perPage) return;
+
+    const rows: Rows<T> = await (this.model as any).constructor.all(allParams);
 
+    if (exportFilename === null) {
+
+      // Режим прогрузки
+      let loadModeAppend: boolean = false;
+      if (this.opts.Pagination.type === 'scrollable' && from === 'pager') loadModeAppend = true;
 
+      // Строки: загружаем
+      this.load(rows, loadModeAppend);
 
     }
 
@@ -254,6 +283,8 @@ export default class FlameTable<T> {
       }
     }
 
+    this.loadingStatus = 'completed'
+
   }
 
   /**

package/src/Table/Table.vue

@@ -18,7 +18,7 @@
     </TableTasksPanel>
 
     <!-- ТАБЛИЦА-->
-    <div class="mt-2 table table-fixed w-full ">
+    <div ref="MainTableElement" class="mt-2 table table-fixed w-full ">
 
       <!-- ЗАГОЛОВКИ СТОЛБЦОВ-->
       <div class="table-header-group">
@@ -101,7 +101,7 @@
   </div>
 
   <!-- ПОСТРАНИЧНАЯ РАЗБИВКА -->
-  <Paginator class="mt-3" :table="Table" />
+  <Paginator class="mt-3" :table="Table" v-if="opts.Pagination.type === 'pages'" />
 
   <!-- МОДАЛКА ДОБАВЛЕНИЯ-->
   <ModalVue ref="FlameTableModal">
@@ -258,6 +258,8 @@ export default defineComponent({
 
     const ColumnNames = Object.keys(Table.model as any);
 
+    // Добавляем событие скролла
+
     /**
      * Добавление новой записи
      */
@@ -370,6 +372,9 @@ export default defineComponent({
       return Table.RowsParams[row[primaryKey]].collapsed
     }
 
+    const MainTableElement = ref();
+
+
 
     return {
       Table,
@@ -383,11 +388,43 @@ export default defineComponent({
       getSelector,
       primaryKey,
       columnClick,
-      isRowCollapsed
+      isRowCollapsed,
+      MainTableElement
     }
 
   },
+
+  mounted() {
+    window.addEventListener('scroll', this.handleScroll);
+  },
+
+  beforeUnmount() {
+    window.removeEventListener('scroll', this.handleScroll);
+  },
+
   methods: {
+
+
+    // подскролл таблицы при докручивании до низа
+    handleScroll() {
+
+      if (this.opts.Pagination.type !== 'scrollable') return;
+      if (this.Table.loadingStatus === 'process') return;
+
+      const rect = this.MainTableElement.getBoundingClientRect();
+      const bottom = rect.bottom;
+
+      // Получаем высоту окна просмотра
+      const windowHeight = window.innerHeight;
+
+      // Проверяем, достиг ли скролл нижней грани элемента
+      if (bottom <= windowHeight) {
+        // Грузим на одну страницу дальше, т.к. тут отсчёт начинается с 0, то +2
+        this.Table.update({ page: this.Table.Pager.page + 2, perPage: 20 });
+      }
+
+    },
+
     fileGetData(thisArr: any, getSource: boolean = true) {
 
 

package/src/Table/TableFilters.vue

@@ -98,7 +98,7 @@ const update = (col?: Column) => {
     col.Filter.valueRange = (col.Filter.valueString as any).map((r: ITableSelectorItem) => r.id);
   }
 
-  props.table.update();
+  props.table.update({}, null, 'filters');
 
 }
 

package/src/Table/TableOpts.ts

@@ -138,13 +138,12 @@ export default class TableOpts {
 
   }
 
-
   /**
-   * Запрос на поиск записей
+   * Постраничная разбивка
    */
-  public find = () => {
-
-  }
+  public Pagination: {
+    type: 'scrollable' | 'pages'
+  } = { type: 'pages' }
 
 
 }