Put calendar’s season selector form in a dialog

pkg/season/admin.go

@@ -337,6 +337,8 @@ func updateSeasonCalendar(w http.ResponseWriter, r *http.Request, user *auth.Use
 			panic(err)
 		}
 		if f.SeasonID.Val == "" {
+			// Nothing to do
+		} else if f.SeasonID.Val == "0" {
 			conn.MustExec(r.Context(), "select unset_season_range($1)", seasonRange)
 		} else {
 			conn.MustExec(r.Context(), "select set_season_range($1, $2)", f.SeasonID, seasonRange)
@@ -371,7 +373,7 @@ func newCalendarForm(ctx context.Context, company *auth.Company, conn *database.
 
 func mustCollectCalendarSeasons(ctx context.Context, company *auth.Company, conn *database.Conn) []*seasonEntry {
 	rows, err := conn.Query(ctx, `
-		select '' as slug
+		select '0' as slug
 		     , $1 as name
 		     , to_color($2)::text
 		     , true

web/static/camper.css

@@ -293,7 +293,7 @@ nav details summary:hover,
 nav details summary:focus,
 nav details a:hover,
 nav details button:hover {
-   background-color: var(--camper--color--light-gray); 
+    background-color: var(--camper--color--light-gray);
 }
 
 nav details summary img {
@@ -511,6 +511,10 @@ textarea {
         display: flex;
         flex-direction: column;
     }
+    
+    .season-calendar table {
+        width: 100%;
+    }
 }
 
 .season-calendar table {
@@ -549,13 +553,27 @@ textarea {
     height: .8rem;
 }
 
-.season-calendar form {
-    position: fixed;
-}
-
-.season-calendar button {
+.season-calendar form button {
     display: flex;
     gap: 1em;
+    border: none;
+    cursor: pointer;
+}
+
+.season-calendar form button:first-child {
+    min-width: 0;
+    position: absolute;
+    top: 0;
+    right: 0;
+    background-color: transparent;
+}
+
+.season-calendar form button:hover,  .season-calendar form button:first-child:hover {
+    background-color: var(--camper--color--hay);
+}
+
+.season-calendar form button:first-child::before {
+    content: "✕";
 }
 
 /* snack bar */

web/static/camper.js

@@ -179,6 +179,19 @@ export function setupCalendar(calendar) {
     const startDate = calendar.querySelector('input[name="start_date"]');
     const endDate = calendar.querySelector('input[name="end_date"]');
     const days = Array.from(calendar.querySelectorAll('time'));
+    const dialog = calendar.querySelector('dialog');
+
+    const clear = function () {
+        console.log('yolo');
+        startDate.value = endDate.value = "";
+        days.forEach((e) => e.removeAttribute('aria-checked'));
+    }
+
+    dialog.addEventListener('close', clear);
+    dialog.querySelector('button').addEventListener('click', function (e) {
+        e.preventDefault();
+        dialog.close();
+    });
 
     const selectDate = function (e) {
         e.preventDefault();
@@ -203,11 +216,14 @@ export function setupCalendar(calendar) {
                 day.removeAttribute('aria-checked');
             }
         }
+        dialog.showModal();
     }
 
     for (const day of days) {
         day.addEventListener('click', selectDate);
     }
+
+    clear();
 }
 
 htmx.onLoad((target) => {

web/templates/admin/season/calendar.gohtml

@@ -31,21 +31,24 @@
         </table>
     {{- end }}
     {{ with .Form }}
-        <form data-hx-put="/admin/seasons/range">
-            {{ CSRFInput }}
-            {{ with .StartDate }}<input type="hidden" name="{{ .Name }}" value="{{ .Val }}">{{ end }}
-            {{ with .EndDate }}<input type="hidden" name="{{ .Name }}" value="{{ .Val }}">{{ end }}
-            <footer>
-                {{ range .Seasons -}}
-                    <button type="submit" name="season_id" value="{{ .Slug }}">
-                        <svg width="20px" height="20px">
-                            <circle cx="50%" cy="50%" r="49%" fill="{{ .Color }}" stroke="#000" stroke-width=".5"/>
-                        </svg>
-                        {{ .Name }}
-                    </button>
-                {{- end }}
-            </footer>
-        </form>
+        <dialog>
+            <form data-hx-put="/admin/seasons/range">
+                {{ CSRFInput }}
+                {{ with .StartDate }}<input type="hidden" name="{{ .Name }}" value="{{ .Val }}">{{ end }}
+                {{ with .EndDate }}<input type="hidden" name="{{ .Name }}" value="{{ .Val }}">{{ end }}
+                <footer>
+                    <button type="submit" name="season_id" value=""><span class="sr-only">{{( pgettext "Cancel" "action" )}}</span></button>
+                    {{ range .Seasons -}}
+                        <button type="submit" name="season_id" value="{{ .Slug }}">
+                            <svg width="20px" height="20px">
+                                <circle cx="50%" cy="50%" r="49%" fill="{{ .Color }}" stroke="#000" stroke-width=".5"/>
+                            </svg>
+                            {{ .Name }}
+                        </button>
+                    {{- end }}
+                </footer>
+            </form>
+        </dialog>
     {{ end }}
     <script type="module">
         import {setupCalendar} from "/static/camper.js";