Moved things around

frontend/vue-app/src/components/task/ChildTaskList.vue

@@ -0,0 +1,171 @@
+<script setup lang="ts">
+import { ref, watch, onBeforeUnmount, nextTick, computed } from 'vue'
+import { defineProps, defineEmits } from 'vue'
+import { getCachedImageUrl, revokeAllImageUrls } from '../../common/imageCache'
+import type { Task } from '@/common/models'
+
+const imageCacheName = 'images-v1'
+
+const props = defineProps<{
+  title: string
+  taskIds: string[]
+  childId: string | number | null
+  isParentAuthenticated: boolean
+  filterType?: number | null
+}>()
+const emit = defineEmits<{
+  (e: 'trigger-task', task: Task): void
+}>()
+
+const tasks = ref<Task[]>([])
+const loading = ref(true)
+const error = ref<string | null>(null)
+const scrollWrapper = ref<HTMLDivElement | null>(null)
+const taskRefs = ref<Record<string, HTMLElement | null>>({})
+
+const lastCenteredTaskId = ref<string | null>(null)
+const readyTaskId = ref<string | null>(null)
+
+const fetchTasks = async () => {
+  const taskPromises = props.taskIds.map((id) =>
+    fetch(`/api/task/${id}`).then((res) => {
+      if (!res.ok) throw new Error(`HTTP ${res.status}`)
+      return res.json()
+    }),
+  )
+
+  try {
+    const results = await Promise.all(taskPromises)
+    tasks.value = results
+
+    // Fetch images for each task (uses shared imageCache)
+    await Promise.all(tasks.value.map(fetchImage))
+  } catch (err) {
+    error.value = err instanceof Error ? err.message : 'Failed to fetch tasks'
+    console.error('Error fetching tasks:', err)
+  } finally {
+    loading.value = false
+  }
+}
+
+const fetchImage = async (task: Task) => {
+  if (!task.image_id) {
+    console.log(`No image ID for task: ${task.id}`)
+    return
+  }
+
+  try {
+    const url = await getCachedImageUrl(task.image_id, imageCacheName)
+    task.image_url = url
+  } catch (err) {
+    console.error('Error fetching image for task', task.id, err)
+  }
+}
+
+const centerTask = async (taskId: string) => {
+  await nextTick()
+  const wrapper = scrollWrapper.value
+  const card = taskRefs.value[taskId]
+  if (wrapper && card) {
+    const wrapperRect = wrapper.getBoundingClientRect()
+    const cardRect = card.getBoundingClientRect()
+    const wrapperScrollLeft = wrapper.scrollLeft
+    const cardCenter = cardRect.left + cardRect.width / 2
+    const wrapperCenter = wrapperRect.left + wrapperRect.width / 2
+    const scrollOffset = cardCenter - wrapperCenter
+    wrapper.scrollTo({
+      left: wrapperScrollLeft + scrollOffset,
+      behavior: 'smooth',
+    })
+  }
+}
+
+const triggerTask = (taskId: string) => {
+  const task = tasks.value.find((t) => t.id === taskId)
+  if (task) emit('trigger-task', task)
+}
+
+const handleTaskClick = async (taskId: string) => {
+  await nextTick()
+  const wrapper = scrollWrapper.value
+  const card = taskRefs.value[taskId]
+  if (!wrapper || !card) return
+
+  const wrapperRect = wrapper.getBoundingClientRect()
+  const cardRect = card.getBoundingClientRect()
+  const cardCenter = cardRect.left + cardRect.width / 2
+  const cardFullyVisible = cardCenter >= wrapperRect.left && cardCenter <= wrapperRect.right
+
+  if (!cardFullyVisible || lastCenteredTaskId.value !== taskId) {
+    // Center the task, but don't trigger
+    await centerTask(taskId)
+    lastCenteredTaskId.value = taskId
+    readyTaskId.value = taskId
+    return
+  }
+
+  // If already centered and visible, emit to parent
+  triggerTask(taskId)
+  readyTaskId.value = null
+}
+
+const filteredTasks = computed(() => {
+  if (props.filterType == 1) {
+    return tasks.value.filter((t) => t.is_good)
+  } else if (props.filterType == 2) {
+    return tasks.value.filter((t) => !t.is_good)
+  }
+  return tasks.value
+})
+
+watch(
+  () => props.taskIds,
+  (newTaskIds) => {
+    if (newTaskIds && newTaskIds.length > 0) {
+      fetchTasks()
+    } else {
+      tasks.value = []
+      loading.value = false
+    }
+  },
+  { immediate: true },
+)
+
+// revoke all created object URLs when component unmounts
+onBeforeUnmount(() => {
+  revokeAllImageUrls()
+})
+</script>
+
+<template>
+  <div class="child-list-container">
+    <h3>{{ title }}</h3>
+
+    <div v-if="loading" class="loading">Loading tasks...</div>
+    <div v-else-if="error" class="error">Error: {{ error }}</div>
+    <div v-else-if="filteredTasks.length === 0" class="empty">No {{ title }}</div>
+    <div v-else class="scroll-wrapper" ref="scrollWrapper">
+      <div class="item-scroll">
+        <div
+          v-for="task in filteredTasks"
+          :key="task.id"
+          class="item-card"
+          :class="{ good: task.is_good, bad: !task.is_good, ready: readyTaskId === task.id }"
+          :ref="(el) => (taskRefs[task.id] = el)"
+          @click="() => handleTaskClick(task.id)"
+        >
+          <div class="item-name">{{ task.name }}</div>
+          <img v-if="task.image_url" :src="task.image_url" alt="Task Image" class="task-image" />
+          <div
+            class="item-points"
+            :class="{ 'good-points': task.is_good, 'bad-points': !task.is_good }"
+          >
+            {{ task.is_good ? task.points : -task.points }} Points
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>

frontend/vue-app/src/components/task/TaskEditView.vue

@@ -0,0 +1,255 @@
+<script setup lang="ts">
+import { ref, onMounted, computed, defineEmits, nextTick } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import ImagePicker from '@/components/utils/ImagePicker.vue'
+import '@/assets/edit-forms.css'
+
+const route = useRoute()
+const router = useRouter()
+const isEdit = computed(() => !!route.params.id)
+const emit = defineEmits<{
+  (e: 'updated'): void
+}>()
+// Define props
+const props = defineProps<{
+  id?: string
+}>()
+
+const name = ref('')
+const points = ref(0)
+const isGood = ref(true)
+const selectedImageId = ref<string | null>(null)
+const localImageFile = ref<File | null>(null)
+
+const nameInput = ref<HTMLInputElement | null>(null)
+
+const loading = ref(false)
+const error = ref<string | null>(null)
+
+// Load task if editing
+onMounted(async () => {
+  if (isEdit.value) {
+    loading.value = true
+    try {
+      const resp = await fetch(`/api/task/${props.id}`)
+      if (!resp.ok) throw new Error('Failed to load task')
+      const data = await resp.json()
+      name.value = data.name
+      points.value = Number(data.points) || 0
+      isGood.value = data.is_good
+      selectedImageId.value = data.image_id
+    } catch (e) {
+      error.value = 'Could not load task.'
+    } finally {
+      loading.value = false
+      // Delay focus until after DOM updates and event propagation
+      await nextTick()
+      nameInput.value?.focus()
+    }
+  } else {
+    // For create, also use nextTick
+    await nextTick()
+    nameInput.value?.focus()
+  }
+})
+
+const submit = async () => {
+  let imageId = selectedImageId.value
+  error.value = null
+  if (!name.value.trim()) {
+    error.value = 'Task name is required.'
+    return
+  }
+  if (points.value < 1) {
+    error.value = 'Points must be at least 1.'
+    return
+  }
+  loading.value = true
+
+  // If the selected image is a local upload, upload it first
+  if (imageId === 'local-upload' && localImageFile.value) {
+    const formData = new FormData()
+    formData.append('file', localImageFile.value)
+    formData.append('type', '2')
+    formData.append('permanent', 'false')
+    try {
+      const resp = await fetch('/api/image/upload', {
+        method: 'POST',
+        body: formData,
+      })
+      if (!resp.ok) throw new Error('Image upload failed')
+      const data = await resp.json()
+      imageId = data.id
+    } catch (err) {
+      alert('Failed to upload image.')
+      loading.value = false
+      return
+    }
+  }
+
+  // Now update or create the task
+  try {
+    let resp
+    if (isEdit.value) {
+      resp = await fetch(`/api/task/${props.id}/edit`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          name: name.value,
+          points: points.value,
+          is_good: isGood.value,
+          image_id: imageId,
+        }),
+      })
+    } else {
+      resp = await fetch('/api/task/add', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          name: name.value,
+          points: points.value,
+          is_good: isGood.value,
+          image_id: imageId,
+        }),
+      })
+    }
+    if (!resp.ok) throw new Error('Failed to save task')
+    emit('updated')
+    await router.push({ name: 'TaskView' })
+  } catch (err) {
+    alert('Failed to save task.')
+  }
+  loading.value = false
+}
+
+function handleCancel() {
+  router.back()
+}
+
+// Handle new image from ImagePicker
+function onAddImage({ id, file }: { id: string; file: File }) {
+  if (id === 'local-upload') {
+    localImageFile.value = file
+  }
+}
+</script>
+
+<template>
+  <div class="task-edit-view">
+    <h2>{{ isEdit ? 'Edit Task' : 'Create Task' }}</h2>
+    <div v-if="loading" class="loading-message">Loading task...</div>
+    <form v-else @submit.prevent="submit" class="task-form">
+      <div class="group">
+        <label for="task-name">
+          Task Name
+          <input
+            id="task-name"
+            ref="nameInput"
+            v-model="name"
+            type="text"
+            required
+            maxlength="64"
+          />
+        </label>
+      </div>
+      <div class="group">
+        <label for="task-points">
+          Task Points
+          <input
+            id="task-points"
+            v-model.number="points"
+            type="number"
+            min="1"
+            max="100"
+            required
+          />
+        </label>
+      </div>
+      <div class="group">
+        <label for="task-type">
+          Task Type
+          <div class="good-bad-toggle" id="task-type">
+            <button
+              type="button"
+              :class="['toggle-btn', isGood ? 'good-active' : '']"
+              @click="isGood = true"
+            >
+              Good
+            </button>
+            <button
+              type="button"
+              :class="['toggle-btn', !isGood ? 'bad-active' : '']"
+              @click="isGood = false"
+            >
+              Bad
+            </button>
+          </div>
+        </label>
+      </div>
+      <div class="group">
+        <label for="task-image">Image</label>
+        <ImagePicker
+          id="task-image"
+          v-model="selectedImageId"
+          :image-type="2"
+          @add-image="onAddImage"
+        />
+      </div>
+      <div v-if="error" class="error">{{ error }}</div>
+      <div class="actions">
+        <button type="button" @click="handleCancel" :disabled="loading" class="btn btn-secondary">
+          Cancel
+        </button>
+        <button type="submit" :disabled="loading" class="btn btn-primary">
+          {{ isEdit ? 'Save' : 'Create' }}
+        </button>
+      </div>
+    </form>
+  </div>
+</template>
+
+<style scoped>
+.good-bad-toggle {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 1.1rem;
+  justify-content: flex-start;
+}
+
+button.toggle-btn {
+  flex: 1 1 0;
+  padding: 0.5rem 1.2rem;
+  border-width: 2px;
+  border-radius: 7px;
+  font-weight: 600;
+  font-size: 1rem;
+  cursor: pointer;
+  transition:
+    background 0.18s,
+    color 0.18s,
+    border-style 0.18s;
+  outline: none;
+  border-style: outset; /* Default style */
+  background: var(--toggle-btn-bg);
+  color: var(--toggle-btn-color);
+  border-color: var(--toggle-btn-border);
+}
+
+button.toggle-btn.good-active {
+  background: var(--toggle-btn-good-bg);
+  color: var(--toggle-btn-good-color);
+  box-shadow: 0 2px 8px var(--toggle-btn-good-shadow);
+  transform: translateY(2px) scale(0.97);
+  border-style: ridge;
+  border-color: var(--toggle-btn-good-border);
+}
+
+button.toggle-btn.bad-active {
+  background: var(--toggle-btn-bad-bg);
+  color: var(--toggle-btn-bad-color);
+  box-shadow: 0 2px 8px var(--toggle-btn-bad-shadow);
+  transform: translateY(2px) scale(0.97);
+  border-style: ridge;
+  border-color: var(--toggle-btn-bad-border);
+}
+</style>

frontend/vue-app/src/components/task/TaskView.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="task-view">
+    <MessageBlock v-if="taskCountRef === 0" message="No tasks">
+      <span> <button class="round-btn" @click="createTask">Create</button> a task </span>
+    </MessageBlock>
+
+    <ItemList
+      v-else
+      fetchUrl="/api/task/list"
+      itemKey="tasks"
+      :itemFields="TASK_FIELDS"
+      imageField="image_id"
+      deletable
+      @clicked="(task: Task) => $router.push({ name: 'EditTask', params: { id: task.id } })"
+      @delete="confirmDeleteTask"
+      @loading-complete="(count) => (taskCountRef = count)"
+      :getItemClass="(item) => ({ bad: !item.is_good, good: item.is_good })"
+    >
+      <template #item="{ item }">
+        <img v-if="item.image_url" :src="item.image_url" />
+        <span class="name">{{ item.name }}</span>
+        <span class="value">{{ item.points }} pts</span>
+      </template>
+    </ItemList>
+
+    <FloatingActionButton aria-label="Create Task" @click="createTask" />
+
+    <DeleteModal
+      :show="showConfirm"
+      message="Are you sure you want to delete this task?"
+      @confirm="deleteTask"
+      @cancel="showConfirm = false"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import ItemList from '../shared/ItemList.vue'
+import MessageBlock from '@/components/shared/MessageBlock.vue'
+import '@/assets/button-shared.css'
+import FloatingActionButton from '../shared/FloatingActionButton.vue'
+import DeleteModal from '../shared/DeleteModal.vue'
+import type { Task } from '@/common/models'
+import { TASK_FIELDS } from '@/common/models'
+
+const $router = useRouter()
+
+const showConfirm = ref(false)
+const taskToDelete = ref<string | null>(null)
+const taskListRef = ref()
+const taskCountRef = ref<number>(-1)
+
+function confirmDeleteTask(taskId: string) {
+  taskToDelete.value = taskId
+  showConfirm.value = true
+}
+
+const deleteTask = async () => {
+  if (!taskToDelete.value) return
+  try {
+    const resp = await fetch(`/api/task/${taskToDelete.value}`, {
+      method: 'DELETE',
+    })
+    if (!resp.ok) throw new Error(`HTTP ${resp.status}`)
+    // Refresh the task list after successful delete
+    taskListRef.value?.refresh()
+  } catch (err) {
+    console.error('Failed to delete task:', err)
+  } finally {
+    showConfirm.value = false
+    taskToDelete.value = null
+  }
+}
+
+// New function to handle task creation
+const createTask = () => {
+  // Route to your create task page or open a create dialog
+  // Example:
+  $router.push({ name: 'CreateTask' })
+}
+</script>
+
+<style scoped>
+.task-view {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1 1 auto;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  min-height: 0;
+}
+.name {
+  flex: 1;
+  text-align: left;
+  font-weight: 600;
+}
+
+.value {
+  min-width: 60px;
+  text-align: right;
+  font-weight: 600;
+}
+
+:deep(.good) {
+  border-color: var(--list-item-border-good);
+  background: var(--list-item-bg-good);
+}
+:deep(.bad) {
+  border-color: var(--list-item-border-bad);
+  background: var(--list-item-bg-bad);
+}
+</style>