add project member edit modal, fixes ST-119

e2e/projects.spec.ts

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

resources/js/Components/Common/Member/MemberCombobox.vue

@@ -16,9 +16,16 @@ const model = defineModel<string>({
     default: '',
 });
 
-const props = defineProps<{
+const props = withDefaults(
-    hiddenMembers: ProjectMember[];
+    defineProps<{
-}>();
+        hiddenMembers: ProjectMember[];
+        disabled: boolean;
+    }>(),
+    {
+        hiddenMembers: () => [] as ProjectMember[],
+        disabled: false,
+    }
+);
 
 const searchInput = ref<HTMLInputElement | null>(null);
 
@@ -161,6 +168,7 @@ function onUnfocus() {
         </div>
         <TextInput
             :value="currentValue"
+            :disabled="disabled"
             @input="updateSearchValue"
             data-testid="member_dropdown_search"
             @keydown.enter.prevent="updateMember(highlightedItemId)"

resources/js/Components/Common/ProjectMember/ProjectMemberEditModal.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import SecondaryButton from '@/Components/SecondaryButton.vue';
+import DialogModal from '@/Components/DialogModal.vue';
+import { ref, watch } from 'vue';
+import type { ProjectMember, UpdateProjectMemberBody } from '@/utils/api';
+import PrimaryButton from '@/Components/PrimaryButton.vue';
+import { useFocus } from '@vueuse/core';
+import { useProjectMembersStore } from '@/utils/useProjectMembers';
+import BillableRateInput from '@/Components/Common/BillableRateInput.vue';
+import { UserIcon } from '@heroicons/vue/24/solid';
+const { updateProjectMember } = useProjectMembersStore();
+
+const show = defineModel('show', { default: false });
+const saving = ref(false);
+
+const props = defineProps<{
+    projectMember: ProjectMember;
+    name?: string;
+}>();
+
+const projectMemberBody = ref<UpdateProjectMemberBody>({
+    billable_rate: props.projectMember.billable_rate,
+});
+
+async function submit() {
+    await updateProjectMember(props.projectMember.id, projectMemberBody.value);
+    show.value = false;
+    projectMemberBody.value = {
+        billable_rate: null,
+    };
+}
+
+watch(
+    () => show.value,
+    (value) => {
+        if (value) {
+            projectMemberBody.value = {
+                billable_rate: props.projectMember.billable_rate,
+            };
+        }
+    }
+);
+
+const projectNameInput = ref<HTMLInputElement | null>(null);
+
+useFocus(projectNameInput, { initialValue: true });
+</script>
+
+<template>
+    <DialogModal closeable :show="show" @close="show = false">
+        <template #title>
+            <div class="flex space-x-2">
+                <span>Edit Project Member</span>
+            </div>
+        </template>
+
+        <template #content>
+            <div class="grid grid-cols-3 items-center space-x-4">
+                <div
+                    class="col-span-3 sm:col-span-2 space-x-2 flex items-center">
+                    <UserIcon class="w-4 text-muted"></UserIcon>
+                    <span>{{ props.name }}</span>
+                </div>
+                <div class="col-span-3 sm:col-span-1 flex-1">
+                    <BillableRateInput
+                        @keydown.enter="submit"
+                        name="billable_rate"
+                        v-model="
+                            projectMemberBody.billable_rate
+                        "></BillableRateInput>
+                </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 Member
+            </PrimaryButton>
+        </template>
+    </DialogModal>
+</template>
+
+<style scoped></style>

resources/js/Components/Common/ProjectMember/ProjectMemberMoreOptionsDropdown.vue

@@ -1,12 +1,13 @@
 <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 { ProjectMember } from '@/utils/api';
 import { useMembersStore } from '@/utils/useMembers';
 import { storeToRefs } from 'pinia';
 import { computed } from 'vue';
 const emit = defineEmits<{
     delete: [];
+    edit: [];
 }>();
 const props = defineProps<{
     projectMember: ProjectMember;
@@ -42,6 +43,14 @@ const currentMember = computed(() => {
             </svg>
         </template>
         <template #content>
+            <button
+                @click.prevent="emit('edit')"
+                :aria-label="'Edit Project Member ' + currentMember?.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">
+                <PencilSquareIcon
+                    class="w-5 text-icon-active"></PencilSquareIcon>
+                <span>Edit</span>
+            </button>
             <button
                 @click.prevent="emit('delete')"
                 :aria-label="'Delete Project Member ' + currentMember?.name"

resources/js/Components/Common/ProjectMember/ProjectMemberTableRow.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { ProjectMember } from '@/utils/api';
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import { storeToRefs } from 'pinia';
 import TableRow from '@/Components/TableRow.vue';
 import { useMembersStore } from '@/utils/useMembers';
@@ -8,6 +8,7 @@ import { useProjectMembersStore } from '@/utils/useProjectMembers';
 import ProjectMemberMoreOptionsDropdown from '@/Components/Common/ProjectMember/ProjectMemberMoreOptionsDropdown.vue';
 import { formatCents } from '@/utils/money';
 import { capitalizeFirstLetter } from '@/utils/format';
+import ProjectMemberEditModal from '@/Components/Common/ProjectMember/ProjectMemberEditModal.vue';
 
 const props = defineProps<{
     projectMember: ProjectMember;
@@ -19,16 +20,25 @@ function deleteProjectMember() {
     );
 }
 
+function editProjectMember() {
+    showEditModal.value = true;
+}
+
 const { members } = storeToRefs(useMembersStore());
 const member = computed(() => {
     return members.value.find(
         (member) => member.id === props.projectMember.member_id
     );
 });
+const showEditModal = ref(false);
 </script>
 
 <template>
     <TableRow>
+        <ProjectMemberEditModal
+            :name="member?.name"
+            v-model:show="showEditModal"
+            :project-member="projectMember"></ProjectMemberEditModal>
         <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>
@@ -49,9 +59,8 @@ const member = 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">
             <ProjectMemberMoreOptionsDropdown
                 :project-member="projectMember"
-                @delete="
+                @delete="deleteProjectMember"
-                    deleteProjectMember
+                @edit="editProjectMember"></ProjectMemberMoreOptionsDropdown>
-                "></ProjectMemberMoreOptionsDropdown>
         </div>
     </TableRow>
 </template>

resources/js/utils/api.ts

@@ -54,6 +54,11 @@ export type CreateProjectMemberBody = ZodiosBodyByAlias<
     'createProjectMember'
 >;
 
+export type UpdateProjectMemberBody = ZodiosBodyByAlias<
+    SolidTimeApi,
+    'updateProjectMember'
+>;
+
 export type ProjectMember = ProjectMemberResponse['data'][0];
 
 export type CreateTaskBody = ZodiosBodyByAlias<SolidTimeApi, 'createTask'>;

resources/js/utils/useProjectMembers.ts

@@ -5,6 +5,7 @@ import type {
     CreateProjectMemberBody,
     ProjectMember,
     ProjectMemberResponse,
+    UpdateProjectMemberBody,
 } from '@/utils/api';
 import { getCurrentOrganizationId } from '@/utils/useUser';
 import { useNotificationsStore } from '@/utils/notification';
@@ -51,6 +52,27 @@ export const useProjectMembersStore = defineStore('project-members', () => {
         }
     }
 
+    async function updateProjectMember(
+        projectMemberId: string,
+        projectMemberBody: UpdateProjectMemberBody
+    ) {
+        const organization = getCurrentOrganizationId();
+        if (organization) {
+            const response = await handleApiRequestNotifications(
+                () =>
+                    api.updateProjectMember(projectMemberBody, {
+                        params: {
+                            organization: organization,
+                            projectMember: projectMemberId,
+                        },
+                    }),
+                'Project member updated successfully',
+                'Failed to update project member'
+            );
+            await fetchProjectMembers(response.data.project_id);
+        }
+    }
+
     async function deleteProjectMember(
         projectId: string,
         projectMemberId: string
@@ -84,5 +106,6 @@ export const useProjectMembersStore = defineStore('project-members', () => {
         fetchProjectMembers,
         createProjectMember,
         deleteProjectMember,
+        updateProjectMember,
     };
 });