Skip to content

Instantly share code, notes, and snippets.

@deusmar

deusmar/Form.vue

Last active March 25, 2018 19:31
Show Gist options
  • Save deusmar/e9853ecff0c6116812c99e8b00e9d285 to your computer and use it in GitHub Desktop.
Save deusmar/e9853ecff0c6116812c99e8b00e9d285 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Form.vue
<template>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">
Editar Empresa
</h5>
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label for="cnpj">CNPJ</label>
<input type="number" class="form-control" id="cnpj"
aria-describedby="cnpjHelp" v-model.lazy="form_data.cnpj">
<small id="cnpjHelp" class="form-text text-muted">
Apenas números.
</small>
</div>
<div class="form-group">
<label for="razao_social">Razão Social</label>
<input type="text" class="form-control"
id="razao_social" v-model.lazy="form_data.razao_social">
</div>
<div class="form-group">
<label for="nome_fantasia">Nome Fantasia</label>
<input type="text" class="form-control"
id="nome_fantasia" v-model.lazy="form_data.nome_fantasia">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-dismiss="modal">Cancelar
</button>
<button type="button" class="btn btn-primary" @click="submitPrestador($event)">Salvar
</button>
</div>
</div>
</div>
</div>
</template>
<script>
import Prestador from "../../domains/prestador/Prestador";
export default {
name: "form-prestador",
props: ['prestador'],
data(){
return {
form_data : new Prestador()
}
},
methods: {
submitPrestador(e) {
e.preventDefault();
this.$emit('submitPrestador', this.form_prestador)
},
},
watch: {
prestador : function(){
this.form_data = this.prestador
}
}
}
</script>
<style scoped>
</style>
Raw
Prestador.js
export default class Prestador {
constructor(cnpj = '', razao_social = '', nome_fantasia = '') {
this.cnpj = cnpj;
this.razao_social = razao_social;
this.nome_fantasia = nome_fantasia;
}
}
Raw
ShowPrestador.vue
<template>
<div>
<transition name="slide-fade">
<div class="col-md-12 mb-4" v-show="prestador !== ''">
<ul class="nav nav-pills nav-justified p-3" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#tab-dados" role="tab"
aria-controls="pills-home" aria-selected="true">Dados Cadastrais</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#tab-unidades" role="tab"
aria-controls="pills-profile" aria-selected="false">Unidades</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#tab-contato" role="tab"
aria-controls="pills-contact" aria-selected="false">Tabela de Serviços</a>
</li>
</ul>
<div class="tab-content box-shadow bg-white rounded p-3" id="pills-tabContent">
<div class="tab-pane fade show active" id="tab-dados" role="tabpanel"
aria-labelledby="pills-home-tab">
<div class="container">
<section>
<div class="col-md-3 mb-3">
<div class="card">
<img class="card-img-top" alt="Card image cap"
src="https://is5-ssl.mzstatic.com/image/thumb/Purple62/v4/81/9b/cd/819bcda1-4650-7c6a-dec0-2f343090bb95/mzl.vweffwim.png/1200x630bb.jpg">
<div class="card-footer">
<a href="#" class="card-link">Alterar imagem</a>
</div>
</div>
</div>
<div class="col-md-9 mb-3">
<section>
<div class="col-md-6 mb-3">
<h5 class="border-bottom border-gray pb-2 mb-0">Empresa</h5>
<dl>
<dt>Razão Social</dt>
<dd>{{prestador.razao_social}}</dd>
<dt>CNPJ</dt>
<dd>{{prestador.cnpj}}</dd>
<dt>Nome Fantasia</dt>
<dd>{{prestador.nome_fantasia}}</dd>
</dl>
<button type="button"
class="btn btn-outline-warning btn-rounded btn-sm float-right"
data-toggle="modal" data-target="#exampleModal">Editar
</button>
<form-prestador :prestador="prestador"
@submitPrestador="updatePrestador"></form-prestador>
</div>
<div class="col-md-6">
<section class="mb-3">
<div class="col-md-12">
<h5 class="border-bottom border-gray pb-2 mb-0">
Endereço Principal
</h5>
<dl>
<dd>QR 503 conjunto B lote 01</dd>
</dl>
<a href="#"
class="btn btn-outline-warning btn-rounded btn-sm float-right">Editar</a>
</div>
<div class="col-md-12">
<h5 class="border-bottom border-gray pb-2 mb-0">Classificação</h5>
<div class="mb-1">
<span v-for="tipo in prestador.tipos"
class="badge badge-info ml-1">{{tipo.nome}}</span>
</div>
<a href="#"
class="btn btn-outline-warning btn-rounded btn-sm float-right">Editar</a>
</div>
</section>
</div>
</section>
</div>
</section>
</div>
</div>
<!-- UNIDADES -->
<div class="tab-pane fade" id="tab-unidades" role="tabpanel"
aria-labelledby="pills-profile-tab">
<section>
<div class="col-md-12">
<table class="table table-hover">
<thead>
<tr>
<td>#</td>
<td>Localização</td>
<td>Opções</td>
</tr>
</thead>
<tbody>
<tr v-for="(unidade, index) in prestador.unidades" :key="unidade.id">
<td>{{index + 1}}</td>
<td>{{unidade.nome}}</td>
<td>
<a href="#"
class="btn btn-default btn-sm">Abrir</a>
</td>
</tr>
<tr v-if="prestador.unidades && prestador.unidades.length == 0">
<td colspan="3">Não há unidades cadastradas</td>
</tr>
</tbody>
</table>
</div>
</section>
</div>
<div class="tab-pane fade" id="tab-contato" role="tabpanel" aria-labelledby="pills-contact-tab">
...
</div>
</div>
</div>
</transition>
</div>
</template>
<script>
import FormPrestador from './Form';
export default {
components: { FormPrestador },
data() {
return {
prestador: "",
loaded: false
}
},
methods: {
getPrestador() {
axios.get('/prestadores/' + this.$route.params.prestador_id)
.then((response) => {
this.prestador = response.data;
})
},
updatePrestador() {
axios.put('/api/prestadores/' + this.prestador.id, this.prestador_edit)
.then((response) => {
console.log(response);
})
}
},
mounted() {
this.getPrestador();
}
}
</script>
<style>
.slide-fade-enter-active {
transition: all .3s ease;
}
.slide-fade-leave-active {
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to {
transform: translateX(10px);
opacity: 0;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment