CreateProject.vue
2.75 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
<template>
<div class="row justify-around create-project">
<q-card flat bordered class="card col-6">
<q-card-section>
<div class="card-header">Criar 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>
<q-btn @click="createProject" class="create-btn" label="Criar" no-caps/>
</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>
</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>
import {Vue, Component, Prop} from 'vue-property-decorator';
import ProjectService from "src/services/ProjectService";
import Project from "src/models/Project";
@Component
export default class CreateProject extends Vue {
projectForm = {
name: '',
description: '',
visible: false,
situation: 'OPEN',
adminId: this.$store.getters['login/getIdUsuario']
}
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';
}
changeVisible() {
return this.projectForm.visible = !this.projectForm.visible;
}
async createProject() {
const projectService = new ProjectService();
const projectForm = new Project(
this.projectForm.name,
this.projectForm.description,
this.projectForm.adminId,
this.projectForm.situation,
this.projectForm.visible
);
const projectIsCreated = await projectService.create(projectForm);
if (projectIsCreated !== false) {
this.$emit('projectCreated')
}
}
}
</script>