solidtime/resources/js/Components/Common/Task/TaskTableRow.vue

<script setup lang="ts">
import type { Task } from '@/utils/api';
import { CheckCircleIcon } from '@heroicons/vue/20/solid';
import { useTasksStore } from '@/utils/useTasks';
import TaskMoreOptionsDropdown from '@/Components/Common/Task/TaskMoreOptionsDropdown.vue';
import TableRow from '@/Components/TableRow.vue';

const props = defineProps<{
    task: Task;
}>();

function deleteTask() {
    useTasksStore().deleteTask(props.task.id);
}
</script>

<template>
    <TableRow>
        <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>
                {{ task.name }}
            </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">
            <TaskMoreOptionsDropdown
                :task="task"
                @delete="deleteTask"></TaskMoreOptionsDropdown>
        </div>
    </TableRow>
</template>

<style scoped></style>