add edit modal for tasks and clients, fixes ST-233

e2e/clients.spec.ts

@@ -49,3 +49,5 @@ test('test that creating and deleting a new client via the modal works', async (
         newClientName
     );
 });
+
+// TODO: Add Name Update Test

e2e/projects.spec.ts

@@ -71,3 +71,5 @@ test('test that creating and deleting a new project via the modal works', async
 // Edit Project with billable rate
 
 // Edit Project Member Billable Rate
+
+// Edit Task Name

e2e/tasks.spec.ts

@@ -107,3 +107,5 @@ test('test that creating and deleting a new tag in a new project works', async (
 // Test that project task count is displayed correctly
 
 // Test that active / archive / all filter works (once implemented)
+
+// Test update task name

resources/js/Components/Common/Client/ClientEditModal.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import TextInput from '@/Components/TextInput.vue';
+import SecondaryButton from '@/Components/SecondaryButton.vue';
+import DialogModal from '@/Components/DialogModal.vue';
+import { ref } from 'vue';
+import type { Client, UpdateClientBody } from '@/utils/api';
+import PrimaryButton from '@/Components/PrimaryButton.vue';
+import { useFocus } from '@vueuse/core';
+import { useClientsStore } from '@/utils/useClients';
+
+const { updateClient } = useClientsStore();
+const show = defineModel('show', { default: false });
+const saving = ref(false);
+
+const props = defineProps<{
+    client: Client;
+}>();
+
+const clientBody = ref<UpdateClientBody>({
+    name: props.client.name,
+});
+
+async function submit() {
+    await updateClient(props.client.id, clientBody.value);
+    show.value = false;
+}
+
+const clientNameInput = ref<HTMLInputElement | null>(null);
+useFocus(clientNameInput, { initialValue: true });
+</script>
+
+<template>
+    <DialogModal closeable :show="show" @close="show = false">
+        <template #title>
+            <div class="flex space-x-2">
+                <span> Update Client </span>
+            </div>
+        </template>
+
+        <template #content>
+            <div class="flex items-center space-x-4">
+                <div class="col-span-6 sm:col-span-4 flex-1">
+                    <TextInput
+                        id="clientName"
+                        ref="clientNameInput"
+                        v-model="clientBody.name"
+                        type="text"
+                        placeholder="Client Name"
+                        @keydown.enter="submit"
+                        class="mt-1 block w-full"
+                        required
+                        autocomplete="clientName" />
+                </div>
+            </div>
+        </template>
+        <template #footer>
+            <SecondaryButton @click="show = false"> Cancel </SecondaryButton>
+
+            <PrimaryButton
+                class="ms-3"
+                :class="{ 'opacity-25': saving }"
+                :disabled="saving"
+                @click="submit">
+                Update Client
+            </PrimaryButton>
+        </template>
+    </DialogModal>
+</template>
+
+<style scoped></style>

resources/js/Components/Common/Client/ClientMoreOptionsDropdown.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import Dropdown from '@/Components/Dropdown.vue';
-import { TrashIcon } from '@heroicons/vue/20/solid';
+import { PencilSquareIcon, TrashIcon } from '@heroicons/vue/20/solid';
 import type { Client } from '@/utils/api';
-import { canDeleteClients } from '@/utils/permissions';
+import { canDeleteClients, canUpdateClients } from '@/utils/permissions';
 
 const emit = defineEmits<{
     delete: [];
+    edit: [];
 }>();
 const props = defineProps<{
     client: Client;
@@ -31,15 +32,27 @@ const props = defineProps<{
             </svg>
         </template>
         <template #content>
-            <button
-                v-if="canDeleteClients()"
-                @click="emit('delete')"
-                :aria-label="'Delete Client ' + props.client.name"
-                data-testid="client_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">
-                <TrashIcon class="w-5 text-icon-active"></TrashIcon>
-                <span>Delete</span>
-            </button>
+            <div class="min-w-[150px]">
+                <button
+                    v-if="canUpdateClients()"
+                    @click="emit('edit')"
+                    :aria-label="'Edit Client ' + props.client.name"
+                    data-testid="client_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>
+                <button
+                    v-if="canDeleteClients()"
+                    @click="emit('delete')"
+                    :aria-label="'Delete Client ' + props.client.name"
+                    data-testid="client_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">
+                    <TrashIcon class="w-5 text-icon-active"></TrashIcon>
+                    <span>Delete</span>
+                </button>
+            </div>
         </template>
     </Dropdown>
 </template>

resources/js/Components/Common/Client/ClientTableRow.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
 import type { Client } 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 ClientMoreOptionsDropdown from '@/Components/Common/Client/ClientMoreOptionsDropdown.vue';
 import { useProjectsStore } from '@/utils/useProjects';
 import TableRow from '@/Components/TableRow.vue';
+import ClientEditModal from '@/Components/Common/Client/ClientEditModal.vue';
 
 const { projects } = storeToRefs(useProjectsStore());
 
@@ -23,10 +24,15 @@ const projectCount = computed(() => {
         (projects) => projects.client_id === props.client.id
     ).length;
 });
+
+const showEditModal = ref(false);
 </script>
 
 <template>
     <TableRow>
+        <ClientEditModal
+            :client="client"
+            v-model:show="showEditModal"></ClientEditModal>
         <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">
             <span>
@@ -43,6 +49,7 @@ const projectCount = computed(() => {
             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">
             <ClientMoreOptionsDropdown
                 :client="client"
+                @edit="showEditModal = true"
                 @delete="deleteClient"></ClientMoreOptionsDropdown>
         </div>
     </TableRow>

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

@@ -31,25 +31,27 @@ const props = defineProps<{
             </svg>
         </template>
         <template #content>
-            <button
-                @click.prevent="emit('delete')"
-                :aria-label="'Delete Project ' + props.project.name"
-                data-testid="project_delete"
-                v-if="canDeleteProjects()"
-                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')"
-                v-if="canUpdateProjects()"
-                :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>
+            <div class="min-w-[150px]">
+                <button
+                    @click.prevent="emit('edit')"
+                    v-if="canUpdateProjects()"
+                    :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>
+                <button
+                    @click.prevent="emit('delete')"
+                    :aria-label="'Delete Project ' + props.project.name"
+                    data-testid="project_delete"
+                    v-if="canDeleteProjects()"
+                    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>
+            </div>
         </template>
     </Dropdown>
 </template>

resources/js/Components/Common/Task/TaskEditModal.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import TextInput from '@/Components/TextInput.vue';
+import SecondaryButton from '@/Components/SecondaryButton.vue';
+import DialogModal from '@/Components/DialogModal.vue';
+import { ref } from 'vue';
+import PrimaryButton from '@/Components/PrimaryButton.vue';
+import { useFocus } from '@vueuse/core';
+import { useTasksStore } from '@/utils/useTasks';
+import type { Task, UpdateTaskBody } from '@/utils/api';
+
+const { updateTask } = useTasksStore();
+const show = defineModel('show', { default: false });
+const saving = ref(false);
+
+const props = defineProps<{
+    task: Task;
+}>();
+
+const taskBody = ref<UpdateTaskBody>({
+    name: props.task.name,
+});
+
+async function submit() {
+    await updateTask(props.task.id, taskBody.value);
+    show.value = false;
+}
+
+const taskNameInput = ref<HTMLInputElement | null>(null);
+
+useFocus(taskNameInput, { initialValue: true });
+</script>
+
+<template>
+    <DialogModal closeable :show="show" @close="show = false">
+        <template #title>
+            <div class="flex space-x-2">
+                <span> Create Task </span>
+            </div>
+        </template>
+
+        <template #content>
+            <div class="flex items-center space-x-4">
+                <div class="col-span-6 sm:col-span-4 flex-1">
+                    <TextInput
+                        id="taskName"
+                        ref="taskNameInput"
+                        v-model="taskBody.name"
+                        type="text"
+                        placeholder="Task Name"
+                        @keydown.enter="submit()"
+                        class="mt-1 block w-full"
+                        required
+                        autocomplete="taskName" />
+                </div>
+            </div>
+        </template>
+        <template #footer>
+            <SecondaryButton @click="show = false"> Cancel </SecondaryButton>
+            <PrimaryButton
+                class="ms-3"
+                :class="{ 'opacity-25': saving }"
+                :disabled="saving"
+                @click="submit">
+                Update Task
+            </PrimaryButton>
+        </template>
+    </DialogModal>
+</template>
+
+<style scoped></style>

resources/js/Components/Common/Task/TaskMoreOptionsDropdown.vue

@@ -1,9 +1,11 @@
 <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 { Task } from '@/utils/api';
+import { canDeleteTasks, canUpdateTasks } from '@/utils/permissions';
 const emit = defineEmits<{
     delete: [];
+    edit: [];
 }>();
 const props = defineProps<{
     task: Task;
@@ -11,7 +13,7 @@ const props = defineProps<{
 </script>
 
 <template>
-    <Dropdown>
+    <Dropdown align="bottom-end">
         <template #trigger>
             <svg
                 data-testid="task_actions"
@@ -29,14 +31,27 @@ const props = defineProps<{
             </svg>
         </template>
         <template #content>
-            <button
-                @click="emit('delete')"
-                :aria-label="'Delete Task ' + props.task.name"
-                data-testid="task_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">
-                <TrashIcon class="w-5 text-icon-active"></TrashIcon>
-                <span>Delete</span>
-            </button>
+            <div class="min-w-[150px]">
+                <button
+                    @click="emit('edit')"
+                    v-if="canUpdateTasks()"
+                    :aria-label="'Edit Task ' + props.task.name"
+                    data-testid="task_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>
+                <button
+                    @click="emit('delete')"
+                    :aria-label="'Delete Task ' + props.task.name"
+                    v-if="canDeleteTasks()"
+                    data-testid="task_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">
+                    <TrashIcon class="w-5 text-icon-active"></TrashIcon>
+                    <span>Delete</span>
+                </button>
+            </div>
         </template>
     </Dropdown>
 </template>

resources/js/Components/Common/Task/TaskTableRow.vue

@@ -5,6 +5,8 @@ import { useTasksStore } from '@/utils/useTasks';
 import TaskMoreOptionsDropdown from '@/Components/Common/Task/TaskMoreOptionsDropdown.vue';
 import TableRow from '@/Components/TableRow.vue';
 import { canDeleteTasks } from '@/utils/permissions';
+import TaskEditModal from '@/Components/Common/Task/TaskEditModal.vue';
+import { ref } from 'vue';
 
 const props = defineProps<{
     task: Task;
@@ -13,6 +15,7 @@ const props = defineProps<{
 function deleteTask() {
     useTasksStore().deleteTask(props.task.id);
 }
+const showTaskEditModal = ref(false);
 </script>
 
 <template>
@@ -33,8 +36,12 @@ function deleteTask() {
             <TaskMoreOptionsDropdown
                 v-if="canDeleteTasks()"
                 :task="task"
+                @edit="showTaskEditModal = true"
                 @delete="deleteTask"></TaskMoreOptionsDropdown>
         </div>
+        <TaskEditModal
+            :task="task"
+            v-model:show="showTaskEditModal"></TaskEditModal>
     </TableRow>
 </template>
 

resources/js/utils/api.ts

@@ -64,6 +64,7 @@ export type ProjectMember = ProjectMemberResponse['data'][0];
 export type CreateTaskBody = ZodiosBodyByAlias<SolidTimeApi, 'createTask'>;
 
 export type CreateClientBody = ZodiosBodyByAlias<SolidTimeApi, 'createClient'>;
+export type UpdateClientBody = ZodiosBodyByAlias<SolidTimeApi, 'updateClient'>;
 
 export type TagIndexResponse = ZodiosResponseByAlias<SolidTimeApi, 'getTags'>;
 export type Tag = TagIndexResponse['data'][0];
@@ -71,6 +72,8 @@ export type Tag = TagIndexResponse['data'][0];
 export type TaskIndexResponse = ZodiosResponseByAlias<SolidTimeApi, 'getTasks'>;
 export type Task = TaskIndexResponse['data'][0];
 
+export type UpdateTaskBody = ZodiosBodyByAlias<SolidTimeApi, 'updateTask'>;
+
 export type ClientIndexResponse = ZodiosResponseByAlias<
     SolidTimeApi,
     'getClients'

resources/js/utils/permissions.ts

@@ -41,6 +41,10 @@ export function canCreateTasks() {
     return currentUserHasPermission('tasks:create');
 }
 
+export function canUpdateTasks() {
+    return currentUserHasPermission('tasks:update');
+}
+
 export function canDeleteTasks() {
     return currentUserHasPermission('tasks:delete');
 }
@@ -49,6 +53,10 @@ export function canCreateClients() {
     return currentUserHasPermission('clients:create');
 }
 
+export function canUpdateClients() {
+    return currentUserHasPermission('clients:update');
+}
+
 export function canDeleteClients() {
     return currentUserHasPermission('clients:delete');
 }

resources/js/utils/useClients.ts

@@ -5,6 +5,7 @@ import type {
     CreateClientBody,
     ClientIndexResponse,
     Client,
+    UpdateClientBody,
 } from '@/utils/api';
 import { getCurrentOrganizationId } from '@/utils/useUser';
 import { useNotificationsStore } from '@/utils/notification';
@@ -49,6 +50,27 @@ export const useClientsStore = defineStore('clients', () => {
         }
     }
 
+    async function updateClient(
+        clientId: string,
+        clientBody: UpdateClientBody
+    ) {
+        const organization = getCurrentOrganizationId();
+        if (organization) {
+            await handleApiRequestNotifications(
+                () =>
+                    api.updateClient(clientBody, {
+                        params: {
+                            organization: organization,
+                            client: clientId,
+                        },
+                    }),
+                'Client updated successfully',
+                'Failed to update client'
+            );
+            await fetchClients();
+        }
+    }
+
     async function deleteClient(clientId: string) {
         const organization = getCurrentOrganizationId();
         if (organization) {
@@ -74,5 +96,5 @@ export const useClientsStore = defineStore('clients', () => {
         return clientResponse.value?.data || [];
     });
 
-    return { clients, fetchClients, createClient, deleteClient };
+    return { clients, fetchClients, createClient, deleteClient, updateClient };
 });

resources/js/utils/useTasks.ts

@@ -2,7 +2,7 @@ import { defineStore } from 'pinia';
 import { getCurrentOrganizationId } from '@/utils/useUser';
 import { api } from '../../../openapi.json.client';
 import { reactive, ref } from 'vue';
-import type { CreateTaskBody, Task } from '@/utils/api';
+import type { CreateTaskBody, Task, UpdateTaskBody } from '@/utils/api';
 import { useNotificationsStore } from '@/utils/notification';
 
 export const useTasksStore = defineStore('tasks', () => {
@@ -25,20 +25,21 @@ export const useTasksStore = defineStore('tasks', () => {
         }
     }
 
-    async function updateTask(task: Task) {
+    async function updateTask(taskId: string, taskBody: UpdateTaskBody) {
         const organizationId = getCurrentOrganizationId();
         if (organizationId) {
             await handleApiRequestNotifications(
                 () =>
-                    api.updateTask(task, {
+                    api.updateTask(taskBody, {
                         params: {
+                            task: taskId,
                             organization: organizationId,
-                            task: task.id,
                         },
                     }),
                 'Task updated successfully',
                 'Failed to update task'
             );
+            await fetchTasks();
         }
     }