flameresttable 1.0.12 → 1.0.14

package/.vscode/launch.json

@@ -5,7 +5,7 @@
       "type": "chrome",
       "request": "launch",
       "name": "Chrome",
-      "url": "http://localhost:3000",
+      "url": "http://testrest/",
       "webRoot": "${workspaceFolder}/src",
       "preLaunchTask": "start-dev-server",
       "postDebugTask": "stop-dev-server",

package/README.md

@@ -9,5 +9,8 @@
     opts.Popup.beforeEdit = async (row: any, table: typeof FlameTable.prototype): Promise<boolean> => {
     }
 
+### RowSubSlot
+Это слот для клика по строке таблицы, если включён параметр `opts.onRowClickOpenSlot`
+
 # Licenses
 MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flameresttable",
-  "version": "1.0.12",
+  "version": "1.0.14",
   "main": "./src/plugin.ts",
   "repository": {
     "type": "git",
@@ -15,38 +15,35 @@
     "android": "npm run build && npx cap add android && npx cap sync && npx cap open android"
   },
   "dependencies": {
-    "@vuepic/vue-datepicker": "^3.6.8",
-    "flamerest": "^1.0.80",
+    "@vuepic/vue-datepicker": "^7.2.0",
+    "flamerest": "^1.0.92",
     "lodash-es": "^4.17.21",
-    "pinia": "^2.0.34",
+    "pinia": "^2.1.7",
     "pug": "github:FlameArt/pug-tailwind-only",
     "pug-lexer": "github:FlameArt/pug-lexer-only",
-    "sass": "^1.62.0",
-    "vue": "^3.2.45",
-    "vue-router": "^4.1.6"
+    "sass": "^1.69.5",
+    "vue": "^3.3.7",
+    "vue-router": "^4.2.5"
   },
   "devDependencies": {
-    "@capacitor/android": "^3.9.0",
-    "@capacitor/cli": "^3.9.0",
-    "@capacitor/core": "^3.9.0",
-    "@heroicons/vue": "^2.0.17",
-    "@types/lodash-es": "^4.17.7",
-    "@types/lodash.merge": "^4.6.7",
-    "@types/node": "18.8.0",
-    "@typescript-eslint/eslint-plugin": "^5.59.0",
-    "@typescript-eslint/parser": "^5.59.0",
-    "@vitejs/plugin-vue": "^4.1.0",
-    "@volar/vue-language-plugin-pug": "^1.2.0",
-    "@vue/compiler-sfc": "^3.2.45",
-    "autoprefixer": "^10.4.14",
-    "eslint": "^8.38.0",
+    "@heroicons/vue": "^2.0.18",
+    "@types/lodash-es": "^4.17.10",
+    "@types/lodash.merge": "^4.6.8",
+    "@types/node": "20.8.9",
+    "@typescript-eslint/eslint-plugin": "^6.9.0",
+    "@typescript-eslint/parser": "^6.9.0",
+    "@vitejs/plugin-vue": "^4.4.0",
+    "@volar/vue-language-plugin-pug": "^1.6.5",
+    "@vue/compiler-sfc": "^3.3.7",
+    "autoprefixer": "^10.4.16",
+    "eslint": "^8.52.0",
     "eslint-plugin-vue": "^8.7.1",
-    "postcss": "^8.4.23",
+    "postcss": "^8.4.31",
     "postcss-import": "^14.1.0",
-    "tailwindcss": "^3.3.1",
-    "typescript": "^4.9.5",
-    "vite": "^4.2.2",
-    "vue-tsc": "^1.2.0",
+    "tailwindcss": "^3.3.5",
+    "typescript": "^5.2.2",
+    "vite": "^4.5.0",
+    "vue-tsc": "^1.8.22",
     "vue-universal-modal": "^1.1.4"
   },
   "rules": {}

package/src/App.vue

@@ -1,6 +1,10 @@
 <script setup lang="ts">
 import { onMounted, reactive, defineProps } from '@vue/runtime-core'; import { storeFile } from "@/store"; import { useRoute, useRouter } from 'vue-router'; import REST from "flamerest"
 import Table from './Table/Table.vue';
+import { ref } from 'vue';
+import Model from '@models/Testtable';
+import TableOpts from './Table/TableOpts';
+
 const store = storeFile(), router = useRouter(), route = useRoute();
 
 let notRedirectOnAuthList = [
@@ -11,23 +15,33 @@ let notRedirectOnAuthList = [
 ];
 
 onMounted(() => {
-  REST.auth().then((res) => {
-    store.authUser(res);
-    store.User.isLoaded = true;
-    if (res.isAuthorized === false) {
-      if (!notRedirectOnAuthList.includes(route.name?.toString() ?? "")) {
-        router.push({ name: "Auth" });
-      }
-    } else {
-      // Load state
-      // store.projects = REST.get("projects");
-    }
-  });
+
 });
+
+const TableComponent = ref<InstanceType<typeof Table>>();
+const opts = new TableOpts;
+
+opts.set('name', { title: 'Название' });
+opts.set('dt1', { title: 'Дата 1' });
+opts.set('dt2', { title: 'Дата 2' });
+opts.set('id', { title: 'Дата 2', Filter: { isShow: false } });
+opts.set('file', { title: 'файл', Filter: { isShow: false } });
+opts.Add.can = true;
+opts.Remove.can = true;
+
+opts.onRowClickOpenSlot = true;
+
+// Загружаем первичные данные
+Model.all({ sort: ['id'] }).then(r =>
+  TableComponent.value?.Table.load(r)
+)
+
 </script>
 
 <template lang="pug">
-Table
+Table(:model="Model", :opts="opts")
+  template(v-slot:RowSubSlot="params")
+    | {{ params.row.name }}
 </template>
 
 <style>

package/src/Table/Columns.ts

@@ -53,6 +53,32 @@ export class Column implements IColumn {
 
   }
 
+  /**
+   * Это related данные для всех селекторов и внутри таблицы
+   */
+  public Selector = {
+
+    /**
+     * Загрузчик значений
+     * @returns Array
+     */
+    loader: () => [],
+
+    /**
+     * Здесь список готовых значений
+     */
+    values: [],
+
+    /**
+     * Здесь можно определить кастомный лоадер при поиске
+     * @param row 
+     * @param col 
+     * @returns 
+     */
+    value: (row: any, col: string) => row[col]
+
+  };
+
   /**
    * Настройки фильтра
    */
@@ -65,6 +91,14 @@ export class Column implements IColumn {
     valueString: "",
     valueRange: { from: '', to: '' },
 
+    // Тип фильтра
+    type: 'text' as "text" | "fixed" | "fulltext" | "number" | "date" | "daterange" | "selector",
+
+    /**
+     * Список значений под выбор
+     */
+    select: [],
+
     // Минимальное число символов в строке фильтра, после которого будет произведён запрос
     filterMinSymbolsRequest: 0,
 
@@ -211,6 +245,9 @@ export interface IColumn {
     // Показываем ли фильтр
     isShow?: boolean,
 
+    // Тип фильтра
+    type?: "text" | "fixed" | "fulltext" | "number" | "date" | "daterange" | "selector",
+
     // Значение
     valueString?: string,
     valueRange?: { from: string, to: string },

package/src/Table/FlameTable.ts

@@ -3,6 +3,8 @@ import { Rows, SavedObject } from 'flamerest';
 import TableOpts from "./TableOpts";
 import { reactive, UnwrapRef } from 'vue';
 import merge from 'lodash-es/merge'
+import ITableLoadParams from './TableLoadParams';
+import TableRowParams from './TableRowParams';
 
 // Подгрузчик типа класса
 type Class<T> = new (...args: any[]) => T
@@ -38,6 +40,11 @@ export default class FlameTable<T> {
    */
   public Rows = reactive({ rows: [] as Array<T> });
 
+  /**
+   * Динамические параметры строк
+   */
+  public RowsParams: { [key: string]: TableRowParams } = reactive({});
+
   /**
    * Параметры паджинации
    */
@@ -109,6 +116,16 @@ export default class FlameTable<T> {
     if (rows.data) {
       this.Rows.rows = (rows.data ?? []) as any;
       Object.keys(this.Pager).forEach((key) => (this.Pager as any)[key] = (rows.pages as any)[key])
+
+      // удаляем чтобы при перезагрузке не сохранялось состояние пред. строк
+      // производительность: если не стирать параметры строк, то при долгом пользовании таблицей и больших её объёмах в памяти накопится куча позиций, это утечка
+      for (const key in this.RowsParams) delete this.RowsParams[key];
+
+      // Заполняем параметры каждой строки
+      this.Rows.rows.forEach(row => {
+        // @ts-expect-error okay
+        this.RowsParams[row[this.model.constructor.primaryKeys[0]]] = new TableRowParams
+      })
     }
 
   }
@@ -121,12 +138,64 @@ export default class FlameTable<T> {
 
     if (SaveLoadParams !== null) this.opts.LoadParams = SaveLoadParams;
 
-    const rows: Rows<T> = await (this.model as any).constructor.all(Object.assign(this.opts.LoadParams, { page: this.Pager.page, perPage: this.Pager.perPage }));
+    // Дополняем загрузочные параметры фильтрами
+    const filters = this.applyFiltersParams();
+
+    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.load(rows);
 
   }
 
+  public applyFiltersParams() {
+    const customFilters: ITableLoadParams = {
+      where: {}
+    };
+    for (const key in this.columns) {
+      const el = this.columns[key].Filter;
+      switch (el.type) {
+
+        // Частичное совпадение
+        case 'text':
+
+          if (el.valueString.trim() === '') continue;
+          customFilters.where[key] = ['LIKE', key, el.valueString];
+          break;
+
+        // Фуллтекстовый поиск
+        case 'fulltext':
+
+          if (el.valueString.trim() === '') continue;
+          customFilters.where[key] = ['FULLTEXT', key, el.valueString];
+          break;
+
+        // Точное совпадение
+        case 'fixed':
+        case 'date':
+        case 'selector':
+
+          if (el.valueString.trim() === '') continue;
+          customFilters.where[key] = el.valueString;
+
+          break;
+
+        // ДИАПАЗОН
+        case 'number':
+        case 'daterange':
+
+          if (el.valueRange.from.trim() !== '')
+            customFilters.where[key] = ['>=', key, el.valueRange.from];
+          if (el.valueRange.to.trim() !== '')
+            customFilters.where[key] = ['<=', key, el.valueRange.to];
+
+          break;
+
+        default:
+          alert('Unknown table filter type');
+      }
+    }
+    return customFilters;
+  }
 
 
   public async add(): Promise<SavedObject<T> | null> {

package/src/Table/Paginator.vue

@@ -1,12 +1,12 @@
 <template lang="pug">
-nav.relative.z-0.w-full.fc.rounded-md.-space-x-px(aria-label='Pagination' @click="")
+nav.relative.z-0.w-full.fc.flex-wrap.rounded-md.-space-x-px(aria-label='Pagination' @click="")
   a.relative.inline-flex.items-center.px-2.py-2.rounded-l-md.border.border-gray-300.bg-white.text-sm.font-medium.text-gray-500(href='#' class='hover:bg-gray-50')
     span.sr-only Previous
     // Heroicon name: solid/chevron-left
     svg.h-5.w-5(xmlns='http://www.w3.org/2000/svg' viewbox='0 0 20 20' fill='currentColor' aria-hidden='true')
       path(fill-rule='evenodd' d='M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z' clip-rule='evenodd')
   // Current: "z-10 bg-indigo-50 border-indigo-500 text-indigo-600", Default: "bg-white border-gray-300 text-gray-500 hover:bg-gray-50"
-  a.bg-white.border-gray-300.text-gray-500.relative.inline-flex.items-center.px-4.py-2.border.text-sm.font-medium(v-for="page in props.table.Pager.count" class="hover:bg-gray-50" :class="props.table.Pager.page === page ? 'z-10 bg-indigo-50 border-indigo-500 text-indigo-600' : ''" @click="goPage(page)")
+  a.cursor-pointer.bg-white.border-gray-300.text-gray-500.relative.inline-flex.items-center.px-4.py-2.border.text-sm.font-medium(v-for="page in props.table.Pager.count" class="hover:bg-gray-50" :class="props.table.Pager.page === page ? 'z-10 bg-indigo-50 border-indigo-500 text-indigo-600' : ''" @click="goPage(page)")
     | {{ page }}
   //span.relative.inline-flex.items-center.px-4.py-2.border.border-gray-300.bg-white.text-sm.font-medium.text-gray-700  ... 
   a.relative.inline-flex.items-center.px-2.py-2.rounded-r-md.border.border-gray-300.bg-white.text-sm.font-medium.text-gray-500(href='#' class='hover:bg-gray-50')

package/src/Table/Table.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="mt-0  overflow-x-scroll">
 
+    <!-- ФИЛЬТРЫ -->
+    <TableFilters :columns="Table.columns" :table="Table"></TableFilters>
+
     <!-- "ДОБАВИТЬ" И ЧИСЛО ЗАПИСЕЙ-->
     <div class="flex items-center justify-between">
       <slot name="defaultButtons">
@@ -50,25 +53,29 @@
       <!-- СТРОКИ-->
       <div class="table-row-group">
 
-        <div v-for="row in (Table.Rows.rows)" :key="'row_' + (row as any).id"
-          class="table-row cursor-pointer hover:bg-slate-100">
-          <div v-for="column in Table.columns" v-show="column.Table.isShow" :key="'tc_' + column"
-            class="table-cell border-r border-r-slate-100 px-2 last:border-r-0 last:pr-0"
-            @click="column.Table.click(row, column)">
-            <span>{{
-              column.Table.value(row, column) }}</span>
-          </div>
-          <div v-if="opts.Edit.can" class="table-cell border-r border-r-slate-100 px-2 text-center">
-            <button class="px-2 py-1 bg-green-600 text-white my-1" @click="edit(row)">
-              Изменить
-            </button>
+        <template v-for="(row) in (Table.Rows.rows)">
+          <div :key="'row_' + (row as any).id" class="table-row cursor-pointer hover:bg-slate-100" v-if="true">
+            <div v-for="column in Table.columns" v-show="column.Table.isShow" :key="'tc_' + column"
+              class="table-cell border-r border-r-slate-100 px-2 last:border-r-0 last:pr-0"
+              @click="columnClick(row, column)">
+              <span>{{
+                column.Table.value(row, column) }}</span>
+            </div>
+            <div v-if="opts.Edit.can" class="table-cell border-r border-r-slate-100 px-2 text-center">
+              <button class="px-2 py-1 bg-green-600 text-white my-1" @click="edit(row)">
+                Изменить
+              </button>
+            </div>
+            <div v-if="opts.Remove.can" class="table-cell border-r border-r-slate-100 px-2 text-center">
+              <button class="px-2 py-1 bg-gray-600 opacity-30 text-white my-1" @click="deleteRow(row)">
+                Удалить
+              </button>
+            </div>
           </div>
-          <div v-if="opts.Remove.can" class="table-cell border-r border-r-slate-100 px-2 text-center">
-            <button class="px-2 py-1 bg-gray-600 opacity-30 text-white my-1" @click="deleteRow(row)">
-              Удалить
-            </button>
+          <div :key="'row_slot_' + (row as any).id" v-if="opts.onRowClickOpenSlot && !isRowCollapsed(row)">
+            <slot name="RowSubSlot" :row="row" />
           </div>
-        </div>
+        </template>
       </div>
 
     </div>
@@ -176,7 +183,7 @@
           </div>
           <div
             class="cursor-pointer ml-2 text-lg py-2 mr-3 text-white block 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=" SaveTable() ">
+            @click=" SaveTable()">
             {{ Table.mode === 'add' ? 'Добавить' : 'Сохранить' }}
           </div>
         </div>
@@ -191,12 +198,13 @@ import { onMounted, reactive, ref, defineProps } from '@vue/runtime-core'; impor
 // Иконки
 import { XCircleIcon } from '@icons/24/solid'
 import { computed } from '@vue/reactivity';
-import { Column } from './Columns';
+import { Column, IColumn } from './Columns';
 import { defineComponent } from 'vue';
 import TableOpts from './TableOpts';
 import FlameTable from './FlameTable';
 import ModalVue from './../components/default/Modal.vue';
 import Paginator from './Paginator.vue';
+import TableFilters from './TableFilters.vue';
 type Class<T> = new (...args: any[]) => T;
 
 import Datepicker from '@vuepic/vue-datepicker';
@@ -205,7 +213,7 @@ import { isNumber } from 'lodash';
 
 
 export default defineComponent({
-  components: { ModalVue, Paginator, Datepicker },
+  components: { ModalVue, Paginator, Datepicker, TableFilters },
   props: {
     rows: {
       default: [] as Array<any>,
@@ -318,6 +326,22 @@ export default defineComponent({
       })
     }
 
+    const primaryKey = (Table.model as any).constructor.primaryKeys[0];
+
+    const columnClick = (row: any, column: Column) => {
+      if (Table.opts.onRowClickOpenSlot) {
+        Table.RowsParams[row[primaryKey]].collapsed = !Table.RowsParams[row[primaryKey]].collapsed
+      }
+      else {
+        if (column?.Table?.click !== undefined)
+          column.Table.click(row, column);
+      }
+    }
+    const isRowCollapsed = (row: any) => {
+      return Table.RowsParams[row[primaryKey]].collapsed
+    }
+
+
     return {
       Table,
       FlameTableModal,
@@ -327,7 +351,10 @@ export default defineComponent({
       SaveTable,
       deleteRow,
       fileUpdated,
-      getSelector
+      getSelector,
+      primaryKey,
+      columnClick,
+      isRowCollapsed
     }
 
   },
@@ -364,7 +391,7 @@ export default defineComponent({
           }
         }
       }
-    }
+    },
   },
 
 })

package/src/Table/TableFilters.vue

@@ -1,13 +1,29 @@
-<template lang="pug">
-.flex
+<template>
+  <div class="fc flex-wrap">
+    <div v-for="(col) in props.columns" :key="col.name" v-show="col.Filter.isShow">
+
+      <!-- ТЕКСТ -->
+      <div class="fc flex-col">
+        <div class="text-xs text-slate-400">{{ col.title.toUpperCase() ?? col.name }}</div>
+        <div v-if="col.Filter.type === 'text' || col.Filter.type === 'fixed' || col.Filter.type === 'fulltext'">
+          <input class="outline-none border border-slate-500 px-2 py-1 mx-2" :placeholder="col.title ?? col.name"
+            type="text" @keyup="update()" v-model="col.Filter.valueString" />
+        </div>
+      </div>
+
+    </div>
+  </div>
 </template>
 
-<script setup lang="ts">
+<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 { TableFilter } from './TableOpts.js';
+import TableOpts from './TableOpts';
+import { Column } from './Columns';
+//import { TableFilter } from './TableOpts.js';
+import FlameTable from './FlameTable';
 
 // Глобальное хранилище и роуты
 const store = storeFile(), router = useRouter(), route = useRoute();
@@ -19,7 +35,8 @@ const state = reactive({
 
 // Входящие данные компонента
 const props = defineProps<{
-  filters: Array<TableFilter>
+  columns: { [key: string]: Column; },
+  table: FlameTable<any>,
 }>()
 
 // Примонтировано
@@ -27,6 +44,13 @@ onMounted(async () => {
 
 })
 
+
+const update = () => {
+
+  props.table.update();
+
+}
+
 </script>
 
 <style scoped lang="scss"></style>

package/src/Table/TableLoadParams.ts

@@ -0,0 +1,10 @@
+export default interface ITableLoadParams {
+
+   where?: any
+   fields?: any,
+   expand?: any,
+   sortfields?: Array<string>,
+   page?: number,
+   perPage?: number
+
+}

package/src/Table/TableOpts.ts

@@ -2,6 +2,7 @@ import { Column, IColumn } from './Columns';
 
 import merge from 'lodash-es/merge'
 import FlameTable from './FlameTable';
+import ITableLoadParams from './TableLoadParams';
 
 export default class TableOpts {
 
@@ -18,8 +19,12 @@ export default class TableOpts {
   /**
    * Параметры прогрузки
    */
-  public LoadParams = {} as any;
+  public LoadParams: ITableLoadParams = {};
 
+  /**
+   * Открывать субслот в таблице при клике
+   */
+  public onRowClickOpenSlot: boolean = false;
 
   public set(ColumnName: string, mergingOpts: IColumn) {
     // TODO: ЕСТЬ ОШИБКА???

package/src/Table/TableRowParams.ts

@@ -0,0 +1,5 @@
+export default class TableRowParams {
+
+   public collapsed: boolean = true;
+
+}

package/src/main.ts

@@ -6,12 +6,14 @@ import router from "./router";
 
 import 'vue-universal-modal/dist/index.css'
 import VueUniversalModal from 'vue-universal-modal'
+import REST from 'flamerest';
 
 
+REST.SERVER = 'http://testrest';
 
 
 createApp(App)
-.use(createPinia())
-.use(router)
-.use(VueUniversalModal, {teleportTarget: '#my-modals',modalComponent: 'CustomModal'})
-.mount('#app')
+   .use(createPinia())
+   .use(router)
+   .use(VueUniversalModal, { teleportTarget: '#my-modals', modalComponent: 'CustomModal' })
+   .mount('#app')

package/src/router.ts

@@ -3,34 +3,8 @@ const routes = [
   {
     path: '/',
     name: 'Home',
-    component: ()=> import('./pages/Home.vue'),
+    component: () => import('./pages/Home.vue'),
   },
-  {
-    path: '/in',
-    name: 'Auth',
-    component: ()=> import('./pages/user/Auth.vue'),
-  },
-  {
-    path: '/signup',
-    name: 'Signup',
-    component: ()=> import('./pages/user/Signup.vue'),
-  },
-  {
-    path: '/resetpasswordrequest',
-    name: 'ResetPasswordRequest',
-    component: ()=> import('./pages/user/ResetPasswordRequest.vue'),
-  },
-  {
-    path: '/resetpassword',
-    name: 'ResetPassword',
-    component: ()=> import('./pages/user/ResetPassword.vue'),
-  },
-  {
-    path: '/mysettings',
-    name: 'MySettings',
-    component: ()=> import('./pages/user/UserSettings.vue'),
-  },
-
 
 ]
 const router = createRouter({