This commit is contained in:
xds
2026-02-18 16:37:40 +03:00
parent 27da4c042e
commit a6faa89686

View File

@@ -9,72 +9,73 @@
<Button label="New Project" icon="pi pi-plus" @click="showCreateDialog = true" /> <Button label="New Project" icon="pi pi-plus" @click="showCreateDialog = true" />
</div> </div>
<div v-if="loading" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> <div v-if="loading" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<Skeleton v-for="i in 3" :key="i" height="150px" class="rounded-xl" /> <Skeleton v-for="i in 3" :key="i" height="150px" class="rounded-xl" />
</div> </div>
<div v-else-if="projects.length === 0" class="text-center py-12 glass-panel rounded-xl"> <div v-else-if="projects.length === 0" class="text-center py-12 glass-panel rounded-xl">
<i class="pi pi-folder-open text-6xl text-slate-600 mb-4"></i> <i class="pi pi-folder-open text-6xl text-slate-600 mb-4"></i>
<h3 class="text-xl font-semibold text-white mb-2">No Projects Yet</h3> <h3 class="text-xl font-semibold text-white mb-2">No Projects Yet</h3>
<p class="text-slate-400 mb-6">Create your first project to get started</p> <p class="text-slate-400 mb-6">Create your first project to get started</p>
<Button label="Create Project" icon="pi pi-plus" @click="showCreateDialog = true" text /> <Button label="Create Project" icon="pi pi-plus" @click="showCreateDialog = true" text />
</div> </div>
<div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div v-for="project in projects" :key="project.id" <div v-for="project in projects" :key="project.id"
class="glass-panel p-6 rounded-xl hover:bg-slate-800/50 transition-colors cursor-pointer group relative overflow-hidden" class="glass-panel p-6 rounded-xl hover:bg-slate-800/50 transition-colors cursor-pointer group relative overflow-hidden"
@click="goToProject(project.id)"> @click="goToProject(project.id)">
<!-- Active Indicator --> <!-- Active Indicator -->
<div v-if="currentProject?.id === project.id" class="absolute top-0 right-0 p-2"> <div v-if="currentProject?.id === project.id" class="absolute top-0 right-0 p-2">
<span <span
class="bg-green-500/20 text-green-400 text-xs px-2 py-1 rounded-full border border-green-500/30 font-medium"> class="bg-green-500/20 text-green-400 text-xs px-2 py-1 rounded-full border border-green-500/30 font-medium">
Active Active
</span> </span>
</div>
<h3 class="text-xl font-semibold text-white mb-2 group-hover:text-primary-400 transition-colors">
{{ project.name }}
</h3>
<p class="text-slate-400 text-sm mb-4 line-clamp-2">
{{ project.description || 'No description' }}
</p>
<div class="flex items-center justify-between mt-4 border-t border-slate-700/50 pt-4">
<div class="flex flex-col">
<div class="flex items-center text-slate-500 text-sm mb-1">
<i class="pi pi-users mr-2"></i>
<span>{{ project.members.length }} members</span>
</div>
<div v-if="projectUsage[project.id]" class="flex items-center text-violet-400 text-xs font-bold">
<i class="pi pi-bolt mr-2"></i>
<span>${{ projectUsage[project.id].toFixed(2) }} spent</span>
</div>
</div> </div>
<Button v-if="currentProject?.id !== project.id" icon="pi pi-check" label="Select" size="small" <h3 class="text-xl font-semibold text-white mb-2 group-hover:text-primary-400 transition-colors">
severity="secondary" @click.stop="selectProject(project.id)" /> {{ project.name }}
</div> </h3>
</div> <p class="text-slate-400 text-sm mb-4 line-clamp-2">
</div> {{ project.description || 'No description' }}
</p>
<!-- Create Project Dialog --> <div class="flex items-center justify-between mt-4 border-t border-slate-700/50 pt-4">
<Dialog v-model:visible="showCreateDialog" modal header="Create New Project" <div class="flex flex-col">
:style="{ width: '90vw', maxWidth: '500px' }"> <div class="flex items-center text-slate-500 text-sm mb-1">
<div class="flex flex-col gap-4 pt-4"> <i class="pi pi-users mr-2"></i>
<div class="flex flex-col gap-2"> <span>{{ project.members.length }} members</span>
<label for="name" class="text-slate-300">Project Name</label> </div>
<InputText id="name" v-model="newProject.name" autofocus /> <div v-if="projectUsage[project.id]" class="flex items-center text-violet-400 text-xs font-bold">
</div> <i class="pi pi-bolt mr-2"></i>
<div class="flex flex-col gap-2"> <span>${{ projectUsage[project.id].toFixed(2) }} spent</span>
<label for="description" class="text-slate-300">Description</label> </div>
<Textarea id="description" v-model="newProject.description" rows="3" autoResize /> </div>
<Button v-if="currentProject?.id !== project.id" icon="pi pi-check" label="Select" size="small"
severity="secondary" @click.stop="selectProject(project.id)" />
</div>
</div> </div>
</div> </div>
<template #footer>
<Button label="Cancel" text severity="secondary" @click="showCreateDialog = false" /> <!-- Create Project Dialog -->
<Button label="Create" icon="pi pi-check" @click="createProject" :loading="creating" /> <Dialog v-model:visible="showCreateDialog" modal header="Create New Project"
</template> :style="{ width: '90vw', maxWidth: '500px' }">
</Dialog> <div class="flex flex-col gap-4 pt-4">
<div class="flex flex-col gap-2">
<label for="name" class="text-slate-300">Project Name</label>
<InputText id="name" v-model="newProject.name" autofocus />
</div>
<div class="flex flex-col gap-2">
<label for="description" class="text-slate-300">Description</label>
<Textarea id="description" v-model="newProject.description" rows="3" autoResize />
</div>
</div>
<template #footer>
<Button label="Cancel" text severity="secondary" @click="showCreateDialog = false" />
<Button label="Create" icon="pi pi-check" @click="createProject" :loading="creating" />
</template>
</Dialog>
</div>
</div> </div>
</template> </template>
@@ -82,6 +83,7 @@
import { ref, onMounted } from 'vue'; import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { useProjectsStore } from '@/stores/projectsStore'; import { useProjectsStore } from '@/stores/projectsStore';
import { aiService } from '@/services/aiService';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import Button from 'primevue/button'; import Button from 'primevue/button';
import Dialog from 'primevue/dialog'; import Dialog from 'primevue/dialog';