Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Select/Multiselect improvement #86

Merged
merged 2 commits into from
Oct 21, 2023
+67 −75
Merged

Select/Multiselect improvement #86

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b1087e9
refactor: reducing duplication in select/multiselect
theotheo Oct 20, 2023
b955726
feat: ability to order select options (#64)
theotheo Oct 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
82 changes: 10 additions & 72 deletions src/views/FormBuilder.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}`}
Expand Down
60 changes: 57 additions & 3 deletions src/views/components/InputBuilderSelect.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}>
Expand All @@ -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"
Expand All @@ -53,7 +102,8 @@
id={value_id}
/></FormRow
>


{/if}
<FormRow
label="Delete"
id={"button" + value_id}
Expand All @@ -77,4 +127,8 @@
{/if}

<style>
button:disabled {
opacity: 0.5;
cursor: forbidden;
}
</style>