app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { staffComponent } from './staff/staff.component';
import { staffService } from "./services/staff.service";
import { AddstaffComponent } from './addstaff/addstaff.component';
import { EditstaffComponent } from './editstaff/editstaff.component';
@NgModule({
declarations: [
AppComponent,
staffComponent,
AddstaffComponent,
EditstaffComponent,
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
RouterModule.forRoot([
{ path: "staff", component: staffComponent },
{ path: "add_staff", component: AddstaffComponent },
{ path: "edit_staff/:id", component: EditstaffComponent }]
)
],
providers: [staffService],
bootstrap: [AppComponent]
})
export class AppModule { }
staff.service.ts
import { Inject, Injectable } from '@angular/core';
import { Http } from '@angular/http';
@Injectable()
export class staffService{
private staff: Array<any>
constructor(private http:Http){
}
getStaff(){
return this.http.get('http://127.0.0.1:8000/api/get_staff').map(data=>{
return data.json();
})
}
getStaffbyId(id){
return this.http.get('http://127.0.0.1:8000/api/get_staffbyid?id='+id).map(data=>{
return data.json();
})
}
registerData(payLoad){
return this.http.post('http://127.0.0.1:8000/api/add_staff',payLoad).map(data=>{
return data.json();
})
}
updateData(id){
return this.http.post('http://127.0.0.1:8000/api/staff_update',id).map(data=>{
return data.json();
})
}
staff.component.ts
import { Component } from '@angular/core';
import { staffService } from '../services/staff.service';
import { NgIf } from '@angular/common';
@Component({
selector:'<staff-list></staff-list>',
templateUrl:'./staff.component.html'
})
export class staffComponent {
private staff: any[];
ngOnInit() {
}
constructor(private staffSvc:staffService){
this.getStaff();
}
getStaff(){
return this.staffSvc.getStaff()
.subscribe(result=>{
this.staff=result.staff;
})
}
}
staff.component.html
<table class="table table-hover">
<thead>
<th>Id</th>
<th>Title</th>
<th>Arabic Title</th>
<th>Status</th>
<th>Action</th>
<th class="btn btn-primary"><a routerLink="/add_staff">Add</a></th>
</thead>
<tbody>
<tr *ngFor="let s of staff">
<td>{{s.id}}</td>
<td>{{s.title}}</td>
<td>{{s.ar_title}}</td>
<td *ngIf="s.status==1">Active</td>
<td *ngIf="s.status!=1">DeActive</td>
<td>
<a routerLink="/edit_staff/{{s.id}}" class="btn btn-primary">Edit</a>
</td>
</tr>
</tbody>
</table>
addstaff.component.ts:
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { staffService } from '../services/staff.service';
@Component({
selector: 'app-addstaff',
templateUrl: './addstaff.component.html',
styleUrls: ['./addstaff.component.css']
})
export class AddstaffComponent implements OnInit {
private staff: any ={
"first_name":'',
"last_name":'',
"ar_first_name":'',
"ar_last_name":''
}
private staffList : any = [];
constructor( private router: Router,private staffSvc:staffService) {
}
ngOnInit() {
}
registerData(){
console.log(this.staff);
this.staffSvc.registerData(this.staff).subscribe(result=>{
console.log(result);
}
)
}
}
addstaff.component.html
<div class="form-horizontal">
<div class="close"> </div>
<div class="head">
</div>
<div class="head-info">
<h1>Add Staff</h1>
</div>
<div class="form-group">
<label class="control-label col-sm-2" >First Name:</label>
<div class="col-sm-4">
<input type="text" class="form-control" [(ngModel)]="staff.first_name" placeholder="Enter First Name">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" >First Name(Arabic):</label>
<div class="col-sm-4">
<input type="text" class="form-control" [(ngModel)]="staff.ar_first_name" placeholder="Enter First Name in Arabic">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" >Last Name:</label>
<div class="col-sm-4">
<input type="text" class="form-control" [(ngModel)]="staff.last_name" placeholder="Enter Last Name">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" >Last Name(Arabic):</label>
<div class="col-sm-4">
<input type="text" class="form-control" [(ngModel)]="staff.ar_last_name" placeholder="Enter Last Name in Arabic">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-4">
<button class="btn btn-primary" (click)="registerData()">Add</button>
</div>
<div class="col-sm-offset-2 col-sm-4">
<button class="btn btn-primary">Back</button>
</div>
</div>
</div>
editstaff.component.ts
import { Component, OnInit } from '@angular/core';
import {ActivatedRoute, Router , Params } from '@angular/router';
import { staffService } from '../services/staff.service';
import { Http } from '@angular/http';
@Component({
selector: 'app-editstaff',
templateUrl: './editstaff.component.html',
styleUrls: ['./editstaff.component.css']
})
export class EditstaffComponent implements OnInit {
private staff:any = {
"first_name":'',
"last_name":'',
"ar_first_name":'',
"ar_last_name":''
}
private StaffList:any ={}
private Params:any={};
constructor(private activatedRoute: ActivatedRoute,private staffSvc:staffService) {
let params: any = this.activatedRoute.snapshot.params;
this.Params = params.id;
this.getstaffbyId();
}
ngOnInit() {
}
getstaffbyId(){
return this.staffSvc.getStaffbyId(this.Params).subscribe(result=>{
this.staff=result.staff;
})
}
updateData(){
return this.staffSvc.updateData(this.staff).subscribe(result=>{
this.staff=result.staff;
})
}
}
editstaff.component.html
<div class="form-horizontal">
<div class="close"> </div>
<div class="head">
</div>
<div class="head-info">
<h1>Add Staff</h1>
</div>
<div class="form-group">
<label class="control-label col-sm-2" >First Name:</label>
<div class="col-sm-4">
<input type="text" class="form-control" [(ngModel)]="staff.first_name" placeholder="Enter First Name">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" >First Name(Arabic):</label>
<div class="col-sm-4">
<input type="text" class="form-control" [(ngModel)]="staff.ar_first_name" placeholder="Enter First Name in Arabic">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" >Last Name:</label>
<div class="col-sm-4">
<input type="text" class="form-control" [(ngModel)]="staff.last_name" placeholder="Enter Last Name">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" >Last Name(Arabic):</label>
<div class="col-sm-4">
<input type="text" class="form-control" [(ngModel)]="staff.ar_last_name" placeholder="Enter Last Name in Arabic">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-4">
<button class="btn btn-primary" (click)="updateData()">Update</button>
</div>
</div>
</div>
04:53
Share:
0 comments: