add basic crud frontend for clients, tags and projects

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

@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import TextInput from '@/Components/TextInput.vue';
+import SecondaryButton from '@/Components/SecondaryButton.vue';
+import DialogModal from '@/Components/DialogModal.vue';
+import { ref } from 'vue';
+import PrimaryButton from '@/Components/PrimaryButton.vue';
+import { useFocus } from '@vueuse/core';
+import InputLabel from '@/Components/InputLabel.vue';
+import InputError from '@/Components/InputError.vue';
+import type { Role } from '@/types/jetstream';
+import { useForm } from '@inertiajs/vue3';
+import { getCurrentOrganizationId } from '@/utils/useUser';
+
+const show = defineModel('show', { default: false });
+const saving = ref(false);
+
+defineProps<{
+    availableRoles: Role[];
+}>();
+
+const addTeamMemberForm = useForm({
+    email: '',
+    role: null as string | null,
+});
+
+async function submit() {
+    const organizationId = getCurrentOrganizationId();
+    if (organizationId) {
+        addTeamMemberForm.post(route('team-members.store', organizationId), {
+            errorBag: 'addTeamMember',
+            preserveScroll: true,
+            onSuccess: () => {
+                addTeamMemberForm.reset();
+                show.value = false;
+            },
+        });
+    }
+}
+
+const clientNameInput = ref<HTMLInputElement | null>(null);
+useFocus(clientNameInput, { initialValue: true });
+</script>
+
+<template>
+    <DialogModal closeable :show="show" @close="show = false">
+        <template #title>
+            <div class="flex space-x-2">
+                <span> Invite Member </span>
+            </div>
+        </template>
+
+        <template #content>
+            <div class="space-y-4">
+                <div class="col-span-6 sm:col-span-4 flex-1">
+                    <InputLabel for="roles" value="Email" />
+                    <TextInput
+                        id="email"
+                        name="email"
+                        ref="memberEmailInput"
+                        v-model="addTeamMemberForm.email"
+                        type="text"
+                        placeholder="Member Email"
+                        @keydown.enter="submit"
+                        class="mt-1 block w-full"
+                        required
+                        autocomplete="memberName" />
+                </div>
+
+                <div v-if="availableRoles.length > 0">
+                    <InputLabel for="roles" value="Role" />
+                    <InputError
+                        :message="addTeamMemberForm.errors.role"
+                        class="mt-2" />
+
+                    <div
+                        class="relative z-0 mt-1 border border-card-border rounded-lg cursor-pointer">
+                        <button
+                            v-for="(role, i) in 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"
+                            :class="{
+                                'border-t border-card-border focus:border-none rounded-t-none':
+                                    i > 0,
+                                'rounded-b-none':
+                                    i != Object.keys(availableRoles).length - 1,
+                            }"
+                            @click="addTeamMemberForm.role = role.key">
+                            <div
+                                :class="{
+                                    'opacity-50':
+                                        addTeamMemberForm.role &&
+                                        addTeamMemberForm.role != role.key,
+                                }">
+                                <!-- Role Name -->
+                                <div class="flex items-center">
+                                    <div
+                                        class="text-sm text-white"
+                                        :class="{
+                                            'font-semibold':
+                                                addTeamMemberForm.role ==
+                                                role.key,
+                                        }">
+                                        {{ role.name }}
+                                    </div>
+
+                                    <svg
+                                        v-if="
+                                            addTeamMemberForm.role == role.key
+                                        "
+                                        class="ms-2 h-5 w-5 text-green-400"
+                                        xmlns="http://www.w3.org/2000/svg"
+                                        fill="none"
+                                        viewBox="0 0 24 24"
+                                        stroke-width="1.5"
+                                        stroke="currentColor">
+                                        <path
+                                            stroke-linecap="round"
+                                            stroke-linejoin="round"
+                                            d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                                    </svg>
+                                </div>
+
+                                <!-- Role Description -->
+                                <div class="mt-2 text-xs text-muted text-start">
+                                    {{ role.description }}
+                                </div>
+                            </div>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </template>
+        <template #footer>
+            <SecondaryButton @click="show = false"> Cancel</SecondaryButton>
+
+            <PrimaryButton
+                class="ms-3"
+                :class="{ 'opacity-25': saving }"
+                :disabled="saving"
+                @click="submit">
+                Invite Member
+            </PrimaryButton>
+        </template>
+    </DialogModal>
+</template>
+
+<style scoped></style>

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

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import Dropdown from '@/Components/Dropdown.vue';
+import { TrashIcon } from '@heroicons/vue/20/solid';
+import type { Member } from '@/utils/api';
+
+const emit = defineEmits<{
+    delete: [];
+}>();
+const props = defineProps<{
+    member: Member;
+}>();
+</script>
+
+<template>
+    <Dropdown>
+        <template #trigger>
+            <svg
+                data-testid="client_actions"
+                :aria-label="'Actions for Member ' + props.member.name"
+                class="h-10 w-10 p-2 rounded-full hover:bg-card-background opacity-20 group-hover:opacity-100 transition"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg">
+                <path
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="1.5"
+                    d="M12 5.92A.96.96 0 1 0 12 4a.96.96 0 0 0 0 1.92m0 7.04a.96.96 0 1 0 0-1.92a.96.96 0 0 0 0 1.92M12 20a.96.96 0 1 0 0-1.92a.96.96 0 0 0 0 1.92" />
+            </svg>
+        </template>
+        <template #content>
+            <button
+                @click="emit('delete')"
+                :aria-label="'Delete Member ' + props.member.name"
+                data-testid="client_delete"
+                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">
+                <TrashIcon class="w-5 text-icon-active"></TrashIcon>
+                <span>Delete</span>
+            </button>
+        </template>
+    </Dropdown>
+</template>
+
+<style scoped></style>

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

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { ref } 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);
+</script>
+
+<template>
+    <ClientCreateModal v-model:show="createClient"></ClientCreateModal>
+    <div class="flow-root">
+        <div class="inline-block min-w-full align-middle">
+            <div
+                data-testid="client_table"
+                class="grid min-w-full divide-y divide-row-separator border-b border-row-separator"
+                style="grid-template-columns: 1fr 1fr 180px 180px 150px 80px">
+                <MemberTableHeading></MemberTableHeading>
+                <template v-for="member in members" :key="member.id">
+                    <MemberTableRow :member="member"></MemberTableRow>
+                </template>
+            </div>
+        </div>
+    </div>
+</template>

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

@@ -0,0 +1,30 @@
+<script setup lang="ts"></script>
+
+<template>
+    <div
+        class="py-1.5 pr-3 text-left text-sm font-semibold text-white pl-4 sm:pl-6 lg:pl-8 3xl:pl-12 bg-row-heading-background border-t border-row-heading-border">
+        Name
+    </div>
+    <div
+        class="px-3 py-1.5 text-left text-sm font-semibold text-white bg-row-heading-background">
+        Email
+    </div>
+    <div
+        class="px-3 py-1.5 text-left text-sm font-semibold text-white bg-row-heading-background">
+        Role
+    </div>
+    <div
+        class="px-3 py-1.5 text-left text-sm font-semibold text-white bg-row-heading-background">
+        Billable Rate
+    </div>
+    <div
+        class="px-3 py-1.5 text-left text-sm font-semibold text-white bg-row-heading-background">
+        Status
+    </div>
+    <div
+        class="relative py-1.5 pl-3 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12 bg-row-heading-background">
+        <span class="sr-only">Edit</span>
+    </div>
+</template>
+
+<style scoped></style>

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

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import type { Member } from '@/utils/api';
+import { CheckCircleIcon, UserCircleIcon } from '@heroicons/vue/20/solid';
+import { useClientsStore } from '@/utils/useClients';
+import MemberMoreOptionsDropdown from '@/Components/Common/Member/MemberMoreOptionsDropdown.vue';
+
+const props = defineProps<{
+    member: Member;
+}>();
+
+function removeMember() {
+    useClientsStore().deleteClient(props.member.id);
+}
+
+function capitalizeFirstLetter(string: string) {
+    return string.charAt(0).toUpperCase() + string.slice(1);
+}
+</script>
+
+<template>
+    <div
+        class="whitespace-nowrap flex items-center space-x-5 3xl:pl-12 py-4 pr-3 text-sm font-medium text-white pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
+        <span>
+            {{ member.name }}
+        </span>
+    </div>
+    <div class="whitespace-nowrap px-3 py-4 text-sm text-muted">
+        {{ member.email }}
+    </div>
+    <div class="whitespace-nowrap px-3 py-4 text-sm text-muted">
+        {{ capitalizeFirstLetter(member.role) }}
+    </div>
+    <div class="whitespace-nowrap px-3 py-4 text-sm text-muted">
+        {{ member.billable_rate ?? '--' }}
+    </div>
+    <div
+        class="whitespace-nowrap px-3 py-4 text-sm text-muted flex space-x-1 items-center font-medium">
+        <CheckCircleIcon
+            v-if="member.is_placeholder === false"
+            class="w-5"></CheckCircleIcon>
+        <span v-if="member.is_placeholder === false">Active</span>
+        <UserCircleIcon
+            v-if="member.is_placeholder === true"
+            class="w-5"></UserCircleIcon>
+        <span v-if="member.is_placeholder === true">Inactive</span>
+    </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">
+        <MemberMoreOptionsDropdown
+            :member="member"
+            @delete="removeMember"></MemberMoreOptionsDropdown>
+    </div>
+</template>
+
+<style scoped></style>