aloha-vue 1.0.293 → 1.0.295

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

@@ -15,6 +15,10 @@ export default {
   data() {
     return {
       modelView: undefined,
+      modelColumnsVisible: {
+        aloha: true,
+      },
+      modelColumnsOrdering: ["sdf", "ddsadsa", "aloha"],
       columns: [
         {
           label: "Aloha",
@@ -408,7 +412,8 @@ export default {
     this.setData();
   },
   methods: {
-    changeColumnsOrdering() {
+    changeColumnsOrdering({ modelColumnsOrdering }) {
+      this.modelColumnsOrdering = modelColumnsOrdering;
       this.isLoadingOptions = true;
       setTimeout(() => {
         this.isLoadingOptions = false;
@@ -466,5 +471,9 @@ export default {
       this.modelView = _modelView;
       console.log("view", view);
     },
+
+    changeModelColumnsVisible(model) {
+      this.modelColumnsVisible = model;
+    },
   },
 };

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

@@ -22,11 +22,14 @@ div
     :model-view="modelView"
     v-model:modelQuickSearch="modelQuickSearch"
     :modelFilters="modelFilters"
+    :model-columns-ordering="modelColumnsOrdering"
+    :model-columns-visible="modelColumnsVisible"
     @change-columns-ordering="changeColumnsOrdering"
     :update-model-filters-local="updateModelFiltersLocal"
     @toggle-preview="togglePreview"
     @update-model-filters="updateModelFilters"
     @update-view="updateView"
+    @update:model-columns-visible="changeModelColumnsVisible"
   )
     template(
       v-slot:map="{ rows }"

package/package.json

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

package/src/ATable/ATable.js

@@ -17,6 +17,8 @@ import ATableTopPanel from "./ATableTopPanel/ATableTopPanel";
 import ATableTr from "./ATableTr/ATableTr";
 
 import AMobileAPI from "../compositionAPI/AMobileAPI";
+import ColumnsIdsAPI from "./compositionAPI/ColumnsIdsAPI";
+import ColumnsOrderingAPI from "./compositionAPI/ColumnsOrderingAPI";
 import LimitOffsetAPI from "./compositionAPI/LimitOffsetAPI";
 import MobileColumnsAPI from "./compositionAPI/MobileColumnsAPI";
 import MultipleActionAPI from "./compositionAPI/MultipleActionAPI";
@@ -34,10 +36,6 @@ import TableFiltersAPI from "./compositionAPI/TableFiltersAPI";
 import ViewsAPI from "./compositionAPI/ViewsAPI";
 
 import {
-  getModelColumnsOrderingDefault,
-} from "./utils/utils";
-import {
-  cloneDeep,
   get,
   isArray,
   isNil,
@@ -324,7 +322,6 @@ export default {
   ],
   provide() {
     return {
-      changeColumnsOrdering: this.changeColumnsOrdering,
       changeModelColumnsVisible: this.changeModelColumnsVisible,
       columns: computed(() => this.columns),
       columnsDefaultValue: computed(() => this.columnsDefaultValue),
@@ -343,10 +340,17 @@ export default {
     const tableGrandparentRef = ref(undefined);
     const isMultipleActionsActive = ref(undefined);
 
+    const {
+      columnsKeyById,
+      columnIdsGroupByLocked,
+    } = ColumnsIdsAPI(props);
+
     const {
       columnsOrdered,
-      modelColumnsOrderingLocal,
-    } = TableColumnsAPI(props);
+    } = TableColumnsAPI(props, {
+      columnsKeyById,
+      columnIdsGroupByLocked,
+    });
 
     const {
       modelColumnsVisibleLocal,
@@ -387,6 +391,14 @@ export default {
       modelColumnsVisibleLocal,
     });
 
+    const {
+      changeColumnsOrdering,
+      checkColumnsOrdering,
+    } = ColumnsOrderingAPI(props, context, {
+      checkVisibleColumns,
+      columnIdsGroupByLocked,
+    });
+
     const {
       isRowActionsStickyLocal,
     } = StickyAPI(props, {
@@ -520,9 +532,12 @@ export default {
     provide("modelColumnsVisibleLocal", modelColumnsVisibleLocal);
     provide("onUpdateModelFilters", onUpdateModelFilters);
     provide("updateDataKeyByIdFromFilter", updateDataKeyByIdFromFilter);
+    provide("changeColumnsOrdering", changeColumnsOrdering);
 
     initViewCurrent();
     initModelSort();
+    checkColumnsOrdering();
+    initModelColumnsVisibleLocal();
 
     return {
       allVisibleMobileColumns,
@@ -554,7 +569,6 @@ export default {
       isRowActionsStickyLocal,
       isViewTableVisible,
       limit,
-      modelColumnsOrderingLocal,
       modelColumnsVisibleLocal,
       modelFiltersLocal,
       modelIsTableWithoutScroll,
@@ -622,42 +636,7 @@ export default {
       return this.rowsFooter.length > 0;
     },
   },
-  created() {
-    this.initModelColumnsOrderingLocal();
-    this.initModelColumnsVisibleLocal();
-  },
   methods: {
-    initModelColumnsOrderingLocal() {
-      if (this.modelColumnsOrdering.length) {
-        this.modelColumnsOrderingLocal = cloneDeep(this.modelColumnsOrdering);
-      } else {
-        this.changeColumnsOrdering({
-          modelColumnsOrderingLocal: getModelColumnsOrderingDefault(this.columns),
-          isFirst: true,
-        });
-      }
-    },
-
-    changeColumnsOrdering({ modelColumnsOrderingLocal, columnIndexDraggable, columnIndexOver, isFirst }) {
-      if (columnIndexDraggable === columnIndexOver && !modelColumnsOrderingLocal) {
-        return;
-      }
-      if (modelColumnsOrderingLocal) {
-        this.modelColumnsOrderingLocal = modelColumnsOrderingLocal;
-      } else {
-        const ID_DRAGGABLE = this.modelColumnsOrderingLocal[columnIndexDraggable];
-        this.modelColumnsOrderingLocal.splice(columnIndexDraggable, 1);
-        this.modelColumnsOrderingLocal.splice(columnIndexOver, 0, ID_DRAGGABLE);
-      }
-      this.$emit("changeColumnsOrdering", {
-        columnIndexDraggable,
-        columnIndexOver,
-        modelColumnsOrdering: cloneDeep(this.modelColumnsOrderingLocal),
-        isFirst,
-      });
-      this.checkVisibleColumns();
-    },
-
     updateModelQuickSearch(model) {
       this.$emit("update:modelQuickSearch", model);
     },

package/src/ATable/ATableHeaderThAction/ATableHeaderThAction.js

@@ -12,7 +12,6 @@ import ColumnSearchAPI from "../compositionAPI/ColumnSearchAPI";
 import DragAndDropParentAPI from "../compositionAPI/DragAndDropParentAPI";
 
 import {
-  getModelColumnsOrderingDefault,
   getModelColumnsVisibleDefault,
 } from "../utils/utils";
 import {
@@ -92,7 +91,7 @@ export default {
 
     resetColumns() {
       this.changeModelColumnsVisible(getModelColumnsVisibleDefault(this.columnsOrdered));
-      this.changeColumnsOrdering({ modelColumnsOrderingLocal: getModelColumnsOrderingDefault(this.columns) });
+      this.changeColumnsOrdering({ reset: true });
     },
   },
   render() {

package/src/ATable/ATableHeaderThAction/ATableHeaderThActionItem.js

@@ -122,7 +122,10 @@ export default {
     },
 
     isColumnVisible() {
-      return this.modelColumnsVisibleLocal[this.columnId];
+      if (this.columnId in this.modelColumnsVisibleLocal) {
+        return !!this.modelColumnsVisibleLocal[this.columnId];
+      }
+      return !this.column.hide;
     },
 
     arrowButtons() {
@@ -191,7 +194,7 @@ export default {
     toggleColumnVisible($event) {
       $event.stopPropagation();
       const MODEL_COLUMNS = cloneDeep(this.modelColumnsVisibleLocal);
-      MODEL_COLUMNS[this.columnId] = !MODEL_COLUMNS[this.columnId];
+      MODEL_COLUMNS[this.columnId] = !this.isColumnVisible;
       this.changeModelColumnsVisible(MODEL_COLUMNS);
     },
 

package/src/ATable/compositionAPI/ColumnsIdsAPI.js

@@ -0,0 +1,47 @@
+import {
+  computed,
+  toRef,
+} from "vue";
+
+import {
+  cloneDeep,
+  forEach,
+  keyBy,
+} from "lodash-es";
+
+export default function ColumnsIdsAPI(props) {
+  const columns = toRef(props, "columns");
+
+  const columnsKeyById = computed(() => {
+    return keyBy(columns.value, "id");
+  });
+
+  const columnIdsGroupByLocked = computed(() => {
+    const COLUMNS_GROUP_BY_LOCKED = {
+      true: [],
+      false: [],
+      trueObject: {},
+      falseObject: {},
+      trueColumns: [],
+      falseColumns: [],
+    };
+    forEach(cloneDeep(columns.value), column => {
+      const COLUMN_ID = column.id;
+      if (column.locked) {
+        COLUMNS_GROUP_BY_LOCKED.true.push(COLUMN_ID);
+        COLUMNS_GROUP_BY_LOCKED.trueColumns.push(column);
+        COLUMNS_GROUP_BY_LOCKED.trueObject[COLUMN_ID] = true;
+      } else {
+        COLUMNS_GROUP_BY_LOCKED.false.push(COLUMN_ID);
+        COLUMNS_GROUP_BY_LOCKED.falseColumns.push(column);
+        COLUMNS_GROUP_BY_LOCKED.falseObject[COLUMN_ID] = true;
+      }
+    });
+    return COLUMNS_GROUP_BY_LOCKED;
+  });
+
+  return {
+    columnsKeyById,
+    columnIdsGroupByLocked,
+  };
+}

package/src/ATable/compositionAPI/ColumnsOrderingAPI.js

@@ -0,0 +1,92 @@
+import {
+  computed,
+  toRef,
+  watch,
+} from "vue";
+
+import {
+  cloneDeep,
+  forEach,
+} from "lodash-es";
+
+
+export default function ColumnsOrderingAPI(props, { emit }, {
+  checkVisibleColumns = () => {},
+  columnIdsGroupByLocked = computed(() => ({
+    true: [],
+    false: [],
+    trueObject: {},
+    falseObject: {},
+    trueColumns: [],
+    falseColumns: [],
+  })),
+}) {
+  const columns = toRef(props, "columns");
+  const modelColumnsOrdering = toRef(props, "modelColumnsOrdering");
+
+  const changeColumnsOrdering = ({ columnIndexDraggable, columnIndexOver, reset }) => {
+    if (columnIndexDraggable === columnIndexOver && !reset) {
+      return;
+    }
+    let modelColumnsOrderingLocal = [];
+    if (reset) {
+      modelColumnsOrderingLocal = [...columnIdsGroupByLocked.value.true, ...columnIdsGroupByLocked.value.false];
+    } else {
+      modelColumnsOrderingLocal = cloneDeep(modelColumnsOrdering.value);
+      const ID_DRAGGABLE = modelColumnsOrderingLocal[columnIndexDraggable];
+      modelColumnsOrderingLocal.splice(columnIndexDraggable, 1);
+      modelColumnsOrderingLocal.splice(columnIndexOver, 0, ID_DRAGGABLE);
+    }
+
+    emit("changeColumnsOrdering", {
+      columnIndexDraggable,
+      columnIndexOver,
+      modelColumnsOrdering: modelColumnsOrderingLocal,
+    });
+    checkVisibleColumns();
+  };
+
+  const checkColumnsOrdering = ({ isFirst } = {}) => {
+    let modelColumnsOrderingLocal = [];
+    let shouldFixColumns = false;
+    if (!modelColumnsOrdering.value.length) {
+      modelColumnsOrderingLocal = [...columnIdsGroupByLocked.value.true, ...columnIdsGroupByLocked.value.false];
+      shouldFixColumns = true;
+    } else {
+      modelColumnsOrderingLocal = [...columnIdsGroupByLocked.value.true];
+      const COLUMNS_NOT_LOCKED_IDS = cloneDeep(columnIdsGroupByLocked.value.falseObject);
+      forEach(modelColumnsOrdering.value, columnId => {
+        if (COLUMNS_NOT_LOCKED_IDS[columnId]) {
+          modelColumnsOrderingLocal.push(columnId);
+          delete COLUMNS_NOT_LOCKED_IDS[columnId];
+        }
+      });
+
+      forEach(COLUMNS_NOT_LOCKED_IDS, (_, columnId) => {
+        modelColumnsOrderingLocal.push(columnId);
+      });
+      
+      if (JSON.stringify(modelColumnsOrdering.value) !== JSON.stringify(modelColumnsOrderingLocal)) {
+        shouldFixColumns = true;
+      }
+    }
+    if (shouldFixColumns) {
+      emit("changeColumnsOrdering", {
+        modelColumnsOrdering: modelColumnsOrderingLocal,
+        isFirst,
+        shouldFixColumns,
+      });
+    }
+  };
+
+  watch(columns, () => {
+    checkColumnsOrdering();
+  }, {
+    deep: true,
+  });
+
+  return {
+    changeColumnsOrdering,
+    checkColumnsOrdering,
+  };
+}

package/src/ATable/compositionAPI/TableColumnsAPI.js

@@ -1,44 +1,45 @@
 import {
   computed,
-  ref,
   toRef,
 } from "vue";
 
 import {
   cloneDeep,
   forEach,
-  keyBy,
 } from "lodash-es";
 
-export default function TableColumnsAPI(props) {
-  const columns = toRef(props, "columns");
+export default function TableColumnsAPI(props, {
+  columnIdsGroupByLocked = computed(() => ({
+    true: [],
+    false: [],
+    trueObject: {},
+    falseObject: {},
+    trueColumns: [],
+    falseColumns: [],
+  })),
+  columnsKeyById = computed(() => ({})),
+}) {
+  const modelColumnsOrdering = toRef(props, "modelColumnsOrdering");
 
-  const modelColumnsOrderingLocal = ref([]);
-
-  const columnsKeyById = computed(() => {
-    return keyBy(columns.value, "id");
-  });
-
-  const columnIdsGroupByLocked = computed(() => {
-    const COLUMNS_GROUP_BY_LOCKED = {
-      true: [],
-      false: [],
-    };
-    forEach(columns.value, column => {
-      const COLUMN_ID = column.id;
-      if (column.locked) {
-        COLUMNS_GROUP_BY_LOCKED.true.push(COLUMN_ID);
-      } else {
-        COLUMNS_GROUP_BY_LOCKED.false.push(COLUMN_ID);
+  const columnsOrdered = computed(() => {
+    if (!modelColumnsOrdering.value.length) {
+      return [...columnIdsGroupByLocked.value.trueColumns, ...columnIdsGroupByLocked.value.falseColumns];
+    }
+    const COLUMNS = [];
+    const COLUMNS_KEY_BY_ID = cloneDeep(columnsKeyById.value);
+    forEach(modelColumnsOrdering.value, columnId => {
+      if (COLUMNS_KEY_BY_ID[columnId]) {
+        COLUMNS.push(COLUMNS_KEY_BY_ID[columnId]);
       }
     });
-    return COLUMNS_GROUP_BY_LOCKED;
+
+    return COLUMNS;
   });
 
-  const columnsOrdered = computed(() => {
+  const columnsOrderedAlt = computed(() => {
     const COLUMNS = [];
     const COLUMNS_KEY_BY_ID = cloneDeep(columnsKeyById.value);
-    const MODEL_COLUMNS_ORDERING_LOCAL = cloneDeep(modelColumnsOrderingLocal.value);
+    const MODEL_COLUMNS_ORDERING_LOCAL = cloneDeep(modelColumnsOrdering.value);
 
     forEach(columnIdsGroupByLocked.value.true, columnId => {
       if (COLUMNS_KEY_BY_ID[columnId]) {
@@ -69,6 +70,6 @@ export default function TableColumnsAPI(props) {
   return {
     columnsKeyById,
     columnsOrdered,
-    modelColumnsOrderingLocal,
+    columnsOrderedAlt,
   };
 }