From fa5209411b36dd7832e59ea95f49bdad476f1ff0 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 5 Aug 2022 15:56:21 +0200
Subject: [PATCH] feat: create & implement choice input

---
 src/lib/elements/forms/index.ts               |  1 +
 src/lib/elements/forms/inputChoice.svelte     | 31 +++++++++++++++++++
 .../[collection]/attributes/_boolean.svelte   | 19 +++++++++---
 .../[collection]/attributes/_email.svelte     | 10 +++---
 .../[collection]/attributes/_enum.svelte      | 15 ++++++---
 .../[collection]/attributes/_float.svelte     | 15 ++++++---
 .../[collection]/attributes/_integer.svelte   | 10 +++---
 .../[collection]/attributes/_ip.svelte        | 10 +++---
 .../[collection]/attributes/_string.svelte    | 10 +++---
 .../[collection]/attributes/_url.svelte       | 10 +++---
 .../[document]/attributes/_integer.svelte     |  3 +-
 11 files changed, 101 insertions(+), 33 deletions(-)
 create mode 100644 src/lib/elements/forms/inputChoice.svelte

diff --git a/src/lib/elements/forms/index.ts b/src/lib/elements/forms/index.ts
index 48988a2fe..559b59d69 100644
--- a/src/lib/elements/forms/index.ts
+++ b/src/lib/elements/forms/index.ts
@@ -16,4 +16,5 @@ export { default as InputRadio } from './inputRadio.svelte';
 export { default as InputSelect } from './inputSelect.svelte';
 export { default as InputCheckbox } from './inputCheckbox.svelte';
 export { default as InputPhone } from './inputPhone.svelte';
+export { default as InputChoice } from './inputChoice.svelte';
 export { default as Helper } from './helper.svelte';
diff --git a/src/lib/elements/forms/inputChoice.svelte b/src/lib/elements/forms/inputChoice.svelte
new file mode 100644
index 000000000..4f1a1319a
--- /dev/null
+++ b/src/lib/elements/forms/inputChoice.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+    import { FormItem } from '.';
+
+    export let type: 'checkbox' | 'switchbox' = 'checkbox';
+    export let label: string;
+    export let showLabel = true;
+    export let id: string;
+    export let value = false;
+    export let required = false;
+    export let disabled = false;
+    export let description = '';
+</script>
+
+<FormItem>
+    <label class="choice-item" for={id}>
+        <input
+            {id}
+            {disabled}
+            {required}
+            type="checkbox"
+            class:switch={type === 'switchbox'}
+            bind:checked={value} />
+
+        <div class="choice-item-content">
+            <div class:u-hide={!showLabel} class="choice-item-title">{label}</div>
+            {#if $$slots}
+                <p class="choice-item-paragraph"><slot /></p>
+            {/if}
+        </div>
+    </label>
+</FormItem>
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_boolean.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_boolean.svelte
index 13124ee14..5d4d3942d 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_boolean.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_boolean.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { InputSwitch } from '$lib/elements/forms';
+    import { InputChoice, InputSelect } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForProject } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
@@ -46,6 +46,17 @@
     }
 </script>
 
-<InputSwitch id="required" label="Required" bind:value={required} disabled={overview} />
-<InputSwitch id="array" label="Array" bind:value={array} disabled={overview} />
-<InputSwitch id="default" label="Default" bind:value={xdefault} disabled={overview} />
+<InputSelect
+    id="default"
+    label="Default value"
+    placeholder="Select a value"
+    options={[
+        { label: 'True', value: true },
+        { label: 'False', value: false }
+    ]}
+    bind:value={xdefault}
+    disabled={overview} />
+<InputChoice id="required" label="Required" bind:value={required} disabled={overview}>
+    Indicate whether this is a required attribute</InputChoice>
+<InputChoice id="array" label="Array" bind:value={array} disabled={overview}>
+    Indicate whether this attribute should act as an array</InputChoice>
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_email.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_email.svelte
index 216798a7c..d578ad045 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_email.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_email.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { InputText, InputSwitch } from '$lib/elements/forms';
+    import { InputText, InputChoice } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForProject } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
@@ -45,6 +45,8 @@
     }
 </script>
 
-<InputSwitch id="required" label="Required" bind:value={required} disabled={overview} />
-<InputSwitch id="required" label="Array" bind:value={array} disabled={overview} />
-<InputText id="default" label="Default" bind:value={xdefault} readonly={overview} />
+<InputText id="default" label="Default value" bind:value={xdefault} readonly={overview} />
+<InputChoice id="required" label="Required" bind:value={required} disabled={overview}>
+    Indicate whether this is a required attribute</InputChoice>
+<InputChoice id="array" label="Array" bind:value={array} disabled={overview}>
+    Indicate whether this attribute should act as an array</InputChoice>
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_enum.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_enum.svelte
index 9f589ef8a..72ec2e062 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_enum.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_enum.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { InputSwitch, InputSelect, InputTags } from '$lib/elements/forms';
+    import { InputChoice, InputSelect, InputTags } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForProject } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
@@ -57,6 +57,13 @@
     bind:tags={elements}
     placeholder="Add elements here"
     readonly={overview} />
-<InputSelect id="default" label="Default" bind:options bind:value={xdefault} disabled={overview} />
-<InputSwitch id="required" label="Required" bind:value={required} disabled={overview} />
-<InputSwitch id="required" label="Array" bind:value={array} disabled={overview} />
+<InputSelect
+    id="default"
+    label="Default value"
+    bind:options
+    bind:value={xdefault}
+    disabled={overview} />
+<InputChoice id="required" label="Required" bind:value={required} disabled={overview}>
+    Indicate whether this is a required attribute</InputChoice>
+<InputChoice id="array" label="Array" bind:value={array} disabled={overview}>
+    Indicate whether this attribute should act as an array</InputChoice>
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_float.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_float.svelte
index 0f7e31b30..d8324028d 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_float.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_float.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { InputNumber, InputSwitch } from '$lib/elements/forms';
+    import { InputNumber, InputChoice } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForProject } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
@@ -52,6 +52,13 @@
 <InputNumber id="min" label="Min" bind:value={min} readonly={overview} />
 <InputNumber id="max" label="Max" bind:value={max} readonly={overview} />
 
-<InputSwitch id="required" label="Required" bind:value={required} disabled={overview} />
-<InputSwitch id="array" label="Array" bind:value={array} disabled={overview} />
-<InputNumber id="default" label="Default" bind:value={xdefault} readonly={overview} />
+<InputNumber
+    id="default"
+    label="Default value"
+    bind:value={xdefault}
+    readonly={overview}
+    step="any" />
+<InputChoice id="required" label="Required" bind:value={required} disabled={overview}>
+    Indicate whether this is a required attribute</InputChoice>
+<InputChoice id="array" label="Array" bind:value={array} disabled={overview}>
+    Indicate whether this attribute should act as an array</InputChoice>
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_integer.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_integer.svelte
index cf3b310d7..d75b9978b 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_integer.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_integer.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { InputNumber, InputSwitch } from '$lib/elements/forms';
+    import { InputNumber, InputChoice } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForProject } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
@@ -52,6 +52,8 @@
 <InputNumber id="min" label="Min" bind:value={min} readonly={overview} />
 <InputNumber id="max" label="Max" bind:value={max} readonly={overview} />
 
-<InputSwitch id="required" label="Required" bind:value={required} disabled={overview} />
-<InputSwitch id="array" label="Array" bind:value={array} disabled={overview} />
-<InputNumber id="default" label="Default" bind:value={xdefault} readonly={overview} />
+<InputNumber id="default" label="Default value" bind:value={xdefault} readonly={overview} />
+<InputChoice id="required" label="Required" bind:value={required} disabled={overview}>
+    Indicate whether this is a required attribute</InputChoice>
+<InputChoice id="array" label="Array" bind:value={array} disabled={overview}>
+    Indicate whether this attribute should act as an array</InputChoice>
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_ip.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_ip.svelte
index 4f31e6e9a..5820ff44a 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_ip.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_ip.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { InputText, InputSwitch } from '$lib/elements/forms';
+    import { InputText, InputChoice } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForProject } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
@@ -44,6 +44,8 @@
     }
 </script>
 
-<InputSwitch id="required" label="Required" bind:value={required} disabled={overview} />
-<InputSwitch id="required" label="Array" bind:value={array} disabled={overview} />
-<InputText id="default" label="Default" bind:value={xdefault} readonly={overview} />
+<InputText id="default" label="Default value" bind:value={xdefault} readonly={overview} />
+<InputChoice id="required" label="Required" bind:value={required} disabled={overview}>
+    Indicate whether this is a required attribute</InputChoice>
+<InputChoice id="array" label="Array" bind:value={array} disabled={overview}>
+    Indicate whether this attribute should act as an array</InputChoice>
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_string.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_string.svelte
index 28a81fd3a..fd7e4c57d 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_string.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_string.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { InputNumber, InputText, InputSwitch } from '$lib/elements/forms';
+    import { InputNumber, InputText, InputChoice } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForProject } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
@@ -47,6 +47,8 @@
 </script>
 
 <InputNumber id="size" label="Size" bind:value={size} required readonly={overview} />
-<InputSwitch id="required" label="Required" bind:value={required} disabled={overview} />
-<InputSwitch id="required" label="Array" bind:value={array} disabled={overview} />
-<InputText id="default" label="Default" bind:value={xdefault} readonly={overview} />
+<InputText id="default" label="Default value" bind:value={xdefault} readonly={overview} />
+<InputChoice id="required" label="Required" bind:value={required} disabled={overview}>
+    Indicate whether this is a required attribute</InputChoice>
+<InputChoice id="array" label="Array" bind:value={array} disabled={overview}>
+    Indicate whether this attribute should act as an array</InputChoice>
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_url.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_url.svelte
index f172de05d..90fc386e6 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_url.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_url.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { InputText, InputSwitch } from '$lib/elements/forms';
+    import { InputText, InputChoice } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForProject } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
@@ -44,6 +44,8 @@
     }
 </script>
 
-<InputSwitch id="required" label="Required" bind:value={required} disabled={overview} />
-<InputSwitch id="required" label="Array" bind:value={array} disabled={overview} />
-<InputText id="default" label="Default" bind:value={xdefault} readonly={overview} />
+<InputText id="default" label="Default value" bind:value={xdefault} readonly={overview} />
+<InputChoice id="required" label="Required" bind:value={required} disabled={overview}>
+    Indicate whether this is a required attribute</InputChoice>
+<InputChoice id="array" label="Array" bind:value={array} disabled={overview}>
+    Indicate whether this attribute should act as an array</InputChoice>
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/attributes/_integer.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/attributes/_integer.svelte
index 1bab668ea..505f0a3bb 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/attributes/_integer.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/attributes/_integer.svelte
@@ -14,4 +14,5 @@
     required={attribute.required}
     minlength={attribute.min}
     maxlength={attribute.max}
-    bind:value />
+    bind:value
+    step={attribute.type === 'double' ? 'any' : 1} />