source: KernelRecordsMVC.Web/Views/Admin/EditRelease.cshtml

main
Last change on this file was d89d25b, checked in by mmilevski <markomilevski3@…>, 4 weeks ago

Added few implementaions, minor UI changes.
  • Property mode set to 100644
File size: 9.4 KB
Line 
1@model KernelRecordsMVC.Application.ViewModels.EditReleaseViewModel
2
3@{
4 ViewData["Title"] = "Edit Release";
5}
6
7<div class="admin-page admin-form-page">
8
9 <!-- =====================================================
10 HEADER
11 ===================================================== -->
12
13 <div class="admin-header">
14
15 <div>
16
17 <a asp-action="Releases"
18 class="admin-back-link">
19 ← Releases
20 </a>
21
22 <span class="admin-eyebrow">
23 CATALOG MANAGEMENT
24 </span>
25
26 <h1>Edit Release</h1>
27
28 <p>
29 Update release information and artist assignments.
30 </p>
31
32 </div>
33
34 </div>
35
36
37 <form asp-action="EditRelease"
38 method="post">
39
40 @Html.AntiForgeryToken()
41
42 <input asp-for="ReleaseId"
43 type="hidden" />
44
45
46 <div asp-validation-summary="ModelOnly"
47 class="admin-validation">
48 </div>
49
50
51 <!-- =================================================
52 RELEASE INFORMATION
53 ================================================= -->
54
55 <section class="admin-form-card release-create-section">
56
57 <div class="admin-form-card-header">
58
59 <span class="admin-eyebrow">
60 RELEASE
61 </span>
62
63 <h2>Release Information</h2>
64
65 <p class="admin-section-description">
66 Update the catalog information for this release.
67 </p>
68
69 </div>
70
71
72 <!-- TITLE -->
73
74 <div class="admin-form-field">
75
76 <label asp-for="Title">
77 Title
78 </label>
79
80 <input asp-for="Title"
81 placeholder="Release title" />
82
83 <span asp-validation-for="Title"
84 class="admin-field-error">
85 </span>
86
87 </div>
88
89
90 <!-- GENRE + DATE -->
91
92 <div class="admin-form-row">
93
94 <div class="admin-form-field">
95
96 <label asp-for="Genre">
97 Genre
98 </label>
99
100 <input asp-for="Genre"
101 placeholder="Rock, Pop, Jazz..." />
102
103 <span asp-validation-for="Genre"
104 class="admin-field-error">
105 </span>
106
107 </div>
108
109
110 <div class="admin-form-field">
111
112 <label asp-for="ReleaseDate">
113 Release Date
114 </label>
115
116 <input asp-for="ReleaseDate"
117 type="date" />
118
119 <span asp-validation-for="ReleaseDate"
120 class="admin-field-error">
121 </span>
122
123 </div>
124
125 </div>
126
127
128 <!-- RECORD LABEL -->
129
130 <div class="admin-form-field">
131
132 <label asp-for="RecordLabel">
133 Record Label
134 </label>
135
136 <input asp-for="RecordLabel"
137 placeholder="Record label" />
138
139 <span asp-validation-for="RecordLabel"
140 class="admin-field-error">
141 </span>
142
143 </div>
144
145
146 <!-- COVER PHOTO -->
147
148 <div class="admin-form-field">
149
150 <label asp-for="CoverPhoto">
151 Cover Photo URL
152 </label>
153
154 <input asp-for="CoverPhoto"
155 id="coverPhotoInput"
156 placeholder="https://..." />
157
158 <span asp-validation-for="CoverPhoto"
159 class="admin-field-error">
160 </span>
161
162 </div>
163
164
165 <!-- COVER PREVIEW -->
166
167 <div class="admin-cover-preview">
168
169 <span class="admin-eyebrow">
170 COVER PREVIEW
171 </span>
172
173 <div class="admin-cover-preview-image"
174 id="coverPreview">
175
176 @if (!string.IsNullOrWhiteSpace(
177 Model.CoverPhoto))
178 {
179 <img src="@Model.CoverPhoto"
180 alt="@Model.Title" />
181 }
182 else
183 {
184 <span>♪</span>
185 }
186
187 </div>
188
189 </div>
190
191 </section>
192
193
194 <!-- =================================================
195 ARTISTS
196 ================================================= -->
197
198 <section class="admin-form-card release-create-section">
199
200 <div class="admin-form-card-header">
201
202 <span class="admin-eyebrow">
203 ARTISTS
204 </span>
205
206 <h2>Release Artists</h2>
207
208 <p class="admin-section-description">
209 Change the main artist or featured artists
210 associated with this release.
211 </p>
212
213 </div>
214
215
216 <!-- MAIN ARTIST -->
217
218 <div class="admin-form-field">
219
220 <label asp-for="MainArtistId">
221 Main Artist
222 </label>
223
224 <select asp-for="MainArtistId">
225
226 <option value="">
227 Select main artist
228 </option>
229
230 @foreach (var artist in ViewBag.Artists)
231 {
232 <option value="@artist.ArtistId">
233 @artist.ArtistName
234 </option>
235 }
236
237 </select>
238
239 <span asp-validation-for="MainArtistId"
240 class="admin-field-error">
241 </span>
242
243 <small>
244 This artist will be stored as the MAIN
245 artist for the release.
246 </small>
247
248 </div>
249
250
251 <!-- FEATURED ARTISTS -->
252
253 <div class="admin-form-field">
254
255 <label asp-for="FeaturedArtistIds">
256 Featured Artists
257 </label>
258
259 <select asp-for="FeaturedArtistIds"
260 multiple
261 class="admin-multi-select">
262
263 @foreach (var artist in ViewBag.Artists)
264 {
265 <option value="@artist.ArtistId">
266 @artist.ArtistName
267 </option>
268 }
269
270 </select>
271
272 <span asp-validation-for="FeaturedArtistIds"
273 class="admin-field-error">
274 </span>
275
276 <small>
277 Hold Ctrl on Windows or Cmd on macOS
278 to select multiple featured artists.
279 </small>
280
281 </div>
282
283 </section>
284
285
286 <!-- =================================================
287 SAVE
288 ================================================= -->
289
290 <div class="admin-release-submit">
291
292 <div>
293
294 <span class="admin-eyebrow">
295 SAVE CHANGES
296 </span>
297
298 <p>
299 Release information and artist relationships
300 will be updated together.
301 </p>
302
303 </div>
304
305
306 <div class="admin-form-actions release-actions">
307
308 <a asp-action="Releases"
309 class="admin-button secondary">
310
311 Cancel
312
313 </a>
314
315
316 <button type="submit"
317 class="admin-button primary">
318
319 Save Changes
320
321 </button>
322
323 </div>
324
325 </div>
326
327 </form>
328
329</div>
330
331
332@section Scripts
333{
334 <partial name="_ValidationScriptsPartial" />
335
336 <script>
337
338 document.addEventListener(
339 "DOMContentLoaded",
340 function ()
341 {
342 const coverInput =
343 document.getElementById(
344 "coverPhotoInput");
345
346 const coverPreview =
347 document.getElementById(
348 "coverPreview");
349
350
351 function showPlaceholder()
352 {
353 coverPreview.innerHTML =
354 "<span>♪</span>";
355 }
356
357
358 function updateCover()
359 {
360 const url =
361 coverInput.value.trim();
362
363
364 if (!url)
365 {
366 showPlaceholder();
367
368 return;
369 }
370
371
372 coverPreview.innerHTML = "";
373
374
375 const image =
376 document.createElement(
377 "img");
378
379
380 image.src =
381 url;
382
383 image.alt =
384 "Release cover preview";
385
386
387 image.addEventListener(
388 "error",
389 function ()
390 {
391 showPlaceholder();
392 });
393
394
395 coverPreview.appendChild(
396 image);
397 }
398
399
400 coverInput.addEventListener(
401 "input",
402 updateCover);
403 });
404
405 </script>
406}
Note: See TracBrowser for help on using the repository browser.