Livewire show variable - laravel

I have a variable $login that will contain data.
public $account;
public $login;
public function getAccountOrder($id)
{
$this->account = Buys::findOrFail($id);
$this->login = $this->account->accounts;
}
public function render()
{
$buys = Buys::where('user_id', auth()->user()->id)->get();
return view('livewire.profile', compact('buys'));
}
Modal opening (modal in same view that all content)
In modal displays this variable, but it does not display the required data. But in livewire helper (google extension) i can see data that i need to display
<div wire:ignore.self class="remodal remodal--prize" data-remodal-id="modal-account-email" aria-labelledby="modalRandTitle" aria-describedby="modalRandDesc" tabindex="-1">
<button type="button" class="remodal__close" data-remodal-action="close">
<svg><use xlink:href="#svg-btn_modal_close"></use></svg>
</button>
<div class="modal__header" id="modalRandTitle">Your login</div>
<div class="modal__content" id="modalRandDesc">
<div class="modal__accounts">
<div class="modal__accounts-row">
<div class="input__box">
<div class="input__box-btn" data-btn-clipboard="{{ $login }}" onclick="copyToClipboard('{{ $login }}')">
<svg class="svg-btn_clipboard"><use xlink:href="#svg-btn_clipboard"></use></svg>
<svg class="svg-btn_check"><use xlink:href="#svg-btn_check"></use></svg>
</div>
<div class="input__box-field">
<div class="input__box-label">Login</div>
<div class="input__box-value">{{ $login }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
How can i render this variable in livewire component?

It seems you want the changed value of $login gets reflected in the javascript on the page. if this is the case you need to dispatch an event from your getAccountOrder function and catch it on the page with js.
something like this:
public function getAccountOrder($id)
{
$this->account = Buys::findOrFail($id);
$this->login = $this->account->accounts;
$this->dispatchBrowserEvent('yourEventName', ['value'=> $this->login]);
}
then on the something like this should be added:
<script>
window.addEventListener('yourEventName', (e) => {
//do something with the value
console.log(e.detail.value);
});
</script>

Related

When I upload a image It Does not show on database in Laravel 9

My problem is: When i click to send button with form. All information has been upladed to database exept image. That's why i could not catch to image from database to show users.
Here is the Migration Codes:
public function up()
{
Schema::create('haberler', function (Blueprint $table) {
$table->id();
$table->string('baslik')->default('');
$table->string('kategori')->nullable();
$table->string('icerik')->nullable();
$table->string('resim')->nullable();
$table->timestamp('created_at')->useCurrent();
$table->timestamp('updated_at')->useCurrent();
});
}
Here is the function codes
public function yenihaberekle(Request $request){
$request->validate([
'kategori'=>'required',
'baslik'=>'required|min:6|max:50',
'icerik'=>'required|min:50',
'resim' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
]);
$file_name = time() . '.' .request()->resim->getClientOriginalExtension();
request()->resim->move(public_path('images', $file_name));
$baslik = $request->baslik;
$kategori = $request->kategori;
$icerik = $request->icerik;
$stu = new haberler();
$stu->baslik = $baslik;
$stu->kategori = $kategori;
$stu->icerik = $icerik;
$stu->save();
return redirect()->back()->with('success','Haber veya Kampanya Başarıyla Eklenmitir. / News or Campaing has added by succesfuly');
}
and i try to catch code on front page
<div class="row">
#foreach($haberler as $haberler)
<div class="col-md-4 mb-30">
<div class="item">
<div class="position-re o-hidden"> <img src="{{ asset('images/'. $haberler->resimler) }}" alt="">
<div class="date">
<span>{{$haberler->created_at->format('M') }}</span> <i>{{$haberler->created_at->format('d') }}</i>
</div>
</div>
<div class="con"> <span class="category">
{{$haberler->kategori}}
</span>
<h5>{{$haberler->baslik}}</h5>
</div>
</div>
</div>
#endforeach
</div>
<div class="row">
and addnews blade i mean form
<form method="post" action="{{url('panel/news/addnews/yenihaberekle')}}" enctype="multipart/form-data">
Allright guys. I fixed to problem.
First, I forgot in the function:
$resim = $file_name;
Second, in my view blade my code was:
<img src="{{ asset('images/'. $haberler->resimler) }}"
But my function was resim so now it works.
thank you

Set Laratrust permission in livewire controller

I would like to set laratrust permission in livewire controller.
In livewire blade i can set easily the permission:
#permission('regular-dashboard')
<div class="row">
<div class="col-4">
<div class="card">
something goes here
</div>
</div>
</div>
#endpermission
But in livewire controller i do not know how to do it.
This is my controller code:
return PowerGrid::eloquent()
{
return PowerGrid::eloquent()
->addColumn('location')
}
public function columns(): array
{
return [
Column::add()
->title('LOCATION')
->field('locations.name')
->sortable()
->searchable()
->makeInputText(),
];
}

How to return view in controller?

I need to pull in data to my view but this doesn't work:
return view ('sub-domain', ['worker' => $worker ]);
Here is my code:
public function aerospace(Request $request , Worker $worker ){
$worker = $worker->newQuery();
if ($request->has('profession')) {
$worker->where('profession', $request->input('profession'));
}
if ($request->has('state')) {
$worker->where('state', $request->input('state'));
}
if ($request->has('local_govt')) {
$worker->where('local_govt', $request->input('local_govt'));
}
return $worker->get();
The above code brings out an array of data from the database which I can then filter with "domain/sub-domain?state=xyz"
Now when I try to pass in the data into my views using
return view ('sub-domain', ['worker' => $worker ]);
The page is loaded but no $worker data is loaded on the page. How can I pull the data? Here is my view file
<div class="row">
<form method="GET" action="">
Profession:<input type="text" name="profession"> State:<input type="text" name="state"> Local Govt:<input type="text" name="local_govt">
<button type="submit">Filter</button>
</form>
</div>
<div class="row">
#foreach ($worker as $worker)
<div class="col-lg-3 col-md-6">
<div class="member">
<div class="pic"><img src="avatar/{{$worker->avatar}}" alt=""></div>
<div class="details">
<h4>{{$worker->name}} {{$worker->l_name}}</h4>
<span>{{$worker->profession}}</span><br>{{ $worker->state }}
</div>
</div>
</div> #endforeach
</div>
I want to filter data by certain parameters, if there's a better way to do that please do let me know. But first I need the data to display.
You are returning a query instance, not a collection or singular model. That's why the get() method works. So first do:
$worker = $worker->get();

How to use Ajax to update RenderBody()

I am trying to work with ajax in order to update only a partial view and not the whole view. In the following example I want to refresh the page-content section.
this is my layout.html.
<body>
<div id="container" class="effect">
#Html.Partial("_head")
<div class="boxed">
<section id="content-container">
#if (ViewData["Errors"] != null)
{
<div class="panel" style="background-color:white;">
<div class="panel-heading">
<h3 class="panel-title">
Page title
</h3>
</div>
</div>
}
<div id="page-content" class="container">
#RenderBody()
</div>
</section>
</div>
</div>
</body>
Partial view _head contains the menu with href links for example:
<a id="a1" href="">Menu Item 1</a>
In layout I am trying to use the following:
<script>
$(document).ready(function () {
$("#a1").click(function () {
A1();
});
function A1( ) {
$.ajax({
url: '#Url.Action("PartialViewMethodFromController", "HomeController")',
success: function (response) {
$('#page-content').html(response);
}
});
}
});
</script>
And my HomeController
public ActionResult PartialViewMethodFromController()
{
var model = service.GetAll();
return PartialView("PartialViewMethodFromController", model);
}
It kinda works - the partialview is refreshing for a moment and the partialview is show correctly and then the whole page goes on and refreshes.
Am I missing something crucial here?

Passing the Div id to another vue component in laravel

I created a simple real-time chat application using vue js in laravel.
I am having a problem with the automatic scroll of the div when there is a new data.
What I want is the div to automatically scroll down to the bottom of the div when there is a new data.
Here is my code so far.
Chat.vue file
<template>
<div class="panel-block">
<div class="chat" v-if="chats.length != 0" style="height: 400px;" id="myDiv">
<div v-for="chat in chats" style="overflow: auto;" >
<div class="chat-right" v-if="chat.user_id == userid">
{{ chat.chat }}
</div>
<div class="chat-left" v-else>
{{ chat.chat}}
</div>
</div>
</div>
<div v-else class="no-message">
<br><br><br><br><br>
There are no messages
</div>
<chat-composer v-bind:userid="userid" v-bind:chats="chats" v-bind:adminid="adminid"></chat-composer>
</div>
</template>
<script>
export default {
props: ['chats','userid','adminid'],
}
</script>
ChatComposer.vue file
<template>
<div class="panel-block field">
<div class="input-group">
<input type="text" class="form-control" v-on:keyup.enter="sendChat" v-model="chat">
<span class="input-group-btn">
<button class="btn btn-primary" type="button" v-on:click="sendChat">Send Chat</button>
</span>
</div>
</div>
</template>
<script>
export default{
props: ['chats','userid','adminid'],
data() {
return{
chat: ''
}
},
methods: {
sendChat: function(e) {
if(this.chat != ''){
var data = {
chat: this.chat,
admin_id: this.adminid,
user_id: this.userid
}
this.chat = '';
axios.post('/chat/sendChat', data).then((response) => {
this.chats.push(data)
})
this.scrollToEnd();
}
},
scrollToEnd: function() {
var container = this.$el.querySelector("#myDiv");
container.scrollTop = container.scrollHeight;
}
}
}
</script>
I am passing a div id from the Chat.vue file to the ChatComposer.vue file.
As you can see in the ChatComposer.vue file there is a function called scrollToEnd where in it gets the height of the div id from Chat.vue file.
When the sendchat function is triggered i called the scrollToEnd function.
I guess hes not getting the value from the div id because I am getting an error - Cannot read property 'scrollHeight' of null.
Any help would be appreciated.
Thanks in advance.
the scope of this.$el.querySelector will be limited to only ChatComposer.vue hence child component can not able to access div of parent component #myDiv .
You can trigger event as below in ChatComposer
this.$emit('scroll');
In parent component write ScollToEnd method and use $ref to assign new height
<chat-composer v-bind:userid="userid" v-bind:chats="chats" v-bind:adminid="adminid" #scroll="ScollToEnd"></chat-composer>
..

Resources