Skip to content

Commit

Permalink
refactor(data integration): extract edit topic list
Browse files Browse the repository at this point in the history
  • Loading branch information
@Kinplemelon @ysfscream
Kinplemelon authored and ysfscream committed Dec 30, 2024
1 parent eae1d52 commit 0ad364a
Show file tree
Hide file tree
Showing 5 changed files with 110 additions and 155 deletions.
58 changes: 58 additions & 0 deletions src/components/EditTopicList.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
<template>
<ul class="form-topic-list-vertical">
<li class="topic-item" v-for="(item, $index) in topics" :key="$index">
<el-form-item :prop="`${prop}.${$index}`" :rules="rules">
<el-input v-model="topics[$index]" />
<div class="btn-container vertical-align-center">
<el-button
class="btn-del"
:icon="Delete"
:disabled="(!allowEmpty && topics.length <= 1) || !$hasPermission('delete')"
@click="delTopic($index)"
/>
<el-button
v-if="$index === topics.length - 1"
class="btn-add"
:icon="Plus"
:disabled="!$hasPermission('post')"
@click="addTopic"
/>
</div>
</el-form-item>
</li>
</ul>
</template>

<script setup lang="ts">
import { Delete, Plus } from '@element-plus/icons-vue'
import type { FormItemRule } from 'element-plus'
import { computed, defineProps, defineEmits } from 'vue'
const props = defineProps<{
modelValue: string[]
allowEmpty?: boolean
rules?: Array<FormItemRule>
prop?: string
}>()
const emit = defineEmits<{
(e: 'update:modelValue', value: string[]): void
}>()
const topics = computed({
get() {
return props.modelValue
},
set(value) {
emit('update:modelValue', value)
},
})
const addTopic = () => {
topics.value.push('')
}
const delTopic = (index: number) => {
topics.value.splice(index, 1)
}
</script>
27 changes: 27 additions & 0 deletions src/style/common.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -975,3 +975,30 @@ code {
}
}
}

.form-topic-list-vertical {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
.topic-item {
margin-bottom: 12px;
.el-form-item {
width: 100%;
}
.el-form-item__content {
position: relative;
}
.el-button {
padding-left: 8px;
padding-right: 8px;
margin-left: 12px;
}
}
.btn-container {
position: absolute;
top: 0;
right: -12px;
transform: translateX(100%);
}
}
33 changes: 3 additions & 30 deletions src/views/Config/ClusterLinking/components/ClusterLinkingForm.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@
desc-marked
/>
</template>
<ul class="topic-list">
<ul class="form-topic-list-vertical">
<li class="topic-item" v-for="(item, $index) in record.topics" :key="$index">
<el-form-item :prop="`topics.${$index}`" :rules="arrayItemRule.topic">
<el-tooltip
Expand All @@ -69,7 +69,7 @@
>
<el-button
class="btn-del"
:icon="Minus"
:icon="Delete"
:disabled="disabledEditTopic($index) || !$hasPermission('delete')"
@click="delTopic($index)"
/>
Expand Down Expand Up @@ -178,7 +178,7 @@ import CommonTLSConfig from '@/components/TLSConfig/CommonTLSConfig.vue'
import useFormRules from '@/hooks/useFormRules'
import useI18nTl from '@/hooks/useI18nTl'
import { ClusterLinkingForm } from '@/types/typeAlias'
import { Minus, Plus } from '@element-plus/icons-vue'
import { Delete, Plus } from '@element-plus/icons-vue'
import { computed, defineEmits, defineProps, ref, defineExpose } from 'vue'
const props = defineProps<{
Expand Down Expand Up @@ -252,32 +252,5 @@ defineExpose({ validate })
.cluster-linking-form {
width: 75%;
margin-bottom: 36px;
.topic-list {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
}
.topic-item {
margin-bottom: 12px;
.el-form-item {
width: 100%;
}
.el-form-item__content {
position: relative;
}
.el-button {
margin-left: 12px;
padding-right: 8px;
padding-left: 8px;
}
.btn-container {
position: absolute;
top: 0;
right: -12px;
transform: translateX(100%);
}
}
}
</style>
74 changes: 11 additions & 63 deletions src/views/RuleEngine/MessageTransform/components/TransformForm.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,28 +15,7 @@
</el-col>
<el-col :span="15">
<el-form-item prop="topics" :label="tl('msgSourceTopic')">
<ul class="topic-list">
<li class="topic-item" v-for="(item, $index) in formData.topics" :key="$index">
<el-form-item :prop="`topics.${$index}`" :rules="arrayItemRule.topic">
<el-input v-model="formData.topics[$index]" />
<div class="btn-container vertical-align-center">
<el-button
class="btn-del"
:icon="Delete"
:disabled="formData.topics.length <= 1 || !$hasPermission('delete')"
@click="delTopic($index)"
/>
<el-button
v-if="$index === formData.topics.length - 1"
class="btn-add"
:icon="Plus"
:disabled="!$hasPermission('post')"
@click="addTopic"
/>
</div>
</el-form-item>
</li>
</ul>
<EditTopicList v-model="topics" prop="topics" :rules="arrayItemRule.topic" />
</el-form-item>
</el-col>
<el-col :span="15">
Expand Down Expand Up @@ -200,6 +179,7 @@
<script setup lang="ts">
import { querySchemas } from '@/api/ruleengine'
import { customValidate, getLabelFromValueInOptionList } from '@/common/tools'
import EditTopicList from '@/components/EditTopicList.vue'
import {
AvailableKey,
MESSAGE_TYPE_NONE,
Expand All @@ -214,7 +194,6 @@ import { SchemaRegistryType } from '@/types/enum'
import { SchemaRegistry } from '@/types/rule'
import type { MessageTransform } from '@/types/typeAlias'
import { MessageTransformLogLevel } from '@/types/typeAlias'
import { Delete, Plus } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import {
PropType,
Expand Down Expand Up @@ -362,28 +341,22 @@ const rules: FormRules = {
const arrayItemRule = { topic: createRequiredRule(t('Base.topic')) }
const topics = computed({
get() {
return Array.isArray(formData.value.topics) ? formData.value.topics : [formData.value.topics]
},
set(value) {
formData.value.topics = value
},
})
const { failureActionOpts } = useFailureAction()
const { messageTransformLogLevelOpts: rawMessageTransformLogLevelOpts } =
useMessageTransformLogLevel()
const messageTransformLogLevelOpts = rawMessageTransformLogLevelOpts.filter(
(item) => item.value !== MessageTransformLogLevel.none,
)
const delTopic = (index: number) => {
if (Array.isArray(formData.value.topics)) {
formData.value.topics.splice(index, 1)
} else {
throw new Error('topics is not an array')
}
}
const addTopic = () => {
if (Array.isArray(formData.value.topics)) {
formData.value.topics.push('')
} else {
throw new Error('topics is not an array')
}
}
const formatOpts = [
{ value: MESSAGE_TYPE_NONE, label: t('Base.none') },
{ value: SchemaRegistryType.JSON, label: 'JSON' },
Expand Down Expand Up @@ -486,31 +459,6 @@ defineExpose({

<style lang="scss">
.message-transform-form {
.topic-list {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
}
.topic-item {
margin-bottom: 12px;
.el-form-item {
width: 100%;
}
.el-form-item__content {
position: relative;
}
.el-button {
margin-left: 12px;
}
}
.btn-container {
position: absolute;
top: 0;
right: -12px;
transform: translateX(100%);
}
.part-header + .tip {
margin-bottom: 20px;
}
Expand Down
73 changes: 11 additions & 62 deletions src/views/RuleEngine/SchemaValidation/components/SchemaValidationForm.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,28 +15,7 @@
</el-col>
<el-col :span="15">
<el-form-item prop="topics" :label="tl('msgSourceTopic')">
<ul class="topic-list">
<li class="topic-item" v-for="(item, $index) in formData.topics" :key="$index">
<el-form-item :prop="`topics.${$index}`" :rules="arrayItemRule.topic">
<el-input v-model="formData.topics[$index]" />
<div class="btn-container vertical-align-center">
<el-button
class="btn-del"
:icon="Delete"
:disabled="formData.topics.length <= 1 || !$hasPermission('delete')"
@click="delTopic($index)"
/>
<el-button
v-if="$index === formData.topics.length - 1"
class="btn-add"
:icon="Plus"
:disabled="!$hasPermission('post')"
@click="addTopic"
/>
</div>
</el-form-item>
</li>
</ul>
<EditTopicList v-model="topics" prop="topics" :rules="arrayItemRule.topic" />
</el-form-item>
</el-col>
<el-col :span="15">
Expand Down Expand Up @@ -240,6 +219,7 @@ import {
} from 'vue'
import SQLContentDialog from '../../components/SQLContentDialog.vue'
import SchemaCreateDrawer from './SchemaCreateDrawer.vue'
import EditTopicList from '@/components/EditTopicList.vue'
const props = defineProps({
modelValue: {
Expand Down Expand Up @@ -322,6 +302,15 @@ const arrayItemRule = {
message_type: createRequiredRule(tl('messageType')),
}
const topics = computed({
get() {
return Array.isArray(formData.value.topics) ? formData.value.topics : [formData.value.topics]
},
set(value) {
formData.value.topics = value
},
})
const { validationStrategyOpts } = useValidationStrategy()
const { failureActionOpts } = useFailureAction()
const { validationLogLevelOpts: rawValidationLogLevelOpts } = useValidationLogLevel()
Expand All @@ -330,21 +319,6 @@ const validationLogLevelOpts = rawValidationLogLevelOpts.filter(
)
const { validationItemTypeOpts, isSchemaRegistry } = useValidationItemType()
const delTopic = (index: number) => {
if (Array.isArray(formData.value.topics)) {
formData.value.topics.splice(index, 1)
} else {
throw new Error('topics is not an array')
}
}
const addTopic = () => {
if (Array.isArray(formData.value.topics)) {
formData.value.topics.push('')
} else {
throw new Error('topics is not an array')
}
}
const addValidationItem = () => {
formData.value.checks.push({
type: validationItemTypeOpts[0].value,
Expand Down Expand Up @@ -421,31 +395,6 @@ defineExpose({

<style lang="scss">
.message-validation-form {
.topic-list {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
}
.topic-item {
margin-bottom: 12px;
.el-form-item {
width: 100%;
}
.el-form-item__content {
position: relative;
}
.el-button {
margin-left: 12px;
}
}
.btn-container {
position: absolute;
top: 0;
right: -12px;
transform: translateX(100%);
}
.column-type.el-table__cell {
vertical-align: top;
}
Expand Down

0 comments on commit 0ad364a

Please sign in to comment.