add basic crud frontend for clients, tags and projects

resources/js/Components/Common/Client/ClientCreateModal.vue

@@ -0,0 +1,66 @@
+<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 type { CreateClientBody } from '@/utils/api';
+import PrimaryButton from '@/Components/PrimaryButton.vue';
+import { useFocus } from '@vueuse/core';
+import { useClientsStore } from '@/utils/useClients';
+
+const { createClient } = useClientsStore();
+const show = defineModel('show', { default: false });
+const saving = ref(false);
+
+const client = ref<CreateClientBody>({
+    name: '',
+});
+
+async function submit() {
+    await createClient(client.value);
+    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> Create Client </span>
+            </div>
+        </template>
+
+        <template #content>
+            <div class="flex items-center space-x-4">
+                <div class="col-span-6 sm:col-span-4 flex-1">
+                    <TextInput
+                        id="clientName"
+                        ref="clientNameInput"
+                        v-model="client.name"
+                        type="text"
+                        placeholder="Client Name"
+                        @keydown.enter="submit"
+                        class="mt-1 block w-full"
+                        required
+                        autocomplete="clientName" />
+                </div>
+            </div>
+        </template>
+        <template #footer>
+            <SecondaryButton @click="show = false"> Cancel </SecondaryButton>
+
+            <PrimaryButton
+                class="ms-3"
+                :class="{ 'opacity-25': saving }"
+                :disabled="saving"
+                @click="submit">
+                Create Client
+            </PrimaryButton>
+        </template>
+    </DialogModal>
+</template>
+
+<style scoped></style>

resources/js/Components/Common/Client/ClientDropdown.vue

@@ -0,0 +1,179 @@
+<script setup lang="ts">
+import { PlusCircleIcon } from '@heroicons/vue/20/solid';
+import Dropdown from '@/Components/Dropdown.vue';
+import { type Component, computed, nextTick, ref, watch } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useClientsStore } from '@/utils/useClients';
+import ClientDropdownItem from '@/Components/Common/Client/ClientDropdownItem.vue';
+
+const clientsStore = useClientsStore();
+const { clients } = storeToRefs(clientsStore);
+
+const model = defineModel<string | null>({
+    default: null,
+});
+
+const searchInput = ref<HTMLInputElement | null>(null);
+const open = ref(false);
+const dropdownViewport = ref<Component | null>(null);
+
+const searchValue = ref('');
+
+function isClientSelected(id: string) {
+    return model.value === id;
+}
+
+watch(open, (isOpen) => {
+    if (isOpen) {
+        nextTick(() => {
+            searchInput.value?.focus();
+        });
+    }
+});
+
+const filteredClients = computed(() => {
+    return clients.value.filter((client) => {
+        return client.name
+            .toLowerCase()
+            .includes(searchValue.value?.toLowerCase()?.trim() || '');
+    });
+});
+
+async function addClientIfNoneExists() {
+    if (searchValue.value.length > 0 && filteredClients.value.length === 0) {
+        const newClient = await clientsStore.createClient({
+            name: searchValue.value,
+        });
+        if (newClient) {
+            model.value = newClient.id;
+            searchValue.value = '';
+        }
+    } else {
+        if (highlightedItemId.value) {
+            model.value = highlightedItemId.value;
+        }
+    }
+}
+
+watch(filteredClients, () => {
+    if (filteredClients.value.length > 0) {
+        highlightedItemId.value = filteredClients.value[0].id;
+    }
+});
+
+function updateSearchValue(event: Event) {
+    const newInput = (event.target as HTMLInputElement).value;
+    if (newInput === ' ') {
+        searchValue.value = '';
+        const highlightedClientId = highlightedItemId.value;
+        if (highlightedClientId) {
+            const highlightedClient = clients.value.find(
+                (client) => client.id === highlightedClientId
+            );
+            if (highlightedClient) {
+                model.value = highlightedClient.id;
+            }
+        }
+    } else {
+        searchValue.value = newInput;
+    }
+}
+
+const emit = defineEmits(['update:modelValue', 'changed']);
+
+function updateClient(newValue: string) {
+    model.value = newValue;
+    nextTick(() => {
+        emit('changed');
+    });
+}
+
+function moveHighlightUp() {
+    if (highlightedItem.value) {
+        const currentHightlightedIndex = filteredClients.value.indexOf(
+            highlightedItem.value
+        );
+        if (currentHightlightedIndex === 0) {
+            highlightedItemId.value =
+                filteredClients.value[filteredClients.value.length - 1].id;
+        } else {
+            highlightedItemId.value =
+                filteredClients.value[currentHightlightedIndex - 1].id;
+        }
+    }
+}
+
+function moveHighlightDown() {
+    if (highlightedItem.value) {
+        const currentHightlightedIndex = filteredClients.value.indexOf(
+            highlightedItem.value
+        );
+        if (currentHightlightedIndex === filteredClients.value.length - 1) {
+            highlightedItemId.value = filteredClients.value[0].id;
+        } else {
+            highlightedItemId.value =
+                filteredClients.value[currentHightlightedIndex + 1].id;
+        }
+    }
+}
+
+const highlightedItemId = ref<string | null>(null);
+const highlightedItem = computed(() => {
+    return clients.value.find(
+        (client) => client.id === highlightedItemId.value
+    );
+});
+</script>
+
+<template>
+    <Dropdown width="120" v-model="open" :closeOnContentClick="true">
+        <template #trigger>
+            <slot name="trigger"></slot>
+        </template>
+        <template #content>
+            <input
+                :value="searchValue"
+                @input="updateSearchValue"
+                @keydown.enter="addClientIfNoneExists"
+                data-testid="client_dropdown_search"
+                @keydown.up.prevent="moveHighlightUp"
+                @keydown.down.prevent="moveHighlightDown"
+                ref="searchInput"
+                class="bg-card-background border-0 placeholder-muted text-sm text-white py-2.5 focus:ring-0 border-b border-card-background-separator focus:border-card-background-separator w-full"
+                placeholder="Search for a client..." />
+            <div ref="dropdownViewport" class="w-60">
+                <div
+                    v-if="
+                        searchValue.length > 0 && filteredClients.length === 0
+                    "
+                    class="bg-card-background-active">
+                    <div
+                        class="flex space-x-3 items-center px-4 py-3 text-xs font-medium border-t rounded-b-lg border-card-background-separator">
+                        <PlusCircleIcon
+                            class="w-5 flex-shrink-0"></PlusCircleIcon>
+                        <span>Add "{{ searchValue }}" as a new Client</span>
+                    </div>
+                </div>
+                <div v-else></div>
+                <div
+                    v-for="client in filteredClients"
+                    :key="client.id"
+                    role="option"
+                    :value="client.id"
+                    :class="{
+                        'bg-card-background-active':
+                            client.id === highlightedItemId,
+                    }"
+                    data-testid="client_dropdown_entries"
+                    :data-client-id="client.id">
+                    <ClientDropdownItem
+                        :selected="isClientSelected(client.id)"
+                        @click="updateClient(client.id)"
+                        :name="client.name"></ClientDropdownItem>
+                </div>
+            </div>
+        </template>
+    </Dropdown>
+</template>
+
+<style scoped></style>

resources/js/Components/Common/Client/ClientDropdownItem.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { CheckCircleIcon } from '@heroicons/vue/20/solid';
+import { computed } from 'vue';
+import { twMerge } from 'tailwind-merge';
+
+const props = defineProps<{
+    name: string;
+    selected: boolean;
+}>();
+
+const iconClasses = computed(() => {
+    if (props.selected) {
+        return 'text-accent-200';
+    } else {
+        return 'text-card-border';
+    }
+});
+</script>
+
+<template>
+    <div
+        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">
+        <CheckCircleIcon :class="twMerge(iconClasses, 'w-5')"></CheckCircleIcon>
+        <span>{{ name }}</span>
+    </div>
+</template>
+
+<style scoped></style>

resources/js/Components/Common/Client/ClientMoreOptionsDropdown.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import Dropdown from '@/Components/Dropdown.vue';
+import { TrashIcon } from '@heroicons/vue/20/solid';
+import type { Client } from '@/utils/api';
+
+const emit = defineEmits<{
+    delete: [];
+}>();
+const props = defineProps<{
+    client: Client;
+}>();
+</script>
+
+<template>
+    <Dropdown>
+        <template #trigger>
+            <svg
+                data-testid="client_actions"
+                :aria-label="'Actions for Client ' + props.client.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 Client ' + props.client.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/Client/ClientTable.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import SecondaryButton from '@/Components/SecondaryButton.vue';
+import { UserCircleIcon } from '@heroicons/vue/24/solid';
+import { PlusIcon } from '@heroicons/vue/16/solid';
+import { ref } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useClientsStore } from '@/utils/useClients';
+import ClientTableRow from '@/Components/Common/Client/ClientTableRow.vue';
+import ClientCreateModal from '@/Components/Common/Client/ClientCreateModal.vue';
+import ClientTableHeading from '@/Components/Common/Client/ClientTableHeading.vue';
+
+const { clients } = storeToRefs(useClientsStore());
+
+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 150px 80px">
+                <ClientTableHeading></ClientTableHeading>
+                <div
+                    class="col-span-2 py-24 text-center"
+                    v-if="clients.length === 0">
+                    <UserCircleIcon
+                        class="w-8 text-icon-default inline pb-2"></UserCircleIcon>
+                    <h3 class="text-white font-semibold">No clients found</h3>
+                    <p class="pb-5">Create your first client now!</p>
+                    <SecondaryButton
+                        @click="createClient = true"
+                        :icon="PlusIcon"
+                        >Create your First Client
+                    </SecondaryButton>
+                </div>
+                <template v-for="client in clients" :key="client.id">
+                    <ClientTableRow :client="client"></ClientTableRow>
+                </template>
+            </div>
+        </div>
+    </div>
+</template>

resources/js/Components/Common/Client/ClientTableHeading.vue

@@ -0,0 +1,18 @@
+<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">
+        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/Client/ClientTableRow.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import type { Client } from '@/utils/api';
+import { computed } from 'vue';
+import { CheckCircleIcon } from '@heroicons/vue/20/solid';
+import { useClientsStore } from '@/utils/useClients';
+import { storeToRefs } from 'pinia';
+import ClientMoreOptionsDropdown from '@/Components/Common/Client/ClientMoreOptionsDropdown.vue';
+import { useProjectsStore } from '@/utils/useProjects';
+
+const { projects } = storeToRefs(useProjectsStore());
+
+const props = defineProps<{
+    client: Client;
+}>();
+
+function deleteClient() {
+    useClientsStore().deleteClient(props.client.id);
+}
+
+const projectCount = computed(() => {
+    return projects.value.filter(
+        (projects) => projects.client_id === props.client.id
+    ).length;
+});
+</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>
+            {{ client.name }}
+        </span>
+        <span class="text-muted"> {{ projectCount }} Projects </span>
+    </div>
+    <div
+        class="whitespace-nowrap px-3 py-4 text-sm text-muted flex space-x-1 items-center font-medium">
+        <CheckCircleIcon class="w-5"></CheckCircleIcon>
+        <span>Active</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">
+        <ClientMoreOptionsDropdown
+            :client="client"
+            @delete="deleteClient"></ClientMoreOptionsDropdown>
+    </div>
+</template>
+
+<style scoped></style>