Commit 8f6dcc00 authored by Guillaume Cornut's avatar Guillaume Cornut Committed by Raphaël Flores
Browse files

chore: Initialize Angular project. Initialize components, services, and...

chore: Initialize Angular project. Initialize components, services, and routing. Initialize SCSS theme. Add gnpis core API in Angular proxy. GNP-5430.
parent 2475cc41
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { FormComponent } from './form.component';
describe('FormComponent', () => {
let component: FormComponent;
let fixture: ComponentFixture<FormComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ FormComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(FormComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'gpds-form',
templateUrl: './form.component.html',
styleUrls: ['./form.component.scss']
})
export class FormComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { GermplasmCardComponent } from './germplasm-card.component';
describe('GermplasmCardComponent', () => {
let component: GermplasmCardComponent;
let fixture: ComponentFixture<GermplasmCardComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ GermplasmCardComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(GermplasmCardComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'gpds-germplasm-card',
templateUrl: './germplasm-card.component.html',
styleUrls: ['./germplasm-card.component.scss']
})
export class GermplasmCardComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
import { TestBed } from '@angular/core/testing';
import { GnpisService } from './gnpis.service';
describe('GnpisService', () => {
beforeEach(() => TestBed.configureTestingModule({}));
it('should be created', () => {
const service: GnpisService = TestBed.get(GnpisService);
expect(service).toBeTruthy();
});
});
import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';
import { HttpClient } from '@angular/common/http';
const BASE_URL = '/gnpis/v1/datadiscovery';
@Injectable({
providedIn: 'root'
})
export class GnpisService {
constructor(private http: HttpClient) {}
suggest(field: string, fetchSize: number, text: string = ''): Observable<string[]> {
const params = {field, text, fetchSize: fetchSize.toString()};
return this.http.post<string[]>(`${BASE_URL}/suggest`, null, { params });
}
}
<p>
home works!
<a routerLink="results">Go to results</a>
</p>
List of crops:
<ul>
<li *ngFor="let crop of crops">{{crop}}</li>
</ul>
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { HomeComponent } from './home.component';
describe('HomeComponent', () => {
let component: HomeComponent;
let fixture: ComponentFixture<HomeComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ HomeComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(HomeComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit } from '@angular/core';
import { GnpisService } from '../gnpis.service';
@Component({
selector: 'gpds-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
crops: Array<string> = [];
constructor(private gnpisService: GnpisService) { }
ngOnInit() {
this.gnpisService.suggest('crops', 10).subscribe(crops => {
this.crops = crops;
});
}
}
<nav class="navbar navbar-expand-md navbar-dark py-0 mb-5">
<div class="container px-0">
<a class="navbar-brand d-flex align-items-center mr-0 px-2" routerLink="/">
<img src="assets/logo.png" alt="Logo" title="{{ navbar.title }}" height="60px"/>
</a>
<button class="navbar-toggler" type="button" (click)="toggleNavbar()">
<span class="fa fa-bars"></span>
</button>
<div id="navbar" class="collapse navbar-collapse" [class.collapse]="navbarCollapsed">
<ul class="navbar-nav mr-auto">
<li class="nav-item" *ngFor="let link of navbar.links">
<a class="nav-link d-flex align-items-center" [href]="link.url" target="_blank">{{ link.label }}</a>
</li>
</ul>
</div>
</div>
</nav>
@import "theme";
.navbar {
background-color: $theme-navbar-bg-color;
}
.navbar-toggler {
color: $theme-navbar-color;
border-color: $theme-navbar-color;
font-size: 1.5rem;
line-height: 1.5rem;
}
.navbar .navbar-nav .nav-link, .navbar .navbar-brand {
color: $theme-navbar-color;
height: $theme-navbar-height;
&:hover {
color: $theme-navbar-hover-color;
background-color: $theme-navbar-hover-bg-color;
}
}
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { NavbarComponent } from './navbar.component';
describe('NavbarComponent', () => {
let component: NavbarComponent;
let fixture: ComponentFixture<NavbarComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ NavbarComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(NavbarComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component } from '@angular/core';
@Component({
selector: 'gpds-navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.scss']
})
export class NavbarComponent {
navbar = {
title: 'GnpIS Plant Data Search',
links: [{label: 'URGI', url: 'http://urgi.versailles.inra.fr'}]
};
navbarCollapsed = true;
toggleNavbar() {
this.navbarCollapsed = !this.navbarCollapsed;
}
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment