EditProject.vue
3.41 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<template>
<div class="row justify-around create-project">
<q-card flat bordered class="card col-6">
<q-card-section>
<div class="card-header">Editar Projeto</div>
</q-card-section>
<q-card-section class="form column justify-between items-center">
<div class="fields">
<div class="field">
<q-input v-model="projectForm.name" color="orange" label="Nome"
ref="nameInput"
placeholder="Informe o nome"/>
</div>
<div class="field-text">
<q-input v-model="projectForm.description" type="textarea" color="orange"
placeholder="Informe a descrição" label="Descrição" outlined
/>
</div>
</div>
<div class="actions-buttons">
<q-btn @click="editProject" class="create-btn" label="Remover" no-caps/>
<q-btn @click="editProject" class="create-btn" label="Salvar" no-caps/>
</div>
</q-card-section>
</q-card>
<q-card flat bordered class="card col-4 project-attributes column items-center">
<q-card-section>
<div class="card-header">Atributos do Projeto</div>
</q-card-section>
<q-card-section class="fields column">
<div class="field column">
<p><span class="label">Status:</span> {{ projectStatus }}</p>
<q-btn @click="changeStatus" class="attribute-btn" :label="getStatusBtnLabel()"
no-caps/>
</div>
<div class="field column items-center">
<p><span class="label">Visibilidade:</span> {{ projectVisibility }}</p>
<q-btn @click="changeVisible" class="attribute-btn" :label="getVisibilityBtnLabel()"
no-caps/>
</div>
</q-card-section>
</q-card>
</div>
</template>
<script lang="ts">
import {Vue, Component, Prop} from 'vue-property-decorator';
import ProjectService from "src/services/ProjectService";
import Project from "src/models/Project";
@Component
export default class EditProject extends Vue {
@Prop({required: true, type: Object})
projectData: any;
projectForm: any = {}
get projectStatus() {
return this.projectForm.situation === 'OPEN' ? 'Aberto' : 'Fechado';
}
get projectVisibility() {
return this.projectForm.visible ? 'Visível' : 'Invisível';
}
getVisibilityBtnLabel() {
return this.projectForm.visible ? 'Tornar Invisível' : 'Tornar Visível';
}
getStatusBtnLabel() {
return this.projectForm.situation === 'OPEN' ? 'Fechar Projeto': 'Abrir Projeto';
}
changeVisible() {
return this.projectForm.visible = !this.projectForm.visible;
}
changeStatus() {
return this.projectForm.situation === 'OPEN' ? 'CLOSED': 'OPEN';
}
async editProject() {
const projectService = new ProjectService();
const projectData = new Project(
this.projectForm.name,
this.projectForm.description,
this.projectForm.adminId,
this.projectForm.projectStatus,
this.projectForm.visible
);
await projectService.update(projectData, this.projectData.id);
}
async removeProject() {
const projectService = new ProjectService();
}
created() {
this.projectForm = {
name: this.projectData.name,
description: this.projectData.description,
visible: this.projectData.visible,
situation: this.projectData.situation,
adminId: this.$store.getters['login/getIdUsuario']
}
}
}
</script>