<repo_name>laurasimonp/oeb-documentation-frontend<file_sep>/src/app/app-routing.module.ts
import { NgModule } from "@angular/core";
import { RouterModule, Routes } from "@angular/router";

import { OebComponent } from "./oeb/oeb.component";
import { ScientificComponent } from "./scientific/scientific.component";
import { TechnicalComponent } from "./technical/technical.component";
import { TopicComponent } from "./topic/topic.component";
import { RepositoryComponent } from "./repository/repository.component";
import { RepositoryDataComponent } from "./repository-data/repository-data.component";
import { APIsComponent } from './apis/apis.component';
import { PageNotFoundComponent } from "./page-not-found/page-not-found.component";

const appRoutes: Routes = [
  { path: "oeb", component: OebComponent },
  { path: "scientific", component: ScientificComponent },
  { path: "technical", component: TechnicalComponent },
  { path: "topics", component: TopicComponent },
  { path: "repositories", component: RepositoryComponent },
  { path: "repositories/:name", component: RepositoryDataComponent },
  { path: "apis", component: APIsComponent },
  { path: "", redirectTo: "/oeb", pathMatch: "full" },
  { path: "**", component: PageNotFoundComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(appRoutes, { enableTracing: false })],
  exports: [RouterModule],
})
export class AppRoutingModule { }
<file_sep>/src/app/model/Topic.ts
export class Topic {
    private _name: String;
    private _url: String;
    private _description: String;

	/**
     *Creates an instance of Topic.
     * @param {String} [name]
     * @param {String} [url]
     * @param {String} [description]
     * @memberof Topic
     */
    constructor(name?: String, url?: String, description?: String) {
        this._name = name;
        this._url = url;
        this._description = description;
    }

    /**
     * Getter name
     * @return {String}
     */
    public get name(): String {
        return this._name;
    }

    /**
     * Getter url
     * @return {String}
     */
    public get url(): String {
        return this._url;
    }

    /**
     * Getter description
     * @return {String}
     */
    public get description(): String {
        return this._description;
    }

    /**
     * Setter name
     * @param {String} value
     */
    public set name(value: String) {
        this._name = value;
    }

    /**
     * Setter url
     * @param {String} value
     */
    public set url(value: String) {
        this._url = value;
    }

    /**
     * Setter description
     * @param {String} value
     */
    public set description(value: String) {
        this._description = value;
    }


}<file_sep>/src/app/topic/topic.component.ts
import { Component, OnInit } from '@angular/core';

import { Topic } from '../model/Topic';

import { TopicService } from "../services/topic.service";

@Component({
  selector: 'app-topic',
  templateUrl: './topic.component.html',
  styleUrls: ['./topic.component.css']
})
export class TopicComponent implements OnInit {
  //attributes
  topics: Topic[];

  constructor(private topicService: TopicService) { }

  ngOnInit(): void {
    this.topicService.getTopics().subscribe(data => {
      this.topics = data;
    });
  }
}
<file_sep>/src/app/app.module.ts
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { HttpClientModule } from "@angular/common/http";
import { NgxPaginationModule } from "ngx-pagination";

import { AppComponent } from "./app.component";
import { AppRoutingModule } from "./app-routing.module";

import { OebComponent } from "./oeb/oeb.component";
import { ScientificComponent } from "./scientific/scientific.component";
import { TechnicalComponent } from "./technical/technical.component";
import { TopicComponent } from "./topic/topic.component";
import { RepositoryComponent } from "./repository/repository.component";
import { RepositoryDataComponent } from "./repository-data/repository-data.component";
import { PageNotFoundComponent } from "./page-not-found/page-not-found.component";
import { MarkedPipe } from "./marked.pipe";
import { TopMenuComponent } from "./top-menu/top-menu.component";
import { NgSelectModule } from "@ng-select/ng-select";
import { APIsComponent } from './apis/apis.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    NgxPaginationModule,
    AppRoutingModule,
    NgSelectModule,
  ],
  declarations: [
    AppComponent,
    OebComponent,
    ScientificComponent,
    TechnicalComponent,
    TopicComponent,
    RepositoryComponent,
    RepositoryDataComponent,
    PageNotFoundComponent,
    MarkedPipe,
    TopMenuComponent,
    APIsComponent,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule { }
<file_sep>/src/app/repository-data/repository-data.component.ts
import { Component, OnInit } from "@angular/core";

import { Repository } from "../model/Repository";

import { RepositoryService } from "../services/repository.service";

import { ActivatedRoute } from "@angular/router";

@Component({
  selector: "app-repository-data",
  templateUrl: "./repository-data.component.html",
  styleUrls: ["./repository-data.component.css"],
})
export class RepositoryDataComponent implements OnInit {
  //attributes
  repo: Repository;

  constructor(
    private repoService: RepositoryService,
    private route: ActivatedRoute
  ) { }

  ngOnInit(): void {
    this.viewRepoData(this.getParam("name"));
  }

  /**
   * Get param from url
   */
  public getParam(param: string): string {
    return this.route.snapshot.paramMap.get(param);
  }

  viewRepoData(name: string) {
    this.repoService.getRepoDataByName(name).subscribe((data) => {
      this.repo = data;
    });
  }
}
<file_sep>/src/app/services/topic.service.ts
import { Injectable } from '@angular/core';

import { Topic } from "../model/Topic";

import { HttpClient } from "@angular/common/http";

import { Observable } from "rxjs";

import { environment } from "../../environments/environment";

@Injectable({
  providedIn: 'root'
})
export class TopicService {
  private topicsUrl = environment.TOPICS;
  public topics: Observable<Topic[]>;

  constructor(private http: HttpClient) { }

  getTopics(): Observable<Topic[]> {
    this.topics = this.http.get<Topic[]>(this.topicsUrl);
    return this.topics;
  }
}
<file_sep>/src/app/model/Contributor.ts
export class Contributor {
    private _login: string;
    private _url: string;

	/**
     *Creates an instance of Contributor.
     * @param {string} login
     * @param {string} url
     * @memberof Contributor
     */
    constructor(login: string, url: string) {
        this._login = login;
        this._url = url;
    }

    /**
     * Getter login
     * @return {string}
     */
    public get login(): string {
        return this._login;
    }

    /**
     * Getter url
     * @return {string}
     */
    public get url(): string {
        return this._url;
    }

    /**
     * Setter login
     * @param {string} value
     */
    public set login(value: string) {
        this._login = value;
    }

    /**
     * Setter url
     * @param {string} value
     */
    public set url(value: string) {
        this._url = value;
    }
}<file_sep>/src/app/top-menu/top-menu.component.ts
import { Component, OnInit } from "@angular/core";
import { Location } from "@angular/common";

/**
 * This component is where we specify the top menu paths
 */
@Component({
  selector: "app-top-menu",
  templateUrl: "./top-menu.component.html",
  styleUrls: ["./top-menu.component.css"]
})
export class TopMenuComponent implements OnInit {

  constructor(private location: Location) { }

  /**
   * Navigation links and labels for the menu on the left (LOGO)
   */
  public dashboardLink = {
    label: "OpenEBench",
    path: "oeb"
  };

  /**
   * Navigation links and labels for the menu on the right
   */
  public navLinks: any[];

  ngOnInit() {
    this.navLinks = [
      {
        label: "OpenEBench",
        path: "/oeb"
      },
      {
        label: "Scientific Benchmarking",
        path: "/scientific"
      },
      {
        label: "Technical Monitoring",
        path: "/technical"
      },
      {
        label: "Topics",
        path: "/topics"
      },
      {
        label: "Repositories",
        path: "/repositories"
      },
      {
        label: "APIs",
        path: "/apis"
      }
    ];
  }

  /**
   * Get URL path
   */
  getPath() {
    return this.location.isCurrentPathEqualTo(this.dashboardLink.path);
  }
}
<file_sep>/src/app/services/repository.service.ts
import { Injectable } from "@angular/core";

import { Repository } from "../model/Repository";

import { HttpClient } from "@angular/common/http";
import { HttpParams } from "@angular/common/http";

import { Observable } from "rxjs";

import { environment } from "../../environments/environment";

@Injectable({
  providedIn: "root",
})
export class RepositoryService {
  private topicsUrl = environment.TOPICS;
  private reposUrl = environment.REPOSITORIES;
  private repoUrl = environment.REPOSITORY;
  public topics: Observable<string[]>;
  public repos: Observable<Repository[]>;
  public filteredRepos: Observable<Repository[]>;
  public repo: Observable<Repository>;

  constructor(private http: HttpClient) { }

  getTopics(): Observable<string[]> {
    this.topics = this.http.get<string[]>(this.topicsUrl);
    return this.topics;
  }

  getRepos(): Observable<Repository[]> {
    this.repos = this.http.get<Repository[]>(this.reposUrl);
    return this.repos;
  }

  getFilteredRepos(topicsArray: string[]): Observable<Repository[]> {
    const options = topicsArray
      ? {
        params: new HttpParams({
          fromObject: { t: topicsArray },
        }),
      }
      : {};

    this.filteredRepos = this.http.get<Repository[]>(this.reposUrl, options);
    return this.filteredRepos;
  }

  getRepoDataByName(name: string): Observable<Repository> {
    this.repo = this.http.get<Repository>(this.repoUrl + name);
    return this.repo;
  }
}
<file_sep>/src/app/model/Repository.ts
export class Repository {
    private _id: string;
    private _name: string;
    private _topics: string[];
    private _description: string;
    private _url: string;
    private _contributors: string[];
    private _languages: string[];
    private _license: string;
    private _readme: string;

	/**
     *Creates an instance of Repository.
     * @param {string} id
     * @param {string} name
     * @param {string[]} topics
     * @param {string} description
     * @param {string} url
     * @param {string[]} contributors
     * @param {string[]} languages
     * @param {string} license
     * @param {string} readme
     * @memberof Repository
     */
    constructor(id?: string, name?: string, topics?: string[], description?: string, url?: string, contributors?: string[], languages?: string[], license?: string, readme?: string) {
        this._id = id;
        this._name = name;
        this._topics = topics;
        this._description = description;
        this._url = url;
        this._contributors = contributors;
        this._languages = languages;
        this._license = license;
        this._readme = readme;
    }

    /**
     * Getter id
     * @return {string}
     */
    public get id(): string {
        return this._id;
    }

    /**
     * Getter name
     * @return {string}
     */
    public get name(): string {
        return this._name;
    }

    /**
     * Getter topics
     * @return {string[]}
     */
    public get topics(): string[] {
        return this._topics;
    }

    /**
     * Getter description
     * @return {string}
     */
    public get description(): string {
        return this._description;
    }

    /**
     * Getter url
     * @return {string}
     */
    public get url(): string {
        return this._url;
    }

    /**
     * Getter contributors
     * @return {string[]}
     */
    public get contributors(): string[] {
        return this._contributors;
    }

    /**
     * Getter languages
     * @return {string[]}
     */
    public get languages(): string[] {
        return this._languages;
    }

    /**
     * Getter license
     * @return {string}
     */
    public get license(): string {
        return this._license;
    }

    /**
     * Getter readme
     * @return {string}
     */
    public get readme(): string {
        return this._readme;
    }

    /**
     * Setter id
     * @param {string} value
     */
    public set id(value: string) {
        this._id = value;
    }

    /**
     * Setter name
     * @param {string} value
     */
    public set name(value: string) {
        this._name = value;
    }

    /**
     * Setter topics
     * @param {string[]} value
     */
    public set topics(value: string[]) {
        this._topics = value;
    }

    /**
     * Setter description
     * @param {string} value
     */
    public set description(value: string) {
        this._description = value;
    }

    /**
     * Setter url
     * @param {string} value
     */
    public set url(value: string) {
        this._url = value;
    }

    /**
     * Setter contributors
     * @param {string[]} value
     */
    public set contributors(value: string[]) {
        this._contributors = value;
    }

    /**
     * Setter languages
     * @param {string[]} value
     */
    public set languages(value: string[]) {
        this._languages = value;
    }

    /**
     * Setter license
     * @param {string} value
     */
    public set license(value: string) {
        this._license = value;
    }

    /**
     * Setter readme
     * @param {string} value
     */
    public set readme(value: string) {
        this._readme = value;
    }
}
<file_sep>/src/app/repository/repository.component.ts
import { Component, OnInit } from "@angular/core";

import { Repository } from "../model/Repository";

import { RepositoryService } from "../services/repository.service";
import { Topic } from "../model/Topic";

@Component({
  selector: "app-repository",
  templateUrl: "./repository.component.html",
  styleUrls: ["./repository.component.css"],
})
export class RepositoryComponent implements OnInit {
  // attributes
  topics: string[] = [];
  repos: Repository[] = [];

  // filter properties
  nameFilter = "";
  selectedTopics: Topic[] = [];
  filteredRepos: Repository[] = [];

  // pagination properties
  currentPage: number;
  itemsPerPage: number;

  constructor(private repoService: RepositoryService) { }

  ngOnInit(): void {
    this.repoService.getTopics().subscribe((data) => {
      this.topics = data;
    });
    this.repoService.getRepos().subscribe((data) => {
      this.repos = data;
      this.filteredRepos = this.repos;
    });

    this.itemsPerPage = 10;
    this.currentPage = 1;
  }

  getSelectedTopics() {
    const filterTopics: string[] = [];
    this.selectedTopics
      ? this.selectedTopics.forEach((element) => {
        filterTopics.push(element.url.toString());
      })
      : "";

    this.repoService.getFilteredRepos(filterTopics).subscribe((data) => {
      this.filteredRepos = data;
    });
  }

  filter() {
    this.filteredRepos = this.repos.filter((repository) => {
      let nameValid = false;
      for (let topic of repository.topics) {
        if (repository.name.toLowerCase().indexOf(
          this.nameFilter.toLowerCase()) != -1) {
          nameValid = true;
        } else if (repository.description.toLowerCase().indexOf(
          this.nameFilter.toLowerCase()) != -1) {
          nameValid = true;
        } else if (topic.toLowerCase().indexOf(
          this.nameFilter.toLowerCase()) != -1) {
          nameValid = true;
        }
      }

      return nameValid;
    });
  }
}
