updated connector form dialog
Davide Di Modica committed
Aug 8, 2023 at 16:04 UTC
c15d834c4ac8d09f4a0c5c6777d87a77759b71fe
2 files changed
+78
-3
src/components/connectors/ConfigForm/ConfigForm.vue
+71
-3
@@ -1,14 +1,54 @@
1
-<template>generic form</template>
1
+<template>
2
+ <div class="connector-form">
3
+ <div class="connector-header">
4
+ <el-image
5
+ class="connector-image"
6
+ fit="contain"
7
+ :src="`/src/assets/images/${connector ? connector.connector_name.toLowerCase() + '.svg' : 'default-logo.svg'}`"
8
+ :alt="`${connector.connector_name} Logo`"
9
+ >
10
+ <template #placeholder>
11
+ <div class="image-slot">
12
+ <el-icon><icon-picture /></el-icon>
13
+ </div>
14
+ </template>
15
+ <template #error>
16
+ <div class="image-slot">
17
+ <el-icon><icon-picture /></el-icon>
18
+ </div>
19
+ </template>
20
+ </el-image>
21
+ <div class="connector-name">{{ connector.connector_name || "" }}</div>
22
+ </div>
23
+ </div>
24
+</template>
25
26
<script setup lang="ts">
4
-import { toRefs } from "vue"
5
-import { Connector } from "@/types/connectors.d"
27
+import { computed, toRefs } from "vue"
28
+import { Connector, ConnectorFormType } from "@/types/connectors.d"
29
+import { Picture as IconPicture } from "@element-plus/icons-vue"
30
31
const props = defineProps<{
32
connector: Connector
33
}>()
34
const { connector } = toRefs(props)
35
36
+const connectorFommType = computed<ConnectorFormType>(() => getConnectorFormType(connector.value))
37
+const isConnectorConfigured = computed<boolean>(() => connector.value.connector_configured)
38
+
39
+function getConnectorFormType(connector: Connector): ConnectorFormType {
40
+ if (connector.connector_accepts_api_key) {
41
+ return ConnectorFormType.TOKEN
42
+ }
43
+ if (connector.connector_accepts_file) {
44
+ return ConnectorFormType.FILE
45
+ }
46
+ if (connector.connector_accepts_username_password) {
47
+ return ConnectorFormType.CREDENTIALS
48
+ }
49
+ return ConnectorFormType.UNKNOWN
50
+}
51
+
52
/*
53
function configureConnector(event) {
54
event.preventDefault()
@@ -169,3 +209,31 @@ function updateConnector(event) {
209
}
210
*/
211
</script>
212
+
213
+<style lang="scss" scoped>
214
+.connector-form {
215
+ .connector-header {
216
+ display: flex;
217
+ align-items: center;
218
+ gap: var(--size-4);
219
+ .connector-image {
220
+ width: var(--size-8);
221
+ height: var(--size-8);
222
+ border: var(--border-size-1) solid var(--gray-1);
223
+ border-radius: var(--radius-round);
224
+
225
+ .image-slot {
226
+ display: flex;
227
+ align-items: center;
228
+ justify-content: center;
229
+ width: 100%;
230
+ height: 100%;
231
+ }
232
+ }
233
+ .connector-name {
234
+ font-size: var(--font-size-4);
235
+ font-weight: bold;
236
+ }
237
+ }
238
+}
239
+</style>
src/types/connectors.d.ts
+7
@@ -21,3 +21,10 @@ export interface Connector {
21
roles?: null
22
response?: null
23
}
24
+
25
+export enum ConnectorFormType {
26
+ TOKEN = "token",
27
+ FILE = "file",
28
+ CREDENTIALS = "credentials",
29
+ UNKNOWN = "unknown"
30
+}