This is an automated email from the ASF dual-hosted git repository.
wanggenhua pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/dolphinscheduler.git
The following commit(s) were added to refs/heads/dev by this push:
new 6bf80f7a06 [Refactor][UI] Refactor datasource using NSpace component.
(#11022)
6bf80f7a06 is described below
commit 6bf80f7a06727731685f095f95b811fc2c902076
Author: songjianet <[email protected]>
AuthorDate: Mon Jul 18 13:19:41 2022 +0800
[Refactor][UI] Refactor datasource using NSpace component. (#11022)
* [Refactor][UI] Refactor datasource using NSpace component.
* [Refactor][UI] Refactor datasource using NSpace component.
---
.../src/views/datasource/list/index.module.scss | 32 ------
.../src/views/datasource/list/index.tsx | 113 ++++++++++-----------
2 files changed, 55 insertions(+), 90 deletions(-)
diff --git a/dolphinscheduler-ui/src/views/datasource/list/index.module.scss
b/dolphinscheduler-ui/src/views/datasource/list/index.module.scss
deleted file mode 100644
index fc5f4cc948..0000000000
--- a/dolphinscheduler-ui/src/views/datasource/list/index.module.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-/*
- * 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.
- */
-
-.conditions {
- display: flex;
- justify-content: space-between;
- align-items: center;
-}
-.conditions-search-input {
- width: 250px;
-}
-.pagination {
- margin-top: 20px;
- justify-content: center;
-}
-.mt-8 {
- margin-top: 8px;
-}
diff --git a/dolphinscheduler-ui/src/views/datasource/list/index.tsx
b/dolphinscheduler-ui/src/views/datasource/list/index.tsx
index f0a559aaba..fa80c6c8b9 100644
--- a/dolphinscheduler-ui/src/views/datasource/list/index.tsx
+++ b/dolphinscheduler-ui/src/views/datasource/list/index.tsx
@@ -24,15 +24,14 @@ import {
NPagination,
NSpace
} from 'naive-ui'
-import Card from '@/components/card'
-import DetailModal from './detail'
import { SearchOutlined } from '@vicons/antd'
import { useI18n } from 'vue-i18n'
import { useColumns } from './use-columns'
import { useTable } from './use-table'
-import styles from './index.module.scss'
-import type { TableColumns } from './types'
import { DefaultTableWidth } from '@/common/column-width-config'
+import Card from '@/components/card'
+import DetailModal from './detail'
+import type { TableColumns } from './types'
const list = defineComponent({
name: 'list',
@@ -103,60 +102,58 @@ const list = defineComponent({
} = this
return (
- <>
- <Card title=''>
- {{
- default: () => (
- <div class={styles['conditions']}>
- <NButton
- onClick={onCreate}
- type='primary'
- class='btn-create-data-source'
- >
- {t('datasource.create_datasource')}
- </NButton>
- <NSpace
- class={styles['conditions-search']}
- justify='end'
- wrap={false}
- >
- <div class={styles['conditions-search-input']}>
- <NInput
- allowInput={this.trim}
- v-model={[this.searchVal, 'value']}
- placeholder={`${t('datasource.search_input_tips')}`}
- />
- </div>
- <NButton type='primary' onClick={onUpdatedList}>
- <NIcon>
- <SearchOutlined />
- </NIcon>
- </NButton>
- </NSpace>
- </div>
- )
- }}
+ <NSpace vertical>
+ <Card>
+ <NSpace justify='space-between'>
+ <NButton
+ onClick={onCreate}
+ type='primary'
+ size='small'
+ class='btn-create-data-source'
+ >
+ {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')}`}
+ />
+ <NButton type='primary' size='small' onClick={onUpdatedList}>
+ <NIcon>
+ <SearchOutlined />
+ </NIcon>
+ </NButton>
+ </NSpace>
+ </NSpace>
</Card>
- <Card title='' class={styles['mt-8']}>
- <NDataTable
- row-class-name='data-source-items'
- columns={columns.columns}
- data={list}
- loading={loading}
- striped
- scrollX={columns.tableWidth}
- />
- <NPagination
- page={page}
- page-size={pageSize}
- item-count={itemCount}
- show-quick-jumper
- show-size-picker
- page-sizes={[10, 30, 50]}
- class={styles['pagination']}
- on-update:page={changePage}
- on-update:page-size={changePageSize}
- />
+ <Card title={t('menu.datasource')}>
+ <NSpace vertical>
+ <NDataTable
+ row-class-name='data-source-items'
+ columns={columns.columns}
+ data={list}
+ loading={loading}
+ striped
+ scrollX={columns.tableWidth}
+ />
+ <NSpace justify='center'>
+ <NPagination
+ page={page}
+ page-size={pageSize}
+ item-count={itemCount}
+ show-quick-jumper
+ show-size-picker
+ page-sizes={[10, 30, 50]}
+ on-update:page={changePage}
+ on-update:page-size={changePageSize}
+ />
+ </NSpace>
+ </NSpace>
</Card>
<DetailModal
show={showDetailModal}
@@ -164,7 +161,7 @@ const list = defineComponent({
onCancel={() => void (this.showDetailModal = false)}
onUpdate={onUpdatedList}
/>
- </>
+ </NSpace>
)
}
})
