From 1dba08717a3d474dc4e53256245928dc3f6f3526 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 28 Sep 2022 11:09:06 +0200
Subject: [PATCH] feat: function create variable

---
 .../functions/createVariable.svelte           | 22 ++++++---
 .../functions/wizard/step5.svelte             | 46 ++++++++++++++-----
 2 files changed, 51 insertions(+), 17 deletions(-)

diff --git a/src/routes/console/project-[project]/functions/createVariable.svelte b/src/routes/console/project-[project]/functions/createVariable.svelte
index e977eebca..88032d3b0 100644
--- a/src/routes/console/project-[project]/functions/createVariable.svelte
+++ b/src/routes/console/project-[project]/functions/createVariable.svelte
@@ -6,18 +6,28 @@
 
     export let showCreate = false;
 
-    export let key: string = null;
-    let value = $createFunction.vars[key];
+    export let selectedKey: string = null;
+    let key = selectedKey;
+    let value = $createFunction?.vars[key];
 
-    const create = async () => {
+    const create = () => {
+        if (selectedKey) {
+            delete Object.assign($createFunction.vars, {
+                [key]: $createFunction.vars[selectedKey]
+            })[selectedKey];
+            $createFunction.vars[key] = value;
+            selectedKey = null;
+        } else {
+            $createFunction.vars[key] = value;
+        }
         showCreate = false;
-        $createFunction.vars[key] = value;
     };
 </script>
 
 <Form on:submit={create}>
     <Modal bind:show={showCreate} size="big">
-        <svelte:fragment slot="header">Create Variable</svelte:fragment>
+        <svelte:fragment slot="header"
+            >{selectedKey ? 'Update' : 'Create'} Variable</svelte:fragment>
         <FormList>
             <InputText id="key" label="Key" placeholder="Enter key" bind:value={key} required />
             <InputPassword
@@ -31,7 +41,7 @@
         </FormList>
         <svelte:fragment slot="footer">
             <Button secondary on:click={() => (showCreate = false)}>Cancel</Button>
-            <Button submit>Create</Button>
+            <Button submit>{selectedKey ? 'Update' : 'Create'}</Button>
         </svelte:fragment>
     </Modal>
 </Form>
diff --git a/src/routes/console/project-[project]/functions/wizard/step5.svelte b/src/routes/console/project-[project]/functions/wizard/step5.svelte
index 21071a300..3033917a9 100644
--- a/src/routes/console/project-[project]/functions/wizard/step5.svelte
+++ b/src/routes/console/project-[project]/functions/wizard/step5.svelte
@@ -2,12 +2,13 @@
     import { WizardStep } from '$lib/layout';
     import { createFunction } from './store';
     import Create from '../createVariable.svelte';
-    import { DropList, DropListItem } from '$lib/components';
+    import { DropList, DropListItem, Copy } from '$lib/components';
 
     let showCreate = false;
 
     let selectedKey: string = null;
     let showDropdown = [];
+    let showValue = [];
 </script>
 
 <WizardStep>
@@ -36,14 +37,32 @@
                             <span class="text">{key}</span>
                         </td>
                         <td class="table-col u-overflow-visible" data-title="value">
-                            <div class="transparent-password-input">
-                                <button
-                                    on:click|preventDefault={() =>
-                                        (showDropdown[i] = !showDropdown[i])}
-                                    aria-label="show password">
-                                    <span class="icon-eye" aria-hidden="true" />
-                                </button>
-                                <input type="password" class="input-text" {value} />
+                            <div class="interactive-text-output">
+                                {#if showValue[i]}
+                                    <span class="text">{value}</span>
+                                {:else}
+                                    <span class="text">••••••••</span>
+                                {/if}
+                                <div class="u-flex u-cross-child-start u-gap-8">
+                                    <button
+                                        on:click|preventDefault={() =>
+                                            (showValue[i] = !showValue[i])}
+                                        class="interactive-text-output-button"
+                                        aria-label="show hidden text">
+                                        {#if showValue[i]}
+                                            <span class="icon-eye-off" aria-hidden="true" />
+                                        {:else}
+                                            <span class="icon-eye" aria-hidden="true" />
+                                        {/if}
+                                    </button>
+                                    <Copy {value}>
+                                        <button
+                                            class="interactive-text-output-button"
+                                            aria-label="copy text">
+                                            <span class="icon-duplicate" aria-hidden="true" />
+                                        </button>
+                                    </Copy>
+                                </div>
                             </div>
                         </td>
                         <td class="table-col u-overflow-visible" data-title="options">
@@ -55,7 +74,8 @@
                                 <button
                                     class="button is-text is-only-icon"
                                     aria-label="more options"
-                                    on:click|preventDefault={() => (showDropdown[i] = true)}>
+                                    on:click|preventDefault={() =>
+                                        (showDropdown[i] = !showDropdown[i])}>
                                     <span class="icon-dots-horizontal" aria-hidden="true" />
                                 </button>
                                 <svelte:fragment slot="list">
@@ -63,6 +83,7 @@
                                         icon="pencil"
                                         on:click={() => {
                                             selectedKey = key;
+                                            showDropdown[i] = false;
                                             showCreate = true;
                                         }}>
                                         Edit
@@ -71,6 +92,7 @@
                                         icon="trash"
                                         on:click={() => {
                                             delete $createFunction.vars[key];
+                                            showDropdown[i] = false;
                                         }}>
                                         Delete
                                     </DropListItem>
@@ -95,4 +117,6 @@
     </div>
 </WizardStep>
 
-<Create key={selectedKey} {showCreate} />
+{#if showCreate}
+    <Create bind:selectedKey bind:showCreate />
+{/if}