chore: add playground demo todos

Author: posva

playground/src/demos/TodoList/components/TodoItem.vue

@@ -0,0 +1,69 @@
+<script lang="ts" setup>
+import type { Todo } from '../types'
+import { computed, nextTick, ref } from 'vue'
+
+const props = defineProps<{
+  todo: Todo & { id: string }
+}>()
+
+const emit = defineEmits<{
+  (event: 'update:todo', id: string, newTodo: Todo): void
+  (event: 'remove', id: string): void
+}>()
+
+const isEditing = ref(false)
+const textCopy = ref('')
+
+function startEdit() {
+  textCopy.value = props.todo.text
+  isEditing.value = true
+}
+
+function saveTodo() {
+  if (!isEditing.value) return
+
+  emit('update:todo', props.todo.id, {
+    ...props.todo,
+    text: textCopy.value,
+  })
+
+  isEditing.value = false
+}
+
+const finished = computed({
+  get: () => props.todo.finished,
+  set(finished) {
+    emit('update:todo', props.todo.id, { ...props.todo, finished })
+  },
+})
+
+async function lostFocus() {
+  await nextTick()
+  saveTodo()
+}
+</script>
+
+<template>
+  <li>
+    <form v-if="isEditing" @submit.prevent="saveTodo">
+      <input
+        v-model="textCopy"
+        v-focus
+        type="text"
+        @keydown.esc="isEditing = false"
+        @blur="lostFocus"
+      />
+      <button>Save</button>
+      <button type="button" @click="isEditing = false">Cancel</button>
+    </form>
+    <template v-else>
+      <input v-model="finished" type="checkbox" />
+      <span
+        :class="todo.finished ? 'line-through' : ''"
+        @dblclick="startEdit"
+        >{{ todo.text }}</span
+      >
+    </template>
+    <button @click="$emit('delete', todo.id)">Delete</button>
+  </li>
+</template>

playground/src/demos/TodoList/types.ts

@@ -0,0 +1,5 @@
+export interface Todo {
+  created: Date
+  finished: boolean
+  text: string
+}

playground/src/main.ts

@@ -1,4 +1,4 @@
-import { createApp } from 'vue'
+import { createApp, nextTick } from 'vue'
 import { createPinia } from 'pinia'
 import {
   VueFire,
@@ -33,13 +33,19 @@ const store = createStore({
 
 const app = createApp(App)
 app
+  .directive('focus', {
+    mounted: async (el) => {
+      await nextTick()
+      el.focus()
+    },
+  })
   .use(createPinia())
   .use(VueFire, {
     firebaseApp: createFirebaseApp(),
     modules: [
       VueFireAuth(),
       VueFireAppCheck({
-        // debug: process.env.NODE_ENV !== 'production',
+        debug: process.env.NODE_ENV !== 'production',
         isTokenAutoRefreshEnabled: true,
         provider: new ReCaptchaV3Provider(
           '6LfJ0vgiAAAAAHheQE7GQVdG_c9m8xipBESx_SKI'

playground/src/pages/todos.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { Todo } from '@/demos/TodoList/types'
+import TodoItem from '@/demos/TodoList/components/TodoItem.vue'
 import {
   addDoc,
   collection,
@@ -12,20 +14,18 @@ import {
 import { ref } from 'vue'
 import { useCollection, useFirestore } from 'vuefire'
 
-interface Todo {
-  created: Date
-  finished: boolean
-  text: string
-}
-
 // TODO: expose some kind of type to make this posssible
 // type TodoData = _VueFireQueryData<Todo>
 
 const db = useFirestore()
 const todosRef = collection(db, 'todos')
 const todosWithConverterRef = collection(db, 'todos').withConverter<Todo>({
   toFirestore(todoModel) {
-    const { id, ...todo } = todoModel
+    const {
+      // @ts-expect-error: it might not exist
+      id,
+      ...todo
+    } = todoModel
     return todo
   },
   fromFirestore(snapshot, options) {
@@ -55,14 +55,13 @@ function addTodo() {
   }
 }
 
-function updateTodoText(todo: Todo, newText: string) {
-  updateDoc(doc(db, 'todos', todo.id), {
-    text: newText,
-  })
+function updateTodo(id: string, newTodo: Todo) {
+  // NOTE: the copy shouldn't be necessary...
+  updateDoc(doc(todosRef, id), { ...newTodo })
 }
 
-function removeTodo(todo: Todo) {
-  deleteDoc(doc(db, 'todos', todo.id))
+function removeTodo(id: string) {
+  deleteDoc(doc(db, 'todos', id))
 }
 
 function toggleTodos() {
@@ -77,12 +76,12 @@ function toggleTodos() {
     <button>Add Todo</button>
   </form>
   <ul>
-    <li v-for="todo in todos">
-      <input
-        :value="todo.text"
-        @input="updateTodoText(todo, $event.target.value)"
-      />
-      <button @click="removeTodo(todo)">X</button>
-    </li>
+    <TodoItem
+      v-for="todo in todos"
+      :key="todo.id"
+      :todo="todo"
+      @remove="removeTodo"
+      @update:todo="updateTodo"
+    />
   </ul>
 </template>