initial commit

src/app/@theme/components/footer/footer.component.scss

@@ -0,0 +1,30 @@
+@import '../../styles/themes';
+@import '~@nebular/theme/styles/global/breakpoints';
+@import '~bootstrap/scss/mixins/breakpoints';
+
+@include nb-install-component() {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .socials {
+    font-size: 2rem;
+
+    a {
+      padding: 0.4rem;
+      color: nb-theme(text-hint-color);
+      transition: color ease-out 0.1s;
+
+      &:hover {
+        color: nb-theme(text-basic-color);
+      }
+    }
+  }
+
+  @include media-breakpoint-down(is) {
+    .socials {
+      font-size: 1.5rem;
+    }
+  }
+}

src/app/@theme/components/footer/footer.component.ts

@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ngx-footer',
+  styleUrls: ['./footer.component.scss'],
+  template: `
+    <span class="created-by">
+      Created with ♥ by <b><a href="#" target="_blank">Chris</a></b> 2022
+    </span>
+    <!-- <div class="socials">
+      <a href="#" target="_blank" class="ion ion-social-github"></a>
+      <a href="#" target="_blank" class="ion ion-social-facebook"></a>
+      <a href="#" target="_blank" class="ion ion-social-twitter"></a>
+      <a href="#" target="_blank" class="ion ion-social-linkedin"></a>
+    </div> -->
+  `,
+})
+export class FooterComponent {
+}

src/app/@theme/components/header/header.component.html

@@ -0,0 +1,28 @@
+<div class="header-container">
+  <div class="logo-container">
+    <a (click)="toggleSidebar()" href="#" class="sidebar-toggle">
+      <nb-icon icon="menu-2-outline"></nb-icon>
+    </a>
+    <a class="logo" href="#" (click)="navigateHome()"><img class="h-100" src='/assets/images/ArkLogo.svg' />
+      {{header}}</a>
+  </div>
+  <!-- <nb-select [selected]="currentTheme" (selectedChange)="changeTheme($event)" status="primary">
+    <nb-option *ngFor="let theme of themes" [value]="theme.value"> {{ theme.name }}</nb-option>
+  </nb-select> -->
+</div>
+
+<div class="header-container">
+  <nb-actions size="small">
+    <!-- 
+    <nb-action class="control-item">
+      <nb-search type="rotate-layout"></nb-search>
+    </nb-action>
+    <nb-action class="control-item" icon="email-outline"></nb-action>
+    <nb-action class="control-item" icon="bell-outline"></nb-action> -->
+    <nb-action class="user-action" *ngIf="user">
+      <nb-user [nbContextMenu]="userMenu" nbContextMenuTag="UserProfileMenu" [onlyPicture]="userPictureOnly"
+        [name]="userFullName" [picture]="avatarImage">
+      </nb-user>
+    </nb-action>
+  </nb-actions>
+</div>

src/app/@theme/components/header/header.component.scss

@@ -0,0 +1,76 @@
+@import '~bootstrap/scss/mixins/breakpoints';
+@import '~@nebular/theme/styles/global/breakpoints';
+@import '../../styles/themes';
+
+@include nb-install-component() {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+
+  .logo-container {
+    display: flex;
+    align-items: center;
+    width: calc(#{nb-theme(sidebar-width)} - #{nb-theme(header-padding)});
+  }
+
+  nb-action {
+    height: auto;
+    display: flex;
+    align-content: center;
+  }
+
+  nb-user {
+    cursor: pointer;
+  }
+
+  ::ng-deep nb-search button {
+    padding: 0!important;
+  }
+
+  .header-container {
+    display: flex;
+    align-items: center;
+    width: auto;
+
+    .sidebar-toggle {
+      @include nb-ltr(padding-right, 1.25rem);
+      @include nb-rtl(padding-left, 1.25rem);
+      text-decoration: none;
+      color: nb-theme(text-hint-color);
+      nb-icon {
+        font-size: 1.75rem;
+      }
+    }
+
+    .logo {
+      //padding: 0 1.25rem;
+      padding: 3px 0.25rem;
+      font-size: 1.75rem;
+      @include nb-ltr(border-left, 1px solid nb-theme(divider-color));
+      @include nb-rtl(border-right, 1px solid nb-theme(divider-color));
+      white-space: nowrap;
+      text-decoration: none;
+      height: 58px;
+
+      color: #c0d9b4;
+      font-size: 21px;
+      font-weight: 600;
+    }
+  }
+
+  @include media-breakpoint-down(sm) {
+    .control-item {
+      display: none;
+    }
+    .user-action {
+      border: none;
+      padding: 0;
+    }
+  }
+
+  @include media-breakpoint-down(is) {
+    nb-select {
+      display: none;
+    }
+  }
+}

src/app/@theme/components/header/header.component.ts

@@ -0,0 +1,137 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { NbMediaBreakpointsService, NbMenuItem, NbMenuService, NbSidebarService, NbThemeService } from '@nebular/theme';
+
+import { UserData } from '../../../@core/data/users';
+import { LayoutService } from '../../../@core/utils';
+import { map, takeUntil, first } from 'rxjs/operators';
+import { Subject } from 'rxjs';
+import { HeaderService } from '../../../services/header.service';
+import { NbAuthService } from '@nebular/auth';
+import { AuthService } from '../../../services/auth.service';
+import { UserProfileAction } from '../../../entity/Auth';
+
+@Component({
+  selector: 'ngx-header',
+  styleUrls: ['./header.component.scss'],
+  templateUrl: './header.component.html',
+})
+export class HeaderComponent implements OnInit, OnDestroy {
+  header: string = '';
+  private destroy$: Subject<void> = new Subject<void>();
+  userPictureOnly: boolean = false;
+
+  themes = [
+    {
+      value: 'default',
+      name: 'Light',
+    },
+    {
+      value: 'dark',
+      name: 'Dark',
+    },
+    {
+      value: 'cosmic',
+      name: 'Cosmic',
+    },
+    {
+      value: 'corporate',
+      name: 'Corporate',
+    },
+  ];
+
+  currentTheme = 'default';
+
+  userMenu: NbMenuItem[] = [
+    {
+      title: 'Profile',
+      data: UserProfileAction.GoToProfile
+    },
+    {
+      title: 'Log out',
+      data: UserProfileAction.LogOut
+    }];
+
+  public get user() {
+    return this.authService.userAccess;
+  }
+  public get userFullName() {
+    if (this.user) {
+      return `${this.user.firstName} ${this.user.lastName}`;
+    } else {
+      return null;
+    }
+  }
+  public get avatarImage() {
+    if (this.user && this.user.avatarImage) {
+      return this.user.avatarImage
+    } else {
+      return null;
+    }
+  }
+  constructor(private sidebarService: NbSidebarService,
+    private menuService: NbMenuService,
+    private themeService: NbThemeService,
+    private userService: UserData,
+    private layoutService: LayoutService,
+    private breakpointService: NbMediaBreakpointsService,
+    private headerService: HeaderService,
+    private oAuthService: NbAuthService,
+    private authService: AuthService,
+  ) {
+
+    this.headerService.headerChange$.pipe(takeUntil(this.destroy$)).subscribe(result => {
+      this.header = result;
+    });
+    this.menuService.onItemClick().pipe(takeUntil(this.destroy$))
+      .subscribe(result => {
+        if (result.item.title == 'Log out') this.logout();
+      });
+  }
+
+
+
+  ngOnInit() {
+    this.currentTheme = this.themeService.currentTheme;
+
+    const { xl } = this.breakpointService.getBreakpointsMap();
+    this.themeService.onMediaQueryChange()
+      .pipe(
+        map(([, currentBreakpoint]) => currentBreakpoint.width < xl),
+        takeUntil(this.destroy$),
+      )
+      .subscribe((isLessThanXl: boolean) => this.userPictureOnly = isLessThanXl);
+
+    this.themeService.onThemeChange()
+      .pipe(
+        map(({ name }) => name),
+        takeUntil(this.destroy$),
+      )
+      .subscribe(themeName => this.currentTheme = themeName);
+
+  }
+
+  ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  changeTheme(themeName: string) {
+    this.themeService.changeTheme(themeName);
+  }
+
+  toggleSidebar(): boolean {
+    this.sidebarService.toggle(true, 'menu-sidebar');
+    this.layoutService.changeLayoutSize();
+
+    return false;
+  }
+
+  navigateHome() {
+    this.menuService.navigateHome();
+    return false;
+  }
+  logout() {
+    this.authService.logout();
+
+  }
+}

src/app/@theme/components/index.ts

@@ -0,0 +1,4 @@
+export * from './header/header.component';
+export * from './footer/footer.component';
+export * from './search-input/search-input.component';
+export * from './tiny-mce/tiny-mce.component';

src/app/@theme/components/search-input/search-input.component.scss

@@ -0,0 +1,33 @@
+:host {
+  display: flex;
+  align-items: center;
+
+  i.control-icon {
+    &::before {
+      font-size: 2.3rem;
+    }
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
+  input {
+    border: none;
+    outline: none;
+    margin-left: 1rem;
+    width: 15rem;
+    transition: width 0.2s ease;
+
+    &.hidden {
+      width: 0;
+      margin: 0;
+    }
+  }
+
+  ::ng-deep search-input {
+    input {
+      background: transparent;
+    }
+  }
+}

src/app/@theme/components/search-input/search-input.component.ts

@@ -0,0 +1,35 @@
+import { Component, ElementRef, EventEmitter, Output, ViewChild } from '@angular/core';
+
+@Component({
+  selector: 'ngx-search-input',
+  styleUrls: ['./search-input.component.scss'],
+  template: `
+    <i class="control-icon ion ion-ios-search"
+       (click)="showInput()"></i>
+    <input placeholder="Type your search request here..."
+           #input
+           [class.hidden]="!isInputShown"
+           (blur)="hideInput()"
+           (input)="onInput($event)">
+  `,
+})
+export class SearchInputComponent {
+  @ViewChild('input', { static: true }) input: ElementRef;
+
+  @Output() search: EventEmitter<string> = new EventEmitter<string>();
+
+  isInputShown = false;
+
+  showInput() {
+    this.isInputShown = true;
+    this.input.nativeElement.focus();
+  }
+
+  hideInput() {
+    this.isInputShown = false;
+  }
+
+  onInput(val: string) {
+    this.search.emit(val);
+  }
+}

src/app/@theme/components/tiny-mce/tiny-mce.component.ts

@@ -0,0 +1,37 @@
+import { Component, OnDestroy, AfterViewInit, Output, EventEmitter, ElementRef } from '@angular/core';
+import { LocationStrategy } from '@angular/common';
+
+@Component({
+  selector: 'ngx-tiny-mce',
+  template: '',
+})
+export class TinyMCEComponent implements OnDestroy, AfterViewInit {
+
+  @Output() editorKeyup = new EventEmitter<any>();
+
+  editor: any;
+
+  constructor(
+    private host: ElementRef,
+    private locationStrategy: LocationStrategy,
+  ) { }
+
+  ngAfterViewInit() {
+    tinymce.init({
+      target: this.host.nativeElement,
+      plugins: ['link', 'paste', 'table'],
+      skin_url: `${this.locationStrategy.getBaseHref()}assets/skins/lightgray`,
+      setup: editor => {
+        this.editor = editor;
+        editor.on('keyup', () => {
+          this.editorKeyup.emit(editor.getContent());
+        });
+      },
+      height: '320',
+    });
+  }
+
+  ngOnDestroy() {
+    tinymce.remove(this.editor);
+  }
+}