flameresttable 1.0.38 → 1.0.40

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flameresttable",
-  "version": "1.0.38",
+  "version": "1.0.40",
   "main": "./src/plugin.ts",
   "repository": {
     "type": "git",
@@ -15,8 +15,8 @@
     "android": "npm run build && npx cap add android && npx cap sync && npx cap open android"
   },
   "dependencies": {
-    "@vuepic/vue-datepicker": "^7.2.0",
-    "flamerest": "^1.0.93",
+    "@vuepic/vue-datepicker": "^7.2.1",
+    "flamerest": "^1.0.94",
     "lodash-es": "^4.17.21",
     "pinia": "^2.1.7",
     "pug": "github:FlameArt/pug-tailwind-only",
@@ -38,7 +38,7 @@
     "@volar/vue-language-plugin-pug": "^1.6.5",
     "@vue/compiler-sfc": "^3.3.7",
     "autoprefixer": "^10.4.16",
-    "eslint": "^8.52.0",
+    "eslint": "^8.53.0",
     "eslint-plugin-vue": "^8.7.1",
     "postcss": "^8.4.31",
     "postcss-import": "^14.1.0",

package/src/App.vue

@@ -54,6 +54,7 @@ opts.LoadParams.sort = ['-dt1'];
 Table(:model="Model", :opts="opts")
   template(v-slot:RowSubSlot="params")
     | {{ params.row.name + ' LOOOONG  LOOOONG  LOOOONG  LOOOONG  LOOOONG  LOOOONG  LOOOONG  LOOOONG  LOOOONG  LOOOONG  LOOOONG  line' }}
+  template(#otherButtons)
 </template>
 
 <style>

package/src/Table/FlameTable.ts

@@ -125,12 +125,17 @@ export default class FlameTable<T> {
 
       // удаляем чтобы при перезагрузке не сохранялось состояние пред. строк
       // производительность: если не стирать параметры строк, то при долгом пользовании таблицей и больших её объёмах в памяти накопится куча позиций, это утечка
-      for (const key in this.RowsParams) delete this.RowsParams[key];
+
+      // upd: Не удаляем, чтобы хранить данные по выделениям между фильтрацией и паджинацией. Сбрасывается вручную
+      for (const key in this.RowsParams)
+        if (!this.RowsParams[key].selected)
+          delete this.RowsParams[key];
 
       // Заполняем параметры каждой строки
       this.Rows.rows.forEach(row => {
-        // @ts-expect-error okay
-        this.RowsParams[row[this.model.constructor.primaryKeys[0]]] = new TableRowParams
+        const newParam = new TableRowParams;
+        newParam.item = row;
+        this.RowsParams[(row as any)[(this.model as any).constructor.primaryKeys[0]]] = newParam;
       })
     }
 
@@ -194,14 +199,12 @@ export default class FlameTable<T> {
 
   /**
    * Обновить результаты от RESTа
-   * @param SaveLoadParams Сохранить стандартные параметры загрузки
+   * @param CustomLoadParams Применить кастомные параметры загрузки
    */
-  public async update(SaveLoadParams: any = null) {
-
-    if (SaveLoadParams !== null) this.opts.LoadParams = SaveLoadParams;
+  public async update(CustomLoadParams: ITableLoadParams = {}) {
 
     // Дополняем загрузочные параметры фильтрами
-    const filters = this.applyFiltersParams();
+    const filters = merge(this.applyFiltersParams(), CustomLoadParams);
 
     const rows: Rows<T> = await (this.model as any).constructor.all(merge({}, this.opts.LoadParams, filters, { page: this.Pager.page, perPage: this.Pager.perPage }));
 
@@ -209,6 +212,10 @@ export default class FlameTable<T> {
 
   }
 
+  /**
+   * Применить параметры, указанные в фильтрах
+   * @returns 
+   */
   public applyFiltersParams() {
     const customFilters: ITableLoadParams = {
       where: {},
@@ -227,9 +234,11 @@ export default class FlameTable<T> {
             customFilters.params[key] = el.valueString;
             continue;
           case 'daterange':
-          case 'number':
             customFilters.params[key] = el.valueRange;
             continue;
+          case 'number':
+            customFilters.params[key] = el.valueRangeNumbers;
+            continue;
           case 'selector':
             if (this.columns[key].Filter.selector.multiselect) {
               customFilters.params[key] = el.valueRange;
@@ -381,22 +390,20 @@ export default class FlameTable<T> {
     return res;
   }
 
+  /**
+   * Получить все выбранные колонки массивом объектов строк
+   * @returns 
+   */
   public getSelectedRows() {
-    const result: Array<T> = [];
-    this.Rows.rows.forEach((r: any) => {
-      const param = this.RowsParams[r[(this.model as any).constructor.primaryKeys[0]]]
-      if (param.selected)
-        result.push(r)
-    })
-    return result;
+    return this.Rows.rows.filter((r: any) => r.selected).map((r: any) => r.item);
   }
 
   /**
-   * Выгрузить существующие колонки в CSV
+   * Выгрузить существующие колонки в CSV средствами браузера
    * @param filename 
    * @param arr 
    */
-  public exportSelectedToCSV(filename: string = "table.csv", arr: any = null) {
+  public exportToCSV(filename: string = "table.csv", arr: any = null) {
 
     arr = arr ?? this.getSelectedRows();
 
@@ -412,4 +419,59 @@ export default class FlameTable<T> {
 
   }
 
+  /**
+   * Выгрузить в Excel средствами бекенда
+   * @param filename 
+   * @param arr 
+   */
+  public exportToXLS(onlySelected: boolean = false, filename: string | null = null, arr: any = null, columnList: Array<string> | null = null) {
+
+    const tClass = Object.getPrototypeOf(this.model).constructor;
+    const indexKey = tClass.primaryKeys[0];
+
+    const customFilter: ITableLoadParams = {
+      where: {}
+    };
+
+    // Только выбранные элементы
+    if (onlySelected) {
+      // Получаем айдишки и затем вносим их в условие IN
+      arr = arr ?? this.getSelectedRows();
+      const INArray: Array<any> = [];
+      for (const row of arr) {
+        if (typeof row[indexKey] !== 'undefined') {
+          INArray.push(row[indexKey]);
+        }
+      }
+      if (INArray.length > 0) {
+        customFilter.where = {
+          indexKey: ['IN', indexKey, INArray]
+        }
+      }
+    }
+
+    customFilter.export = {
+      format: "xlsx",
+      titles: [],
+      filename: filename ?? 'export_' + Date.now() + ".xlsx"
+    };
+    customFilter.fields = [];
+
+    for (const colKey in this.columns) {
+
+      const col = this.columns[colKey];
+      if (columnList !== null && (!columnList.includes(col.name))) continue;
+      if (columnList === null && (col.isVirtual || !col.Table.isShow)) continue;
+
+      // проверки пройдены, все оставшиеся колонки добавляем в вывод
+      (customFilter as any).export.titles.push(col.title !== '' ? col.title : col.name);
+      customFilter.fields.push(col.name);
+
+    }
+
+    // Делаем запрос на отдачу
+    this.update(customFilter);
+
+  }
+
 }

package/src/Table/Table.vue

@@ -4,40 +4,18 @@
     <!-- ФИЛЬТРЫ -->
     <TableFilters :columns="Table.columns" :table="Table"></TableFilters>
 
-    <!-- "ДОБАВИТЬ" И ЧИСЛО ЗАПИСЕЙ-->
-    <div class="flex items-center justify-between">
-      <slot name="defaultButtons">
-        <div v-show="$props.opts?.Add.can"
-          class="flex mr-3 cursor-pointer justify-center items-center text-white bg-blue-600 font-medium rounded text-sm px-4 text-center hover:bg-blue-700 .focus:ring-4.focus:ring-blue-200.dark:focus:ring-blue-900"
-          @click="add()">
-          <div class="text-xl">
-            +
-          </div>
-          <div class="ml-2">
-            {{ $props.opts?.Add.buttonTitle }}
-          </div>
-        </div>
-        <div v-show="$props.opts?.Export.CSV.can"
-          class="flex mr-3 cursor-pointer justify-center items-center text-white bg-blue-600 font-medium rounded text-sm px-4 text-center hover:bg-blue-700 .focus:ring-4.focus:ring-blue-200.dark:focus:ring-blue-900"
-          @click="Table.exportSelectedToCSV()">
-          <div class="text-xl">
-            +
-          </div>
-          <div class="ml-2">
-            {{ $props.opts?.Export.CSV.buttonTitle }}
-          </div>
-        </div>
-      </slot>
-      <slot name="otherButtons" />
-
-      <!-- ЧИСЛО ЗАПИСЕЙ -->
-      <div class="text-xs text-gray-400">
-        {{ opts.lang === 'ru' ? 'Показано:' : 'Showing' }} {{ Table.Pager.total > Table.Pager.perPage * Table.Pager.page ?
-          Table.Pager.perPage * Table.Pager.page : Table.Pager.total }} / {{ Table.Pager.total }} {{ opts.lang === 'ru' ?
-    'записей' : ' records' }}
-      </div>
-
-    </div>
+    <!-- ПАНЕЛЬ ОПЕРАЦИЙ НАД ТАБЛИЦЕЙ -->
+    <TableTasksPanel :table="Table" @add="add">
+      <template #defaultButtons>
+        <slot name="defaultButtons">
+        </slot>
+      </template>
+      <template #otherButtons>
+        <slot name="otherButtons">
+        </slot>
+      </template>
+
+    </TableTasksPanel>
 
     <!-- ТАБЛИЦА-->
     <div class="mt-2 table table-fixed w-full ">
@@ -72,7 +50,7 @@
       </div>
 
       <!-- СТРОКИ-->
-      <div class="table-row-group">
+      <div class="table-row-group text-left">
 
         <template v-for="(row) in (Table.Rows.rows)">
           <div :key="'row_' + (row as any).id" class="defaultRow table-row cursor-pointer hover:bg-slate-100" v-if="true">
@@ -248,10 +226,11 @@ import Datepicker from '@vuepic/vue-datepicker';
 import '@vuepic/vue-datepicker/dist/main.css';
 import { isNumber } from 'lodash';
 import 'vue-select/dist/vue-select.css';
+import TableTasksPanel from './TableTasksPanel.vue';
 
 
 export default defineComponent({
-  components: { ModalVue, Paginator, Datepicker, TableFilters },
+  components: { ModalVue, Paginator, Datepicker, TableFilters, TableTasksPanel },
   props: {
     rows: {
       default: [] as Array<any>,

package/src/Table/TableFilters.vue

@@ -44,11 +44,12 @@
         </div>
 
         <!-- ДАТА -->
-        <div v-if="col.Filter.type === 'date' || col.Filter.type === 'daterange'">
-          <Datepicker v-if="col.Filter.type === 'date'" v-model="col.Filter.valueString" :auto-apply="true"
-            :enable-time-picker="false" @update:model-value="update()" :teleport="true"></Datepicker>
-          <Datepicker v-if="col.Filter.type === 'daterange'" v-model="col.Filter.valueRange" :range="true"
-            :enable-time-picker="false" :auto-apply="true" @update:model-value="update()" :teleport="true"></Datepicker>
+        <div class="mobile:w-full" v-if="col.Filter.type === 'date' || col.Filter.type === 'daterange'">
+          <Datepicker class="mobile:w-full" v-if="col.Filter.type === 'date'" v-model="col.Filter.valueString"
+            :auto-apply="true" :enable-time-picker="false" @update:model-value="update()" :teleport="true"></Datepicker>
+          <Datepicker class="mobile:w-full" v-if="col.Filter.type === 'daterange'" v-model="col.Filter.valueRange"
+            :range="true" :enable-time-picker="false" :auto-apply="true" @update:model-value="update()" :teleport="true">
+          </Datepicker>
         </div>
       </div>
 

package/src/Table/TableLoadParams.ts

@@ -1,11 +1,17 @@
 export default interface ITableLoadParams {
 
    where?: any
-   fields?: any,
-   expand?: any,
+   fields?: Array<string>,
+   expand?: Array<any>,
    sort?: Array<string>,
    page?: number,
    perPage?: number,
-   params?: any
+   params?: any,
+
+   export?: {
+      format: 'xlsx' | 'csv',
+      titles?: Array<string>,
+      filename?: string,
+   }
 
 }

package/src/Table/TableRowParams.ts

@@ -2,5 +2,6 @@ export default class TableRowParams {
 
    public collapsed: boolean = true;
    public selected: boolean = false;
+   public item: any = null;
 
 }

package/src/Table/TableTasksPanel.vue

@@ -0,0 +1,192 @@
+<template>
+  <!-- "ДОБАВИТЬ" И ЧИСЛО ЗАПИСЕЙ-->
+  <div class="flex flex-wrap items-center justify-between">
+
+    <!-- ЛЕВАЯ ЧАСТЬ -->
+    <div>
+      <!-- Стандартные кнопки -->
+      <slot name="defaultButtons">
+        <div v-show="state.opts?.Add.can"
+          class="flex mr-3 cursor-pointer justify-center items-center text-white bg-blue-600 font-medium rounded text-sm px-4 text-center hover:bg-blue-700 .focus:ring-4.focus:ring-blue-200.dark:focus:ring-blue-900"
+          @click="emit('add')">
+          <div class="text-xl">
+            +
+          </div>
+          <div class="ml-2">
+            {{ state.opts?.Add.buttonTitle }}
+          </div>
+        </div>
+        <div v-show="state.opts?.Export.CSV.can"
+          class="flex mr-3 cursor-pointer justify-center items-center text-white bg-blue-600 font-medium rounded text-sm px-4 text-center hover:bg-blue-700 .focus:ring-4.focus:ring-blue-200.dark:focus:ring-blue-900"
+          @click="state.Table.exportToCSV()">
+          <div class="text-xl">
+            +
+          </div>
+          <div class="ml-2">
+            {{ state.opts?.Export.CSV.buttonTitle }}
+          </div>
+        </div>
+      </slot>
+
+      <!-- Доп кнопки -->
+      <slot name="otherButtons" />
+
+
+      <!-- ЧИСЛО ЗАПИСЕЙ -->
+      <div class="text-xs text-gray-400">
+        {{ state.opts.lang === 'ru' ? 'Показано:' : 'Showing' }} {{ state.Table.Pager.total > state.Table.Pager.perPage *
+          state.Table.Pager.page ?
+          state.Table.Pager.perPage * state.Table.Pager.page : state.Table.Pager.total }} / {{ state.Table.Pager.total }} {{
+    state.opts.lang === 'ru' ?
+    'записей' : ' records' }}
+      </div>
+
+    </div>
+
+    <!-- ПРАВАЯ ЧАСТЬ -->
+    <div>
+
+      <!-- ДЕЙСТВИЯ С ОТМЕЧЕННЫМИ -->
+      <div class="fc">
+        <div>
+          <label>
+            <select class="minimal text-xs text-center text-slate-500" v-model="state.selectModel" @change="selectAction">
+              <option :value="0">{{ state.opts.lang === 'ru' ? 'ДЕЙСТВИЯ' : 'ACTIONS' }}</option>
+              <option :value="1">{{ state.opts.lang === 'ru' ? 'Выгрузить выбранные' : 'Export selected' }} [{{ 5 }}]
+              </option>
+              <option :value="2">{{ state.opts.lang === 'ru' ? 'Выгрузить всё' : 'Export all' }} [{{
+                state.Table.Pager.total }}]</option>
+            </select>
+          </label>
+        </div>
+        <!--
+        <div
+          class="flex mr-3 cursor-pointer justify-center items-center text-white bg-blue-600 font-medium rounded text-sm px-4 text-center hover:bg-blue-700 .focus:ring-4.focus:ring-blue-200.dark:focus:ring-blue-900">
+          <div class="text-xl">
+            +
+          </div>
+          <div class="ml-2">
+            Экспорт отмеченных {{ 5 }}
+          </div>
+        </div>
+        <div
+          class="flex mr-3 cursor-pointer justify-center items-center text-white bg-blue-600 font-medium rounded text-sm px-4 text-center hover:bg-blue-700 .focus:ring-4.focus:ring-blue-200.dark:focus:ring-blue-900">
+          <div class="text-xl">
+            +
+          </div>
+          <div class="ml-2">
+            Экспорт всех {{ state.Table.Pager.total }}
+          </div>
+        </div>
+        -->
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, reactive, ref, defineProps, defineEmits, nextTick } from '@vue/runtime-core'; import type { Ref } from 'vue'; import { storeFile } from "@/store"; import { useRoute, useRouter } from 'vue-router'; import REST from "flamerest"
+
+// Иконки
+import { } from '@icons/24/solid'
+import FlameTable from './FlameTable';
+
+// Глобальное хранилище и роуты
+const store = storeFile(), router = useRouter(), route = useRoute();
+
+// Входящие данные компонента
+const props = defineProps<{
+  table: FlameTable<any>,
+}>()
+const emit = defineEmits(['add'])
+
+// Локальное состояние компонента
+const state = reactive({
+  opts: props.table.opts,
+  Table: props.table,
+  selectModel: 0
+})
+
+const selectAction = () => {
+
+  switch (state.selectModel) {
+    case 0:
+      return;
+    case 1:
+
+      return;
+    case 2:
+      state.Table.exportToXLS();
+      return;
+  }
+
+}
+
+</script>
+
+<style scoped lang="scss">
+$height: 36;
+
+label {
+  position: relative;
+  display: inline-block;
+
+  &:before {
+    content: '';
+    height: ($height - 5) + px;
+    position: absolute;
+    right: 7px;
+    top: 3px;
+    width: 22px;
+
+    //background: -webkit-linear-gradient(#fff, #f0f0f0);
+    //background: -moz-linear-gradient(#fff, #f0f0f0);
+    //background: linear-gradient(#f5f5f5, #e0e0e0);
+    background: #fff; //for Firefox in Android
+
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+    pointer-events: none;
+    display: block;
+  }
+
+  &:after {
+    content: " ";
+    position: absolute;
+    right: 15px;
+    top: 46%;
+    margin-top: -3px;
+    z-index: 2;
+    pointer-events: none;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 6.9px 4px 0 4px;
+    border-color: #aaa transparent transparent transparent;
+    pointer-events: none;
+  }
+
+  select {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    padding: 0 30px 0 10px;
+
+    border: 1px solid #e0e0e0;
+    border-radius: 3px;
+    line-height: $height + px;
+    height: $height + px;
+    //box-shadow: inset 1px 1px 1px 0px rgba(0, 0, 0, 0.2);
+    background: #fff;
+
+    //min-width: 200px;
+    margin: 0 5px 5px 0;
+  }
+}
+
+//fix for ie 10 later
+select::-ms-expand {
+  display: none;
+}
+</style>

package/src/Table/TableFiltersSelector.vue

@@ -1,47 +0,0 @@
-<template>
-  <!-- Это селектор c мультивыбором -->
-  <div>
-
-  </div>
-</template>
-
-<script setup lang="ts" generic="T">
-import { onMounted, reactive, ref, defineProps } from '@vue/runtime-core'; import type { Ref } from 'vue'; import { storeFile } from "@/store"; import { useRoute, useRouter } from 'vue-router'; import REST from "flamerest"
-
-// Иконки
-import { XCircleIcon } from '@icons/24/solid'
-import TableOpts from './TableOpts';
-import { Column } from './Columns';
-//import { TableFilter } from './TableOpts.js';
-import FlameTable from './FlameTable';
-import Datepicker from '@vuepic/vue-datepicker';
-
-// Глобальное хранилище и роуты
-const store = storeFile(), router = useRouter(), route = useRoute();
-
-// Локальное состояние компонента
-const state = reactive({
-  data: {}
-})
-
-// Входящие данные компонента
-const props = defineProps<{
-  columns: { [key: string]: Column; },
-  table: FlameTable<any>,
-}>()
-
-// Примонтировано
-onMounted(async () => {
-
-})
-
-
-const update = () => {
-
-  props.table.update();
-
-}
-
-</script>
-
-<style scoped lang="scss"></style>