feat: task list add index UID & enqueuedAt filters.

riccox · Oct 10, 2024 · 98f3878 · 98f3878
1 parent e06aa0d
commit 98f3878
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 2 deletions.
diff --git a/src/locales/en/task.json b/src/locales/en/task.json
@@ -7,6 +7,12 @@
     "placeholder": "Search tasks"
   },
   "filter": {
+    "index": {
+      "placeholder": "Filter Index UID"
+    },
+    "enqueuedAt": {
+      "label": "Enqueued At"
+    },
     "type": {
       "placeholder": "Filter Task Type"
     },

diff --git a/src/locales/zh/task.json b/src/locales/zh/task.json
@@ -7,6 +7,12 @@
     "placeholder": "搜索任务"
   },
   "filter": {
+    "index": {
+      "placeholder": "过滤索引UID"
+    },
+    "enqueuedAt": {
+      "label": "入列时间"
+    },
     "type": {
       "placeholder": "过滤任务类型"
     },

diff --git a/src/routes/ins/$insID/_layout/tasks.tsx b/src/routes/ins/$insID/_layout/tasks.tsx
@@ -3,7 +3,7 @@ import { useCurrentInstance } from '@/hooks/useCurrentInstance';
 import { useMeiliClient } from '@/hooks/useMeiliClient';
 import { hiddenRequestLoader, showRequestLoader } from '@/utils/loader';
 import { getTimeText } from '@/utils/text';
-import { Modal, Select, Table } from '@douyinfe/semi-ui';
+import { DatePicker, Modal, Select, Table, TagInput } from '@douyinfe/semi-ui';
 import { ColumnProps } from '@douyinfe/semi-ui/lib/es/table';
 import { Button } from '@nextui-org/react';
 import { useQuery } from '@tanstack/react-query';
@@ -143,6 +143,24 @@ const Page = () => {
     <div className="flex-1 overflow-scroll max-h-fit">
       <main className="p-4 flex flex-col gap-4">
         <div className={`flex justify-end items-center gap-4`}>
+          <TagInput
+            className="flex-1"
+            placeholder={t('filter.index.placeholder')}
+            onChange={(value) => {
+              updateState({ indexUids: value });
+            }}
+          />
+          <div className="flex items-center gap-2">
+            <label className="text-sm text-nowrap">{t('filter.enqueuedAt.label')}</label>
+            <DatePicker
+              type="dateTimeRange"
+              onChange={(value) => {
+                if (value) {
+                  updateState({ beforeEnqueuedAt: (value as Date[])[1], afterEnqueuedAt: (value as Date[])[1] });
+                }
+              }}
+            />
+          </div>
           <Select
             placeholder={t('filter.type.placeholder')}
             optionList={_.entries(t('type', { returnObjects: true }) as Record<string, string>).map(([k, v]) => ({
@@ -152,7 +170,6 @@ const Page = () => {
             multiple
             onChange={(value) => {
               updateState({ types: (value as TaskTypes[]) || undefined });
-              console.log(value);
             }}
           />
           <Select