fontastic 0.1.3

package/src/app/shared/components/paginator/paginator.component.ts

@@ -0,0 +1,133 @@
+import { Component, OnInit } from '@angular/core';
+import { DatabaseService } from '@app/core/services';
+import { QueryOptions } from '@main/types';
+
+@Component({
+  selector: 'app-paginator',
+  templateUrl: './paginator.component.html',
+  styleUrls: ['./paginator.component.scss']
+})
+export class PaginatorComponent implements OnInit {
+
+  resultSetCount = 0;
+  resultSetTotal = 0;
+
+  page = 1;
+  pages = 1;
+  limit = 100;
+  offset = 0;
+
+  deactivatePrev = false;
+  deactivateNext = false;
+
+  limitOptions: any[] = [
+    { value: 100, title: '100' },
+    { value: 150, title: '150' },
+    { value: 200, title: '200' },
+    { value: 250, title: '250' },
+    { value: 300, title: '300' }
+  ];
+
+  constructor(
+    private databaseService: DatabaseService
+  ) { }
+
+  ngOnInit(): void {
+    this.databaseService.watchActivePage$.subscribe((result) => this.page = result);
+
+    this.databaseService.watchResultSetCount$.subscribe((result) => this.resultSetCount = result);
+    
+    this.databaseService.watchResultSetTotal$.subscribe((result) => {
+      this.resultSetTotal = result;
+      const pages = Math.ceil(this.resultSetTotal / this.limit);
+      this.pages = (pages) ? pages : 1; 
+      this.checkButtonStatus();
+    });
+  }
+
+  getQueryOptions(): QueryOptions {
+    return this.databaseService.getQueryOptions();
+  }
+
+  handlePageInput(event: any): void {
+    const el = event.srcElement;
+    const target = event.target;
+    const page = target.value;
+
+    if (page < 1) {
+      this.page = 1;
+    } else if (page > this.pages) {
+      this.page = this.pages;
+    } else {
+      this.page = page;
+    }
+
+    this.calculateOffset();
+
+    this.checkButtonStatus();
+
+    this.paginate();
+
+    if (event.keyCode === 13) {
+      el.blur();
+    }
+  }
+
+  onButtonClick(direction: string) {
+    if (direction === 'next') {
+      this.page++;
+    } else {
+      this.page--;
+    }
+
+    this.calculateOffset();
+    this.checkButtonStatus();
+    this.paginate();
+  }
+
+  onSelectChange(event: Event): void {
+    const target = event.target as HTMLInputElement;
+    this.limit = Number(target.value);
+    this.databaseService.resetPage(1);
+    this.calculateOffset();
+    this.checkButtonStatus();
+    this.paginate();
+  }
+
+  paginate(): void {
+    const options: QueryOptions = {
+      ...this.getQueryOptions(),
+      skip: this.offset,
+      take: this.limit
+    };
+
+    this.databaseService.execute(options);
+  }
+
+  checkButtonStatus(): void {
+    if (this.resultSetTotal > this.limit) {
+      if (this.page === 1) {
+        this.setButtonStatus(true, false);
+      } else if (this.page > 1 && this.page < this.pages) {
+        this.setButtonStatus(false, false);
+      } else {
+        this.setButtonStatus(false, true);
+      }
+    } else {
+      this.setButtonStatus(true, true);
+    }
+  }
+
+  setButtonStatus(prev: boolean, next: boolean): void {
+    this.deactivatePrev = prev;
+    this.deactivateNext = next;
+  }
+
+  calculateOffset(): void {
+    if (this.page === 1) {
+      this.offset = 0;
+    } else {
+      this.offset = (this.page - 1) * this.limit;
+    }
+  }
+}

package/src/app/shared/components/pairing/pairing.component.html

@@ -0,0 +1,20 @@
+<div class="component">
+  <div class="component__panel">
+
+    <div class="controls flex justify-between items-center border-top border-bottom">
+      <div class="controls__item flex justify-start items-center">
+        <div>
+          Pairing Component
+        </div>
+      </div>
+      <div class="controls__item flex justify-end items-center">
+        <i class="material-icons" (click)="onComponentSwitch();">more_horiz</i>
+      </div>
+    </div>
+
+    <div class="hover-scrollbox-y h-full min-h-full">
+
+    </div>
+
+  </div>
+</div>

package/src/app/shared/components/pairing/pairing.component.ts

@@ -0,0 +1,33 @@
+import { Component, Input, OnChanges, OnDestroy, OnInit } from '@angular/core';
+import { PresentationService } from '@app/core/services';
+
+@Component({
+  selector: 'app-pairing',
+  templateUrl: './pairing.component.html',
+  styleUrls: ['./pairing.component.scss']
+})
+export class PairingComponent implements OnChanges, OnInit, OnDestroy {
+
+  @Input() fontObject: opentype.Font;
+  @Input() fontFamily: string;
+  @Input() latestNews: any[] = [];
+
+  fontColor: string;
+
+  constructor(
+    private presentationService: PresentationService
+  ) { }
+
+  ngOnInit(): void {
+    const root = document.documentElement as HTMLElement;
+    this.fontColor = root.style.getPropertyValue('--fill-color');
+  }
+
+  ngOnDestroy() { }
+
+  ngOnChanges() { }
+
+  onComponentSwitch() {
+    this.presentationService.setInspectComponent('glyph-list');
+  }
+}

package/src/app/shared/components/search/search.component.html

@@ -0,0 +1,54 @@
+<figure class="border-bottom">
+  <figcaption>
+    <span class="material-icons">arrow_drop_down</span>
+    <span class="grow whitespace-nowrap">Font Search</span>
+    <span class="flex items-center justify-end material-icons-rounded">
+      <span title="Collapse" class="material-icons" (click)="onComponentSwitch();">more_horiz</span>
+    </span>
+  </figcaption>
+</figure>
+
+<div class="hover-scrollbox-y overflow-x-hidden">
+
+  <form class="p-5" (ngSubmit)="onSubmit()" #form="ngForm">
+
+    <div class="form-group">
+      <label form="term">Search term</label>
+      <input type="text" class="form-control" [(ngModel)]="model.term" #term="ngModel" name="term" id="term" />
+      <span class="form-text text-muted">Please enter a search term.</span>
+    </div>
+
+    <div class="form-group">
+      <label for="mimes">Mime types</label>
+      <select class="form-control" [(ngModel)]="model.mimes" #mimes="ngModel" name="mimes" id="mimes" multiple>
+        <option *ngFor="let item of fontTypes;" [value]="item.type">{{item.name}}</option>
+      </select>
+      <span class="form-text text-muted">Please select mime type.</span>
+    </div>
+
+    <div class="form-group">
+      <label for="sort">Sort by</label>
+      <select class="form-control" [(ngModel)]="model.sort" #sort="ngModel" name="sort" id="sort">
+        <option *ngFor="let item of dbColumns; let i = index;" [value]="item.name">{{item.name}}</option>
+      </select>
+      <span class="form-text text-muted">Select column sort.</span>
+    </div>
+
+    <div class="form-group">
+      <label for="order">Order by</label>
+      <select class="form-control" [(ngModel)]="model.order" #order="ngModel" name="order" id="order">
+        <option *ngFor="let item of orderBy; let i = index;" [value]="item">{{item}}</option>
+      </select>
+      <span class="form-text text-muted">Select orer by.</span>
+    </div>
+
+    <div class="form__actions">
+      <app-button [type]="'submit'" [title]="'Submit'"
+        [ngClass]="'app-button__xl app-button__rounded'">Submit</app-button>
+      <app-button [type]="'reset'" [title]="'Submit'" [ngClass]="'app-button__xl app-button__rounded'"
+        (click)="onReset();">Reset</app-button>
+    </div>
+
+  </form>
+
+</div>

package/src/app/shared/components/search/search.component.scss

@@ -0,0 +1,10 @@
+:host {
+    position: relative;
+    display: flex;
+    height: 100%;
+    width: 100%;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    overflow: hidden;
+}

package/src/app/shared/components/search/search.component.ts

@@ -0,0 +1,77 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { NgForm } from '@angular/forms';
+import { BreadcrumbService, DatabaseService, PresentationService } from '@app/core/services';
+import { SearchFormModel } from '@app/core/model';
+import { fontMimeTypes } from '@main/config/mimes';
+import { dbColumns } from '@main/config/database';
+
+@Component({
+  selector: 'app-search',
+  templateUrl: './search.component.html',
+  styleUrls: ['./search.component.scss']
+})
+export class SearchComponent implements OnInit {
+
+  @ViewChild(NgForm) form: NgForm;
+
+  model: SearchFormModel = new SearchFormModel('', [], 'id', 'ASC', true);
+
+  fontTypes = fontMimeTypes;
+  dbColumns = dbColumns;
+  orderBy = ['ASC', 'DESC'];
+
+  constructor(
+    private databaseService: DatabaseService,
+    private breadcrumbService: BreadcrumbService,
+    private presentationService: PresentationService
+  ) { }
+
+  ngOnInit(): void {
+  }
+
+  onSubmit(): void {
+    const value = this.form.value;
+
+    this.databaseService.resetWhere();
+
+    this.databaseService.setSearch(true);
+    this.databaseService.stats = false;
+
+    if (value?.term) {
+      this.databaseService.setWhere('term', value.term);
+      this.addBreadcrumb(value.term);
+    }
+
+    if (value?.mimes?.length) {
+      this.databaseService.setWhere('file_type', value.mimes);
+    }
+
+    if (value?.sort && value?.order) {
+      this.databaseService.setOrder(value.sort, value.order);
+    }
+
+    this.databaseService.run();
+  }
+
+  addBreadcrumb(searchTerm: string): void {
+    this.breadcrumbService.set([{
+      title: 'System Search',
+      link: '/main',
+      type: 'collection'
+    }, {
+      title: searchTerm,
+      link: '',
+      type: 'collection'
+    }]);
+  }
+
+  onReset(): void {
+    this.databaseService.setSearch(false);
+    this.databaseService.resetWhere().run();
+    this.breadcrumbService.setNavigation(this.databaseService.getCollectionId(), this.databaseService.getCollectionResultSet());
+  }
+
+  onComponentSwitch() {
+    this.presentationService.setAsideComponent('tables');
+  }
+}

package/src/app/shared/components/settings/database/database.component.html

@@ -0,0 +1,151 @@
+<div class="page">
+
+  <div class="page__header border-bottom">
+    <div class="page__header-title">
+      <h1>Database Management</h1>
+    </div>
+    <div class="flex items-center justify-end p-0 text-right">
+      <div>
+        <app-button [type]="'button'" [title]="'Add New'" [ngClass]="'app-button__md'" (click)="toggleForm()">Add
+          New</app-button>
+      </div>
+    </div>
+  </div>
+
+  <form class="form" (ngSubmit)="onSubmit(databaseForm)" #databaseForm="ngForm" *ngIf="screenToggle">
+
+    <div class="page__body">
+
+      <input type="hidden" name="name" id="name" [(ngModel)]="dbConnection.name" readonly>
+
+      <div class="form-group" *ngIf="drivers.length">
+        <label for="type">Database Type</label>
+        <select class="form-control" name="type" id="type" [(ngModel)]="dbConnection.type" #type="ngModel" required>
+          <option *ngFor="let item of drivers;" [value]="item">{{item}}</option>
+        </select>
+        <span class="form-text text-muted" [hidden]="type.valid || type.pristine">A database type is
+          required.</span>
+      </div>
+
+      <div class="form-group">
+        <label for="title">Title</label>
+        <input type="text" class="form-control" name="title" id="title" [(ngModel)]="dbConnection.title"
+          #title="ngModel" placeholder="My Connection" required>
+        <span class="form-text text-muted">A unique name to identify the connection.</span>
+      </div>
+
+      <div class="form-group">
+        <label for="host">Host</label>
+        <input type="text" class="form-control" name="host" id="host" [(ngModel)]="dbConnection.host" #host="ngModel"
+          placeholder="localhost">
+        <span class="form-text text-muted">The hostname used to make a connection.</span>
+      </div>
+
+      <div class="form-group">
+        <label for="port">Port</label>
+        <input type="text" class="form-control" name="port" id="port" [(ngModel)]="dbConnection.port" #port="ngModel"
+          placeholder="3306">
+        <span class="form-text text-muted">The port used to make a connection.</span>
+      </div>
+
+      <div class="form-group">
+        <label for="username">Username</label>
+        <input type="text" class="form-control" name="username" id="username" [(ngModel)]="dbConnection.username"
+          #username="ngModel">
+        <span class="form-text text-muted">Please enter your database username.</span>
+      </div>
+
+      <div class="form-group">
+        <label for="password">Password</label>
+        <input type="password" class="form-control" name="password" id="password" [(ngModel)]="dbConnection.password"
+          #password="ngModel">
+        <span class="form-text text-muted">Please enter your database password.</span>
+      </div>
+
+      <div class="form-group">
+        <label for="database">Database</label>
+        <input type="text" class="form-control" name="database" id="database" [(ngModel)]="dbConnection.database"
+          #database="ngModel" required>
+        <span class="form-text text-muted">Please enter a database name.</span>
+      </div>
+
+      <div class="form-group">
+        <label for="logging">Logging</label>
+        <select class="form-control" name="logging" id="logging" [(ngModel)]="dbConnection.logging" #logging="ngModel">
+          <option *ngFor="let item of loggingTypes;" [value]="item.value">{{item.key}}</option>
+        </select>
+      </div>
+
+      <div class="form-group">
+        <label for="synchronize">Synchronize</label>
+        <select class="form-control" name="synchronize" id="synchronize" [(ngModel)]="dbConnection.synchronize"
+          #synchronize="ngModel">
+          <option *ngFor="let item of synchronizeTypes;" [value]="item.value">{{item.key}}</option>
+        </select>
+      </div>
+
+      <div class="form-group form-group-last">
+        <label for="description">Description</label>
+        <textarea class="form-control" name="description" id="description" [(ngModel)]="dbConnection.description"
+          #description="ngModel" rows="3" required></textarea>
+      </div>
+
+    </div>
+
+    <div class="page__footer border-top">
+      <div class="flex items-center justify-end w-full">
+        <app-button [type]="'reset'" [title]="'Reset'" [ngClass]="'app-button__md app-button__success'" (click)="handleReset($event); databaseForm.reset()">Reset</app-button>
+        <app-button [type]="'submit'" [title]="'Submit'" [ngClass]="'app-button__md'" [attr.disabled]="buttonDisabled(databaseForm.form.valid)">Submit</app-button>
+      </div>
+    </div>
+
+  </form>
+
+  <!-- Body -->
+  <div class="flex flex-col p-5" *ngIf="!screenToggle">
+
+    <table class="table table-auto striped">
+      <thead>
+        <tr>
+          <th class="text-center sort_input">ID</th>
+          <th class="text-left">Title</th>
+          <th class="text-left">Description</th>
+          <th class="text-center">Type</th>
+          <th class="text-center">Enabled</th>
+          <th class="text-center">Synchronize</th>
+          <th class="text-center">Logging</th>
+          <th class="text-right">Actions</th>
+        </tr>
+      </thead>
+      <tbody>
+        <ng-container *ngFor="let item of connections; let i = index;">
+          <tr>
+            <td class="text-center">
+              <span class="material-icons" (click)="updateConnection($event, item)"
+                title="Update Connection">settings</span>
+            </td>
+            <td class="text-left">{{item.title}}</td>
+            <td class="text-left">{{item.description}}</td>
+            <td class="text-center">{{item.type}}</td>
+            <td class="text-center">
+              <span class="material-icons" *ngIf="item.enabled">done</span>
+            </td>
+            <td class="text-center">{{filterBoolean(item.synchronize)}}</td>
+            <td class="text-center">{{filterBoolean(item.logging)}}</td>
+            <td class="text-center">
+              <div class="flex items-center justify-end w-full">
+                <span class="material-icons" (click)="testConnection($event, item)"
+                  title="Test Connection">refresh</span>
+                <span class="material-icons" (click)="enableConnection($event, item)"
+                  title="Set As Default">grade</span>
+                <span class="material-icons" (click)="deleteConnection($event, item)"
+                  title="Delete Connection">delete_outline</span>
+              </div>
+            </td>
+          </tr>
+        </ng-container>
+      </tbody>
+    </table>
+  </div>
+
+</div>

package/src/app/shared/components/settings/database/database.component.ts

@@ -0,0 +1,145 @@
+import { Component, OnInit } from '@angular/core';
+import { NgForm } from '@angular/forms';
+import { ConfigService, MessageService, UtilsService } from '@app/core/services';
+import { DbConnectionModel } from '@app/core/model';
+
+@Component({
+  selector: 'app-settings-database',
+  templateUrl: './database.component.html',
+  styleUrls: ['./database.component.scss']
+})
+export class DatabaseComponent implements OnInit {
+
+  config: any;
+
+  connections = [];
+  drivers = [];
+
+  loggers = [];
+
+  loggingTypes = [{
+    key: 'Yes',
+    value: true
+  }, {
+    key: 'No',
+    value: false
+  }];
+
+  synchronizeTypes = [{
+    key: 'Yes',
+    value: true
+  }, {
+    key: 'No',
+    value: false
+  }];
+
+  screenToggle = false;
+
+  dbConnection: DbConnectionModel = new DbConnectionModel('', '', '', '', '');
+
+  constructor(
+    private configService: ConfigService,
+    private messageService: MessageService,
+    private utils: UtilsService
+  ) {
+    this.config = this.configService.getConfig();
+  }
+
+  ngOnInit(): void {
+    if (this.config?.database) {
+      this.connections = this.config.database.connections;
+      this.drivers = this.config.database.drivers;
+    }
+  }
+
+  toggleForm(): void {
+    this.screenToggle = !this.screenToggle;
+  }
+
+  filterBoolean(value: boolean): string {
+    return value ? 'Yes' : 'No';
+  }
+
+  deleteConnection(_event: Event, item: any): void {
+    if (item.name === 'default') {
+      return;
+    }
+
+    if (item.enabled) {
+      return;
+    }
+
+    const options = {
+      type: 'question',
+      buttons: ['Yes', 'No'],
+      title: 'Confirm',
+      message: 'Are you sure you want to delete this connection?'
+    };
+
+    this.messageService.showMessageBox(options).then((res: any) => {
+      if (res.response === 0) {
+        const result = this.connections.find(x => x.name === item.name);
+        if (result) {
+          this.connections = this.connections.filter((connection) => connection.name !== result.name);
+          this.messageService.deleteDbConnection(result.name).then((connections: any) => this.connections = connections);
+        }
+      }
+    });
+  }
+
+  updateConnection(_event: Event, item: any): void {
+    if (item?.name === 'default') {
+      return;
+    }
+
+    const result = this.connections.find(x => x.name === item.name);
+
+    if (result) {
+      this.toggleForm();
+      this.dbConnection = new DbConnectionModel(result.name, result.title, result.description, result.type, result.database, result.username, result.password, result.host, result.port, result.logging, result.synchronize);
+    }
+  }
+
+  enableConnection(_event: Event, item: any): void {
+    this.messageService.enableDbConnection(item).then(() => this.messageService.reloadWindow());
+  }
+
+  testConnection(_event: Event, item: any): void {
+    this.messageService.testDbConnection(item).then((result: any) => {
+      if (result.type === 'success') {
+        //this.alertService.success(result.message);
+      } else {
+        //this.alertService.error(result.message);
+      }
+    });
+  }
+
+  buttonDisabled(isValid: boolean) {
+    return (isValid) ? null : true;
+  }
+
+  handleReset(_event: Event): void {
+    this.toggleForm();
+  }
+
+  onSubmit(form: NgForm): void {
+    if (!form.valid) {
+      return;
+    }
+
+    const values = form.value;
+    if (values?.name === 'default') {
+      return;
+    }
+
+    const isUpdate = (values?.name !== '') ? true : false;
+    values.name = (isUpdate) ? values.name : this.utils.randomString(5).toUpperCase();
+
+    this.messageService.createDbConnection(values).then((result: any) => {
+      this.connections = result;
+      this.toggleForm();
+    });
+
+    //this.alertService.success((isUpdate) ? 'Successfully updated connection.' : 'Successfully created connection.');
+  }
+}