Put calendar’s season selector form in a dialog

This commit is contained in:
jordi fita mas 2023-09-29 01:35:05 +02:00
parent 50cc4c41b3
commit 47ec317010
4 changed files with 62 additions and 23 deletions

View File

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

View File

@ -293,7 +293,7 @@ nav details summary:hover,
nav details summary:focus, nav details summary:focus,
nav details a:hover, nav details a:hover,
nav details button:hover { nav details button:hover {
background-color: var(--camper--color--light-gray); background-color: var(--camper--color--light-gray);
} }
nav details summary img { nav details summary img {
@ -511,6 +511,10 @@ textarea {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.season-calendar table {
width: 100%;
}
} }
.season-calendar table { .season-calendar table {
@ -549,13 +553,27 @@ textarea {
height: .8rem; height: .8rem;
} }
.season-calendar form { .season-calendar form button {
position: fixed;
}
.season-calendar button {
display: flex; display: flex;
gap: 1em; 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 */ /* snack bar */

View File

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

View File

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