flameresttable 1.0.11 → 1.0.13

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flameresttable",
-  "version": "1.0.11",
+  "version": "1.0.13",
   "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,23 @@ 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.Add.can = true;
+opts.Remove.can = true;
+
+// Загружаем первичные данные
+Model.all({ sort: ['id'] }).then(r =>
+  TableComponent.value?.Table.load(r)
+)
+
 </script>
 
 <template lang="pug">
-Table
+Table(:model="Model", :opts="opts")
 </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,7 @@ import { Rows, SavedObject } from 'flamerest';
 import TableOpts from "./TableOpts";
 import { reactive, UnwrapRef } from 'vue';
 import merge from 'lodash-es/merge'
+import ITableLoadParams from './TableLoadParams';
 
 // Подгрузчик типа класса
 type Class<T> = new (...args: any[]) => T
@@ -121,12 +122,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,5 +1,8 @@
 <template>
-  <div class="mt-0">
+  <div class="mt-0  overflow-x-scroll">
+
+    <!-- ФИЛЬТРЫ -->
+    <TableFilters :columns="Table.columns" :table="Table"></TableFilters>
 
     <!-- "ДОБАВИТЬ" И ЧИСЛО ЗАПИСЕЙ-->
     <div class="flex items-center justify-between">
@@ -26,7 +29,7 @@
     </div>
 
     <!-- ТАБЛИЦА-->
-    <div class="mt-2 table w-full">
+    <div class="mt-2 table w-full ">
 
       <!-- ЗАГОЛОВКИ СТОЛБЦОВ-->
       <div class="table-header-group">
@@ -176,7 +179,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>
@@ -197,6 +200,7 @@ 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 +209,7 @@ import { isNumber } from 'lodash';
 
 
 export default defineComponent({
-  components: { ModalVue, Paginator, Datepicker },
+  components: { ModalVue, Paginator, Datepicker, TableFilters },
   props: {
     rows: {
       default: [] as Array<any>,

package/src/Table/TableFilters.vue

@@ -1,13 +1,25 @@
-<template lang="pug">
-.flex
+<template>
+  <div class="fc flex-wrap">
+    <div v-for="(col) in props.columns" :key="col.name">
+      {{ col.name }}
+      <!-- ТЕКСТ -->
+      <div v-if="col.Filter.type === 'text'">
+        <input type="text" @keyup="update()" v-model="col.Filter.valueString" />
+      </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 +31,8 @@ const state = reactive({
 
 // Входящие данные компонента
 const props = defineProps<{
-  filters: Array<TableFilter>
+  columns: { [key: string]: Column; },
+  table: FlameTable<any>,
 }>()
 
 // Примонтировано
@@ -27,6 +40,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,7 +19,7 @@ export default class TableOpts {
   /**
    * Параметры прогрузки
    */
-  public LoadParams = {} as any;
+  public LoadParams: ITableLoadParams = {};
 
 
   public set(ColumnName: string, mergingOpts: IColumn) {

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({