Skip to content

Commit

Permalink
poc1
Browse files Browse the repository at this point in the history
  • Loading branch information
@dlaxcess
dlaxcess committed Jan 29, 2024
1 parent 62d8c43 commit 54c53b4
Show file tree
Hide file tree
Showing 3 changed files with 49 additions and 147 deletions.
8 changes: 3 additions & 5 deletions svelte/components/Input/Config/Config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ export default class Config {
editable: false,
fieldsType: "list",
fields: [
{ key: "Name", value: "", undeletable: true },
{ key: "Firstname", value: "", fixed: "true" }
{ key: "Name", value: "", fixed: "true", undeletable: true },
{ key: "Firstname", value: "", fixed: "true", undeletable: true }
]
},
storage: {
Expand All @@ -36,9 +36,7 @@ export default class Config {
display: "Options",
editable: true,
fieldsType: "list",
fields: [
{ key: "", value: "" }
]
fields: []
}
};
}
Expand Down
23 changes: 23 additions & 0 deletions svelte/components/Input/Config/ConfigField.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
<script lang="ts">
export let attributes;
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);
Expand Down Expand Up @@ -35,6 +39,12 @@
{/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}
{:else if attribute.fieldsType === "choice"}
<p>Choice</p>
{/if}
Expand Down Expand Up @@ -64,4 +74,17 @@
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>
165 changes: 23 additions & 142 deletions svelte/components/Input/Config/InputConfigFields.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,7 @@
// <InputConfigFields />
// Set User config
/////////////////////////////////////////////////
// let userConfig: Properties;
// let userConfig: { display: "infos"; fields: { key: { value: ""; type: ""; fixedKey: false } } };
// let userConfig: { namespace: {fields: [{ key: "" , value: ""}]} };
let userConfig;
let config;
Expand All @@ -19,9 +18,6 @@
const krdNamespace = "kredeum";
onMount(() => {
if (typeof localStorage !== "undefined") {
console.log("localStorage : ", localStorage);
}
config = new Config();
attributes = config.getConfig();
Expand All @@ -39,6 +35,8 @@
const localConfigSet = (namespace: string, key: string, value: string): void =>
localStorage?.setItem(`${krdNamespace}.${namespace}.${key}`, value);
const localConfigRemove = (namespaceKey: string) => localStorage?.removeItem(`${krdNamespace}.${namespaceKey}`);
const localConfigGetKey = (key) => key.replace(`${krdNamespace}.`, "");
const localConfigInit = (): void => {
Expand All @@ -55,7 +53,6 @@
}, []);
console.log("kredeumKeys:", kredeumNamespaceKeys);
// const kredeumEntries = kredeumKeys.reduce((attributes, key) => {
kredeumNamespaceKeys.forEach((namespaceKey) => {
const locaLamespace = namespaceKey.split(".")[0];
const key = namespaceKey.split(".")[1];
Expand All @@ -74,35 +71,14 @@
}
}
}
if()
// attributes.forEach((attr) => {
// if (attr.fields) {
// if (attr.key === key) {
// attr.value = localStorage.getItem(key);
// }
// }
// });
// console.log(
// "kredeumEntries ~ attributes.some((attr) => attr.key !== keyField):",
// attributes.some((attr) => attr.key !== keyField),
// " : ",
// key,
// keyField
// );
// if (!attributes.some((attr) => attr.key === keyField)) {
// attributes = [...attributes, { key: keyField, value: localStorage.getItem(key) }];
// }
// console.log("attributes.forEach ~ attributes:", attributes);
// return attributes;
});
// attributes = kredeumEntries;
for (const namespace of Object.keys(attributes)) {
if (attributes[namespace].editable && attributes[namespace].fields.length == 0) {
attributes[namespace].fields.push({ key: "", value: "" });
}
}
// console.log("localConfigInit ~ kredeumKeys:", kredeumKeys);
// console.log("kredeumEntries ~ kredeumEntries:", kredeumEntries);
};
/////////////////////////
Expand All @@ -115,12 +91,21 @@
}
}
// if (typeof localStorage !== "undefined") {
// for (const attribute of attributes) {
// console.log("saveConfig ~ key:", attribute.key, attribute.value);
// localConfigSet(attribute.key, attribute.value);
// }
// }
const kredeumNamespaceKeys = Object.keys(localStorage)
.filter((key) => key.startsWith(`${krdNamespace}.`))
.reduce((allKeys, key) => {
return [...allKeys, localConfigGetKey(key)];
}, []);
kredeumNamespaceKeys.forEach((namespaceKey) => {
const namespace = namespaceKey.split(".")[0];
const key = namespaceKey.split(".")[1];
if (!attributes[namespace].fields.some((field) => field.key === key)) {
localConfigRemove(namespaceKey);
}
});
};
$: attributes && handleProperties();
Expand All @@ -132,41 +117,12 @@
if (attribute.fields) {
userConfig[namespace] = {};
attribute.fields.forEach((field) => {
// fields = [...fields, { [namespace]: { [field.key]: field.value } }];
if (field.key !== "" && field.value !== "") userConfig[namespace][field.key] = field.value;
});
}
});
console.log("userConfig:", userConfig);
// const fields = Object.entries(attributes).reduce((allAttr, attr) => {
// console.log("fields ~ attr:", attr)
// console.log("fields ~ allAttr:", allAttr);
// console.log("fields ~ attr:", attr)
// console.log("fields ~ attr:", attr.fields);
// if (attr.fields) {
// return [...allAttr, ...attr.fields];
// } else {
// return allAttr;
// }
// }, []);
// console.log("fields ~ fields:", fields);
// userConfig = fields
// .filter((fieldEntry) => fieldEntry.key !== "" && fieldEntry.value !== "")
// .reduce((allFields, field) => {
// return {
// ...allFields,
// [field.key]: field.value
// };
// }, {});
// console.log("userConfig:", userConfig);
};
const addField = (): void => {
attributes = [...attributes, { key: "", value: "" }];
};
$: console.log("attributes:", attributes);
Expand All @@ -175,84 +131,9 @@
<div class="section">
{#if attributes}
<ConfigField bind:attributes />
<!-- {#each attributes as attribute, i}
{#if attribute.display}
<div class="titre">{attribute.display}</div>
{/if}
{#if attribute.fieldsType === "list"}
<div class="kre-section-small">
{#each attribute.fields as groupField}
{#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}
/>
<button
value="Remove"
class="kre-delete-file {attributes.length < 2 ? 'disabled' : ''}"
on:click={() => removeField(i)}
>
<i class="fa fa-trash" aria-hidden="true" />
</button>
{/each}
</div>
{:else if attribute.fieldsType === "choice"}
<p>Choice</p>
{/if}
{/each} -->
{/if}

<button class="kre-button-grey" on:click|preventDefault={addField}
><i class="fa fa-plus fa-left" aria-hidden="true" />Add</button
>

<div class="txtright">
<button class="btn btn-default btn-sell" on:click|preventDefault={saveConfig}>Save</button>
</div>
</div>

<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 54c53b4

Please sign in to comment.