from 2 modals, open one modal base on if else condition - laravel

I have 2 modals (Modal1 & Modal2), in table after clicked on action button "edit" base on data, i need to open any one modal.
Say if age is less than 36 months then Modal 1 Else Modal 2 should open. Both modals have few data common and few are added newly.
This is my table code
<table id="cowcalfsummery" class="table table-bordered table-hover table" style="width:100%">
<thead>
<tr>
<th>ID</th>
<th>Breed Type</th>
<th>Gender</th>
<th>Birth Date</th>
<th>Weight (Kg)</th>
<th>Age (in Months)</th>
<th>Maturity Date</th>
<th>Health Status</th>
<th>Action</th>
</tr>
<tbody>
#foreach ($cowcalfdata as $item )
<tr id="item{{$item->id}}">
<td>{{$item->calfID}}</td>
<td>{{$item->breedtype}}</td>
<td>{{$item->gendertype}}</td>
<td>{{ date('d-m-Y', strtotime ($item->birthdate) ) }}</td>
<td>{{$item->weight}}</td>
<td>{{$item->age}}</td>
<td>{{ date('d-m-Y', strtotime ($item->maturitydate) ) }}</td>
<td>{{$item->health}}</td>
<td>
<i class="fas fa-eye" title="View"></i>
**<button type="button"** class="editcowcalfmodal btn btn-success" data-info="{{$item->id}},{{$item->calfID}},{{$item->birthdate}},{{$item->age}},{{$item->breedtype}},{{$item->gendertype}},{{$item->health}},{{$item->status}},{{$item->color}},{{$item->weight}},{{$item->height}},{{$item->previousvaccinedone}},{{$item->maturitydate}}" data-toggle="modal" data-target="#editcowcalfmodal"><i class="far fa-edit" title="Edit"></i></button>
<button type="button" class="btn btn-danger deletecowcalfdatabtn" data-cowcalfid="{{$item->calfID}}"><i class="fas fa-trash" title="Delete"></i></button>
</td>
</tr>
#endforeach
</tbody>
</thead>
</table>
Thanks in Advance.

You want to create a blade If statement and check if $item->age is below 36.
if it is you want to show the first button, else show the second button with a different data-target to your second modal.
#if($item->age < 36)
<button type="button"
class="editcowcalfmodal btn btn-success"
data-info="
{{$item->id}},
{{$item->calfID}},
{{$item->birthdate}},
{{$item->age}},
{{$item->breedtype}},
{{$item->gendertype}},
{{$item->health}},
{{$item->status}},
{{$item->color}},
{{$item->weight}},
{{$item->height}},
{{$item->previousvaccinedone}},
{{$item->maturitydate}}"
data-toggle="modal"
data-target="#editcowcalfmodal">
<i class="far fa-edit" title="Edit"></i>
</button>
#else
<button type="button"
class="editcowcalfmodal btn btn-success"
data-info="
{{$item->id}},
{{$item->calfID}},
{{$item->birthdate}},
{{$item->age}},
{{$item->breedtype}},
{{$item->gendertype}},
{{$item->health}},
{{$item->status}},
{{$item->color}},
{{$item->weight}},
{{$item->height}},
{{$item->previousvaccinedone}},
{{$item->maturitydate}}"
data-toggle="modal"
data-target="#MySecondModal">
<i class="far fa-edit" title="Edit"></i>
</button>
#endif
You also have your table wrong.
You first want to create a <thead> (table header). fill it with table titles, close the <thead> and after that you create the <tbody> (table body) with the content of the item.
This should create a structure like this:
<table>
<thead>
<tr>
<th>Age</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>12</td>
<td>Cow 1</td>
</tr>
</tbody>
</table>
More information about tables and how to use them

Related

print the last 5 articles in the dashboard

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>

How to create a template view table tag without repeating table tags on every file

I'm developing a system which has many tables so I have to repeat the writing of table tags on all the files which display a table
Here is what I'm doing on every file which have to display table
On Countries table:
<table class="table table-striped table-hover table-sm" id="table">
<thead class="text-uppercase text-center bg-primary">
<tr class="text-white">
<th scope="col">Name</th>
<th scope="col">Slug</th>
<th scope="col">Population</th>
<th scope="col">Region</th>
<th scope="col">Cities</th>
<th scope="col">Descriptions</th>
<th scope="col" >Actions</th>
</tr>
{{ csrf_field() }}
</thead>
<tbody>
#foreach ($countries as $country)
<tr>
<td class="text-left">{{$country->name}}</td>
<td class="text-center">{{$country->slug}}</td>
<td class="text-right">{{$country->population}}</td>
<td class="text-center">{{$country->region->name}}</td>
<td class="text-center">{{$country->city_count}}</td>
<td class="text-left">{{$country->desc}}</td>
<td class="text-center">
<div class="btn-group">
#can('country-update')
<a class="btn btn-primary btn-sm mr-2" href="{{route('location.countries.edit',$country)}}" title="Edit"><i class="fa fa-edit"></i></a>
#endcan
#can('country-delete')
<form class="form-delete" method="post" action="{{route('location.countries.destroy',$country)}}">
#method('DELETE')
#csrf
<button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('Are you sure?')"><i class="fa fa-trash-alt"></i></button>
</form>
#endcan
</div>
</td>
</tr>
#endforeach
</tbody>
</table>
then on the cities I'll do the same but with different table head names and table data
<table class="table table-striped table-hover table-sm" id="table">
<thead class="text-uppercase text-center bg-primary">
<tr class="text-white">
<th scope="col">Name</th>
<th scope="col">Slug</th>
<th scope="col">Country</th>
<th scope="col">Descriptions</th>
<th scope="col" >Actions</th>
</tr>
{{ csrf_field() }}
</thead>
<tbody>
#foreach ($cities as $city)
<tr>
<td class="text-left">{{$city->name}}</td>
<td>{{$city->slug}}</td>
<td class="text-center">{{$city->country->name}}</td>
<td class="text-left">{{$city->desc}}</td>
<td class="text-center">
<div class="btn-group">
#can('city-update')
<a class="btn btn-primary btn-sm mr-3" href="{{route('location.cities.edit',$city)}}" title="Edit"><i class="fa fa-edit"></i></a>
#endcan
#can('city-delete')
<form class="form-delete" method="post" action="{{route('location.cities.destroy',$city)}}">
#method('DELETE')
#csrf
<button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('Are you sure?')" title="delete"><i class="fa fa-trash-alt"></i></button>
</form>
#endcan
</div>
</td>
</tr>
#endforeach
</tbody>
</table>
but I wat to have a template where I'll only populate table head rows and table body something like this
<div class="table-responsive">
<table class="table table-striped table-hover table-sm" id="table">
<thead class="text-uppercase text-center">
<tr>
//Dynamic table heads
#if(!is_null($rows))
#foreach($rows as $row)
{{$row}}
#endforeach
#endif
</tr>
</thead>
<body>
//Dynamic table body
#if(!is_null($datas))
#foreach($datas as $data)
{{$data}}
#endforeach
#endif
</tbody>
</table>
<!-- end table -->
</div>
What is the best way to accomplish this
You can use Blade component for that. One of approaches in Laravel 7 is to use Blade class component. Link to official Blade components docs: https://laravel.com/docs/7.x/blade#components
You can create a generic table component using artisan command:
php artisan make:component Table
Component class
Your component could look like that:
<?php
namespace App\View\Components;
use Illuminate\View\Component;
class Table extends Component
{
/**
* Array of table heading strings
*
* #var array
*/
public $headings;
/**
* Table rows
*
* #var array
*/
public $rows;
/**
* Create the component instance.
*
* #param string $type
* #param string $message
* #return void
*/
public function __construct($headings, $rows)
{
$this->headings = $headings;
$this->rows = $rows;
}
/**
* Get the view / contents that represent the component.
*
* #return \Illuminate\View\View|string
*/
public function render()
{
return view('components.table');
}
}
Component view
Now when you have component class, you have to prepare the component view. You will found it in /resources/views/components/table.blade.php.
<div class="table-responsive">
<table class="table table-striped table-hover table-sm" id="table">
//Dynamic table heads
#if($headings)
<thead class="text-uppercase text-center">
<tr>
#if($rows))
#foreach($rows as $row)
<th>{{$row}}</th>
#endforeach
#endif
</tr>
</thead>
#endif
<tbody>
//Dynamic table body
#foreach($rows as $row)
<tr>
// Render each item from row
#foreach($row as $item)
<td>{{$item}}</td>
#endforeach
</tr>
#endif
</tbody>
</table>
<!-- end table -->
</div>
Now you can use your component in your views:
<x-table :headings="['foo', 'bar']"
:data="[['foo1', 'bar1'], ['foo2', 'bar2']]" class="mt-4"/>

Angular 5 - get list after sort header

I use Angular 5, Angular Material and Angular DataTable.
I have following table
HTML file :
<div class="material-datatables table-responsive">
<table id="example" datatable [dtOptions]="dtOptions" class="table table-striped table-no-bordered table-hover" cellspacing="0" width="100%" style="width:100%">
<thead>
<tr>
<th><mat-checkbox (change)="$event ? masterToggle(dataTable.dataRows) : null"
[checked]="selection.hasValue() && isAllSelected(dataTable.dataRows.length)"
[indeterminate]="selection.hasValue() && !isAllSelected(dataTable.dataRows.length)">
</mat-checkbox></th>
<th>{{ dataTable.headerRow[1] }}</th>
<th>{{ dataTable.headerRow[2] }}</th>
<th class="disabled-sorting text-right">Action</th>
</tr>
</thead>
<tfoot>
<tr>
<th>{{ dataTable.footerRow[0] }}</th>
<th>{{ dataTable.footerRow[1] }}</th>
<th>{{ dataTable.footerRow[2] }}</th>
<th class="text-right">Action</th>
</tr>
</tfoot>
<tbody>
<tr *ngFor="let row of dataTable.dataRows">
<td><mat-checkbox (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null"
[checked]="selection.isSelected(row)">
</mat-checkbox>
</td>
<td>{{row[0]}}</td>
<td>{{row[1]}}</td>
<td class="text-right">
<button (click)="openIndex(row)" class="btn btn-simple btn-info btn-icon" matTooltip="Indexer" [matTooltipPosition]="'left'">
<i class="material-icons">assignment</i>
</button>
<button (click)="onSubmitDel(row)" class="btn btn-simple btn-danger btn-icon" matTooltip="Supprimer" [matTooltipPosition]="'right'">
<i class="material-icons">delete</i>
</button>
</td>
</tr>
</tbody>
</table>
The different sorts work nice. The list is sorted on the screen.
I add function (button) that pass the list to another component. The problem is when I sort the list and I click on button, the list is not sorted for this other component.
How can I retrieve the sorted list ?
* **EDIT: this is image to show the case :
Initial list with new button :
After sorting:
This is solution : use dt.buttons.exportData().body
in dtOptions : add the following lines:
buttons: [
'print',
'pdf',
'excel',
{
text: 'Sélection',
className: 'btn btn-success',
action: function (e, dt, node, config) {
console.log(dt.buttons.exportData().body);
}
}
]
It keeps filters and sorts you use

Thymeleaf- Create dynamic id for table row

I am new to Thymeleaf and I am trying to create id for tr and getting dynamic rows.
Successfully getting table rows but I don't know hot to create id for each row in Thymeleaf.
<table class="table table-hover" id="table">
<thead style="background-color:#CCE5FF">
<tr>
<th>ID</th>
<th>Code</th>
<th>Created Date</th>
<th></th>
</tr>
</thead>
<tbody>
<tr th:each="emp,iterStat : ${empList}">
<td th:text="${emp.id}">ID</td>
<td th:text="${emp.mdrcode}">Code</td>
<td th:text="${emp.createDate}">Created Date</td>
<td>
<a id="editview" class="btn btn-sm btn-default" th:href="#{/}"><i class="fa fa-edit"></i> View</a>
</td>
</tr>
</tbody>
</table>
You can use th:id for that.
<!-- this would assign the emp.id to the id attribute of the tr.
<tr th:id="${emp.id}" th:each="emp,iterStat : ${empList}">
<td th:text="${emp.id}">ID</td>
<td th:text="${emp.mdrcode}">Code</td>
<td th:text="${emp.createDate}">Created Date</td>
<td><a id="editview" class="btn btn-sm btn-default" th:href="#{/}"><i class="fa fa-edit"></i> View</a></td>
</tr>
We can also add some text to the id:
<!-- this would assign someText + emp.id to the id attribute of the tr.
<tr th:id="'someText' + ${emp.id}" th:each="emp,iterStat : ${empList}">
<td th:text="${emp.id}">ID</td>
<td th:text="${emp.mdrcode}">Code</td>
<td th:text="${emp.createDate}">Created Date</td>
<td><a id="editview" class="btn btn-sm btn-default" th:href="#{/}"><i class="fa fa-edit"></i> View</a></td>
</tr>

pagination in laravel 5.3 when count of pages = 1

I have cities table and it has 7 cities I have a view page to display these cities with 10 cities per page
Controller:
$cities = City::orderBy('id', 'desc')->paginate(10);
return view('cities.home', compact('cities'));
View:
<div class="table-responsive panel panel-sky">
<table class="table table-striped table-hover">
<tr>
<th>#</th>
<th>Name</th>
<th>Created At</th>
<th>Action</th>
</tr>
#foreach($cities as $city)
<tr id="product{{$city->id}}">
<td>{{$city->id}}</td>
<td>{{$city->name}}</td>
<td>{{ $city->created_at }}</td>
<td>
<i class="glyphicon glyphicon-edit action-icon"></i>
<a type="button" class="pointer" data-toggle="modal" data-target="#deleteModal" data-type="btn-danger" data-action="delete-product" data-id="{{ $city->id }}" data-msg="Are you sure you want to delete this city?" data-title="Confirm Deletion">
<span class='glyphicon glyphicon-remove action-icon'></span>
</a>
</td>
</tr>
#endforeach
</table>
<div>
<div class="col-md-12"><?php echo $cities->render(); ?> </div>
but the issue is the paginate render is displayed with page#1, this issue occurred in laravel5.3 and did not find in laravel5.2
If you want to render pagination in your own way, you can use paginator methods. For example, to check if there is just one page, you could try:
#if ($cities->total() > 10)
// Render pagination
#endif

Resources