From b5f9f4d76622783d1d7c4b28b34a5fe980597a2c Mon Sep 17 00:00:00 2001
From: Gregor Vostrak <gregorvostrak@Gregors-MacBook-Pro.local>
Date: Sun, 14 Apr 2024 02:46:01 +0200
Subject: [PATCH] add invite button for placeholder users on members table

---
 .../Components/Common/Member/MemberTable.vue  |  2 +-
 .../Common/Member/MemberTableRow.vue          | 27 +++++++++++++++++++
 resources/js/Components/SecondaryButton.vue   | 14 +++++++++-
 resources/js/utils/notification.ts            |  6 +----
 4 files changed, 42 insertions(+), 7 deletions(-)

diff --git a/resources/js/Components/Common/Member/MemberTable.vue b/resources/js/Components/Common/Member/MemberTable.vue
index 4f43d17d..a71a721e 100644
--- a/resources/js/Components/Common/Member/MemberTable.vue
+++ b/resources/js/Components/Common/Member/MemberTable.vue
@@ -17,7 +17,7 @@ const createClient = ref(false);
             <div
                 data-testid="client_table"
                 class="grid min-w-full"
-                style="grid-template-columns: 1fr 1fr 180px 180px 150px 80px">
+                style="grid-template-columns: 1fr 1fr 180px 180px 150px 130px">
                 <MemberTableHeading></MemberTableHeading>
                 <template v-for="member in members" :key="member.id">
                     <MemberTableRow :member="member"></MemberTableRow>
diff --git a/resources/js/Components/Common/Member/MemberTableRow.vue b/resources/js/Components/Common/Member/MemberTableRow.vue
index 21903883..62465a7f 100644
--- a/resources/js/Components/Common/Member/MemberTableRow.vue
+++ b/resources/js/Components/Common/Member/MemberTableRow.vue
@@ -5,6 +5,10 @@ import { useClientsStore } from '@/utils/useClients';
 import MemberMoreOptionsDropdown from '@/Components/Common/Member/MemberMoreOptionsDropdown.vue';
 import TableRow from '@/Components/TableRow.vue';
 import { capitalizeFirstLetter } from '../../../utils/format';
+import SecondaryButton from '@/Components/SecondaryButton.vue';
+import { api } from '../../../../../openapi.json.client';
+import { getCurrentOrganizationId } from '@/utils/useUser';
+import { useNotificationsStore } from '@/utils/notification';
 
 const props = defineProps<{
     member: Member;
@@ -13,6 +17,26 @@ const props = defineProps<{
 function removeMember() {
     useClientsStore().deleteClient(props.member.id);
 }
+
+async function invitePlaceholder(id: string) {
+    const { handleApiRequestNotifications } = useNotificationsStore();
+    const organizationId = getCurrentOrganizationId();
+    if (organizationId) {
+        await handleApiRequestNotifications(
+            api.invitePlaceholder(
+                {},
+                {
+                    params: {
+                        organization: organizationId,
+                        membership: id,
+                    },
+                }
+            ),
+            'Member invited successfully',
+            'Error inviting member'
+        );
+    }
+}
 </script>
 
 <template>
@@ -45,6 +69,9 @@ function removeMember() {
         </div>
         <div
             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">
+            <SecondaryButton @click="invitePlaceholder(member.id)" size="small"
+                >Invite</SecondaryButton
+            >
             <MemberMoreOptionsDropdown
                 :member="member"
                 @delete="removeMember"></MemberMoreOptionsDropdown>
diff --git a/resources/js/Components/SecondaryButton.vue b/resources/js/Components/SecondaryButton.vue
index 0828979c..a16cc4c3 100644
--- a/resources/js/Components/SecondaryButton.vue
+++ b/resources/js/Components/SecondaryButton.vue
@@ -7,17 +7,29 @@ const props = withDefaults(
     defineProps<{
         type: HtmlButtonType;
         icon?: Component;
+        size: 'small' | 'base';
     }>(),
     {
         type: 'button',
+        size: 'base',
     }
 );
+
+const sizeClasses = {
+    small: 'text-xs px-2 sm:px-2.5 py-1 sm:py-1.5',
+    base: 'text-xs sm:text-sm px-2 sm:px-3 py-1 sm:py-2',
+};
 </script>
 
 <template>
     <button
         :type="type"
-        class="bg-button-secondary-background border border-button-secondary-border hover:bg-button-secondary-background-hover shadow-sm transition text-white text-xs sm:text-sm px-2 sm:px-3 py-1 sm:py-2 rounded-lg font-semibold inline-flex items-center space-x-1.5 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:opacity-25 ease-in-out">
+        :class="
+            twMerge(
+                'bg-button-secondary-background border border-button-secondary-border hover:bg-button-secondary-background-hover shadow-sm transition text-white rounded-lg font-semibold inline-flex items-center space-x-1.5 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:opacity-25 ease-in-out',
+                sizeClasses[props.size]
+            )
+        ">
         <span
             :class="
                 twMerge('flex items-center ', props.icon ? 'space-x-1.5' : '')
diff --git a/resources/js/utils/notification.ts b/resources/js/utils/notification.ts
index eed24f1a..658cbd72 100644
--- a/resources/js/utils/notification.ts
+++ b/resources/js/utils/notification.ts
@@ -62,11 +62,7 @@ export const useNotificationsStore = defineStore('notifications', () => {
                             'An request error occurred. Please try again later.'
                     );
                 } else if (error?.response?.status === 422) {
-                    const message = error.response.data.errors
-                        .map((error: { message: string }) => {
-                            return error.message;
-                        })
-                        .join('\n');
+                    const message = error.response.data.message;
                     addNotification('error', message);
                 } else {
                     addNotification(