aloha-vue 1.0.63 → 1.0.64

package/docs/src/views/PageTable/PageTable.js

@@ -35,6 +35,12 @@ export default {
           path: "hola",
           sortId: "hola",
         },
+        {
+          label: "Default",
+          id: "default",
+          path: "default",
+          defaultValue: "-",
+        },
         {
           label: "Hola2",
           id: "hola2",
@@ -175,6 +181,56 @@ export default {
         },
       ],
       modelQuickSearch: "",
+      modelFilters: {},
+      filters: [
+        {
+          type: "text",
+          id: "suche",
+          label: "Suche",
+          main: true,
+        },
+        {
+          type: "text",
+          id: "au_kbezbeobachter",
+          label: "Beobachter",
+        },
+        {
+          type: "switch",
+          id: "au_termin_sichtbar",
+          label: "Sichtbar",
+          alwaysVisible: true,
+        },
+        {
+          type: "oneCheckbox",
+          id: "au_ende",
+          label: "Bearbeitungsende",
+          alwaysVisible: true,
+        },
+        {
+          type: "multiselect",
+          id: "terminberechnung",
+          label: "Termin",
+          data: [
+            {
+              id: "1",
+              bek: "Aloha 1",
+            },
+            {
+              id: "2",
+              bek: "Aloha 2",
+            },
+            {
+              id: "3",
+              bek: "Aloha 3",
+            },
+          ],
+          // url: "katalog/?fields=id&fields=bez&key=syterminberechnung",
+          keyLabel: "bez",
+          keyId: "id",
+          search: true,
+          alwaysVisible: true,
+        },
+      ],
     };
   },
   created() {

package/docs/src/views/PageTable/PageTable.pug

@@ -13,7 +13,9 @@ div
     :is-action-column-visible="true"
     :is-columns-dnd="true"
     :is-pagination="true"
+    :filters="filters"
     v-model:modelQuickSearch="modelQuickSearch"
+    v-model:modelFilters="modelFilters"
     @change-columns-ordering="changeColumnsOrdering"
   )
     template(
@@ -37,3 +39,5 @@ div
       button.a_btn.a_btn_primary Click me
 
   span modelQuickSearch: {{ modelQuickSearch }}
+  div modelFilters:
+  pre {{ modelFilters }}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "aloha-vue",
   "description": "Project aloha",
-  "version": "1.0.63",
+  "version": "1.0.64",
   "author": "Ilia Brykin",
   "scripts": {
     "build-icons": "node scriptsNode/iconsSvgToJs.js bootstrap3 && node scriptsNode/iconsSvgToJs.js bootstrap-1-9-1"

package/src/ATable/ATable.js

@@ -18,6 +18,7 @@ import MultipleActionAPI from "./compositionAPI/MultipleActionAPI";
 import PreviewAPI from "./compositionAPI/PreviewAPI";
 import RowsAPI from "./compositionAPI/RowsAPI";
 import ScrollControlAPI from "./compositionAPI/ScrollControlAPI";
+import TableFiltersAPI from "./compositionAPI/TableFiltersAPI";
 
 import {
   getModelColumnsOrderingDefault,
@@ -33,84 +34,82 @@ import {
   keyBy,
   uniqueId,
 } from "lodash-es";
+import ATableFiltersTop from "./ATableFiltersTop/ATableFiltersTop";
 
 
 export default {
   name: "ATable",
   props: {
-    id: {
-      type: String,
+    columnActionsWidth: {
+      type: Number,
       required: false,
-      default: () => uniqueId("a_table"),
+      default: 170,
     },
     columns: {
       type: Array,
       required: true,
     },
-    columnWidthDefault: {
-      type: Number,
+    columnsDefaultValue: {
+      type: [String, Number],
       required: false,
-      default: 250,
+      default: "",
     },
-    columnActionsWidth: {
+    columnWidthDefault: {
       type: Number,
       required: false,
-      default: 170,
+      default: 250,
     },
     countAllRows: {
       type: Number,
       required: false,
       default: undefined,
     },
-    label: {
-      type: [String, Number],
+    data: {
+      type: [Array, Object, Promise],
       required: false,
-      default: "",
     },
-    labelTag: {
-      type: String,
+    filters: {
+      type: Array,
       required: false,
-      default: "h2",
+      default: () => [],
     },
-    labelClass: {
-      type: [String, Object],
+    id: {
+      type: String,
       required: false,
-      default: undefined,
+      default: () => uniqueId("a_table"),
     },
-    limitsPerPage: {
-      type: Array,
+    isActionColumnVisible: {
+      type: Boolean,
       required: false,
-      default: () => ["10", "25", "50", "100"],
+      default: true,
     },
-    limitStart: {
-      type: Number,
+    isColumnsDnd: {
+      type: Boolean,
       required: false,
-      default: 10,
+      default: true,
     },
-    offsetStart: {
-      type: Number,
+    isLoadingOptions: {
+      type: Boolean,
       required: false,
-      default: 0,
     },
-    sortingStart: {
-      type: String,
+    isLoadingTable: {
+      type: Boolean,
       required: false,
-      default: undefined,
     },
-    modelIsTableWithoutScrollStart: {
+    isPagination: {
       type: Boolean,
       required: false,
       default: true,
     },
-    data: {
-      type: [Array, Object, Promise],
+    isPaginationOutside: {
+      type: Boolean,
       required: false,
     },
-    isLoadingTable: {
+    isQuickSearch: {
       type: Boolean,
       required: false,
     },
-    isLoadingOptions: {
+    isSortingOutside: {
       type: Boolean,
       required: false,
     },
@@ -119,43 +118,65 @@ export default {
       required: false,
       default: "count",
     },
-    modelColumnsOrdering: {
-      type: Array,
+    label: {
+      type: [String, Number],
       required: false,
-      default: () => [],
+      default: "",
     },
-    modelColumnsVisible: {
-      type: Array,
+    labelClass: {
+      type: [String, Object],
       required: false,
-      default: () => [],
+      default: undefined,
     },
-    tableActions: {
+    labelTag: {
+      type: String,
+      required: false,
+      default: "h2",
+    },
+    limitsPerPage: {
       type: Array,
       required: false,
-      default: () => [],
+      default: () => ["10", "25", "50", "100"],
     },
-    rowActions: {
+    limitStart: {
+      type: Number,
+      required: false,
+      default: 10,
+    },
+    modelColumnsOrdering: {
       type: Array,
       required: false,
       default: () => [],
     },
-    multipleActions: {
+    modelColumnsVisible: {
       type: Array,
       required: false,
       default: () => [],
     },
-    isPagination: {
+    modelFilters: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+    modelIsTableWithoutScrollStart: {
       type: Boolean,
       required: false,
       default: true,
     },
-    isPaginationOutside: {
-      type: Boolean,
+    modelQuickSearch: {
+      type: String,
       required: false,
+      default: "",
     },
-    isSortingOutside: {
-      type: Boolean,
+    multipleActions: {
+      type: Array,
       required: false,
+      default: () => [],
+    },
+    offsetStart: {
+      type: Number,
+      required: false,
+      default: 0,
     },
     preview: {
       type: String,
@@ -163,46 +184,48 @@ export default {
       default: undefined,
       validator: value => ["right", "down"].indexOf(value) !== -1,
     },
-    previewHeaderTag: {
-      type: String,
-      required: false,
-      default: "h2",
-    },
     previewBoxWidth: {
       type: Number,
       required: false,
       default: 300,
     },
-    isQuickSearch: {
-      type: Boolean,
+    previewHeaderTag: {
+      type: String,
       required: false,
+      default: "h2",
     },
-    modelQuickSearch: {
+    rowActions: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    sortingStart: {
       type: String,
       required: false,
-      default: "",
+      default: undefined,
     },
-    isActionColumnVisible: {
-      type: Boolean,
+    tableActions: {
+      type: Array,
       required: false,
-      default: true,
+      default: () => [],
     },
-    isColumnsDnd: {
-      type: Boolean,
+    valuesForColumnDefault: {
+      type: Array,
       required: false,
-      default: true,
+      default: () => [null, undefined, ""],
     },
   },
   emits: [
-    "update:modelColumnsOrder",
-    "update:modelColumnsVisible",
-    "update:modelQuickSearch",
     "changeColumnsOrdering",
     "changeColumnsVisible",
     "changeLimit",
     "changeOffset",
     "changeSorting",
     "mouseupResizePreviewRight",
+    "update:modelColumnsOrder",
+    "update:modelColumnsVisible",
+    "update:modelFilters",
+    "update:modelQuickSearch",
     "updateModelIsTableWithoutScroll",
   ],
   provide() {
@@ -211,6 +234,7 @@ export default {
       changeModelColumnsVisible: this.changeModelColumnsVisible,
       changeModelSort: this.changeModelSort,
       columns: computed(() => this.columns),
+      columnsDefaultValue: computed(() => this.columnsDefaultValue),
       columnActionsWidthLocal: computed(() => this.columnActionsWidth),
       columnWidthDefault: computed(() => this.columnWidthDefault),
       isActionColumnVisible: computed(() => this.isActionColumnVisible),
@@ -219,6 +243,7 @@ export default {
       isLoadingTable: computed(() => this.isLoadingTable),
       rowActions: computed(() => this.rowActions),
       tableId: computed(() => this.id),
+      valuesForColumnDefault: computed(() => this.valuesForColumnDefault),
     };
   },
   setup(props, context) {
@@ -246,6 +271,7 @@ export default {
       return MODEL_COLUMNS;
     });
 
+
     const {
       hasRows,
       limit,
@@ -300,6 +326,13 @@ export default {
     } = PreviewAPI(props, context, {
       aTableRef,
     });
+    
+    const {
+      filtersKeyById,
+      modelFiltersLocal,
+      onUpdateModelFilters,
+      startSearch,
+    } = TableFiltersAPI(props, context);
 
     provide("changeModelIsTableWithoutScroll", changeModelIsTableWithoutScroll);
     provide("columnsOrdered", columnsOrdered);
@@ -315,6 +348,7 @@ export default {
 
     provide("modelColumnsVisibleLocal", modelColumnsVisibleLocal);
     provide("modelColumnsVisibleMapping", modelColumnsVisibleMapping);
+    provide("onUpdateModelFilters", onUpdateModelFilters);
 
 
     return {
@@ -351,6 +385,10 @@ export default {
       setEmptySelectedRowsIndexes,
       setSelectedRowsIndexes,
       toggleMultipleActionsActive,
+
+      filtersKeyById,
+      modelFiltersLocal,
+      startSearch,
     };
   },
   data() {
@@ -475,95 +513,103 @@ export default {
     },
   },
   render() {
-    return h("div", {
-      ref: "aTableRef",
-      class: ["a_table__parent", {
-        a_table__parent_scrollable: !this.modelIsTableWithoutScroll,
-      }],
-    }, [
-      h(ATableTopPanel, {
-        areSomeRowsSelected: this.areSomeRowsSelected,
-        closeMultipleActionsActive: this.closeMultipleActionsActive,
-        countAllRows: this.countAllRowsLocal,
-        label: this.label,
-        labelTag: this.labelTag,
-        labelClass: this.labelClass,
-        tableActions: this.tableActions,
-        multipleActions: this.multipleActions,
-        isQuickSearch: this.isQuickSearch,
-        modelQuickSearch: this.modelQuickSearch,
-        selectedRows: this.selectedRows,
-        onUpdateModelQuickSearch: this.updateModelQuickSearch,
-        onToggleMultipleActionsActive: this.toggleMultipleActionsActive,
+    return h("div", {}, [
+      h(ATableFiltersTop, {
+        filters: this.filters,
+        filtersKeyById: this.filtersKeyById,
+        modelFilters: this.modelFiltersLocal,
+        onStartSearch: this.startSearch,
       }, this.$slots),
       h("div", {
-        class: "a_table",
-        role: "table",
+        ref: "aTableRef",
+        class: ["a_table__parent", {
+          a_table__parent_scrollable: !this.modelIsTableWithoutScroll,
+        }],
       }, [
-        h(ATableHeader, {
-          areAllRowsSelected: this.areAllRowsSelected,
+        h(ATableTopPanel, {
           areSomeRowsSelected: this.areSomeRowsSelected,
-          modelSort: this.modelSort,
-          onSetSelectedRowsIndexes: this.setSelectedRowsIndexes,
-        }),
+          closeMultipleActionsActive: this.closeMultipleActionsActive,
+          countAllRows: this.countAllRowsLocal,
+          label: this.label,
+          labelTag: this.labelTag,
+          labelClass: this.labelClass,
+          tableActions: this.tableActions,
+          multipleActions: this.multipleActions,
+          isQuickSearch: this.isQuickSearch,
+          modelQuickSearch: this.modelQuickSearch,
+          selectedRows: this.selectedRows,
+          onUpdateModelQuickSearch: this.updateModelQuickSearch,
+          onToggleMultipleActionsActive: this.toggleMultipleActionsActive,
+        }, this.$slots),
         h("div", {
-          class: "a_table__body",
-          role: "rowgroup",
-        }, this.rowsLocal.map((row, rowIndex) => {
-          return h(ATableTr, {
-            row,
-            rowIndex,
-            selectedRowsIndexes: this.selectedRowsIndexes,
+          class: "a_table",
+          role: "table",
+        }, [
+          h(ATableHeader, {
+            areAllRowsSelected: this.areAllRowsSelected,
+            areSomeRowsSelected: this.areSomeRowsSelected,
+            modelSort: this.modelSort,
             onSetSelectedRowsIndexes: this.setSelectedRowsIndexes,
-          }, {
-            get: vm => [
-              h(AGet, {
-                data: vm.row,
-                path: vm.column.path,
-                filter: vm.column.filter,
-                filterParameters: vm.column.filterParameters,
-                defaultValue: vm.column.defaultValue,
-              }),
-            ],
-            ...this.$slots,
-          });
-        })),
+          }),
+          h("div", {
+            class: "a_table__body",
+            role: "rowgroup",
+          }, this.rowsLocal.map((row, rowIndex) => {
+            return h(ATableTr, {
+              row,
+              rowIndex,
+              selectedRowsIndexes: this.selectedRowsIndexes,
+              onSetSelectedRowsIndexes: this.setSelectedRowsIndexes,
+            }, {
+              get: vm => [
+                h(AGet, {
+                  data: vm.row,
+                  path: vm.column.path,
+                  filter: vm.column.filter,
+                  filterParameters: vm.column.filterParameters,
+                  defaultValue: vm.column.defaultValue,
+                }),
+              ],
+              ...this.$slots,
+            });
+          })),
+        ]),
+        !this.hasRows && h("div", {
+          class: "a_table__empty_text",
+        }, "Keine Einträge vorhanden."),
+        this.isPagination && h("div", {
+          class: "a_pagination__parent"
+        }, [
+          h(ATableCountProPage, {
+            countAllRows: this.countAllRowsLocal,
+            limitsPerPage: this.limitsPerPage,
+            isLoadingTable: this.isLoadingTable,
+            limit: this.limit,
+            offset: this.offset,
+            rowsLength: this.rowsLocal.length,
+            hasRows: this.hasRows,
+            "onUpdate:limit": this.changeLimit,
+          }),
+          h(ATablePagination, {
+            limit: this.limit,
+            totalRowsCount: this.totalRowsCountLocal,
+            isLoadingTable: this.isLoadingTable,
+            offset: this.offset,
+            hasRows: this.hasRows,
+            "onUpdate:offset": this.changeOffset,
+          }),
+        ]),
+        this.isPreviewRightOpen && h(ATablePreviewRight, {
+          rowIndex: this.previewRightRowIndex,
+          rows: this.rowsLocal,
+          previewHeaderTag: this.previewHeaderTag,
+          onClosePreview: this.closePreview,
+          onMousedownResizePreviewRight: this.mousedownResizePreviewRight,
+          onMousemoveResizePreviewRight: this.mousemoveResizePreviewRight,
+          onMouseupResizePreviewRight: this.mouseupResizePreviewRight,
+          onTogglePreviewResize: this.togglePreviewResize,
+        }, this.$slots),
       ]),
-      !this.hasRows && h("div", {
-        class: "a_table__empty_text",
-      }, "Keine Einträge vorhanden."),
-      this.isPagination && h("div", {
-        class: "a_pagination__parent"
-      }, [
-        h(ATableCountProPage, {
-          countAllRows: this.countAllRowsLocal,
-          limitsPerPage: this.limitsPerPage,
-          isLoadingTable: this.isLoadingTable,
-          limit: this.limit,
-          offset: this.offset,
-          rowsLength: this.rowsLocal.length,
-          hasRows: this.hasRows,
-          "onUpdate:limit": this.changeLimit,
-        }),
-        h(ATablePagination, {
-          limit: this.limit,
-          totalRowsCount: this.totalRowsCountLocal,
-          isLoadingTable: this.isLoadingTable,
-          offset: this.offset,
-          hasRows: this.hasRows,
-          "onUpdate:offset": this.changeOffset,
-        }),
-      ]),
-      this.isPreviewRightOpen && h(ATablePreviewRight, {
-        rowIndex: this.previewRightRowIndex,
-        rows: this.rowsLocal,
-        previewHeaderTag: this.previewHeaderTag,
-        onClosePreview: this.closePreview,
-        onMousedownResizePreviewRight: this.mousedownResizePreviewRight,
-        onMousemoveResizePreviewRight: this.mousemoveResizePreviewRight,
-        onMouseupResizePreviewRight: this.mouseupResizePreviewRight,
-        onTogglePreviewResize: this.togglePreviewResize,
-      }, this.$slots),
     ]);
   },
 };