<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>
