i'm new in angular2 + typescript. And i need realize confirmation modal by click on button in table
This is table
<div style="margin-top: 10px">
<table id="recruitersTable" class="table table-striped center" [ngBusy]="data">
<tr>
<th>{{ 'RECRUITER_NAME_AND_SURNANE_COLUMN' | translate }}</th>
<th>{{ 'RECRUITER_CODE_COLUMN' | translate }}</th>
<th>{{ 'RECRUITER_ACTION_DOLUMN' | translate}}</th>
<th></th>
</tr>
<tr *ngFor="let recruiter of recruiters">
<td>{{ recruiter.Name }}</td>
<td>{{ recruiter.Code }}</td>
<td>
<a class="btn btn-xs btn-default" data-target="#confirm" role="button" data-toggle="modal">
<span class="glyphicon glyphicon-ban-circle"></span>
</a>
</td>
<td></td>
</tr>
</table>
</div>
This is confirmation modal
<div id="confirm" class="modal fade in" aria-labelledby="modallabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove"></span></button>
<h3 id="modalLabael">Block recruiter</h3>
</div>
<div class="modal-body">
<h3 id="modalLabael">Are you sure that you want block this recruiter?</h3>
</div>
<div class="modal-footer">
<button class="btn btn-danger" data-dismiss="modal" aria-hidden="true">Cancel</button>
<button class="btn btn-success" (click)="BlockRecruiter(recruiter.code)">Block</button>
</div>
</div>
</div>
And i need implement function by click 'success' on confirm modal, but data in another div. Can someone explain me?
You could either use EventEmitter if your modal component is contained in the parent component - Check here --> https://angular.io/docs/ts/latest/api/core/index/EventEmitter-class.html
Or you could use a service that returns a subject as an observable. The parent component can subscribe to the observable while the modal alerts the service on confirmation. Check how the alert.service has been written and used here --> Angular 2: Displaying icons in navbar on authentication
Related
I tried to show added product details after i clicked shopping cart icon or if i added any one product same like https://designmodo.com/shopping-cart-ui/. Initially no need to show the" Your Cart Items" added product box.I do not know how to do like that.If any one know please help to find the solutions.
addtocart-dir.ts:
<div class="card text-center">
<div class="card-header">
Your Cart Items
<button type="button" class="btn btn-sm btn-warning float-right">
Total items <span class="badge badge-light">{{cart.cartItemsList.length}}</span>
</button>
<button type="button" class="btn btn-sm btn-danger mr-2 float-right" (click)="emptyCart()" *ngIf="cart.cartItemsList && cart.cartTotal">
Empty Cart
</button>
</div>
<div class="card-body">
<table class="table">
<thead>
<tr>
<th scope="col">Product</th>
<th scope="col">Price</th>
<th scope="col">Qty</th>
<th scope="col">Total</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
<tr *ngFor="let itm of cart.cartItemsList ">
<td class="text-left">{{itm.name}}</td>
<td>{{itm.price/itm.qty}} x</td>
<td class="w30">
<div class="input-group input-group-sm mb-3">
<div class="input-group-prepend">
<button class="btn btn-info" type="button" (click)="changeQty(itm.pid,1,'')">+</button>
</div>
<input type="text" class="form-control text-center" value="{{itm.qty}}" #qtyRef (keyup)="changeQty(itm.pid,qtyRef.value,'replace')" >
<div class="input-group-append">
<button class="btn btn-danger" type="button" (click)="changeQty(itm.pid,-1,'')">-</button>
</div>
</div>
</td>
<td>{{itm.price}}</td>
</tr>
</tbody>
</table>
<a routerLink = "/billing" class="btn btn-sm btn-primary" *ngIf="cart.cartItemsList && cart.cartTotal">Checkout</a>
</div>
<div class="card-footer text-muted font-weight-bold">
Total : Rs. {{cart.cartTotal}}
</div>
</div>
Demo: https://stackblitz.com/edit/angular-selvam-ecommerce-task-btjqde?file=src%2Fapp%2Fdirectives%2Faddtocart.dir.ts
Change in cart.service.ts
public cartItemsList: any = [];
change in products.pages.ts
<div class="row">
<div [ngClass]="cart.cartItemsList.length == 0 ? 'col-md-12' : 'col-md-7'">
<productslist-dir (refresh)="ref($event)" [allProductList]="products.data [searchedText]="searchText" [sortingBy]="sortOption"></productslist-dir>
</div>
<div class="col-md-5" *ngIf="cart.cartItemsList.length > 0">
<cart></cart>
</div>
change in productslist.dir.ts
ngOnInit(){
this.sortByOption = 'product_name';
this.cart.allItems = this.__allprdts;
this.cart.storeItems();
}
addToCart(productId,productQty){
this.cart.addToCart(productId,productQty,'');
this.refresh.emit(true);
}
please check and let me know..
I have made a website where you can make a report, you have to submit a form with your account, and then a admin can handle that report, so the user can log in and see the reports and the status of it, but I want that the user can only see his own reports and not others?
Here is my html
#extends('layouts.app')
#section('content')
<div class="container">
<div class="mTop">
<div class="row justify-content-center">
<div class="col-md-8">
#if(session('message'))
<div class="alert alert-success" role="alert">
{{session('message')}}
</div>
#endif
<div class="card">
<div class="card-header">Retourmeldingen</div>
<div class="card-body">
<table class="table table-hover">
<thead>
<tr>
<th scope="col">Firmanaam</th>
<th scope="col"></th>
<th scope="col"></th>
<th scope="col">Status</th>
<th scope="col">Verwerkingstijd</th>
<th scope="col"></th>
</tr>
</thead>
#foreach($retours as $retour)
<tbody>
<tr>
<th scope="row">{{ $retour->firmaname }}</th>
<td><a href="{{ route('return.show', $retour->id) }}">
<button type="button" class="btn btn-secondary btn-sm m-0">Bekijk
</button>
</a></td>
<td>#if( $retour->status === 0)
<a href="{{ route('return.edit', $retour->id) }}">
<button type="button" class="btn btn-secondary btn-sm m-0">Wijzig
</button>
</a>
#else
<a href="{{ route('return.edit', $retour->id) }}">
<button type="button" class="btn btn-secondary btn-sm m-0" disabled>
Wijzig
</button>
</a>
#endif
</td>
<td>#if( $retour->status === 0)
Open
#else
<i style="color: #05af00; font-size: 25px"
class="fa fa-check-circle"></i>
#endif</td>
<td>
#if($retour->status === 0)
Nog niet verwerkt
#elseif($retour->diffInDays === 0)
Zelfde dag verwerkt
#elseif( $retour->diffInDays === 1)
{{ $retour->diffInDays }} dag
#elseif( $retour->diffInDays >= 1)
{{ $retour->diffInDays }} dagen
#endif
</td>
<td>
<form method="post"
action="{{ route('return.destroy', $retour->id) }}">
#csrf
#method('DELETE')
<button type="submit" class="btn btn-danger btn-sm m-0"><i
class="fa fa-trash" aria-hidden="true"></i>
</button>
</form>
</td>
</tr>
</tbody>
#endforeach
</table>
</div>
</div>
<div class="mt-3">{{ $retours->links() }}</div>
</div>
</div>
</div>
</div>
#endsection
So what I want is that the user can see only his own reports based on the firmaname, what I have now is that you can see all the reports
in my opinion you should apply filters at controller level, returning to view only collection of reports owns by the consultant user.
That should be accomplished by user_id field in reports table in case that any report belongs to a unique user, or a pivot table in case that a report can have many owners.
So, if a report only belongs to a unique user, you should filter in your sql query by a WHERE statement such as:
$reports = Reports::where('user_id', $auth->user()->id)->where('other conditions')->get();
And then, in your view yo will have only reports that belongs to current user, which also solves a security issue.
this is the html file, I want to get the id of the particular student click on and delete the student using the popup modal
<div style="margin-top: 50px;">
<table datatable="ng" class="row-border hover" [dtOptions]="dtOptions" [dtTrigger]="dtTrigger">
<thead>
<tr>
<th>S/N</th>
<th>Full Name</th>
<th>Class</th>
<th>Sex</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let student of students; let i = index">
<td>{{i+1}}</td>
<td><a [routerLink]="['/view-student', student.id]" >{{student.lastName + ' ' + student.firstName}}</a></td>
<td>{{student.grade.name}}</td>
<td>{{student.sex.name}}</td>
<td><a [routerLink]="['/edit-student', student.id]" class="btn btn-primary" >Edit</a></td>
<td><a data-toggle="modal" data-target="#myModal" class="btn btn-danger">Delete</a></td>
</tr>
</tbody>
</table>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Warning</h4>
</div>
<div class="modal-body">
Are you sure you want to delete..
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
<button type="button" (click)="" data-dismiss="modal" class="btn btn-primary">Yes</button>
</div>
</div>
</div>
</div>
this is the delete function I have in the component to use for deleting the student I click on. thank you for your help in advance
delete(id){
this.studentService.delete(id).subscribe(() => {
this.students.splice(id, 1);
this.loadAllStudents();
});}
Simply save a current student id in component property.
html(table):
...
<td><a (click)="setId(student.id)" data-toggle="modal" data-target="#myModal" class="btn btn-danger">Delete</a></td>
...
ts:
public id = ''
setId(id) {
this.id = id
}
html(modal):
...
<button type="button" (click)="delete(id)" data-dismiss="modal" class="btn btn-primary">Yes</button>
...
I have a table with button. What I need is when I click on the button in the table , a modal diplay with its value.
My problem is how to pass the table's value to the modal. Can any one help me, here is the code
<div style="margin-top: 50px" class="col-md-12">
<div class="card">
<div class="card-block">
<div class="horizontal-scroll">
<table class="table table-condensed">
<thead>
<tr>
<th>Titre</th>
<th>Description</th>
<th>Durée (jours)</th>
<th>Coût (TalanCoin)</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of formations">
<td>{{ item[1] }}</td>
<td style="margin-left: 4cm;">
<button type="button" class="btn btn-info btn-icon" (click)="smModal.show()"><i class="ion-information"></i></button>
</td>
<td>{{ item[3] }}</td>
<td>{{ item[4] }}</td>
<td >
<button class="btn btn-success" (click)="clicked(item[4],lgModal)">Participer</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- Small modal -->
<div bsModal #smModal="bs-modal" class="modal fade" tabindex="-1"
role="dialog" aria-labelledby="mySmallModalLabel" aria-
hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button class="close" aria-label="Close"
(click)="smModal.hide()">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Description</h4>
</div>
<div class="modal-body" style="color: black;">
<!--here I want to display the value selected from the table-->
</div>
<div class="modal-footer">
<button class="btn btn-primary confirm-btn"
(click)="smModal.hide()">Save changes</button>
</div>
</div>
You could make a function in your component which opens the modal like this:
...
export class AppComponent {
#ViewChild('smModal') smModal;
currentItem;
...
openModal(item: any) {
this.currentItem = item;
this.smModal.show();
}
}
Then instead of smModal.show() you can call openModal(item). In the modal, you can then access {{ currentItem }} the same way you access item in the table.
I got a table which repeats a delete button for each and every member. The confirmation button does work when I don't use the modal, however if i use the Modal, the first row only gets deleted.
As I researched, it could be that since the delete is getting repeated, its value stays for the first row.
Table HTML Code:
<table class="table table-bordered" id="customForms" ng-show="showMembers">
<thead><tr> <th> ID </th> <th>Name</th> <th>Surname</th> <th>Date Of Affiliation</th> <th>Status</th> <th>Email</th> <th>Summary</th></tr></thead>
<tbody>
<tr ng-repeat="member in members">
<td>{{member.memberID}}</td>
<td>{{member.name}}</td>
<td>{{member.surname}}</td>
<td>{{member.dateOfAffiliation}}</td>
<td>{{member.status}}</td>
<td>{{member.email}}</td>
<td>{{member.summary}}</td>
<td><button class="btn btn-primary" data-toggle="modal" data-target="#myModal"> DELETE </button>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Delete Confirmation</h4>
</div>
<div class="modal-body">
Are you sure you wish to delete this row?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" ng-click="deleteMember(member)" data-dismiss="modal">Delete</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
AngularJS Code:
$scope.deleteMember = function(member) {
$http.post('model/deleteMember.php', member).success(function(data) {
$scope.getMember();
});
}