add support for archiving projects and marking tasks as done

This commit is contained in:
Gregor Vostrak
2024-07-02 17:01:12 +02:00
parent 0f32e42002
commit 6593a8c24f
15 changed files with 285 additions and 71 deletions

View File

@@ -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()">