Vue, sharing blade/view with two routes - php

I'm very stuck here and I'm not sure the best course of action
Currently I have a blade and vue component that make up a dashboard. I have one route that loads the view for the dashboard, and another route (which is called inside the dashboard upon an event) which gets details for an ID.
This works perfectly right now.
The issue is that I want to be able to hit that 2nd route externally (like site.com/status/12345) and load the data for that id (12345) by default.
Right now I hit site.com/status and on page creation it calls fetchEntries to get data, I render a table based on that data with links, so if you click a link it passes the ID for that clicked entry into status/{id} to get details for that specific clicked entry. THen it loads the returned data into a details screen.
All I want to do here is make it so that if I call status/12345 it hits that route, and my controller details method. I know I can call that function on page creation as well, but I want to know how to handle the difference between site.com/status and site.com/status/12345.
What should I do here, and how do I go about it?
Here's what I have right now:
controller.php
public function index() {
return view('Entry.status');
}
public function details($id) {
return json_encode(Entry::getDetails($id));
}
web.php (route)
Route::get('/Entry/status', 'Entry\EntryController#index')
->name('Entry.status');
Route::get('/Entry/status/{id}', 'Entry\EntryController#details')
->name('Entry.status');
status.vue
created() {
this.fetchEntries();
},
fetchEntries() {
axios.get('/Entry/dashboard')
.then(response => {
this.events = response.data;
})
.catch(function(error) {
console.log(error)
})
.finally(function() {
})
},
getDetails(event) {
this.detailId = event.taskt_id;
axios.get('/Entry/status/' + this.detailId)
.then(response => {
...
}

if I understand your question correctly. I think you can do something like this.
public function details($id) {
if (request()->wantsJson()) {
return json_encode(Entry::getDetails($id));
}
return view('Entry.detail');
}
Is it what you want?

Related

Inertiajs - Laravel: Avoid Scroll after Post and Set Header

On my index page I have made a chatbox. There I have a form element in my Vue component which executes an inertia post via "UseForm".
The problem I have is, because I make the post on "/chatbox/send", that I have to make a redirect to "index/home" afterwards, because otherwise the URL-header remains "/chatbox/send", which I don't want.
In addition, the page automatically scrolls up again when rendering.
My question; How can I re-render the page so that the URL-header is set to "/home" again and the page does not scroll up ?
public function sendChatMessage(Request $request) {
$msg = $request->input('text');
$username = Auth::user()->only('name')['name'];
if($this->createChatMessage($msg, $username)) {
return redirect('index/home');
}
return false;
}
you have to define it during your route in your vuejs I suppose you use.
Normally it should look like this:
this.$inertia.post(route('chatbox.send'), {text: this.text}, { preserveState: false, preserveScroll: true })
preserveState: it is used to say if you want to refresh the page if you return the same route in your php controller.
preserveScroll: is used to say that you want to stay at the same scrolling as at the time of the send.
more information: https://inertiajs.com/manual-visits
And in your controller I would do:
public function sendChatMessage(Request $request) {
$msg = $request->input('text');
$username = Auth::user()->only('name')['name'];
if($this->createChatMessage($msg, $username)) {
return redirect()->route('home');
}
}

How to redirect to two different views in Laravel?

I'm a newbie to the Laravel framework. What I want to do is to redirect the users to a wait page firstly, then, they'll be redirected to their homepage after the wait screen.
I wrote some code for this but unfortunately it does not work. I searched about it but couldn't find a solution.
Here is my code:
function order(Request $req){
$data = [['user_id'=>Auth::id(),'order_note'=>$req->order_note, 'sugar'=>$req->order_sugar, 'amount'=> $req->amount, 'place_id'=>$req->order_place, 'beverage_id'=>$req->order_beverage]];
Orders::insert($data);
$this->redirectToWait(); // this is another function in the same controller.
sleep(10);
return redirect()->route('home');
}
function redirectToWait(){
return redirect()->route('wait');
}
This code only returns to the home route, it skips the redirectToWait() function.
Thank you for your help :)
You can't do this only using PHP & Laravel.
You have to use JavaScript to load first page then second page.
Controller:
function order(Request $req){
$data = [['user_id'=>Auth::id(),'order_note'=>$req->order_note, 'sugar'=>$req->order_sugar, 'amount'=> $req->amount, 'place_id'=>$req->order_place, 'beverage_id'=>$req->order_beverage]];
Orders::insert($data);
return view('wait-step-view-here');
}
wait-step-view-here.blade.php
...[SOME_HTML_HERE]
<script>
setTimeout(function(){
window.location.replace("{{ route('home') }}");
}, 10000);
</script>
...[SOME_HTML_HERE]

laravel and vue, loading view without expected prop

I asked a question about this earlier but I'm still stuck and having some issues.
Right now, if I go to site.com/status/12345 then I will get my status as I would expect. The route with the id (12345) hits a controller method which passes that id in and returns the json version of it in the view, where I'm using it as a prop and calling a function with it on page load.
However, if I just go to site.com/status (which should hit my index method, returning only the base view) then I get 'undefined variable entryKey'.
Obviously, I'm adding my entryKey value from the controller into my blade to be passed in as a prop, which seems to be working if there is a URL segment for it, but now I can't just get my base view to return with site.com/status
How can I fix this so that site.com/status hits my index method and site.com/status/12345 hits the detail method and passes the id in as a prop?
web.php (routes)
Route::get('/entry/status', 'entry\entryController#index')
->name('entry.status');
Route::get('/entry/status/{id}', 'entry\entryController#details')
->name('entry.status');
controller.php
public function index() {
return view('entry.status');
}
public function details($id) {
if (request()->wantsJson()) {
return json_encode(entry::getDetails($id));
}
$entryID = json_encode($id);
return view('entry.status')
->with('entryKey', $entryID);
}
status.blade.php
<entry-dashboard :entry-key="{{$entryKey}}"></entry-dashboard>
detail.vue
props: [
'entryKey'
],
created() {
this.setDetailWindow(this.entryKey);
},
setDetailWindow(event) {
this.detailId = event.taskt_id;
axios.get('/entry/status/' + this.detailId)
.then(response => {
...
...
}

Sending variables with ajax in laravel 5.4

This is my first time I'm doing this type of sending so I hope you can help me, I have a web page in laravel 5.4 which on a page I have a label that shows me a number and I want that number to appear On another page using ajax but I do not know how to do it.
This is the code of my page that I have the label (which I want to send):
<div class="col-md-3 col-sm-2 siga-cantidad">
<label id="preciototalEmpresarialSiga">$25.000</label>
</div>
I want that value to appear in another label on my page / tests that I also have my controller and my route.
This is my route
Route::get('/prueba', 'PruebaController#index')->name('prueba');
This is my controller
class PruebaController extends Controller
{
public function index()
{
return view('pruebas');
}
}
And I do not know how to do with ajax to send me that data of my label. I hope I could be clear and they can help me, in advance many thanks to all.
Yes, I think I was not very clear ... I have this web page in laravel 5.4, it is in the path and in the controller
Route::get('/portal-de-calidad', 'PortalController#index')->name('portal');
class PortalController extends Controller
{
public function index()
{
return view('portal');
}
}
In this url(/portal-de-calidad) I have this code
<div class="col-md-3 col-sm-2 siga-cantidad">
<label id="preciototalEmpresarialSiga">$25.000</label>
</div>
What I want is that the "$ 25.00" that is inside the label is displayed in another web page .. I understand that with ajax can be done but I do not know how to start or where to put the code ...
Here I put the route and the driver of the page where I want the information appears obviously on another label ..
Route::get('/prueba', 'PruebaController#index')->name('prueba');
<label>"Here I want you to show me the information on the portal page"</label>
class PruebaController extends Controller
{
public function index()
{
return view('prueba');
}
}
I hope I have been clear and can understand and help me ... thanks ..!
It is not clear what exactly you are trying to achieve here but for sending data using ajax to a specific route following should suffice :
AJAX Call
function postLabel()
{
var value = $('#preciototalEmpresarialSiga').text();
$.ajax({
url : "{{url('/prueba')}}",
type : "GET",
data : { 'price' : value },
success:function(data){//200 response comes here
//Do what you want to do with processed data
},
error:function(e){
//Error handling
}
})
}
And in your Controller
public function index()
{
if( !Input::has('price') )//Check if input exist
return response('Bad request', 400);
$price = Input::get('price');
//Also you should validate your data here
//Process data
return $price;
}

Laravel single route point to different controller depending on slugs

I'm new to laravel and I have searched a lot for an answer to my problem but either it's not applicable or I'm not getting it.
I have a FileMaker solution for a client that handle customers and events. Each customer to my client have their own event websites that is managed via the solution. A cms simply. Each customer get a site with a url like clientsite.com/event.
Each page in the event has a page-type and I would like to address different controllers depending on the type.
In routes.php i have:
Route::group(['middleware' => ['sal', 'menu']], function () {
Route::get('/{event}/{page}', function($event, $page) {
// Query page for page-type and use controller depending on type
});
});
There are many page types (standard text/image, specialized forms etc) and therefor I would like to address different controllers.
Event names are always unique but pages are not.
You could call a controller manually inside the route closure. Though I would suggest doing the validation in a helper file to make the route file clean and readable.
Route::group(['middleware' => ['sal', 'menu']], function () {
Route::get('/{event}/{page}', function($event, $page) {
// you could do something like
$user_type = Auth::user()->user_type;
if($user_type == "organizer")
{
$controller = $app->make('OrganizerController');
return $controller->callAction('controllerFunc', $parameters = array());
}
else
{
$controller = $app->make('ClientController');
return $controller->callAction('controllerFunc', $parameters = array());
}
});
});
An alternative to the route solution could be to handle the logic in the controller itself:
First, update routes.php to something like:
Route::group(['middleware' => ['sal', 'menu']], function () {
Route::get('/{event}/{page}', 'RoutesController#index');
});
Then, in the RoutesController.php file (add to app/Http/Controllers), you can do something similar to:
public function index()
{
$event = Request::segment(1); // get the {event} part of the route
$page = Request::segment(2); // get the {page} part of the route
// get event data from database, e.g.
$event_data = Event::where( 'slug', $event )->first();
// load correct page
switch ( $page ) {
case "people":
return $this->people();
break;
case "anotherPage":
return $this->another_page();
break;
}
}
private function people()
{
// show view
return View::make('event.people');
}
This solution keeps your routes file clean, but also lets you handle the different event and page data, and load different views depending on the page being looked at. Your extra logic would be better in a controller rather than the routes file.
It all depends on where you prefer to code your page / view logic. You can use this approach call functions in the same controller, or external ones.

Categories