From 47ec317010f677cd6c9e170f8bf0482823938cd9 Mon Sep 17 00:00:00 2001
From: jordi fita mas <jordi@tandem.blog>
Date: Fri, 29 Sep 2023 01:35:05 +0200
Subject: [PATCH] =?UTF-8?q?Put=20calendar=E2=80=99s=20season=20selector=20?=
 =?UTF-8?q?form=20in=20a=20dialog?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pkg/season/admin.go                        |  4 ++-
 web/static/camper.css                      | 32 ++++++++++++++++-----
 web/static/camper.js                       | 16 +++++++++++
 web/templates/admin/season/calendar.gohtml | 33 ++++++++++++----------
 4 files changed, 62 insertions(+), 23 deletions(-)

diff --git a/pkg/season/admin.go b/pkg/season/admin.go
index c6e183f..a2268e5 100644
--- a/pkg/season/admin.go
+++ b/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
diff --git a/web/static/camper.css b/web/static/camper.css
index 4e77dcd..fb8defe 100644
--- a/web/static/camper.css
+++ b/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,17 +553,31 @@ 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 */
-#snackbar [role="alert"] { 
+#snackbar [role="alert"] {
     cursor: pointer;
     background-color: var(--camper--color--black);
     color: var(--camper--color--white);
diff --git a/web/static/camper.js b/web/static/camper.js
index 7764471..2016736 100644
--- a/web/static/camper.js
+++ b/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) => {
diff --git a/web/templates/admin/season/calendar.gohtml b/web/templates/admin/season/calendar.gohtml
index df3ed58..ce33880 100644
--- a/web/templates/admin/season/calendar.gohtml
+++ b/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";