lyrics

lyrics
git clone git://brookjeynes.dev/bjeynes/lyrics.git
Log | Files | Refs

edit-artist.templ (3033B)

      1 package editartist
      2 
      3 import (
      4 	"lyrics/internal/domain"
      5 	"lyrics/internal/server/routes"
      6 	"lyrics/internal/server/ui/layouts/base"
      7 )
      8 
      9 templ EditArtist(params EditArtistParams) {
     10 	@base.Base(base.BaseParams{Title: "edit artist", PageStylesheets: []string{"new-artist.css"}}) {
     11 		<h1>Edit an artist</h1>
     12 		<form
     13 			class="artist-form"
     14 			hx-post={ routes.ArtistEdit(params.Artist) }
     15 			hx-swap="none"
     16 			hx-disable-elt="#edit-artist-btn"
     17 		>
     18 			<fieldset
     19 				x-data="{ showLatinName: false }"
     20 				x-init="showLatinTitle = isNonAscii($refs.artistName.value)"
     21 			>
     22 				<legend>Name</legend>
     23 				<label title="prefer the artists name in their original language. use the latin name input for english names">
     24 					artist:
     25 					<input
     26 						x-ref="artistName"
     27 						hx-get="/artist/search?format=similar"
     28 						hx-trigger="input changed delay:500ms"
     29 						hx-target="#similar-artists"
     30 						hx-swap="innerHTML"
     31 						name="artist"
     32 						value={ params.Artist.Name }
     33 						type="text"
     34 						pattern={ domain.NoTrailingOrLeadingSpaceRegex.String() }
     35 						required
     36 						@input="showLatinName = isNonAscii($event.target.value)"
     37 					/>
     38 				</label>
     39 				<label x-show="showLatinName">
     40 					latin name:
     41 					<input
     42 						name="latin-name"
     43 						type="text"
     44 						:required="showLatinName"
     45 						if params.Artist.LatinName != nil {
     46 							value={ *params.Artist.LatinName }
     47 						}
     48 						pattern={ domain.IsValidSortNamePattern }
     49 					/>
     50 				</label>
     51 			</fieldset>
     52 			<section id="similar-artists" class="similar-artists" aria-label="Similar artists"></section>
     53 			<fieldset>
     54 				<legend>Disambiguation</legend>
     55 				<label title="helps users distinguish between artists with identical or similar names, e.g. South Korean singer-songwriter">
     56 					disambiguation:
     57 					<input
     58 						name="disambiguation"
     59 						type="text"
     60 						if params.Artist.Disambiguation != nil {
     61 							value={ *params.Artist.Disambiguation }
     62 						}
     63 						pattern={ domain.NoTrailingOrLeadingSpaceRegex.String() }
     64 					/>
     65 					<i data-lucide="info"></i>
     66 				</label>
     67 			</fieldset>
     68 			<fieldset>
     69 				<legend>Biography</legend>
     70 				<label>
     71 					biography:
     72 					<textarea
     73 						if params.Artist.Bio != nil {
     74 							value={ *params.Artist.Bio }
     75 						}
     76 						name="biography"
     77 						rows="16"
     78 						spellcheck
     79 					></textarea>
     80 				</label>
     81 			</fieldset>
     82 			<fieldset>
     83 				<legend>MusicBrainz</legend>
     84 				<label title="External identifier used for metadata lookups such as cover art.">
     85 					Artist ID (optional):
     86 					<input
     87 						name="musicbrainz-artist-id"
     88 						type="text"
     89 						if params.Artist.MusicBrainzArtistID != nil {
     90 							value={ *params.Artist.MusicBrainzArtistID }
     91 						}
     92 						pattern={ domain.IsValidMusicBrainzIDPattern }
     93 						placeholder="e32a4ae3-67d1-4541-84d8-de6ab2d7dec1"
     94 					/>
     95 					<i data-lucide="info"></i>
     96 				</label>
     97 			</fieldset>
     98 			<footer aria-label="Form actions">
     99 				<button class="-primary" id="edit-artist-btn" type="submit">save changes</button>
    100 				<a href={ routes.Artist(params.Artist) }>cancel</a>
    101 			</footer>
    102 		</form>
    103 	}
    104 }