Created
August 13, 2020 00:50
-
-
Save arcanoix/1868b80f7ff844128a592aa82e4425fb to your computer and use it in GitHub Desktop.
componente padre index.vue con notice hijo
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> | |
<card> | |
<span slot="tools"> | |
<a href="#dlgNewNotice" class="btn btn-icon-toggle" data-toggle="modal"> | |
<i class="fa fa-plus-square"></i> | |
</a> | |
</span> | |
<span slot="title">Avisos</span> | |
<ul class="nav nav-tabs" role="tablist"> | |
<li role="presentation" :class="{active: country.label === 1}" v-for="country in countries"> | |
<a :href="'#' + country.label" :aria-controls="'#' + country.label" role="tab" data-toggle="tab" >{{ country.value }}</a> | |
</li> | |
</ul> | |
<br> | |
<div class="tab-content"> | |
<div role="tabpanel" class="tab-pane" :class="{active: country.label === 1}" :id="country.label" | |
v-for="country in countries" :key="country.label"> | |
<country-notices :country_id="country.label"></country-notices> | |
</div> | |
</div> | |
</card> | |
</div> | |
</template> | |
<script> | |
import CountryNotices from './notices'; | |
import Country from "../../../models/security/country/Country"; | |
export default { | |
components: {CountryNotices}, | |
data(){ | |
return { | |
countries: [] | |
} | |
}, | |
created() { | |
this.index(); | |
}, | |
methods: { | |
index() { | |
Country.pluck({}, data => this.countries = data); | |
} | |
} | |
} | |
</script> | |
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> | |
<div class="row"> | |
<div class="table-responsive"> | |
<table class="table table-bordered table-striped table-condensed"> | |
<thead> | |
<tr> | |
<th>Titulo de Aviso</th> | |
<th>Empresa</th> | |
<th>Fecha Publicacion</th> | |
<th>Fecha Registro</th> | |
<th>Descripcion</th> | |
<th width="10%"></th> | |
</tr> | |
</thead> | |
<tbody> | |
<tr v-for="notice in notices_list" :key="notice.id"> | |
<td>{{ notice.title }}</td> | |
<td><span v-for="companie in notice.companies">{{ companie.name }}, </span></td> | |
<td>{{ notice.date_published }}</td> | |
<td>{{ notice.created_at }}</td> | |
<td>{{ notice.description }}</td> | |
<td class="text-center"> | |
<a href="" class="btn btn-success btn-xs"><i class="fa fa-eye"></i></a> | |
<a href="#dlgEditNotice" class="btn btn-primary btn-xs" data-toggle="modal" | |
@click="show(notice)" v-tooltip="'Editar'"> | |
<i class="fa fa-edit"></i> | |
</a> | |
<a href="#dlgDeleteNotice" class="btn btn-danger btn-xs" data-toggle="modal" | |
@click="show(notice)" v-tooltip="'Eliminar'"> | |
<i class="fa fa-trash"></i> | |
</a> | |
</td> | |
</tr> | |
</tbody> | |
</table> | |
</div> | |
<paginator :pagination="pagination" @changePage="index"></paginator> | |
</div> | |
<modal id="dlgNewNotice" title="Crear Aviso" close="Cancelar"> | |
<form class="form" role="form"> | |
<div class="row"> | |
<div class="col-md-12"> | |
<div class="form-group"> | |
<input type="text" v-model="create.title" class="form-control"> | |
<label>Titulo del aviso</label> | |
<p v-if="errors.title" class="text-danger">{{ errors.title[0] }}</p> | |
</div> | |
</div> | |
<div class="col-md-12"> | |
<div class="form-group"> | |
<input type="text" v-datepicker class="form-control" placeholder="Fecha de publicación" v-model="create.date_published"> | |
<label>Fecha Publicacion</label> | |
<p v-if="errors.date_published" class="text-danger">{{ errors.date_published[0] }}</p> | |
</div> | |
</div> | |
<div class="col-md-12"> | |
<div class="form-group"> | |
<v-select label="value" :options="countries" v-model="create.countries" multiple></v-select> | |
<label>País(es)</label> | |
<p class="text-danger" v-if="errors.country_id">{{ errors.country_id[0] }}</p> | |
</div> | |
</div> | |
<div class="col-md-12"> | |
<div class="form-group"> | |
<v-select label="value" :options="companies" v-model="create.companies" multiple></v-select> | |
<label>Empresa(s)</label> | |
<p class="text-danger" v-if="errors.company_id">{{ errors.company_id[0] }}</p> | |
</div> | |
</div> | |
<div class="col-md-12"> | |
<div class="form-group"> | |
<input type="file" class="form-control" id="file"> | |
<label>Imagen</label> | |
<p v-if="errors.image" class="text-danger">{{ errors.image[0] }}</p> | |
</div> | |
</div> | |
<div class="col-md-12"> | |
<div class="form-group"> | |
<textarea v-model="create.description" class="form-control"></textarea> | |
<label>Descripción</label> | |
<p v-if="errors.description" class="text-danger">{{ errors.description[0] }}</p> | |
</div> | |
</div> | |
</div> | |
</form> | |
<button slot="btnSave" type="button" class="btn btn-primary" @click="store">Guardar</button> | |
</modal> | |
<modal id="dlgEditNotice" title="Editar Aviso" close="Cancelar"> | |
<form class="form" role="form"> | |
<div class="row"> | |
<div class="col-md-12"> | |
<div class="form-group"> | |
<input type="text" v-model="edit.title" class="form-control"> | |
<label>Titulo del aviso</label> | |
<p v-if="errors.title" class="text-danger">{{ errors.title[0] }}</p> | |
</div> | |
</div> | |
<div class="col-md-12"> | |
<div class="form-group"> | |
<input type="text" v-datepicker class="form-control" placeholder="Fecha de publicación" v-model="edit.date_published"> | |
<label>Fecha Publicacion</label> | |
<p v-if="errors.date_published" class="text-danger">{{ errors.date_published[0] }}</p> | |
</div> | |
</div> | |
<div class="col-md-12"> | |
<div class="form-group"> | |
<v-select label="value" :options="countries" v-model="edit.country_value" multiple></v-select> | |
<label>País(es)</label> | |
<p class="text-danger" v-if="errors.country_id">{{ errors.country_id[0] }}</p> | |
</div> | |
</div> | |
<div class="col-md-12"> | |
<div class="form-group"> | |
<v-select label="value" :options="companies" v-model="edit.company_value" multiple></v-select> | |
<label>Empresa(s)</label> | |
<p class="text-danger" v-if="errors.company_id">{{ errors.company_id[0] }}</p> | |
</div> | |
</div> | |
<div class="col-md-12"> | |
<div class="form-group"> | |
<input type="file" class="form-control" id="edit_file"> | |
<label>Imagen</label> | |
<p v-if="errors.image" class="text-danger">{{ errors.image[0] }}</p> | |
</div> | |
</div> | |
<div class="col-md-12"> | |
<div class="form-group"> | |
<textarea v-model="edit.description" class="form-control"></textarea> | |
<label>Descripción</label> | |
<p v-if="errors.description" class="text-danger">{{ errors.description[0] }}</p> | |
</div> | |
</div> | |
</div> | |
</form> | |
<button slot="btnSave" type="button" class="btn btn-primary" @click="update">Actualizar</button> | |
</modal> | |
<modal-delete id="dlgDeleteNotice" title="¿Estás seguro de eliminar este aviso?"> | |
<button slot="btnDelete" type="button" class="btn btn-primary" @click="destroy">Si</button> | |
</modal-delete> | |
</div> | |
</template> | |
<script> | |
import Notice from '../../../models/payroll/Notice'; | |
import Paginator from '../../../components/Paginator'; | |
import vSelect from "vue-select"; | |
//import Country from "../../../models/security/country/Country"; | |
import Company from "../../../models/payroll/Company"; | |
export default { | |
components: {Paginator,vSelect}, | |
props: ['country_id'], | |
data(){ | |
return { | |
notices_list:[], | |
countries: [], | |
companies: [], | |
pagination: {}, | |
create: {}, | |
edit: {}, | |
errors: {}, | |
isLoading: false, | |
country_selected: 0 | |
} | |
}, | |
created() { | |
//this.loadDataCountry(); | |
//this.loadDataCompany(); | |
this.index(); | |
}, | |
methods: { | |
loadDataCompany() { | |
Company.pluck({}, data => this.companies = data); | |
}, | |
loadDataCountry(){ | |
this.isLoading = true; | |
Country.pluck({}, data => { | |
this.countries = data; | |
if(this.countries){ | |
this.index(1, this.countries[0].label); | |
} | |
}); | |
}, | |
chargeList(country){ | |
// this.isLoading = true; | |
// this.notices = []; | |
// this.pagination = []; | |
if(country){ | |
// this.index(1, country.label); | |
} | |
}, | |
index(page = 1) { | |
let params = { | |
page: page, | |
country: this.country_id | |
}; | |
Notice.get(params, data => { | |
this.notices_list = data.data; | |
this.pagination = data.meta; | |
}); | |
}, | |
show(element) { | |
this.errors = {}; | |
this.edit = element; | |
console.log(this.edit); | |
let countries_id = []; | |
let companies_id = []; | |
if(this.edit.countries){ | |
this.edit.countries.forEach(element => { | |
countries_id.push({label: element.id, value: element.name}); | |
}); | |
this.edit.country_value = countries_id; | |
} | |
if(this.edit.companies){ | |
this.edit.companies.forEach(element => { | |
companies_id.push({label: element.id, value: element.name}); | |
}); | |
this.edit.company_value = companies_id; | |
} | |
}, | |
store() { | |
toastr.info('Guardando..'); | |
let file = document.getElementById('file').files[0]; | |
let formData = new FormData(); | |
if(this.create.countries){ | |
this.create.countries.forEach((element, key) => { | |
formData.append('countries[' + key + ']', element.label); | |
}); | |
} | |
if(this.create.companies){ | |
this.create.companies.forEach((element, key) => { | |
formData.append('companies[' + key + ']', element.label); | |
}); | |
} | |
if(this.create.date_published){ | |
this.create.date_published = moment(this.create.date_published, 'YYYY-MM-DD').format('YYYY-MM-DD'); | |
} | |
formData.append('file', file ? file : ''); | |
formData.append('title', this.create.title ? this.create.title : ''); | |
formData.append('date_published', this.create.date_published ? this.create.date_published : ''); | |
formData.append('description', this.create.description ? this.create.description : ''); | |
Notice.store(formData, data => { | |
toastr.clear(); | |
toastr.success('El aviso ha sido registrado.'); | |
if(this.countries.length > 0){ | |
this.index(1, this.countries[0].label); | |
} | |
this.create = {}; | |
$('#dlgNewNotice').modal('hide'); | |
}, errors => this.errors = errors); | |
}, | |
update() { | |
toastr.info('Actualizando..'); | |
let file = document.getElementById('edit_file').files[0]; | |
let formData = new FormData(); | |
if(this.edit.country_value){ | |
this.edit.country_value.forEach((element, key) => { | |
formData.append('countries[' + key + ']', element.label); | |
}); | |
} | |
if(this.edit.company_value){ | |
this.edit.company_value.forEach((element, key) => { | |
formData.append('companies[' + key + ']', element.label); | |
}); | |
} | |
if(this.edit.date_published){ | |
this.edit.date_published = moment(this.edit.date_published, 'YYYY-MM-DD').format('YYYY-MM-DD'); | |
} | |
formData.append('file', file ? file : ''); | |
formData.append('title', this.edit.title ? this.edit.title : ''); | |
formData.append('date_published', this.edit.date_published ? this.edit.date_published : ''); | |
formData.append('description', this.edit.description ? this.edit.description : ''); | |
formData.append('_method', 'PUT'); | |
Notice.update(this.edit.id, formData, data => { | |
toastr.clear(); | |
toastr.success('El aviso ha sido actualizado.'); | |
if(this.countries.length > 0){ | |
this.index(1, this.countries[0].label); | |
} | |
$('#dlgEditNotice').modal('hide'); | |
}, errors => this.errors = errors); | |
}, | |
destroy() { | |
toastr.info('Eliminando..'); | |
Notice.destroy(this.edit.id, data => { | |
toastr.clear(); | |
toastr.success('El aviso ha sido eliminado.'); | |
if(this.countries.length > 0){ | |
this.index(1, this.countries[0].label); | |
} | |
$('#dlgDeleteNotice').modal('hide'); | |
}); | |
} | |
} | |
} | |
</script> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment