fix: table sorting (#1183)

package.json

@@ -37,14 +37,15 @@
     "@codemirror/theme-one-dark": "^6.1.0",
     "@medv/finder": "^2.1.0",
     "@n8n_io/riot-tmpl": "^2.0.0",
-    "@tiptap/core": "^2.0.0-beta.209",
-    "@tiptap/extension-character-count": "^2.0.0-beta.209",
-    "@tiptap/extension-history": "^2.0.0-beta.209",
-    "@tiptap/extension-image": "^2.0.0-beta.209",
-    "@tiptap/extension-link": "^2.0.0-beta.205",
-    "@tiptap/extension-placeholder": "^2.0.0-beta.205",
-    "@tiptap/starter-kit": "^2.0.0-beta.209",
-    "@tiptap/vue-3": "^2.0.0-beta.209",
+    "@tiptap/core": "^2.0.4",
+    "@tiptap/extension-character-count": "^2.0.4",
+    "@tiptap/extension-history": "^2.0.4",
+    "@tiptap/extension-image": "^2.0.4",
+    "@tiptap/extension-link": "^2.0.4",
+    "@tiptap/extension-placeholder": "^2.0.4",
+    "@tiptap/pm": "^2.0.4",
+    "@tiptap/starter-kit": "^2.0.4",
+    "@tiptap/vue-3": "^2.0.4",
     "@viselect/vanilla": "^3.2.5",
     "@vue-flow/additional-components": "^1.3.3",
     "@vue-flow/core": "^1.12.7",
@@ -85,10 +86,10 @@
     "sizzle": "^2.3.8",
     "tippy.js": "^6.3.1",
     "v-remixicon": "^0.1.1",
-    "vue": "^3.2.37",
-    "vue-i18n": "^9.2.0-beta.40",
+    "vue": "^3.3.4",
+    "vue-i18n": "9",
     "vue-imask": "^6.4.2",
-    "vue-router": "^4.1.5",
+    "vue-router": "^4.2.4",
     "vue-toastification": "^2.0.0-rc.5",
     "vuedraggable": "^4.1.0",
     "vuex": "^4.0.2",
@@ -101,7 +102,7 @@
     "@babel/preset-env": "^7.20.2",
     "@intlify/vue-i18n-loader": "^4.2.0",
     "@tailwindcss/typography": "^0.5.1",
-    "@vue/compiler-sfc": "^3.2.41",
+    "@vue/compiler-sfc": "^3.3.4",
     "archiver": "^5.3.1",
     "autoprefixer": "^10.4.12",
     "babel-loader": "^9.1.2",
@@ -131,7 +132,7 @@
     "source-map-loader": "^4.0.0",
     "tailwindcss": "^3.2.1",
     "terser-webpack-plugin": "^5.3.6",
-    "vue-loader": "^17.0.0",
+    "vue-loader": "^17.2.2",
     "web-worker": "^1.2.0",
     "webpack": "^5.73.0",
     "webpack-cli": "^5.0.1",

src/background/index.js

@@ -88,7 +88,6 @@ message.on('debugger:type', ({ tabId, commands, delay }) => {
         resolve();
         return;
       }
-      console.log(command);
 
       chrome.debugger.sendCommand(
         { tabId },

src/components/newtab/logs/LogsTable.vue

@@ -54,46 +54,15 @@
     <ui-table
       v-show="state.activeTab === 'table'"
       :headers="tableData.header"
-      :items="rows"
+      :items="tableData.body"
       :search="state.query"
       item-key="id"
       class="w-full"
     />
-    <div
-      v-if="
-        state.activeTab === 'table' &&
-        tableData.body &&
-        tableData.body.length >= 10
-      "
-      class="mt-4 flex items-center justify-between"
-    >
-      <div>
-        {{ t('components.pagination.text1') }}
-        <select v-model="pagination.perPage" class="bg-input rounded-md p-1">
-          <option
-            v-for="num in [10, 15, 25, 50, 100, 150]"
-            :key="num"
-            :value="num"
-          >
-            {{ num }}
-          </option>
-        </select>
-        {{
-          t('components.pagination.text2', {
-            count: tableData.body.length,
-          })
-        }}
-      </div>
-      <ui-pagination
-        v-model="pagination.currentPage"
-        :per-page="pagination.perPage"
-        :records="tableData.body.length"
-      />
-    </div>
   </template>
 </template>
 <script setup>
-import { computed, shallowReactive, defineAsyncComponent } from 'vue';
+import { shallowReactive, defineAsyncComponent } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { dataExportTypes } from '@/utils/shared';
 import dataExporter from '@/utils/dataExporter';
@@ -119,16 +88,6 @@ const state = shallowReactive({
   query: '',
   activeTab: 'table',
 });
-const pagination = shallowReactive({
-  perPage: 10,
-  currentPage: 1,
-});
-const rows = computed(() =>
-  props.tableData.body.slice(
-    (pagination.currentPage - 1) * pagination.perPage,
-    pagination.currentPage * pagination.perPage
-  )
-);
 
 function exportData(type) {
   dataExporter(

src/components/ui/UiTable.vue

@@ -1,59 +1,89 @@
 <template>
-  <table class="custom-table">
-    <thead>
-      <tr>
-        <th
-          v-for="header in table.headers"
-          :key="header.value"
-          :align="header.align"
-          class="relative"
-          v-bind="header.attrs"
-        >
-          <span
-            :class="{ 'cursor-pointer': header.sortable }"
-            class="inline-block"
-            @click="updateSort(header)"
+  <div class="ui-table">
+    <table class="custom-table h-full w-full">
+      <thead>
+        <tr>
+          <th
+            v-for="header in table.headers"
+            :key="header.value"
+            :align="header.align"
+            class="relative"
+            v-bind="header.attrs"
           >
-            {{ header.text }}
-          </span>
-          <span
-            v-if="header.sortable"
-            class="sort-icon ml-1 cursor-pointer"
-            @click="updateSort(header)"
+            <span
+              :class="{ 'cursor-pointer': header.sortable }"
+              class="inline-block"
+              @click="updateSort(header)"
+            >
+              {{ header.text }}
+            </span>
+            <span
+              v-if="header.sortable"
+              class="sort-icon ml-1 cursor-pointer"
+              @click="updateSort(header)"
+            >
+              <v-remixicon
+                v-if="sortState.id === header.value"
+                :rotate="sortState.order === 'asc' ? 90 : -90"
+                class="transition-transform"
+                size="20"
+                name="riArrowLeftLine"
+              />
+              <v-remixicon v-else name="riArrowUpDownLine" size="20" />
+            </span>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="item in filteredItems" :key="item[itemKey]">
+          <slot name="item-prepend" :item="item" />
+          <td
+            v-for="header in headers"
+            v-bind="header.rowAttrs"
+            :key="header.value"
+            :align="header.align"
+            v-on="header.rowEvents || {}"
           >
-            <v-remixicon
-              v-if="sortState.id === header.value"
-              :rotate="sortState.order === 'asc' ? 90 : -90"
-              class="transition-transform"
-              size="20"
-              name="riArrowLeftLine"
-            />
-            <v-remixicon v-else name="riArrowUpDownLine" size="20" />
-          </span>
-        </th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr v-for="item in sortedItems" :key="item[itemKey]">
-        <slot name="item-prepend" :item="item" />
-        <td
-          v-for="header in headers"
-          v-bind="header.rowAttrs"
-          :key="header.value"
-          :align="header.align"
-          v-on="header.rowEvents || {}"
-        >
-          <slot :name="`item-${header.value}`" :item="item">
-            {{ item[header.value] }}
-          </slot>
-        </td>
-        <slot name="item-append" :item="item" />
-      </tr>
-    </tbody>
-  </table>
+            <slot :name="`item-${header.value}`" :item="item">
+              {{ item[header.value] }}
+            </slot>
+          </td>
+          <slot name="item-append" :item="item" />
+        </tr>
+      </tbody>
+    </table>
+    <div
+      v-if="withPagination && filteredItems && filteredItems.length >= 10"
+      class="mt-4 flex items-center justify-between"
+    >
+      <div>
+        {{ t('components.pagination.text1') }}
+        <select v-model="pagination.perPage" class="bg-input rounded-md p-1">
+          <option
+            v-for="num in [10, 15, 25, 50, 100, 150]"
+            :key="num"
+            :value="num"
+          >
+            {{ num }}
+          </option>
+        </select>
+        {{
+          t('components.pagination.text2', {
+            count: filteredItems.length,
+          })
+        }}
+      </div>
+      <ui-pagination
+        v-model="pagination.currentPage"
+        :per-page="pagination.perPage"
+        :records="items.length"
+      />
+    </div>
+  </div>
 </template>
 <script setup>
 import { reactive, computed, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { isObject, arraySorter } from '@/utils/helper';
 
 const props = defineProps({
@@ -78,8 +108,14 @@ const props = defineProps({
     type: Function,
     default: null,
   },
+  withPagination: {
+    type: Boolean,
+    default: true,
+  },
 });
 
+const { t } = useI18n();
+
 const table = reactive({
   headers: [],
   filterKeys: [],
@@ -88,9 +124,28 @@ const sortState = reactive({
   id: '',
   order: 'asc',
 });
+const pagination = reactive({
+  perPage: 10,
+  currentPage: 1,
+});
+
+const sortedItems = computed(() => {
+  const sortedRows = sortState.id
+    ? arraySorter({
+        data: props.items,
+        key: sortState.id,
+        order: sortState.order,
+      })
+    : props.items;
+  if (!props.withPagination) return sortedRows;
 
+  return sortedRows.slice(
+    (pagination.currentPage - 1) * pagination.perPage,
+    pagination.currentPage * pagination.perPage
+  );
+});
 const filteredItems = computed(() => {
-  if (!props.search) return props.items;
+  if (!props.search) return sortedItems.value;
 
   const filterFunc =
     props.customFilter ||
@@ -105,16 +160,9 @@ const filteredItems = computed(() => {
     });
 
   const search = props.search.toLocaleLowerCase();
-  return props.items.filter((item, index) => filterFunc(search, item, index));
-});
-const sortedItems = computed(() => {
-  if (sortState.id === '') return filteredItems.value;
-
-  return arraySorter({
-    key: sortState.id,
-    order: sortState.order,
-    data: filteredItems.value,
-  });
+  return sortedItems.value.filter((item, index) =>
+    filterFunc(search, item, index)
+  );
 });
 
 function updateSort({ sortable, value }) {