1<script lang="ts">
 2  import { DateTime } from "luxon";
 3  import tasksStore from "../store/tasksStore";
 4
 5  let { task }: { task: Task } = $props();
 6
 7  let modalRef = $state<HTMLDialogElement>();
 8  let datetime = $derived(
 9    task.dueDate ? DateTime.fromJSDate(task.dueDate) : DateTime.now()
10  );
11  let hasSchedule = $derived(
12    !!task.byDay || !!task.byMonth || !!task.byMonthDay || !!task.byMonthWeek
13  );
14  let weekNumberInMonth = $derived(
15    Math.ceil((datetime.day + datetime.startOf("month").weekday) / 7)
16  );
17
18  const onRemove = () => {
19    tasksStore.updateTask(task.id, {
20      byDay: undefined,
21      byMonth: undefined,
22      byMonthDay: undefined,
23      byMonthWeek: undefined,
24    });
25    modalRef?.close();
26  };
27
28  const onPickWeekDay = () => {
29    tasksStore.updateTask(task.id, {
30      byDay: datetime.toFormat("EEEE"),
31      byMonth: undefined,
32      byMonthDay: undefined,
33      byMonthWeek: undefined,
34    });
35    modalRef?.close();
36  };
37
38  const onPickMonthDay = () => {
39    tasksStore.updateTask(task.id, {
40      byDay: undefined,
41      byMonth: undefined,
42      byMonthDay: datetime.day,
43      byMonthWeek: undefined,
44    });
45    modalRef?.close();
46  };
47
48  const onPickMonthWeek = () => {
49    tasksStore.updateTask(task.id, {
50      byDay: datetime.toFormat("EEEE"),
51      byMonth: undefined,
52      byMonthDay: undefined,
53      byMonthWeek: weekNumberInMonth,
54    });
55    modalRef?.close();
56  };
57</script>
58
59<button
60  onclick={() => modalRef?.showModal()}
61  class="btn btn-ghost btn-circle btn-sm"
62  class:text-secondary={hasSchedule}>⟳</button
63>
64<dialog bind:this={modalRef} class="modal">
65  <div class="dropdown-content menu w-96 rounded-box bg-base-100 shadow gap-1">
66    <button
67      class="btn btn-soft"
68      class:btn-primary={task.byDay && !task.byMonthWeek}
69      onclick={onPickWeekDay}
70      >Chaque {datetime.setLocale("fr").toFormat("EEEE")}</button
71    >
72    <button
73      class="btn btn-soft"
74      class:btn-primary={task.byMonthDay}
75      onclick={onPickMonthDay}>Tous les {datetime.day} du mois</button
76    >
77    <button
78      class="btn btn-soft"
79      class:btn-primary={task.byDay && task.byMonthWeek}
80      onclick={onPickMonthWeek}
81      >Chaque {weekNumberInMonth}e {datetime.setLocale("fr").toFormat("EEEE")} du
82      mois</button
83    >
84    {#if hasSchedule}
85      <button class="btn btn-soft" onclick={onRemove}
86        >Supprimer la récurrence</button
87      >
88    {/if}
89    <button class="btn btn-ghost" onclick={() => modalRef?.close()}
90      >Annuler</button
91    >
92  </div>
93</dialog>