add frontend to deactivate user

resources/js/Components/Common/Member/MemberMakePlaceholderModal.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
+import DialogModal from '@/packages/ui/src/DialogModal.vue';
+import {ref} from 'vue';
+import {api, type Member} from '@/packages/api/src';
+import PrimaryButton from '@/packages/ui/src/Buttons/PrimaryButton.vue';
+import {useMutation} from '@tanstack/vue-query';
+import {getCurrentOrganizationId} from "@/utils/useUser";
+import {useNotificationsStore} from "@/utils/notification";
+import {useMembersStore} from "@/utils/useMembers";
+
+const {handleApiRequestNotifications} = useNotificationsStore();
+
+const show = defineModel('show', {default: false});
+const saving = ref(false);
+
+const props = defineProps<{
+    member: Member;
+}>();
+
+const turnToPlaceholderMutation = useMutation({
+    mutationFn: async () => {
+        const organizationId = getCurrentOrganizationId();
+        if (organizationId === null) {
+            throw new Error('No current organization id - create report');
+        }
+        return await api.makePlaceholder(undefined, {
+            params: {
+                organization: organizationId,
+                member: props.member.id
+            },
+        });
+    },
+});
+
+async function submit() {
+    saving.value = true;
+    await handleApiRequestNotifications(
+        () =>
+            turnToPlaceholderMutation.mutateAsync(),
+        'Deactivating the member was successful!',
+        'There was an error deactivating the user.',
+        () => {
+            show.value = false;
+            useMembersStore().fetchMembers()
+        }
+    );
+}
+
+</script>
+
+<template>
+    <DialogModal closeable :show="show" @close="show = false">
+        <template #title>
+            <div class="flex space-x-2">
+                <span> Deactivate User </span>
+            </div>
+        </template>
+
+        <template #content>
+            <p>
+                Deactivating the user <strong>{{ member.name }} </strong> will remove the user's access to
+                the organization. You will not be billed for inactive users and all time entries will be preserved.
+            </p>
+        </template>
+        <template #footer>
+            <SecondaryButton @click="show = false"> Cancel</SecondaryButton>
+
+            <PrimaryButton
+                class="ms-3"
+                :class="{ 'opacity-25': saving }"
+                :disabled="saving"
+                @click="submit()">
+                Deactivate
+            </PrimaryButton>
+        </template>
+    </DialogModal>
+</template>
+
+<style scoped></style>

resources/js/Components/Common/Member/MemberMoreOptionsDropdown.vue

@@ -1,13 +1,14 @@
 <script setup lang="ts">
-import { TrashIcon, PencilSquareIcon, ArrowDownOnSquareStackIcon } from '@heroicons/vue/20/solid';
+import { TrashIcon, UserCircleIcon, PencilSquareIcon, ArrowDownOnSquareStackIcon } from '@heroicons/vue/20/solid';
 import type { Member } from '@/packages/api/src';
-import {canDeleteMembers, canMergeMembers, canUpdateMembers} from '@/utils/permissions';
+import {canDeleteMembers, canMakeMembersPlaceholders, canMergeMembers, canUpdateMembers} from '@/utils/permissions';
 import MoreOptionsDropdown from '@/packages/ui/src/MoreOptionsDropdown.vue';
 
 const emit = defineEmits<{
     delete: [];
     edit: [];
     merge: [];
+    makePlaceholder: [];
 }>();
 const props = defineProps<{
     member: Member;
@@ -47,6 +48,14 @@ const props = defineProps<{
                 <ArrowDownOnSquareStackIcon class="w-5 text-icon-active"></ArrowDownOnSquareStackIcon>
                 <span>Merge</span>
             </button>
+            <button
+                v-if="props.member.role !== 'placeholder' && canMakeMembersPlaceholders()"
+                :aria-label="'Make Member ' + props.member.name + ' a placeholder'"
+                class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out"
+                @click="emit('makePlaceholder')">
+                <UserCircleIcon class="w-5 text-icon-active"></UserCircleIcon>
+                <span>Deactivate</span>
+            </button>
         </div>
     </MoreOptionsDropdown>
 </template>

resources/js/Components/Common/Member/MemberTableRow.vue

@@ -15,6 +15,7 @@ import MemberEditModal from '@/Components/Common/Member/MemberEditModal.vue';
 import { getOrganizationCurrencyString } from '@/utils/money';
 import { formatCents } from '@/packages/ui/src/utils/money';
 import MemberMergeModal from "@/Components/Common/Member/MemberMergeModal.vue";
+import MemberMakePlaceholderModal from "@/Components/Common/Member/MemberMakePlaceholderModal.vue";
 
 const props = defineProps<{
     member: Member;
@@ -22,6 +23,7 @@ const props = defineProps<{
 
 const showEditMemberModal = ref(false);
 const showMergeMemberModal = ref(false);
+const showMakeMemberPlaceholderModal = ref(false);
 
 function removeMember() {
     useMembersStore().removeMember(props.member.id);
@@ -106,12 +108,14 @@ const userHasValidMailAddress = computed(() => {
                 @edit="showEditMemberModal = true"
                 @delete="removeMember"
                 @merge="showMergeMemberModal = true"
+                @make-placeholder="showMakeMemberPlaceholderModal = true"
             ></MemberMoreOptionsDropdown>
         </div>
         <MemberEditModal
             v-model:show="showEditMemberModal"
             :member="member"></MemberEditModal>
         <MemberMergeModal v-model:show="showMergeMemberModal" :member="member"></MemberMergeModal>
+        <MemberMakePlaceholderModal v-model:show="showMakeMemberPlaceholderModal" :member="member"></MemberMakePlaceholderModal>
     </TableRow>
 </template>