Skip to content

Commit

Permalink
choice display && list save bug
Browse files Browse the repository at this point in the history
  • Loading branch information
@dlaxcess
dlaxcess committed Jan 29, 2024
1 parent 54c53b4 commit ea9922f
Show file tree
Hide file tree
Showing 3 changed files with 135 additions and 84 deletions.
24 changes: 11 additions & 13 deletions svelte/components/Input/Config/Config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,19 +17,17 @@ export default class Config {
editable: false,
fieldsType: "choice",
default: { display: "Active storage", value: "ipfs" },
choices: {
ipfs: {
fields: [
{ key: "apiEndPoint", value: "", fixed: true },
{ key: "apiKey", value: "", fixed: true }
]
},
swarm: {
fields: [
{ key: "apiEndPoint", value: "", fixed: true },
{ key: "apiKey", value: "", fixed: true }
]
}
ipfs: {
fields: [
{ key: "apiEndPoint", value: "", fixed: true, undeletable: true },
{ key: "apiKey", value: "", fixed: true, undeletable: true }
]
},
swarm: {
fields: [
{ key: "apiEndPoint", value: "", fixed: true, undeletable: true },
{ key: "apiKey", value: "", fixed: true, undeletable: true }
]
}
},
options: {
Expand Down
110 changes: 39 additions & 71 deletions svelte/components/Input/Config/ConfigField.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,90 +1,58 @@
<script lang="ts">
import { clickOutside } from "@helpers/clickOutside";
import ConfigFieldsLoop from "./ConfigFieldsLoop.svelte";
export let attributes;
const addField = (namespace): void => {
attributes[namespace].fields = [...attributes[namespace].fields, { key: "", value: "" }];
};
// /////////////////////
let open = false;
const handleToggleOpen = () => (open = !open);
// /////////////////////
const removeField = (namespace: string, i: number): void => {
if (attributes[namespace].fields.length > 1) {
attributes[namespace].fields = attributes[namespace].fields.filter((_, index) => i !== index);
} else {
attributes[namespace].fields[i] = { key: "", value: "" };
}
};
console.log(attributes.storage[attributes.storage.default.value].fields);
</script>

{#each Object.entries(attributes) as [namespace, attribute]}
{#if attribute.display}
<div class="titre">{attribute.display}</div>
{/if}
{#if attribute.fieldsType === "list"}
{#each attribute.fields as groupField, i}
<div class="kre-section-small">
{#if groupField.fixed}
<span>{groupField.key}</span>
{:else}
<input type="text" class="kre-field-outline" placeholder={groupField.key} bind:value={groupField.key} />
{/if}
<input type="text" class="kre-field-outline" placeholder={groupField.value} bind:value={groupField.value} />
<ConfigFieldsLoop bind:attributes {attribute} bind:fields={attribute.fields} {namespace} />
{:else if attribute.fieldsType === "choice"}
<div
class="select-wrapper select-network"
use:clickOutside={() => (open = false)}
on:click={handleToggleOpen}
on:keydown={handleToggleOpen}
>
<div class="select" class:open>
<div class="select-trigger">
<span>{attribute.default.value}</span>
</div>

<div class="custom-options">
<span
class="custom-option {'ipfs' == attribute.default.value && 'selected'}"
on:click={() => (attribute.default.value = "ipfs")}
on:keydown={() => (attribute.default.value = "ipfs")}
>
IPFS
</span>

{#if !groupField.undeletable}
<button
value="Remove"
class="kre-delete-file {attributes.length < 2 ? 'disabled' : ''}"
on:click={() => removeField(namespace, i)}
<span
class="custom-option {'swarm' == attribute.default.value && 'selected'}"
on:click={() => (attribute.default.value = "swarm")}
on:keydown={() => (attribute.default.value = "swarm")}
>
<i class="fa fa-trash" aria-hidden="true" />
</button>
{/if}
Swarm
</span>
</div>
</div>
{/each}

{#if attribute.editable}
<button class="kre-button-grey" on:click|preventDefault={() => addField(namespace)}
><i class="fa fa-plus fa-left" aria-hidden="true" />Add</button
>
{/if}
{:else if attribute.fieldsType === "choice"}
<p>Choice</p>
</div>
<ConfigFieldsLoop bind:attributes {attribute} bind:fields={attribute[attribute.default.value].fields} {namespace} />
{/if}
{/each}

<style>
.kre-section-small {
display: flex;
gap: 5px;
align-items: center;
}
.kre-delete-file {
background-color: #192146;
border-radius: 50%;
width: 35px;
height: 35px;
display: flex;
cursor: pointer;
}
.kre-delete-file.disabled {
opacity: 0.5;
}
.kre-delete-file i {
color: white;
margin: auto;
}
.kre-button-grey {
border: 2px solid #9a9aa4;
color: #9a9aa4;
border-radius: 360px;
cursor: pointer;
display: inline-block;
font-size: 15px;
padding: 15px 25px;
transition: all 0.3s ease-in-out;
vertical-align: middle;
background-color: white;
}
</style>
85 changes: 85 additions & 0 deletions svelte/components/Input/Config/ConfigFieldsLoop.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
<script lang="ts">
export let attributes;
export let attribute;
export let fields;
export let namespace;
const addField = (namespace): void => {
attributes[namespace].fields = [...attributes[namespace].fields, { key: "", value: "" }];
};
const removeField = (namespace: string, i: number): void => {
if (attributes[namespace].fields.length > 1) {
attributes[namespace].fields = attributes[namespace].fields.filter((_, index) => i !== index);
} else {
attributes[namespace].fields[i] = { key: "", value: "" };
}
};
</script>

{#each fields as groupField, i}
<div class="kre-section-small">
{#if groupField.fixed}
<span>{groupField.key}</span>
{:else}
<input type="text" class="kre-field-outline" placeholder={groupField.key} bind:value={groupField.key} />
{/if}
<input type="text" class="kre-field-outline" placeholder={groupField.value} bind:value={groupField.value} />

{#if !groupField.undeletable}
<button
value="Remove"
class="kre-delete-file {attributes.length < 2 ? 'disabled' : ''}"
on:click={() => removeField(namespace, i)}
>
<i class="fa fa-trash" aria-hidden="true" />
</button>
{/if}
</div>
{/each}

{#if attribute.editable}
<button class="kre-button-grey" on:click|preventDefault={() => addField(namespace)}
><i class="fa fa-plus fa-left" aria-hidden="true" />Add</button
>
{/if}

<style>
.kre-section-small {
display: flex;
gap: 5px;
align-items: center;
}
.kre-delete-file {
background-color: #192146;
border-radius: 50%;
width: 35px;
height: 35px;
display: flex;
cursor: pointer;
}
.kre-delete-file.disabled {
opacity: 0.5;
}
.kre-delete-file i {
color: white;
margin: auto;
}
.kre-button-grey {
border: 2px solid #9a9aa4;
color: #9a9aa4;
border-radius: 360px;
cursor: pointer;
display: inline-block;
font-size: 15px;
padding: 15px 25px;
transition: all 0.3s ease-in-out;
vertical-align: middle;
background-color: white;
}
</style>

0 comments on commit ea9922f

Please sign in to comment.