lyrics

edit-release.templ (6727B)

---

 package editrelease
 
 import (
 	"fmt"
 	"lyrics/internal/domain"
 	"lyrics/internal/server/routes"
 	"lyrics/internal/server/ui/layouts/base"
 	"time"
 )
 
 templ EditRelease(params EditReleaseParams) {
 	@base.Base(base.BaseParams{Title: "edit " + params.Release.Title, PageStylesheets: []string{"new-release.css"}}) {
 		<h1>Edit release</h1>
 		<form
 			class="release-form"
 			hx-post={ routes.ReleaseEdit(params.Release) }
 			hx-swap="none"
 			hx-disable-elt="#save-release-btn"
 		>
 			<fieldset>
 				<legend>Type</legend>
 				<label for="type">type:</label>
 				<select name="type" required>
 					<option
 						if params.Release.Type == "album" {
 							selected
 						}
 						value="album"
 					>album</option>
 					<option
 						if params.Release.Type == "single" {
 							selected
 						}
 						value="single"
 					>single</option>
 					<option
 						if params.Release.Type == "ep" {
 							selected
 						}
 						value="ep"
 					>ep</option>
 					<option
 						if params.Release.Type == "other" {
 							selected
 						}
 						value="other"
 					>other</option>
 				</select>
 			</fieldset>
 			<fieldset
 				x-data="{ showLatinTitle: false }"
 				x-init="showLatinTitle = isNonAscii($refs.releaseTitle.value)"
 			>
 				<legend>Title</legend>
 				<label>
 					title:
 					<input
 						x-ref="releaseTitle"
 						hx-get="/release/search?format=similar"
 						hx-trigger="input changed delay:500ms"
 						hx-target="#similar-releases"
 						hx-swap="innerHTML"
 						name="release-title"
 						type="text"
 						value={ params.Release.Title }
 						pattern={ domain.NoTrailingOrLeadingSpaceRegex.String() }
 						required
 						@input="showLatinTitle = isNonAscii($event.target.value)"
 					/>
 				</label>
 				<label x-show="showLatinTitle">
 					latin title:
 					<input
 						name="latin-title"
 						type="text"
 						if params.Release.LatinTitle != nil {
 							value={ *params.Release.LatinTitle }
 						}
 						:required="showLatinTitle"
 						pattern={ domain.IsValidSortNamePattern }
 					/>
 				</label>
 			</fieldset>
 			<section id="similar-releases" class="similar-releases" aria-label="Similar releases"></section>
 			<fieldset
 				x-data={ fmt.Sprintf("{ items: %s, uid: %d }", editReleaseArtistsJSON(params.Release.Artists), len(params.Release.Artists)) }
 			>
 				<legend>Artists</legend>
 				<ol class="picker-list">
 					<template x-for="(item, i) in items" :key="item.uid">
 						<li
 							x-data="item"
 							x-init="htmx.process($el); initLucideIcons()"
 						>
 							<div class="picker-row">
 								<div class="picker-main">
 									<label x-show="!item.selected">
 										<span>artist:</span>
 										<input
 											type="search"
 											hx-get="/artist/search?format=suggest"
 											hx-trigger="input changed delay:500ms"
 											hx-target="next .picker-options"
 											hx-swap="outerHTML"
 											name="artist"
 											autocomplete="off"
 											:required="!item.selected"
 										/>
 									</label>
 									<div class="picker-selected-item" x-show="item.selected">
 										<strong x-text="item.artistName"></strong>
 										<button
 											type="button"
 											class="-secondary"
 											@click="item.selected = false; item.artistId = ''; item.artistName = ''"
 										>
 											change
 										</button>
 									</div>
 								</div>
 								<div class="picker-actions">
 									<button
 										type="button"
 										aria-label="Remove"
 										x-show="items.length > 1"
 										@click="items.splice(i, 1)"
 									>
 										<i data-lucide="x"></i>
 									</button>
 									<button
 										type="button"
 										aria-label="Move up"
 										x-show="item.selected && items.length > 1 && i >= 1"
 										@click="[items[i - 1], items[i]] = [items[i], items[i - 1]]"
 									>
 										<i data-lucide="chevron-up"></i>
 									</button>
 									<button
 										type="button"
 										aria-label="Move down"
 										x-show="item.selected && items.length > 1 && i + 1 < items.length"
 										@click="[items[i + 1], items[i]] = [items[i], items[i + 1]]"
 									>
 										<i data-lucide="chevron-down"></i>
 									</button>
 								</div>
 							</div>
 							<div x-show="!item.selected">
 								<fieldset class="picker-options" role="radiogroup" x-show="false"></fieldset>
 							</div>
 							<input type="hidden" name="artist-id" :value="item.artistId"/>
 						</li>
 					</template>
 				</ol>
 				<button
 					class="-secondary"
 					type="button"
 					@click="items.push({ uid: uid++, selected: false, artistId: '', artistName: '' })"
 				>
 					add additional artist
 				</button>
 			</fieldset>
 			<fieldset>
 				<legend>Release</legend>
 				<label>
 					release date:
 					<input
 						name="release-date"
 						type="date"
 						value={ params.Release.ReleaseDate.Format(time.DateOnly) }
 						min="1000-01-01"
 						max={ fmt.Sprintf("%s", time.Now().AddDate(3, 0, 0).Format("2006-01-02")) }
 						required
 					/>
 				</label>
 			</fieldset>
 			<fieldset
 				x-data={ fmt.Sprintf("{ items: %s }", editReleaseSongsJSON(params.Release.Songs)) }
 			>
 				<legend>Songs</legend>
 				if len(params.Release.Songs) == 0 {
 					<p class="section-label -muted">No songs yet.</p>
 				} else {
 					<ol class="picker-list">
 						<template x-for="(item, i) in items" :key="item.id">
 							<li :value="item.trackNumber" x-init="htmx.process($el); initLucideIcons()">
 								<div class="picker-row">
 									<input
 										type="number"
 										:value="item.trackNumber"
 										min="1"
 										@change="changeTrackOrder($event, items, i, $event.target.value)"
 										required
 									/>
 									<div class="picker-main">
 										<strong x-text="item.title"></strong>
 									</div>
 								</div>
 								<input type="hidden" name="song-id" :value="item.id"/>
 								<input type="hidden" name="track-number" :value="item.trackNumber"/>
 							</li>
 						</template>
 					</ol>
 				}
 			</fieldset>
 			<fieldset>
 				<legend>MusicBrainz</legend>
 				<label title="External identifier used for metadata lookups such as cover art.">
 					Release ID (optional):
 					<input
 						name="musicbrainz-release-id"
 						type="text"
 						if params.Release.MusicBrainzReleaseID != nil {
 							value={ *params.Release.MusicBrainzReleaseID }
 						}
 						pattern={ domain.IsValidMusicBrainzIDPattern }
 						placeholder="e32a4ae3-67d1-4541-84d8-de6ab2d7dec1"
 					/>
 					<i data-lucide="info"></i>
 				</label>
 			</fieldset>
 			<footer aria-label="Form actions">
 				<button class="-primary" id="save-release-btn" type="submit">save changes</button>
 				<a href={ routes.Release(params.Release) }>cancel</a>
 			</footer>
 		</form>
 		<script src="/static/js/edit-release.js" defer></script>
 	}
 }