lfk/frontend
2
0
Fork 0
Code Issues 4 Pull Requests Actions Projects Releases Wiki Activity

Added address to org creation dialog (styleing only)

Browse Source 
ref #72
This commit is contained in:
Nicolai Ort
2021-02-19 16:07:12 +01:00
parent 57e17f2864
commit 6d2431b683
1 changed files with 117 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
src/components/orgs/AddOrgModal.svelte
View File

@@ -13,7 +13,24 @@
$: name = "";
$: processed_last_submit = true;
$: isOrgnameValid = name.trim().length !== 0;
$: createbtnenabled = isOrgnameValid;
$: isAddress1Valid = address_input1_value.trim().length !== 0;
$: iszipcodevalid = address_zipcode_value.trim().length !== 0;
$: iscityvalid = address_city_value.trim().length !== 0;
$: createbtnenabled =
isOrgnameValid &&
((isAddress1Valid && iszipcodevalid && iscityvalid) ||
address_checked === false);
$: address_input1_value = "";
$: address_input2_value = "";
$: address_zipcode_value = "";
$: address_city_value = "";
$: address_checked = true;
let address_input1;
let address_input2;
let address_zipcode;
let address_city;
(() => {
document.onkeydown = (e) => {
e = e || window.event;
@@ -133,7 +150,105 @@
</span>
{/if}
</div>
</div>
<div class="flex items-start">
<div class="flex items-center h-5">
<input
bind:checked={address_checked}
id="comments"
name="comments"
type="checkbox"
class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
</div>
<div class="ml-3 text-sm">
<label
for="comments"
class="font-medium text-gray-700">Address</label>
</div>
</div>
{#if address_checked === true}
<div class="col-span-6">
<label
for="address1"
class="block text-sm font-medium text-gray-700">Address</label>
<input
autocomplete="off"
placeholder="Address"
class:border-red-500={!isAddress1Valid}
class:focus:border-red-500={!isAddress1Valid}
class:focus:ring-red-500={!isAddress1Valid}
bind:value={address_input1_value}
bind:this={address_input1}
type="text"
name="address1"
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
{#if !isAddress1Valid}
<span
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
Address is required
</span>
{/if}
</div>
<div class="col-span-6">
<label
for="address2"
class="block text-sm font-medium text-gray-700">Apartment,
suite, etc.</label>
<input
autocomplete="off"
placeholder="Apartment, suite, etc."
bind:value={address_input2_value}
bind:this={address_input2}
type="text"
name="address2"
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
</div>
<div class="col-span-6">
<label
for="zipcode"
class="block text-sm font-medium text-gray-700">ZIP/ postal
code</label>
<input
autocomplete="off"
placeholder="ZIP/ postal code"
class:border-red-500={!iszipcodevalid}
class:focus:border-red-500={!iszipcodevalid}
class:focus:ring-red-500={!iszipcodevalid}
bind:value={address_zipcode_value}
bind:this={address_zipcode}
type="text"
name="zipcode"
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
{#if !iszipcodevalid}
<span
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
Valid zipcode/ postal code is required
</span>
{/if}
</div>
<div class="col-span-6">
<label
for="city"
class="block text-sm font-medium text-gray-700">City</label>
<input
autocomplete="off"
placeholder="City"
class:border-red-500={!iscityvalid}
class:focus:border-red-500={!iscityvalid}
class:focus:ring-red-500={!iscityvalid}
bind:value={address_city_value}
bind:this={address_city}
type="text"
name="city"
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
{#if !iscityvalid}
<span
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
Valid city is required
</span>
{/if}
</div>
{/if}
</div>
</div>
</div>
</div>