feat: more refactors (#2844)

web/projects/ui/src/app/services/api/mock-patch.ts

@@ -191,6 +191,7 @@ export const mockPatchData: DataModel = {
       backupProgress: {},
     },
     hostname: 'random-words',
+    // @ts-ignore
     host: {
       bindings: {
         80: {

web/projects/ui/src/app/services/breadcrumbs.service.ts

@@ -1,85 +0,0 @@
-import { inject, Injectable } from '@angular/core'
-import { PatchDB } from 'patch-db-client'
-import { BehaviorSubject } from 'rxjs'
-import {
-  DataModel,
-  PackageDataEntry,
-} from 'src/app/services/patch-db/data-model'
-import { SYSTEM_UTILITIES } from 'src/app/utils/system-utilities'
-import { toRouterLink } from 'src/app/utils/to-router-link'
-import { getAllPackages, getManifest } from 'src/app/utils/get-package-data'
-
-export interface Breadcrumb {
-  title: string
-  routerLink: string
-  subtitle?: string
-  icon?: string
-}
-
-@Injectable({
-  providedIn: 'root',
-})
-export class BreadcrumbsService extends BehaviorSubject<readonly Breadcrumb[]> {
-  private readonly patch = inject<PatchDB<DataModel>>(PatchDB)
-
-  constructor() {
-    super([])
-  }
-
-  async update(page: string) {
-    const packages = await getAllPackages(this.patch)
-
-    try {
-      this.next(toBreadcrumbs(page.split('?')[0], packages))
-    } catch (e) {
-      this.next([])
-    }
-  }
-}
-
-function toBreadcrumbs(
-  id: string,
-  packages: Record<string, PackageDataEntry> = {},
-): Breadcrumb[] {
-  if (id.startsWith('/portal/') && !id.startsWith('/portal/services/')) {
-    const [page, ...path] = id.replace('/portal/', '').split('/')
-    const service = `/portal/${page}`
-    const { icon, title } = SYSTEM_UTILITIES[service]
-    const breadcrumbs: Breadcrumb[] = [
-      {
-        icon,
-        title,
-        routerLink: toRouterLink(service),
-      },
-    ]
-
-    if (path.length) {
-      breadcrumbs.push({
-        title: path.join(': '),
-        routerLink: breadcrumbs[0].routerLink + '/' + path.join('/'),
-      })
-    }
-
-    return breadcrumbs
-  }
-
-  const [service, ...path] = id.split('/')
-  const { title, version } = getManifest(packages[service])
-  const breadcrumbs: Breadcrumb[] = [
-    {
-      icon: packages[service].icon,
-      title,
-      subtitle: version,
-      routerLink: toRouterLink(service),
-    },
-  ]
-
-  if (path.length) {
-    breadcrumbs.push({
-      title: path.join(': '),
-      routerLink: breadcrumbs[0].routerLink + '/' + path.join('/'),
-    })
-  }
-
-  return breadcrumbs
-}

web/projects/ui/src/app/services/title.service.ts

@@ -0,0 +1,45 @@
+import {
+  Directive,
+  EmbeddedViewRef,
+  inject,
+  Injectable,
+  OnDestroy,
+  OnInit,
+  TemplateRef,
+  ViewContainerRef,
+} from '@angular/core'
+import { tuiButtonOptionsProvider } from '@taiga-ui/core'
+
+@Injectable({
+  providedIn: 'root',
+})
+export class TitleService {
+  private vcr?: ViewContainerRef
+
+  register(vcr: ViewContainerRef) {
+    this.vcr = vcr
+  }
+
+  add(template: TemplateRef<any>) {
+    return this.vcr?.createEmbeddedView(template)
+  }
+}
+
+@Directive({
+  standalone: true,
+  selector: 'ng-template[title]',
+  providers: [tuiButtonOptionsProvider({ appearance: '' })],
+})
+export class TitleDirective implements OnInit, OnDestroy {
+  private readonly template = inject(TemplateRef)
+  private readonly service = inject(TitleService)
+  private view?: EmbeddedViewRef<any>
+
+  ngOnInit() {
+    this.view = this.service.add(this.template)
+  }
+
+  ngOnDestroy() {
+    this.view?.destroy()
+  }
+}