updated connector form dialog
Davide Di Modica committed
Aug 8, 2023 at 16:53 UTC
9637b14da1d27a9e3b05e80732142048c38c368c
5 files changed
+280
-5
src/components/connectors/ConfigForm/ConfigForm.vue
+26
-5
@@ -20,20 +20,43 @@
20
</el-image>
21
<div class="connector-name">{{ connector.connector_name || "" }}</div>
22
</div>
23
+
24
+ <div class="connector-form-type">
25
+ <CredentialsType :form="connectorForm" v-if="connectorFormType === ConnectorFormType.CREDENTIALS" />
26
+ <FileType :form="connectorForm" v-if="connectorFormType === ConnectorFormType.FILE" />
27
+ <TokenType :form="connectorForm" v-if="connectorFormType === ConnectorFormType.TOKEN" />
28
+ </div>
29
+
30
+ <div class="connector-footer">
31
+ <el-form-item>
32
+ <el-button type="primary" @click="configureConnector">Save</el-button>
33
+ <el-button @click="closeDialogUserandPass">Cancel</el-button>
34
+ </el-form-item>
35
+ </div>
36
</div>
37
</template>
38
39
<script setup lang="ts">
27
-import { computed, toRefs } from "vue"
28
-import { Connector, ConnectorFormType } from "@/types/connectors.d"
40
+import { computed, ref, toRefs } from "vue"
41
+import { Connector, ConnectorForm, ConnectorFormType } from "@/types/connectors.d"
42
import { Picture as IconPicture } from "@element-plus/icons-vue"
43
+import CredentialsType from "./FormTypes/CredentialsType.vue"
44
+import FileType from "./FormTypes/FileType.vue"
45
+import TokenType from "./FormTypes/TokenType.vue"
46
47
const props = defineProps<{
48
connector: Connector
49
}>()
50
const { connector } = toRefs(props)
51
36
-const connectorFommType = computed<ConnectorFormType>(() => getConnectorFormType(connector.value))
52
+const connectorForm = ref<ConnectorForm>({
53
+ connector_url: "",
54
+ connector_username: "",
55
+ connector_password: "",
56
+ connector_api_key: "",
57
+ connector_file: ""
58
+})
59
+const connectorFormType = computed<ConnectorFormType>(() => getConnectorFormType(connector.value))
60
const isConnectorConfigured = computed<boolean>(() => connector.value.connector_configured)
61
62
function getConnectorFormType(connector: Connector): ConnectorFormType {
@@ -49,7 +72,6 @@ function getConnectorFormType(connector: Connector): ConnectorFormType {
72
return ConnectorFormType.UNKNOWN
73
}
74
52
-/*
75
function configureConnector(event) {
76
event.preventDefault()
77
const { connector_url, username, password, connector_api_key } = this.connectorForm
@@ -207,7 +229,6 @@ function updateConnector(event) {
229
})
230
}
231
}
210
-*/
232
</script>
233
234
<style lang="scss" scoped>
src/components/connectors/ConfigForm/FormTypes/CredentialsType.vue
new
+79
@@ -0,0 +1,79 @@
1
+<template>
2
+ <el-form :model="form" status-icon :rules="rules" label-width="120px" ref="formRef" label-position="top">
3
+ <el-form-item label="Connector URL" prop="connector_url">
4
+ <el-input v-model="form.connector_url" required type="url" />
5
+ </el-form-item>
6
+ <el-form-item label="Username" prop="connector_username">
7
+ <el-input v-model="form.connector_username" required type="text" />
8
+ </el-form-item>
9
+ <el-form-item label="Password" prop="connector_password">
10
+ <el-input v-model="form.connector_password" required type="password" />
11
+ </el-form-item>
12
+ </el-form>
13
+</template>
14
+
15
+<script setup lang="ts">
16
+import { FormInstance, FormRules } from "element-plus"
17
+import { reactive, ref, toRefs } from "vue"
18
+
19
+export interface ICredentialsForm {
20
+ connector_url: string
21
+ connector_username: string
22
+ connector_password: string
23
+}
24
+
25
+const props = defineProps<{
26
+ form: ICredentialsForm
27
+}>()
28
+const { form } = toRefs(props)
29
+
30
+const formRef = ref<FormInstance>()
31
+
32
+/*
33
+const checkAge = (rule: any, value: any, callback: any) => {
34
+ if (!value) {
35
+ return callback(new Error("Please input the age"))
36
+ }
37
+ setTimeout(() => {
38
+ if (!Number.isInteger(value)) {
39
+ callback(new Error("Please input digits"))
40
+ } else {
41
+ if (value < 18) {
42
+ callback(new Error("Age must be greater than 18"))
43
+ } else {
44
+ callback()
45
+ }
46
+ }
47
+ }, 1000)
48
+}
49
+
50
+const validatePass = (rule: any, value: any, callback: any) => {
51
+ if (value === "") {
52
+ callback(new Error("Please input the password"))
53
+ } else {
54
+ if (ruleForm.checkPass !== "") {
55
+ if (!formRef.value) return
56
+ formRef.value.validateField("checkPass", () => null)
57
+ }
58
+ callback()
59
+ }
60
+}
61
+const validatePass2 = (rule: any, value: any, callback: any) => {
62
+ if (value === "") {
63
+ callback(new Error("Please input the password again"))
64
+ } else if (value !== ruleForm.pass) {
65
+ callback(new Error("Two inputs don't match!"))
66
+ } else {
67
+ callback()
68
+ }
69
+}
70
+*/
71
+
72
+const rules = reactive<FormRules<typeof form>>({
73
+ connector_url: [{ trigger: "blur" }],
74
+ connector_username: [{ trigger: "blur" }],
75
+ connector_password: [{ trigger: "blur" }]
76
+})
77
+</script>
78
+
79
+<style lang="scss" scoped></style>
src/components/connectors/ConfigForm/FormTypes/FileType.vue
new
+93
@@ -0,0 +1,93 @@
1
+<template>
2
+ <el-form :model="form" status-icon :rules="rules" label-width="120px" ref="formRef" label-position="top">
3
+ <el-form-item label="Connector URL" prop="connector_url">
4
+ <el-input v-model="form.connector_url" required type="url" />
5
+ </el-form-item>
6
+ <el-form-item label="File" prop="file">
7
+ <el-upload class="upload-demo" drag :limit="1" :auto-upload="false" :on-exceed="handleExceed" ref="upload">
8
+ <el-icon class="el-icon--upload"><upload-filled /></el-icon>
9
+ <div class="el-upload__text">Drop file here or <em>click to upload</em></div>
10
+ <template #tip>
11
+ <div class="el-upload__tip text-red">limit 1 file, new file will cover the old file</div>
12
+ </template>
13
+ </el-upload>
14
+ </el-form-item>
15
+ </el-form>
16
+</template>
17
+
18
+<script setup lang="ts">
19
+import { FormInstance, FormRules } from "element-plus"
20
+import type { UploadInstance, UploadProps, UploadRawFile } from "element-plus"
21
+import { UploadFilled } from "@element-plus/icons-vue"
22
+import { reactive, ref, toRefs } from "vue"
23
+
24
+export interface IFileForm {
25
+ connector_url: string
26
+ connector_file: string
27
+}
28
+
29
+const props = defineProps<{
30
+ form: IFileForm
31
+}>()
32
+const { form } = toRefs(props)
33
+
34
+const formRef = ref<FormInstance>()
35
+
36
+const upload = ref<UploadInstance>()
37
+
38
+const handleExceed: UploadProps["onExceed"] = files => {
39
+ upload.value!.clearFiles()
40
+ const file = files[0] as UploadRawFile
41
+ upload.value!.handleStart(file)
42
+}
43
+
44
+const submitUpload = () => {
45
+ upload.value!.submit()
46
+}
47
+/*
48
+const checkAge = (rule: any, value: any, callback: any) => {
49
+ if (!value) {
50
+ return callback(new Error("Please input the age"))
51
+ }
52
+ setTimeout(() => {
53
+ if (!Number.isInteger(value)) {
54
+ callback(new Error("Please input digits"))
55
+ } else {
56
+ if (value < 18) {
57
+ callback(new Error("Age must be greater than 18"))
58
+ } else {
59
+ callback()
60
+ }
61
+ }
62
+ }, 1000)
63
+}
64
+
65
+const validatePass = (rule: any, value: any, callback: any) => {
66
+ if (value === "") {
67
+ callback(new Error("Please input the password"))
68
+ } else {
69
+ if (ruleForm.checkPass !== "") {
70
+ if (!formRef.value) return
71
+ formRef.value.validateField("checkPass", () => null)
72
+ }
73
+ callback()
74
+ }
75
+}
76
+const validatePass2 = (rule: any, value: any, callback: any) => {
77
+ if (value === "") {
78
+ callback(new Error("Please input the password again"))
79
+ } else if (value !== ruleForm.pass) {
80
+ callback(new Error("Two inputs don't match!"))
81
+ } else {
82
+ callback()
83
+ }
84
+}
85
+*/
86
+
87
+const rules = reactive<FormRules<typeof form>>({
88
+ connector_url: [{ trigger: "blur" }],
89
+ connector_file: [{ trigger: "blur" }]
90
+})
91
+</script>
92
+
93
+<style lang="scss" scoped></style>
src/components/connectors/ConfigForm/FormTypes/TokenType.vue
new
+74
@@ -0,0 +1,74 @@
1
+<template>
2
+ <el-form :model="form" status-icon :rules="rules" label-width="120px" ref="formRef" label-position="top">
3
+ <el-form-item label="Connector URL" prop="connector_url">
4
+ <el-input v-model="form.connector_url" required type="url" />
5
+ </el-form-item>
6
+ <el-form-item label="API Key" prop="connector_api_key">
7
+ <el-input v-model="form.connector_api_key" required type="text" />
8
+ </el-form-item>
9
+ </el-form>
10
+</template>
11
+
12
+<script setup lang="ts">
13
+import { FormInstance, FormRules } from "element-plus"
14
+import { reactive, ref, toRefs } from "vue"
15
+
16
+export interface ITokenForm {
17
+ connector_url: string
18
+ connector_api_key: string
19
+}
20
+
21
+const props = defineProps<{
22
+ form: ITokenForm
23
+}>()
24
+const { form } = toRefs(props)
25
+
26
+const formRef = ref<FormInstance>()
27
+
28
+/*
29
+const checkAge = (rule: any, value: any, callback: any) => {
30
+ if (!value) {
31
+ return callback(new Error("Please input the age"))
32
+ }
33
+ setTimeout(() => {
34
+ if (!Number.isInteger(value)) {
35
+ callback(new Error("Please input digits"))
36
+ } else {
37
+ if (value < 18) {
38
+ callback(new Error("Age must be greater than 18"))
39
+ } else {
40
+ callback()
41
+ }
42
+ }
43
+ }, 1000)
44
+}
45
+
46
+const validatePass = (rule: any, value: any, callback: any) => {
47
+ if (value === "") {
48
+ callback(new Error("Please input the password"))
49
+ } else {
50
+ if (ruleForm.checkPass !== "") {
51
+ if (!formRef.value) return
52
+ formRef.value.validateField("checkPass", () => null)
53
+ }
54
+ callback()
55
+ }
56
+}
57
+const validatePass2 = (rule: any, value: any, callback: any) => {
58
+ if (value === "") {
59
+ callback(new Error("Please input the password again"))
60
+ } else if (value !== ruleForm.pass) {
61
+ callback(new Error("Two inputs don't match!"))
62
+ } else {
63
+ callback()
64
+ }
65
+}
66
+*/
67
+
68
+const rules = reactive<FormRules<typeof form>>({
69
+ connector_url: [{ trigger: "blur" }],
70
+ connector_api_key: [{ trigger: "blur" }]
71
+})
72
+</script>
73
+
74
+<style lang="scss" scoped></style>
src/types/connectors.d.ts
+8
@@ -28,3 +28,11 @@ export enum ConnectorFormType {
28
CREDENTIALS = "credentials",
29
UNKNOWN = "unknown"
30
}
31
+
32
+export interface ConnectorForm {
33
+ connector_url: string
34
+ connector_username: string
35
+ connector_password: string
36
+ connector_api_key: string
37
+ connector_file: string
38
+}