creamos un componente para categoria, resources/js/components/CategoriaComponent.vue
que manejara todo el modulo crud de Categoria
en resources/js/app.js
hacemos referencia al componente y definimos el tag "categoria" para referrirnos al componente
Vue.component('categoria', require('./components/CategoriaComponent.vue'));
el componente tiene las sgts partes:
template: aqui va todo el html
script: codigo javascript
style: estilos particulares a usarse en este componente
para el CREAR
dentro del template tendremos un boton que abrira una ventana modal con los campos para registrar una nueva categoria
<button type="button" @click="abrirModal('registrar')" class="btn btn-secondary" >
<i class="icon-plus"></i> Nuevo
</button>
y la estructura de la ventana modal
<div class="modal fade" tabindex="-1" :class="{'mostrar':modal}" role="dialog" aria-labelledby="myModalLabel" style="display: none;" aria-hidden="true">
<h4 class="modal-title" v-text="tituloModal"></h4>
<input type="text" v-model="nombre" class="form-control" >
<input type="text" v-model="descripcion" class="form-control" >
<div v-show="errors.length" class="form-group row">
<div class="col-md-12">
<div class="alert alert-danger" role="alert" v-for="error in errors" v-text="error">
</div>
</div>
</div>
<button type="button" class="btn btn-secondary" @click="cerrarModal()">Cerrar</button>
<button type="button" v-if="accion=='guardar'" @click="registrarCategoria()" class="btn btn-primary">Guardar</button>
entonces en la seccion de script
export default {
data(){
return {
nombre:'',
descripcion:'',
modal:0,
tituloModal:'',
accion:'',
errors:[]
}
},
methods:{
registrarCategoria(){
if(!this.validarCategoria()){
return;
}
let me=this;
axios.post('/categorias/registrar',{
'nombre':me.nombre,
'descripcion':me.descripcion
}).then(function (response) {
// handle success
me.cerrarModal();
me.listarCategorias();
})
.catch(function (error) {
// handle error
console.log(error);
});
},
abrirModal(accion,data=[]){
switch(accion){
case 'registrar':
{
this.modal = 1;
this.nombre = '';
this.descripcion = '';
this.tituloModal = 'Registrar nueva categoria';
this.accion='guardar';
//console.log('registrar');
break;
}
}
donde:
modal:0, // indica si se muestra (1) o no (0) la ventana modal
tituloModal:'', //titulo de la ventana modal, es variable porque se usara el mismo para actualizar
accion:'', //accion actual, registrar o actualizar
errors:[] // array con los mensajes de error
para ACTUALIZAR
tenemos un icono de editar por cada registro del listado
<tr v-for="categoria in arrayCategorias.data" :key="categoria.id">
<td>
<button type="button" class="btn btn-warning btn-sm"
@click="abrirModal('actualizar',categoria)" >
<i class="icon-pencil"></i>
</button>
en este caso le enviamos los datos de categoria actual para llenar los campos del formulario de la ventana modal.
y en la ventana modal cuando se abra el boton dira actualizar y llamara a actualizarCAtegoria
<button type="button" v-if="accion=='actualizar'" @click="actualizarCategoria()"class="btn btn-primary">Actualizar</button>
abrirModal(accion,data=[]){
switch(accion){
case 'actualizar':
{
this.modal = 1;
this.nombre = data['nombre'];
this.descripcion = data['descripcion'];
this.tituloModal = 'Actualizar categoria';
this.categoria_id = data['id'];
this.accion='actualizar';
//console.log('registrar');
break;
}
}
}
actualizarCategoria(){
if(!this.validarCategoria()){
return;
}
let me=this;
axios.put('/categorias/actualizar',{
'nombre':me.nombre,
'descripcion':me.descripcion,
'id':me.categoria_id,
}).then(function (response) {
// handle success
me.cerrarModal();
me.listarCategorias();
})
.catch(function (error) {
// handle error
console.log(error);
});
},
en nuestro archivo de rutas routes/web.php
tenemos
Route::get('/categorias', ['uses'=>'CategoriaController@index']);
Route::post('/categorias/registrar', ['uses'=>'CategoriaController@store']);
Route::put('/categorias/actualizar', ['uses'=>'CategoriaController@update']);
entonces, el problema es que si desde la url apuntamos a esas rutas
por ejemplo http://localhost:8000/categorias
escupira en el browser en forma de json la categorias de la tabla.
entonces le vamos a agregar una minima seguridad, haciendo que cada uno de los metodos del controller solo respondan si la peticion fue hecha a traves de una llamada ajax. de lo contrario se redirigira a la pagina raiz
en la primera linea del cuerpo de cada metodo agregar:
if(!$request->ajax()) return redirect("/");
en nuestro archivo de rutas routes/web.php
tenemos
Route::get('/categorias', ['uses'=>'CategoriaController@index']);
Route::post('/categorias/registrar', ['uses'=>'CategoriaController@store']);
Route::put('/categorias/actualizar', ['uses'=>'CategoriaController@update']);
entonces, el problema es que si desde la url apuntamos a esas rutas
por ejemplo http://localhost:8000/categorias
escupira en el browser en forma de json la categorias de la tabla.
entonces le vamos a agregar una minima seguridad, haciendo que cada uno de los metodos del controller solo respondan si la peticion fue hecha a traves de una llamada ajax. de lo contrario se redirigira a la pagina raiz
en la primera linea del cuerpo de cada metodo agregar:
if(!$request->ajax()) return redirect("/");
No hay comentarios:
Publicar un comentario