So Iam using vuex and laravel for this project and i have had some difficulties with trying to change the badge depending on the displayed data in my dashboard. Currently my dashboard looks like this:
Now what i would like to happen is when an Error Message contains for instance the string 99012. That the badge color according to the Error message code. I havent been able to make the {"Result":[{"ERRORS":"99012: Weborder number already exists : 20211049"}]} in JSON format that is why its been displayed like this.
Currently my Controller looks like this:
class GencomController extends Controller
{
/**
* Display a listing of the resource.
*
*
*/
public function index(Request $request)
{
//
// $log = Log::get('RESPONSE');
// Get all the Response rows from database.
$data = Log::all();
// Convert data into json array
//$decoded = json_encode($data, true);
$decoded = json_decode($data);
return ($decoded);
}
This is how my store.js looks:
api_logs: {
loading: false,
data: [],
},
and here is my .vue component:
<div class="mt-8 flex flex-col">
<div class="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="inline-block py-2 align-middle">
<div class="overflow-auto relative shadow-sm ring-1 ring-black ring-opacity-5">
<table class="table-fixed divide-y divide-gray-300">
<thead class="bg-gray-50">
<tr>
<th scope="col" class="w-1/15 py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6 lg:pl-8">ID</th>
<th scope="col" class="w-1/13 px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Date & Time</th>
<th scope="col" class=" px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Error Message</th>
<th scope="col" class=" px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Status Badge</th>
<th scope="col" class=" px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Edit</th>
<th scope="col" class=" relative py-3.5 pl-3 pr-4 sm:pr-6 lg:pr-8">
<span class="sr-only">Edit</span>
</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200 bg-white">
<tr v-for="log in logs" :key="log.APIGROUPNO">
<td class="w-1/15 py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6 lg:pl-8">{{ log.APIGROUPNO }}</td>
<td class=" px-3 py-4 text-sm text-gray-500">{{ log.DATETIMEEXECUTED }}</td>
<!-- <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{{ log.JSONBDY }}</td>-->
<td class="break-all px-3 py-4 text-sm text-gray-500">{{ log.RESPONSE }}</td>
<td class="break-all px-3 py-4 text-sm text-gray-500"><span class="bg-red-100 text-red-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-red-200 dark:text-red-900">Error</span></td>
<td class="relative py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6 lg:pr-8">
<a href="#" class="text-indigo-600 hover:text-indigo-900"
>Edit<span class="sr-only">, {{ log.APIGROUPNO }}</span></a
>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
And here is my Model:
class Log extends Model
{
use HasFactory;
protected $connection = 'gencom';
protected $table = 'GMAPILOG';
protected $primaryKey = 'APIGROUPNO';
public $timestamps = false;
protected $casts = ["Result"=>'array'];
protected $fillable = [
'APIGROUPNO',
'DATETIMEEXECUTED',
'PACKAGENAME',
'TOKEN',
'APINAME',
'PARAMETERLIST',
'JSONBDY',
'RESPONSE'
];
}
The json response i get returned from the db:
RESPONSE: "{\"Result\":[{\"ERRORS\":\"99012: Weborder number already exists : 20211049\"}]}"
So to make a quick summary, i would like the badge color to change according to the code gotten in the message. I have tried it for a while but i cant seem to figure it out as i do struggle a bit with vuex. I hope some could explain me their thought process.
Thanks in advance.
Currently iam working on a dashboard where i have to get stored JSON query's from the database and then select only select the keys i want to use. Iam working with laravel and Vuex.
Currently my controller looks like this.
public function index()
{
//
$log = Log::all();
return (json_encode($log));
}
At the moment this returns the table that i want and I'am able to select the column i want.
This is how my HTML looks
<tr v-for="log in logs" :key="log.APIGROUPNO">
<td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6 lg:pl-8">{{ log.APIGROUPNO }}</td>
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{{ log.DATETIMEEXECUTED }}</td>
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{{ log.JSONBDY }}</td>
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{{ log.RESPONSE }}</td>
<td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6 lg:pr-8">
<a href="#" class="text-indigo-600 hover:text-indigo-900"
>Edit<span class="sr-only">, {{ log.APIGROUPNO }}</span></a
>
</td>
</tr>
The following code gives me this result.
What i would like to get back is the following:
How would i be able to fix this, i have searched far and wide on the internet but cant seem to find a fitting solution. Any help and/or suggestions would be greatly appreciated.
I am trying to update a table with spots. I wanted to do it on click with livewire but nothing worked so I figured it would be easier to just use the methods in the Laravel controller that I already had. The attach and detach are used because I have two tables in my view, one with all the stations and the other one, the one I am trying to update, with the stations that are already in a workbook. With the way I have my method right now I can update everything except for the spot and I am not sure why. It is a many to many relationship between the workbooks and stations and spots are an extra field in the pivot table.
<form action="{{route('admin.workbooks.update', [$client_id, $workbook_id])}}" method="POST" enctype="multipart/form-data">
#csrf
#method('PUT')
<div class="form-group">
<label for="">Media Schedule Name</label>
<input type="text" class="form-control" name="wrkb_name" value="{{$workbook_name}}">
</div>
<table class="table-auto w-full mb-6">
<thead>
<tr>
<th class="px-4 py-2"></th>
#if($showLetter)
<th wire:click="sortBy('call_letter')" style="cursor: pointer;" class="px-4 py-2">Call Letter #include('partials.sort-icon',['field'=>'call_letter'])</th>
#endif
<th style="cursor: pointer;" class="px-4 py-2">Spots #include('partials.sort-icon',['field'=>'spots'])</th>
</tr>
</thead>
<tbody>
#foreach($selected_stations as $key => $selected_station)
<tr>
<td class="border px-4 py-2">
<input name="selected_stations[]" wire:model="selected_already" value="{{ $selected_station->id }}" type="checkbox">
</td>
#if($showLetter)
<td class="border px-4 py-2">{{$selected_station->call_letter}}</td>
#endif
<td class="border px-4 py-2">
<input name="spot" type="text" class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" value="{{$selected_station->pivot->spot}}" placeholder="{{$selected_station->pivot->spot}}"></td>
<td>
</td>
</tr>
#endforeach
</tbody>
</table>
<br>
<table class="table-auto w-full mb-6">
<thead>
<tr>
<th class="px-4 py-2"></th>
#if($showLetter)
<th wire:click="sortBy('call_letter')" style="cursor: pointer;" class="px-4 py-2">Call Letter #include('partials.sort-icon',['field'=>'call_letter'])</th>
#endif
</tr>
</thead>
<tbody>
#foreach($stations as $key => $station)
<tr>
<td class="border px-4 py-2">
<input name="stations[]" wire:model="selected" value="{{ $station->id }}" type="checkbox">
</td>
#if($showLetter)
<td class="border px-4 py-2">{{$station->call_letter}}</td>
#endif
<td>
</td>
</tr>
#endforeach
</tbody>
</table>
#else
<p class="text-center">Whoops! No users were found 🙁</p>
#endif
<div class="w-full flex pb-10" >
<div class="w-1/6 relative mx-1 space-x-6">
<button class="block appearance-none w-full bg-black border border-gray-200 text-white py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500">Edit Media Schedule</button>
</div>
</div>
</form>
public function update(UpdateWorkbookRequest $request,Client $client, Workbook $workbook)
{
$workbook->update($request->only('wrkb_name'));
$workbook->stations()->detach($request->input('selected_stations', []));
$workbook->stations()->attach($request->input('stations', []));
$workbook->stations()->updateExistingPivot('spot', []);
return redirect()->route('admin.workbooks.edit', [$client->id, $workbook->id])->with('success', 'Successfully Edited the Workbook');
}
This is how one of the relationship looks like, although I don't think this helps much
public function workbooks()
{
return $this->belongsToMany(\App\Models\Workbook::class, 'station_workbook', 'station_id', 'workbook_id')->withPivot('spot')->withTimestamps();;
}
I also found that I could use something like this, but I only want to update that specific record and from this code it seems like it updates every instance of that station, no matter what workbook and it doesn't work anyway.
foreach($workbook->stations as $key => $station){
dd($station->workbooks);
$station->workbooks()->updateExistingPivot($key, ['spot' => $request ->spot]);
}
I have also tried this with no success
$usedStations=$request->input('stations', []);
$workbook->update($request->only('wrkb_name'));
$workbook->stations()->detach($request->input('selected_stations', []));
$workbook->stations()->attach($request->input('stations', []));
foreach($usedStations as $usedStation)
{
$station_id = Station::where('id',$usedStation)->value('id');
$workbook->stations()->updateExistingPivot($station_id, ['spot' => $request ->spot]);
}
Quoting from Laravel Doc: (Link)
When attaching a relationship to a model, you may also pass an array
of additional data to be inserted into the intermediate table
So, you can do :
$workbook->stations()->attach($request->input('stations', []),['spot'=>$request->input('spot')]);
UPDATE
Currently, in your code only single value for 'spot' field is being passed to the request. Change it to:
<input name="spot[{{$selected_station->id}}]" type="text" class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" value="{{$selected_station->pivot->spot}}" placeholder="{{$selected_station->pivot->spot}}"></td>
update() method should be:
public function update(UpdateWorkbookRequest $request,Client $client, Workbook $workbook)
{
$workbook->update($request->only('wrkb_name'));
$workbook->stations()->detach($request->input('selected_stations', []));
$workbook->stations()->attach($request->input('stations', []));
//take only the spot values of selected_stations that were unchecked
$spots = array_diff_key($request->input('spot',[]), array_flip($request->input('selected_stations',[])));
foreach($spots as $station_id=>$spot_value){
$workbook->stations()->updateExistingPivot($station_id, ['spot'=>$spot_value]);
}
return redirect()->route('admin.workbooks.edit', [$client->id, $workbook->id])->with('success', 'Successfully Edited the Workbook');
}
This is my code
#if ($story)
<table class="table-auto my-3 w-full">
<thead class="justify-between">
<tr class="bg-gray-800">
<th class="px-16 py-2">
<span class="text-gray-300">#Id</span>
</th>
<th class="px-16 py-2">
<span class="text-gray-300">Name</span>
</th>
<th class="px-16 py-2">
<span class="text-gray-300">Description</span>
</th>
<th class="px-16 py-2">
<span class="text-gray-300">Actions</span>
</th>
</tr>
</thead>
<tbody class="bg-gray-200">
#foreach ($story as $item)
<tr class="bg-white border-4 border-gray-200">
<td class="px-16 py-2 flex flex-row items-center">
{{ $item->id }}
</td>
<td>
{{ Str::words($item->name, 3, $end = '...') }}
</td>
<td class="px-16 py-2">
{!! Str::words($item->description, 6, $end = '...') !!}
</td>
<td class="px-16 py-2">
<a href="{{ route('dashboard.story.edit', $item->id) }}">
<button class="bg-blue-500 text-white px-4 py-1 border rounded-md hover:bg-white hover:border-blue-500 hover:text-black">
Edit
</button>
</a>
</td>
</tr>
#endforeach
</tbody>
</table>
#else
<p>No results found</p>
#endif
This is my controller
public function index()
{
$story = Story::paginate(10);
return view('admin.story.index', ['story' => $story]);
}
I'm using Laravel 8 and I don't want to show table headers when the value is null. Laravel showing tables headers and not showing the 'No results found' message.
Any help would be appreciated.
when you use paginate, your data split. so if you want check this data empty or not just use
#if( $story->total() )
just replace it with
#if ( $story )
I would like to know how to put a list of the last 5 items in the dashboard using backpack?
I made the table
<div class="table-responsive">
<table class="table table-hover m-0 table-actions-bar">
<thead>
<tr>
<th>
<div class="btn-group dropdown">
<button type="button" class="btn btn-light btn-xs dropdown-toggle waves-effect waves-light"
data-toggle="dropdown" aria-expanded="false"><i class="mdi mdi-chevron-down"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
</th>
<th>Titolo Post</th>
<th>Data</th>
<th>Stato</th>
<th>Categria</th>
<th>Azione</th>
</tr>
</thead>
<tbody>
<tr>
<td>
</td>
<td>
<h5 class="m-0 font-weight-medium"></h5>
</td>
<td>
<i class="mdi mdi-map-marker text-primary"></i>
</td>
<td>
<i class="mdi mdi-clock-outline text-success"></i>
</td>
<td>
<i class="mdi mdi-currency-usd text-warning"></i>
</td>
<td>
<i class="mdi mdi-pencil"></i>
<i class="mdi mdi-close"></i>
</td>
</tr>
</tbody>
</table>
</div>
I made the table inside the jumbotron.blade.php then the function that prints you on screen the last 5 posts I put it here? within the dashboard method?
$recentPost : Article::orderBy('id', 'desc')>limit(5)->get()
any other solution?
This line will get you the last 5 articles.
$articles = Article::orderBy('id', 'desc')->limit(5)->get();
You need to pass it to the view. Ex:
return view('dashboard', ['articles' => $articles]);
And loop the articles on the blade file table. Ex:
<table class="table">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Title</th>
<th scope="col">Author</th>
<th scope="col">Date</th>
</tr>
</thead>
<tbody>
#foreach($articles as $article)
<tr>
<th scope="row">{{ $article->id }}</th>
<td>{{ $article->title }}</td>
<td>{{ $article->author }}</td>
<td>{{ $article->created_at }}</td>
</tr>
#endforeach
</tbody>
</table>