f9d4de3e33
- Page titles in blue primary (#222783) - Double main content margins (px-16 py-24) - Remove blue border above sidebar timer - Remove project color dot, use project color on title text - All delete buttons/icons orange (#E2953C) - Fix collapsed sidebar logo (object-cover object-left) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
102 lines
3.0 KiB
Vue
102 lines
3.0 KiB
Vue
<template>
|
|
<div>
|
|
<div class="flex items-center justify-between">
|
|
<h1 class="text-2xl font-bold text-primary-500">Projets</h1>
|
|
<button
|
|
class="rounded-md bg-primary-500 px-4 py-2 text-sm font-semibold text-white hover:bg-secondary-500"
|
|
@click="openCreate"
|
|
>
|
|
+ Ajouter un projet
|
|
</button>
|
|
</div>
|
|
|
|
<div class="mt-6 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
|
<div
|
|
v-for="project in projects"
|
|
:key="project.id"
|
|
class="cursor-pointer rounded-[6px] border border-neutral-200 bg-tertiary-500 p-4 shadow-sm transition hover:shadow-md"
|
|
@click="navigateTo(`/projects/${project.id}`)"
|
|
>
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-3">
|
|
<h3 class="text-md font-bold" :style="{ color: project.color }">{{ project.name }}</h3>
|
|
</div>
|
|
<button
|
|
class="p-1 text-neutral-400 hover:text-primary-500"
|
|
@click.stop="openEdit(project)"
|
|
>
|
|
<Icon name="mdi:pencil-outline" size="16" />
|
|
</button>
|
|
</div>
|
|
<p class="mt-2 text-sm text-neutral-600 line-clamp-4">
|
|
{{ project.description ?? '' }}
|
|
</p>
|
|
</div>
|
|
|
|
<div
|
|
v-if="projects.length === 0 && !isLoading"
|
|
class="col-span-full py-12 text-center text-neutral-400"
|
|
>
|
|
Aucun projet trouvé.
|
|
</div>
|
|
</div>
|
|
|
|
<ProjectDrawer
|
|
v-model="drawerOpen"
|
|
:project="selectedProject"
|
|
:clients="clients"
|
|
@saved="onSaved"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { Project } from '~/services/dto/project'
|
|
import type { Client } from '~/services/dto/client'
|
|
import { useProjectService } from '~/services/projects'
|
|
import { useClientService } from '~/services/clients'
|
|
|
|
useHead({ title: 'Projets' })
|
|
|
|
const projectService = useProjectService()
|
|
const clientService = useClientService()
|
|
|
|
const projects = ref<Project[]>([])
|
|
const clients = ref<Client[]>([])
|
|
const isLoading = ref(true)
|
|
const drawerOpen = ref(false)
|
|
const selectedProject = ref<Project | null>(null)
|
|
|
|
async function loadData() {
|
|
isLoading.value = true
|
|
try {
|
|
const [p, c] = await Promise.all([
|
|
projectService.getAll(),
|
|
clientService.getAll(),
|
|
])
|
|
projects.value = p
|
|
clients.value = c
|
|
} finally {
|
|
isLoading.value = false
|
|
}
|
|
}
|
|
|
|
function openCreate() {
|
|
selectedProject.value = null
|
|
drawerOpen.value = true
|
|
}
|
|
|
|
function openEdit(project: Project) {
|
|
selectedProject.value = project
|
|
drawerOpen.value = true
|
|
}
|
|
|
|
async function onSaved() {
|
|
await loadData()
|
|
}
|
|
|
|
onMounted(() => {
|
|
loadData()
|
|
})
|
|
</script>
|