-
-
Save johndiego/c6d59d7fe07e2b089efe65e3f51f1c6e to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment