fontastic 0.1.3 → 0.2.0

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

@@ -1,77 +1,221 @@
-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');
-  }
-}
+import { Component, inject, signal } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { DatabaseService, PresentationService } from '../../../core/services';
+import type { Collection } from '@main/database/entity/Collection.schema';
+
+const FILE_TYPES = [
+  { label: 'TrueType (.ttf)', value: 'font/ttf' },
+  { label: 'OpenType (.otf)', value: 'font/otf' },
+  { label: 'WOFF (.woff)', value: 'font/woff' },
+  { label: 'WOFF2 (.woff2)', value: 'font/woff2' },
+];
+
+const SEARCH_FIELDS = [
+  { label: 'Font Name', value: 'full_name' },
+  { label: 'Font Family', value: 'font_family' },
+  { label: 'Font Subfamily', value: 'font_subfamily' },
+  { label: 'PostScript Name', value: 'post_script_name' },
+  { label: 'Designer', value: 'designer' },
+  { label: 'Manufacturer', value: 'manufacturer' },
+  { label: 'Copyright', value: 'copyright' },
+  { label: 'License', value: 'license' },
+  { label: 'Description', value: 'description' },
+  { label: 'Trademark', value: 'trademark' },
+  { label: 'File Name', value: 'file_name' },
+  { label: 'Version', value: 'version' },
+];
+
+const SORT_OPTIONS = [
+  { label: 'Name (A-Z)', column: 'full_name', direction: 'ASC' },
+  { label: 'Name (Z-A)', column: 'full_name', direction: 'DESC' },
+  { label: 'Family (A-Z)', column: 'font_family', direction: 'ASC' },
+  { label: 'Family (Z-A)', column: 'font_family', direction: 'DESC' },
+  { label: 'File Name (A-Z)', column: 'file_name', direction: 'ASC' },
+  { label: 'File Name (Z-A)', column: 'file_name', direction: 'DESC' },
+  { label: 'File Size (Smallest)', column: 'file_size', direction: 'ASC' },
+  { label: 'File Size (Largest)', column: 'file_size', direction: 'DESC' },
+  { label: 'Date Added (Newest)', column: 'created', direction: 'DESC' },
+  { label: 'Date Added (Oldest)', column: 'created', direction: 'ASC' },
+  { label: 'Date Updated (Newest)', column: 'updated', direction: 'DESC' },
+  { label: 'Date Updated (Oldest)', column: 'updated', direction: 'ASC' },
+  { label: 'Designer (A-Z)', column: 'designer', direction: 'ASC' },
+  { label: 'Designer (Z-A)', column: 'designer', direction: 'DESC' },
+];
+
+@Component({
+  selector: 'app-search',
+  standalone: true,
+  imports: [FormsModule],
+  templateUrl: './search.component.html',
+})
+export class SearchComponent {
+  readonly db = inject(DatabaseService);
+  readonly presentation = inject(PresentationService);
+
+  readonly fileTypes = FILE_TYPES;
+  readonly searchFields = SEARCH_FIELDS;
+  readonly sortOptions = SORT_OPTIONS;
+
+  searchTerm = '';
+  selectedFileTypes: string[] = [];
+  selectedSearchFields: string[] = [];
+
+  // Status filters
+  favoritesOnly = false;
+  systemOnly = false;
+  installedOnly = false;
+
+  // Collection filter
+  selectedCollectionId: number | null = null;
+
+  // Designer/Manufacturer filter
+  designerFilter = '';
+  manufacturerFilter = '';
+
+  // Font subfamily filter
+  subfamilyFilter = '';
+
+  // File size range (KB)
+  fileSizeMin: number | null = null;
+  fileSizeMax: number | null = null;
+
+  // Date range
+  dateFrom = '';
+  dateTo = '';
+
+  // Sort
+  selectedSortIndex: number | null = null;
+
+  readonly hasSearched = signal(false);
+
+  get collections(): Collection[] {
+    return this.db.collections();
+  }
+
+  toggleFileType(value: string) {
+    const idx = this.selectedFileTypes.indexOf(value);
+    if (idx >= 0) {
+      this.selectedFileTypes.splice(idx, 1);
+    } else {
+      this.selectedFileTypes.push(value);
+    }
+  }
+
+  isFileTypeSelected(value: string): boolean {
+    return this.selectedFileTypes.includes(value);
+  }
+
+  toggleSearchField(value: string) {
+    const idx = this.selectedSearchFields.indexOf(value);
+    if (idx >= 0) {
+      this.selectedSearchFields.splice(idx, 1);
+    } else {
+      this.selectedSearchFields.push(value);
+    }
+  }
+
+  isSearchFieldSelected(value: string): boolean {
+    return this.selectedSearchFields.includes(value);
+  }
+
+  onSearch() {
+    const where: { key: string; value: any }[] = [];
+
+    if (this.searchTerm.trim()) {
+      where.push({ key: 'term', value: this.searchTerm.trim() });
+    }
+
+    if (this.selectedSearchFields.length > 0) {
+      where.push({ key: 'search_fields', value: [...this.selectedSearchFields] });
+    }
+
+    if (this.selectedFileTypes.length > 0) {
+      where.push({ key: 'file_type', value: [...this.selectedFileTypes] });
+    }
+
+    if (this.favoritesOnly) {
+      where.push({ key: 'favorite', value: 1 });
+    }
+
+    if (this.systemOnly) {
+      where.push({ key: 'system', value: 1 });
+    }
+
+    if (this.installedOnly) {
+      where.push({ key: 'installable', value: 1 });
+    }
+
+    if (this.selectedCollectionId !== null) {
+      where.push({ key: 'collection_id', value: this.selectedCollectionId });
+    }
+
+    if (this.designerFilter.trim()) {
+      where.push({ key: 'designer', value: this.designerFilter.trim() });
+    }
+
+    if (this.manufacturerFilter.trim()) {
+      where.push({ key: 'manufacturer', value: this.manufacturerFilter.trim() });
+    }
+
+    if (this.subfamilyFilter.trim()) {
+      where.push({ key: 'font_subfamily', value: this.subfamilyFilter.trim() });
+    }
+
+    if (this.fileSizeMin !== null && this.fileSizeMin > 0) {
+      where.push({ key: 'file_size_min', value: this.fileSizeMin * 1024 });
+    }
+
+    if (this.fileSizeMax !== null && this.fileSizeMax > 0) {
+      where.push({ key: 'file_size_max', value: this.fileSizeMax * 1024 });
+    }
+
+    if (this.dateFrom) {
+      where.push({ key: 'date_from', value: this.dateFrom });
+    }
+
+    if (this.dateTo) {
+      where.push({ key: 'date_to', value: this.dateTo });
+    }
+
+    if (where.length === 0) {
+      return;
+    }
+
+    const order =
+      this.selectedSortIndex !== null
+        ? {
+            column: this.sortOptions[this.selectedSortIndex].column,
+            direction: this.sortOptions[this.selectedSortIndex].direction,
+          }
+        : undefined;
+
+    this.hasSearched.set(true);
+    this.db.selectSearch(where, order);
+  }
+
+  onReset() {
+    this.searchTerm = '';
+    this.selectedFileTypes = [];
+    this.selectedSearchFields = [];
+    this.favoritesOnly = false;
+    this.systemOnly = false;
+    this.installedOnly = false;
+    this.selectedCollectionId = null;
+    this.designerFilter = '';
+    this.manufacturerFilter = '';
+    this.subfamilyFilter = '';
+    this.fileSizeMin = null;
+    this.fileSizeMax = null;
+    this.dateFrom = '';
+    this.dateTo = '';
+    this.selectedSortIndex = null;
+    this.hasSearched.set(false);
+    this.db.clearSearch();
+  }
+
+  onKeydown(event: KeyboardEvent) {
+    if (event.key === 'Enter') {
+      this.onSearch();
+    }
+  }
+}

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

@@ -1,26 +1,10 @@
-import { Component, OnInit } from '@angular/core';
-import { PresentationService } from '@app/core/services';
-
-@Component({
-  selector: 'app-spinner',
-  templateUrl: './spinner.component.html',
-  styleUrls: ['./spinner.component.scss']
-})
-export class SpinnerComponent implements OnInit {
-
-  isActivated = false;
-
-  constructor(
-    private presentationService: PresentationService
-  ) { }
-
-  ngOnInit() {
-    this.presentationService._loadingSpinner.subscribe((status: boolean) => {
-      if (status) {
-        this.isActivated = status;
-      } else {
-        setTimeout(() => this.isActivated = status, 1e3/3);
-      }
-    });
-  }
-}
+import { Component, input } from '@angular/core';
+
+@Component({
+  selector: 'app-spinner',
+  standalone: true,
+  template: `<span class="app-spinner" [class.is-animating]="animating()"></span>`,
+})
+export class SpinnerComponent {
+  readonly animating = input(false);
+}

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

@@ -0,0 +1,207 @@
+<div class="panel">
+  <div class="h-full flex items-center justify-around px-3">
+    <div class="flex-1 flex items-center gap-3">
+      @if (db.totalPages() > 1) {
+        <div class="flex items-center gap-0.5 text-[11px]">
+          <button
+            class="px-1 py-0.5 rounded cursor-pointer disabled:cursor-default transition-colors"
+            [style.color]="'var(--text-secondary)'"
+            [disabled]="db.currentPage() === 1"
+            [class.opacity-30]="db.currentPage() === 1"
+            (click)="db.firstPage()"
+          >
+            <span
+              class="material-symbols-outlined text-sm"
+              style="
+                font-variation-settings:
+                  'opsz' 20,
+                  'wght' 300;
+              "
+              >first_page</span
+            >
+          </button>
+          <button
+            class="px-1 py-0.5 rounded cursor-pointer disabled:cursor-default transition-colors"
+            [style.color]="'var(--text-secondary)'"
+            [disabled]="db.currentPage() === 1"
+            [class.opacity-30]="db.currentPage() === 1"
+            (click)="db.prevPage()"
+          >
+            <span
+              class="material-symbols-outlined text-sm"
+              style="
+                font-variation-settings:
+                  'opsz' 20,
+                  'wght' 300;
+              "
+              >chevron_left</span
+            >
+          </button>
+          <span class="px-1.5 select-none" [style.color]="'var(--text-muted)'">{{ db.currentPage() }} / {{ db.totalPages() }}</span>
+          <button
+            class="px-1 py-0.5 rounded cursor-pointer disabled:cursor-default transition-colors"
+            [style.color]="'var(--text-secondary)'"
+            [disabled]="db.currentPage() === db.totalPages()"
+            [class.opacity-30]="db.currentPage() === db.totalPages()"
+            (click)="db.nextPage()"
+          >
+            <span
+              class="material-symbols-outlined text-sm"
+              style="
+                font-variation-settings:
+                  'opsz' 20,
+                  'wght' 300;
+              "
+              >chevron_right</span
+            >
+          </button>
+          <button
+            class="px-1 py-0.5 rounded cursor-pointer disabled:cursor-default transition-colors"
+            [style.color]="'var(--text-secondary)'"
+            [disabled]="db.currentPage() === db.totalPages()"
+            [class.opacity-30]="db.currentPage() === db.totalPages()"
+            (click)="db.lastPage()"
+          >
+            <span
+              class="material-symbols-outlined text-sm"
+              style="
+                font-variation-settings:
+                  'opsz' 20,
+                  'wght' 300;
+              "
+              >last_page</span
+            >
+          </button>
+        </div>
+      }
+      <span class="text-[11px]" [style.color]="'var(--text-muted)'">
+        @if (db.storeCount()) {
+          {{ db.storeCount() }} fonts
+        }
+      </span>
+    </div>
+
+    <div class="flex-1 flex items-center justify-center gap-3">
+      <input
+        type="text"
+        class="form-input w-52"
+        placeholder="Enter preview text..."
+        [value]="displayText"
+        (input)="handleDisplayInput($event)"
+      />
+      <select class="form-select" [value]="presentation.quickTextIndex()" (change)="handleQuickTextChange($event)">
+        @for (item of presentation.quickTexts; track item.title; let i = $index) {
+          <option [value]="i">{{ item.title }}</option>
+        }
+      </select>
+      @if (news.hasArticles()) {
+        <button class="flex items-center cursor-pointer" title="Use random news headline as preview text" (click)="setRandomHeadline()">
+          <span
+            class="material-symbols-outlined text-sm"
+            [style.color]="'var(--text-muted)'"
+            style="
+              font-variation-settings:
+                'opsz' 20,
+                'wght' 300;
+            "
+            >newspaper</span
+          >
+        </button>
+      }
+    </div>
+
+    <div class="flex items-center gap-2 mx-6">
+      <input type="color" class="color-picker" [value]="colorPickerValue()" (input)="handleFontColor($event)" />
+      <input type="color" class="color-picker" [value]="bgPickerValue()" (input)="handleBackgroundColor($event)" />
+    </div>
+
+    <div class="flex-1 flex items-center justify-end gap-3">
+      <div class="flex items-center gap-2">
+        <span
+          class="material-symbols-outlined text-sm"
+          [style.color]="'var(--text-muted)'"
+          style="
+            font-variation-settings:
+              'opsz' 20,
+              'wght' 300;
+          "
+          >text_decrease</span
+        >
+        <input
+          type="range"
+          class="preview-range"
+          min="8"
+          max="72"
+          step="1"
+          [value]="presentation.fontSize()"
+          (input)="handleFontSize($event)"
+        />
+        <span
+          class="material-symbols-outlined text-sm"
+          [style.color]="'var(--text-muted)'"
+          style="
+            font-variation-settings:
+              'opsz' 20,
+              'wght' 300;
+          "
+          >text_increase</span
+        >
+        <span class="text-[11px] w-8 text-center select-none" [style.color]="'var(--text-muted)'">{{ presentation.fontSize() }}px</span>
+      </div>
+      <span
+        class="material-symbols-outlined text-sm"
+        [style.color]="'var(--text-muted)'"
+        style="
+          font-variation-settings:
+            'opsz' 20,
+            'wght' 300;
+        "
+        >format_letter_spacing</span
+      >
+      <input
+        type="range"
+        class="preview-range"
+        min="-5"
+        max="20"
+        step="0.5"
+        [value]="presentation.letterSpacing()"
+        (input)="handleLetterSpacing($event)"
+      />
+      <span class="text-[11px] w-10 text-center select-none" [style.color]="'var(--text-muted)'">{{ presentation.letterSpacing() }}px</span>
+      <span
+        class="material-symbols-outlined text-sm"
+        [style.color]="'var(--text-muted)'"
+        style="
+          font-variation-settings:
+            'opsz' 20,
+            'wght' 300;
+        "
+        >width</span
+      >
+      <input
+        type="range"
+        class="preview-range"
+        min="-5"
+        max="20"
+        step="0.5"
+        [value]="presentation.wordSpacing()"
+        (input)="handleWordSpacing($event)"
+      />
+      <span class="text-[11px] w-10 text-center select-none" [style.color]="'var(--text-muted)'">{{ presentation.wordSpacing() }}px</span>
+    </div>
+
+    <div class="flex items-center justify-end">
+      <button class="toolbar-reset-btn" (click)="presentation.resetToolbarDefaults()">
+        <span
+          class="material-symbols-outlined"
+          style="
+            font-variation-settings:
+              'opsz' 20,
+              'wght' 300;
+          "
+          >restart_alt</span
+        >
+      </button>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,99 @@
+import { Component, inject, computed, ElementRef } from '@angular/core';
+import { DatabaseService, NewsService, PresentationService } from '../../../core/services';
+
+@Component({
+  selector: 'app-toolbar',
+  standalone: true,
+  templateUrl: './toolbar.component.html',
+})
+export class ToolbarComponent {
+  readonly db = inject(DatabaseService);
+  readonly presentation = inject(PresentationService);
+  readonly news = inject(NewsService);
+  private el = inject(ElementRef);
+
+  setRandomHeadline() {
+    const article = this.news.randomArticle();
+    if (article?.title) {
+      this.presentation.setCustomText(article.title);
+    }
+  }
+
+  readonly colorPickerValue = computed(() => {
+    return this.presentation.fontColor() ?? this.getInheritedColor();
+  });
+
+  readonly bgPickerValue = computed(() => {
+    return this.presentation.backgroundColor() ?? this.getInheritedBgColor();
+  });
+
+  get displayText() {
+    return this.presentation.displayText();
+  }
+
+  handleDisplayInput(event: Event) {
+    const value = (event.target as HTMLInputElement).value;
+    this.presentation.setCustomText(value);
+  }
+
+  handleQuickTextChange(event: Event) {
+    const index = +(event.target as HTMLSelectElement).value;
+    this.presentation.customText.set(null);
+    this.presentation.quickTextIndex.set(index);
+  }
+
+  handleFontSize(event: Event) {
+    const value = +(event.target as HTMLInputElement).value;
+    this.presentation.fontSize.set(value);
+  }
+
+  handleFontColor(event: Event) {
+    const value = (event.target as HTMLInputElement).value;
+    this.presentation.fontColor.set(value);
+  }
+
+  handleBackgroundColor(event: Event) {
+    const value = (event.target as HTMLInputElement).value;
+    this.presentation.backgroundColor.set(value);
+  }
+
+  handleLetterSpacing(event: Event) {
+    const value = +(event.target as HTMLInputElement).value;
+    this.presentation.letterSpacing.set(value);
+  }
+
+  handleWordSpacing(event: Event) {
+    const value = +(event.target as HTMLInputElement).value;
+    this.presentation.wordSpacing.set(value);
+  }
+
+  private getInheritedColor(): string {
+    const rgb = getComputedStyle(this.el.nativeElement).color;
+    const match = rgb.match(/\d+/g);
+    if (match && match.length >= 3) {
+      return (
+        '#' +
+        match
+          .slice(0, 3)
+          .map((n) => (+n).toString(16).padStart(2, '0'))
+          .join('')
+      );
+    }
+    return '#000000';
+  }
+
+  private getInheritedBgColor(): string {
+    const rgb = getComputedStyle(this.el.nativeElement).backgroundColor;
+    const match = rgb.match(/\d+/g);
+    if (match && match.length >= 3) {
+      return (
+        '#' +
+        match
+          .slice(0, 3)
+          .map((n) => (+n).toString(16).padStart(2, '0'))
+          .join('')
+      );
+    }
+    return '#ffffff';
+  }
+}