layout working

projects/odds-crawler-frontend-app/src/app/page/main/component/main.page.component.html

@@ -1,7 +1,3 @@
-<button mat-raised-button (click)="onClickAddTab($event)">
-  Add new tab
-</button>
-
 <mat-tab-group
   *ngIf="tabs"
   [selectedIndex]="tabSelectedIndex"

projects/odds-crawler-frontend-app/src/app/page/main/component/main.page.component.ts

@@ -12,11 +12,13 @@ export class MainPageComponent {
   onClickAddTab($event) {
     this.addTab('new');
   }
+
   onTabSelectedIndexChange($event) {}
 
   addTab(title: string) {
     this.tabs.push(title);
   }
+
   removeTab(title: string) {
     const index = this.tabs.indexOf(title);
     this.tabs.splice(index, 1);

projects/odds-crawler-frontend-app/src/app/page/main/main.page.module.ts

@@ -1,6 +1,5 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { TranslateModule } from '@ngx-translate/core';
 
 import { OddsCrawlerFrontendCommonModule } from '@odds-crawler/common';
 import { OddsCrawlerFrontendLayoutModule } from '@odds-crawler/layout';
@@ -12,7 +11,6 @@ import { MainRoutingPageModule } from './main-routing.page.module';
 @NgModule({
   imports: [
     CommonModule,
-    TranslateModule,
     OddsCrawlerFrontendCommonModule,
     OddsCrawlerFrontendLayoutModule,
     OddsCrawlerFrontendNetworkModule,

projects/odds-crawler-frontend-common/src/lib/common.module.ts

@@ -2,12 +2,11 @@ import { NgModule, ModuleWithProviders } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 import { CommonMaterialModule } from './common.material.module';
-import { CommonMaterialComponent } from './component/material.component';
 
 @NgModule({
-  declarations: [CommonMaterialComponent],
+  declarations: [],
   imports: [CommonModule, CommonMaterialModule],
-  exports: [CommonMaterialModule, CommonMaterialComponent]
+  exports: [CommonMaterialModule]
 })
 export class OddsCrawlerFrontendCommonModule {
   public static forRoot(): ModuleWithProviders<

projects/odds-crawler-frontend-common/src/lib/component/material.component.html

@@ -1 +0,0 @@
-<button mat-button>Click me!!</button>

projects/odds-crawler-frontend-common/src/lib/component/material.component.spec.ts

@@ -1,33 +0,0 @@
-import { TestBed, async } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
-import { CommonMaterialComponent } from './material.component';
-
-describe('CommonMaterialComponent', () => {
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      imports: [RouterTestingModule],
-      declarations: [CommonMaterialComponent]
-    }).compileComponents();
-  }));
-
-  it('should create the app', () => {
-    const fixture = TestBed.createComponent(CommonMaterialComponent);
-    const app = fixture.debugElement.componentInstance;
-    expect(app).toBeTruthy();
-  });
-
-  it(`should have as title 'odds-crawler-frontend-app'`, () => {
-    const fixture = TestBed.createComponent(CommonMaterialComponent);
-    const app = fixture.debugElement.componentInstance;
-    expect(app.title).toEqual('odds-crawler-frontend-app');
-  });
-
-  it('should render title in a h1 tag', () => {
-    const fixture = TestBed.createComponent(CommonMaterialComponent);
-    fixture.detectChanges();
-    const compiled = fixture.debugElement.nativeElement;
-    expect(compiled.querySelector('h1').textContent).toContain(
-      'Welcome to odds-crawler-frontend-app!'
-    );
-  });
-});

projects/odds-crawler-frontend-common/src/lib/component/material.component.ts

@@ -1,10 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'odds-crawler-commons-material',
-  templateUrl: './material.component.html',
-  styleUrls: ['./material.component.scss']
-})
-export class CommonMaterialComponent {
-  title = 'odds-crawler-frontend-commons-material';
-}

projects/odds-crawler-frontend-common/src/public-api.ts

@@ -3,5 +3,3 @@
  */
 
 export * from './lib/common.module';
-
-export * from './lib/component/material.component';

projects/odds-crawler-frontend-layout/src/lib/component/default-layout.component.html

@@ -1,8 +1 @@
-<p>
-  <mat-button-toggle-group name="fontStyle" aria-label="Font Style">
-    <mat-button-toggle value="bold">Bold</mat-button-toggle>
-    <mat-button-toggle value="italic">Italic</mat-button-toggle>
-    <mat-button-toggle value="underline">Underline</mat-button-toggle>
-  </mat-button-toggle-group>
-  odds-crawler-frontend-layout works!
-</p>
+<div></div>

projects/odds-crawler-frontend-layout/src/lib/component/default-layout.component.ts

@@ -3,7 +3,7 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'odds-crawler-layout-default',
   templateUrl: './default-layout.component.html',
-  styles: ['./default-layout.component/scss']
+  styles: ['./default-layout.component.scss']
 })
 export class DefaultLayoutComponent implements OnInit {
   constructor() {}

projects/odds-crawler-frontend-layout/src/lib/component/main-layout.component.html

@@ -1 +1,50 @@
-<router-outlet></router-outlet>
+<div class="gnb-menu">
+  <span>
+    <button mat-button [matMenuTriggerFor]="afterMenu">After</button>
+    <mat-menu #afterMenu="matMenu" xPosition="after">
+      <button mat-menu-item>Item 1</button>
+      <button mat-menu-item>Item 2</button>
+    </mat-menu>
+    <button mat-button [matMenuTriggerFor]="afterMenu">After</button>
+    <mat-menu #afterMenu="matMenu" xPosition="after">
+      <button mat-menu-item>Item 1</button>
+      <button mat-menu-item>Item 2</button>
+    </mat-menu>
+    <button mat-button [matMenuTriggerFor]="afterMenu">After</button>
+    <mat-menu #afterMenu="matMenu" xPosition="after">
+      <button mat-menu-item>Item 1</button>
+      <button mat-menu-item>Item 2</button>
+    </mat-menu>
+    <button mat-button [matMenuTriggerFor]="afterMenu">After</button>
+    <mat-menu #afterMenu="matMenu" xPosition="after">
+      <button mat-menu-item>Item 1</button>
+      <button mat-menu-item>Item 2</button>
+    </mat-menu>
+    <button mat-button [matMenuTriggerFor]="afterMenu">After</button>
+    <mat-menu #afterMenu="matMenu" xPosition="after">
+      <button mat-menu-item>Item 1</button>
+      <button mat-menu-item>Item 2</button>
+    </mat-menu>
+    <button mat-button [matMenuTriggerFor]="afterMenu">After</button>
+    <mat-menu #afterMenu="matMenu" xPosition="after">
+      <button mat-menu-item>Item 1</button>
+      <button mat-menu-item>Item 2</button>
+    </mat-menu>
+  </span>
+  <span>
+    <form class="form-inline">
+      <mat-form-field class="example-form-field">
+        <input matInput #tabURL type="text" placeholder="Clearable input" />
+        <button mat-button matSuffix mat-icon-button aria-label="Clear">
+          <mat-icon>close</mat-icon>
+        </button>
+      </mat-form-field>
+    </form>
+    <button mat-icon-button (click)="onClickNewTab(tabURL)">
+      <mat-icon>tab</mat-icon>
+    </button>
+  </span>
+</div>
+<div>
+  <router-outlet></router-outlet>
+</div>

projects/odds-crawler-frontend-layout/src/lib/component/main-layout.component.scss

@@ -0,0 +1,9 @@
+.gnb-menu {
+  height: 50px;
+}
+
+.form-inline {
+  display: inherit;
+  flex-flow: inherit;
+  align-items: center;
+}

projects/odds-crawler-frontend-layout/src/lib/component/main-layout.component.ts

@@ -1,12 +1,19 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Output, EventEmitter } from '@angular/core';
 
 @Component({
   selector: 'odds-crawler-layout-main',
   templateUrl: './main-layout.component.html',
-  styles: ['./main-layout.component.scss']
+  styleUrls: ['./main-layout.component.scss']
 })
 export class MainLayoutComponent implements OnInit {
+  @Output()
+  openNewTab = new EventEmitter<string>();
+
   constructor() {}
 
   ngOnInit() {}
+
+  onClickNewTab(tabURL: HTMLInputElement) {
+    this.openNewTab.emit(tabURL.value);
+  }
 }

projects/odds-crawler-frontend-layout/src/lib/layout.module.ts

@@ -8,7 +8,10 @@ import { OddsCrawlerFrontendCommonModule } from '@odds-crawler/common';
 import { DefaultLayoutComponent } from './component/default-layout.component';
 import { MainLayoutComponent } from './component/main-layout.component';
 
+import { LayoutService } from './service/layout.service';
+
 export const COMPONENTS = [DefaultLayoutComponent, MainLayoutComponent];
+export const SERVICES = [LayoutService];
 
 @NgModule({
   declarations: [...COMPONENTS],
@@ -21,7 +24,7 @@ export class OddsCrawlerFrontendLayoutModule {
   > {
     return {
       ngModule: OddsCrawlerFrontendLayoutRootModule,
-      providers: []
+      providers: [LayoutService]
     };
   }
 }

projects/odds-crawler-frontend-layout/src/lib/service/layout.service.spec.ts

@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { LayoutService } from './layout.service';
+
+describe('LayoutService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: LayoutService = TestBed.get(LayoutService);
+    expect(service).toBeTruthy();
+  });
+});

projects/odds-crawler-frontend-layout/src/lib/service/layout.service.ts

@@ -3,7 +3,6 @@ import { Injectable } from '@angular/core';
 @Injectable({
   providedIn: 'root'
 })
-export class OddsCrawlerFrontendLayoutService {
-
-  constructor() { }
+export class LayoutService {
+  constructor() {}
 }

projects/odds-crawler-frontend-layout/src/lib/service/odds-crawler-frontend-layout.service.spec.ts

@@ -1,12 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { OddsCrawlerFrontendLayoutService } from './odds-crawler-frontend-layout.service';
-
-describe('OddsCrawlerFrontendLayoutService', () => {
-  beforeEach(() => TestBed.configureTestingModule({}));
-
-  it('should be created', () => {
-    const service: OddsCrawlerFrontendLayoutService = TestBed.get(OddsCrawlerFrontendLayoutService);
-    expect(service).toBeTruthy();
-  });
-});

projects/odds-crawler-frontend-layout/src/public-api.ts

@@ -2,7 +2,7 @@
  * Public API Surface of odds-crawler-frontend-layout
  */
 
-export * from './lib/service/odds-crawler-frontend-layout.service';
+export * from './lib/service/layout.service';
 export * from './lib/component/default-layout.component';
 export * from './lib/component/main-layout.component';
 export * from './lib/layout.module';

projects/odds-crawler-frontend-network/src/lib/component/filter.component.ts

@@ -3,7 +3,7 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'odds-crawler-network-filter',
   templateUrl: './filter.component.html',
-  styles: ['./filter.component.scss']
+  styleUrls: ['./filter.component.scss']
 })
 export class FilterComponent implements OnInit {
   constructor() {}

projects/odds-crawler-frontend-network/src/lib/component/io.component.ts

@@ -80,7 +80,7 @@ const ELEMENT_DATA: NetworkIo[] = [
 @Component({
   selector: 'odds-crawler-network-io',
   templateUrl: './io.component.html',
-  styles: ['./io.component.scss']
+  styleUrls: ['./io.component.scss']
 })
 export class IoComponent implements OnInit {
   constructor() {}

projects/odds-crawler-frontend-network/src/lib/component/main.component.ts

@@ -3,7 +3,7 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'odds-crawler-network-main',
   templateUrl: './main.component.html',
-  styles: ['./main.component.scss']
+  styleUrls: ['./main.component.scss']
 })
 export class MainComponent implements OnInit {
   constructor() {}

projects/odds-crawler-frontend-network/src/lib/component/option.component.ts

@@ -3,7 +3,7 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'odds-crawler-network-option',
   templateUrl: './option.component.html',
-  styles: ['./option.component.scss']
+  styleUrls: ['./option.component.scss']
 })
 export class OptionComponent implements OnInit {
   constructor() {}