feat: task edition in front end

app/models/task.py

@@ -43,5 +43,5 @@ class Task(AbstractModel):
             "previous_check_date",
         ]:
             if field in data:
-                out_data[field] = data["field"]
+                out_data[field] = data[field]
         return out_data

app/server.py

@@ -64,6 +64,7 @@ class Server(gunicorn.app.base.BaseApplication):
             try:
                 task = await Task.get(id=task_uuid)
                 await task.update_from_dict(parsed_data)
+                await task.save()
                 return task.serialize()
             except tortoise.exceptions.ValidationError:
                 flask.abort(400)

bun.lock

@@ -1,11 +1,11 @@
 {
   "lockfileVersion": 1,
-  "configVersion": 0,
   "workspaces": {
     "": {
       "name": "tout-doux",
       "dependencies": {
         "@lucide/vue": "^1.23.0",
+        "cron-parser": "^5.6.1",
         "vue": "^3.5.38",
       },
       "devDependencies": {
@@ -410,6 +410,8 @@
 
     "convert-source-map": ["convert-source-map@2.0.0", "", {}, "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg=="],
 
+    "cron-parser": ["cron-parser@5.6.1", "", { "dependencies": { "luxon": "^3.7.2" } }, "sha512-QBm4o1PwZiuY7KFbVvW7FLC8bozy7YWzv+Fz6KRS7sQghzcbDZCGxr/Bc5b6TQreAoSwuWVP491dIcK0THCX6A=="],
+
     "cross-spawn": ["cross-spawn@7.0.6", "", { "dependencies": { "path-key": "^3.1.0", "shebang-command": "^2.0.0", "which": "^2.0.1" } }, "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA=="],
 
     "cssesc": ["cssesc@3.0.0", "", { "bin": { "cssesc": "bin/cssesc" } }, "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="],
@@ -586,6 +588,8 @@
 
     "lru-cache": ["lru-cache@5.1.1", "", { "dependencies": { "yallist": "^3.0.2" } }, "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w=="],
 
+    "luxon": ["luxon@3.7.2", "", {}, "sha512-vtEhXh/gNjI9Yg1u4jX/0YVPMvxzHuGgCm6tC5kZyb08yjGWGnqAjGJvcXbqQR2P3MyMEFnRbpcdFS6PBcLqew=="],
+
     "magic-string": ["magic-string@0.30.21", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.5" } }, "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ=="],
 
     "memorystream": ["memorystream@0.3.1", "", {}, "sha512-S3UwM3yj5mtUSEfP41UZmt/0SCoVYUcU1rkXv+BQ5Ig8ndL4sPoJNBUJERafdPb5jjHJGuMgytgKvKIf58XNBw=="],

package.json

@@ -21,6 +21,7 @@
     },
     "dependencies": {
         "@lucide/vue": "^1.23.0",
+        "cron-parser": "^5.6.1",
         "vue": "^3.5.38"
     },
     "devDependencies": {

resources/ts/components/CronInput.vue

@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import { ref, onBeforeMount, watch } from "vue";
+const cron = defineModel<string|null>({ required: true });
+
+const props = defineProps<{editMode: boolean}>();
+
+enum CRON_OPTION {
+    ONE_TIME = 1,
+    EVERY_DAY = 2,
+    EVERY_WEEK = 3,
+    EVERY_MONTH = 4,
+    EVERY_YEAR = 5,
+    SPECIFIC = 6,
+}
+
+const cronOption = ref<CRON_OPTION>(CRON_OPTION.ONE_TIME);
+const cronValue = ref<number>(1);
+
+function updateFromValue() {
+    let value: RegExpMatchArray | null;
+    if (cron.value === null) {
+        cronOption.value = CRON_OPTION.ONE_TIME;
+    } else if ((value = /^0 (\d+) \* \* \*$/i.exec(cron.value)) !== null) {
+        cronOption.value = CRON_OPTION.EVERY_DAY;
+        cronValue.value = parseInt(value[1] ?? '');
+    } else if ((value = /^0 0 \* \* (\d+)$/i.exec(cron.value)) !== null) {
+        cronOption.value = CRON_OPTION.EVERY_WEEK;
+        cronValue.value = parseInt(value[1] ?? '');
+    } else if ((value = /^0 0 (\d+) \* \*$/i.exec(cron.value)) !== null) {
+        cronOption.value = CRON_OPTION.EVERY_MONTH;
+        cronValue.value = parseInt(value[1] ?? '');
+    } else if ((value = /^0 0 1 (\d+) \*$/i.exec(cron.value)) !== null) {
+        cronOption.value = CRON_OPTION.EVERY_YEAR;
+        cronValue.value = parseInt(value[1] ?? '');
+    } else {
+        cronOption.value = CRON_OPTION.SPECIFIC;
+    }
+}
+
+function updateCron() {
+    switch(cronOption.value) {
+        case CRON_OPTION.ONE_TIME:
+            cron.value = null;
+            break;
+        case CRON_OPTION.EVERY_DAY:
+            cron.value = `0 ${cronValue.value.toFixed(0)} * * *`;
+            break;
+        case CRON_OPTION.EVERY_WEEK:
+            cron.value = `0 0 * * ${cronValue.value.toFixed(0)}`;
+            break;
+        case CRON_OPTION.EVERY_MONTH:
+            cron.value = `0 0 ${cronValue.value.toFixed(0)} * *`;
+            break;
+        case CRON_OPTION.EVERY_YEAR:
+            cron.value = `0 0 1 ${cronValue.value.toFixed(0)} *`;
+            break;
+        case CRON_OPTION.SPECIFIC:
+            cron.value ??= '0 0 * * *';
+            break;
+    }
+}
+
+function changecronOption() {
+    switch(cronOption.value) {
+        case CRON_OPTION.EVERY_DAY:
+            cronValue.value = 0;
+            break;
+        case CRON_OPTION.EVERY_WEEK:
+        case CRON_OPTION.EVERY_MONTH:
+        case CRON_OPTION.EVERY_YEAR:
+            cronValue.value = 1;
+            break;
+    }
+    updateCron();
+}
+
+onBeforeMount(updateFromValue);
+watch(cron, () => {
+    if (!props.editMode) {
+        updateFromValue();
+    }
+});
+
+watch(cronValue, updateCron);
+</script>
+
+<template>
+    <div class="flex gap-2">
+        <select v-model="cronOption" class="select" @change="changecronOption">
+          <option :value="CRON_OPTION.ONE_TIME">One time (do not repeat)</option>
+          <option :value="CRON_OPTION.EVERY_DAY">Every day at</option>
+          <option :value="CRON_OPTION.EVERY_WEEK">Every week on</option>
+          <option :value="CRON_OPTION.EVERY_MONTH">Every month on the</option>
+          <option :value="CRON_OPTION.EVERY_YEAR">Every year on</option>
+          <option :value="CRON_OPTION.SPECIFIC">Specific</option>
+        </select>
+        <select v-if="cronOption === CRON_OPTION.EVERY_DAY" v-model="cronValue" class="select">
+          <option v-for="i in Array.from(Array(24).keys())" :key="`h${i}`" :value="i">{{ i.toFixed(0).padStart(2, '0') }}:00</option>
+        </select>
+        <select v-if="cronOption === CRON_OPTION.EVERY_WEEK" v-model="cronValue" class="select">
+          <option :value="1">Monday</option>
+          <option :value="2">Tuesday</option>
+          <option :value="3">Wednesday</option>
+          <option :value="4">Thursday</option>
+          <option :value="5">Friday</option>
+          <option :value="6">Saturday</option>
+          <option :value="7">Sunday</option>
+        </select>
+        <select v-if="cronOption === CRON_OPTION.EVERY_MONTH" v-model="cronValue" class="select">
+          <option v-for="i in Array.from(Array(32).keys())" :key="`d${i}`" :value="i">{{i}}{{ i % 10 == 1 ? 'st' : (i % 10 === 2 ? 'nd': (i % 10 === 3 ? 'rd' : 'th')) }}</option>
+        </select>
+        <select v-if="cronOption === CRON_OPTION.EVERY_YEAR" v-model="cronValue" class="select">
+          <option :value="1">January</option>
+          <option :value="2">February</option>
+          <option :value="3">March</option>
+          <option :value="4">April</option>
+          <option :value="5">May</option>
+          <option :value="6">June</option>
+          <option :value="7">July</option>
+          <option :value="8">August</option>
+          <option :value="9">September</option>
+          <option :value="10">October</option>
+          <option :value="11">November</option>
+          <option :value="12">December</option>
+        </select>
+        <input v-if="cronOption === CRON_OPTION.SPECIFIC" v-model="cron" type="text" class="input font-mono" />
+    </div>
+</template>

resources/ts/components/TaskItem.vue

@@ -1,17 +1,70 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { onBeforeMount, ref, watch, computed } from "vue";
 import type { Task } from "@/types";
 import { Copy, Trash, Check, X } from "@lucide/vue";
+import { updateTask } from "@/api/tasks";
+import { CronExpressionParser } from 'cron-parser'
+import CronInput from "@/components/CronInput.vue";
 
 const editMode = ref<boolean>(false);
 
 const task = defineModel<Task>({ required: true });
+const editName = ref<string>('');
+const editCron = ref<string|null>(null);
+const checked = computed<boolean>(() => {
+    if (task.value.check_date === null) {
+        return false;
+    }
+    if (task.value.reset_cron === null) {
+        return true;
+    }
+    const interval = CronExpressionParser.parse(task.value.reset_cron, {currentDate: task.value.check_date});
+    const nextDate = interval.next();
+    return nextDate.getTime() > (new Date()).getTime();
+});
+
+function save() {
+    void updateTask(task.value.id, { name: editName.value, reset_cron: editCron.value })
+        .then((newTask) => {
+            task.value = newTask;
+        });
+    task.value.name = editName.value;
+    task.value.reset_cron = editCron.value;
+    editMode.value = false;
+}
+
+function check() {
+    if (!checked.value) {
+        void updateTask(task.value.id, { check_date: (new Date()).toISOString(), previous_check_date: task.value.check_date?.toISOString() })
+            .then((newTask) => {
+                task.value = newTask;
+            });
+    } else {
+        void updateTask(task.value.id, { check_date: null, previous_check_date: task.value.check_date?.toISOString() })
+            .then((newTask) => {
+                task.value = newTask;
+            });
+    }
+}
+
+onBeforeMount(() => {
+    editName.value = task.value.name;
+    editCron.value = task.value.reset_cron;
+});
+watch(task, () => {
+    if (!editMode.value && task.value.name !== editName.value) {
+        editName.value = task.value.name;
+    }
+    if (!editMode.value && task.value.reset_cron !== editCron.value) {
+        editCron.value = task.value.reset_cron;
+    }
+});
 </script>
 
 <template>
     <div class="list-row text-left">
         <div class="content-center">
-            <input type="checkbox" class="checkbox" />
+            <input type="checkbox" class="checkbox" :checked="checked" @click.prevent="check" />
         </div>
         <div
             v-if="!editMode"
@@ -21,21 +74,23 @@ const task = defineModel<Task>({ required: true });
             {{ task.name }}
         </div>
         <template v-else>
-            <div>
-                <input v-model="task.name" type="text" class="input mb-1" />
-                <br />
-                <button class="btn btn-square me-1" @click="editMode = false">
-                    <X />
-                </button>
-                <button class="btn btn-square me-1">
-                    <Check />
-                </button>
-                <button class="btn btn-square me-1">
-                    <Copy />
-                </button>
-                <button class="btn btn-square">
-                    <Trash />
-                </button>
+            <div class="flex flex-col gap-2">
+                <div class="flex justify-evenly">
+                    <button class="btn btn-square me-1" @click="editMode = false">
+                        <X />
+                    </button>
+                    <button class="btn btn-square me-1" @click="save">
+                        <Check />
+                    </button>
+                    <button class="btn btn-square me-1">
+                        <Copy />
+                    </button>
+                    <button class="btn btn-square">
+                        <Trash />
+                    </button>
+                </div>
+                <input v-model="editName" type="text" class="input w-full" />
+                <CronInput v-model="editCron" :edit-mode="editMode" />
             </div>
         </template>
     </div>