added teams
This commit is contained in:
216
internal/view/teamsview/new_form.templ
Normal file
216
internal/view/teamsview/new_form.templ
Normal file
@@ -0,0 +1,216 @@
|
||||
package teamsview
|
||||
|
||||
templ NewForm() {
|
||||
<form
|
||||
hx-post="/teams/new"
|
||||
hx-swap="none"
|
||||
x-data={ templ.JSFuncCall("newTeamFormData").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 && $event.detail.xhr.status !== 409) { isSubmitting=false; buttonText='Create Team'; generalError='An error occurred. Please try again.'; }"
|
||||
>
|
||||
<script>
|
||||
function newTeamFormData() {
|
||||
return {
|
||||
canSubmit: false,
|
||||
buttonText: "Create Team",
|
||||
// Name validation state
|
||||
nameError: "",
|
||||
nameIsChecking: false,
|
||||
nameIsUnique: false,
|
||||
nameIsEmpty: true,
|
||||
// Short names validation state
|
||||
shortNamesError: "",
|
||||
shortNamesIsChecking: false,
|
||||
shortNamesAreUnique: false,
|
||||
shortNameIsEmpty: true,
|
||||
altShortNameIsEmpty: true,
|
||||
// Form state
|
||||
isSubmitting: false,
|
||||
generalError: "",
|
||||
submitTimeout: null,
|
||||
// Reset name errors
|
||||
resetNameErr() {
|
||||
this.nameError = "";
|
||||
this.nameIsChecking = false;
|
||||
this.nameIsUnique = false;
|
||||
},
|
||||
// Reset short names errors
|
||||
resetShortNamesErr() {
|
||||
this.shortNamesError = "";
|
||||
this.shortNamesIsChecking = false;
|
||||
this.shortNamesAreUnique = false;
|
||||
},
|
||||
// Check if short names are the same
|
||||
checkShortNamesSame() {
|
||||
const shortName = document.getElementById('short_name').value.trim();
|
||||
const altShortName = document.getElementById('alt_short_name').value.trim();
|
||||
if (shortName && altShortName && shortName === altShortName) {
|
||||
this.shortNamesError = 'Short name and alt short name must be different';
|
||||
this.shortNamesAreUnique = false;
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
// Check if form can be submitted
|
||||
updateCanSubmit() {
|
||||
this.canSubmit =
|
||||
!this.nameIsEmpty &&
|
||||
this.nameIsUnique &&
|
||||
!this.nameIsChecking &&
|
||||
!this.shortNameIsEmpty &&
|
||||
!this.altShortNameIsEmpty &&
|
||||
this.shortNamesAreUnique &&
|
||||
!this.shortNamesIsChecking;
|
||||
},
|
||||
// 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 Team";
|
||||
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">Team Name</label>
|
||||
<div class="relative">
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
maxlength="50"
|
||||
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. Blueberry FC"
|
||||
@input="resetNameErr(); nameIsEmpty = $el.value.trim() === ''; if(nameIsEmpty) { nameError='Team name is required'; nameIsUnique=false; } updateCanSubmit();"
|
||||
hx-post="/htmx/isteamnameunique"
|
||||
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 team name is already taken'; nameIsUnique=false; } updateCanSubmit();"
|
||||
/>
|
||||
<p class="text-xs text-subtext1 mt-1">Maximum 50 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="10"
|
||||
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': !shortNamesAreUnique && !shortNamesError,
|
||||
'border-green focus:border-green': shortNamesAreUnique && !shortNamesIsChecking && !shortNamesError,
|
||||
'border-red focus:border-red': shortNamesError && !shortNamesIsChecking && !isSubmitting
|
||||
}"
|
||||
required
|
||||
placeholder="e.g. BLUE"
|
||||
@input="
|
||||
resetShortNamesErr();
|
||||
shortNameIsEmpty = $el.value.trim() === '';
|
||||
updateCanSubmit();
|
||||
"
|
||||
hx-post="/htmx/isteamshortnamesunique"
|
||||
hx-trigger="input changed delay:500ms from:#short_name, input changed delay:500ms from:#alt_short_name"
|
||||
hx-include="[name='alt_short_name']"
|
||||
hx-swap="none"
|
||||
@htmx:before-request="if($el.value.trim() === '' || document.getElementById('alt_short_name').value.trim() === '') { return; } if(checkShortNamesSame()) { updateCanSubmit(); return; } shortNamesIsChecking=true; shortNamesAreUnique=false; shortNamesError=''; updateCanSubmit();"
|
||||
@htmx:after-request="shortNamesIsChecking=false; if($event.detail.successful) { shortNamesAreUnique=true; } else if($event.detail.xhr.status === 409) { shortNamesError='This combination of short names is already taken or they are the same'; shortNamesAreUnique=false; } updateCanSubmit();"
|
||||
/>
|
||||
<p class="text-xs text-subtext1 mt-1">Maximum 10 characters</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Alternative Short Name Field -->
|
||||
<div>
|
||||
<label for="alt_short_name" class="block text-sm font-medium mb-2">Alternative Short Name</label>
|
||||
<div class="relative">
|
||||
<input
|
||||
type="text"
|
||||
id="alt_short_name"
|
||||
name="alt_short_name"
|
||||
maxlength="10"
|
||||
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': !shortNamesAreUnique && !shortNamesError,
|
||||
'border-green focus:border-green': shortNamesAreUnique && !shortNamesIsChecking && !shortNamesError,
|
||||
'border-red focus:border-red': shortNamesError && !shortNamesIsChecking && !isSubmitting
|
||||
}"
|
||||
required
|
||||
placeholder="e.g. BFC"
|
||||
@input="
|
||||
resetShortNamesErr();
|
||||
altShortNameIsEmpty = $el.value.trim() === '';
|
||||
updateCanSubmit();
|
||||
"
|
||||
hx-post="/htmx/isteamshortnamesunique"
|
||||
hx-trigger="input changed delay:500ms from:#short_name, input changed delay:500ms from:#alt_short_name"
|
||||
hx-include="[name='short_name']"
|
||||
hx-swap="none"
|
||||
@htmx:before-request="if($el.value.trim() === '' || document.getElementById('short_name').value.trim() === '') { return; } if(checkShortNamesSame()) { updateCanSubmit(); return; } shortNamesIsChecking=true; shortNamesAreUnique=false; shortNamesError=''; updateCanSubmit();"
|
||||
@htmx:after-request="shortNamesIsChecking=false; if($event.detail.successful) { shortNamesAreUnique=true; } else if($event.detail.xhr.status === 409) { shortNamesError='This combination of short names is already taken or they are the same'; shortNamesAreUnique=false; } updateCanSubmit();"
|
||||
/>
|
||||
<p class="text-xs text-subtext1 mt-1">Maximum 10 characters. Must be different from short name.</p>
|
||||
</div>
|
||||
<p
|
||||
class="text-center text-xs text-red mt-2"
|
||||
x-show="shortNamesError && !isSubmitting"
|
||||
x-cloak
|
||||
x-text="shortNamesError"
|
||||
></p>
|
||||
</div>
|
||||
<!-- Color Field (Optional) -->
|
||||
<div>
|
||||
<label for="color" class="block text-sm font-medium mb-2">Team Color (Optional)</label>
|
||||
<div class="flex gap-3 items-center">
|
||||
<input
|
||||
type="color"
|
||||
id="color"
|
||||
name="color"
|
||||
class="h-12 w-20 rounded cursor-pointer border-2 border-overlay0"
|
||||
/>
|
||||
<p class="text-xs text-subtext1">Choose a color to represent this team</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 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 font-semibold
|
||||
bg-blue hover:bg-blue/75 text-mantle hover:cursor-pointer
|
||||
disabled:bg-blue/40 disabled:cursor-not-allowed"
|
||||
></button>
|
||||
</div>
|
||||
</form>
|
||||
}
|
||||
Reference in New Issue
Block a user