round 3

web/vue-app/src/components/child/TaskAssignView.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="task-assign-view">
+    <h2>Assign Tasks</h2>
+    <div class="task-list-scroll">
+      <TaskList
+        ref="taskListRef"
+        :child-id="childId"
+        :selectable="true"
+        :type-filter="typeFilter"
+      />
+    </div>
+    <div class="actions">
+      <button class="btn cancel" @click="onCancel">Cancel</button>
+      <button class="btn submit" @click="onSubmit">Submit</button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import TaskList from '../task/TaskList.vue'
+
+const route = useRoute()
+const router = useRouter()
+const childId = route.params.id
+
+const taskListRef = ref()
+
+const typeFilter = computed(() => {
+  if (route.params.type === 'good') return 'good'
+  if (route.params.type === 'bad') return 'bad'
+  return 'all'
+})
+
+async function onSubmit() {
+  const selectedIds = taskListRef.value?.selectedTasks ?? []
+  try {
+    const resp = await fetch(`/api/child/${childId}/set-tasks`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ task_ids: selectedIds }),
+    })
+    if (!resp.ok) throw new Error('Failed to update tasks')
+    router.back()
+  } catch (err) {
+    alert('Failed to update tasks.')
+  }
+}
+
+function onCancel() {
+  router.back()
+}
+</script>
+
+<style scoped>
+.task-assign-view {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1 1 auto;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  min-height: 0;
+}
+h2 {
+  font-size: 1.15rem;
+  color: #ffffff;
+  font-weight: 700;
+  text-align: center;
+  margin: 0.2rem;
+}
+.task-list-scroll {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  margin-bottom: 2rem;
+}
+.actions {
+  display: flex;
+  gap: 1rem;
+  justify-content: flex-end;
+  margin-top: 0;
+}
+.btn {
+  padding: 0.5rem 1.2rem;
+  border-radius: 8px;
+  border: none;
+  font-weight: 600;
+  cursor: pointer;
+  font-size: 1rem;
+}
+.btn.cancel {
+  background: #f3f3f3;
+  color: #666;
+}
+.btn.submit {
+  background: #667eea;
+  color: #fff;
+}
+.btn.submit:hover {
+  background: #5a67d8;
+}
+</style>