coderkan

{
      "id": "b16ecd2b-596e-4453-a05c-fe10d6f1a4c2",
      "full_name": "Bard Corkan",
      "unit": "IT",
      "emp_avatar": "https://robohash.org/reprehenderitatquelaboriosam.jpg?size=36x36&set=set1"
}

coderkan

    private _employeeJsonPath = "assets/employes.json";
    
    const { url, method } = req;
    if (url.endsWith("/employes") && method === "GET") {
      req = req.clone({
        url: this._employeeJsonPath,
      });
      return next.handle(req).pipe(delay(500));
    }

coderkan

if (url.endsWith("/employes") && method === "POST") {
      const { body } = req.clone();
      // assign a new uuid to new employee
      body.id = uuidv4();
      return of(new HttpResponse({ status: 200, body })).pipe(delay(500));
}

coderkan

if (url.match(/\/employes\/.*/) && method === "DELETE") {
      const empId = this.getEmployeeId(url);
      return of(new HttpResponse({ status: 200, body: empId })).pipe(
        delay(500)
      );
    }
  getEmployeeId(url: any) {
    const urlValues = url.split("/");
    return urlValues[urlValues.length - 1];
  }

coderkan

@Injectable()
export class FakeBackendHttpInterceptor implements HttpInterceptor {
  // default employes json path
  private _employeeJsonPath = "assets/employes.json";
  constructor(private http: HttpClient) {}
  intercept(
    req: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    return this.handleRequests(req, next);

coderkan

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule,
    BrowserModule
  ],

coderkan

@Injectable({
  providedIn: "root",
})
export class EmployeeService {
  constructor(private http: HttpClient) {}
  /**
   * Get All Employee request.
   */
  getAllEmployes(): Observable<any> {
    return this.http

coderkan

<div class="card-container">
    <div class="card-container" style="display: block;">
      <p *ngFor="let emp of employes" class="card">
        <img src="{{ emp.emp_avatar }}" />
        <span>{{ emp.full_name }} </span>
        <span class="unit-name">{{ emp.unit }} </span>
        <i (click)="onDeleteAction(emp.id)" class="fa fa-trash delete-icon tooltip"><span class="tooltiptext"> Delete
            This Employee</span></i>
      </p>
    </div>

coderkan

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
  providers: [EmployeeService],
})
export class AppComponent implements OnInit {
  title = "http-interceptor-fakebackend";
  employes: any[];
  employeeName = "";

coderkan

Git Commit Template

type : Refactor the coupon UI (Also you can mention related issues like #171)
	# Type can be
	# feat (new feature)
	# fix (bug fix)
	# refactor (refactoring production code)
	# style (formatting, missing semi colons, etc; no code change)
	# docs (changes to documentation)