add project member edit modal, fixes ST-119

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="
-                    deleteProjectMember
-                "></ProjectMemberMoreOptionsDropdown>
+                @delete="deleteProjectMember"
+                @edit="editProjectMember"></ProjectMemberMoreOptionsDropdown>
         </div>
     </TableRow>
 </template>