From 4400741391a0f34e4750d6f3ae06d2cd8a68cfaf Mon Sep 17 00:00:00 2001
From: Gregor Vostrak <gregor@solidtime.io>
Date: Thu, 18 Apr 2024 01:13:26 +0200
Subject: [PATCH] fix last tracked tasks empty state

---
 .../Common/Project/ProjectBadge.vue           |  1 +
 .../Common/Task/TaskCreateModal.vue           |  1 +
 .../js/Components/Dashboard/DashboardCard.vue |  5 ++-
 .../Dashboard/RecentlyTrackedTasksCard.vue    | 29 ++++++++++++++-
 .../RecentlyTrackedTasksCardEntry.vue         | 37 +++++++++++++++++--
 5 files changed, 66 insertions(+), 7 deletions(-)

diff --git a/resources/js/Components/Common/Project/ProjectBadge.vue b/resources/js/Components/Common/Project/ProjectBadge.vue
index 3e60a323..cd84fc87 100644
--- a/resources/js/Components/Common/Project/ProjectBadge.vue
+++ b/resources/js/Components/Common/Project/ProjectBadge.vue
@@ -12,6 +12,7 @@ const props = withDefaults(
         border: boolean;
     }>(),
     {
+        name: '',
         size: 'base',
         tag: 'div',
         color: 'var(--theme-color-icon-default)',
diff --git a/resources/js/Components/Common/Task/TaskCreateModal.vue b/resources/js/Components/Common/Task/TaskCreateModal.vue
index 1f0c7e8a..52133b40 100644
--- a/resources/js/Components/Common/Task/TaskCreateModal.vue
+++ b/resources/js/Components/Common/Task/TaskCreateModal.vue
@@ -24,6 +24,7 @@ async function submit() {
         project_id: props.projectId,
     });
     show.value = false;
+    taskName.value = '';
 }
 
 const taskNameInput = ref<HTMLInputElement | null>(null);
diff --git a/resources/js/Components/Dashboard/DashboardCard.vue b/resources/js/Components/Dashboard/DashboardCard.vue
index e690398f..3bf5eebd 100644
--- a/resources/js/Components/Dashboard/DashboardCard.vue
+++ b/resources/js/Components/Dashboard/DashboardCard.vue
@@ -3,8 +3,9 @@
         <CardTitle :title="title" :icon="icon"></CardTitle>
 
         <div
-            class="rounded-lg bg-card-background border border-card-border flex-1 flex items-center">
-            <div class="divide-y divide-card-background-separator w-full">
+            class="rounded-lg bg-card-background border border-card-border flex-1 flex items-stretch">
+            <div
+                class="divide-y divide-card-background-separator w-full flex flex-col">
                 <slot></slot>
             </div>
         </div>
diff --git a/resources/js/Components/Dashboard/RecentlyTrackedTasksCard.vue b/resources/js/Components/Dashboard/RecentlyTrackedTasksCard.vue
index 35195a24..c39d91fd 100644
--- a/resources/js/Components/Dashboard/RecentlyTrackedTasksCard.vue
+++ b/resources/js/Components/Dashboard/RecentlyTrackedTasksCard.vue
@@ -2,6 +2,10 @@
 import RecentlyTrackedTasksCardEntry from '@/Components/Dashboard/RecentlyTrackedTasksCardEntry.vue';
 import DashboardCard from '@/Components/Dashboard/DashboardCard.vue';
 import { CheckCircleIcon } from '@heroicons/vue/20/solid';
+import SecondaryButton from '@/Components/SecondaryButton.vue';
+import { PlusCircleIcon } from '@heroicons/vue/24/solid';
+import { router } from '@inertiajs/vue3';
+
 const props = defineProps<{
     latestTasks: {
         id: string;
@@ -17,7 +21,30 @@ const props = defineProps<{
         <RecentlyTrackedTasksCardEntry
             v-for="lastTask in props.latestTasks"
             :key="lastTask.id"
-            :project="lastTask.project_name"
+            :project_id="lastTask.project_id"
+            :task_id="lastTask.id"
             :title="lastTask.name"></RecentlyTrackedTasksCardEntry>
+        <div v-if="props.latestTasks.length === 0" class="text-center">
+            <PlusCircleIcon
+                class="w-8 text-icon-default inline pb-2"></PlusCircleIcon>
+            <h3 class="text-white font-semibold">No recent tasks found</h3>
+            <p class="pb-5">Create tasks inside of a project!</p>
+            <SecondaryButton @click="router.visit(route('projects'))"
+                >Go to Projects
+            </SecondaryButton>
+        </div>
+        <div
+            v-if="props.latestTasks.length === 1"
+            class="text-center flex flex-1 justify-center items-center">
+            <div>
+                <PlusCircleIcon
+                    class="w-8 text-icon-default inline pb-2"></PlusCircleIcon>
+                <h3 class="text-white font-semibold">Add more tasks</h3>
+                <p class="pb-5">Create tasks inside of a project!</p>
+                <SecondaryButton @click="router.visit(route('projects'))"
+                    >Go to Projects
+                </SecondaryButton>
+            </div>
+        </div>
     </DashboardCard>
 </template>
diff --git a/resources/js/Components/Dashboard/RecentlyTrackedTasksCardEntry.vue b/resources/js/Components/Dashboard/RecentlyTrackedTasksCardEntry.vue
index 8a562987..94c8cf52 100644
--- a/resources/js/Components/Dashboard/RecentlyTrackedTasksCardEntry.vue
+++ b/resources/js/Components/Dashboard/RecentlyTrackedTasksCardEntry.vue
@@ -1,11 +1,37 @@
 <script setup lang="ts">
 import ProjectBadge from '@/Components/Common/Project/ProjectBadge.vue';
 import TimeTrackerStartStop from '@/Components/Common/TimeTrackerStartStop.vue';
+import { useProjectsStore } from '@/utils/useProjects';
+import { storeToRefs } from 'pinia';
+import { computed } from 'vue';
+import dayjs from 'dayjs';
+import { useCurrentTimeEntryStore } from '@/utils/useCurrentTimeEntry';
 
-defineProps<{
+const props = defineProps<{
     title: string;
-    project: string;
+    project_id: string;
+    task_id: string;
 }>();
+
+const { projects } = storeToRefs(useProjectsStore());
+
+const project = computed(() => {
+    return projects.value.find((project) => project.id === props.project_id);
+});
+
+const { currentTimeEntry } = storeToRefs(useCurrentTimeEntryStore());
+const { stopTimer, startTimer } = useCurrentTimeEntryStore();
+
+async function startTaskTimer() {
+    if (currentTimeEntry.value.id) {
+        await stopTimer();
+    }
+    currentTimeEntry.value.project_id = props.project_id;
+    currentTimeEntry.value.task_id = props.task_id;
+    currentTimeEntry.value.start = dayjs().utc().format();
+    await startTimer();
+    useCurrentTimeEntryStore().fetchCurrentTimeEntry();
+}
 </script>
 
 <template>
@@ -14,10 +40,13 @@ defineProps<{
             <p class="font-semibold text-white text-sm pb-1">
                 {{ title }}
             </p>
-            <ProjectBadge :name="project"></ProjectBadge>
+            <ProjectBadge
+                :name="project?.name"
+                :color="project?.color"></ProjectBadge>
         </div>
         <div class="flex items-center justify-center">
-            <TimeTrackerStartStop></TimeTrackerStartStop>
+            <TimeTrackerStartStop
+                @changed="startTaskTimer"></TimeTrackerStartStop>
         </div>
     </div>
 </template>