fix:project over the title and close backgroud task
This commit is contained in:
@@ -2,7 +2,7 @@
|
||||
<div class="home-view">
|
||||
<div class="header">
|
||||
<h2>My Projects</h2>
|
||||
<el-button type="primary" @click="dialogVisible = true">New Project</el-button>
|
||||
<el-button type="primary" @click="openCreateDialog">New Project</el-button>
|
||||
</div>
|
||||
|
||||
<el-row :gutter="20">
|
||||
@@ -10,11 +10,14 @@
|
||||
<el-card shadow="hover" class="project-card" @click="goToProject(project.id)">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>{{ project.title }}</span>
|
||||
<span class="project-title" :title="project.title">{{ project.title }}</span>
|
||||
<div class="actions">
|
||||
<el-button type="text" icon="Edit" @click.stop="openEditDialog(project)"></el-button>
|
||||
<el-button type="text" icon="Delete" @click.stop="deleteProject(project.id)"></el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<p>{{ project.description || 'No description' }}</p>
|
||||
<p class="project-desc">{{ project.description || 'No description' }}</p>
|
||||
<div class="footer">
|
||||
<span>{{ new Date(project.updated_at).toLocaleDateString() }}</span>
|
||||
</div>
|
||||
@@ -22,7 +25,7 @@
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-dialog v-model="dialogVisible" title="Create New Project">
|
||||
<el-dialog v-model="dialogVisible" :title="isEdit ? 'Edit Project' : 'Create New Project'">
|
||||
<el-form :model="form">
|
||||
<el-form-item label="Title">
|
||||
<el-input v-model="form.title" />
|
||||
@@ -33,7 +36,7 @@
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="dialogVisible = false">Cancel</el-button>
|
||||
<el-button type="primary" @click="createProject">Create</el-button>
|
||||
<el-button type="primary" @click="saveProject">{{ isEdit ? 'Save' : 'Create' }}</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
@@ -48,7 +51,8 @@ import { ElMessage } from 'element-plus'
|
||||
const router = useRouter()
|
||||
const projects = ref([])
|
||||
const dialogVisible = ref(false)
|
||||
const form = ref({ title: '', description: '' })
|
||||
const isEdit = ref(false)
|
||||
const form = ref({ id: '', title: '', description: '' })
|
||||
|
||||
const fetchProjects = async () => {
|
||||
try {
|
||||
@@ -59,6 +63,26 @@ const fetchProjects = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
const openCreateDialog = () => {
|
||||
isEdit.value = false
|
||||
form.value = { title: '', description: '' }
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
const openEditDialog = (project) => {
|
||||
isEdit.value = true
|
||||
form.value = { id: project.id, title: project.title, description: project.description }
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
const saveProject = async () => {
|
||||
if (isEdit.value) {
|
||||
await updateProject()
|
||||
} else {
|
||||
await createProject()
|
||||
}
|
||||
}
|
||||
|
||||
const createProject = async () => {
|
||||
try {
|
||||
const res = await axios.post('/api/v1/projects/', form.value)
|
||||
@@ -70,6 +94,20 @@ const createProject = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
const updateProject = async () => {
|
||||
try {
|
||||
await axios.put(`/api/v1/projects/${form.value.id}`, {
|
||||
title: form.value.title,
|
||||
description: form.value.description
|
||||
})
|
||||
ElMessage.success('Updated successfully')
|
||||
dialogVisible.value = false
|
||||
fetchProjects()
|
||||
} catch (error) {
|
||||
ElMessage.error('Failed to update project')
|
||||
}
|
||||
}
|
||||
|
||||
const deleteProject = async (id) => {
|
||||
try {
|
||||
await axios.delete(`/api/v1/projects/${id}`)
|
||||
@@ -106,4 +144,26 @@ onMounted(fetchProjects)
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.project-title {
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 60%;
|
||||
display: inline-block;
|
||||
}
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
.project-desc {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
height: 3em;
|
||||
color: #666;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -113,7 +113,7 @@ const imageVersion = ref(Date.now())
|
||||
|
||||
// Task State
|
||||
const activeTasks = ref([])
|
||||
const isTaskManagerCollapsed = ref(false)
|
||||
const isTaskManagerCollapsed = ref(true)
|
||||
const taskPollingInterval = ref(null)
|
||||
|
||||
// Dialog State
|
||||
|
||||
Reference in New Issue
Block a user