Skip to content
Snippets Groups Projects
Commit a7bbdf8d authored by OZGCloud's avatar OZGCloud
Browse files

rename pipe; create header-container-component; create mock.components

parent 0c080352
No related branches found
No related tags found
No related merge requests found
Showing
with 132 additions and 70 deletions
<ng-container *ngIf="apiRoot$ | async as apiRoot">
<!-- TODO replace by spinner-component -->
<ng-container *ngIf="apiRoot.loaded">
<goofy-client-header
[darkMode]="darkMode$ | async"
[navigationCollapse]="navigationCollapse$ | async"
(toggleMenuEvent)="toggleNavigation($event)"
(darkModeEmitter)="changeColorMode($event)"
>
</goofy-client-header>
<goofy-client-header-container></goofy-client-header-container>
<div class="container">
<goofy-client-navigation [isSmall]="navigationCollapse$ | async"></goofy-client-navigation>
<goofy-client-navigation></goofy-client-navigation>
<main><router-outlet></router-outlet></main>
<section>
<goofy-client-build-info [apiRoot]="apiRoot.resource"></goofy-client-build-info>
......
import { DOCUMENT } from '@angular/common';
import { Component, Inject, Renderer2 } from '@angular/core';
import { Component } from '@angular/core';
import { ApiRootResource, ApiRootService } from '@goofy-client/api-root-shared';
import { StateResource } from '@goofy-client/tech-shared';
import { IconService } from '@goofy-client/ui';
import { Observable, of } from 'rxjs';
import { AppService, localStorageDark } from '@goofy-client/app-shared';
import { Observable } from 'rxjs';
@Component({
selector: 'goofy-client-root',
......@@ -16,42 +14,11 @@ export class AppComponent {
apiRoot$: Observable<StateResource<ApiRootResource>>;
navigationCollapse$: Observable<boolean>;
darkMode$: Observable<boolean>;
constructor(
iconService: IconService,
private appService: AppService,
private renderer: Renderer2,
@Inject(DOCUMENT) private document: Document,
apiRootService: ApiRootService
apiRootService: ApiRootService,
iconServie: IconService
) {
this.navigationCollapse$ = this.appService.getNavigationCollapse();
this.darkMode$ = this.appService.getDarkMode();
this.apiRoot$ = apiRootService.getApiRoot();
iconService.registerIcons();
this.subscribeToDarkMode();
}
private subscribeToDarkMode(): void {
this.darkMode$.subscribe(darkMode => darkMode ? this.addClass(localStorageDark) : this.removeClass(localStorageDark));
}
private addClass(styleClass: string): void {
this.renderer.addClass(this.document.body, styleClass);
}
private removeClass(styleClass: string): void {
this.renderer.removeClass(this.document.body, styleClass);
}
toggleNavigation(isToggle: boolean): void {
this.appService.setNavigationCollapse(isToggle);
}
changeColorMode(darkMode: boolean): void {
this.appService.setDarkMode(darkMode);
iconServie.registerIcons();
}
}
\ No newline at end of file
import { TestBed } from "@angular/core/testing";
import { TestBed } from '@angular/core/testing';
import { ApiRootModule } from './api-root.module';
describe('ApiRootModule', () => {
......
import { Mock, mock, useFromMock } from '@goofy-client/test-utils';
import { HttpService } from '@ngxp/rest';
import { Environment } from 'libs/environment-shared/src/lib/environment.model';
import { ApiRootRepository } from "./api-root.repository"
import { createEnvironment } from "../../../environment-shared/test/environment";
import { createEnvironment } from '../../../environment-shared/test/environment';
import { ApiRootRepository } from './api-root.repository';
var repository: ApiRootRepository;
var httpService: Mock<HttpService>;
......
import { TestBed } from "@angular/core/testing";
import { TestBed } from '@angular/core/testing';
import { AppSharedModule } from './app-shared.module';
describe('AppSharedModule', () => {
......
import { AppService } from "./app.service";
import { AppService } from './app.service';
describe('AppService', () => {
let service: AppService;
......
<p>Version: {{ apiRoot.version }} | BuildTime: {{ apiRoot.buildTime | date: 'dd.MM.yy HH:mm:ss' }}</p>
\ No newline at end of file
<p>Version: {{ apiRoot.version }} | BuildTime: {{ apiRoot.buildTime | date: "dd.MM.yy HH:mm:ss" }}</p>
\ No newline at end of file
<goofy-client-header
[darkMode]="darkMode$ | async"
[navigationCollapse]="navigationCollapse$ | async"
(toggleMenuEvent)="toggleNavigation($event)"
(darkModeEmitter)="changeColorMode($event)">
</goofy-client-header>
\ No newline at end of file
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { AppService } from '@goofy-client/app-shared';
import { BehaviorSubject } from 'rxjs';
import { HeaderContainerComponent } from './header-container.component';
import { mock, mockComponent, headerMockComponent } from '@goofy-client/test-utils';
describe('HeaderContainerComponent', () => {
let component: HeaderContainerComponent;
let fixture: ComponentFixture<HeaderContainerComponent>;
const darkModeSubj: BehaviorSubject<boolean> = new BehaviorSubject(false);
const appService = { ...mock(AppService), getDarkMode: () => darkModeSubj };
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [
HeaderContainerComponent,
mockComponent(headerMockComponent),
],
providers: [
{
provide: AppService,
useValue: appService
}
]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(HeaderContainerComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
\ No newline at end of file
import { DOCUMENT } from '@angular/common';
import { Component, Inject, Renderer2 } from '@angular/core';
import { Observable } from 'rxjs';
import { AppService, localStorageDark } from '@goofy-client/app-shared';
@Component({
selector: 'goofy-client-header-container',
templateUrl: './header-container.component.html',
styleUrls: ['./header-container.component.scss']
})
export class HeaderContainerComponent {
navigationCollapse$: Observable<boolean>;
darkMode$: Observable<boolean>;
constructor(
private appService: AppService,
private renderer: Renderer2,
@Inject(DOCUMENT) private document: Document,
) {
this.navigationCollapse$ = this.appService.getNavigationCollapse();
this.darkMode$ = this.appService.getDarkMode();
this.subscribeToDarkMode();
}
private subscribeToDarkMode(): void {
this.darkMode$.subscribe(darkMode => darkMode ? this.addClass(localStorageDark) : this.removeClass(localStorageDark));
}
private addClass(styleClass: string): void {
this.renderer.addClass(this.document.body, styleClass);
}
private removeClass(styleClass: string): void {
this.renderer.removeClass(this.document.body, styleClass);
}
toggleNavigation(isToggle: boolean): void {
this.appService.setNavigationCollapse(isToggle);
}
changeColorMode(darkMode: boolean): void {
this.appService.setDarkMode(darkMode);
}
}
\ No newline at end of file
import { TestBed } from "@angular/core/testing";
import { TestBed } from '@angular/core/testing';
import { NavigationModule } from './navigation.module';
describe('UiModule', () => {
......
......@@ -6,13 +6,15 @@ import { BuildInfoComponent } from './build-info/build-info.component';
import { NavigationComponent } from './navigation/navigation.component';
import { UiModule } from '@goofy-client/ui';
import { RouterModule } from '@angular/router';
import { HeaderContainerComponent } from './header-container/header-container.component';
@NgModule({
declarations: [
BuildInfoComponent,
HeaderComponent,
NavigationComponent,
SettingsComponent
SettingsComponent,
HeaderContainerComponent
],
imports: [
CommonModule,
......@@ -23,7 +25,8 @@ import { RouterModule } from '@angular/router';
BuildInfoComponent,
HeaderComponent,
NavigationComponent,
SettingsComponent
SettingsComponent,
HeaderContainerComponent
]
})
export class NavigationModule {}
<nav [ngClass]="{ small: isSmall }">
<nav [ngClass]="{ small: navigationCollapse$ | async }">
<ul>
<li>
<a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" matRipple matRippleColor="rgba(13,71,161, 0.08)">
......
import { Component, Input } from '@angular/core';
import { Component } from '@angular/core';
import { AppService } from '@goofy-client/app-shared';
import { Observable } from 'rxjs';
@Component({
selector: 'goofy-client-navigation',
......@@ -7,6 +9,9 @@ import { Component, Input } from '@angular/core';
})
export class NavigationComponent {
@Input() isSmall: boolean;
navigationCollapse$: Observable<boolean>;
constructor(private appService: AppService) {
this.navigationCollapse$ = this.appService.getNavigationCollapse();
}
}
\ No newline at end of file
import { FormatTooltipListDatePipe } from './format-tooltip-list-date';
import { FormatDateWithTimePipe } from './format-date-with-time';
import { registerLocaleData } from '@angular/common';
import localeDe from '@angular/common/locales/de';
import localeDeExtra from '@angular/common/locales/extra/de';
registerLocaleData(localeDe, 'de', localeDeExtra);
describe('FormatTooltipListDate', () => {
let pipe: FormatTooltipListDatePipe = new FormatTooltipListDatePipe();
describe('FormatDateWithTimePipe', () => {
let pipe: FormatDateWithTimePipe = new FormatDateWithTimePipe();
it('should create', () => {
expect(pipe).toBeTruthy();
......
import { formatDate } from '@angular/common';
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'formatTooltipListDate' })
export class FormatTooltipListDatePipe implements PipeTransform {
@Pipe({ name: 'formatDateWithTimePipe' })
export class FormatDateWithTimePipe implements PipeTransform {
dateFormat: string = 'EEEE, dd.MM.y, H:mm:ss';
transform(date: Date) {
......
import { getUrl, Resource, ResourceUri } from '@ngxp/rest';
import { getUrl, Resource } from '@ngxp/rest';
import { isNil } from 'lodash-es';
import { getLastValueFromLastIndexOf } from '../tech-shared.util';
export interface ListResource extends Resource {
_embedded_
_embedded
}
export interface StateResource<T> {
......
......@@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
import { ObserveIntersectionDirective } from './directives/observe-intersection.directive';
import { FormatListDatePipe } from './pipes/format-list-date.pipe';
import { EnumToLabelPipe } from './pipes/enum-to-label';
import { FormatTooltipListDatePipe } from './pipes/format-tooltip-list-date';
import { FormatDateWithTimePipe } from './pipes/format-date-with-time';
@NgModule({
imports: [CommonModule],
......@@ -11,13 +11,13 @@ import { FormatTooltipListDatePipe } from './pipes/format-tooltip-list-date';
ObserveIntersectionDirective,
FormatListDatePipe,
EnumToLabelPipe,
FormatTooltipListDatePipe
FormatDateWithTimePipe
],
exports: [
ObserveIntersectionDirective,
FormatListDatePipe,
EnumToLabelPipe,
FormatTooltipListDatePipe
FormatDateWithTimePipe
]
})
export class TechSharedModule {}
export * from './lib/test-utils.module';
export * from './lib/mocking';
export * from './lib/mock.components';
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment