[improvement-apache#11879]Keyword Search Improvement (apache#12951)

* [improvement-apache#11879]Keyword Search Improvement * [improvement] add a search component * [Feature][UI] Revise the `Search` component. * [improvement] add search components * [improvement] fix * [improvement] remove unUsed * [improvement] remove unUsed * handle the different locales. Co-authored-by: Jackie <‘[email protected]’> Co-authored-by: Amy <[email protected]>
shangeyao · Dec 3, 2022 · b960427 · b960427
1 parent 1cb963d
commit b960427
Show file tree

Hide file tree

Showing 28 changed files with 216 additions and 149 deletions.
diff --git a/dolphinscheduler-ui/src/components/input-search/index.tsx b/dolphinscheduler-ui/src/components/input-search/index.tsx
@@ -0,0 +1,55 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { defineComponent, withKeys, PropType } from 'vue'
+import { NInput } from 'naive-ui'
+import { useI18n } from 'vue-i18n'
+
+const props = {
+  placeholder: {
+    type: String as PropType<string>,
+    required: false
+  }
+}
+
+const Search = defineComponent({
+  name: 'Search',
+  emits: ['search','clear'],
+  props: props,
+  setup(props, ctx) {
+    const { t } = useI18n()
+
+    const onKeyDown = (ev: KeyboardEvent) => {
+      ctx.emit('search', (ev.target as HTMLInputElement)?.value || '')
+    }
+    const onClear = (ev: Event) => {
+      ctx.emit('clear', (ev.target as HTMLInputElement)?.value || '')
+    }
+    return () => (
+
+        <NInput
+            size='small'
+            clearable
+            placeholder = {props.placeholder?props.placeholder:t('input_search.placeholder')}
+            onKeydown={withKeys(onKeyDown, ['enter'])}
+            onClear = {onClear}
+        />
+    )
+  }
+})
+
+export default Search
diff --git a/dolphinscheduler-ui/src/locales/en_US/index.ts b/dolphinscheduler-ui/src/locales/en_US/index.ts
@@ -19,6 +19,7 @@ import crontab from '@/locales/en_US/crontab'
 import data_quality from '@/locales/en_US/data-quality'
 import datasource from '@/locales/en_US/datasource'
 import home from '@/locales/en_US/home'
+import input_search from '@/locales/en_US/input-search'
 import login from '@/locales/en_US/login'
 import menu from '@/locales/en_US/menu'
 import modal from '@/locales/en_US/modal'
@@ -48,5 +49,6 @@ export default {
   datasource,
   data_quality,
   crontab,
-  ui_setting
+  ui_setting,
+  input_search
 }
diff --git a/dolphinscheduler-ui/src/locales/en_US/input-search.ts b/dolphinscheduler-ui/src/locales/en_US/input-search.ts
@@ -0,0 +1,20 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export default {
+    placeholder: 'Please enter keyword'
+}
diff --git a/dolphinscheduler-ui/src/locales/zh_CN/index.ts b/dolphinscheduler-ui/src/locales/zh_CN/index.ts
@@ -19,6 +19,7 @@ import crontab from '@/locales/zh_CN/crontab'
 import data_quality from '@/locales/zh_CN/data-quality'
 import datasource from '@/locales/zh_CN/datasource'
 import home from '@/locales/zh_CN/home'
+import input_search from '@/locales/zh_CN/input-search'
 import login from '@/locales/zh_CN/login'
 import menu from '@/locales/zh_CN/menu'
 import modal from '@/locales/zh_CN/modal'
@@ -48,5 +49,6 @@ export default {
   datasource,
   data_quality,
   crontab,
-  ui_setting
+  ui_setting,
+  input_search
 }
diff --git a/dolphinscheduler-ui/src/locales/zh_CN/input-search.ts b/dolphinscheduler-ui/src/locales/zh_CN/input-search.ts
@@ -0,0 +1,20 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export default {
+    placeholder: '请输入关键词'
+}
diff --git a/dolphinscheduler-ui/src/views/data-quality/rule/index.tsx b/dolphinscheduler-ui/src/views/data-quality/rule/index.tsx
@@ -22,17 +22,11 @@ import {
   ref,
   toRefs
 } from 'vue'
-import {
-  NSpace,
-  NInput,
-  NButton,
-  NIcon,
-  NDataTable,
-  NPagination
-} from 'naive-ui'
+import {NSpace, NButton, NIcon, NDataTable, NPagination} from 'naive-ui'
 import { SearchOutlined } from '@vicons/antd'
 import { useTable } from './use-table'
 import Card from '@/components/card'
+import Search from '@/components/input-search'
 import RuleModal from './components/rule-modal'
 
 const TaskResult = defineComponent({
@@ -58,7 +52,6 @@ const TaskResult = defineComponent({
     }
 
     const onSearch = () => {
-      variables.page = 1
       requestTableData()
     }
 
@@ -115,14 +108,16 @@ const TaskResult = defineComponent({
       <NSpace vertical>
         <Card>
           <NSpace justify='end'>
-            <NInput
-              allowInput={this.trim}
-              v-model={[this.searchVal, 'value']}
-              size='small'
+            <Search
+              v-model:value={this.searchVal}
               placeholder={t('data_quality.rule.name')}
-              clearable
+              onSearch={onSearch}
             />
-            <NButton size='small' type='primary' onClick={onSearch}>
+            <NButton
+              size='small'
+              type='primary'
+              onClick={onSearch}
+            >
               <NIcon>
                 <SearchOutlined />
               </NIcon>

diff --git a/dolphinscheduler-ui/src/views/data-quality/rule/use-table.ts b/dolphinscheduler-ui/src/views/data-quality/rule/use-table.ts
@@ -34,7 +34,7 @@ export function useTable(viewRuleEntry = (unusedRuleJson: string): void => {}) {
     page: ref(1),
     pageSize: ref(10),
     state: ref(null),
-    searchVal: ref(null),
+    searchVal: '',
     totalPage: ref(1),
     loadingRef: ref(false)
   })

diff --git a/dolphinscheduler-ui/src/views/data-quality/task-result/index.tsx b/dolphinscheduler-ui/src/views/data-quality/task-result/index.tsx
@@ -24,7 +24,6 @@ import {
 } from 'vue'
 import {
   NSpace,
-  NInput,
   NSelect,
   NDatePicker,
   NButton,
@@ -36,6 +35,7 @@ import { SearchOutlined } from '@vicons/antd'
 import { useTable } from './use-table'
 import { useI18n } from 'vue-i18n'
 import Card from '@/components/card'
+import Search from '@/components/input-search'
 
 const TaskResult = defineComponent({
   name: 'task-result',
@@ -90,12 +90,10 @@ const TaskResult = defineComponent({
       <NSpace vertical>
         <Card>
           <NSpace justify='end'>
-            <NInput
-              allowInput={this.trim}
-              v-model={[this.searchVal, 'value']}
-              size='small'
-              placeholder={t('data_quality.task_result.task_name')}
-              clearable
+            <Search
+                v-model:value={this.searchVal}
+                placeholder={t('data_quality.task_result.task_name')}
+                onSearch={onSearch}
             />
             <NSelect
               v-model={[this.ruleType, 'value']}

diff --git a/dolphinscheduler-ui/src/views/datasource/list/index.tsx b/dolphinscheduler-ui/src/views/datasource/list/index.tsx
@@ -25,7 +25,6 @@ import {
 } from 'vue'
 import {
   NButton,
-  NInput,
   NIcon,
   NDataTable,
   NPagination,
@@ -37,6 +36,7 @@ import { useColumns } from './use-columns'
 import { useTable } from './use-table'
 import { DefaultTableWidth } from '@/common/column-width-config'
 import Card from '@/components/card'
+import Search from '@/components/input-search'
 import DetailModal from './detail'
 import type { TableColumns } from './types'
 import SourceModal from './source-modal'
@@ -143,11 +143,10 @@ const list = defineComponent({
               {t('datasource.create_datasource')}
             </NButton>
             <NSpace justify='end' wrap={false}>
-              <NInput
-                allowInput={this.trim}
-                v-model={[this.searchVal, 'value']}
-                size='small'
-                placeholder={`${t('datasource.search_input_tips')}`}
+              <Search
+                  v-model:value = {this.searchVal}
+                  placeholder = {t('datasource.search_input_tips')}
+                  onSearch={onUpdatedList}
               />
               <NButton type='primary' size='small' onClick={onUpdatedList}>
                 <NIcon>

diff --git a/dolphinscheduler-ui/src/views/datasource/list/use-table.ts b/dolphinscheduler-ui/src/views/datasource/list/use-table.ts
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { reactive } from 'vue'
+import {reactive, ref} from 'vue'
 import {
   queryDataSourceListPaging,
   deleteDataSource
@@ -26,7 +26,7 @@ export function useTable() {
     page: 1,
     pageSize: 10,
     itemCount: 0,
-    searchVal: '',
+    searchVal: ref(''),
     list: [],
     loading: false
   })

diff --git a/dolphinscheduler-ui/src/views/projects/list/index.tsx b/dolphinscheduler-ui/src/views/projects/list/index.tsx
@@ -20,7 +20,6 @@ import {
   NButton,
   NDataTable,
   NIcon,
-  NInput,
   NPagination,
   NSpace
 } from 'naive-ui'
@@ -34,6 +33,7 @@ import {
 import { useI18n } from 'vue-i18n'
 import { useTable } from './use-table'
 import Card from '@/components/card'
+import Search from "@/components/input-search";
 import ProjectModal from './components/project-modal'
 
 const list = defineComponent({
@@ -121,14 +121,13 @@ const list = defineComponent({
               {t('project.list.create_project')}
             </NButton>
             <NSpace>
-              <NInput
-                allowInput={this.trim}
-                size='small'
-                v-model={[this.searchVal, 'value']}
-                placeholder={t('project.list.project_tips')}
-                clearable
-                onClear={this.onClearSearch}
+              <Search
+                  v-model:value = {this.searchVal}
+                  placeholder={t('project.list.project_tips')}
+                  onSearch={this.handleSearch}
+                  onClear={this.onClearSearch}
               />
+
               <NButton size='small' type='primary' onClick={this.handleSearch}>
                 <NIcon>
                   <SearchOutlined />

diff --git a/dolphinscheduler-ui/src/views/projects/list/use-table.ts b/dolphinscheduler-ui/src/views/projects/list/use-table.ts
@@ -213,7 +213,7 @@ export function useTable() {
     tableData: [],
     page: ref(1),
     pageSize: ref(10),
-    searchVal: ref(null),
+    searchVal: ref(''),
     totalPage: ref(1),
     showModalRef: ref(false),
     statusRef: ref(0),

diff --git a/dolphinscheduler-ui/src/views/projects/workflow/definition/index.tsx b/dolphinscheduler-ui/src/views/projects/workflow/definition/index.tsx
@@ -20,7 +20,6 @@ import {
   NButton,
   NDataTable,
   NIcon,
-  NInput,
   NPagination,
   NSpace,
   NTooltip,
@@ -44,6 +43,7 @@ import TimingModal from './components/timing-modal'
 import VersionModal from './components/version-modal'
 import CopyModal from './components/copy-modal'
 import type { Router } from 'vue-router'
+import Search from "@/components/input-search";
 
 export default defineComponent({
   name: 'WorkflowDefinitionList',
@@ -177,12 +177,10 @@ export default defineComponent({
               </NButton>
             </NSpace>
             <NSpace>
-              <NInput
-                allowInput={this.trim}
-                size='small'
-                placeholder={t('resource.function.enter_keyword_tips')}
-                v-model={[this.searchVal, 'value']}
-                clearable
+              <Search
+                placeholder = {t('resource.function.enter_keyword_tips')}
+                v-model:value={this.searchVal}
+                onSearch={this.handleSearch}
                 onClear={this.onClearSearch}
               />
               <NButton type='primary' size='small' onClick={this.handleSearch}>

diff --git a/dolphinscheduler-ui/src/views/resource/file/index.tsx b/dolphinscheduler-ui/src/views/resource/file/index.tsx
@@ -31,7 +31,6 @@ import {
   NButtonGroup,
   NButton,
   NPagination,
-  NInput,
   NBreadcrumb,
   NBreadcrumbItem
 } from 'naive-ui'
@@ -52,6 +51,7 @@ import ResourceRenameModal from './rename'
 import styles from './index.module.scss'
 import type { ResourceFile } from '@/service/modules/resources/types'
 import type { Router } from 'vue-router'
+import Search from "@/components/input-search";
 
 export default defineComponent({
   name: 'File',
@@ -285,11 +285,10 @@ export default defineComponent({
               </NButton>
             </NButtonGroup>
             <NSpace>
-              <NInput
-                size='small'
-                allowInput={this.trim}
-                placeholder={t('resource.file.enter_keyword_tips')}
-                v-model={[this.searchRef, 'value']}
+              <Search
+                placeholder = {t('resource.file.enter_keyword_tips')}
+                v-model:value={this.searchRef}
+                onSearch={handleConditions}
               />
               <NButton size='small' type='primary' onClick={handleConditions}>
                 <NIcon>