add basic crud frontend for clients, tags and projects

resources/js/Components/Common/Project/ProjectCreateModal.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import TextInput from '@/Components/TextInput.vue';
+import SecondaryButton from '@/Components/SecondaryButton.vue';
+import DialogModal from '@/Components/DialogModal.vue';
+import { computed, ref } from 'vue';
+import type { CreateProjectBody } from '@/utils/api';
+import { getRandomColor } from '@/utils/color';
+import PrimaryButton from '@/Components/PrimaryButton.vue';
+import { useProjectsStore } from '@/utils/useProjects';
+import { useFocus } from '@vueuse/core';
+import ClientDropdown from '@/Components/Common/Client/ClientDropdown.vue';
+import { twMerge } from 'tailwind-merge';
+import Badge from '@/Components/Common/Badge.vue';
+import { useClientsStore } from '@/utils/useClients';
+import { storeToRefs } from 'pinia';
+
+const { createProject } = useProjectsStore();
+const { clients } = storeToRefs(useClientsStore());
+const show = defineModel('show', { default: false });
+const saving = ref(false);
+
+const project = ref<CreateProjectBody>({
+    name: '',
+    color: getRandomColor(),
+    client_id: null,
+});
+
+async function submit() {
+    await createProject(project.value);
+    show.value = false;
+}
+
+const projectNameInput = ref<HTMLInputElement | null>(null);
+
+useFocus(projectNameInput, { initialValue: true });
+
+const currentClientName = computed(() => {
+    if (project.value.client_id) {
+        return clients.value.find(
+            (client) => client.id === project.value.client_id
+        )?.name;
+    }
+    return 'No Client';
+});
+</script>
+
+<template>
+    <DialogModal closeable :show="show" @close="show = false">
+        <template #title>
+            <div class="flex space-x-2">
+                <span> Create Project </span>
+            </div>
+        </template>
+
+        <template #content>
+            <div class="flex items-center space-x-4">
+                <div class="px-3">
+                    <div
+                        :style="{
+                            backgroundColor: project.color,
+                            boxShadow: `var(--tw-ring-inset) 0 0 0 calc(5px + var(--tw-ring-offset-width)) ${project.color}30`,
+                        }"
+                        class="w-4 h-4 rounded-full"></div>
+                </div>
+                <div class="col-span-6 sm:col-span-4 flex-1">
+                    <TextInput
+                        id="projectName"
+                        ref="projectNameInput"
+                        v-model="project.name"
+                        type="text"
+                        placeholder="Project Name"
+                        class="mt-1 block w-full"
+                        required
+                        autocomplete="projectName" />
+                </div>
+                <div class="col-span-6 sm:col-span-4">
+                    <ClientDropdown v-model="project.client_id">
+                        <template #trigger>
+                            <Badge size="large">
+                                <div
+                                    :class="
+                                        twMerge('inline-block rounded-full')
+                                    "></div>
+                                <span>
+                                    {{ currentClientName }}
+                                </span>
+                            </Badge>
+                        </template>
+                    </ClientDropdown>
+                </div>
+            </div>
+        </template>
+        <template #footer>
+            <SecondaryButton @click="show = false"> Cancel </SecondaryButton>
+
+            <PrimaryButton
+                class="ms-3"
+                :class="{ 'opacity-25': saving }"
+                :disabled="saving"
+                @click="submit">
+                Create Project
+            </PrimaryButton>
+        </template>
+    </DialogModal>
+</template>
+
+<style scoped></style>

resources/js/Components/Common/Project/ProjectDropdown.vue

@@ -116,7 +116,7 @@ function updateValue(project: Project) {
                 :border
                 tag="button"
                 :name="selectedProjectName"
-                class="focus:border-input-border-active focus:outline-0 focus:bg-card-background-seperator hover:bg-card-background-seperator"></ProjectBadge>
+                class="focus:border-input-border-active focus:outline-0 focus:bg-card-background-separator hover:bg-card-background-separator"></ProjectBadge>
         </template>
 
         <template #content>
@@ -131,7 +131,7 @@ function updateValue(project: Project) {
                     <ComboboxInput
                         @keydown.enter="addProjectIfNoneExists"
                         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-seperator focus:border-card-background-seperator w-full"
+                        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 project..." />
                 </ComboboxAnchor>
                 <ComboboxContent>
@@ -168,7 +168,7 @@ function updateValue(project: Project) {
                             "
                             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-seperator">
+                                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

resources/js/Components/Common/Project/ProjectMoreOptionsDropdown.vue

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

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { useProjectsStore } from '@/utils/useProjects';
+import SecondaryButton from '@/Components/SecondaryButton.vue';
+import { FolderPlusIcon } from '@heroicons/vue/24/solid';
+import { PlusIcon } from '@heroicons/vue/16/solid';
+import { ref } from 'vue';
+import ProjectCreateModal from '@/Components/Common/Project/ProjectCreateModal.vue';
+import { storeToRefs } from 'pinia';
+import ProjectTableHeading from '@/Components/Common/Project/ProjectTableHeading.vue';
+import ProjectTableRow from '@/Components/Common/Project/ProjectTableRow.vue';
+
+const { projects } = storeToRefs(useProjectsStore());
+
+const createProject = ref(false);
+</script>
+
+<template>
+    <ProjectCreateModal v-model:show="createProject"></ProjectCreateModal>
+    <div class="flow-root">
+        <div class="inline-block min-w-full align-middle">
+            <div
+                data-testid="project_table"
+                class="grid min-w-full divide-y divide-row-separator border-b border-row-separator"
+                style="grid-template-columns: 1fr 150px 150px 150px 80px">
+                <ProjectTableHeading></ProjectTableHeading>
+                <div
+                    class="col-span-5 py-24 text-center"
+                    v-if="projects.length === 0">
+                    <FolderPlusIcon
+                        class="w-8 text-icon-default inline pb-2"></FolderPlusIcon>
+                    <h3 class="text-white font-semibold">No projects found</h3>
+                    <p class="pb-5">Create your first project now!</p>
+                    <SecondaryButton
+                        @click="createProject = true"
+                        :icon="PlusIcon"
+                        >Create your First Project
+                    </SecondaryButton>
+                </div>
+                <template v-for="project in projects" :key="project.id">
+                    <ProjectTableRow :project="project"></ProjectTableRow>
+                </template>
+            </div>
+        </div>
+    </div>
+</template>

resources/js/Components/Common/Project/ProjectTableHeading.vue

@@ -0,0 +1,26 @@
+<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">
+        Client
+    </div>
+    <div
+        class="px-3 py-1.5 text-left text-sm font-semibold text-white bg-row-heading-background">
+        Team
+    </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/Project/ProjectTableRow.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import ProjectMoreOptionsDropdown from '@/Components/Common/Project/ProjectMoreOptionsDropdown.vue';
+import type { Project } from '@/utils/api';
+import { computed } from 'vue';
+import { CheckCircleIcon } from '@heroicons/vue/20/solid';
+import { useClientsStore } from '@/utils/useClients';
+import { storeToRefs } from 'pinia';
+import { useTasksStore } from '@/utils/useTasks';
+import { useProjectsStore } from '@/utils/useProjects';
+
+const { clients } = storeToRefs(useClientsStore());
+const { tasks } = storeToRefs(useTasksStore());
+
+const props = defineProps<{
+    project: Project;
+}>();
+
+const client = computed(() => {
+    return clients.value.find(
+        (client) => client.id === props.project.client_id
+    );
+});
+
+const projectTasksCount = computed(() => {
+    return tasks.value.filter((task) => task.project_id === props.project.id)
+        .length;
+});
+
+function deleteProject() {
+    useProjectsStore().deleteProject(props.project.id);
+}
+</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">
+        <div
+            :style="{
+                backgroundColor: project.color,
+                boxShadow: `var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) ${project.color}30`,
+            }"
+            class="w-3 h-3 rounded-full"></div>
+        <span>
+            {{ project.name }}
+        </span>
+        <span class="text-muted"> {{ projectTasksCount }} Tasks </span>
+    </div>
+    <div class="whitespace-nowrap px-3 py-4 text-sm text-muted">
+        <div v-if="project.client_id">
+            {{ client?.name }}
+        </div>
+        <div v-else>mem No client</div>
+    </div>
+    <div class="whitespace-nowrap px-3 py-4 text-sm text-muted">
+        <div class="isolate flex -space-x-1 opacity-50">
+            <img
+                class="relative z-30 inline-block h-6 w-6 rounded-full ring-4 ring-card-background"
+                src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                alt="" />
+            <img
+                class="relative z-20 inline-block h-6 w-6 rounded-full ring-4 ring-card-background"
+                src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                alt="" />
+            <img
+                class="relative z-10 inline-block h-6 w-6 rounded-full ring-4 ring-card-background"
+                src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80"
+                alt="" />
+            <img
+                class="relative z-0 inline-block h-6 w-6 rounded-full ring-4 ring-card-background"
+                src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                alt="" />
+        </div>
+    </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">
+        <ProjectMoreOptionsDropdown
+            :project="project"
+            @delete="deleteProject"></ProjectMoreOptionsDropdown>
+    </div>
+</template>
+
+<style scoped></style>