round 5

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

@@ -1,15 +1,25 @@
 <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 class="task-view">
+      <div v-if="taskCountRef == 0" class="no-tasks-message">
+        <div>No tasks available</div>
+        <div class="sub-message">
+          <button class="create-btn" @click="goToCreateTask">Create</button> a task
+        </div>
+      </div>
+      <div class="task-list-scroll">
+        <TaskList
+          v-if="taskCountRef != 0"
+          ref="taskListRef"
+          :child-id="childId"
+          :selectable="true"
+          :type-filter="typeFilter"
+          @loading-complete="(count) => (taskCountRef = count)"
+        />
+      </div>
     </div>
-    <div class="actions">
+    <div class="actions" v-if="taskCountRef > 0">
       <button class="btn cancel" @click="onCancel">Cancel</button>
       <button class="btn submit" @click="onSubmit">Submit</button>
     </div>
@@ -26,6 +36,7 @@ const router = useRouter()
 const childId = route.params.id
 
 const taskListRef = ref()
+const taskCountRef = ref(-1)
 
 const typeFilter = computed(() => {
   if (route.params.type === 'good') return 'good'
@@ -33,6 +44,10 @@ const typeFilter = computed(() => {
   return 'all'
 })
 
+function goToCreateTask() {
+  router.push({ name: 'CreateTask' })
+}
+
 async function onSubmit() {
   const selectedIds = taskListRef.value?.selectedTasks ?? []
   try {
@@ -102,4 +117,48 @@ h2 {
 .btn.submit:hover {
   background: #5a67d8;
 }
+
+.task-view {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1 1 auto;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  min-height: 0;
+}
+
+.no-tasks-message {
+  margin: 2rem 0;
+  font-size: 1.15rem;
+  font-weight: 600;
+  text-align: center;
+  color: #fdfdfd;
+  line-height: 1.5;
+}
+.sub-message {
+  margin-top: 0.3rem;
+  font-size: 1rem;
+  font-weight: 400;
+  color: #b5ccff;
+}
+.create-btn {
+  background: #fff;
+  color: #2563eb;
+  border: 2px solid #2563eb;
+  border-radius: 6px;
+  font-size: 0.85rem;
+  font-weight: 600;
+  padding: 0.2rem 0.5rem;
+  margin-right: 0.1rem;
+  cursor: pointer;
+  transition:
+    background 0.18s,
+    color 0.18s;
+}
+.create-btn:hover {
+  background: #2563eb;
+  color: #fff;
+}
 </style>