mirror of
https://github.com/solidtime-io/solidtime.git
synced 2026-08-17 20:52:14 +01:00
add projects detail page, task create / delete
This commit is contained in:
Gregor Vostrak
@@ -69,6 +69,7 @@ const currentClientName = computed(() => {
|
||||
v-model="project.name"
|
||||
type="text"
|
||||
placeholder="Project Name"
|
||||
@keydown.enter="submit()"
|
||||
class="mt-1 block w-full"
|
||||
required
|
||||
autocomplete="projectName" />
|
||||
|
||||
@@ -30,7 +30,7 @@ const props = defineProps<{
|
||||
</template>
|
||||
<template #content>
|
||||
<button
|
||||
@click="emit('delete')"
|
||||
@click.prevent="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">
|
||||
|
||||
@@ -20,7 +20,7 @@ const createProject = ref(false);
|
||||
<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"
|
||||
class="grid min-w-full"
|
||||
style="grid-template-columns: 1fr 150px 150px 150px 80px">
|
||||
<ProjectTableHeading></ProjectTableHeading>
|
||||
<div
|
||||
|
||||
@@ -1,26 +1,26 @@
|
||||
<script setup lang="ts"></script>
|
||||
<script setup lang="ts">
|
||||
import TableHeading from '@/Components/Common/TableHeading.vue';
|
||||
</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>
|
||||
<TableHeading>
|
||||
<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">
|
||||
Name
|
||||
</div>
|
||||
<div class="px-3 py-1.5 text-left text-sm font-semibold text-white">
|
||||
Client
|
||||
</div>
|
||||
<div class="px-3 py-1.5 text-left text-sm font-semibold text-white">
|
||||
Team
|
||||
</div>
|
||||
<div class="px-3 py-1.5 text-left text-sm font-semibold text-white">
|
||||
Status
|
||||
</div>
|
||||
<div class="relative py-1.5 pl-3 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12">
|
||||
<span class="sr-only">Edit</span>
|
||||
</div>
|
||||
</TableHeading>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
||||
@@ -7,6 +7,7 @@ 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());
|
||||
@@ -32,56 +33,58 @@ function deleteProject() {
|
||||
</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">
|
||||
<TableRow :href="route('projects.show', { project: project.id })">
|
||||
<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 }}
|
||||
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 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 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>
|
||||
<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>
|
||||
<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>
|
||||
</TableRow>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
||||
Reference in New Issue
Block a user