adalal/solidtime
1
0
Fork 0
mirror of https://github.com/solidtime-io/solidtime.git synced 2026-08-14 11:12:16 +01:00
Code Issues Packages Projects Releases Wiki Activity

add invitations tab to members page

Browse Source
This commit is contained in:
Gregor Vostrak
2024-04-15 23:45:27 +02:00
parent c30763d718
commit e4bf56d55d
11 changed files with 165 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
resources/js/Components/Common/Invitation/InvitationTable.vue Normal file
View File

@@ -0,0 +1,32 @@
<script setup lang="ts">
import { onMounted } from 'vue';
import { storeToRefs } from 'pinia';
import { useInvitationsStore } from '@/utils/useInvitations';
import InvitationTableRow from '@/Components/Common/Invitation/InvitationTableRow.vue';
import InvitationTableHeading from '@/Components/Common/Invitation/InvitationTableHeading.vue';
const { invitations } = storeToRefs(useInvitationsStore());
onMounted(async () => {
await useInvitationsStore().fetchInvitations();
});
</script>
<template>
<div class="flow-root max-w-[100vw] overflow-x-auto">
<div class="inline-block min-w-full align-middle">
<div
data-testid="client_table"
class="grid min-w-full"
style="grid-template-columns: 1fr 1fr">
<InvitationTableHeading></InvitationTableHeading>
<template
v-for="invitation in invitations"
:key="invitation.id">
<InvitationTableRow
:invitation="invitation"></InvitationTableRow>
</template>
</div>
</div>
</div>
</template>

12
resources/js/Components/Common/Invitation/InvitationTableHeading.vue Normal file
View File

@@ -0,0 +1,12 @@
<script setup lang="ts">
import TableHeading from '@/Components/Common/TableHeading.vue';
</script>
<template>
<TableHeading>
<div class="px-3 py-1.5 text-left font-semibold text-white">Email</div>
<div class="px-3 py-1.5 text-left font-semibold text-white">Role</div>
</TableHeading>
</template>
<style scoped></style>

22
resources/js/Components/Common/Invitation/InvitationTableRow.vue Normal file
View File

@@ -0,0 +1,22 @@
<script setup lang="ts">
import type { Invitation } from '@/utils/api';
import TableRow from '@/Components/TableRow.vue';
import { capitalizeFirstLetter } from '../../../utils/format';
defineProps<{
invitation: Invitation;
}>();
</script>
<template>
<TableRow>
<div class="whitespace-nowrap px-3 py-4 text-sm text-muted">
{{ invitation.email }}
</div>
<div class="whitespace-nowrap px-3 py-4 text-sm text-muted">
{{ capitalizeFirstLetter(invitation.role) }}
</div>
</TableRow>
</template>
<style scoped></style>

3
resources/js/Components/Common/Member/MemberInviteModal.vue
View File

@@ -23,6 +23,8 @@ const addTeamMemberForm = useForm({
role: null as string | null,
});
const emit = defineEmits(['close']);
async function submit() {
const organizationId = getCurrentOrganizationId();
if (organizationId) {
@@ -31,6 +33,7 @@ async function submit() {
preserveScroll: true,
onSuccess: () => {
addTeamMemberForm.reset();
emit('close');
show.value = false;
},
});

9
resources/js/Components/Common/Member/MemberTable.vue
View File

@@ -1,17 +1,18 @@
<script setup lang="ts">
import { ref } from 'vue';
import { onMounted } from 'vue';
import { storeToRefs } from 'pinia';
import ClientCreateModal from '@/Components/Common/Client/ClientCreateModal.vue';
import MemberTableHeading from '@/Components/Common/Member/MemberTableHeading.vue';
import MemberTableRow from '@/Components/Common/Member/MemberTableRow.vue';
import { useMembersStore } from '@/utils/useMembers';
const { members } = storeToRefs(useMembersStore());
const createClient = ref(false);
onMounted(async () => {
await useMembersStore().fetchMembers();
});
</script>
<template>
<ClientCreateModal v-model:show="createClient"></ClientCreateModal>
<div class="flow-root max-w-[100vw] overflow-x-auto">
<div class="inline-block min-w-full align-middle">
<div