feat: improve team system to be editable everywhere

HugoRCD · Mar 28, 2024 · 9f77fbb · 9f77fbb
1 parent 5d0603c
commit 9f77fbb
Show file tree

Hide file tree

Showing 13 changed files with 49 additions and 74 deletions.
diff --git a/.github/release.yml b/.github/release.yml
diff --git a/.github/workflows/semantic-pull-request.yml b/.github/workflows/semantic-pull-request.yml
@@ -26,11 +26,9 @@ jobs:
             feat
             fix
             docs
-            dependencies
+            chore
             refactor
             security
-            version
-            other
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 

diff --git a/apps/app/app.vue b/apps/app/app.vue
@@ -39,6 +39,7 @@ await useSession().refresh();
         <NuxtPage />
       </NuxtLayout>
       <Toaster
+        close-button
         position="top-center"
       />
     </Body>

diff --git a/apps/app/components/project/Create.vue b/apps/app/components/project/Create.vue
@@ -103,13 +103,18 @@ function importProject() {
             <FormGroup v-model="projectCreateInput.description" label="Description" type="textarea" />
             <UDivider class="my-4" />
             <div class="flex flex-col gap-4">
-              <div>
-                <h3 class="font-semibold">
-                  Team Members
-                </h3>
-                <p class="text-pretty text-xs text-neutral-500 dark:text-neutral-400">
-                  Add team members to your project
-                </p>
+              <div class="flex items-center justify-between">
+                <div>
+                  <h3 class="font-semibold">
+                    Team Members
+                  </h3>
+                  <p class="text-pretty text-xs text-neutral-500 dark:text-neutral-400">
+                    Add team members to your project
+                  </p>
+                </div>
+                <TeamCreate variant="soft">
+                  Create a team
+                </TeamCreate>
               </div>
               <div>
                 <USkeleton v-if="loading" class="h-8" />

diff --git a/apps/app/components/project/TeamAssign.vue b/apps/app/components/project/TeamAssign.vue
@@ -19,6 +19,8 @@ const { team, projectId, isEmit } = defineProps({
 
 const loading = ref(false);
 
+const refresh = inject("refresh", () => {}) as Function;
+
 const emit = defineEmits(["addTeam"]);
 async function addTeamToProject(teamId: number) {
   if (isEmit) {
@@ -30,7 +32,6 @@ async function addTeamToProject(teamId: number) {
         method: "POST",
       });
       toast.success("Team added to project");
-      const refresh = inject("refresh") as Function;
       await refresh();
     } catch (error) {
       toast.error("An error occurred");
@@ -46,7 +47,7 @@ async function addTeamToProject(teamId: number) {
       <h3 class="text-xs font-semibold text-neutral-600 dark:text-neutral-400">
         {{ team.name }}
       </h3>
-      <TeamMembers :members="team.members" :team-id="team.id" display />
+      <TeamMembers :members="team.members" :team-id="team.id" />
     </div>
     <div class="flex gap-4">
       <UButton

diff --git a/apps/app/components/team/Create.vue b/apps/app/components/team/Create.vue
@@ -1,6 +1,17 @@
 <script setup lang="ts">
 const teamName = ref("")
 
+defineProps({
+  variant: {
+    type: String,
+    default: "solid",
+  },
+  color: {
+    type: String,
+    default: "primary",
+  },
+})
+
 const {
   createLoading,
   fetchTeams,
@@ -19,7 +30,7 @@ async function create_team(name: string) {
 <template>
   <div>
     <UPopover :popper="{ arrow: true }">
-      <UButton>
+      <UButton :variant :color>
         <slot />
       </UButton>
       <template #panel>

diff --git a/apps/app/components/team/Members.vue b/apps/app/components/team/Members.vue
@@ -5,6 +5,7 @@ import type { PropType } from "vue";
 const { members, teamId, display } = defineProps({
   members: {
     type: Array as PropType<Member[]>,
+    required: true,
   },
   teamId: {
     type: Number,
@@ -17,7 +18,6 @@ const { members, teamId, display } = defineProps({
 });
 
 const {
-  fetchTeams,
   upsertMember,
   removeMember,
 } = useTeams();
@@ -53,15 +53,13 @@ async function upsert_member(teamId: number, email: string, role: TeamRole) {
   newMember.value.email = "";
   newMember.value.role = TeamRole.DEVELOPER;
   loadingMembers.value = false;
-  await fetchTeams();
 }
 
 const loadingRemove = ref(false);
 async function remove_member(teamId: number, memberId: number) {
   loadingRemove.value = true;
   await removeMember(teamId, memberId);
   loadingRemove.value = false;
-  await fetchTeams();
 }
 </script>
 
@@ -93,7 +91,7 @@ async function remove_member(teamId: number, memberId: number) {
         </UCard>
       </template>
     </UPopover>
-    <div>
+    <div v-if="user?.role === Role.ADMIN || user?.role === Role.OWNER" class="flex items-center justify-center">
       <UPopover :popper="{ arrow: true }">
         <UTooltip text="Add member" :ui="{ popper: { placement: 'top' } }">
           <span class="flex size-8 cursor-pointer items-center justify-center rounded-full border border-dashed border-gray-400">+</span>

diff --git a/apps/app/pages/app/project/[projectId]/index/settings.vue b/apps/app/pages/app/project/[projectId]/index/settings.vue
@@ -4,6 +4,8 @@ import type { Ref } from "vue";
 
 const { projectId } = useRoute().params;
 
+const user = useCurrentUser();
+
 const project = inject("project") as Ref<Project>;
 const status = inject("status") as Ref<string>;
 
@@ -27,6 +29,7 @@ const {
 fetchTeams()
 
 const userTeams = useUserTeams();
+const projectTeam = computed(() => userTeams.value.find((team) => team.id === project.value?.teamId));
 
 const removeLoading = ref(false);
 const refresh = inject("refresh") as Function;
@@ -75,9 +78,10 @@ async function removeTeamFromProject(teamId: number) {
             <div>
               <USkeleton v-if="status === 'pending' || loading" class="h-8" />
               <div v-else>
-                <div v-if="project && project.team" class="flex items-center justify-between">
-                  <TeamMembers :team-id="project.teamId" :members="project.team.members" display />
+                <div v-if="project && projectTeam" class="flex items-center justify-between">
+                  <TeamMembers :team-id="project.teamId" :members="projectTeam.members" />
                   <UButton
+                    v-if="projectTeam.members.find(member => member.userId === user.value?.id)?.role === 'OWNER'"
                     variant="soft"
                     color="red"
                     class="text-xs"
@@ -88,7 +92,7 @@ async function removeTeamFromProject(teamId: number) {
                   />
                 </div>
                 <div v-else class="flex flex-col gap-4">
-                  <div v-if="userTeams.length !== 0">
+                  <div v-if="userTeams.length !== 0" class="flex flex-col gap-4">
                     <ProjectTeamAssign v-for="team in userTeams" :key="team.id" :team="team" :project-id="project.id" />
                   </div>
                   <div v-else class="flex flex-col items-center justify-center gap-2">

diff --git a/apps/app/pages/app/teams.vue b/apps/app/pages/app/teams.vue
@@ -23,7 +23,6 @@ async function delete_team(teamId: number) {
   deleteLoading.value = true;
   await deleteTeam(teamId);
   deleteLoading.value = false;
-  await fetchTeams();
 }
 
 const columns = [

diff --git a/apps/app/server/api/project/[id]/team/[teamId].delete.ts b/apps/app/server/api/project/[id]/team/[teamId].delete.ts
@@ -6,4 +6,8 @@ export default defineEventHandler(async (event: H3Event) => {
   const teamId = getRouterParam(event, "teamId") as string;
   if (!id || !teamId) throw createError({ statusCode: 400, statusMessage: "Missing params" });
   await removeTeamFromProject(+id, +teamId);
+  return {
+    statusCode: 200,
+    message: "Team removed from project",
+  };
 });
diff --git a/apps/app/server/api/project/[id]/team/[teamId].post.ts b/apps/app/server/api/project/[id]/team/[teamId].post.ts
@@ -6,4 +6,8 @@ export default defineEventHandler(async (event: H3Event) => {
   const teamId = getRouterParam(event, "teamId") as string;
   if (!id || !teamId) throw createError({ statusCode: 400, statusMessage: "Missing params" });
   await addTeamToProject(+id, +teamId);
+  return {
+    statusCode: 200,
+    message: "Team added to project",
+  };
 });
diff --git a/apps/app/server/app/projectService.ts b/apps/app/server/app/projectService.ts
@@ -78,6 +78,7 @@ export const getProjectById = cachedFunction(async (id: number) => {
 });
 
 export async function addTeamToProject(projectId: number, teamId: number) {
+  await removeCachedProjectById(projectId.toString());
   return prisma.project.update({
     where: {
       id: projectId,
@@ -93,6 +94,7 @@ export async function addTeamToProject(projectId: number, teamId: number) {
 }
 
 export async function removeTeamFromProject(projectId: number, teamId: number) {
+  await removeCachedProjectById(projectId.toString());
   return prisma.project.update({
     where: {
       id: projectId,

diff --git a/package.json b/package.json
@@ -30,23 +30,6 @@
   "commitlint": {
     "extends": [
       "@commitlint/config-conventional"
-    ],
-    "rules": {
-      "type-enum": [
-        2,
-        "always",
-        [
-          "breaking",
-          "chore",
-          "docs",
-          "feat",
-          "fix",
-          "refactor",
-          "revert",
-          "test",
-          "other"
-        ]
-      ]
-    }
+    ]
   }
 }