departaments.vue

<template>
  <div class="q-pa-md">
    <q-breadcrumbs class="q-pl-sm q-mb-md">
      <q-breadcrumbs-el label="Dashboard" to="/" />
      <q-breadcrumbs-el label="Cadastros" />
      <q-breadcrumbs-el label="Departamentos" />
    </q-breadcrumbs>
    <div class="q-pb-md">
      <q-btn label="Novo" icon="r_add_circle" color="green-5" @click="abrir()" />
    </div>
    <q-table
      :pagination="config.pagination"
      :title="config.title"
      :data="data"
      :columns="columns"
      row-key="id"
      :loading="config.loading"
      :rows-per-page-label="config.rowperpagelabel"
      :no-data-label="config.nodatalabel"
    >
      <template v-slot:top="props">
        <div class="col-2 q-table__title">Departamentos</div>
        <q-space />
        <q-btn
          flat round dense
          :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'"
          @click="props.toggleFullscreen"
          class="q-ml-md"
        />
      </template>
      <template v-slot:body="props" >
        <q-tr :props="props">
          <q-td key="name" :props="props">
            {{ props.row.name }}
          </q-td>
          <q-td key="responsible" :props="props">
            {{ props.row.responsible }}
          </q-td>
          <q-td key="phone" :props="props">
            {{ props.row.phone }}
          </q-td>
          <q-td  key="quota" :props="props">
            <q-badge class="positive" v-if="props.row.quota_unlimited == 1" >
              <q-icon name="r_check_circle" color="white" class="q-mr-xs" /> Ilimitada
            </q-badge>
            <q-badge class="negative" v-else-if="props.row.quota == 0">
              {{ props.row.quota }}
            </q-badge>
            <q-badge class="negative" v-else-if="props.row.quota > 0" >
              {{ props.row.quota }}
            </q-badge>
          </q-td>
          <q-td  key="status" :props="props">
            <q-badge class="positive" v-if="props.row.status == 'activated'" >
              <q-icon name="r_check_circle" color="white" class="q-mr-xs" /> Ativo
            </q-badge>
            <q-badge class="negative" v-else>
              Desativado
            </q-badge>
          </q-td>
          <q-td  key="acoes" :props="props">
            <q-btn round flat color="grey-6" icon="fas fa-ellipsis-v" >
              <q-menu style="width: 250px"  >
                <q-list bordered class="rounded-borders">
                  <q-item clickable v-close-popup class="text-primary" @click="editar(props.row)">
                    <q-item-section >
                      <q-icon size="1.5em" name="r_edit" />
                    </q-item-section>
                    <q-item-section class="q-pr-md">
                      Editar
                    </q-item-section>
                  </q-item>
                  <q-item clickable v-close-popup class="text-negative" @click="deleteConfirm(props.row)">
                    <q-item-section >
                      <q-icon size="1.5em" name="r_delete_forever" />
                    </q-item-section>
                    <q-item-section class="q-pr-md">
                      Apagar
                    </q-item-section>
                  </q-item>
                </q-list>
              </q-menu>
            </q-btn>
          </q-td>
        </q-tr>
      </template>
    </q-table>
    <q-dialog v-model="modal" @hide="fechar()"  >
      <q-card class="q-pa-md" style="width: 500px; max-width: 94%;"  >
        <q-toolbar>
          <q-toolbar-title>{{ titleModal }}</q-toolbar-title>
          <q-btn flat round dense icon="r_close" v-close-popup />
        </q-toolbar>

        <q-card-section>
          <q-form
            @submit="onSubmit"
            class="q-gutter-md"
          >
            <q-input
              filled
              v-model="formdepartaments.name"
              label="Departamento"
              hint="Departamento"
              lazy-rules
              :rules="[ val => val && val.length > 0 || 'Preencha o Nome do Departamento']"
            />
            <q-input
              filled
              v-model="formdepartaments.responsible"
              label="Responsável"
              hint="Responsável"
              lazy-rules
              :rules="[ val => val && val.length > 0 || 'Preencha o Nome do Responsável']"
            />
            <div class="row">
              <div class="col-6 q-pr-md" >
                <q-input
                  filled
                  v-model="formdepartaments.phone"
                  label="Telefone"
                  hint="Telefone"
                  mask="(##)#####-####"
                  lazy-rules
                  :rules="[ val => val && val.length > 0 || 'Preencha o Telefone']"
                />
              </div>

            </div>
            <div class="row">
              <div class="col-6 q-pt-sm"  >
                <div class="col-6 q-pr-md q-pt-sm" >
                  <q-toggle v-model="formdepartaments.quota_unlimited" true-value="1" false-value="0" label="Quota Ilimitada" />
                </div>
              </div>
              <div class="col-6" >
                <q-input v-if="formdepartaments.quota_unlimited == 0"
                  filled
                  v-model="formdepartaments.quota"
                  label="Quota Mensal R$"
                  hint="Quota Mensal R$"
                  mask="#.##"
                  fill-mask="0"
                  reverse-fill-mask
                  input-class="text-right"
                  lazy-rules
                  :rules="[ val => val && val.length > 0 && val.length < 10 || 'Preencha a conta Mensal máximo 10 digitos']"
                />
              </div>
            </div>

            <div class="row">
              <div class="col-12 col-md-6" >
                <q-toggle v-model="formdepartaments.status" true-value="activated" false-value="desactivated" label="Ativado" />
              </div>
              <div class="col-12 col-md-6" align="right" >
                <q-btn label="Cancelar" @click="fechar" color="primary" flat class="q-mr-sm" />
                <q-btn label="Salvar" type="submit" color="primary" :loading="btnSalvarLoad"/>
              </div>
            </div>
          </q-form>
        </q-card-section>
      </q-card>
    </q-dialog>
    <q-dialog v-model="modalConfirm" persistent>
      <q-card class="q-pa-sm">
        <q-card-section class="row items-center">
          <q-icon class="col-12" name="r_warning" color="negative" style="font-size: 9em;"  />
          <div class="col-12 text-subtitle1 text-center">Deseja deletar o Departamento?</div>
          <div class="col-12 q-mt-sm text-subtitle1 text-center text-weight-bold">{{ modalDelete.msg }}</div>
        </q-card-section>

        <q-card-actions align="right">
          <q-btn flat label="Cancelar" color="primary" v-close-popup />
          <q-btn label="Excluir" icon="r_delete_forever" color="negative" @click="deleteDepartaments(formdepartaments)"  />
        </q-card-actions>
      </q-card>
    </q-dialog>
  </div>
</template>

<script>
import ListDepartaments from 'src/services/Cadastros/ListDepartaments'
import SaveDepartaments from 'src/services/Cadastros/SaveDepartaments'
import DeleteDepartaments from '../../services/Cadastros/DeleteDepartaments'

export default {
  name: 'departamentos',
  data () {
    return {
      ListDepartaments: new ListDepartaments(),
      SaveDepartaments: new SaveDepartaments(),
      DeleteDepartaments: new DeleteDepartaments(),
      config: {
        title: 'Departamentos',
        loading: true,
        pagination: {
          rowsPerPage: 15,
          options: [5, 10, 15, 30, 50, 500]
        },
        rowperpagelabel: 'Registros por Página:',
        nodatalabel: 'Nenhum registro encontrado'
      },
      titleModal: '',
      formdepartaments: {
        status: 'activated',
        quota_unlimited: 0
      },
      dataRowIndex: '',
      modal: false,
      modalConfirm: false,
      modalDelete: {
        msg: ''
      },
      btnSalvarLoad: false,
      columns: [
        {
          name: 'name',
          required: true,
          label: 'Departamento',
          align: 'left',
          field: row => row.name,
          format: val => `${val}`,
          sortable: true
        },
        { name: 'responsible', label: 'Responsável', field: 'responsible', align: 'left', sortable: true },
        { name: 'phone', label: 'Telefone', field: 'phone', align: 'center' },
        { name: 'quota', label: 'Quota', field: 'quota', align: 'center' },
        { name: 'status', label: 'Status', field: 'status', align: 'center', sortable: true },
        { name: 'acoes', label: 'Ações', field: 'iron', align: 'center' }
      ],
      data: []
    }
  },
  created: function () {
    this.listDepartaments()
  },
  methods: {
    onSubmit () {
      this.saveDepartaments()
    },
    deleteConfirm (row) {
      this.formdepartaments = row
      this.modalConfirm = true
      this.modalDelete.msg = this.formdepartaments.name
    },
    abrir () {
      this.titleModal = 'Novo Departamento'
      this.modal = true
    },
    editar (val) {
      this.formdepartaments = {
        id: val.id,
        name: val.name,
        responsible: val.responsible,
        phone: val.phone,
        quota: val.quota,
        quota_unlimited: val.quota_unlimited,
        status: val.status
      }
      this.dataRowIndex = val.__index
      this.titleModal = 'Editar Departamento'
      this.modal = true
    },
    fechar () {
      this.modal = false
      this.formdepartaments = {
        status: 'activated',
        quota_unlimited: 0
      }
    },
    async listDepartaments () {
      try {
        this.config.loading = true
        const response = await this.ListDepartaments.list()
        this.data = (response.departaments ? response.departaments : [])
        return response
      } catch (error) {
        return error
      } finally {
        this.config.loading = false
      }
    },
    async saveDepartaments () {
      try {
        this.btnSalvarLoad = true
        const response = await this.SaveDepartaments.create(this.formdepartaments)
        this.$q.notify({
          color: 'positive',
          position: 'top',
          message: response.message,
          icon: 'done'
        })
        if (this.dataRowIndex !== '') {
          this.data[this.dataRowIndex].id = response.departaments.id
          this.data[this.dataRowIndex].name = response.departaments.name
          this.data[this.dataRowIndex].responsible = response.departaments.responsible
          this.data[this.dataRowIndex].phone = response.departaments.phone
          this.data[this.dataRowIndex].quota = response.departaments.quota
          this.data[this.dataRowIndex].quota_unlimited = response.departaments.quota_unlimited
          this.data[this.dataRowIndex].status = response.departaments.status
        } else {
          this.data.push({
            id: response.departaments.id,
            name: response.departaments.name,
            responsible: response.departaments.responsible,
            phone: response.departaments.phone,
            quota: response.departaments.quota,
            quota_unlimited: response.departaments.quota_unlimited,
            status: response.departaments.status
          })
          this.data.sort(function (a, b) {
            return (a.name > b.name) ? 1 : ((b.name > a.name) ? -1 : 0)
          })
        }
      } catch (error) {
        return error
      } finally {
        this.btnSalvarLoad = false
        this.fechar()
      }
    },
    async deleteDepartaments (row) {
      try {
        this.btnSalvarLoad = true
        const response = await this.DeleteDepartaments.remove(row.id)
        this.data.splice(row.__index, 1)
        this.$q.notify({
          color: 'positive',
          position: 'top',
          message: response.message,
          icon: 'done'
        })
        this.modalConfirm = false
      } catch (error) {
        return error
      } finally {
        this.btnSalvarLoad = false
        this.modal = false
      }
    }
  }
}
</script>

<style lang="sass">
.positive
  background-color: $positive !important
  font-size: 14px
  padding: 6px 6px 4px 6px
.negative
  background-color: $negative !important
  font-size: 14px
  padding: 6px 6px 4px 6px
</style>