From 338e4ec46989d8422cb07f750ccb444c1182ae0f Mon Sep 17 00:00:00 2001
From: Gregor Vostrak <gregor@solidtime.io>
Date: Sun, 21 Apr 2024 00:25:43 +0200
Subject: [PATCH] filter placeholder role so it cannot be selected for invites

---
 .../js/Components/Common/Member/MemberInviteModal.vue      | 3 ++-
 resources/js/Components/TableRow.vue                       | 4 ++--
 resources/js/Pages/Teams/Partials/TeamMemberManager.vue    | 3 ++-
 resources/js/utils/roles.ts                                | 7 +++++++
 4 files changed, 13 insertions(+), 4 deletions(-)
 create mode 100644 resources/js/utils/roles.ts

diff --git a/resources/js/Components/Common/Member/MemberInviteModal.vue b/resources/js/Components/Common/Member/MemberInviteModal.vue
index c939d49e..862fafe3 100644
--- a/resources/js/Components/Common/Member/MemberInviteModal.vue
+++ b/resources/js/Components/Common/Member/MemberInviteModal.vue
@@ -10,6 +10,7 @@ import InputError from '@/Components/InputError.vue';
 import type { Role } from '@/types/jetstream';
 import { useForm } from '@inertiajs/vue3';
 import { getCurrentOrganizationId } from '@/utils/useUser';
+import { filterRoles } from '@/utils/roles';
 
 const show = defineModel('show', { default: false });
 const saving = ref(false);
@@ -78,7 +79,7 @@ useFocus(clientNameInput, { initialValue: true });
                     <div
                         class="relative z-0 mt-1 border border-card-border rounded-lg cursor-pointer">
                         <button
-                            v-for="(role, i) in availableRoles"
+                            v-for="(role, i) in filterRoles(availableRoles)"
                             :key="role.key"
                             type="button"
                             class="relative px-4 py-3 inline-flex w-full rounded-lg focus:z-10 focus:outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500"
diff --git a/resources/js/Components/TableRow.vue b/resources/js/Components/TableRow.vue
index afbfa044..3bbaf36c 100644
--- a/resources/js/Components/TableRow.vue
+++ b/resources/js/Components/TableRow.vue
@@ -13,8 +13,8 @@ defineProps<{
         :href="href"
         :class="
             twMerge(
-                'contents [&>*]:hover:bg-white/5 [&>*]:transition [&>*]:cursor-pointer [&>*]:border-row-separator [&>*]:border-b',
-                href ? '[&>*]:cursor-pointer' : ''
+                'contents [&>*]:transition [&>*]:border-row-separator [&>*]:border-b',
+                href ? '[&>*]:cursor-pointer [&>*]:hover:bg-white/5' : ''
             )
         ">
         <slot></slot>
diff --git a/resources/js/Pages/Teams/Partials/TeamMemberManager.vue b/resources/js/Pages/Teams/Partials/TeamMemberManager.vue
index dff06326..f403bda4 100644
--- a/resources/js/Pages/Teams/Partials/TeamMemberManager.vue
+++ b/resources/js/Pages/Teams/Partials/TeamMemberManager.vue
@@ -19,6 +19,7 @@ import type {
     User,
 } from '@/types/models';
 import type { Membership, Permissions, Role } from '@/types/jetstream';
+import { filterRoles } from '@/utils/roles';
 
 type UserWithMembership = User & { membership: Membership };
 
@@ -169,7 +170,7 @@ const displayableRole = (role: string) => {
                         <div
                             class="relative z-0 mt-1 border border-card-border rounded-lg cursor-pointer">
                             <button
-                                v-for="(role, i) in availableRoles"
+                                v-for="(role, i) in filterRoles(availableRoles)"
                                 :key="role.key"
                                 type="button"
                                 class="relative px-4 py-3 inline-flex w-full rounded-lg focus:z-10 focus:outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500"
diff --git a/resources/js/utils/roles.ts b/resources/js/utils/roles.ts
new file mode 100644
index 00000000..72a47dfd
--- /dev/null
+++ b/resources/js/utils/roles.ts
@@ -0,0 +1,7 @@
+import type { Role } from '@/types/jetstream';
+
+export function filterRoles(roles: Role[]) {
+    return roles.filter(function (role) {
+        return role.key !== 'placeholder';
+    });
+}