add support for archiving projects and marking tasks as done

resources/js/Pages/ProjectShow.vue

@@ -20,6 +20,9 @@ import ProjectMemberTable from '@/Components/Common/ProjectMember/ProjectMemberT
 import ProjectMemberCreateModal from '@/Components/Common/ProjectMember/ProjectMemberCreateModal.vue';
 import { useProjectMembersStore } from '@/utils/useProjectMembers';
 import { canCreateTasks, canViewProjectMembers } from '@/utils/permissions';
+import TabBarItem from '@/Components/Common/TabBar/TabBarItem.vue';
+import TabBar from '@/Components/Common/TabBar/TabBar.vue';
+import { useTasksStore } from '@/utils/useTasks';
 
 const { projects } = storeToRefs(useProjectsStore());
 
@@ -41,6 +44,23 @@ onMounted(() => {
         useProjectMembersStore().fetchProjectMembers(projectId);
     }
 });
+
+const activeTab = ref<'active' | 'done'>('active');
+
+function isActiveTab(tab: string) {
+    return activeTab.value === tab;
+}
+
+const { tasks } = storeToRefs(useTasksStore());
+
+const shownTasks = computed(() => {
+    return tasks.value.filter((task) => {
+        if (activeTab.value === 'active') {
+            return task.project_id === projectId && !task.is_done;
+        }
+        return task.project_id === projectId && task.is_done;
+    });
+});
 </script>
 
 <template>
@@ -85,19 +105,38 @@ onMounted(() => {
                 <div>
                     <CardTitle title="Tasks" :icon="CheckCircleIcon">
                         <template #actions>
-                            <SecondaryButton
-                                v-if="canCreateTasks()"
-                                :icon="PlusIcon"
-                                @click="createTask = true"
-                                >Create Task
-                            </SecondaryButton>
-                            <TaskCreateModal
-                                :project-id="projectId"
-                                v-model:show="createTask"></TaskCreateModal>
+                            <div
+                                class="w-full items-center flex justify-between">
+                                <div class="pl-6">
+                                    <TabBar>
+                                        <TabBarItem
+                                            :active="isActiveTab('active')"
+                                            @click="activeTab = 'active'"
+                                            >Active
+                                        </TabBarItem>
+                                        <TabBarItem
+                                            :active="isActiveTab('done')"
+                                            @click="activeTab = 'done'"
+                                            >Done
+                                        </TabBarItem>
+                                    </TabBar>
+                                </div>
+                                <SecondaryButton
+                                    v-if="canCreateTasks()"
+                                    :icon="PlusIcon"
+                                    @click="createTask = true"
+                                    >Create Task
+                                </SecondaryButton>
+                                <TaskCreateModal
+                                    :project-id="projectId"
+                                    v-model:show="createTask"></TaskCreateModal>
+                            </div>
                         </template>
                     </CardTitle>
                     <Card>
-                        <TaskTable :project-id="projectId"></TaskTable>
+                        <TaskTable
+                            :tasks="shownTasks"
+                            :project-id="projectId"></TaskTable>
                     </Card>
                 </div>
                 <div v-if="canViewProjectMembers()">

resources/js/Pages/Projects.vue

@@ -4,17 +4,37 @@ import AppLayout from '@/Layouts/AppLayout.vue';
 import { FolderIcon, PlusIcon } from '@heroicons/vue/16/solid';
 import SecondaryButton from '@/Components/SecondaryButton.vue';
 import ProjectTable from '@/Components/Common/Project/ProjectTable.vue';
-import { onMounted, ref } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import { useProjectsStore } from '@/utils/useProjects';
 import ProjectCreateModal from '@/Components/Common/Project/ProjectCreateModal.vue';
 import PageTitle from '@/Components/Common/PageTitle.vue';
 import { canCreateProjects } from '@/utils/permissions';
+import TabBarItem from '@/Components/Common/TabBar/TabBarItem.vue';
+import TabBar from '@/Components/Common/TabBar/TabBar.vue';
+import { storeToRefs } from 'pinia';
 
 onMounted(() => {
     useProjectsStore().fetchProjects();
 });
 
 const createProject = ref(false);
+
+const activeTab = ref<'active' | 'archived'>('active');
+
+function isActiveTab(tab: string) {
+    return activeTab.value === tab;
+}
+
+const { projects } = storeToRefs(useProjectsStore());
+
+const shownProjects = computed(() => {
+    return projects.value.filter((project) => {
+        if (activeTab.value === 'active') {
+            return !project.is_archived;
+        }
+        return project.is_archived;
+    });
+});
 </script>
 
 <template>
@@ -22,17 +42,29 @@ const createProject = ref(false);
         <MainContainer
             class="py-3 sm:py-5 border-b border-default-background-separator flex justify-between items-center">
             <div class="flex items-center space-x-3 sm:space-x-6">
-                <PageTitle :icon="FolderIcon" title="Projects"> </PageTitle>
+                <PageTitle :icon="FolderIcon" title="Projects"></PageTitle>
+                <TabBar>
+                    <TabBarItem
+                        :active="isActiveTab('active')"
+                        @click="activeTab = 'active'"
+                        >Active</TabBarItem
+                    >
+                    <TabBarItem
+                        :active="isActiveTab('archived')"
+                        @click="activeTab = 'archived'">
+                        Archived
+                    </TabBarItem>
+                </TabBar>
             </div>
             <SecondaryButton
                 v-if="canCreateProjects()"
                 :icon="PlusIcon"
                 @click="createProject = true"
-                >Create Project</SecondaryButton
-            >
+                >Create Project
+            </SecondaryButton>
             <ProjectCreateModal
                 v-model:show="createProject"></ProjectCreateModal>
         </MainContainer>
-        <ProjectTable></ProjectTable>
+        <ProjectTable :projects="shownProjects"></ProjectTable>
     </AppLayout>
 </template>