feat: move all frontend projects under the same Angular workspace (#1141)

* feat: move all frontend projects under the same Angular workspace

* Refactor/angular workspace (#1154)

* update frontend build steps

Co-authored-by: waterplea <alexander@inkin.ru>
Co-authored-by: Matt Hill <matthewonthemoon@gmail.com>
Co-authored-by: Lucy Cifferello <12953208+elvece@users.noreply.github.com>

frontend/projects/ui/src/app/pipes/convert-bytes.pipe.ts

@@ -0,0 +1,18 @@
+import { Pipe, PipeTransform } from '@angular/core'
+
+// converts bytes to gigabytes
+@Pipe({
+  name: 'convertBytes',
+})
+export class ConvertBytesPipe implements PipeTransform {
+  transform (bytes: number): string {
+    if (bytes === 0) return '0 Bytes'
+
+    const k = 1024
+    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
+
+    const i = Math.floor(Math.log(bytes) / Math.log(k))
+
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i]
+  }
+}

frontend/projects/ui/src/app/pipes/empty.pipe.ts

@@ -0,0 +1,12 @@
+import { Pipe, PipeTransform } from '@angular/core'
+import { isEmptyObject } from '../util/misc.util'
+
+@Pipe({
+  name: 'empty',
+})
+export class EmptyPipe implements PipeTransform {
+  transform (val: object | [] = { }): boolean {
+    if (Array.isArray(val)) return !val.length
+    return isEmptyObject(val)
+  }
+}

frontend/projects/ui/src/app/pipes/emver.pipe.ts

@@ -0,0 +1,46 @@
+import { Pipe, PipeTransform } from '@angular/core'
+import { Emver } from '../services/emver.service'
+@Pipe({
+    name: 'satisfiesEmver',
+})
+export class EmverSatisfiesPipe implements PipeTransform {
+  constructor (private readonly emver: Emver) {  }
+
+  transform (versionUnderTest: string, range: string): boolean {
+    return this.emver.satisfies(versionUnderTest, range)
+  }
+}
+
+@Pipe({
+    name: 'compareEmver',
+})
+export class EmverComparesPipe implements PipeTransform {
+  constructor (private readonly emver: Emver) {  }
+
+  transform (first: string, second: string): SemverResult {
+    try {
+      return this.emver.compare(first, second) as SemverResult
+    } catch (e) {
+      console.warn(`emver comparison failed`, e, first, second)
+      return 'comparison-impossible'
+    }
+  }
+}
+type SemverResult = 0 | 1 | -1 | 'comparison-impossible'
+
+@Pipe({
+    name: 'displayEmver',
+})
+export class EmverDisplayPipe implements PipeTransform {
+  constructor () { }
+
+  transform (version: string): string {
+    return displayEmver(version)
+  }
+}
+
+export function displayEmver (version: string): string {
+  const vs = version.split('.')
+  if (vs.length === 4) return `${vs[0]}.${vs[1]}.${vs[2]}~${vs[3]}`
+  return version
+}

frontend/projects/ui/src/app/pipes/includes.pipe.ts

@@ -0,0 +1,10 @@
+import { Pipe, PipeTransform } from '@angular/core'
+
+@Pipe({
+    name: 'includes',
+})
+export class IncludesPipe implements PipeTransform {
+  transform<T> (list: T[], val: T): boolean {
+    return list.includes(val)
+  }
+}

frontend/projects/ui/src/app/pipes/install-progress.pipe.ts

@@ -0,0 +1,14 @@
+import { Pipe, PipeTransform } from '@angular/core'
+import { InstallProgress } from '../services/patch-db/data-model'
+import { packageLoadingProgress } from '../util/package-loading-progress'
+
+@Pipe({
+  name: 'installProgress',
+})
+export class InstallProgressPipe implements PipeTransform {
+  transform(loadData: InstallProgress): string {
+    const { totalProgress } = packageLoadingProgress(loadData)
+
+    return totalProgress < 99 ? totalProgress + '%' : 'finalizing'
+  }
+}

frontend/projects/ui/src/app/pipes/install-state.pipe.ts

@@ -0,0 +1,15 @@
+import { Pipe, PipeTransform } from '@angular/core'
+import { PackageDataEntry } from '../services/patch-db/data-model'
+import {
+  packageLoadingProgress,
+  ProgressData,
+} from '../util/package-loading-progress'
+
+@Pipe({
+  name: 'installState',
+})
+export class InstallState implements PipeTransform {
+  transform(pkg: PackageDataEntry): ProgressData | null {
+    return packageLoadingProgress(pkg['install-progress'])
+  }
+}

frontend/projects/ui/src/app/pipes/markdown.pipe.ts

@@ -0,0 +1,17 @@
+import { Pipe, PipeTransform } from '@angular/core'
+import * as marked from 'marked'
+import * as DOMPurify from 'dompurify'
+
+@Pipe({
+  name: 'markdown',
+})
+export class MarkdownPipe implements PipeTransform {
+  transform (value: any): any {
+    if (value && value.length > 0) {
+      const html = marked(value)
+      const sanitized = DOMPurify.sanitize(html)
+      return sanitized
+    }
+    return value
+  }
+}

frontend/projects/ui/src/app/pipes/mask.pipe.ts

@@ -0,0 +1,12 @@
+import { Pipe, PipeTransform } from '@angular/core'
+
+@Pipe({
+  name: 'mask',
+})
+export class MaskPipe implements PipeTransform {
+  transform (val: string, max = 16): string {
+    if (!val) return val
+    const times = val.length <= max ? val.length : max
+    return '●'.repeat(times)
+  }
+}

frontend/projects/ui/src/app/pipes/notification-color.pipe.ts

@@ -0,0 +1,23 @@
+import { Pipe, PipeTransform } from '@angular/core'
+import { NotificationLevel, ServerNotification } from '../services/api/api.types'
+
+@Pipe({
+  name: 'notificationColor',
+})
+export class NotificationColorPipe implements PipeTransform {
+  transform (notification: ServerNotification<any>): string {
+    const level = notification.level
+    switch (level) {
+      case NotificationLevel.Info:
+        return 'primary'
+      case NotificationLevel.Success:
+        return 'success'
+      case NotificationLevel.Warning:
+        return 'warning'
+      case NotificationLevel.Error:
+        return 'danger'
+      default:
+        return ''
+    }
+  }
+}

frontend/projects/ui/src/app/pipes/truncate.pipe.ts

@@ -0,0 +1,33 @@
+import { Pipe, PipeTransform } from '@angular/core'
+
+@Pipe({
+  name: 'truncateCenter',
+})
+export class TruncateCenterPipe implements PipeTransform {
+  transform (value: string, front: number, back: number, fullOnDesktop: boolean = false): unknown {
+    if (value.length <= front + back + 3) return value
+    if (fullOnDesktop && screen.width > 500) return value
+    return value.slice(0, front) + '...' + value.slice(value.length - back, value.length)
+  }
+}
+
+@Pipe({
+  name: 'truncateEnd',
+})
+export class TruncateEndPipe implements PipeTransform {
+  transform (val: string, length: number): unknown {
+    if (val.length <= length) return val
+    return val.slice(0, length) + '...'
+  }
+}
+
+@Pipe({
+  name: 'truncateTail',
+})
+export class TruncateTailPipe implements PipeTransform {
+  transform (val: string, length: number): unknown {
+    if (val.length <= length) return val
+    return '...' + val.substr(length * -1)
+  }
+}
+

frontend/projects/ui/src/app/pipes/typeof.pipe.ts

@@ -0,0 +1,16 @@
+import { Pipe, PipeTransform } from '@angular/core'
+
+@Pipe({
+  name: 'typeof',
+})
+export class TypeofPipe implements PipeTransform {
+  transform (value: any): any {
+    if (value === null) {
+      return 'null'
+    } else if (Array.isArray(value)) {
+      return 'array'
+    }
+
+    return typeof value
+  }
+}

frontend/projects/ui/src/app/pipes/ui.pipe.ts

@@ -0,0 +1,25 @@
+import { Pipe, PipeTransform } from '@angular/core'
+import { InterfaceDef, PackageMainStatus, PackageState } from '../services/patch-db/data-model'
+import { ConfigService, hasUi } from '../services/config.service'
+
+@Pipe({
+  name: 'hasUi',
+})
+export class HasUiPipe implements PipeTransform {
+
+  transform (interfaces: { [id: string]: InterfaceDef }): boolean {
+    return hasUi(interfaces)
+  }
+}
+
+@Pipe({
+  name: 'isLaunchable',
+})
+export class LaunchablePipe implements PipeTransform {
+
+  constructor (private configService: ConfigService) { }
+
+  transform (state: PackageState, status: PackageMainStatus, interfaces: { [id: string]: InterfaceDef }): boolean {
+    return this.configService.isLaunchable(state, status, interfaces)
+  }
+}

frontend/projects/ui/src/app/pipes/unit-conversion.pipe.ts

@@ -0,0 +1,24 @@
+import { Pipe, PipeTransform } from '@angular/core'
+
+@Pipe({
+  name: 'durationToSeconds',
+})
+export class DurationToSecondsPipe implements PipeTransform {
+  transform (duration: string | null): number {
+    if (!duration) return 0
+    const splitUnit = duration.match(/^([0-9]*(\.[0-9]+)?)(ns|µs|ms|s|m|d)$/)
+    const unit = splitUnit[3]
+    const num = splitUnit[1]
+    return Number(num) * unitsToSeconds[unit]
+  }
+}
+
+const unitsToSeconds = {
+  'ns': 1e-9,
+  'µs': 1e-6,
+  'ms': 0.001,
+  's': 1,
+  'm': 60,
+  'h': 3600,
+  'd': 86400,
+}