add support for archiving projects and marking tasks as done

resources/js/Components/Common/Project/ProjectMoreOptionsDropdown.vue

@@ -1,11 +1,16 @@
 <script setup lang="ts">
 import Dropdown from '@/Components/Dropdown.vue';
-import { TrashIcon, PencilSquareIcon } from '@heroicons/vue/20/solid';
+import {
+    TrashIcon,
+    PencilSquareIcon,
+    ArchiveBoxIcon,
+} from '@heroicons/vue/20/solid';
 import type { Project } from '@/utils/api';
 import { canDeleteProjects, canUpdateProjects } from '@/utils/permissions';
 const emit = defineEmits<{
     delete: [];
     edit: [];
+    archive: [];
 }>();
 const props = defineProps<{
     project: Project;
@@ -15,20 +20,23 @@ const props = defineProps<{
 <template>
     <Dropdown>
         <template #trigger>
-            <svg
+            <button
+                class="focus-visible:outline-none focus-visible:bg-card-background rounded-full focus-visible:ring-1 focus-visible:ring-input-border-active focus-visible:opacity-100 hover:bg-card-background group-hover:opacity-100 opacity-20 transition-opacity"
                 data-testid="project_actions"
-                :aria-label="'Actions for Project ' + props.project.name"
-                class="h-10 w-10 p-2 rounded-full hover:bg-card-background opacity-20 group-hover:opacity-100 transition"
-                viewBox="0 0 24 24"
-                xmlns="http://www.w3.org/2000/svg">
-                <path
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="1.5"
-                    d="M12 5.92A.96.96 0 1 0 12 4a.96.96 0 0 0 0 1.92m0 7.04a.96.96 0 1 0 0-1.92a.96.96 0 0 0 0 1.92M12 20a.96.96 0 1 0 0-1.92a.96.96 0 0 0 0 1.92" />
-            </svg>
+                :aria-label="'Actions for Project ' + props.project.name">
+                <svg
+                    class="h-10 w-10 p-2 rounded-full"
+                    viewBox="0 0 24 24"
+                    xmlns="http://www.w3.org/2000/svg">
+                    <path
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="1.5"
+                        d="M12 5.92A.96.96 0 1 0 12 4a.96.96 0 0 0 0 1.92m0 7.04a.96.96 0 1 0 0-1.92a.96.96 0 0 0 0 1.92M12 20a.96.96 0 1 0 0-1.92a.96.96 0 0 0 0 1.92" />
+                </svg>
+            </button>
         </template>
         <template #content>
             <div class="min-w-[150px]">
@@ -42,6 +50,17 @@ const props = defineProps<{
                         class="w-5 text-icon-active"></PencilSquareIcon>
                     <span>Edit</span>
                 </button>
+                <button
+                    @click.prevent="emit('archive')"
+                    v-if="canUpdateProjects()"
+                    :aria-label="'Archive Project ' + props.project.name"
+                    class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
+                    <ArchiveBoxIcon
+                        class="w-5 text-icon-active"></ArchiveBoxIcon>
+                    <span>{{
+                        project.is_archived ? 'Unarchive' : 'Archive'
+                    }}</span>
+                </button>
                 <button
                     @click.prevent="emit('delete')"
                     :aria-label="'Delete Project ' + props.project.name"

resources/js/Components/Common/Project/ProjectTable.vue

@@ -1,16 +1,17 @@
 <script setup lang="ts">
-import { useProjectsStore } from '@/utils/useProjects';
 import SecondaryButton from '@/Components/SecondaryButton.vue';
 import { FolderPlusIcon } from '@heroicons/vue/24/solid';
 import { PlusIcon } from '@heroicons/vue/16/solid';
 import { ref } from 'vue';
 import ProjectCreateModal from '@/Components/Common/Project/ProjectCreateModal.vue';
-import { storeToRefs } from 'pinia';
 import ProjectTableHeading from '@/Components/Common/Project/ProjectTableHeading.vue';
 import ProjectTableRow from '@/Components/Common/Project/ProjectTableRow.vue';
 import { canCreateProjects } from '@/utils/permissions';
+import type { Project } from '@/utils/api';
 
-const { projects } = storeToRefs(useProjectsStore());
+defineProps<{
+    projects: Project[];
+}>();
 
 const createProject = ref(false);
 </script>

resources/js/Components/Common/Project/ProjectTableRow.vue

@@ -33,6 +33,13 @@ function deleteProject() {
     useProjectsStore().deleteProject(props.project.id);
 }
 
+function archiveProject() {
+    useProjectsStore().updateProject(props.project.id, {
+        ...props.project,
+        is_archived: !props.project.is_archived,
+    });
+}
+
 const billableRateInfo = computed(() => {
     if (props.project.is_billable) {
         if (props.project.billable_rate) {
@@ -84,6 +91,7 @@ const showEditProjectModal = ref(false);
             <ProjectMoreOptionsDropdown
                 :project="project"
                 @edit="showEditProjectModal = true"
+                @archive="archiveProject"
                 @delete="deleteProject"></ProjectMoreOptionsDropdown>
         </div>
     </TableRow>