add project edit modal

e2e/projects.spec.ts

@@ -63,3 +63,5 @@ test('test that creating and deleting a new project via the modal works', async
 // Test that project task count is displayed correctly
 
 // Test that active / archive / all filter works (once implemented)
+
+// Edit Project Modal Test

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

@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import TextInput from '@/Components/TextInput.vue';
+import SecondaryButton from '@/Components/SecondaryButton.vue';
+import DialogModal from '@/Components/DialogModal.vue';
+import { computed, ref } from 'vue';
+import type { CreateProjectBody, Project } from '@/utils/api';
+import PrimaryButton from '@/Components/PrimaryButton.vue';
+import { useProjectsStore } from '@/utils/useProjects';
+import { useFocus } from '@vueuse/core';
+import ClientDropdown from '@/Components/Common/Client/ClientDropdown.vue';
+import { twMerge } from 'tailwind-merge';
+import Badge from '@/Components/Common/Badge.vue';
+import { useClientsStore } from '@/utils/useClients';
+import { storeToRefs } from 'pinia';
+
+const { updateProject } = useProjectsStore();
+const { clients } = storeToRefs(useClientsStore());
+const show = defineModel('show', { default: false });
+const saving = ref(false);
+
+const props = defineProps<{
+    originalProject: Project;
+}>();
+
+const project = ref<CreateProjectBody>({
+    name: props.originalProject.name,
+    color: props.originalProject.color,
+    client_id: props.originalProject.client_id,
+    billable_rate: props.originalProject.billable_rate,
+});
+
+async function submit() {
+    await updateProject(props.originalProject.id, project.value);
+    show.value = false;
+}
+
+const projectNameInput = ref<HTMLInputElement | null>(null);
+
+useFocus(projectNameInput, { initialValue: true });
+
+const currentClientName = computed(() => {
+    if (project.value.client_id) {
+        return clients.value.find(
+            (client) => client.id === project.value.client_id
+        )?.name;
+    }
+    return 'No Client';
+});
+</script>
+
+<template>
+    <DialogModal closeable :show="show" @close="show = false">
+        <template #title>
+            <div class="flex space-x-2">
+                <span> Edit Project {{ props.originalProject.name }} </span>
+            </div>
+        </template>
+
+        <template #content>
+            <div class="flex items-center space-x-4">
+                <div class="px-3">
+                    <div
+                        :style="{
+                            backgroundColor: project.color,
+                            boxShadow: `var(--tw-ring-inset) 0 0 0 calc(5px + var(--tw-ring-offset-width)) ${project.color}30`,
+                        }"
+                        class="w-4 h-4 rounded-full"></div>
+                </div>
+                <div class="col-span-6 sm:col-span-4 flex-1">
+                    <TextInput
+                        id="projectName"
+                        ref="projectNameInput"
+                        v-model="project.name"
+                        type="text"
+                        placeholder="Project Name"
+                        @keydown.enter="submit()"
+                        class="mt-1 block w-full"
+                        required
+                        autocomplete="projectName" />
+                </div>
+                <div class="col-span-6 sm:col-span-4">
+                    <ClientDropdown v-model="project.client_id">
+                        <template #trigger>
+                            <Badge size="large">
+                                <div
+                                    :class="
+                                        twMerge('inline-block rounded-full')
+                                    "></div>
+                                <span>
+                                    {{ currentClientName }}
+                                </span>
+                            </Badge>
+                        </template>
+                    </ClientDropdown>
+                </div>
+            </div>
+        </template>
+        <template #footer>
+            <SecondaryButton @click="show = false"> Cancel </SecondaryButton>
+
+            <PrimaryButton
+                class="ms-3"
+                :class="{ 'opacity-25': saving }"
+                :disabled="saving"
+                @click="submit">
+                Update Project
+            </PrimaryButton>
+        </template>
+    </DialogModal>
+</template>
+
+<style scoped></style>

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

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import Dropdown from '@/Components/Dropdown.vue';
-import { TrashIcon } from '@heroicons/vue/20/solid';
+import { TrashIcon, PencilSquareIcon } from '@heroicons/vue/20/solid';
 import type { Project } from '@/utils/api';
 const emit = defineEmits<{
     delete: [];
+    edit: [];
 }>();
 const props = defineProps<{
     project: Project;
@@ -33,10 +34,19 @@ const props = defineProps<{
                 @click.prevent="emit('delete')"
                 :aria-label="'Delete Project ' + props.project.name"
                 data-testid="project_delete"
-                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">
+                class="border-b border-card-background-separator 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">
                 <TrashIcon class="w-5 text-icon-active"></TrashIcon>
                 <span>Delete</span>
             </button>
+            <button
+                @click.prevent="emit('edit')"
+                :aria-label="'Edit Project ' + props.project.name"
+                data-testid="project_edit"
+                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">
+                <PencilSquareIcon
+                    class="w-5 text-icon-active"></PencilSquareIcon>
+                <span>Edit</span>
+            </button>
         </template>
     </Dropdown>
 </template>

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

@@ -1,13 +1,14 @@
 <script setup lang="ts">
 import ProjectMoreOptionsDropdown from '@/Components/Common/Project/ProjectMoreOptionsDropdown.vue';
 import type { Project } from '@/utils/api';
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import { CheckCircleIcon } from '@heroicons/vue/20/solid';
 import { useClientsStore } from '@/utils/useClients';
 import { storeToRefs } from 'pinia';
 import { useTasksStore } from '@/utils/useTasks';
 import { useProjectsStore } from '@/utils/useProjects';
 import TableRow from '@/Components/TableRow.vue';
+import ProjectEditModal from '@/Components/Common/Project/ProjectEditModal.vue';
 
 const { clients } = storeToRefs(useClientsStore());
 const { tasks } = storeToRefs(useTasksStore());
@@ -30,9 +31,14 @@ const projectTasksCount = computed(() => {
 function deleteProject() {
     useProjectsStore().deleteProject(props.project.id);
 }
+
+const showEditProjectModal = ref(false);
 </script>
 
 <template>
+    <ProjectEditModal
+        :original-project="project"
+        :show="showEditProjectModal"></ProjectEditModal>
     <TableRow :href="route('projects.show', { project: project.id })">
         <div
             class="whitespace-nowrap flex items-center space-x-5 3xl:pl-12 py-4 pr-3 text-sm font-medium text-white pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
@@ -65,6 +71,7 @@ function deleteProject() {
             class="relative whitespace-nowrap flex items-center pl-3 text-right text-sm font-medium sm:pr-0 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12">
             <ProjectMoreOptionsDropdown
                 :project="project"
+                @edit="showEditProjectModal = true"
                 @delete="deleteProject"></ProjectMoreOptionsDropdown>
         </div>
     </TableRow>

resources/js/utils/api.ts

@@ -33,6 +33,11 @@ export type CreateProjectBody = ZodiosBodyByAlias<
     'createProject'
 >;
 
+export type UpdateProjectBody = ZodiosBodyByAlias<
+    SolidTimeApi,
+    'updateProject'
+>;
+
 export type ProjectMemberResponse = ZodiosResponseByAlias<
     SolidTimeApi,
     'getProjectMembers'

resources/js/utils/useProjects.ts

@@ -1,7 +1,12 @@
 import { defineStore } from 'pinia';
 import { api } from '../../../openapi.json.client';
 import { computed, ref } from 'vue';
-import type { CreateProjectBody, Project, ProjectResponse } from '@/utils/api';
+import type {
+    CreateProjectBody,
+    Project,
+    ProjectResponse,
+    UpdateProjectBody,
+} from '@/utils/api';
 import { getCurrentOrganizationId } from '@/utils/useUser';
 import { useNotificationsStore } from '@/utils/notification';
 
@@ -60,9 +65,35 @@ export const useProjectsStore = defineStore('projects', () => {
         }
     }
 
+    async function updateProject(
+        projectId: string,
+        updateProjectBody: UpdateProjectBody
+    ) {
+        const organizationId = getCurrentOrganizationId();
+        if (organizationId) {
+            await handleApiRequestNotifications(
+                api.updateProject(updateProjectBody, {
+                    params: {
+                        organization: organizationId,
+                        project: projectId,
+                    },
+                }),
+                'Project deleted successfully',
+                'Failed to delete project'
+            );
+            await fetchProjects();
+        }
+    }
+
     const projects = computed<Project[]>(
         () => projectResponse.value?.data || []
     );
 
-    return { projects, fetchProjects, createProject, deleteProject };
+    return {
+        projects,
+        fetchProjects,
+        createProject,
+        deleteProject,
+        updateProject,
+    };
 });