Feat/todo

javascript/dwa-starter-vue/src/components/TodoList.vue

@@ -1,6 +1,181 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { useWeb5, type Task } from '@/composables/web5'
+import { onBeforeMount, ref } from 'vue'
+import { Input } from '@/components/ui/input'
+import { Button } from '@/components/ui/button'
+import { TrashIcon, Pencil2Icon } from '@radix-icons/vue'
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow
+} from '@/components/ui/table'
+import { Checkbox } from '@/components/ui/checkbox'
+import { toast } from '@/components/ui/toast/use-toast'
+
+const task = ref('')
+const tasks = ref<Task[]>([])
+
+const { listTasks, createTask, updateTask, deleteTask } = useWeb5()
+
+onBeforeMount(() => {
+  findTasks()
+})
+
+const findTasks = async () => {
+  tasks.value = await listTasks()
+}
+
+async function addTodo() {
+  try {
+    if (!task.value) {
+      toast({
+        title: 'Error',
+        description: 'task cant be null'
+      })
+      return
+    }
+    const data = {
+      completed: false,
+      title: task.value
+    }
+
+    await createTask(data)
+    await findTasks()
+    task.value = ''
+    toast({
+      description: 'Todo added successfully'
+    })
+  } catch (err: any) {
+    toast({
+      description: `Failed to add todo: ${err.message || 'Unknown error'}`,
+      title: 'Error'
+    })
+  }
+}
+
+async function deleteTodo(id: string) {
+  try {
+    await deleteTask(id)
+    await findTasks()
+    toast({
+      description: 'Todo deleted successfully'
+    })
+  } catch (err: any) {
+    toast({
+      description: `Failed to delete todo: ${err.message || 'Unknown error'}`,
+      title: 'Error'
+    })
+  }
+}
+
+async function toggleTodoStatus(task: Task) {
+  try {
+    await updateTask(task)
+    await findTasks()
+    toast({
+      description: `Todo status updated to ${task.completed ? 'completed' : 'incomplete'}`
+    })
+  } catch (err: any) {
+    toast({
+      description: `Failed to update todo: ${err.message || 'Unknown error'}`,
+      title: 'Error'
+    })
+  }
+}
+
+function startEditing(id?: string) {
+  const task = tasks.value.find((i) => i.id === id)
+  if (task) task.isEditing = true
+}
+
+function stopEditing(id?: string) {
+  const task = tasks.value.find((i) => i.id === id)
+  if (task) task.isEditing = false
+}
+
+async function updateTodoTitle(task: Task) {
+  try {
+    await updateTask(task)
+    await findTasks()
+    toast({
+      description: 'Todo title updated successfully'
+    })
+  } catch (err: any) {
+    toast({
+      description: `Failed to update todo title: ${err.message || 'Unknown error'}`,
+      title: 'Error'
+    })
+  } finally {
+    stopEditing(task.id)
+  }
+}
+</script>
 
 <template>
-  <h1>Todo</h1>
-  <p>coming soon</p>
+  <div class="flex flex-col gap-4">
+    <h1>Todos</h1>
+
+    <div class="lg:w-1/3 flex items-center gap-2">
+      <label for="add-todo" class="sr-only">Add a todo</label>
+      <Input
+        type="text"
+        id="add-todo"
+        v-model="task"
+        @keydown.enter.exact.prevent="addTodo"
+        placeholder="what are you working on?"
+      />
+      <Button type="button" @click="addTodo"> Add </Button>
+    </div>
+    <div v-if="!tasks.length">
+      <h2>no todos created yet</h2>
+    </div>
+
+    <Table v-else class="lg:w-1/3">
+      <TableCaption>Todos.</TableCaption>
+      <TableHeader>
+        <TableRow>
+          <TableHead class="w-[100px]"> Completed? </TableHead>
+          <TableHead>Title</TableHead>
+          <TableHead class="text-right"> </TableHead>
+          <TableHead class="text-right"> </TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        <TableRow v-for="todo in tasks" :key="todo.id">
+          <TableCell>
+            <Checkbox
+              :checked="todo.completed"
+              @click="toggleTodoStatus({ ...todo, completed: !todo.completed })"
+            />
+          </TableCell>
+          <TableCell class="cursor-pointer">
+            <div v-if="todo.isEditing">
+              <Input
+                v-model="todo.title"
+                @keydown.enter="updateTodoTitle(todo)"
+                @blur="updateTodoTitle(todo)"
+              />
+            </div>
+            <div v-else @click="startEditing(todo.id)">
+              {{ todo.title }}
+            </div>
+          </TableCell>
+          <TableCell class="text-right">
+            <Button variant="ghost" @click="startEditing(todo.id)">
+              <Pencil2Icon class="w-4 h-4" />
+            </Button>
+          </TableCell>
+          <TableCell class="text-right">
+            <Button variant="ghost" @click="deleteTodo(todo.id as string)">
+              <TrashIcon class="w-4 h-4" />
+            </Button>
+          </TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  </div>
 </template>

javascript/dwa-starter-vue/src/components/ui/checkbox/Checkbox.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'
+import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'radix-vue'
+import { CheckIcon } from '@radix-icons/vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<CheckboxRootProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<CheckboxRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <CheckboxRoot
+    v-bind="forwarded"
+    :class="
+      cn(
+        'peer h-4 w-4 shrink-0 rounded-sm border border-slate-200 border-slate-900 shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-slate-950 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-slate-900 data-[state=checked]:text-slate-50 dark:border-slate-800 dark:border-slate-50 dark:focus-visible:ring-slate-300 dark:data-[state=checked]:bg-slate-50 dark:data-[state=checked]:text-slate-900',
+        props.class
+      )
+    "
+  >
+    <CheckboxIndicator class="flex h-full w-full items-center justify-center text-current">
+      <slot>
+        <CheckIcon class="h-4 w-4" />
+      </slot>
+    </CheckboxIndicator>
+  </CheckboxRoot>
+</template>

javascript/dwa-starter-vue/src/components/ui/checkbox/index.ts

@@ -0,0 +1 @@
+export { default as Checkbox } from './Checkbox.vue'

javascript/dwa-starter-vue/src/components/ui/table/Table.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div class="w-full overflow-auto">
+    <table :class="cn('w-full caption-bottom text-sm', props.class)">
+      <slot />
+    </table>
+  </div>
+</template>

javascript/dwa-starter-vue/src/components/ui/table/TableBody.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <tbody :class="cn('[&_tr:last-child]:border-0', props.class)">
+    <slot />
+  </tbody>
+</template>

javascript/dwa-starter-vue/src/components/ui/table/TableCaption.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <caption :class="cn('mt-4 text-sm text-slate-500 dark:text-slate-400', props.class)">
+    <slot />
+  </caption>
+</template>

javascript/dwa-starter-vue/src/components/ui/table/TableCell.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <td
+    :class="
+      cn(
+        'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </td>
+</template>

javascript/dwa-starter-vue/src/components/ui/table/TableEmpty.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import TableRow from './TableRow.vue'
+import TableCell from './TableCell.vue'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(defineProps<{
+  class?: HTMLAttributes['class']
+  colspan?: number
+}>(), {
+  colspan: 1,
+})
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <TableRow>
+    <TableCell
+      :class="
+        cn(
+          'p-4 whitespace-nowrap align-middle text-sm text-slate-950 dark:text-slate-50',
+          props.class,
+        )
+      "
+      v-bind="delegatedProps"
+    >
+      <div class="flex items-center justify-center py-10">
+        <slot />
+      </div>
+    </TableCell>
+  </TableRow>
+</template>

javascript/dwa-starter-vue/src/components/ui/table/TableFooter.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <tfoot :class="cn('border-t bg-slate-100/50 font-medium [&>tr]:last:border-b-0 dark:bg-slate-800/50', props.class)">
+    <slot />
+  </tfoot>
+</template>

javascript/dwa-starter-vue/src/components/ui/table/TableHead.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <th :class="cn('h-10 px-2 text-left align-middle font-medium text-slate-500 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5 dark:text-slate-400', props.class)">
+    <slot />
+  </th>
+</template>

javascript/dwa-starter-vue/src/components/ui/table/TableHeader.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <thead :class="cn('[&_tr]:border-b', props.class)">
+    <slot />
+  </thead>
+</template>

javascript/dwa-starter-vue/src/components/ui/table/TableRow.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <tr :class="cn('border-b transition-colors hover:bg-slate-100/50 data-[state=selected]:bg-slate-100 dark:hover:bg-slate-800/50 dark:data-[state=selected]:bg-slate-800', props.class)">
+    <slot />
+  </tr>
+</template>