solidtime/resources/js/Components/Common/Project/ProjectTableRow.vue

<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';
import TableRow from '@/Components/TableRow.vue';

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>
    <TableRow :href="route('projects.show', { project: project.id })">
        <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>No client</div>
        </div>
        <div class="whitespace-nowrap px-3 py-4 text-sm text-muted">
            {{ project.billable_rate ?? '--' }}
        </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>
    </TableRow>
</template>

<style scoped></style>