flameresttable 1.0.5 → 1.0.7

package/.eslintrc

@@ -15,7 +15,8 @@
     "vue/multi-word-component-names": "off",
     "vue/no-multiple-template-root": "off",
     "vue/no-duplicate-attributes": "off",
-    "linebreak-style": "off"
+    "linebreak-style": "off",
+    "vue/multiline-html-element-content-newline": "off"
   },
   "plugins": [
     "@typescript-eslint"

package/.vscode/settings.json

@@ -7,5 +7,8 @@
     "plaintext": "html"
   },
   "tailwindCSS.emmetCompletions": true,
-  "css.lint.unknownAtRules": "ignore"
+  "css.lint.unknownAtRules": "ignore",
+  "editor.codeActionsOnSave": {
+    "source.fixAll": true
+  },
 }

package/README.md

@@ -1,39 +1,13 @@
-# Vue 3 + Vite + Pinia + Router + Tailwind + Pug + Typescript template
+# Smart REST Table on Vue 3 + Vite + Pinia
 
-Hello, world!
+    // Обработчик после загрузки
+    opts.Popup.load = async (row: any) => {
 
-That starter for rapid prototyping a services. Start with
+    }
 
-    git clone https://github.com/FlameArt/vuestarter.git ./projectName
-
-## Under the hood
-
-* Vite
-* Vue 3 [via composition api]
-* Typescript
-* Pinia as state manager
-* Vue Router 4
-* Tailwind as css framework
-* Pug as html framework
-* ESLint
-* Capacitor as converter to Android and iOS apps
-* VSCode ready with Volar
-* [FlameREST](https://github.com/FlameArt/auto-rest-template-yii2) attached
-* Precreated Signup, Auth and Password Reset pages
-
-# VSCode improvements
-
-Pug-lexer in Volar doesn`t support all tailwind functions currently. So you need to apply fix https://github.com/pugjs/pug/pull/3373
-
-OR just fix the `Volar` extension directly in `%USERNAME%/.vscode/extensions/vue.volar-VERSION/dist/node/server.js` that
-
-    (/^\.([_a-z0-9\-]*[_a-z][_a-z0-9\-]*)/i, 'class');
-
-to that
-
-    (/^\.([_a-z0-9\-]*[_a-z]([_a-z0-9\-\[\]]|:(?! ))*)/i, 'class');
-
-Compilation works fine without any fixes
+    // Обработчик перед сохранением
+    opts.Popup.beforeEdit = async (row: any, table: typeof FlameTable.prototype): Promise<boolean> => {
+    }
 
 # Licenses
 MIT

package/package.json

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

package/src/Table/Columns.ts

@@ -108,7 +108,7 @@ export class Column implements IColumn {
     // string - обычная строка или селектор строк
     // text - text area
     // button - кнопка
-    popupType: 'string' as "string" | "text" | "button" | "date" | "selector",
+    popupType: 'string' as "string" | "text" | "button" | "date" | "selector" | "image" | "file",
 
     // Текст ошибки добавления/обновления
     errorMessage: '',
@@ -227,7 +227,7 @@ export interface IColumn {
   Popup?: {
 
     // Тут привязка к реальным данным
-    model?: string,
+    model?: any,
 
     // Заголовок поля в попапе
     title?: string,
@@ -259,7 +259,7 @@ export interface IColumn {
     // string - обычная строка или селектор строк
     // text - text area
     // button - кнопка
-    popupType?: "string" | "text" | "button" | "date" | "selector",
+    popupType?: "string" | "text" | "button" | "date" | "selector" | "image" | "file",
 
     // Текст ошибки добавления/обновления
     errorMessage?: string,

package/src/Table/FlameTable.ts

@@ -48,11 +48,6 @@ export default class FlameTable<T> {
     total: 0,
   })
 
-  /**
-   * Параметры прогрузки
-   */
-  public LoadParams = {} as any;
-
   /**
    * Открытая в попапе строка
    */
@@ -124,9 +119,9 @@ export default class FlameTable<T> {
    */
   public async update(SaveLoadParams: any = null) {
 
-    if (SaveLoadParams !== null) this.LoadParams = SaveLoadParams;
+    if (SaveLoadParams !== null) this.opts.LoadParams = SaveLoadParams;
 
-    const rows: Rows<T> = await (this.model as any).constructor.all(Object.assign(this.LoadParams, { page: this.Pager.page, perPage: this.Pager.perPage }));
+    const rows: Rows<T> = await (this.model as any).constructor.all(Object.assign(this.opts.LoadParams, { page: this.Pager.page, perPage: this.Pager.perPage }));
 
     this.load(rows);
 

package/src/Table/Table.vue

@@ -1,66 +1,185 @@
-<template lang="pug">
-.mt-0
-
-  // "ДОБАВИТЬ" И ЧИСЛО ЗАПИСЕЙ
-  .flex.items-center.justify-between
-    slot(name="defaultButtons")
-      .flex.cursor-pointer.justify-center.items-center.text-white.block.bg-blue-600.font-medium.rounded.text-sm.px-4.text-center(v-show="$props.opts?.Add.can" @click="add()" class="hover:bg-blue-700 .focus:ring-4.focus:ring-blue-200.dark:focus:ring-blue-900")
-        div.text-xl +
-        div.ml-2 {{ $props.opts?.Add.buttonTitle }}
-    slot(name="otherButtons")
-    .text-xs.text-gray-400 Показано: {{ Table.Pager.total > Table.Pager.perPage * Table.Pager.page ? Table.Pager.perPage * Table.Pager.page : Table.Pager.total }} / {{ Table.Pager.total }} записей
-
-  // ТАБЛИЦА
-  .mt-2.table.w-full
-
-    // ЗАГОЛОВКИ СТОЛБЦОВ
-    .table-header-group
-      .table-cell.border-r.border-r-slate-100.px-2(v-for="column in Table.columns"  v-show="column.Table.isShow")
-        span {{ column.title !== '' ? column.title : column.name }}
-      .table-cell.border-r.border-r-slate-100.px-2(v-if="opts.Edit.can")
-        button.bg-green-600.invisible Изменить
-      .table-cell.border-r.border-r-slate-100.px-2(v-if="opts.Remove.can")
-        button.bg-green-600.invisible Удалить
-
-    // СТРОКИ
-    .table-row-group
-      .table-row.cursor-pointer(v-for="row in (Table.Rows.rows)" class="hover:bg-slate-100")
-        .table-cell.border-r.border-r-slate-100.px-2(v-for="column in Table.columns" v-show="column.Table.isShow" @click="column.Table.click(row, column)" class="last:border-r-0 last:pr-0")
-          span {{ column.Table.value(row, column) }}
-        .table-cell.border-r.border-r-slate-100.px-2.text-center(v-if="opts.Edit.can")
-          button.px-2.py-1.bg-green-600.text-white.my-1(@click="edit(row)") Изменить
-        .table-cell.border-r.border-r-slate-100.px-2.text-center(v-if="opts.Remove.can")
-          button.px-2.py-1.bg-gray-600.opacity-30.text-white.my-1(@click="deleteRow(row)") Удалить
-
-Paginator.mt-3(:table="Table")
-
-// МОДАЛКА ДОБАВЛЕНИЯ
-ModalVue(ref="FlameTableModal")
-  template(v-slot)
-    .bg-white.rounded-xl(:class="'w-full desktop:w-[777px]'")
-
-      slot(name="header")
-
-      // КОЛОНКИ ТАБЛИЦЫ
-      label.flex.items-stretch.justify-center.w-full.my-1.ml-2(v-for="column in ColumnNames", v-show="Table.columns[column].Popup.isShow")
-        .w-44.text-left.px-2.py-1.bg-slate-100
-          div {{ Table.columns[column].Popup.title !== '' ? Table.columns[column].Popup.title === '' : Table.columns[column].title !== '' ? Table.columns[column].title : Table.columns[column].name }}
-          .text-xs.text-slate-400 {{ Table.columns[column].Popup.desc }}
-        .flex-1.mr-5.w-full.flex.flex-col.self-stretch(v-if="Table.columns[column].Popup.popupType === 'string' || Table.columns[column].Popup.popupType === 'text'")
-          input.h-full.self-stretch.py-1.px-2.w-full.outline-none.border.border-slate-100(v-model="Table.columns[column].Popup.model", type="text", :disabled="!Table.columns[column].Popup.isEnabled", :placeholder="Table.columns[column].Popup.placeholder !== '' ? Table.columns[column].Popup.placeholder : Table.columns[column].title !== '' ? Table.columns[column].title : Table.columns[column].name")
-        .flex-1.mr-5.w-full.flex.flex-col.self-stretch(v-if="Table.columns[column].Popup.popupType === 'date'")
-          Datepicker(v-model="Table.columns[column].Popup.model" autoApply )
-        .flex-1.mr-5.w-full.flex.flex-col.self-stretch(v-if="Table.columns[column].Popup.popupType === 'selector'")
-          select.h-full.self-stretch.py-1.px-2.w-full.outline-none.border.border-slate-100(v-model="Table.columns[column].Popup.model")
-            option(v-for="(selectorVal, selectorKey) in Table.columns[column].Popup.Selector.values" :value="getSelector(Table.columns[column].Popup.Selector.values, selectorKey, selectorVal)[1]") {{ getSelector(Table.columns[column].Popup.Selector.values, selectorKey, selectorVal)[0] }}
-
-      // КНОПКИ СОХРАНЕНИЯ
-      .flex.w-full.mt-3.mb-2.justify-between.items-center
-        .cursor-pointer.ml-2.text-lg.py-2.text-white.block.bg-gray-400.font-medium.rounded.text-sm.px-4.text-center(v-show="$props.opts?.Add.can" @click="Table.OpenedRow = null; FlameTableModal?.close()" class="hover:bg-blue-700 focus:ring-4 focus:ring-blue-200 dark:focus:ring-blue-900") Отмена
-        .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(@click="SaveTable()" class="hover:bg-blue-700 focus:ring-4 focus:ring-blue-200 dark:focus:ring-blue-900") {{ Table.mode === 'add' ? 'Добавить' : 'Сохранить' }}
-
-
-  
+<template>
+  <div class="mt-0">
+
+    <!-- "ДОБАВИТЬ" И ЧИСЛО ЗАПИСЕЙ-->
+    <div class="flex items-center justify-between">
+      <slot name="defaultButtons">
+        <div v-show="$props.opts?.Add.can"
+          class="flex cursor-pointer justify-center items-center 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="add()">
+          <div class="text-xl">
+            +
+          </div>
+          <div class="ml-2">
+            {{ $props.opts?.Add.buttonTitle }}
+          </div>
+        </div>
+      </slot>
+      <slot name="otherButtons" />
+
+      <!-- ЧИСЛО ЗАПИСЕЙ -->
+      <div class="text-xs text-gray-400">
+        Показано: {{ Table.Pager.total > Table.Pager.perPage * Table.Pager.page ?
+          Table.Pager.perPage * Table.Pager.page : Table.Pager.total }} / {{ Table.Pager.total }} записей
+      </div>
+
+    </div>
+
+    <!-- ТАБЛИЦА-->
+    <div class="mt-2 table w-full">
+
+      <!-- ЗАГОЛОВКИ СТОЛБЦОВ-->
+      <div class="table-header-group">
+        <div v-for="column in Table.columns" v-show="column.Table.isShow" :key="'cheader_' + column"
+          class="table-cell border-r border-r-slate-100 px-2">
+          <span>{{ column.title !== '' ? column.title :
+            column.name }}</span>
+        </div>
+        <div v-if="opts.Edit.can" class="table-cell border-r border-r-slate-100 px-2">
+          <button class="bg-green-600 invisible">
+            Изменить
+          </button>
+        </div>
+        <div v-if="opts.Remove.can" class="table-cell border-r border-r-slate-100 px-2">
+          <button class="bg-green-600 invisible">
+            Удалить
+          </button>
+        </div>
+      </div>
+
+      <!-- СТРОКИ-->
+      <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>
+          </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>
+
+    </div>
+  </div>
+
+  <!-- ПОСТРАНИЧНАЯ РАЗБИВКА -->
+  <Paginator class="mt-3" :table="Table" />
+
+  <!-- МОДАЛКА ДОБАВЛЕНИЯ-->
+  <ModalVue ref="FlameTableModal">
+    <template #default>
+      <div class="bg-white rounded-xl" :class="'w-full desktop:w-[777px]'">
+
+        <!-- СЛОТ ЗАГОЛОВКА ПОПАПА -->
+        <slot name="header" />
+
+        <!-- КОЛОНКИ ТАБЛИЦЫ-->
+        <label v-for="column in ColumnNames" v-show="Table.columns[column].Popup.isShow" :key="'c' + column"
+          class="flex items-stretch justify-center w-full my-1 ml-2">
+          <div class="text-left px-2 py-1 bg-slate-100" style="width: 110px">
+            <div>{{ Table.columns[column].Popup.title !== '' ? Table.columns[column].Popup.title === '' :
+              Table.columns[column].title !== '' ? Table.columns[column].title : Table.columns[column].name }}</div>
+            <div class="text-xs text-slate-400">{{ Table.columns[column].Popup.desc }}</div>
+          </div>
+
+          <div
+            v-if="Table.columns[column].Popup.popupType === 'string' || Table.columns[column].Popup.popupType === 'text'"
+            class="flex-1 mr-5 w-full flex flex-col self-stretch">
+            <input v-model="Table.columns[column].Popup.model"
+              class="h-full self-stretch py-1 px-2 w-full outline-none border border-slate-100" type="text"
+              :disabled="!Table.columns[column].Popup.isEnabled"
+              :placeholder="Table.columns[column].Popup.placeholder !== '' ? Table.columns[column].Popup.placeholder : Table.columns[column].title !== '' ? Table.columns[column].title : Table.columns[column].name">
+          </div>
+
+          <div v-if="Table.columns[column].Popup.popupType === 'date'"
+            class="flex-1 mr-5 w-full flex flex-col self-stretch">
+            <Datepicker v-model="Table.columns[column].Popup.model" :auto-apply="true" />
+          </div>
+
+          <div v-if="Table.columns[column].Popup.popupType === 'selector'"
+            class="flex-1 mr-5 w-full flex flex-col self-stretch"><select v-model="Table.columns[column].Popup.model"
+              class="h-full self-stretch py-1 px-2 w-full outline-none border border-slate-100">
+              <option v-for="(selectorVal, selectorKey) in Table.columns[column].Popup.Selector.values"
+                :key="'sel_' + selectorKey"
+                :value="getSelector(Table.columns[column].Popup.Selector.values, selectorKey, selectorVal)[1]">{{
+                  getSelector(Table.columns[column].Popup.Selector.values, selectorKey, selectorVal)[0] }}</option>
+            </select>
+          </div>
+
+          <!-- КАРТИНКА -->
+          <div v-if="Table.columns[column].Popup.popupType === 'image'"
+            class="flex-1 border border-slate-100 mr-5 w-full flex self-stretch">
+            <div class="flex-1">
+              <img class="max-w-[200px]" :src="fileGetData(Table.columns[column].Popup.model, true)">
+            </div>
+
+            <!-- Загрузчик-->
+            <label :for="'cfile_' + column">
+
+              <svg class="my-auto cursor-pointer" width="24" height="24" viewbox="0 0 24 24" fill="none"
+                xmlns="http://www.w3.org/2000/svg">
+                <path fill-rule="evenodd" clip-rule="evenodd"
+                  d="M11.4697 2.46967C11.7626 2.17678 12.2374 2.17678 12.5303 2.46967L17.0303 6.96967C17.3232 7.26256 17.3232 7.73744 17.0303 8.03033C16.7374 8.32322 16.2626 8.32322 15.9697 8.03033L12.75 4.81066L12.75 16.5C12.75 16.9142 12.4142 17.25 12 17.25C11.5858 17.25 11.25 16.9142 11.25 16.5L11.25 4.81066L8.03033 8.03033C7.73744 8.32322 7.26256 8.32322 6.96967 8.03033C6.67678 7.73744 6.67678 7.26256 6.96967 6.96967L11.4697 2.46967ZM3 15.75C3.41421 15.75 3.75 16.0858 3.75 16.5V18.75C3.75 19.5784 4.42157 20.25 5.25 20.25H18.75C19.5784 20.25 20.25 19.5784 20.25 18.75V16.5C20.25 16.0858 20.5858 15.75 21 15.75C21.4142 15.75 21.75 16.0858 21.75 16.5V18.75C21.75 20.4069 20.4069 21.75 18.75 21.75H5.25C3.59315 21.75 2.25 20.4069 2.25 18.75V16.5C2.25 16.0858 2.58579 15.75 3 15.75Z"
+                  fill="#0F172A" />
+              </svg>
+
+              <input class="hidden" :name="'cfile_' + column" type="file" @change="fileUpdated(column, $event)">
+
+            </label>
+          </div>
+
+          <!-- ФАЙЛЫ -->
+          <div v-if="Table.columns[column].Popup.popupType === 'file'"
+            class="flex-1 border border-slate-100 mr-5 w-full flex self-stretch">
+            <div class="flex-1">
+              {{ fileGetData(Table.columns[column].Popup.model, false).name }}
+            </div>
+
+            <!-- Загрузчик-->
+            <label :for="'cfile_' + column">
+
+              <svg class="my-auto cursor-pointer" width="24" height="24" viewbox="0 0 24 24" fill="none"
+                xmlns="http://www.w3.org/2000/svg">
+                <path fill-rule="evenodd" clip-rule="evenodd"
+                  d="M11.4697 2.46967C11.7626 2.17678 12.2374 2.17678 12.5303 2.46967L17.0303 6.96967C17.3232 7.26256 17.3232 7.73744 17.0303 8.03033C16.7374 8.32322 16.2626 8.32322 15.9697 8.03033L12.75 4.81066L12.75 16.5C12.75 16.9142 12.4142 17.25 12 17.25C11.5858 17.25 11.25 16.9142 11.25 16.5L11.25 4.81066L8.03033 8.03033C7.73744 8.32322 7.26256 8.32322 6.96967 8.03033C6.67678 7.73744 6.67678 7.26256 6.96967 6.96967L11.4697 2.46967ZM3 15.75C3.41421 15.75 3.75 16.0858 3.75 16.5V18.75C3.75 19.5784 4.42157 20.25 5.25 20.25H18.75C19.5784 20.25 20.25 19.5784 20.25 18.75V16.5C20.25 16.0858 20.5858 15.75 21 15.75C21.4142 15.75 21.75 16.0858 21.75 16.5V18.75C21.75 20.4069 20.4069 21.75 18.75 21.75H5.25C3.59315 21.75 2.25 20.4069 2.25 18.75V16.5C2.25 16.0858 2.58579 15.75 3 15.75Z"
+                  fill="#0F172A" />
+              </svg>
+
+              <input class="hidden" :name="'cfile_' + column" type="file" @change="fileUpdated(column, $event)">
+
+            </label>
+          </div>
+
+        </label>
+
+        <!-- КНОПКИ СОХРАНЕНИЯ-->
+        <div class="flex w-full mt-3 mb-2 justify-between items-center">
+          <div v-show="$props.opts?.Add.can"
+            class="cursor-pointer ml-2 text-lg py-2 text-white block bg-gray-400 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.OpenedRow = null; FlameTableModal?.close()">
+            Отмена
+          </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()">
+            {{ Table.mode === 'add' ? 'Добавить' : 'Сохранить' }}
+          </div>
+        </div>
+      </div>
+    </template>
+  </ModalVue>
 </template>
 
 <script lang="ts">
@@ -98,6 +217,7 @@ export default defineComponent({
       type: Function
     },
   },
+
   setup(props) {
 
     const Table = new FlameTable(props.model as any, props.opts);
@@ -162,6 +282,23 @@ export default defineComponent({
       }
     }
 
+    const fileUpdated = async (column: any, ev: any) => {
+      Table.columns[column].Popup.model = ev;
+      const prepared = (await REST.prepare({ myParam: ev })).myParam;
+      Table.columns[column].Popup.model = prepared
+    }
+
+    /*
+    const fileGetData = (model: any) => {
+      return computed(r => {
+        if (model instanceof Array && model.length > 0) {
+          if (typeof model[0].data === 'string') return model[0].data;
+          if (typeof model[0].file === 'string') return model[0].file;
+        }
+        return "";
+      })
+    }*/
+
     const getSelector = (arr: any, selectorKey: any, selectorVal: any) => {
       if (Array.isArray(arr)) return [selectorVal, selectorVal];
       // TODO: тут загрузка объекта должна быть
@@ -186,10 +323,31 @@ export default defineComponent({
       edit,
       SaveTable,
       deleteRow,
+      fileUpdated,
       getSelector
     }
 
   },
+  methods: {
+    fileGetData(thisArr: any, getSource: boolean = true) {
+
+
+
+      if (thisArr instanceof Array && thisArr.length > 0) {
+        // Получить строку с исходником
+        if (getSource) {
+          if (typeof thisArr[0].data === 'string') return thisArr[0].data;
+          if (typeof thisArr[0].file === 'string') return thisArr[0].file;
+          return "";
+        }
+        // Получить данные целиком
+        return thisArr[0]
+      }
+
+      return null
+
+    }
+  },
 
 })
 

package/src/Table/TableOpts.ts

@@ -15,6 +15,12 @@ export default class TableOpts {
    */
   public columnsOpts: { [key: string]: IColumn } = {};
 
+  /**
+   * Параметры прогрузки
+   */
+  public LoadParams = {} as any;
+
+
   public set(ColumnName: string, mergingOpts: IColumn) {
     // TODO: ЕСТЬ ОШИБКА???
     if (this.columnsOpts[ColumnName] === undefined) this.columnsOpts[ColumnName] = new Column as any