portfolio setup and add apis service

src/app/app.module.ts

@@ -1,5 +1,6 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
+import { HttpClientModule } from '@angular/common/http';
 import { NgParticlesModule } from "ng-particles";
 
 import { AppRoutingModule } from './app-routing.module';
@@ -30,7 +31,8 @@ import { WorkshopsComponent } from './workshops/workshops.component';
   imports: [
     BrowserModule,
     AppRoutingModule,
-    NgParticlesModule
+    NgParticlesModule,
+    HttpClientModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/portfolio/portfolio.component.html

@@ -1,43 +1,9 @@
-<p>portfolio works!</p>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
+<div class="component-portfolio">
+  <div class="container">
+    <div class="row">
+      <div class="col-3 box" *ngFor="let portfolioItems of portfolioItems">
+        {{portfolioItems.title}}
+      </div>
+    </div>
+  </div>
+</div>

src/app/portfolio/portfolio.component.scss

@@ -0,0 +1,7 @@
+@import "../../assets/scss/variables";
+
+.component-portfolio {
+  .box {
+
+  }
+}

src/app/portfolio/portfolio.component.ts

@@ -1,4 +1,5 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit } from '@angular/core'
+import { ApisService } from '../services/apis.service'
 
 @Component({
   selector: 'app-portfolio',
@@ -7,9 +8,19 @@ import { Component, OnInit } from '@angular/core';
 })
 export class PortfolioComponent implements OnInit {
 
-  constructor() { }
+  public portfolioItems: any = []
+
+  constructor(private apisService: ApisService) { }
 
   ngOnInit(): void {
+    this.apisService.getPortfolio('portfolio').toPromise().then((response) => {
+      this.portfolioItems = response.items
+    },(error) => {
+      console.error('getPortfolio ERROR', error)
+    }).catch((e) => {
+      console.error('getPortfolio CATCH', e)
+    })
   }
 
+
 }

src/app/services/apis.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ApisService } from './apis.service';
+
+describe('ApisService', () => {
+  let service: ApisService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ApisService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/apis.service.ts

@@ -0,0 +1,26 @@
+import { Injectable } from '@angular/core'
+import { HttpClient, HttpHeaders, HttpParams, HttpRequest } from '@angular/common/http'
+import { Observable, Subject, throwError } from 'rxjs'
+import { catchError } from 'rxjs/operators'
+import { BaseService } from './base-service'
+import { environment } from '../../environments/environment'
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ApisService extends BaseService {
+
+  private restApi = `${environment.API_URL}`
+
+  constructor(private http: HttpClient) {
+    super()
+  }
+
+  getPortfolio(section): Observable<any> {
+    let urlApi = `${this.restApi}?query=${section}`
+    return this.http.get<any>(urlApi).pipe(
+      catchError(this.handleError)
+    )
+  }
+
+}

src/app/services/base-service.ts

@@ -0,0 +1,16 @@
+import { HttpErrorResponse } from "@angular/common/http"
+import { throwError } from "rxjs"
+import { ParseXML } from "./parse-xml"
+
+export class BaseService {
+
+  constructor() { }
+
+  protected handleError(error: HttpErrorResponse) {
+    if(error.error instanceof ErrorEvent) {
+      console.error('An error occurred:', error.error.message)
+    }
+
+    return throwError( ParseXML.getXMLResponseMessage(error.error) )
+  }
+}

src/app/services/parse-xml.ts

@@ -0,0 +1,13 @@
+export class ParseXML {
+  constructor() {}
+
+  public sanitize(str: string): string {
+    let sanitizeString = encodeURIComponent(str).replace(/%0A/g, '')
+    return decodeURIComponent(sanitizeString)
+  }
+
+  public static getXMLResponseMessage(responseBody: string): string {
+    let parseXMLClass = new ParseXML()
+    return parseXMLClass.sanitize(responseBody).match(/<Message>(.*?)<\/Message>/g)[0].replace(/<[^>]+>/g, '')
+  }
+}

src/environments/environment.prod.ts

@@ -1,3 +1,5 @@
 export const environment = {
-  production: true
-};
+  production: true,
+
+  API_URL: `https://apis.dslak.it/`
+}

src/environments/environment.ts

@@ -1,16 +1,5 @@
-// This file can be replaced during build by using the `fileReplacements` array.
-// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
-// The list of file replacements can be found in `angular.json`.
-
 export const environment = {
-  production: false
-};
+  production: false,
 
-/*
- * For easier debugging in development mode, you can import the following file
- * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
- *
- * This import should be commented out in production mode because it will have a negative impact
- * on performance if an error is thrown.
- */
-// import 'zone.js/dist/zone-error';  // Included with Angular CLI.
+  API_URL: `http://localhost/dslak_website/apis/`
+}