flameresttable 1.0.28 → 1.0.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flameresttable",
-  "version": "1.0.28",
+  "version": "1.0.30",
   "main": "./src/plugin.ts",
   "repository": {
     "type": "git",
@@ -23,15 +23,17 @@
     "pug-lexer": "github:FlameArt/pug-lexer-only",
     "sass": "^1.69.5",
     "vue": "^3.3.7",
-    "vue-router": "^4.2.5"
+    "vue-router": "^4.2.5",
+    "vue-select": "^4.0.0-beta.6"
   },
   "devDependencies": {
     "@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",
+    "@types/vue-select": "^3.16.6",
+    "@typescript-eslint/eslint-plugin": "^6.9.1",
+    "@typescript-eslint/parser": "^6.9.1",
     "@vitejs/plugin-vue": "^4.4.0",
     "@volar/vue-language-plugin-pug": "^1.6.5",
     "@vue/compiler-sfc": "^3.3.7",

package/src/App.vue

@@ -4,6 +4,7 @@ import Table from './Table/Table.vue';
 import { ref } from 'vue';
 import Model from '@models/Testtable';
 import TableOpts from './Table/TableOpts';
+import Relatedtable from '@models/Relatedtable';
 
 const store = storeFile(), router = useRouter(), route = useRoute();
 
@@ -24,7 +25,7 @@ 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('id', { title: 'ID', Selector: { model: Relatedtable }, Filter: { isShow: true, type: 'selector', selector: { multiselect: true, mode: 'vertical' } } });
 opts.set('file', { title: 'файл', Filter: { isShow: false } });
 opts.set("name", {
   title: 'Название', Table:

package/src/Table/Columns.ts

@@ -1,3 +1,5 @@
+import ITableSelectorItem from "./TableSelectorItem";
+
 // Подгрузчик типа класса
 type Class<T> = new (...args: any[]) => T
 
@@ -86,24 +88,30 @@ export class Column implements IColumn {
    */
   public Selector = {
 
+    /**
+     * Нужна авто-предзагрузка значений при загрузке страницы
+     * [полная таблица]
+     */
+    preload: true,
+
     /**
      * Загрузчик значений
-     * @returns Array
+     * @returns ITableSelectorItem[]
      */
-    loader: () => [],
+    loader: null as ((rows?: Array<any>) => ITableSelectorItem[]) | null,
 
     /**
      * Модель, с которой выгружать значения
      */
-    model: null as Class<any> | null,
+    model: null as any | null,
 
     /**
      * Здесь список готовых значений
      */
-    values: [],
+    values: [] as ITableSelectorItem[],
 
     /**
-     * Здесь можно определить кастомный лоадер при поиске
+     * Кастомизация вывода отдельного элемента
      * @param row 
      * @param col 
      * @returns 
@@ -130,7 +138,10 @@ export class Column implements IColumn {
     /**
      * Список значений под выбор
      */
-    select: [],
+    selector: {
+      mode: 'vertical' as 'vertical' | 'horizontal',
+      multiselect: true,
+    },
 
     // Минимальное число символов в строке фильтра, после которого будет произведён запрос
     filterMinSymbolsRequest: 0,
@@ -305,6 +316,14 @@ export interface IColumn {
     filterRow?: number,
     filterColumn?: number,
 
+    /**
+     * Список значений под выбор
+     */
+    selector?: {
+      mode?: 'vertical' | 'horizontal',
+      multiselect?: boolean,
+    },
+
     /**
      * CSS-классы, применяемые к фильтру, 
      */
@@ -312,6 +331,43 @@ export interface IColumn {
 
   },
 
+  /**
+   * Это единые related данные для всех селекторов:
+   * внутри таблицы для замены id названий на значения
+   * селектор для фильтров
+   * селектор в попапе
+   */
+  Selector?: {
+
+    /**
+     * Загрузчик значений ручной
+     * @returns ITableSelectorItem[]
+     */
+    loader?: ((rows?: Array<any>) => ITableSelectorItem[]) | null,
+
+    /**
+     * Здесь список готовых значений
+     */
+    values?: ITableSelectorItem[],
+
+
+    /**
+     * Модель, с которой выгружать значения
+     */
+    model?: Class<any> | null,
+
+
+    /**
+     * Кастомизация вывода отдельного элемента
+     * @param row 
+     * @param col 
+     * @returns 
+     */
+    value?: (row: any, col: string) => string
+
+  },
+
+
   Popup?: {
 
     // Тут привязка к реальным данным

package/src/Table/FlameTable.ts

@@ -106,10 +106,11 @@ export default class FlameTable<T> {
     // TODO: Сортируем колонки, если указан порядок
     //this.columns
 
-
-
     // Далее юзер просто будет делать set("колонка", опции)
 
+    // Предзагружаем колонки
+    this.preloadRelated()
+
   }
 
   /**
@@ -135,6 +136,62 @@ export default class FlameTable<T> {
 
   }
 
+  public async preloadRelated() {
+
+    const allPreloadPromises: Promise<any>[] = [];
+    for (const key in this.columns) {
+      const col = this.columns[key];
+
+      // только где предзагрузка включена
+      if (col.Selector.preload !== true) continue;
+
+      // если указана модель, то загружаем через неё
+      if (col.Selector.model !== null)
+        allPreloadPromises.push(col.Selector.model.prototype.constructor.all({
+          perPage: 1000 // лимит в 1000 ответов для уменьшения дефолтного нагруза
+        }).then((r: any) => {
+
+          // Значение загрузилось: делаем преобразования
+
+          // ключ модели
+          const pk = (col.Selector.model).prototype.constructor['primaryKeys'][0];
+
+          // Ручные
+          if (typeof col.Selector.loader === 'function') {
+            col.Selector.values.push(...col.Selector.loader(r.data))
+          }
+
+          // Преобразования не найдено, попытка автоматически определить параметры
+          if (col.Selector.loader === null) {
+            const rows = r.data;
+            for (const row of rows) {
+              if (typeof row[pk] !== 'undefined') {
+
+                let name = typeof row['name'] !== 'undefined' ? row['name'].toString() : null;
+                name = name ?? (typeof row['title'] !== 'undefined' ? row['title'].toString() : null);
+                name = name ?? (typeof row['desc'] !== 'undefined' ? row['desc'].toString() : null);
+                const color = (typeof row['color'] !== 'undefined' ? row['color'].toString() : null);
+                const position = typeof row[pk] === 'number' ? row[pk] : 0;
+
+                col.Selector.values.push({
+                  id: row[pk],
+                  title: name,
+                  label: name,
+                  color: color,
+                  position: position
+                })
+
+              }
+            }
+          }
+        }))
+    }
+
+    // Начинаем процесс предзагрузки
+    await Promise.allSettled(allPreloadPromises);
+
+  }
+
   /**
    * Обновить результаты от RESTа
    * @param SaveLoadParams Сохранить стандартные параметры загрузки
@@ -166,7 +223,6 @@ export default class FlameTable<T> {
           case 'date':
           case 'fixed':
           case 'fulltext':
-          case 'selector':
           case 'text':
             customFilters.params[key] = el.valueString;
             continue;
@@ -174,6 +230,13 @@ export default class FlameTable<T> {
           case 'number':
             customFilters.params[key] = el.valueRange;
             continue;
+          case 'selector':
+            if (this.columns[key].Filter.selector.multiselect) {
+              customFilters.params[key] = el.valueRange;
+            }
+            else
+              customFilters.params[key] = el.valueString;
+            continue;
           default:
             alert('НЕИЗВЕСТНЫЙ ТИП')
             continue;
@@ -200,7 +263,6 @@ export default class FlameTable<T> {
         // Точное совпадение
         case 'fixed':
         case 'date':
-        case 'selector':
 
           if (el.valueString.trim() === '') continue;
           customFilters.where[key] = el.valueString;
@@ -218,6 +280,17 @@ export default class FlameTable<T> {
 
           break;
 
+        case 'selector':
+
+          if (el.selector.multiselect) {
+            if (el.valueRange.length > 0)
+              customFilters.where[key] = ['IN', key, el.valueRange];
+          }
+          else
+            customFilters.where[key] = el.valueString;
+
+          break;
+
         default:
           alert('Unknown table filter type');
       }

package/src/Table/Table.vue

@@ -247,6 +247,7 @@ type Class<T> = new (...args: any[]) => T;
 import Datepicker from '@vuepic/vue-datepicker';
 import '@vuepic/vue-datepicker/dist/main.css';
 import { isNumber } from 'lodash';
+import 'vue-select/dist/vue-select.css';
 
 
 export default defineComponent({

package/src/Table/TableFilters.vue

@@ -1,22 +1,40 @@
 <template>
   <div class="fc flex-wrap">
-    <div v-for="(col) in props.columns" :key="col.name" v-show="col.Filter.isShow" :class="col.Filter.classes">
+    <div v-for="(col) in props.columns" :key="col.name" v-show="col.Filter.isShow"
+      :class="col.Filter.classes + (col.Filter.type === 'selector' && col.Filter.selector.mode === 'horizontal' ? ' w-full ' : '')">
 
-      <!-- ТЕКСТ -->
       <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 v-if="col.Filter.type === 'selector'">
-          <select class="outline-none border border-slate-500 px-2 py-1 mx-2" :placeholder="col.title ?? col.name"
-            @change="update()" v-model="col.Filter.valueString">
-            <option v-for="item in col.Selector.values" :key="item[0]" value="">
-              {{ item[1] }}
+          <!-- ВЕРТИКАЛЬНЫЕ -->
+          <!--<select v-if="col.Filter.selector.mode === 'vertical'" :multiple="col.Filter.selector.multiselect"
+            class="outline-none border border-slate-500 px-2 py-1 mx-2" :placeholder="col.title ?? col.name"
+            @change="update(col)" v-model="col.Filter.valueString">
+            <option v-for="item in col.Selector.values" :key="item.id" :value="item.id">
+              {{ item.title }}
             </option>
-          </select>
+          </select>-->
+          <v-select :multiple="col.Filter.selector.multiselect" v-model="col.Filter.valueString"
+            :options="col.Selector.values" class="min-w-[150px]" @option:selected="update(col)"
+            @option:deselected="update(col)" />
         </div>
+        <div v-if="col.Filter.type === 'selector' && col.Filter.selector.mode === 'horizontal'"
+          class="w-full text-center">
+          <!-- ГОРИЗОНТАЛЬНЫЕ -->
+          <div v-for="item in col.Selector.values" :key="item.id" class="px-2 py-1 mx-1 inline-block rounded-[30px]"
+            :style="'background-color:' + (item.color ?? 'rgb(148,163,184)')">
+            {{ item.title }}
+          </div>
+        </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>
@@ -31,22 +49,24 @@
 </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 { onMounted, reactive, ref, defineProps } from '@vue/runtime-core'; import { computed, 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 { Column, IColumn } from './Columns';
 //import { TableFilter } from './TableOpts.js';
 import FlameTable from './FlameTable';
 import Datepicker from '@vuepic/vue-datepicker';
+import vSelect from 'vue-select'
+import ITableSelectorItem from './TableSelectorItem';
 
 // Глобальное хранилище и роуты
 const store = storeFile(), router = useRouter(), route = useRoute();
 
 // Локальное состояние компонента
 const state = reactive({
-  data: {}
+  data: {},
 })
 
 // Входящие данные компонента
@@ -61,12 +81,20 @@ onMounted(async () => {
 })
 
 
-const update = () => {
+const update = (col?: Column) => {
+
+  // селектор преобразуем к v-model
+  if (col && col.Filter?.selector?.multiselect) {
+    col.Filter.valueRange = (col.Filter.valueString as any).map((r: ITableSelectorItem) => r.id);
+  }
 
   props.table.update();
 
 }
 
+
+
+
 </script>
 
 <style scoped lang="scss"></style>

package/src/Table/TableSelectorItem.ts

@@ -0,0 +1,9 @@
+export default interface ITableSelectorItem {
+
+   id: string | number,
+   title?: string,
+   label?: string,
+   color?: string,
+   position?: number
+
+}

package/src/main.ts

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