- Implement ESLint with @antfu/eslint-config and apply consistent formatting across the codebase.
- Refactor `useTasks` to improve task fetching, creation, and updating logic. - Enhance `TodoItem` and `ListScreen` with improved bindings, sorting, and category handling. - Update dependencies and adjust task grouping in various components.
This commit is contained in:
6
eslint.config.js
Normal file
6
eslint.config.js
Normal file
@@ -0,0 +1,6 @@
|
||||
import antfu from '@antfu/eslint-config'
|
||||
|
||||
export default antfu({
|
||||
formatters: true,
|
||||
vue: true,
|
||||
})
|
||||
@@ -37,7 +37,10 @@
|
||||
"tailwindcss": "^4.2.0",
|
||||
"typescript": "~5.9.3",
|
||||
"vite": "^7.3.1",
|
||||
"vue-tsc": "^2.1.10"
|
||||
"vue-tsc": "^2.1.10",
|
||||
"@antfu/eslint-config": "^7.4.3",
|
||||
"eslint": "^9.39.2",
|
||||
"eslint-plugin-format": "^1.4.0"
|
||||
},
|
||||
"packageManager": "pnpm@10.27.0+sha512.72d699da16b1179c14ba9e64dc71c9a40988cbdc65c264cb0e489db7de917f20dcf4d64d8723625f2969ba52d4b7e2a1170682d9ac2a5dcaeaab732b7e16f04a"
|
||||
}
|
||||
2705
pnpm-lock.yaml
generated
2705
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
16
src/App.vue
16
src/App.vue
@@ -1,14 +1,17 @@
|
||||
<script setup lang="ts">
|
||||
import { PhCheckSquareOffset, PhListChecks, PhSliders } from '@phosphor-icons/vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { computed } from 'vue';
|
||||
const router = useRouter();
|
||||
const currentPath = computed(() => router.currentRoute.value.path);
|
||||
import { PhCheckSquareOffset, PhListChecks, PhSliders } from '@phosphor-icons/vue'
|
||||
import { computed, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useTasks } from './composables/useTasks.ts'
|
||||
|
||||
const { fetchTasks } = useTasks()
|
||||
const router = useRouter()
|
||||
const currentPath = computed(() => router.currentRoute.value.path)
|
||||
onMounted(fetchTasks)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="overflow-hidden">
|
||||
|
||||
<main class="pb-40 overflow-y-scroll h-screen">
|
||||
<RouterView />
|
||||
</main>
|
||||
@@ -26,5 +29,4 @@ const currentPath = computed(() => router.currentRoute.value.path);
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
@@ -1,41 +1,46 @@
|
||||
<script setup lang="ts">
|
||||
import { PhCheckSquare, PhDotsThree, PhFlag, PhPause, PhPlay, PhSquare, PhX } from '@phosphor-icons/vue';
|
||||
import { TaskStatus, Task } from '../types.ts';
|
||||
import { DateTime } from 'luxon';
|
||||
import { computed, ref } from 'vue';
|
||||
import { useTasks } from '../composables/useTasks.ts';
|
||||
import type { Task } from '../types.ts'
|
||||
import { PhCheckSquare, PhDotsThree, PhFlag, PhPause, PhPlay, PhSquare, PhX } from '@phosphor-icons/vue'
|
||||
import { DateTime } from 'luxon'
|
||||
import { computed, ref } from 'vue'
|
||||
import { useTasks } from '../composables/useTasks.ts'
|
||||
import { TaskStatus } from '../types.ts'
|
||||
|
||||
const {updateTask} = useTasks()
|
||||
const { task } = defineProps<{ task: Task }>()
|
||||
|
||||
const {task} = defineProps<{task: Task}>()
|
||||
const { updateTask } = useTasks()
|
||||
|
||||
const dueColor = computed(() => {
|
||||
const dueDiff = task.dueDate ? DateTime.fromMillis(task.dueDate).diffNow('days').days : undefined;
|
||||
if (!dueDiff) return '';
|
||||
const dueDiff = task.dueDate ? DateTime.fromMillis(task.dueDate).diffNow('days').days : undefined
|
||||
if (!dueDiff)
|
||||
return ''
|
||||
if (dueDiff < 0) {
|
||||
return 'text-error'
|
||||
} else if (dueDiff < 2) {
|
||||
return 'text-warning';
|
||||
} else if (dueDiff < 7) {
|
||||
return 'text-success';
|
||||
} else {
|
||||
return 'text-neutral';
|
||||
}
|
||||
else if (dueDiff < 2) {
|
||||
return 'text-warning'
|
||||
}
|
||||
else if (dueDiff < 7) {
|
||||
return 'text-success'
|
||||
}
|
||||
else {
|
||||
return 'text-neutral'
|
||||
}
|
||||
})
|
||||
|
||||
const statusSelectVisible = ref(false);
|
||||
const statusSelectVisible = ref(false)
|
||||
|
||||
const handleClick = async(update: Partial<Task>) => {
|
||||
updateTask({...task, ...update})
|
||||
statusSelectVisible.value = false;
|
||||
async function handleClick(update: Partial<Task>) {
|
||||
updateTask({ ...task, ...update })
|
||||
statusSelectVisible.value = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<li class="list-row" >
|
||||
<li class="list-row">
|
||||
<div class="flex items-center justify-center">
|
||||
<button class="btn btn-square btn-ghost" @click="statusSelectVisible = !statusSelectVisible">
|
||||
<PhX :size="20" v-if="statusSelectVisible" />
|
||||
<PhX v-if="statusSelectVisible" :size="20" />
|
||||
<template v-else>
|
||||
<PhSquare v-if="task.status === TaskStatus.WAIT" :size="20" />
|
||||
<PhCheckSquare v-else-if="task.status === TaskStatus.DONE" :size="20" weight="fill" class="text-success" />
|
||||
@@ -46,28 +51,30 @@ const handleClick = async(update: Partial<Task>) => {
|
||||
<Transition>
|
||||
<div v-if="statusSelectVisible" class="">
|
||||
<template v-if="task.status !== TaskStatus.WIP">
|
||||
<button v-if="task.status !== TaskStatus.DONE" class="btn btn-square btn-ghost" @click="handleClick({status: TaskStatus.DONE})">
|
||||
<button v-if="task.status !== TaskStatus.DONE" class="btn btn-square btn-ghost" @click="handleClick({ status: TaskStatus.DONE })">
|
||||
<PhCheckSquare :size="24" weight="regular" class="text-success" />
|
||||
</button>
|
||||
<button v-if="task.status !== TaskStatus.WAIT" class="btn btn-square btn-ghost" @click="handleClick({status: TaskStatus.WAIT})">
|
||||
<button v-if="task.status !== TaskStatus.WAIT" class="btn btn-square btn-ghost" @click="handleClick({ status: TaskStatus.WAIT })">
|
||||
<PhSquare :size="24" weight="regular" />
|
||||
</button>
|
||||
<button v-if="task.status !== TaskStatus.FLAG" class="btn btn-square btn-ghost" @click="handleClick({status: TaskStatus.FLAG})">
|
||||
<button v-if="task.status !== TaskStatus.FLAG" class="btn btn-square btn-ghost" @click="handleClick({ status: TaskStatus.FLAG })">
|
||||
<PhFlag :size="24" weight="fill" class="text-warning" />
|
||||
</button>
|
||||
<button class="btn btn-square btn-ghost" @click="handleClick({status: TaskStatus.WIP})">
|
||||
<button class="btn btn-square btn-ghost" @click="handleClick({ status: TaskStatus.WIP })">
|
||||
<PhPlay :size="24" weight="fill" class="text-info" />
|
||||
</button>
|
||||
</template>
|
||||
<button v-else class="btn btn-square btn-ghost" @click="handleClick({status: TaskStatus.WAIT})">
|
||||
<button v-else class="btn btn-square btn-ghost" @click="handleClick({ status: TaskStatus.WAIT })">
|
||||
<PhPause :size="24" weight="fill" class="text-info" />
|
||||
</button>
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
<div class="flex flex-col justify-center">
|
||||
<div>{{task.title}}</div>
|
||||
<div :class="dueColor" v-if="task.dueDate">{{DateTime.fromMillis(task.dueDate).toFormat('dd/MM/yyyy')}}</div>
|
||||
<div>{{ task.id_ }} {{ task.title }}</div>
|
||||
<div v-if="task.dueDate" :class="dueColor">
|
||||
{{ DateTime.fromMillis(task.dueDate).toFormat('dd/MM/yyyy') }}
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-square btn-ghost">
|
||||
<PhDotsThree :size="24" weight="regular" />
|
||||
|
||||
@@ -1,89 +1,88 @@
|
||||
import { ref } from 'vue';
|
||||
import { useApi } from './useApi.ts';
|
||||
import { Task } from '../types.ts';
|
||||
import { useArrayReduce, useArrayUnique } from '@vueuse/core'
|
||||
import type { Task } from '../types.ts'
|
||||
import { useArrayUnique } from '@vueuse/core'
|
||||
import { ref } from 'vue'
|
||||
import { useApi } from './useApi.ts'
|
||||
|
||||
const tasks = ref<Task[]>([]);
|
||||
const isLoading = ref(false);
|
||||
const error = ref<string | null>(null);
|
||||
const tasks = ref<Task[]>([])
|
||||
const isLoading = ref(false)
|
||||
const error = ref<string | null>(null)
|
||||
|
||||
export function useTasks() {
|
||||
const api = useApi();
|
||||
const api = useApi()
|
||||
|
||||
const fetchTasks = async (force = false) => {
|
||||
if (tasks.value.length > 0 && !force) return;
|
||||
if (tasks.value.length > 0 && !force)
|
||||
return
|
||||
|
||||
isLoading.value = true;
|
||||
error.value = null;
|
||||
isLoading.value = true
|
||||
error.value = null
|
||||
try {
|
||||
const data = await api.get('e5880167-9322-4d7b-8a38-e06bae8a7734/list').then((res) => res.json());
|
||||
tasks.value = data.tasks ?? [];
|
||||
} catch (e: any) {
|
||||
error.value = e.message || 'Failed to fetch tasks';
|
||||
console.error('Error fetching tasks:', e);
|
||||
} finally {
|
||||
isLoading.value = false;
|
||||
const data = await api.get('e5880167-9322-4d7b-8a38-e06bae8a7734/list').then(res => res.json())
|
||||
tasks.value = data.tasks ?? []
|
||||
}
|
||||
catch (e: any) {
|
||||
error.value = e.message || 'Failed to fetch tasks'
|
||||
console.error('Error fetching tasks:', e)
|
||||
}
|
||||
finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const createTask = async (taskData: Partial<Task>) => {
|
||||
isLoading.value = true;
|
||||
error.value = null;
|
||||
isLoading.value = true
|
||||
error.value = null
|
||||
try {
|
||||
// Get next ID as per current logic in CreateScreen.vue
|
||||
const nextId = await api.get('d49dde4c-530d-46ee-8205-d1357563ac16')
|
||||
.then((response) => response.json())
|
||||
.then((json) => json.nextId as number)
|
||||
.catch(() => null);
|
||||
|
||||
if (!nextId) throw new Error('Could not get next task ID');
|
||||
const nextId = tasks.value.sort((a, b) => b.id_ - a.id_).reduce((acc, task) => {
|
||||
if (task.id_ === acc + 1)
|
||||
return acc + 1
|
||||
return task.id_ + 1
|
||||
}, 0)
|
||||
|
||||
const newTask: Partial<Task> = {
|
||||
...taskData,
|
||||
id_: nextId,
|
||||
logs: [],
|
||||
archived: false,
|
||||
};
|
||||
}
|
||||
|
||||
const data = await api.put('e5880167-9322-4d7b-8a38-e06bae8a7734/list', { tasks: [newTask] }).then((res) => res.json());
|
||||
const data = await api.put('e5880167-9322-4d7b-8a38-e06bae8a7734/list', { tasks: [newTask] }).then(res => res.json())
|
||||
if (data.tasks) {
|
||||
tasks.value = data.tasks;
|
||||
tasks.value = data.tasks
|
||||
}
|
||||
}
|
||||
catch (e: any) {
|
||||
error.value = e.message || 'Failed to create task'
|
||||
console.error('Error creating task:', e)
|
||||
throw e
|
||||
}
|
||||
finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
} catch (e: any) {
|
||||
error.value = e.message || 'Failed to create task';
|
||||
console.error('Error creating task:', e);
|
||||
throw e;
|
||||
} finally {
|
||||
isLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const updateTask = async (task: Task) => {
|
||||
console.log('updateTask',task);
|
||||
isLoading.value = true;
|
||||
error.value = null;
|
||||
console.log('updateTask', task)
|
||||
isLoading.value = true
|
||||
error.value = null
|
||||
try {
|
||||
const data = await api.put('e5880167-9322-4d7b-8a38-e06bae8a7734/list', { tasks: [task] }).then((res) => res.json());
|
||||
const data = await api.put('e5880167-9322-4d7b-8a38-e06bae8a7734/list', { tasks: [task] }).then(res => res.json())
|
||||
if (data.tasks) {
|
||||
tasks.value = data.tasks;
|
||||
tasks.value = data.tasks
|
||||
}
|
||||
} catch (e: any) {
|
||||
error.value = e.message || 'Failed to update task';
|
||||
console.error('Error updating task:', e);
|
||||
throw e;
|
||||
} finally {
|
||||
isLoading.value = false;
|
||||
}
|
||||
catch (e: any) {
|
||||
error.value = e.message || 'Failed to update task'
|
||||
console.error('Error updating task:', e)
|
||||
throw e
|
||||
}
|
||||
finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const tasksByCategory = useArrayReduce(tasks.value.sort((a,b) => a.id_ - b.id_), (acc, task) => {
|
||||
const tag = task.tag ?? 'Uncategorized';
|
||||
acc[tag] = acc[tag] ?? [];
|
||||
acc[tag].push(task);
|
||||
return acc;
|
||||
}, {} as Record<string, Task[]>)
|
||||
|
||||
const categories = useArrayUnique(Object.keys(tasksByCategory.value))
|
||||
const categories = useArrayUnique(tasks.value.map(task => task.tag))
|
||||
|
||||
return {
|
||||
tasks,
|
||||
@@ -93,5 +92,5 @@ export function useTasks() {
|
||||
createTask,
|
||||
updateTask,
|
||||
categories,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
<script setup lang="ts">
|
||||
import { router } from '../router.ts';
|
||||
import { useTasks } from '../composables/useTasks.ts';
|
||||
import { Task } from '../types.ts';
|
||||
import type { Task } from '../types.ts'
|
||||
import { useTasks } from '../composables/useTasks.ts'
|
||||
import { router } from '../router.ts'
|
||||
|
||||
const { createTask } = useTasks();
|
||||
const { createTask, tasks } = useTasks()
|
||||
|
||||
const handleSubmit = async(e: Event) => {
|
||||
const data = new FormData(e.target as HTMLFormElement);
|
||||
async function handleSubmit(e: Event) {
|
||||
const data = new FormData(e.target as HTMLFormElement)
|
||||
const task: Partial<Task> = Object.fromEntries(data)
|
||||
|
||||
await createTask(task);
|
||||
await router.push('/');
|
||||
await createTask(task)
|
||||
await router.push('/')
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -18,10 +18,14 @@ const handleSubmit = async(e: Event) => {
|
||||
<div>
|
||||
<form @submit.prevent="handleSubmit">
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend">What is your name?</legend>
|
||||
<input type="text" class="input" name="title" placeholder="Type here" />
|
||||
<legend class="fieldset-legend">
|
||||
What is your name?
|
||||
</legend>
|
||||
<input type="text" class="input" name="title" placeholder="Type here">
|
||||
</fieldset>
|
||||
<button class="btn btn-primary">Submit</button>
|
||||
<button class="btn btn-primary">
|
||||
Submit
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,49 +1,53 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref } from 'vue';
|
||||
import { useTasks } from '../composables/useTasks.ts';
|
||||
import type { Task } from '../types.ts'
|
||||
import { PhCaretDown, PhCaretUp } from '@phosphor-icons/vue'
|
||||
|
||||
import { Task } from '../types.ts';
|
||||
import { PhCaretDown, PhCaretUp } from '@phosphor-icons/vue';
|
||||
import TodoItem from '../components/TodoItem.vue';
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import TodoItem from '../components/TodoItem.vue'
|
||||
import { useTasks } from '../composables/useTasks.ts'
|
||||
|
||||
const { tasks, fetchTasks } = useTasks();
|
||||
const { tasks, fetchTasks } = useTasks()
|
||||
|
||||
onMounted(async () => {
|
||||
await fetchTasks();
|
||||
await fetchTasks()
|
||||
})
|
||||
|
||||
const visibleTasks = computed<Task[]>(() => tasks.value.filter(task => !task.archived))
|
||||
const visibleTasks = computed<Task[]>(() => tasks.value.filter(task => !task.archived).sort((a, b) => a.id_ - b.id_))
|
||||
|
||||
const categorizedTasks = computed(() => visibleTasks.value.reduce())
|
||||
|
||||
const collapsed = ref<string[]>([]);
|
||||
const categorizedTasks = computed(() => visibleTasks.value.reduce((acc, task) => {
|
||||
const tag = task.tag ?? '@uncategorized'
|
||||
acc[tag] = acc[tag] ?? []
|
||||
acc[tag].push(task)
|
||||
return acc
|
||||
}, {} as Record<string, Task[]>))
|
||||
|
||||
const collapsed = ref<string[]>([])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="m-4 rounded-box border border-neutral-100 shadow-md" v-for="(tasks, category) in categorizedTasks" :key="category">
|
||||
<div v-for="(tasks, category) in categorizedTasks" :key="category" class="m-4 rounded-box border border-neutral-100 shadow-md">
|
||||
<div class="m-4 flex justify-between items-center">
|
||||
<div class="badge badge-xl badge-primary">{{ category }}</div>
|
||||
<div class="badge badge-xl badge-primary">
|
||||
{{ category }}
|
||||
</div>
|
||||
<button
|
||||
@click="collapsed.includes(category) ? collapsed.splice(collapsed.indexOf(category), 1) : collapsed.push(category)"
|
||||
class="btn btn-square btn-sm"
|
||||
@click="collapsed.includes(category) ? collapsed.splice(collapsed.indexOf(category), 1) : collapsed.push(category)"
|
||||
>
|
||||
<PhCaretDown :size="20" v-if="collapsed.includes(category)" />
|
||||
<PhCaretUp :size="20" v-else />
|
||||
<PhCaretDown v-if="collapsed.includes(category)" :size="20" />
|
||||
<PhCaretUp v-else :size="20" />
|
||||
</button>
|
||||
</div>
|
||||
<Transition name="fade">
|
||||
<ul v-if="!collapsed.includes(category)" class="list bg-base-100 rounded-box" >
|
||||
<ul v-if="!collapsed.includes(category)" class="list bg-base-100 rounded-box">
|
||||
<TodoItem v-for="task in tasks.sort((a, b) => a.id_ - b.id_)" :key="task.id" :task />
|
||||
</ul>
|
||||
</Transition>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
Reference in New Issue
Block a user