evui 3.4.73 → 3.4.75

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "evui",
-  "version": "3.4.73",
+  "version": "3.4.75",
   "description": "A EXEM Library project",
   "author": "exem <dev_client@ex-em.com>",
   "license": "MIT",

package/src/components/treeGrid/TreeGrid.vue

@@ -102,7 +102,7 @@
                      <slot name="sortIcon" />
                     </span>
                     <span
-                      v-if="isSortedColumn(column)"
+                      v-if="sortField === column.field"
                       :class="sortIconClass(column)"
                       :style="{
                         height: `${rowHeight}px`,
@@ -123,7 +123,7 @@
                       }"
                     />
                     <grid-sort-button
-                      v-if="isSortedColumn(column)"
+                      v-if="sortField === column.field"
                       :class="sortIconClass(column)"
                       :icon="sortOrder"
                       :style="{
@@ -636,6 +636,7 @@ export default {
 
     const {
         onSort,
+        setSortInfo,
     } = sortEvent({ sortInfo, stores, updatePagingInfo, setTreeNodeStore, onResize });
 
     const {
@@ -727,9 +728,10 @@ export default {
 
     watch(
       () => props.columns,
-      () => {
+      (newColumns) => {
         initColumnSettingInfo();
-      }, { deep: true },
+        setSortInfo(newColumns, false);
+      }, { deep: true, immediate: true },
     );
     watch(
       () => props.checked,
@@ -925,8 +927,6 @@ export default {
       },
     );
 
-    const isSortedColumn = column => sortInfo.sortField === column.field;
-
     const sortIconClass = () => ({
       'column-sort__icon': true,
       'column-sort__icon--asc': sortInfo.sortOrder === 'asc',
@@ -1039,7 +1039,6 @@ export default {
       onApplyColumn,
       onColumnContextMenu,
       onSort,
-      isSortedColumn,
       sortIconClass,
     };
   },

package/src/components/treeGrid/uses.js

@@ -1,6 +1,5 @@
 import { getCurrentInstance, nextTick } from 'vue';
 import { numberWithComma } from '@/common/utils';
-import { cloneDeep } from 'lodash-es';
 
 export const commonFunctions = (params) => {
   const { props } = getCurrentInstance();
@@ -995,7 +994,7 @@ export const pagingEvent = (params) => {
   return { getPagingData, updatePagingInfo, changePage };
 };
 
-export const sortEvent = ({ sortInfo, stores, updatePagingInfo, onResize }) => {
+export const sortEvent = ({ sortInfo, stores }) => {
   const { emit } = getCurrentInstance();
 
   const getDefaultSortType = (includeInit = true) => (includeInit ? ['asc', 'desc', 'init'] : ['asc', 'desc']);
@@ -1027,16 +1026,19 @@ export const sortEvent = ({ sortInfo, stores, updatePagingInfo, onResize }) => {
 
   const order = new OrderQueue();
 
-  const setSortInfo = (column, emitTriggered = true) => {
-    const { sortType } = column?.sortOption || {};
-    sortInfo.sortColumn = column;
-    sortInfo.sortField = column?.field;
-    sortInfo.sortOrder = sortType;
+
+  const setSortInfo = (columns, emitTriggered = true) => {
+    const sortByColumn = columns?.find(col => col?.sortOption?.sortType && col.sortOption.sortType !== 'init');
+    const { sortType } = sortByColumn?.sortOption || {};
+
+    sortInfo.sortColumn = sortByColumn;
+    sortInfo.sortField = sortByColumn?.field;
     sortInfo.isSorting = !!(sortType);
+    sortInfo.sortOrder = sortType;
 
-    if (emitTriggered) {
-      setSortOptionToOrderedColumns(column, sortType);
+    setSortOptionToOrderedColumns(sortByColumn, sortType);
 
+    if (emitTriggered) {
       emit('change-column-info', {
         type: 'sort',
         columns: getUpdatedColumns(stores),
@@ -1044,53 +1046,56 @@ export const sortEvent = ({ sortInfo, stores, updatePagingInfo, onResize }) => {
     }
   };
 
-  const compareValues = (nodeA, nodeB) => {
-    const valueA = nodeA.data[sortInfo.sortField];
-    const valueB = nodeB.data[sortInfo.sortField];
-
-    if (valueA === valueB) return 0;
-
-    const isAscending = sortInfo.sortOrder === 'asc';
-
-    if (isAscending) return valueA > valueB ? 1 : -1;
-
-    return valueA < valueB ? 1 : -1;
-  };
-
-  const sortTree = (nodes, depth = 0) => {
-    const groupedNodes = {};
-
-    nodes.forEach((node) => {
-      const nodeDepth = node.level || depth;
-      if (!groupedNodes[nodeDepth]) {
-        groupedNodes[nodeDepth] = [];
-      }
-      groupedNodes[nodeDepth].push(node);
-    });
-
-    Object.keys(groupedNodes).forEach((key) => {
-      groupedNodes[key].sort(compareValues);
-    });
-
-    nodes.length = 0;
-    Object.values(groupedNodes).forEach((group) => {
-      group.forEach((node) => {
-        nodes.push(node);
-        if (node.hasChild) {
-          sortTree(node.children, node.level + 1);
-        }
-      });
-    });
-  };
+  /* 24.11.09 Tree Grid Sort 로직 임시 제거 */
+  // const compareValues = (nodeA, nodeB) => {
+  //   const valueA = nodeA.data[sortInfo.sortField];
+  //   const valueB = nodeB.data[sortInfo.sortField];
+  //
+  //   if (valueA === valueB) return 0;
+  //
+  //   const isAscending = sortInfo.sortOrder === 'asc';
+  //
+  //   if (isAscending) return valueA > valueB ? 1 : -1;
+  //
+  //   return valueA < valueB ? 1 : -1;
+  // };
+  //
+  // const sortTree = (nodes, depth = 0) => {
+  //   const groupedNodes = {};
+  //
+  //   nodes.forEach((node) => {
+  //     const nodeDepth = node.level || depth;
+  //     if (!groupedNodes[nodeDepth]) {
+  //       groupedNodes[nodeDepth] = [];
+  //     }
+  //     groupedNodes[nodeDepth].push(node);
+  //   });
+  //
+  //   Object.keys(groupedNodes).forEach((key) => {
+  //     groupedNodes[key].sort(compareValues);
+  //   });
+  //
+  //   nodes.length = 0;
+  //   Object.values(groupedNodes).forEach((group) => {
+  //     group.forEach((node) => {
+  //       nodes.push(node);
+  //       if (node.hasChild) {
+  //         sortTree(node.children, node.level + 1);
+  //       }
+  //     });
+  //   });
+  // };
 
   const onSort = (column, sortOrder) => {
-    const sortable = column.sortable === undefined ? true : column.sortable;
-    if (sortable) {
+    const isSortableColumn = column.sortable === undefined ? true : column.sortable;
+    if (isSortableColumn) {
       sortInfo.sortColumn = column;
+
       if (sortInfo.sortField !== column?.field) {
         order.orders = getDefaultSortType();
         sortInfo.sortField = column?.field;
       }
+
       if (sortOrder) {
         order.orders = getDefaultSortType();
         if (sortOrder === 'desc') {
@@ -1098,6 +1103,7 @@ export const sortEvent = ({ sortInfo, stores, updatePagingInfo, onResize }) => {
           order.enqueue(sortInfo.sortOrder);
         }
       }
+
       sortInfo.sortOrder = order.dequeue();
       order.enqueue(sortInfo.sortOrder);
 
@@ -1105,6 +1111,7 @@ export const sortEvent = ({ sortInfo, stores, updatePagingInfo, onResize }) => {
       setSortOptionToOrderedColumns(column, sortInfo.sortOrder);
 
       const updatedColumInfo = getUpdatedColumns(stores);
+
       emit('sort-column', {
         field: sortInfo.sortField,
         order: sortInfo.sortOrder,
@@ -1117,18 +1124,20 @@ export const sortEvent = ({ sortInfo, stores, updatePagingInfo, onResize }) => {
         columns: updatedColumInfo,
       });
 
-      if (sortInfo.sortOrder === 'init') {
-        stores.treeStore = cloneDeep(stores.originStore);
-        stores.viewStore = stores.treeStore;
-        onResize();
-        sortInfo.isSorting = false;
-      } else {
-        sortTree(stores.treeRows);
-        sortInfo.isSorting = true;
-      }
-
-      updatePagingInfo({ onSort: true });
+      /* 24.11.09 Tree Grid Sort 로직 임시 제거 */
+      // if (sortInfo.sortOrder === 'init') {
+      //   stores.treeStore = cloneDeep(stores.originStore);
+      //   stores.viewStore = stores.treeStore;
+      //   onResize();
+      //   sortInfo.isSorting = false;
+      // } else {
+      //   sortTree(stores.treeRows);
+      //   sortInfo.isSorting = true;
+      // }
+      //
+      // updatePagingInfo({ onSort: true });
     }
   };
+
   return { onSort, setSortInfo };
 };