feat: update data table

src/components/newtab/app/AppSidebar.vue

@@ -115,12 +115,6 @@ const tabs = [
     path: '/schedule',
     shortcut: getShortcut('page:schedule', '/triggers'),
   },
-  {
-    id: 'storage',
-    icon: 'riHardDrive2Line',
-    path: '/storage',
-    shortcut: getShortcut('page:storage', '/storage'),
-  },
   {
     id: 'collection',
     icon: 'riFolderLine',

src/components/newtab/logs/LogsTable.vue

@@ -16,6 +16,14 @@
         <ui-tab value="raw"> Raw </ui-tab>
       </ui-tabs>
       <div class="flex-grow"></div>
+      <ui-input
+        v-if="state.activeTab === 'table'"
+        v-model="state.query"
+        :placeholder="t('common.search')"
+        class="mr-4"
+        prepend-icon="riSearch2Line"
+        type="search"
+      />
       <ui-popover trigger-width>
         <template #trigger>
           <ui-button variant="accent">
@@ -43,28 +51,13 @@
       lang="json"
       style="max-height: 600px"
     />
-    <table v-show="state.activeTab === 'table'" class="w-full">
-      <thead>
-        <tr>
-          <th
-            v-for="header in tableData.header"
-            :key="header"
-            class="last:rounded-r-lg first:rounded-l-lg text-left bg-box-transparent"
-          >
-            {{ header }}
-          </th>
-        </tr>
-      </thead>
-      <tbody class="divide-y">
-        <tr v-for="(row, index) in rows" :key="index">
-          <td v-for="(column, colIndex) in row" :key="index + colIndex">
-            <p class="line-clamp">
-              {{ column }}
-            </p>
-          </td>
-        </tr>
-      </tbody>
-    </table>
+    <ui-table
+      :headers="tableData.header"
+      :items="rows"
+      :search="state.query"
+      item-key="id"
+      class="w-full"
+    />
     <div
       v-if="
         state.activeTab === 'table' &&
@@ -122,6 +115,7 @@ const props = defineProps({
 const { t } = useI18n();
 
 const state = shallowReactive({
+  query: '',
   activeTab: 'table',
 });
 const pagination = shallowReactive({

src/components/ui/UiTable.vue

@@ -42,7 +42,7 @@
           :key="header.value"
           :align="header.align"
         >
-          <slot :name="`item-${header.value}`">
+          <slot :name="`item-${header.value}`" :item="item">
             {{ item[header.value] }}
           </slot>
         </td>
@@ -89,10 +89,12 @@ const sortState = reactive({
 });
 
 const filteredItems = computed(() => {
+  if (!props.search) return props.items;
+
   const filterFunc =
     props.customFilter ||
     ((search, item) => {
-      return table.filterKeys.every((key) =>
+      return table.filterKeys.some((key) =>
         item[key].toLocaleLowerCase().includes(search)
       );
     });

src/newtab/pages/ScheduledWorkflow.vue

@@ -8,52 +8,43 @@
       prepend-icon="riSearch2Line"
       :placeholder="t('common.search')"
     />
-    <table class="w-full mt-4 custom-table">
-      <thead>
-        <tr class="text-left font-semibold">
-          <th class="w-3/12">{{ t('common.name') }}</th>
-          <th class="w-4/12">{{ t('scheduledWorkflow.schedule.title') }}</th>
-          <th>{{ t('scheduledWorkflow.nextRun') }}</th>
-          <th class="text-center">{{ t('scheduledWorkflow.active') }}</th>
-          <th></th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="trigger in triggers" :key="trigger.id" class="hoverable">
-          <td>
-            <router-link
-              :to="`/workflows/${trigger.workflowId}`"
-              class="block h-full w-full"
-              style="min-height: 20px"
-            >
-              {{ trigger.name }}
-            </router-link>
-          </td>
-          <td v-tooltip="{ content: trigger.scheduleDetail, allowHTML: true }">
-            {{ trigger.schedule }}
-          </td>
-          <td>
-            {{ trigger.nextRun }}
-          </td>
-          <td class="text-center">
-            <v-remixicon
-              v-if="trigger.active"
-              class="text-green-500 dark:text-green-400 inline-block"
-              name="riCheckLine"
-            />
-          </td>
-          <td class="text-right">
-            <button
-              v-tooltip="t('scheduledWorkflow.refresh')"
-              class="rounded-md text-gray-600 dark:text-gray-300"
-              @click="refreshSchedule(trigger.id)"
-            >
-              <v-remixicon name="riRefreshLine" />
-            </button>
-          </td>
-        </tr>
-      </tbody>
-    </table>
+    <ui-table
+      :headers="tableHeaders"
+      :items="triggers"
+      item-key="id"
+      class="w-full mt-4"
+    >
+      <template #item-name="{ item }">
+        <router-link
+          :to="`/workflows/${item.workflowId}`"
+          class="block h-full w-full"
+          style="min-height: 20px"
+        >
+          {{ item.name }}
+        </router-link>
+      </template>
+      <template #item-schedule="{ item }">
+        <p v-tooltip="{ content: item.scheduleDetail, allowHTML: true }">
+          {{ item.schedule }}
+        </p>
+      </template>
+      <template #item-active="{ item }">
+        <v-remixicon
+          v-if="item.active"
+          class="text-green-500 dark:text-green-400 inline-block"
+          name="riCheckLine"
+        />
+      </template>
+      <template #item-action="{ item }">
+        <button
+          v-tooltip="t('scheduledWorkflow.refresh')"
+          class="rounded-md text-gray-600 dark:text-gray-300"
+          @click="refreshSchedule(item.id)"
+        >
+          <v-remixicon name="riRefreshLine" />
+        </button>
+      </template>
+    </ui-table>
   </div>
 </template>
 <script setup>
@@ -76,6 +67,38 @@ const state = reactive({
 
 let rowId = 0;
 const scheduledTypes = ['interval', 'date', 'specific-day'];
+const tableHeaders = [
+  {
+    value: 'name',
+    filterable: true,
+    text: t('common.name'),
+    attrs: {
+      class: 'w-3/12',
+    },
+  },
+  {
+    value: 'schedule',
+    text: t('scheduledWorkflow.schedule.title'),
+    attrs: {
+      class: 'w-4/12',
+    },
+  },
+  {
+    value: 'nextRun',
+    text: t('scheduledWorkflow.nextRun'),
+  },
+  {
+    value: 'active',
+    align: 'center',
+    text: t('scheduledWorkflow.active'),
+  },
+  {
+    value: 'action',
+    text: '',
+    sortable: false,
+    align: 'right',
+  },
+];
 
 const triggers = computed(() =>
   state.triggers.filter(({ name }) =>

src/newtab/pages/Storage.vue

@@ -1,22 +0,0 @@
-<template>
-  <div class="container py-8 pb-4">
-    <h1 class="text-2xl font-semibold">
-      {{ t('common.storage') }}
-    </h1>
-    <ui-tabs v-model="state.activeTab" class="mt-5">
-      <ui-tab value="tables">
-        {{ t('workflow.table.title', 2) }}
-      </ui-tab>
-    </ui-tabs>
-  </div>
-</template>
-<script setup>
-import { reactive } from 'vue';
-import { useI18n } from 'vue-i18n';
-
-const { t } = useI18n();
-
-const state = reactive({
-  activeTab: 'tables',
-});
-</script>

src/newtab/pages/logs/[id].vue

@@ -127,11 +127,16 @@ function convertToTableData() {
   const data = currentLog.value.data?.table;
   if (!data) return;
 
-  const [header, ...body] = convertArrObjTo2DArr(data);
+  const [header] = convertArrObjTo2DArr(data);
 
-  tableData.body = body;
-  tableData.header = header;
   tableData.converted = true;
+  tableData.body = data.map((item, index) => ({ ...item, id: index + 1 }));
+  tableData.header = header.map((name) => ({
+    text: name,
+    value: name,
+    filterable: true,
+  }));
+  tableData.header.unshift({ value: 'id', text: '', sortable: false });
 }
 function onTabChange(value) {
   if (value === 'table' && !tableData.converted) {

src/newtab/router.js

@@ -7,7 +7,6 @@ import ScheduledWorkflow from './pages/ScheduledWorkflow.vue';
 import Collections from './pages/Collections.vue';
 import CollectionsDetails from './pages/collections/[id].vue';
 import Logs from './pages/Logs.vue';
-import Storage from './pages/Storage.vue';
 import LogsDetails from './pages/logs/[id].vue';
 import LogsRunning from './pages/logs/Running.vue';
 import Settings from './pages/Settings.vue';
@@ -33,11 +32,6 @@ const routes = [
     path: '/workflows',
     component: Workflows,
   },
-  {
-    name: 'storage',
-    path: '/storage',
-    component: Storage,
-  },
   {
     name: 'schedule',
     path: '/schedule',