178 lines
6.7 KiB
Plaintext
178 lines
6.7 KiB
Plaintext
package seasonsview
|
|
|
|
import "git.haelnorr.com/h/oslstats/internal/view/datepicker"
|
|
|
|
templ NewForm() {
|
|
<form
|
|
hx-post="/seasons/new"
|
|
hx-swap="none"
|
|
x-data={ templ.JSFuncCall("newSeasonFormData").CallInline }
|
|
@submit="handleSubmit()"
|
|
@htmx:after-request="if(submitTimeout) clearTimeout(submitTimeout); const redirect = $event.detail.xhr.getResponseHeader('HX-Redirect'); if(redirect) return; if(!$event.detail.successful) { isSubmitting=false; buttonText='Create Season'; generalError='An error occurred. Please try again.'; }"
|
|
>
|
|
<script>
|
|
function newSeasonFormData() {
|
|
return {
|
|
canSubmit: false,
|
|
buttonText: "Create Season",
|
|
// Name validation state
|
|
nameError: "",
|
|
nameIsChecking: false,
|
|
nameIsUnique: false,
|
|
nameIsEmpty: true,
|
|
// Short name validation state
|
|
shortNameError: "",
|
|
shortNameIsChecking: false,
|
|
shortNameIsUnique: false,
|
|
shortNameIsEmpty: true,
|
|
// Date validation state
|
|
dateError: "",
|
|
dateIsEmpty: true,
|
|
// Form state
|
|
isSubmitting: false,
|
|
generalError: "",
|
|
submitTimeout: null,
|
|
// Reset name errors
|
|
resetNameErr() {
|
|
this.nameError = "";
|
|
this.nameIsChecking = false;
|
|
this.nameIsUnique = false;
|
|
},
|
|
// Reset short name errors
|
|
resetShortNameErr() {
|
|
this.shortNameError = "";
|
|
this.shortNameIsChecking = false;
|
|
this.shortNameIsUnique = false;
|
|
},
|
|
// Reset date errors
|
|
resetDateErr() {
|
|
this.dateError = "";
|
|
},
|
|
// Check if form can be submitted
|
|
updateCanSubmit() {
|
|
this.canSubmit = !this.nameIsEmpty && this.nameIsUnique && !this.nameIsChecking &&
|
|
!this.shortNameIsEmpty && this.shortNameIsUnique && !this.shortNameIsChecking &&
|
|
!this.dateIsEmpty;
|
|
},
|
|
// Handle form submission
|
|
handleSubmit() {
|
|
this.isSubmitting = true;
|
|
this.buttonText = 'Creating...';
|
|
this.generalError = '';
|
|
// Set timeout for 10 seconds
|
|
this.submitTimeout = setTimeout(() => {
|
|
this.isSubmitting = false;
|
|
this.buttonText = 'Create Season';
|
|
this.generalError = 'Request timed out. Please try again.';
|
|
}, 10000);
|
|
}
|
|
};
|
|
}
|
|
</script>
|
|
<div class="grid gap-y-5">
|
|
<!-- Name Field -->
|
|
<div>
|
|
<label for="name" class="block text-sm font-medium mb-2">Season Name</label>
|
|
<div class="relative">
|
|
<input
|
|
type="text"
|
|
id="name"
|
|
name="name"
|
|
maxlength="20"
|
|
x-bind:class="{
|
|
'py-3 px-4 block w-full rounded-lg text-sm bg-base disabled:opacity-50 disabled:pointer-events-none border-2 outline-none': true,
|
|
'border-overlay0 focus:border-blue': !nameIsUnique && !nameError,
|
|
'border-green focus:border-green': nameIsUnique && !nameIsChecking && !nameError,
|
|
'border-red focus:border-red': nameError && !nameIsChecking && !isSubmitting
|
|
}"
|
|
required
|
|
placeholder="e.g. Season 1"
|
|
@input="resetNameErr(); nameIsEmpty = $el.value.trim() === ''; if(nameIsEmpty) { nameError='Season name is required'; nameIsUnique=false; } updateCanSubmit();"
|
|
hx-post="/htmx/isseasonnameunique"
|
|
hx-trigger="input changed delay:500ms"
|
|
hx-swap="none"
|
|
@htmx:before-request="if($el.value.trim() === '') { nameIsEmpty=true; return; } nameIsEmpty=false; nameIsChecking=true; nameIsUnique=false; nameError=''; updateCanSubmit();"
|
|
@htmx:after-request="nameIsChecking=false; if($event.detail.successful) { nameIsUnique=true; } else if($event.detail.xhr.status === 409) { nameError='This season name is already taken'; nameIsUnique=false; } updateCanSubmit();"
|
|
/>
|
|
<p class="text-xs text-subtext1 mt-1">Maximum 20 characters</p>
|
|
</div>
|
|
<p
|
|
class="text-center text-xs text-red mt-2"
|
|
x-show="nameError && !isSubmitting"
|
|
x-cloak
|
|
x-text="nameError"
|
|
></p>
|
|
</div>
|
|
<!-- Short Name Field -->
|
|
<div>
|
|
<label for="short_name" class="block text-sm font-medium mb-2">Short Name</label>
|
|
<div class="relative">
|
|
<input
|
|
type="text"
|
|
id="short_name"
|
|
name="short_name"
|
|
maxlength="6"
|
|
x-bind:class="{
|
|
'py-3 px-4 block w-full rounded-lg text-sm bg-base disabled:opacity-50 disabled:pointer-events-none border-2 outline-none uppercase': true,
|
|
'border-overlay0 focus:border-blue': !shortNameIsUnique && !shortNameError,
|
|
'border-green focus:border-green': shortNameIsUnique && !shortNameIsChecking && !shortNameError,
|
|
'border-red focus:border-red': shortNameError && !shortNameIsChecking && !isSubmitting
|
|
}"
|
|
required
|
|
placeholder="e.g. S1"
|
|
pattern="[A-Z0-9]+"
|
|
@input="
|
|
let val = $el.value.toUpperCase().replace(/[^A-Z0-9]/g, '');
|
|
$el.value = val;
|
|
resetShortNameErr();
|
|
shortNameIsEmpty = val.trim() === '';
|
|
if(shortNameIsEmpty) {
|
|
shortNameError='Short name is required';
|
|
shortNameIsUnique=false;
|
|
}
|
|
updateCanSubmit();
|
|
"
|
|
hx-post="/htmx/isseasonshortnameunique"
|
|
hx-trigger="input changed delay:500ms"
|
|
hx-swap="none"
|
|
@htmx:before-request="if($el.value.trim() === '') { shortNameIsEmpty=true; return; } shortNameIsEmpty=false; shortNameIsChecking=true; shortNameIsUnique=false; shortNameError=''; updateCanSubmit();"
|
|
@htmx:after-request="shortNameIsChecking=false; if($event.detail.successful) { shortNameIsUnique=true; } else if($event.detail.xhr.status === 409) { shortNameError='This short name is already taken'; shortNameIsUnique=false; } updateCanSubmit();"
|
|
/>
|
|
<p class="text-xs text-subtext1 mt-1">Maximum 6 characters, alphanumeric only (auto-capitalized)</p>
|
|
</div>
|
|
<p
|
|
class="text-center text-xs text-red mt-2"
|
|
x-show="shortNameError && !isSubmitting"
|
|
x-cloak
|
|
x-text="shortNameError"
|
|
></p>
|
|
</div>
|
|
<!-- Start Date Field -->
|
|
@datepicker.DatePicker("start_date", "start_date", "Start Date", "DD/MM/YYYY", true, "dateIsEmpty = $el.value === ''; resetDateErr(); if(dateIsEmpty) { dateError='Start date is required'; } updateCanSubmit();")
|
|
<p
|
|
class="text-center text-xs text-red mt-2"
|
|
x-show="dateError && !isSubmitting"
|
|
x-cloak
|
|
x-text="dateError"
|
|
></p>
|
|
<!-- General Error Message -->
|
|
<p
|
|
class="text-center text-sm text-red"
|
|
x-show="generalError"
|
|
x-cloak
|
|
x-text="generalError"
|
|
></p>
|
|
<!-- Submit Button -->
|
|
<button
|
|
x-bind:disabled="!canSubmit || isSubmitting"
|
|
x-text="buttonText"
|
|
type="submit"
|
|
class="w-full py-3 px-4 inline-flex justify-center items-center
|
|
gap-x-2 rounded-lg border border-transparent transition text-base font-semibold
|
|
bg-blue hover:bg-blue/75 text-mantle hover:cursor-pointer
|
|
disabled:bg-blue/40 disabled:cursor-not-allowed"
|
|
></button>
|
|
</div>
|
|
</form>
|
|
}
|