From ee4f72126ad2f3b96b83af4dea6234040d818b09 Mon Sep 17 00:00:00 2001 From: mike12345567 Date: Wed, 17 Aug 2022 10:46:17 +0100 Subject: [PATCH] Updating custom datasource SVG - splitting out in UI. --- .../_components/DatasourceCard.svelte | 73 +++++++++++++++++++ .../DatasourceNavigator/icons/Custom.svelte | 57 ++++++++------- .../modals/CreateDatasourceModal.svelte | 45 +++++------- 3 files changed, 122 insertions(+), 53 deletions(-) create mode 100644 packages/builder/src/components/backend/DatasourceNavigator/_components/DatasourceCard.svelte diff --git a/packages/builder/src/components/backend/DatasourceNavigator/_components/DatasourceCard.svelte b/packages/builder/src/components/backend/DatasourceNavigator/_components/DatasourceCard.svelte new file mode 100644 index 0000000000..2dac2fec79 --- /dev/null +++ b/packages/builder/src/components/backend/DatasourceNavigator/_components/DatasourceCard.svelte @@ -0,0 +1,73 @@ + + +
dispatcher("selected", integrationType)} + class="item hoverable" +> +
+ +
+ {schema.friendlyName} + {#if schema.type} + {schema.type || ""} + {/if} +
+
+
+ + diff --git a/packages/builder/src/components/backend/DatasourceNavigator/icons/Custom.svelte b/packages/builder/src/components/backend/DatasourceNavigator/icons/Custom.svelte index 354b7a3358..0d4b7219aa 100644 --- a/packages/builder/src/components/backend/DatasourceNavigator/icons/Custom.svelte +++ b/packages/builder/src/components/backend/DatasourceNavigator/icons/Custom.svelte @@ -1,8 +1,6 @@ - - - - - - + + + + + diff --git a/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte b/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte index 33953493f6..945cd574d8 100644 --- a/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte +++ b/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte @@ -18,6 +18,7 @@ import { createRestDatasource } from "builderStore/datasource" import { goto } from "@roxi/routify" import ImportRestQueriesModal from "./ImportRestQueriesModal.svelte" + import DatasourceCard from "../_components/DatasourceCard.svelte" export let modal let integrations = {} @@ -95,14 +96,6 @@ } integrations = newIntegrations } - - function getIcon(integrationType, schema) { - if (schema.custom) { - return ICONS.CUSTOM - } else { - return ICONS[integrationType] - } - } @@ -161,28 +154,24 @@ Connect to an external data source
- {#each Object.entries(integrations).filter(([key]) => key !== IntegrationTypes.INTERNAL) as [integrationType, schema]} -
selectIntegration(integrationType)} - class="item hoverable" - > -
- -
- {schema.friendlyName} - {#if schema.type} - {schema.type || ""} - {/if} -
-
-
+ {#each Object.entries(integrations).filter(([key, val]) => key !== IntegrationTypes.INTERNAL && !val.custom) as [integrationType, schema]} + selectIntegration(evt.detail)} + {schema} + bind:integrationType + {integration} + /> {/each}
+ Custom data source + {#each Object.entries(integrations).filter(entry => entry[1].custom) as [integrationType, schema]} + selectIntegration(evt.detail)} + {schema} + bind:integrationType + {integration} + /> + {/each}