add project members to project show page

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

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import SecondaryButton from '@/Components/SecondaryButton.vue';
+import { PlusIcon } from '@heroicons/vue/16/solid';
+import { ref } from 'vue';
+import ProjectMemberTableRow from '@/Components/Common/ProjectMember/ProjectMemberTableRow.vue';
+import { UserGroupIcon } from '@heroicons/vue/24/solid';
+import ProjectMemberTableHeading from '@/Components/Common/ProjectMember/ProjectMemberTableHeading.vue';
+import ProjectMemberCreateModal from '@/Components/Common/ProjectMember/ProjectMemberCreateModal.vue';
+import type { ProjectMember } from '@/utils/api';
+
+defineProps<{
+    projectId: string;
+    projectMembers: ProjectMember[];
+}>();
+
+const createProjectMember = ref(false);
+</script>
+
+<template>
+    <ProjectMemberCreateModal
+        :existing-members="projectMembers"
+        :project-id="projectId"
+        v-model:show="createProjectMember"></ProjectMemberCreateModal>
+    <div class="flow-root">
+        <div class="inline-block min-w-full align-middle">
+            <div
+                data-testid="project_table"
+                class="grid min-w-full"
+                style="grid-template-columns: 1fr 150px 150px 80px">
+                <ProjectMemberTableHeading></ProjectMemberTableHeading>
+                <div
+                    class="col-span-5 py-24 text-center"
+                    v-if="projectMembers.length === 0">
+                    <UserGroupIcon
+                        class="w-8 text-icon-default inline pb-2"></UserGroupIcon>
+                    <h3 class="text-white font-semibold">No project members</h3>
+                    <p class="pb-5">Add the first project member!</p>
+                    <SecondaryButton
+                        @click="createProjectMember = true"
+                        :icon="PlusIcon"
+                        >Add a new Project Member
+                    </SecondaryButton>
+                </div>
+                <template
+                    v-for="projectMember in projectMembers"
+                    :key="projectMember.id">
+                    <ProjectMemberTableRow
+                        :project-member="projectMember"></ProjectMemberTableRow>
+                </template>
+            </div>
+        </div>
+    </div>
+</template>