feat: vue router and quality of life icons
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import type { Alert } from "@/types";
|
||||
import { computed, ref, onBeforeMount } from "vue";
|
||||
import { CircleX, CircleAlert, CircleCheck, Info } from "@lucide/vue";
|
||||
import { CircleXIcon, CircleAlertIcon, CircleCheckIcon, InfoIcon } from "@lucide/vue";
|
||||
|
||||
const props = defineProps<{ alert: Alert }>();
|
||||
const dismissed = ref<boolean>(false);
|
||||
@@ -32,13 +32,13 @@ onBeforeMount(() => {
|
||||
:class="`alert-${alert.type}`"
|
||||
@click="onDismiss"
|
||||
>
|
||||
<CircleX v-if="alert.type === 'error'" />
|
||||
<circle-x-icon v-if="alert.type === 'error'" class="inline" />
|
||||
<!-- alert-error -->
|
||||
<CircleAlert v-if="alert.type === 'warning'" />
|
||||
<circle-alert-icon v-if="alert.type === 'warning'" class="inline" />
|
||||
<!-- alert-warning -->
|
||||
<CircleCheck v-if="alert.type === 'success'" />
|
||||
<circle-check-icon v-if="alert.type === 'success'" class="inline" />
|
||||
<!-- alert-success -->
|
||||
<Info v-if="alert.type === 'info'" />
|
||||
<info-icon v-if="alert.type === 'info'" class="inline" />
|
||||
<!-- alert-info -->
|
||||
<span>{{ alert.message }}</span>
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { onBeforeMount, ref, watch, computed, defineAsyncComponent } from "vue";
|
||||
import type { Task } from "@/types";
|
||||
import { Copy, Trash, Save, X } from "@lucide/vue";
|
||||
import { CopyIcon, TrashIcon, SaveIcon, XIcon } from "@lucide/vue";
|
||||
import { updateTask } from "@/api/tasks";
|
||||
const CronInput = defineAsyncComponent(
|
||||
() => import("@/components/CronInput.vue"),
|
||||
@@ -135,20 +135,20 @@ watch(task, () => {
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex justify-evenly">
|
||||
<button class="btn btn-square me-1" @click="onClose">
|
||||
<X />
|
||||
<x-icon />
|
||||
</button>
|
||||
<button class="btn btn-square me-1" @click="onSave">
|
||||
<Save />
|
||||
<save-icon />
|
||||
</button>
|
||||
<button class="btn btn-square me-1" @click="onClone">
|
||||
<Copy />
|
||||
<copy-icon />
|
||||
</button>
|
||||
<button class="btn btn-square" @click="onDelete">
|
||||
<Trash />
|
||||
<trash-icon />
|
||||
</button>
|
||||
</div>
|
||||
<input v-model="editName" type="text" class="input w-full" />
|
||||
<CronInput v-model="editCron" :edit-mode="editMode" />
|
||||
<cron-input v-model="editCron" :edit-mode="editMode" />
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
@@ -1,246 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onBeforeMount, computed, defineAsyncComponent } from "vue";
|
||||
import type { Task } from "@/types";
|
||||
import { getTasks, createTask, deleteTask } from "@/api/tasks";
|
||||
import { CirclePlus } from "@lucide/vue";
|
||||
const TaskItem = defineAsyncComponent(
|
||||
() => import("@/components/TaskItem.vue"),
|
||||
);
|
||||
import { taskCompleted, sortTasks } from "@/lib/tasks";
|
||||
import { SortType } from "@/enums";
|
||||
import { booleanCookieRef, enumCookieRef } from "@/lib/cookies";
|
||||
import { useAlertStore } from "@/stores/alerts";
|
||||
import { useI18n } from "vue-i18n";
|
||||
|
||||
const taskInput = ref<string>("");
|
||||
const tasks = ref<Task[]>([]);
|
||||
const list = ref<string>("test");
|
||||
|
||||
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));
|
||||
const empty = computed<boolean>(() => tasks.value.length === 0);
|
||||
const allCompleted = computed<boolean>(() => tasks.value.every(taskCompleted));
|
||||
|
||||
const i18n = useI18n();
|
||||
|
||||
const { alertSuccess, alertError, alertWarning } = useAlertStore();
|
||||
|
||||
function fetchTasks() {
|
||||
getTasks(list.value)
|
||||
.then((data: Task[]) => {
|
||||
tasks.value = data;
|
||||
reSortTasks();
|
||||
setTimeout(fetchTasks, 10000);
|
||||
})
|
||||
.catch(() => {
|
||||
if (tasks.value.length !== 0) {
|
||||
alertWarning(i18n.t("alerts.task_refresh_error"));
|
||||
} else {
|
||||
alertError(i18n.t("alerts.task_fetch_error"));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function reSortTasks() {
|
||||
tasks.value = sortTasks(tasks.value, sortType.value, sortReverse.value);
|
||||
}
|
||||
|
||||
function onNewTask() {
|
||||
if (taskInput.value.trim()) {
|
||||
createTask(list.value, {
|
||||
name: taskInput.value.trim(),
|
||||
reset_cron: null,
|
||||
})
|
||||
.then((data: Task) => {
|
||||
tasks.value.push(data);
|
||||
reSortTasks();
|
||||
alertSuccess(i18n.t("alerts.task_created"));
|
||||
})
|
||||
.catch(() => {
|
||||
alertError(i18n.t("alerts.task_create_error"));
|
||||
})
|
||||
.finally(() => {
|
||||
taskInput.value = "";
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function onCloneTask(task: Task) {
|
||||
createTask(list.value, {
|
||||
name: task.name,
|
||||
reset_cron: task.reset_cron,
|
||||
})
|
||||
.then((data: Task) => {
|
||||
tasks.value.push(data);
|
||||
alertSuccess(i18n.t("alerts.task_cloned"));
|
||||
})
|
||||
.catch(() => {
|
||||
alertError(i18n.t("alerts.task_create_error"));
|
||||
});
|
||||
}
|
||||
|
||||
function onDeleteTask(task: Task) {
|
||||
deleteTask(task.id)
|
||||
.then(() => {
|
||||
alertSuccess(i18n.t("alerts.task_deleted"));
|
||||
})
|
||||
.catch(() => {
|
||||
alertError(i18n.t("alerts.task_delete_error"));
|
||||
});
|
||||
|
||||
tasks.value.splice(tasks.value.indexOf(task), 1);
|
||||
}
|
||||
|
||||
function onChangeSortType() {
|
||||
reSortTasks();
|
||||
}
|
||||
|
||||
function onChangeSortReverse() {
|
||||
reSortTasks();
|
||||
}
|
||||
|
||||
onBeforeMount(fetchTasks);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ul class="list">
|
||||
<template v-for="(task, i) in tasks" :key="task.id">
|
||||
<li v-if="tasks[i] && (!separateCompleted || !taskCompleted(task))">
|
||||
<task-item
|
||||
v-model="tasks[i]"
|
||||
:show-last-checked="showLastChecked"
|
||||
:show-next-reset="showNextReset"
|
||||
@clone="onCloneTask"
|
||||
@delete="onDeleteTask"
|
||||
/>
|
||||
</li>
|
||||
</template>
|
||||
<li v-if="empty" class="list-row italic text-xl font-extralight">
|
||||
{{ $t("empty_hint") }}
|
||||
</li>
|
||||
<li
|
||||
v-else-if="allCompleted && separateCompleted"
|
||||
class="list-row italic text-xl font-extralight"
|
||||
>
|
||||
{{ $t("all_completed_hint") }}
|
||||
</li>
|
||||
<li class="list-row">
|
||||
<div class="list-col-grow">
|
||||
<input
|
||||
v-model="taskInput"
|
||||
type="text"
|
||||
:placeholder="$t('new_task_hint')"
|
||||
class="input"
|
||||
@keyup.enter="onNewTask"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
class="btn btn-square"
|
||||
:disabled="taskInput.trim().length === 0"
|
||||
@click="onNewTask"
|
||||
>
|
||||
<CirclePlus />
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div
|
||||
v-if="separateCompleted && hasCompleted"
|
||||
class="collapse collapse-arrow"
|
||||
>
|
||||
<input id="completed-dropdown" type="checkbox" />
|
||||
<div class="collapse-title mb-0">{{ $t("completed") }}</div>
|
||||
<div class="collapse-content p-0">
|
||||
<ul class="list">
|
||||
<template
|
||||
v-for="(task, i) in tasks"
|
||||
:key="`${task.id}-completed`"
|
||||
>
|
||||
<li v-if="tasks[i] && taskCompleted(task)">
|
||||
<task-item
|
||||
v-model="tasks[i]"
|
||||
:show-last-checked="showLastChecked"
|
||||
:show-next-reset="showNextReset"
|
||||
@clone="onCloneTask"
|
||||
@delete="onDeleteTask"
|
||||
/>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="collapse collapse-arrow font-light text-sm">
|
||||
<input id="options-dropdown" type="checkbox" />
|
||||
<div class="collapse-title">{{ $t("options.title") }}</div>
|
||||
<div class="collapse-content text-sm">
|
||||
<fieldset class="fieldset flex flex-col gap-2">
|
||||
<label class="label">
|
||||
Sort by
|
||||
<select
|
||||
v-model="sortType"
|
||||
class="select"
|
||||
@change="onChangeSortType"
|
||||
>
|
||||
<option :value="SortType.CREATED_AT">
|
||||
{{ $t("options.sort.created_at") }}
|
||||
</option>
|
||||
<option :value="SortType.UPDATED_AT">
|
||||
{{ $t("options.sort.updated_at") }}
|
||||
</option>
|
||||
<option :value="SortType.CHECK_DATE">
|
||||
{{ $t("options.sort.check_date") }}
|
||||
</option>
|
||||
<option :value="SortType.RESET_DATE">
|
||||
{{ $t("options.sort.reset_date") }}
|
||||
</option>
|
||||
<option :value="SortType.NAME">
|
||||
{{ $t("options.sort.name") }}
|
||||
</option>
|
||||
</select>
|
||||
</label>
|
||||
<label class="label">
|
||||
<input
|
||||
v-model="sortReverse"
|
||||
type="checkbox"
|
||||
class="checkbox"
|
||||
@change="onChangeSortReverse"
|
||||
/>
|
||||
{{ $t("options.reverse_sort") }}
|
||||
</label>
|
||||
<label class="label">
|
||||
<input
|
||||
v-model="showLastChecked"
|
||||
type="checkbox"
|
||||
class="checkbox"
|
||||
/>
|
||||
{{ $t("options.last_checked") }}
|
||||
</label>
|
||||
<label class="label">
|
||||
<input
|
||||
v-model="showNextReset"
|
||||
type="checkbox"
|
||||
class="checkbox"
|
||||
/>
|
||||
{{ $t("options.next_reset") }}
|
||||
</label>
|
||||
<label class="label">
|
||||
<input
|
||||
v-model="separateCompleted"
|
||||
type="checkbox"
|
||||
class="checkbox"
|
||||
/>
|
||||
{{ $t("options.separate_completed") }}
|
||||
</label>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user