[#984] [3.0] Grid Sort 관련 (#985)

Co-authored-by: yell <yell@ex-em.com>

package.json

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

src/components/grid/Grid.vue

@@ -102,10 +102,16 @@
                 {{ column.caption }}
               </span>
               <!--Sort Icon-->
-              <ev-icon
-                v-if="sortField === column.field"
-                :icon="`${sortOrder === 'desc' ? 'ev-icon-triangle-down' : 'ev-icon-triangle-up'}`"
-              />
+              <template v-if="sortField === column.field">
+                <ev-icon
+                  v-if="sortOrder === 'desc'"
+                  icon="ev-icon-triangle-down"
+                />
+                <ev-icon
+                  v-if="sortOrder === 'asc'"
+                  icon="ev-icon-triangle-up"
+                />
+              </template>
               <!--Filter Button-->
               <span
                 v-if="isFilterButton(column.field)"
@@ -387,7 +393,7 @@ export default {
       selectedRow: props.selected,
     });
     const sortInfo = reactive({
-      setSorting: false,
+      isSorting: false,
       sortField: '',
       sortOrder: 'desc',
     });
@@ -473,11 +479,19 @@ export default {
     const ROW_CHECK_INDEX = 1;
     const ROW_DATA_INDEX = 2;
     watch(
-      () => sortInfo.setSorting,
+      () => props.columns,
+      () => {
+        sortInfo.isSorting = false;
+        sortInfo.sortField = '';
+        setSort();
+      }, { deep: true },
+    );
+    watch(
+      () => sortInfo.isSorting,
       (value) => {
         if (value) {
           setStore(stores.originStore, false);
-          sortInfo.setSorting = !value;
+          sortInfo.isSorting = !value;
         }
       },
     );

src/components/grid/uses.js

@@ -466,36 +466,50 @@ export const checkEvent = (params) => {
 export const sortEvent = (params) => {
   const { sortInfo, stores, getColumnIndex } = params;
   const { props } = getCurrentInstance();
+  function OrderQueue() {
+    this.orders = ['asc', 'desc', 'init'];
+    this.dequeue = () => this.orders.shift();
+    this.enqueue = o => this.orders.push(o);
+  }
+  const order = new OrderQueue();
   /**
    * sort 이벤트를 처리한다.
    *
    * @param {string} field - 컬럼 field
    */
   const onSort = (field) => {
-    if (sortInfo.sortField === field) {
-      sortInfo.sortOrder = sortInfo.sortOrder === 'desc' ? 'asc' : 'desc';
-    } else {
+    if (sortInfo.sortField !== field) {
+      order.orders = ['asc', 'desc', 'init'];
       sortInfo.sortField = field;
-      sortInfo.sortOrder = 'desc';
     }
+    sortInfo.sortOrder = order.dequeue();
+    order.enqueue(sortInfo.sortOrder);
 
-    sortInfo.setSorting = true;
+    sortInfo.isSorting = true;
   };
   /**
    * 설정값에 따라 해당 컬럼 데이터에 대해 정렬한다.
    */
   const setSort = () => {
+    const setDesc = (a, b) => (a > b ? -1 : 1);
+    const setAsc = (a, b) => (a < b ? -1 : 1);
+    if (sortInfo.sortOrder === 'init' || (!sortInfo.sortField && !sortInfo.isSorting)) {
+      stores.store.sort((a, b) => {
+        if (typeof a[ROW_INDEX] === 'number') {
+          return setAsc(a[ROW_INDEX], b[ROW_INDEX]);
+        }
+        return 0;
+      });
+      return;
+    }
     const index = getColumnIndex(sortInfo.sortField);
-    const desc = (a, b) => (a > b ? -1 : 1);
-    const asc = (a, b) => (a < b ? -1 : 1);
-    const type = props.columns[index].type || 'string';
-    const sortFn = sortInfo.sortOrder === 'desc' ? desc : asc;
-
+    const type = props.columns[index]?.type || 'string';
+    const sortFn = sortInfo.sortOrder === 'desc' ? setDesc : setAsc;
     if (type === 'string') {
       stores.store.sort((a, b) => {
         if (typeof a[ROW_DATA_INDEX][index] === 'string') {
-          return sortFn(a[ROW_DATA_INDEX][index].toLowerCase(),
-            b[ROW_DATA_INDEX][index].toLowerCase());
+          return sortFn(a[ROW_DATA_INDEX][index]?.toLowerCase(),
+            b[ROW_DATA_INDEX][index]?.toLowerCase());
         }
         return 0;
       });