ListProjects.vue
1.93 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
<template>
<div class="list-projects column justify-center items-center">
<q-card flat bordered class="card col-6">
<q-card-section>
<div class="card-header">Selecione o Projeto</div>
</q-card-section>
<q-card-section class="list-projects-content column justify-between items-center">
<q-table
class="projects-table"
row-key="id"
:data="tableInfo.data"
:columns="tableInfo.columns"
:pagination="tableInfo.pagination"
selection="single"
:selected.sync="selectedItem"
/>
<div class="action-buttons row justify-around" v-show="isProjectSelected">
<q-btn color="orange" @click="selectedProject"
label="Selecionar Projeto" no-caps />
<q-btn @click="editProject" color="orange" label="Alterar Projeto" no-caps />
</div>
</q-card-section>
</q-card>
</div>
</template>
<script lang="ts">
import {Vue, Component, Prop} from 'vue-property-decorator';
import projectsTableInfo from '../../mixins/tableInfo/listProject';
import notify, {TypeMessage} from "src/mixins/notification";
import ProjectService from "src/services/ProjectService";
@Component
export default class ListProjects extends Vue {
tableInfo: any = {};
selectedItem: any = [];
get isProjectSelected() {
return this.selectedItem.length > 0;
}
async selectedProject() {
await this.$store.commit('navigationInfo/defineProjectId', this.selectedItem[0].id);
notify('Um projeto foi selecionado', TypeMessage.success);
notify('Esse projeto servirá de base para navegação nos menus', TypeMessage.info);
}
editProject() {
this.$emit('editProject', this.selectedItem[0]);
}
async mounted() {
const projectService = new ProjectService();
const projectsResponse = await projectService.findAll();
this.tableInfo = projectsTableInfo;
this.tableInfo.data = projectsResponse;
}
}
</script>