Merge pull request #86 from theotheo/master

Select/Multiselect improvement
danielo515 · Oct 21, 2023 · b2ea912 · b2ea912
2 parents 195ade1 + b955726
commit b2ea912
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 75 deletions.
diff --git a/src/views/FormBuilder.svelte b/src/views/FormBuilder.svelte
@@ -230,80 +230,18 @@
                                 bind:options={field.input.options}
                                 bind:folder={field.input.folder}
                                 notifyChange={onChange}
+                                is_multi={false}
                             />
                         {:else if field.input.type === "multiselect"}
-                            {@const source_id = `source_${index}`}
-                            <div class="flex column gap1">
-                                <label for={source_id}>Source</label>
-                                <select
-                                    bind:value={field.input.source}
-                                    id={source_id}
-                                >
-                                    <option value="fixed">Static</option>
-                                    <option value="notes">Notes</option>
-                                </select>
-                            </div>
-                            {#if field.input.source === "fixed"}
-                                {@const options_id = `options_btn_${index}`}
-                                <FormRow label="Options" id={options_id}>
-                                    <button
-                                        type="button"
-                                        on:click={() => {
-                                            field.input.multi_select_options =
-                                                field.input
-                                                    .multi_select_options || [];
-                                            field.input.multi_select_options = [
-                                                ...field.input
-                                                    .multi_select_options,
-                                                "",
-                                            ];
-                                            onChange();
-                                        }}>Add more options</button
-                                    >
-                                    {#each field.input.multi_select_options || [] as option, idx}
-                                        {@const value_id = `${options_id}_option_${idx}`}
-                                        <div class="flex row gap1">
-                                            <FormRow
-                                                label="Value"
-                                                id={value_id}
-                                            >
-                                                <input
-                                                    type="text"
-                                                    placeholder="Value"
-                                                    bind:value={option}
-                                                    id={value_id}
-                                                /></FormRow
-                                            >
-
-                                            <FormRow
-                                                label="Delete"
-                                                id={"button" + value_id}
-                                                hideLabel={true}
-                                            >
-                                                <button
-                                                    id={"button" + value_id}
-                                                    use:setIcon={"trash"}
-                                                    type="button"
-                                                    on:click={() => {
-                                                        field.input.options =
-                                                            field.input.options?.filter(
-                                                                (_, i) =>
-                                                                    i !== idx
-                                                            );
-                                                        onChange();
-                                                    }}
-                                                /></FormRow
-                                            >
-                                        </div>
-                                    {/each}
-                                </FormRow>
-                            {:else if field.input.source === "notes"}
-                                <InputFolder
-                                    {index}
-                                    bind:folder={field.input.folder}
-                                    notifyChange={onChange}
-                                />
-                            {/if}
+                            <InputBuilderSelect
+                                {index}
+                                bind:source={field.input.source}
+                                bind:options={field.input.multi_select_options}
+                                bind:folder={field.input.folder}
+                                notifyChange={onChange}
+                                is_multi={true}
+                            />
+
                         {:else if field.input.type === "slider"}
                             {@const min_id = `min_${index}`}
                             {@const max_id = `max_${index}`}

diff --git a/src/views/components/InputBuilderSelect.svelte b/src/views/components/InputBuilderSelect.svelte
@@ -14,8 +14,19 @@
     export let folder: string | undefined;
     export let options: EditableInput["options"] = [];
     export let notifyChange: () => void;
+    export let is_multi: boolean;
     $: id = `builder_select_${index}`;
     $: options_id = `builder_select_options_btn_${index}`;
+
+    function moveOption(from: number, direction: "up" | "down") {
+        const to = direction === "up" ? from - 1 : from + 1;
+        if (to < 0 || to >= options.length) return;
+        const tmp = options[from]
+        options[from] = options[to]
+        options[to] = tmp;
+        options = options;
+        notifyChange();
+    }
 </script>
 
 <FormRow label="Source" {id}>
@@ -29,15 +40,53 @@
         <button
             type="button"
             on:click={() => {
-                options?.push({ value: "", label: "" });
+                if (is_multi) { 
+                    options?.push("");
+                } else {
+                    options?.push({ value: "", label: "" });
+                }
                 options = options;
                 notifyChange();
             }}>Add more options</button
         >
         {#each options || [] as option, idx}
             {@const value_id = `${options_id}_option_${idx}`}
-            {@const label_id = `${options_id}_option_label_${idx}`}
             <div class="modal-form flex row gap1">
+                <FormRow
+                    label="Button"
+                    id={"button-up" + value_id}
+                    hideLabel={true}
+                >
+                    <button
+                        type="button"
+                        disabled={idx === 0}
+                        use:setIcon={"arrow-up"}
+                        on:click={() => moveOption(idx, "up")}
+                    /></FormRow
+                >
+                <FormRow
+                    label="Button"
+                    id={"button-down" + value_id}
+                    hideLabel={true}
+                >
+                    <button
+                        type="button"
+                        disabled={idx === options?.length - 1}
+                        use:setIcon={"arrow-down"}
+                        on:click={() => moveOption(idx, "down")}
+                    /></FormRow
+                >
+                {#if is_multi }
+                <FormRow label="Value" id={value_id}>
+                    <input
+                        type="text"
+                        placeholder="Value"
+                        bind:value={option}
+                        id={value_id}
+                    /></FormRow
+                >
+                {:else}
+                {@const label_id = `${options_id}_option_label_${idx}`}
                 <FormRow label="Label" id={label_id}>
                     <input
                         type="text"
@@ -53,7 +102,8 @@
                         id={value_id}
                     /></FormRow
                 >
-
+
+                {/if}
                 <FormRow
                     label="Delete"
                     id={"button" + value_id}
@@ -77,4 +127,8 @@
 {/if}
 
 <style>
+    button:disabled {
+    opacity: 0.5;
+    cursor: forbidden;
+}
 </style>