Appwrite/console
1
0
Fork 0
mirror of https://github.com/appwrite/console.git synced 2026-06-06 19:27:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add validation to special select elements

Browse Source
This commit is contained in:
Arman
2022-11-09 18:26:40 +01:00
parent 8438641db8
commit fefb90e438
2 changed files with 88 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/indexes/createIndex.svelte
+50 -60
View File
@@ -9,6 +9,7 @@
import type { Attributes } from '../store';
import { invalidate } from '$app/navigation';
import { Dependencies } from '$lib/constants';
import Select from './select.svelte';
export let showCreateIndex = false;
export let externalAttribute: Attributes = null;
@@ -22,7 +23,7 @@
{ value: 'fulltext', label: 'FullText' }
];
let newAttr = false;
let selectedType = '';
let selectedType = 'key';
$: attributeOptions = $collection.attributes.map((attribute: Attributes) => ({
value: attribute.key,
label: attribute.key
@@ -40,7 +41,8 @@
$: if (showCreateIndex) {
attributeList = [];
selectedType = selectedOrder = selectedAttribute = '';
selectedOrder = selectedAttribute = '';
selectedType = 'key';
key = null;
}
const created = async () => {
@@ -95,36 +97,28 @@
{#each attributeList as index, i}
<li class="form-item is-multiple">
<div class="form-item-part u-stretch">
<label class="label" for="attribute">Attribute</label>
<div class="select">
<select id="attribute" bind:value={index.value}>
<optgroup label="Internal">
<option value="$id">$id</option>
<option value="$createdAt">$createdAt</option>
<option value="$updatedAt">$updatedAt</option>
</optgroup>
<optgroup label="Attributes">
{#each attributeOptions as option}
<option
value={option.value}
selected={option.value === selectedAttribute}>
{option.label}
</option>
{/each}
</optgroup>
</select>
<span class="icon-cheveron-down" aria-hidden="true" />
</div>
<Select id="attribute" label="Attribute" bind:value={index.value}>
<optgroup label="Internal">
<option value="$id">$id</option>
<option value="$createdAt">$createdAt</option>
<option value="$updatedAt">$updatedAt</option>
</optgroup>
<optgroup label="Attributes">
{#each attributeOptions as option}
<option
value={option.value}
selected={option.value === selectedAttribute}>
{option.label}
</option>
{/each}
</optgroup>
</Select>
</div>
<div class="form-item-part u-stretch">
<label class="label" for="order">Order</label>
<div class="select">
<select id="order" bind:value={index.order}>
<option value="ASC"> ASC </option>
<option value="DESC"> DESC </option>
</select>
<span class="icon-cheveron-down" aria-hidden="true" />
</div>
<Select id="order" label="Order" bind:value={index.order}>
<option value="ASC"> ASC </option>
<option value="DESC"> DESC </option>
</Select>
</div>
<div class="form-item-part u-cross-child-end">
@@ -144,40 +138,36 @@
{#if !attributeList?.length || newAttr}
<li class="form-item is-multiple">
<div class="form-item-part u-stretch">
<label class="label" for="attribute">Attribute</label>
<div class="select">
<select required id="attribute" bind:value={selectedAttribute}>
<option value="" disabled selected hidden>Select Attribute</option>
<Select
id="attribute"
label="Attribute"
required
bind:value={selectedAttribute}>
<option value="" disabled selected hidden>Select Attribute</option>
<optgroup label="Internal">
<option value="$id">$id</option>
<option value="$createdAt">$createdAt</option>
<option value="$updatedAt">$updatedAt</option>
</optgroup>
<optgroup label="Attributes">
{#each attributeOptions as option}
<option
value={option.value}
selected={option.value === selectedAttribute}>
{option.label}
</option>
{/each}
</optgroup>
</select>
<span class="icon-cheveron-down" aria-hidden="true" />
</div>
<optgroup label="Internal">
<option value="$id">$id</option>
<option value="$createdAt">$createdAt</option>
<option value="$updatedAt">$updatedAt</option>
</optgroup>
<optgroup label="Attributes">
{#each attributeOptions as option}
<option
value={option.value}
selected={option.value === selectedAttribute}>
{option.label}
</option>
{/each}
</optgroup>
</Select>
</div>
<div class="form-item-part u-stretch">
<label class="label" for="order">Order</label>
<div class="select">
<select id="order" bind:value={selectedOrder}>
<option value="" disabled selected hidden>Select Order</option>
<Select id="order" label="Order" required bind:value={selectedOrder}>
<option value="" disabled selected hidden>Select Order</option>
<option value="ASC"> ASC </option>
<option value="DESC"> DESC </option>
</select>
<span class="icon-cheveron-down" aria-hidden="true" />
</div>
<option value="ASC"> ASC </option>
<option value="DESC"> DESC </option>
</Select>
</div>
<div class="form-item-part u-cross-child-end">
src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/indexes/select.svelte
+38
View File
@@ -0,0 +1,38 @@
<script lang="ts">
import Helper from '$lib/elements/forms/helper.svelte';
export let value: string;
export let id: string;
export let label: string;
export let required = false;
let element: HTMLSelectElement;
let error: string;
const handleInvalid = (event: Event) => {
console.log('test');
event.preventDefault();
if (element.validity.valueMissing) {
error = 'This field is required';
return;
}
error = element.validationMessage;
};
$: if (value) {
error = null;
}
</script>
<label class="label" for={id}>{label}</label>
<div class="select">
<select bind:this={element} {id} bind:value {required} on:invalid={handleInvalid}>
<slot />
</select>
<span class="icon-cheveron-down" aria-hidden="true" />
</div>
{#if error}
<Helper type="warning">{error}</Helper>
{/if}