Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
//http://www.siraj360.com/ng2/ :: A single page application developed with Angular 2 (beta) and Bootstrap 4 (alpha).
<div class="card" >
<div class="card-header card-primary" [class.card-danger]="employee.isAllPending"
[class.card-success]="employee.isAllCompleted"
style="color:#ffffff !important;">
<a *ngIf="!employee.isShowCourses" (click)="employee.isShowCourses = !employee.isShowCourses"
class="btn btn-sm btn-secondary">
<i class="fa fa-chevron-up"></i>
</a>
<a *ngIf="employee.isShowCourses" (click)="employee.isShowCourses = !employee.isShowCourses"
class="btn btn-sm btn-secondary">
<i class="fa fa-chevron-down"></i>
</a>
&nbsp;
<span class="fa fa-user"></span> &nbsp;
<b>{{employee.Name}}</b>&nbsp;
<span class="hidden-sm-down">
<small> {{employee.HireDate}}</small>
</span>
<div class="pull-right">
<!--{{(employee.EmployeeCourses | filter:"{isComplete: true}").length}} /-->
<span class="label label-warning label-pill">
{{srNo + 1}} <!--{{employee.EmployeeCourses.length}}-->
</span> &nbsp;
<button (click)="employee.isToDelete = !employee.isToDelete" class="btn btn-sm btn-secondary">
<span class="fa fa-remove "></span>
</button>
</div>
</div>
<!-- Table -->
<div *ngIf="employee.isShowCourses" class="table-responsive" styel="width=100%">
<div *ngIf="employee.isToDelete" class="card-block card-inverse card-warning text-xs-center" role="alert">
<button type="button" (click)="employee.isToDelete = !employee.isToDelete"
class="close"><span aria-hidden="true">&times;</span></button>
<span class="fa fa-exclamation-triangle fa-2x text-danger"></span> &nbsp;
<strong>Warning:</strong>&nbsp;&nbsp;Are you sure to delete the employee - <b>{{employee.Name}}</b>
&nbsp;&nbsp;<button (click)="remove()" class="btn btn-sm btn-danger">
<strong> <span class="fa fa-check ">&nbsp;Yes</span></strong>
</button>
&nbsp;&nbsp;<button ng-click="employee.isToDelete = !employee.isToDelete" class="btn btn-sm btn-success">
<strong><span class="fa fa-remove ">&nbsp;No</span></strong>
</button>
</div>
<!--| orderBy:employee.order:employee.reverse" ng-class="Course.isComplete | courserowclass-->
<div class="table-responsive">
<table class="table table-hover table-sm ">
<thead>
<tr class="table-inverse">
<th align="center" class="hidden-xs-down">
</th>
<th class="text-xs-center">Status</th>
<th class="text-xs-center">Course Code</th>
<th class="text-xs-center hidden-sm-down">Course Name</th>
<th class="text-xs-center">Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="#Course of employee.EmployeeCourses; #idx = index"
[class.table-danger]="!Course.isComplete"
[class.table-success]="Course.isComplete"
>
<td align="center" class="hidden-xs-down">
<span class="label label-warning label-pill">
{{idx + 1}}
</span>
</td>
<td align="center">
<i *ngIf="Course.isComplete" class="fa fa-check"></i>
<i *ngIf="!Course.isComplete" class="fa fa-remove"></i>
</td>
<td align="center">
<b>
{{Course.Code}}
</b>
</td>
<td class="hidden-sm-down">
{{Course.Name}}
</td>
<td class="table-inverse text-xs-center">
<button *ngIf="Course.isComplete" (click)="changeComplete(Course)" class="btn btn-sm btn-warning-outline"><span class="hidden-sm-down">mark </span>pending&nbsp;&nbsp;</button>
<button *ngIf="!Course.isComplete" (click)="changeComplete(Course)" class="btn btn-sm btn-success-outline"><span class="hidden-sm-down">mark </span>complete</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment