added season types and changed new season to be a modal
This commit is contained in:
275
internal/view/seasonsview/new_form_modal.templ
Normal file
275
internal/view/seasonsview/new_form_modal.templ
Normal file
@@ -0,0 +1,275 @@
|
||||
package seasonsview
|
||||
|
||||
// NewFormModal is a version of the form for use in a modal
|
||||
// It closes the modal and refreshes the list on success instead of redirecting
|
||||
templ NewFormModal() {
|
||||
<form
|
||||
hx-post="/seasons/new"
|
||||
hx-target="#seasons-list-container"
|
||||
hx-swap="outerHTML"
|
||||
x-data={ templ.JSFuncCall("newSeasonFormModalData").CallInline }
|
||||
@submit="handleSubmit()"
|
||||
@htmx:after-request="
|
||||
if(submitTimeout) clearTimeout(submitTimeout);
|
||||
// Only handle the form submission (not uniqueness checks)
|
||||
const path = $event.detail.requestConfig.path;
|
||||
if(path !== '/seasons/new') return;
|
||||
if($event.detail.successful) {
|
||||
// Close the modal
|
||||
$dispatch('close-new-season-modal');
|
||||
// Reset form
|
||||
$el.reset();
|
||||
isSubmitting=false;
|
||||
buttonText='Create Season';
|
||||
// Reset validation state
|
||||
nameIsEmpty=true;
|
||||
nameIsUnique=false;
|
||||
shortNameIsEmpty=true;
|
||||
shortNameIsUnique=false;
|
||||
dateIsEmpty=true;
|
||||
updateCanSubmit();
|
||||
// Clear flatpickr
|
||||
const fpInput = document.getElementById('start_date');
|
||||
if(fpInput && fpInput._flatpickr) {
|
||||
fpInput._flatpickr.clear();
|
||||
}
|
||||
} else if($event.detail.xhr.status !== 409) {
|
||||
isSubmitting=false;
|
||||
buttonText='Create Season';
|
||||
generalError='An error occurred. Please try again.';
|
||||
}
|
||||
"
|
||||
x-init="initFlatpickrModal()"
|
||||
>
|
||||
<script>
|
||||
function newSeasonFormModalData() {
|
||||
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);
|
||||
},
|
||||
};
|
||||
}
|
||||
function initFlatpickrModal() {
|
||||
// Small delay to ensure DOM is ready after modal opens
|
||||
setTimeout(() => {
|
||||
if (typeof flatpickr !== 'undefined') {
|
||||
flatpickr('#start_date', {
|
||||
dateFormat: 'd/m/Y',
|
||||
allowInput: true,
|
||||
onChange: function(selectedDates, dateStr) {
|
||||
const input = document.getElementById('start_date');
|
||||
input.value = dateStr;
|
||||
input.dispatchEvent(new Event('input', { bubbles: true }));
|
||||
}
|
||||
});
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
</script>
|
||||
<div class="grid gap-y-5">
|
||||
<!-- Name and Short Name Fields (Inlined) -->
|
||||
<div class="grid grid-cols-3 gap-4">
|
||||
<!-- Name Field -->
|
||||
<div class="col-span-2">
|
||||
<label for="name" class="block text-sm font-medium mb-2 text-subtext0">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-surface0 disabled:opacity-50 disabled:pointer-events-none border-2 outline-none text-text placeholder-subtext0': true,
|
||||
'border-surface1 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();"
|
||||
/>
|
||||
</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 class="col-span-1">
|
||||
<label for="short_name" class="block text-sm font-medium mb-2 text-subtext0">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-surface0 disabled:opacity-50 disabled:pointer-events-none border-2 outline-none uppercase text-text placeholder-subtext0': true,
|
||||
'border-surface1 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();"
|
||||
/>
|
||||
</div>
|
||||
<p
|
||||
class="text-center text-xs text-red mt-2"
|
||||
x-show="shortNameError && !isSubmitting"
|
||||
x-cloak
|
||||
x-text="shortNameError"
|
||||
></p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-subtext0 -mt-3">Maximum 20 characters for name, 6 alphanumeric characters for short name</p>
|
||||
<!-- Season Type and Start Date Fields (Inlined) -->
|
||||
<div class="grid grid-cols-2 gap-4 items-end">
|
||||
<!-- Season Type Field -->
|
||||
<div>
|
||||
<label for="type" class="block text-sm font-medium mb-2 text-subtext0">Season Type</label>
|
||||
<select
|
||||
id="type"
|
||||
name="type"
|
||||
class="py-3 px-4 block w-full rounded-lg text-sm bg-surface0 border-2 border-surface1 focus:border-blue outline-none text-text appearance-none cursor-pointer hover:bg-surface1 transition-colors"
|
||||
required
|
||||
style="height: 46px;"
|
||||
>
|
||||
<option value="regular" selected>Regular</option>
|
||||
<option value="draft">Draft</option>
|
||||
</select>
|
||||
</div>
|
||||
<!-- Start Date Field (Flatpickr) -->
|
||||
<div>
|
||||
<label for="start_date" class="block text-sm font-medium mb-2 text-subtext0">Start Date</label>
|
||||
<input
|
||||
type="text"
|
||||
id="start_date"
|
||||
name="start_date"
|
||||
class="py-3 px-4 block w-full rounded-lg text-sm bg-surface0 border-2 border-surface1 focus:border-blue outline-none text-text placeholder-subtext0"
|
||||
placeholder="DD/MM/YYYY"
|
||||
required
|
||||
style="height: 46px;"
|
||||
@input="dateIsEmpty = $el.value.trim() === ''; resetDateErr(); if(dateIsEmpty) { dateError='Start date is required'; } updateCanSubmit();"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<p
|
||||
class="text-center text-xs text-red -mt-3"
|
||||
x-show="dateError && !isSubmitting"
|
||||
x-cloak
|
||||
x-text="dateError"
|
||||
></p>
|
||||
<!-- Slap Version Field -->
|
||||
<div>
|
||||
<label for="slap_version" class="block text-sm font-medium mb-2 text-subtext0">Slap Version</label>
|
||||
<select
|
||||
id="slap_version"
|
||||
name="slap_version"
|
||||
class="py-3 px-4 block w-full rounded-lg text-sm bg-surface0 border-2 border-surface1 focus:border-blue outline-none text-text appearance-none cursor-pointer hover:bg-surface1 transition-colors"
|
||||
required
|
||||
style="height: 46px;"
|
||||
>
|
||||
<option value="rebound" selected>Rebound</option>
|
||||
<option value="slapshot1">Slapshot 1</option>
|
||||
</select>
|
||||
<p class="text-xs text-subtext0 mt-1">Select the game game version for this season</p>
|
||||
</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-all duration-200 font-semibold
|
||||
bg-blue hover:bg-blue/80 text-mantle hover:cursor-pointer shadow-md
|
||||
disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-none hover:shadow-lg hover:-translate-y-0.5"
|
||||
></button>
|
||||
</div>
|
||||
</form>
|
||||
}
|
||||
Reference in New Issue
Block a user