feat: store options in cookies

README.md

@@ -11,14 +11,14 @@
 - [x] list option: show next refresh
 - [x] list option: move completed below
 - [x] list option: hide completed
-- [ ] options in cookies
-- [ ] list per URL
+- [x] options in cookies
 - [ ] Empty list message
-- [ ] home screen
 - [ ] change lang
-- [ ] lang in cookies
 - [ ] toasts
 - [ ] handle errors
+- [ ] list per URL
+- [ ] home screen
+- [ ] lang in cookies
 - [ ] simple view
 - [ ] Dockerfile
 - [ ] README

resources/ts/components/TaskList.vue

@@ -6,15 +6,17 @@ import { CirclePlus } from "@lucide/vue";
 import TaskItem from "@/components/TaskItem.vue";
 import { taskCompleted, sortTasks } from "@/lib/tasks";
 import { SortType } from "@/enums";
+import { booleanCookieRef, enumCookieRef } from "@/lib/cookies";
 
 const taskInput = ref<string>("");
 const tasks = ref<Task[]>([]);
 const list = ref<string>("test");
-const sortType = ref<SortType>(SortType.RESET_DATE);
-const sortReverse = ref<boolean>(false);
-const showLastChecked = ref<boolean>(false);
-const showNextReset = ref<boolean>(false);
-const separateCompleted = ref<boolean>(false);
+
+const sortType = enumCookieRef<SortType>("toutDouxSortType", SortType.CREATED_AT);
+const sortReverse = booleanCookieRef("toutDouxSortReverse", false);
+const showLastChecked = booleanCookieRef("toutDouxShowLastChecked", false);
+const showNextReset = booleanCookieRef("toutDouxShowNextReset", false);
+const separateCompleted = booleanCookieRef("toutDouxSeparateCompleted", false);
 
 const hasCompleted = computed<boolean>(() => tasks.value.some(taskCompleted));
 

resources/ts/enums.ts

@@ -1,16 +1,16 @@
 export enum CronType {
-    ONE_TIME = 1,
-    EVERY_DAY = 2,
-    EVERY_WEEK = 3,
-    EVERY_MONTH = 4,
-    EVERY_YEAR = 5,
-    SPECIFIC = 6,
+    ONE_TIME,
+    EVERY_DAY,
+    EVERY_WEEK,
+    EVERY_MONTH,
+    EVERY_YEAR,
+    SPECIFIC,
 }
 
 export enum SortType {
-    CREATED_AT = 1,
-    UPDATED_AT = 2,
-    CHECK_DATE = 3,
-    RESET_DATE = 4,
-    NAME = 5,
+    CREATED_AT,
+    UPDATED_AT,
+    CHECK_DATE,
+    RESET_DATE,
+    NAME,
 }

resources/ts/lib/cookies.ts

@@ -0,0 +1,52 @@
+import { customRef } from "vue";
+
+export function setCookie(name: string, value: string, days = 365) {
+    const date = new Date();
+    date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
+    const expires = `expires=${date.toUTCString()}`;
+    document.cookie = `${name}=${value}; path=/; ${expires}`;
+}
+
+export function getCookie(name: string, defaultValue: string): string {
+    const prefix = `${name}=`;
+    const decodedCookie = decodeURIComponent(document.cookie);
+    const cookies = decodedCookie.split(";");
+    for (const cookie of cookies) {
+        if (cookie.trim().startsWith(prefix)) {
+            return cookie.trim().substring(prefix.length, cookie.length);
+        }
+    }
+    return defaultValue;
+}
+
+export function cookieRef<T>(
+    name: string,
+    defaultValue: T,
+    deserializer: (value: string) => T,
+    serializer: (value: T) => string,
+) {
+    let value = deserializer(getCookie(name, serializer(defaultValue)));
+    setCookie(name, serializer(value));
+
+    return customRef((track, trigger) => {
+        return {
+            get() {
+                track();
+                return value;
+            },
+            set(newValue) {
+                value = newValue;
+                trigger();
+                setCookie(name, serializer(value));
+            },
+        };
+    });
+}
+
+export function booleanCookieRef(name: string, defaultValue: boolean) {
+    return cookieRef<boolean>(name, defaultValue, (v) => v === "1", (v) => v ? "1" : "0");
+}
+
+export function enumCookieRef<T extends number>(name: string, defaultValue: T) {
+    return cookieRef<T>(name, defaultValue, (v) => parseInt(v) as T, (v: T) => v.toFixed(0));
+}