i am trying to get permission all id which is checked by user but unfortunately i am not getting permission ids in proper array format please help me how can i do that ? please my format below thanks.
I want to get permissions ids like this.
{
"_token": "Eo1ByYyiFyrzvTXqqlUUAszTk8AMa8CjC9xpRa0l",
"name": "dfsdfsdf",
"permission": [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
}
result of request()->all()
{
"_token": "Eo1ByYyiFyrzvTXqqlUUAszTk8AMa8CjC9xpRa0l",
"name": "dfsdfsdf",
"permission": {
"1": "on",
"2": "on",
"3": "on",
"4": "on",
"5": "on",
"6": "on",
"7": "on",
"8": "on",
"9": "on",
"10": "on",
"11": "on"
}
}
html view
#foreach ($menus as $sub_menu)
#if ($sub_menu->parent_id == $menu->id)
<div class="portlet mb-0">
<div class="portlet-heading bg-light-theme">
<h4 class="portlet-title">
<div class="checkbox">
<input id="{{$sub_menu->name}}" name="permission[{{$sub_menu->id}}]" type="checkbox" class="parent intermediate parent-{{$menu->id}} parentmenu-{{$sub_menu->id}}"
data-id="{{$menu->id}}" data-sub="{{$sub_menu->id}}" >
<label for="{{$sub_menu->name}}">
<span class="text-black">{{$sub_menu->name}}</span>
</label>
</div>
</h4>
<div class="portlet-widgets">
<a data-toggle="collapse" data-parent="#accordion1" href="#UsersRoles" class="text-white">
<i class="ion-minus-round">
</i>
</a>
</div>
<div class="clearfix">
</div>
</div>
<div id="UsersRoles" class="panel-collapse collapse show">
<div class="portlet-body">
#foreach ($menus as $permission)
#if ($permission->parent_id == $sub_menu->id)
<div class="checkbox">
<input id="checkbox{{$permission->id}}" name="permission[{{$permission->id}}]" type="checkbox" class="child parent-{{$menu->id}}"
data-parent-id="{{$menu->id}}" >
<label for="checkbox{{$permission->id}}">
{{$permission->name}}
</label>
</div>
#endif
#endforeach
</div>
</div>
</div>
#endif
#endforeach
You must cycle the permission field, check if the value is "on" and add it to a new variable.
Assuming $r as request().
$veryPermissions = [];
foreach( $r->permission as $permission => $state ) {
if( $state == 'on' ) {
$veryPermissions[] = $permission;
}
}
Now $veryPermissions contains the ids of the permission checked.
NOTE - If you need only the ids of permissions without check if user checked or not, try to use array_keys() function.
Documentation : https://www.php.net/manual/en/function.array-keys.php
:)
array_walk can help us address the issue in an effective way:
$return = [];
array_walk($request->permission, function ($key, $value) use (&$return) {
if ($key == 'on')
array_push($return, $value);
});
//print_r($return);
$request->permission = $return;
Related
So, I'm trying to fetch my laravel api and already run php artisan serve. After that the error came out and I'm looking to find solution here but I have no idea what's going on.
The error shown in the console:
Uncaught (in promise) TypeError: Cannot convert undefined or null to object
The API:
{
"message": "List trash and category order by time",
"data": [
{
"id": 1,
"trash_id": 1,
"category_id": 2,
"created_at": "2022-01-01T12:41:43.000000Z",
"updated_at": "2022-01-01T12:41:43.000000Z",
"garbage": {
"id": 1,
"name": "Buku",
"weight": 1,
"created_at": "2022-01-01T12:41:19.000000Z",
"updated_at": "2022-01-01T12:41:19.000000Z"
},
"categories": {
"id": 2,
"name": "Kertas",
"price": 1800
}
}]
}
Index.vue script:
<script>
import axios from "axios";
import { onMounted, ref } from "vue";
export default {
setup() {
// reactive state
let all_trash = ref([]);
onMounted(() => {
// get data from api endpoint
axios
.get("http://127.0.0.1:8000/api/trash")
.then((result) => {
all_trash.value = result.data;
})
.catch((err) => {
console.log(err.response);
});
});
return {
all_trash,
};
},
};
</script>
Index.vue HTML:
<div v-for="(trash, index) in all_trash.data" :key="index">
<div class="card rounded shadow mb-3">
<div class="card-body">
<div class="mx-3">
<h5 class="mb-4">{{ trash.garbage.name }}</h5>
<p>
{{ trash.categories.name }}
<span class="float-end">
<button class="btn" style="color: red">Hapus</button>
</span>
</p>
</div>
</div>
</div>
</div>
Just add a condition that not to render the loop until data is not set. The data from API end point is not available on the initial dom rendered and there is not data in all_trash.data hence the error. Just add a v-if on top of the div and hopefully it should work.
<div v-if=" all_trash.data">
<div v-for="(trash, index) in all_trash.data" :key="index">
<div class="card rounded shadow mb-3">
<div class="card-body">
<div class="mx-3">
<h5 class="mb-4">{{ trash.garbage.name }}</h5>
<p>
{{ trash.categories.name }}
<span class="float-end">
<button class="btn" style="color: red">Hapus</button>
</span>
</p>
</div>
</div>
</div>
</div>
I have some complex data and I want to show the validation error array data in vue file but I can not do it because I have got some data that has an index and showing like contacts.0.name: ["...."].
Please share your opinion how I can show the error.
vue file
<template>
<div>
<form enctype="multipart/form-data" #submit.prevent="handleSubmit">
<div v-for="(contact, index) in contacts" :key="index" class="row">
<div class="col col-md-3">
<div class="form-group mb-4">
<label for="personName">Contact Person Name</label>
<input
id="personName"
v-model="contact.name"
type="text"
class="form-control"
/>
<small> Want to show here the error ? </small
>
</div>
</div>
<!-- Add or Remove button -->
<div class="col col-md-12 text-right">
<div class="row ml-4">
<div v-show="index == contacts.length - 1">
<button
class="btn btn-warning mb-2 mr-2 btn-rounded"
#click.prevent="add"
>
Add More
</button>
</div>
<div v-show="index || (!index && contacts.length > 1)">
<button
class="btn btn-danger mb-2 mr-2 btn-rounded"
#click.prevent="remove"
>
Remove
</button>
</div>
</div>
</div>
</div>
</form>
</div>
</template>
<script>
export default {
data() {
return {
contacts: [
{
name: "",
},
],
errors: [],
};
},
methods: {
handleSubmit() {
let data = new FormData();
data.append("contacts", JSON.stringify(this.contacts));
Request.POST_REQ(data, "/add-institute")
.then(() => {
alert("success");
})
.catch((err) => {
this.errors = err.response.data.errors;
});
},
add() {
this.contacts.push({
name: "",
email: "",
phone: "",
alternate_phone: "",
});
},
remove(index) {
this.contacts.splice(index, 1);
},
},
};
</script>
controller file
public function add_institute(Request $request) {
$request['contacts'] = json_decode($request['contacts'], true);
$request->validate([
'contacts.*.name'=> 'unique:institute_contact_people|distinct',
]);
...rest of code of insert
return response()->json("Success...");
}
Getting Error Response data
errors: {
contacts.0.name: ["The contacts.0.name has already been taken.", "The contacts.0.name field has a duplicate value."]
0: "The contacts.0.name has already been taken."
contacts.1.name: ["The contacts.1.name has already been taken.", "The contacts.1.name field has a duplicate value."]
0: "The contacts.1.name has already been taken."
}
Okay, so your error data is basically an object with array of errors in it.
Pretty much like this
errors: {
'contacts.0.name': [
'The contacts.0.name has already been taken.',
'The contacts.0.name field has a duplicate value.',
],
'contacts.1.name': [
'The contacts.1.name has already been taken.',
'The contacts.1.name field has a duplicate value.',
],
},
For me, it will be better if you could achieve something like this as an error response (an array of objects with errors array in it)
betterErrors: [
{
location: 'contact.0.name',
errors: [
'The contacts.0.name has already been taken.',
'The contacts.0.name field has a duplicate value.',
],
},
{
location: 'contact.1.name',
errors: [
'The contacts.1.name has already been taken.',
'The contacts.1.name field has a duplicate value.',
],
},
],
For me, as of right now, it feels wrong but you can achieve a display of your errors with something like this
<template>
<div>
<div v-for="(error, key) in errors" :key="key">
<hr />
<span v-for="(errorItem, innerKey) in error" :key="innerKey" style="margin-top: 2rem">
{{ errorItem }}
</span>
</div>
</div>
</template>
<script>
export default {
data() {
return {
errors: {
'contacts.0.name': [
'The contacts.0.name has already been taken.',
'The contacts.0.name field has a duplicate value.',
],
'contacts.1.name': [
'The contacts.1.name has already been taken.',
'The contacts.1.name field has a duplicate value.',
],
},
}
},
}
</script>
PS: having a :key with an array looping index is really bad tbh. That's why I do recommend a location field in your error response.
in your controller
$request->validate([
'ClinicName' => 'required|string|min:200',
'Branches.*.BranchName'=>'required|string|min:200'
]);
in your vue3 file, to access the errors which will have keys such as,
'Branches.0.BranchName'
then you can access the above error with for loop similar to this
<p v-if="form.errors['Branches.' + counter + '.BranchName']"
class="mt-2 text-sm text-red-600 dark:text-red-500">
{{ form.errors["Branches." + counter + ".BranchName"] }}
</p>
here the counter can be any counter starting from 0.
I am following up this guide https://www.codechief.org/article/real-time-chat-app-with-laravel-6-vue-js-and-pusher#gsc.tab=0 to create real-time chat app in Laravel and Vue.
But it does not show list of active user.
Also this span never shows
<span class="text-muted" v-if="activeUser" >{{ activeUser.first_name }}` is typing...</span>
Also, this method does not work properly because in console log it shows undefined is typing...
sendTypingEvent() {
Echo.join('chat')
.whisper('typing', this.user);
console.log(this.user.fist_name + ' is typing now')
}
And it is not actually real time, because I see new messages only if I reload page.
This is Vue component
<template>
<div class="row">
<div class="col-8">
<div class="card card-default">
<div class="card-header">Messages</div>
<div class="card-body p-0">
<ul class="list-unstyled" style="height:300px; overflow-y:scroll" v-chat-scroll>
<li class="p-2" v-for="(message, index) in messages" :key="index" >
<strong>{{ message.user.first_name }}</strong>
{{ message.message }}
</li>
</ul>
</div>
<input
#keydown="sendTypingEvent"
#keyup.enter="sendMessage"
v-model="newMessage"
type="text"
name="message"
placeholder="Enter your message..."
class="form-control">
</div>
<span class="text-muted" v-if="activeUser" >{{ activeUser.first_name }} is typing...</span>
</div>
<div class="col-4">
<div class="card card-default">
<div class="card-header">Active Users</div>
<div class="card-body">
<ul>
<li class="py-2" v-for="(user, index) in users" :key="index">
{{ user.first_name }}
</li>
</ul>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props:['user'],
data() {
return {
messages: [],
newMessage: '',
users:[],
activeUser: false,
typingTimer: false,
}
},
created() {
this.fetchMessages();
Echo.join('chat')
.here(user => {
this.users = user;
})
.joining(user => {
this.users.push(user);
})
.leaving(user => {
this.users = this.users.filter(u => u.id != user.id);
})
.listen('ChatEvent',(event) => {
this.messages.push(event.chat);
})
.listenForWhisper('typing', user => {
this.activeUser = user;
if(this.typingTimer) {
clearTimeout(this.typingTimer);
}
this.typingTimer = setTimeout(() => {
this.activeUser = false;
}, 1000);
})
},
methods: {
fetchMessages() {
axios.get('messages').then(response => {
this.messages = response.data;
})
},
sendMessage() {
this.messages.push({
user: this.user,
message: this.newMessage
});
axios.post('messages', {message: this.newMessage});
this.newMessage = '';
},
sendTypingEvent() {
Echo.join('chat')
.whisper('typing', this.user);
console.log(this.user.fist_name + ' is typing now')
}
}
}
</script>
"Also, this method does not work properly because in console log it shows undefined is typing..."
i assume you made a typo in your console.log, you probably meant:
this.user.first_name
Concerning your "realtime" problem, i suspect it might be because your broadcasted Event is being queued, so you might want to use the ShouldBroadcastNow instead of ShouldBroadcast
Response Json from back-end
{
"INCOME": {
"TOURIST": [{
"vehicleNumber": "TN 47 RG 4567",
"details": [{
"id": 01,
"amount": 100
},{
"id": 02,
"amount": 200
}]
},
{
"vehicleNumber": "TN 47 RG 9876",
"details": [{
"id": 03,
"amount": 300
},{
"id": 04,
"amount": 400
}]
}
]
}
}
is assigned to this.tesTourist = this.objectValue.INCOME.TOURIST;
component.html
<form [formGroup]="accountsForm" autocomplete="off">
<div class="row">
<div *ngFor="let obj of tesTourist">
<div *ngFor="let item of obj.details">
<label class="text-left"> {{obj.vehicleNumber}} :</label>
<input type="text" formControlname="incomeTourist" value="{{item.amount}}">
</div>
</div>
</div>
</form>
component.ts
this.accountsForm = this.fb.group({
incomeTourist:[],
});
Let as take obj.details.length is 2. It displays 2 input box in page with the value amount binded(item.amount). While changing the amount in any one of the input field that could not bind the amount in incomeTourist. It constantly shows null as below.
Result of <pre><code>{{accountsForm?.value | json}}</code></pre>
{
"incomeTourist": null
}
You form structure should be like below.
this.accountsForm = this.fb.group({
testTourist: this.fb.array([]),
});
After that create 2 method to create testTourist and incomeTourist form array.
createTestTourist() {
return this.formBuilder.group({
details: this.fb.array([])
});
}
createDetails() {
return this.formBuilder.group({
amount: [],
vehicleNumber: []
});
}
And after that loop over the testTourist object in ngOnInt method.
this.testTourists.forEach(testTourist => {
const fb = this.createTestTourist();
testTourist.details.forEach((detail, i) => {
const cfb = this.createDetails();
cfb.get('amount').setValue(detail.amount);
cfb.get('vehicleNumber').setValue(detail.vehicleNumber);
(fb.controls.details as FormArray).push(cfb);
});
(this.accountsForm.get('testTourist') as FormArray).push(fb);
});
after this in html you should write below code.
<form [formGroup]="accountsForm" autocomplete="off">
<div class="row">
<div *ngFor="let obj of testTourists; let i= index" formArrayName="testTourist">
<ng-container [formGroupName]="i">
<div *ngFor="let item of obj.details; let j= index" formArrayName="details">
<ng-container [formGroupName]="j">
<label class="text-left"> {{item.vehicleNumber}} :</label>
<input type="text" formControlName="amount">
</ng-container>
</div>
</ng-container>
</div>
</div>
</form>
After this if you do any changes it will reflect in form object. You can console the form object.
console.log(this.accountsForm.value)
you will get expect same object structure as you are providing. And you will get updated values.
I have a list of nested comments. Under each comment, I'd like to add a "reply" button that, when click, show a reply form.
For now, everytime I click a "reply" button, it shows the form. But the thing is, I'd like to show only one form on the whole page. So basically, when I click on "reply" it should close the other form alreay opened and open a new one under the right comment.
Edit :
So I was able to make some slight progress. Now I'm able to only have one active form opening on each level of depth in the nested loop. Obviously, what I'm trying to do now is to only have one at all.
What I did was emitting an event from the child component and handle everything in the parent component. The thing is, it would work great in a non-nested comment list but not so much in my case...
Here is the new code:
In the parentComponent, I have a handleSelected method as such:
handleSelected (id) {
if(this.selectedItem === id)
this.selectedItem = null;
else
this.selectedItem = id;
},
And my childComponent:
<template>
<div v-if="comment">
<div v-bind:style=" iAmSelected ? 'background: red;' : 'background: none;' ">
<p>{{ comment.author.name }}<br />{{ comment.created_at }}</p>
<p>{{ comment.content }}</p>
<button class="button" #click="toggle(comment.id)">Répondre</button>
<button class="button" #click="remove(comment.id)">Supprimer</button>
<div v-show="iAmSelected">
<form #submit.prevent="submit">
<div class="form-group">
<label for="comment">Votre réponse</label>
<textarea class="form-control" name="comment" id="comment" rows="5" v-model="fields.comment"></textarea>
<div v-if="errors && errors.comment" class="text-danger">{{ errors.comment[0] }}</div>
</div>
<button type="submit" class="btn btn-primary">Envoyer</button>
<div v-if="success" class="alert alert-success mt-3">
Votre réponse a bien été envoyée !
</div>
</form>
</div>
</div>
<div v-if="comment.hasReply">
<div style="margin-left: 30px;">
<comment v-for="comment in comments"
:key="comment.id"
:comment="comment" #remove-comment="remove"
:is-selected="selectedItem" #selected="handleSelected($event)">
</comment>
</div>
</div>
</div>
</template>
<script>
import comment from './CommentItem'
export default {
name: 'comment',
props: {
isSelected: Number,
comment: {
required: true,
type: Object,
}
},
data () {
return {
comments: null,
fields: {},
errors: {},
success: false,
loaded: true,
selectedItem: null,
}
},
computed: {
iAmSelected () {
return this.isSelected === this.comment.id;
}
},
methods: {
remove(id) {
this.$emit('remove-comment', id)
},
toggle(id) {
this.$emit('selected', id);
},
handleSelected(id) {
if(this.selectedItem === id)
this.selectedItem = null;
else
this.selectedItem = id;
},
},
mounted(){
if (this.comment.hasReply) {
axios.get('/comment/replies/' + this.comment.id)
.then(response => {
this.comments = response.data
})
}
}
}
</script>
Thanks in advance for your help!