refactor(modules): organize into core and material modules

Author: btroncone

src/app/app.component.spec.ts

@@ -2,9 +2,8 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { AppComponent } from './app.component';
-import { ToolbarModule } from './toolbar/toolbar.module';
 import { MatSidenavModule, MatListModule } from '@angular/material';
-import { SeoService } from './services/seo.service';
+import { CoreModule } from './core/core.module';
 
 describe('AppComponent', () => {
   let component: AppComponent;
@@ -16,12 +15,11 @@ describe('AppComponent', () => {
         imports: [
           RouterTestingModule,
           BrowserAnimationsModule,
-          ToolbarModule,
+          CoreModule,
           MatSidenavModule,
           MatListModule
         ],
-        declarations: [AppComponent],
-        providers: [SeoService]
+        declarations: [AppComponent]
       }).compileComponents();
     })
   );

src/app/app.component.ts

@@ -6,7 +6,7 @@ import {
   RouterEvent
 } from '@angular/router';
 import { filter, map, mergeMap } from 'rxjs/operators';
-import { SeoService, SeoData } from './services/seo.service';
+import { SeoService, SeoData } from './core/services/seo.service';
 
 interface Menu {
   title: string;

src/app/app.module.ts

@@ -1,24 +1,25 @@
-import { SeoService } from './services/seo.service';
+import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { MatSidenavModule, MatListModule } from '@angular/material';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { NgModule } from '@angular/core';
+import { FlexLayoutModule } from '@angular/flex-layout';
 
-import { AppComponent } from './app.component';
-import { ToolbarModule } from './toolbar/toolbar.module';
-import { MatSidenavModule, MatListModule } from '@angular/material';
+import { CoreModule } from '../app/core/core.module';
+import { MaterialModule } from './material/material.module';
 import { AppRoutingModule } from './app-routing.module';
 
+import { AppComponent } from './app.component';
+
 @NgModule({
   declarations: [AppComponent],
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
-    ToolbarModule,
-    MatListModule,
-    MatSidenavModule,
-    AppRoutingModule
+    FlexLayoutModule,
+    MaterialModule,
+    AppRoutingModule,
+    CoreModule.forRoot()
   ],
-  providers: [SeoService],
   bootstrap: [AppComponent]
 })
 export class AppModule {}

src/app/companies/companies.module.ts

@@ -1,12 +1,9 @@
 import { NgModule } from '@angular/core';
-
 import { CompaniesComponent } from './companies.component';
 import { CompaniesRoutingModule } from './companies-routing.module';
-import { SharedModule } from '../shared.module';
-import { environment } from '../../environments/environment';
 
 @NgModule({
-  imports: [CompaniesRoutingModule, SharedModule],
+  imports: [CompaniesRoutingModule],
   declarations: [CompaniesComponent]
 })
 export class CompaniesModule {}

src/app/toolbar/toolbar.component.html renamed to src/app/core/components/toolbar/toolbar.component.html

@@ -1,11 +1,11 @@
-import { async, ComponentFixture, TestBed } from "@angular/core/testing";
-import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
-import { RouterTestingModule } from "@angular/router/testing";
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { RouterTestingModule } from '@angular/router/testing';
 
-import { ToolbarComponent } from "./toolbar.component";
-import { SharedModule } from "../shared.module";
+import { ToolbarComponent } from './toolbar.component';
+import { SharedModule } from '../shared.module';
 
-describe("ToolbarComponent", () => {
+describe('ToolbarComponent', () => {
   let component: ToolbarComponent;
   let fixture: ComponentFixture<ToolbarComponent>;
 
@@ -24,7 +24,7 @@ describe("ToolbarComponent", () => {
     fixture.detectChanges();
   });
 
-  it("should create", () => {
+  it('should create', () => {
     expect(component).toBeTruthy();
   });
 });

src/app/toolbar/toolbar.component.scss renamed to src/app/core/components/toolbar/toolbar.component.scss

@@ -1,9 +1,9 @@
-import { Component, OnInit, Output, EventEmitter } from "@angular/core";
+import { Component, OnInit, Output, EventEmitter } from '@angular/core';
 
 @Component({
-  selector: "app-toolbar",
-  templateUrl: "./toolbar.component.html",
-  styleUrls: ["./toolbar.component.scss"]
+  selector: 'app-toolbar',
+  templateUrl: './toolbar.component.html',
+  styleUrls: ['./toolbar.component.scss']
 })
 export class ToolbarComponent implements OnInit {
   @Output() navToggle = new EventEmitter<boolean>();

src/app/toolbar/toolbar.component.spec.ts renamed to src/app/core/components/toolbar/toolbar.component.spec.ts

@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+import { FlexLayoutModule } from '@angular/flex-layout';
+
+import { CopierService } from './services/copier.service';
+import { SeoService } from './services/seo.service';
+import { ToolbarComponent } from './components/toolbar/toolbar.component';
+import { MaterialModule } from '../material/material.module';
+
+@NgModule({
+  imports: [FlexLayoutModule, RouterModule, CommonModule, MaterialModule],
+  declarations: [ToolbarComponent],
+  exports: [ToolbarComponent]
+})
+export class CoreModule {
+  static forRoot() {
+    return {
+      ngModule: CoreModule,
+      providers: [CopierService, SeoService]
+    };
+  }
+}

src/app/toolbar/toolbar.component.ts renamed to src/app/core/components/toolbar/toolbar.component.ts

@@ -0,0 +1,55 @@
+import { Injectable } from '@angular/core';
+
+/*
+ *  Based on:
+ *  https://github.com/angular/material.angular.io/blob/c812fadf8e18f57026c56ef3b4d7d3ebb8c441fe/src/app/shared/copier/copier.service.ts
+ */
+@Injectable()
+export class CopierService {
+  private textarea: HTMLTextAreaElement;
+
+  /** Copy the text value to the clipboard. */
+  copyText(text: string): boolean {
+    this.createTextareaAndSelect(text);
+
+    const copySuccessful = document.execCommand('copy');
+    this.removeFake();
+
+    return copySuccessful;
+  }
+
+  /**
+   * Creates a hidden textarea element, sets its value from `text` property,
+   * and makes a selection on it.
+   */
+  private createTextareaAndSelect(text: string) {
+    // Create a fake element to hold the contents to copy
+    this.textarea = document.createElement('textarea');
+
+    // Prevent zooming on iOS
+    this.textarea.style.fontSize = '12pt';
+
+    // Hide the element
+    this.textarea.classList.add('cdk-visually-hidden');
+
+    // Move element to the same position vertically
+    const yPosition = window.pageYOffset || document.documentElement.scrollTop;
+    this.textarea.style.top = yPosition + 'px';
+
+    this.textarea.setAttribute('readonly', '');
+    this.textarea.value = text;
+
+    document.body.appendChild(this.textarea);
+
+    this.textarea.select();
+    this.textarea.setSelectionRange(0, this.textarea.value.length);
+  }
+
+  /** Remove the text area from the DOM. */
+  private removeFake() {
+    if (this.textarea) {
+      document.body.removeChild(this.textarea);
+      this.textarea = null;
+    }
+  }
+}