I have a Settings component where a user can update their informations, after the update is successful I get in the console missing param for named route and all the inputs that should contain user data are empty, and when I try accessing the settings page it redirects to the home page even though all the data needed for it to work is still in the component's data.
This is the component's method to that commits an action in vuex store
updateUser(){
const fd = new FormData()
//check if avatar is of type file
if ('File' in window && this.avatar instanceof File){
fd.append('avatar', this.avatar, this.avatar.name)
}
fd.append('_method', 'PUT')
fd.append('city_id', this.userData? this.userData.city.id:this.city)
fd.append('oldPassword', this.oldPassword)
fd.append('newPassword', this.newPassword)
this.$store.dispatch('User/update', fd)
.then(() =>{
this.success = this.user.user.message
}).catch(err => {
this.error = err.response.data.message
})
}
the above method triggers this vuex action
update({commit}, user){
return axios.post(`/api/${user.name}/update`, user)
.then(( {data} ) => {
commit('UPDATE_USER_DATA', data)
})
}
And here's the UPDATE_USER_DATA mutation
UPDATE_USER_DATA(state, userData){
let user = localStorage.getItem('user')
const data = JSON.parse(user)
state.user.user = userData
data['user'] = userData
localStorage.setItem('user', JSON.stringify(data))
}
This is the laravel method that's called
public function update(User $user, Request $request)
{
$attributes = [];
if(request('city_id') && $request['city_id'] !== null){
$attributes['city_id'] = $request['city_id'];
}
if (request('oldPassword') && Hash::check($request['oldPassword'], auth()->user()->getAuthPassword())
){
if(request('newPassword')) {
$attributes['password'] = Hash::make($request['newPassword']);
}
} else{
return response()->json([
'message' => "L'ancien mot de passe est incorrecte.",
'user' => $user
], 400);
}
if (request('avatar')) {
$attributes['avatar'] = request('avatar')->store('avatars');
}
// This is where I have the issue
if (!empty($attributes)){
if($user->update($attributes)){
return response()->json([
'user' => $user,
'message' => 'Votre compte a été modifié avec succés'
], 200);
}
}
return response()->json([
'message' => "Votre compte n'a pas été modifié, réessayez plus tard",
'user' => $user
], 400);
}
Related
In my Vue component, I'm sending an Axios request with an array of multiple files. How can I handle the individual files in my Laravel controller?
I always have an error saying 'Invalid argument supplied for foreach()'.
My Vue method to send the files:
uploadFiles() {
this.isPending = true;
this.error = null;
let f = new FormData();
f.append('files', this.files);
axios.post(`items/${this.$route.params.productId}/upload_files`, f)
.then((res) => {
console.log(res);
this.isPending = false;
}).catch((err) => {
console.log(err);
this.isPending = false;
this.error = 'Er is iets misgegaan. Probeer het nog een keer.';
});
}
My controller function:
public function upload_files(Request $request, $id)
{
$request->validate([
'files' => 'required'
]);
foreach ($request['files'] as $file) {
Storage::put($file->getClientOriginalName(), file_get_contents($file));
$path = $request->file('files')->store('public');
return $path;
}
}
Trying different solutions, I am fooling around with
response()->json([ ])
To create responses that I can read in my vue / vuex application
The Laravel api function that stores a new Speler ( dutch for player ;)):
I have trouble sending the created, or found Speler-object, through the response to the vuex-store.
Tried to set the status to 202 when succesfully logged, yet the actual status sent is 200..
It is clear that I do not understand it well enough. Can anyone help and explain?
public function store(Request $request)
{
if (Game::where('id',$request['game_id'])->exists() ){
if (!Speler::where('name',$request['name'])->where('game_id',$request['game_id'])->exists()){
$newSpeler = Speler::create(
[
'name' => $request['name'],
'pass_code' => $request['pass_code'],
'game_id' => $request['game_id']
])->first());
return $newSpeler;
}
elseif ( Speler::where('name',$request['name'])->where('game_id',$request['game_id'])->where('pass_code', $request['pass_code'])->exists()){
$speler = Speler::where('name',$request['name'])->where('game_id',$request['game_id'])->where('pass_code', $request['pass_code']);
return response()->json(['speler'=> $speler, 202]);
}
return response()->json(['status' => 'This name is already used, pass-code is not correct', 409]);
}
return response()->json([ 'status' => 'The game-pin does not exist', 403 ]);
}
This is called form the vuex actions:
export const addSpeler = ({commit}, formData) => {
return new Promise((resolve, reject) => {
fetch(`api/speler`, {
method: 'post',
body:formData,
})
.then(res => {
if (res.status === 202){
resolve('De speler is succesfully logged on');
commit('SET_CURRENT_SPELER', res.data.speler);
}
else if (res.status === 201){
commit('SET_CURRENT_SPELER', res.data);
resolve('De speler is succesfully added')
}
else {
reject('De speler is not logged in. Name exists and does not match passcode');
}
})
.catch(err => {
reject(err.message)
});
})
}
and this is called from a vue method:
methods: {
addSpeler(){
this.errorMessage ='';
this.spelerAdded =false;
const formData = new FormData();
formData.append('name', this.name);
formData.append('pass_code',this.pass_code);
formData.append('game_id', this.currentGame.id);
this.$store.dispatch('addSpeler', formData )
.then(res => {
this.spelerAdded = true;
console.log(res.status);
})
.catch(err => {
this.errorMessage = err;
this.spelerAdded = false;
});
},
mutations.js:
export const SET_CURRENT_SPELER = (state, speler) => {
state.currentSpeler = speler;
}
state.js:
export default{
currentGame:{},
currentSpeler:{}
}
The comment by porloscerros answered the question perfectly :
the status goes as the second argument of the json method return response()->json(['speler'=> $speler], 202); (and not inside the array as you are doing). If you don't pass a second argument, the argument value is assigned to 200 by default json(mixed $data = [], int $status = 200, array $headers = [], int $options = 0)
I am using Laravel 8, VueJS and Axios for my application then every time I try to fetch all records from my database it returns an error with status code 500. Even though when fetching the data using Postman/Insomnia it returns the data without an error.
I tried to empty the table where it fetches the data the error disappears and it returns empty data with status code 200.
Store Module:
import axios from 'axios'
export default {
namespaced: true,
state: {
courses: [],
teacher: '',
},
getters: {
allCourses(state) {
return state.courses
},
},
actions: {
async fetchAllCourses({ commit }) {
const response = await axios.get('teacher/course-management/list')
console.log(response.data.data)
commit('SET_COURSES', response.data.data)
}
},
mutations: {
SET_COURSES(state, courses) {
state.courses = courses
}
}
Controller:
public function fetchAllCourses() {
try {
$courses = Course::all()->sortBy('id');
$data = $courses->transform(function ($course) {
// ! Get teacher id
$teacherId = $this->user->teacher->id;
// ! Get teacher name by id
$teacherName = $this->getTeacherName($teacherId);
return [
'id' => $course->id,
'teacher_id' => $course->teacher_id,
'teacher' => $teacherName,
'section' => $course->section,
'code' => $course->code,
'status' => $course->status,
'image' => $course->image,
];
});
return $this->success('Request success', $data);
} catch (\Exception $e) {
return $this->error($e->getMessage(), $e->getCode());
}
}
Problem solved.
public function fetchAllCourses() {
try {
$courses = Course::all()->sortBy('id');
$data = $courses->transform(function ($course) {
return [
'id' => $course->id,
'teacher_id' => $course->teacher_id,
'teacher' => $this->getTeacherName($course->teacher_id),
'section' => $course->section,
'code' => $course->code,
'status' => $course->status,
'image' => $course->image,
];
});
return $this->success('Request success', $data);
} catch (\Exception $e) {
return $this->error($e->getMessage(), $e->getCode());
}
}
I have a User model for basic user info, then a Role model and RoleUser model to associate roles with user. On user edit form, additional role can be added to that user. So, here two DB operations are done within a DB::transaction,
1) Update User info into User model
2) Add role to user
The issue is, if "Add role to user" fails, it doesn't Rollback changes in "User" model which already updated successfully.
Here is my sample code-
In Controller:
$response =
DB::transaction(function() use($user_data, $input) {
//Update changes in basic user info using "User" Model
$response = User::updateUser($user_data['user']);
if ($response->status===FALSE) {//not updated
return $response;
}
if (!empty($user_data['roles'])) {
$roles = [];
foreach ($user_data['roles'] as $role) {
$roles[] = ['role_id' => $role, 'user_id' => $user_data['user']['id'], 'created_by' => $this->curr_user->id, 'updated_by' => $this->curr_user->id];
}
//Add new roles to the user using "RoleUser" Model
$response3 = RoleUser::createRoleUser($roles);
if ($response3->status===FALSE) {//failed to add
return $response3;
}
}
return $response;
}, 5);
//source of createRoleUser method in RoleUser model
try {
DB::table($table)->where('id', $id)->update($changes);
} catch (\Illuminate\Database\QueryException $qe) {
return (object) ['status' => FALSE, 'error' => $qe->errorInfo];
} catch (\Exception $e) {
return (object) ['status' => FALSE, 'error' => [$e->getCode(), 'non-DB', $e->getMessage()]];
}
return (object) ['status' => TRUE, 'data' => $changes + ['id' => $id]];
//source of createRoleUser method in RoleUser model
try {
$new_rec_id = DB::table('role_users)->insertGetId($new_data);
$new_rec = FALSE;
if ($new_rec_id) {
$new_rec = DB::table($table)->where('id', $new_rec_id)->first();
}
} catch (\Illuminate\Database\QueryException $qe) {
return (object) ['status' => FALSE, 'error' => $qe->errorInfo];
} catch (\Exception $e) {
return (object) ['status' => FALSE, 'error' => [$e->getCode(), 'non-DB', $e->getMessage()]];
}
return (object) ['status' => TRUE, 'data' => $new_rec];
You have to throw an exception from within the transaction closure in order for the transaction to trigger the rollback. If no exception is thrown, the transaction will commit.
Keeping this in mind, that means the call to the transaction function needs to be wrapped in a try/catch, as the code that handles the rollback will rethrow the exception after the rollback for your application code to handle.
So, your code would look something like:
try {
$response = DB::transaction(function() use($user_data, $input) {
//Update changes in basic user info using "User" Model
$response = User::updateUser($user_data['user']);
if ($response->status===FALSE) {//not updated
// throw exception to trigger rollback
throw new \Exception($response->error);
}
if (!empty($user_data['roles'])) {
$roles = [];
foreach ($user_data['roles'] as $role) {
$roles[] = ['role_id' => $role, 'user_id' => $user_data['user']['id'], 'created_by' => $this->curr_user->id, 'updated_by' => $this->curr_user->id];
}
//Add new roles to the user using "RoleUser" Model
$response3 = RoleUser::createRoleUser($roles);
if ($response3->status===FALSE) {//failed to add
// throw exception to trigger rollback
throw new \Exception($response3->error);
}
}
// return without exception to trigger commit
return $response;
}, 5);
} catch (\Exception $e) {
echo 'uh oh: '.$e->getMessage();
}
Hi I'm having a problem outputting my json information on saving method in the model. I get the following error -
UnexpectedValueException in Response.php line 397:
The Response content must be a string or object implementing __toString(), "boolean" given.
I do validation on the model while saving and in the validate method of the model I need to out put the json but I'm getting boolean instead of json object
Javascript:
submit: function(e) {
e.preventDefault();
var contact = this.model.save({
firstname: this.firstname.val(),
lastname: this.lastname.val(),
company: this.company.val(),
email_address: this.email_address.val(),
description: this.description.val(),
}, {success:function(response){ console.log(response)}, wait: true});
Contact Model:
class Contact extends Model
{
protected $table = "contacts";
protected $fillable = ['firstname', 'lastname', 'company', 'email_address', 'description'];
public static function boot() {
parent::boot();
static::creating(function($model) {
return $model->validate('POST');
});
static::updating(function($model) {
return $model->validate('PUT');
});
static::saving(function($model) {
return $model->validate('PUT');
});
}
public function rules($method)
{
switch($method)
{
case 'GET':
case 'DELETE':
{
return [];
}
case 'POST':
{
return [
'firstname' => 'required',
'lastname' => 'required',
'email_address' => 'required|email|unique:contacts,email_address',
'description' => 'requried'
];
}
case 'PUT':
case 'PATCH':
{
return [
'firstname' => 'required',
'lastname' => 'required',
'email_address' => 'required|email|unique:contacts,email_address,'.$this->id,
'description' => 'required',
];
}
default: break;
}
return [];
}
public function messages() {
return [
'firstname.required' => 'Please enter your first name.',
'lastname.required' => 'Please enter your first name.',
'email_address.required' => 'Please enter a email address.',
'email_address.email' => 'Please enter a valid email address',
'email_address.unique' => 'The email is not unique.',
'description' => 'Please enter a description.'
];
}
public function validate($method)
{
$data = $this->attributes;
// if( $data['slug'] === '') {
// // if the slug is blank, create one from title data
// $data['slug'] = str_slug( $data['title'], '-' );
// }
// make a new validator object
$v = Validator::make($data, $this->rules($method), $this->messages());
// check for failure
if ($v->fails())
{
// set errors and return false
// json here not return response it's always boolean true or false
return new JsonResponse(array('error' => true, 'errors' => $v->messages()));
}
// validation pass
return true; //new JsonResponse(array('errors'=>false));
}
public function errors() {
return $this->errors;
}
public function user() {
return $this->hasOne('App\User', 'email', 'email_address');
}
}
Saving the model:
public function update(Request $request, $id) {
$contact = Contact::find($id)->with('user')->first();
$contact->firstname = $request->get('firstname');
$contact->lastname = $request->get('lastname');
$contact->email_address = $request->get('email_address');
$contact->company = $request->get('company');
$contact->description = $request->get('description');
return $contact->save(); //return formatted json
}
According to your implementation of validation, you should change the following part (in Contact):
// check for failure
if ($v->fails())
{
// set errors and return false
// json here not return response it's always boolean true or false
return new JsonResponse(array('error' => true, 'errors' => $v->messages()));
}
To something like this:
if ($v->fails()) {
$this->errors = $v->errors();
return false;
}
Then, from the Controller, try something like this:
// If validation failed
if(!$contact->save()) {
return response()->json([
'error' => true,
'errors' => $contact->errors()
]);
}
// Contact created if reached here...
return response()->json(['error' => false, 'contact' => $contact]);
Also, check the Ajax-Request-Validation and Form-Request-Validation (Easier and Managable).
Note: Don't try to return any kind of HTTP Response from model. Returning the HTTP response is part of your application logic and model should not care about these.
As save() does return boolean so You've to check if it's ok.
1) Change Your Contact model to put errors to model's errors param:
/* if($v->fails()) remove/comment this line
...
} */
$this->errors = $v->errors();
return !$v->fails();
2) In Your controller put this code:
public function update(Request $request, $id) {
$contact = Contact::find($id)->with('user')->first();
if(!$contact) {
return response('Contact not found', 404);
}
$contact->firstname = $request->get('firstname');
$contact->lastname = $request->get('lastname');
$contact->email_address = $request->get('email_address');
$contact->company = $request->get('company');
$contact->description = $request->get('description');
return $contact->save()?
$contact->toJson() : // returns 200 OK status with contact (json)
response($contact->errors, 400); // returns proper 400 Bad Request header with errors (json) in it
}
p.s. it's nice to answer to requester with http status, industry has made all to make life of developer easy, so if it's not 2xx, 3xx status so => response for Your request from client-side app will be treated as error (handler success: function(response) will not catch error here)