From 4204b4af90f0da38cd6dbcd954db25473b70e78e Mon Sep 17 00:00:00 2001 From: Alex Inkin Date: Fri, 21 Jul 2023 08:17:32 +0800 Subject: [PATCH] feat(portal): basis for drawer and cards (#2370) --- frontend/projects/shared/styles/taiga.scss | 29 ++++++++ .../projects/ui/src/app/app.component.html | 1 + .../components/card/card.component.html | 39 +++++++++++ .../components/card/card.component.scss | 62 ++++++++++++++++ .../portal/components/card/card.component.ts | 46 ++++++++++++ .../components/drawer/drawer.component.html | 38 ++++++++++ .../components/drawer/drawer.component.scss | 70 +++++++++++++++++++ .../components/drawer/drawer.component.ts | 57 +++++++++++++++ .../portal/components/drawer/drawer.const.ts | 24 +++++++ .../components/header/header.component.scss | 3 +- .../navigation/navigation.component.html | 2 +- .../navigation/navigation.component.scss | 2 + .../apps/portal/pipes/to-navigation-item.ts | 14 ++++ .../src/app/apps/portal/portal.component.html | 1 + .../src/app/apps/portal/portal.component.scss | 1 + .../src/app/apps/portal/portal.component.ts | 7 ++ .../ui/src/app/apps/portal/portal.module.ts | 9 ++- .../routes/desktop/desktop.component.html | 5 ++ .../routes/desktop/desktop.component.scss | 11 +++ .../routes/desktop/desktop.component.ts | 12 ++++ .../portal/routes/desktop/desktop.module.ts | 25 +++++++ .../{service => }/service.component.html | 0 .../{service => }/service.component.scss | 0 .../{service => }/service.component.ts | 4 +- .../routes/services/service/service.module.ts | 18 ----- .../routes/services/services.component.html | 7 -- .../routes/services/services.component.scss | 0 .../routes/services/services.component.ts | 23 ------ .../portal/routes/services/services.module.ts | 13 ++-- .../{routes => }/services/services.service.ts | 0 .../apps/portal/utils/to-navigation-item.ts | 13 ++++ 31 files changed, 474 insertions(+), 62 deletions(-) create mode 100644 frontend/projects/ui/src/app/apps/portal/components/card/card.component.html create mode 100644 frontend/projects/ui/src/app/apps/portal/components/card/card.component.scss create mode 100644 frontend/projects/ui/src/app/apps/portal/components/card/card.component.ts create mode 100644 frontend/projects/ui/src/app/apps/portal/components/drawer/drawer.component.html create mode 100644 frontend/projects/ui/src/app/apps/portal/components/drawer/drawer.component.scss create mode 100644 frontend/projects/ui/src/app/apps/portal/components/drawer/drawer.component.ts create mode 100644 frontend/projects/ui/src/app/apps/portal/components/drawer/drawer.const.ts create mode 100644 frontend/projects/ui/src/app/apps/portal/pipes/to-navigation-item.ts create mode 100644 frontend/projects/ui/src/app/apps/portal/routes/desktop/desktop.component.html create mode 100644 frontend/projects/ui/src/app/apps/portal/routes/desktop/desktop.component.scss create mode 100644 frontend/projects/ui/src/app/apps/portal/routes/desktop/desktop.component.ts create mode 100644 frontend/projects/ui/src/app/apps/portal/routes/desktop/desktop.module.ts rename frontend/projects/ui/src/app/apps/portal/routes/services/{service => }/service.component.html (100%) rename frontend/projects/ui/src/app/apps/portal/routes/services/{service => }/service.component.scss (100%) rename frontend/projects/ui/src/app/apps/portal/routes/services/{service => }/service.component.ts (88%) delete mode 100644 frontend/projects/ui/src/app/apps/portal/routes/services/service/service.module.ts delete mode 100644 frontend/projects/ui/src/app/apps/portal/routes/services/services.component.html delete mode 100644 frontend/projects/ui/src/app/apps/portal/routes/services/services.component.scss delete mode 100644 frontend/projects/ui/src/app/apps/portal/routes/services/services.component.ts rename frontend/projects/ui/src/app/apps/portal/{routes => }/services/services.service.ts (100%) create mode 100644 frontend/projects/ui/src/app/apps/portal/utils/to-navigation-item.ts diff --git a/frontend/projects/shared/styles/taiga.scss b/frontend/projects/shared/styles/taiga.scss index 3fbc0b9bc..3cafeedfd 100644 --- a/frontend/projects/shared/styles/taiga.scss +++ b/frontend/projects/shared/styles/taiga.scss @@ -59,3 +59,32 @@ tui-hint[data-appearance='onDark'] { color: var(--tui-link-hover) !important; } } + +[tuiWrapper][data-appearance='drawer'] { + // TODO: Theme + background: rgb(81 80 83 / 86%); + border-radius: 10rem; + + &._focused::after { + color: var(--tui-primary); + } +} + +tui-dropdown[data-appearance='start-os'][data-appearance='start-os'] { + border: 0; + box-shadow: 0 0.25rem 0.25rem rgb(0 0 0 / 25%); + // TODO: Replace --tui-elevation-02 when Taiga UI is updated + background: rgb(63 63 63 / 95%); + + tui-opt-group { + &::before { + background: var(--tui-clear); + box-shadow: 1rem 0 var(--tui-clear), -1rem 0 var(--tui-clear); + padding-top: 0.375rem; + } + + &::after { + display: none; + } + } +} diff --git a/frontend/projects/ui/src/app/app.component.html b/frontend/projects/ui/src/app/app.component.html index 78ac210ca..f92600d2e 100644 --- a/frontend/projects/ui/src/app/app.component.html +++ b/frontend/projects/ui/src/app/app.component.html @@ -11,6 +11,7 @@ (ionSplitPaneVisible)="splitPaneVisible($event)" > + + + + + + + + + +

{{ appCard.title }}

+ + + + + + + + + + + diff --git a/frontend/projects/ui/src/app/apps/portal/components/card/card.component.scss b/frontend/projects/ui/src/app/apps/portal/components/card/card.component.scss new file mode 100644 index 000000000..d47636ae5 --- /dev/null +++ b/frontend/projects/ui/src/app/apps/portal/components/card/card.component.scss @@ -0,0 +1,62 @@ +:host { + display: flex; + height: 5.5rem; + width: 12.5rem; + border-radius: var(--tui-radius-l); + overflow: hidden; + box-shadow: 0 0.25rem 0.25rem rgb(0 0 0 / 25%); + // TODO: Theme + background: rgb(111 109 109 / 90%); +} + +.link { + display: flex; + flex: 1; + flex-direction: column; + align-items: center; + justify-content: center; + color: white; + gap: 0.25rem; + padding: 0 0.5rem; + font: var(--tui-font-text-m); + white-space: nowrap; + overflow: hidden; +} + +.icon { + width: 2.5rem; + height: 2.5rem; + border-radius: 100%; + box-shadow: 0.25rem 0.25rem 0.25rem rgb(0 0 0 / 25%); +} + +.title { + max-width: 100%; +} + +.side { + width: 3rem; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 0.25rem 0.25rem rgb(0 0 0 / 25%); + // TODO: Theme + background: #4b4a4a; +} + +.menu-title { + margin: 0; + padding: 0 0.5rem 0.25rem; + white-space: nowrap; + font: var(--tui-font-text-l); + font-weight: bold; +} + +.menu-item { + justify-content: flex-start; + gap: 0.75rem; +} + +.menu-icon { + opacity: var(--tui-disabled-opacity); +} diff --git a/frontend/projects/ui/src/app/apps/portal/components/card/card.component.ts b/frontend/projects/ui/src/app/apps/portal/components/card/card.component.ts new file mode 100644 index 000000000..5be666df3 --- /dev/null +++ b/frontend/projects/ui/src/app/apps/portal/components/card/card.component.ts @@ -0,0 +1,46 @@ +import { + ChangeDetectionStrategy, + Component, + HostListener, + inject, + Input, +} from '@angular/core' +import { RouterLink } from '@angular/router' +import { TickerModule } from '@start9labs/shared' +import { + TuiButtonModule, + TuiDataListModule, + TuiHostedDropdownModule, + TuiSvgModule, +} from '@taiga-ui/core' +import { + NavigationItem, + NavigationService, +} from '../navigation/navigation.service' + +@Component({ + selector: '[appCard]', + templateUrl: 'card.component.html', + styleUrls: ['card.component.scss'], + standalone: true, + changeDetection: ChangeDetectionStrategy.OnPush, + imports: [ + RouterLink, + TuiButtonModule, + TuiHostedDropdownModule, + TuiDataListModule, + TuiSvgModule, + TickerModule, + ], +}) +export class CardComponent { + private readonly navigation = inject(NavigationService) + + @Input({ required: true }) + appCard!: NavigationItem + + @HostListener('click') + onClick() { + this.navigation.addTab(this.appCard) + } +} diff --git a/frontend/projects/ui/src/app/apps/portal/components/drawer/drawer.component.html b/frontend/projects/ui/src/app/apps/portal/components/drawer/drawer.component.html new file mode 100644 index 000000000..309d5357b --- /dev/null +++ b/frontend/projects/ui/src/app/apps/portal/components/drawer/drawer.component.html @@ -0,0 +1,38 @@ +
+ + + Enter service name + +

System Utilities

+
+ +
+

Installed services

+
+ +
+ Nothing found +
diff --git a/frontend/projects/ui/src/app/apps/portal/components/drawer/drawer.component.scss b/frontend/projects/ui/src/app/apps/portal/components/drawer/drawer.component.scss new file mode 100644 index 000000000..9bbff7d91 --- /dev/null +++ b/frontend/projects/ui/src/app/apps/portal/components/drawer/drawer.component.scss @@ -0,0 +1,70 @@ +@import '@taiga-ui/core/styles/taiga-ui-local'; + +:host { + @include transition(top); + + position: absolute; + top: 100%; + left: 0; + width: 100%; + min-height: calc(100% - 10.25rem); + display: flex; + flex-direction: column; + // TODO: Theme + background: #2d2d2d; + color: #fff; + + &._open { + top: 10.25rem; + } +} + +.content { + flex: 1; + background: inherit; +} + +.toggle { + position: absolute; + top: -2.5rem; + height: 2.5rem; + width: 25rem; + max-width: 100vw; + left: 50%; + background: inherit; + color: inherit; + text-align: center; + font-size: 0; + transform: translateX(-50%); + border-top-left-radius: var(--tui-radius-xl); + border-top-right-radius: var(--tui-radius-xl); +} + +.icon { + @include transition(transform); + + :host._open & { + transform: rotate(180deg); + } +} + +.search { + max-width: 41rem; + margin: 6rem auto 0; +} + +.title { + margin: 5rem 0 1.25rem; + text-align: center; + text-transform: uppercase; + font: var(--tui-font-text-xl); +} + +.items { + display: flex; + gap: 2rem; + padding: 2rem; + align-items: center; + justify-content: center; + flex-wrap: wrap; +} diff --git a/frontend/projects/ui/src/app/apps/portal/components/drawer/drawer.component.ts b/frontend/projects/ui/src/app/apps/portal/components/drawer/drawer.component.ts new file mode 100644 index 000000000..ed87b50a8 --- /dev/null +++ b/frontend/projects/ui/src/app/apps/portal/components/drawer/drawer.component.ts @@ -0,0 +1,57 @@ +import { CommonModule } from '@angular/common' +import { + ChangeDetectionStrategy, + Component, + HostBinding, + inject, +} from '@angular/core' +import { FormsModule } from '@angular/forms' +import { RouterLink } from '@angular/router' +import { + TUI_DEFAULT_MATCHER, + TuiActiveZoneModule, + TuiFilterPipeModule, + TuiForModule, +} from '@taiga-ui/cdk' +import { TuiSvgModule, TuiTextfieldControllerModule } from '@taiga-ui/core' +import { TuiInputModule } from '@taiga-ui/kit' +import { map } from 'rxjs' +import { CardComponent } from '../card/card.component' +import { NavigationItem } from '../navigation/navigation.service' +import { ServicesService } from '../../services/services.service' +import { SYSTEM_UTILITIES } from './drawer.const' +import { toNavigationItem } from '../../utils/to-navigation-item' + +@Component({ + selector: 'app-drawer', + templateUrl: 'drawer.component.html', + styleUrls: ['drawer.component.scss'], + standalone: true, + changeDetection: ChangeDetectionStrategy.OnPush, + imports: [ + CommonModule, + FormsModule, + TuiSvgModule, + TuiActiveZoneModule, + TuiInputModule, + TuiTextfieldControllerModule, + TuiForModule, + TuiFilterPipeModule, + CardComponent, + RouterLink, + ], +}) +export class DrawerComponent { + @HostBinding('class._open') + open = false + + search = '' + + readonly system = SYSTEM_UTILITIES + readonly services$ = inject(ServicesService).pipe( + map(services => services.map(toNavigationItem)), + ) + + readonly bySearch = (item: NavigationItem, search: string): boolean => + search.length < 2 || TUI_DEFAULT_MATCHER(item.title, search) +} diff --git a/frontend/projects/ui/src/app/apps/portal/components/drawer/drawer.const.ts b/frontend/projects/ui/src/app/apps/portal/components/drawer/drawer.const.ts new file mode 100644 index 000000000..f4859d436 --- /dev/null +++ b/frontend/projects/ui/src/app/apps/portal/components/drawer/drawer.const.ts @@ -0,0 +1,24 @@ +import { NavigationItem } from '../navigation/navigation.service' + +export const SYSTEM_UTILITIES: readonly NavigationItem[] = [ + { + title: 'Devices', + routerLink: 'devices', + icon: 'assets/img/icon_transparent.png', + }, + { + title: 'Metrics', + routerLink: 'metrics', + icon: 'assets/img/icon_transparent.png', + }, + { + title: 'User manual', + routerLink: 'manual', + icon: 'assets/img/icon_transparent.png', + }, + { + title: 'Snek', + routerLink: 'snek', + icon: 'assets/img/icon_transparent.png', + }, +] diff --git a/frontend/projects/ui/src/app/apps/portal/components/header/header.component.scss b/frontend/projects/ui/src/app/apps/portal/components/header/header.component.scss index 85ded7f11..e07f51a9c 100644 --- a/frontend/projects/ui/src/app/apps/portal/components/header/header.component.scss +++ b/frontend/projects/ui/src/app/apps/portal/components/header/header.component.scss @@ -2,9 +2,10 @@ display: flex; align-items: center; height: 4.5rem; - background: rgb(51 51 51 / 74%); padding: 0 1rem 0 2rem; font-size: 1.5rem; + // TODO: Theme + background: rgb(51 51 51 / 74%); } .toolbar { diff --git a/frontend/projects/ui/src/app/apps/portal/components/navigation/navigation.component.html b/frontend/projects/ui/src/app/apps/portal/components/navigation/navigation.component.html index baa36ccd1..0fcd71661 100644 --- a/frontend/projects/ui/src/app/apps/portal/components/navigation/navigation.component.html +++ b/frontend/projects/ui/src/app/apps/portal/components/navigation/navigation.component.html @@ -1,6 +1,6 @@ diff --git a/frontend/projects/ui/src/app/apps/portal/components/navigation/navigation.component.scss b/frontend/projects/ui/src/app/apps/portal/components/navigation/navigation.component.scss index 2e2834f3a..ebdb09244 100644 --- a/frontend/projects/ui/src/app/apps/portal/components/navigation/navigation.component.scss +++ b/frontend/projects/ui/src/app/apps/portal/components/navigation/navigation.component.scss @@ -1,6 +1,7 @@ :host { height: 3rem; display: flex; + // TODO: Theme background: rgb(97 95 95 / 75%); } @@ -12,6 +13,7 @@ width: 7.5rem; &_active { + // TODO: Theme background: #373a3f; } } diff --git a/frontend/projects/ui/src/app/apps/portal/pipes/to-navigation-item.ts b/frontend/projects/ui/src/app/apps/portal/pipes/to-navigation-item.ts new file mode 100644 index 000000000..dbf276474 --- /dev/null +++ b/frontend/projects/ui/src/app/apps/portal/pipes/to-navigation-item.ts @@ -0,0 +1,14 @@ +import { Pipe, PipeTransform } from '@angular/core' +import { PackageDataEntry } from 'src/app/services/patch-db/data-model' +import { NavigationItem } from '../components/navigation/navigation.service' +import { toNavigationItem } from '../utils/to-navigation-item' + +@Pipe({ + name: 'toNavigationItem', + standalone: true, +}) +export class ToNavigationItemPipe implements PipeTransform { + transform(service: PackageDataEntry): NavigationItem { + return toNavigationItem(service) + } +} diff --git a/frontend/projects/ui/src/app/apps/portal/portal.component.html b/frontend/projects/ui/src/app/apps/portal/portal.component.html index 5eb48eb41..56a6e5d25 100644 --- a/frontend/projects/ui/src/app/apps/portal/portal.component.html +++ b/frontend/projects/ui/src/app/apps/portal/portal.component.html @@ -3,3 +3,4 @@
+ diff --git a/frontend/projects/ui/src/app/apps/portal/portal.component.scss b/frontend/projects/ui/src/app/apps/portal/portal.component.scss index 128c72f8a..5c4079653 100644 --- a/frontend/projects/ui/src/app/apps/portal/portal.component.scss +++ b/frontend/projects/ui/src/app/apps/portal/portal.component.scss @@ -1,4 +1,5 @@ :host { + // TODO: Theme background: url(/assets/img/background_dark.jpeg); background-size: cover; } diff --git a/frontend/projects/ui/src/app/apps/portal/portal.component.ts b/frontend/projects/ui/src/app/apps/portal/portal.component.ts index 57d53a6fe..7c57f5662 100644 --- a/frontend/projects/ui/src/app/apps/portal/portal.component.ts +++ b/frontend/projects/ui/src/app/apps/portal/portal.component.ts @@ -1,8 +1,15 @@ import { ChangeDetectionStrategy, Component } from '@angular/core' +import { tuiDropdownOptionsProvider } from '@taiga-ui/core' @Component({ templateUrl: 'portal.component.html', styleUrls: ['portal.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, + providers: [ + // TODO: Move to global + tuiDropdownOptionsProvider({ + appearance: 'start-os', + }), + ], }) export class PortalComponent {} diff --git a/frontend/projects/ui/src/app/apps/portal/portal.module.ts b/frontend/projects/ui/src/app/apps/portal/portal.module.ts index 5512c0854..5da7dba6d 100644 --- a/frontend/projects/ui/src/app/apps/portal/portal.module.ts +++ b/frontend/projects/ui/src/app/apps/portal/portal.module.ts @@ -3,6 +3,7 @@ import { RouterModule, Routes } from '@angular/router' import { HeaderComponent } from './components/header/header.component' import { PortalComponent } from './portal.component' import { NavigationComponent } from './components/navigation/navigation.component' +import { DrawerComponent } from './components/drawer/drawer.component' const ROUTES: Routes = [ { @@ -10,10 +11,15 @@ const ROUTES: Routes = [ component: PortalComponent, children: [ { - redirectTo: 'services', + redirectTo: 'desktop', pathMatch: 'full', path: '', }, + { + path: 'desktop', + loadChildren: () => + import('./routes/desktop/desktop.module').then(m => m.DesktopModule), + }, { path: 'services', loadChildren: () => @@ -30,6 +36,7 @@ const ROUTES: Routes = [ RouterModule.forChild(ROUTES), HeaderComponent, NavigationComponent, + DrawerComponent, ], declarations: [PortalComponent], exports: [PortalComponent], diff --git a/frontend/projects/ui/src/app/apps/portal/routes/desktop/desktop.component.html b/frontend/projects/ui/src/app/apps/portal/routes/desktop/desktop.component.html new file mode 100644 index 000000000..e607345e4 --- /dev/null +++ b/frontend/projects/ui/src/app/apps/portal/routes/desktop/desktop.component.html @@ -0,0 +1,5 @@ + diff --git a/frontend/projects/ui/src/app/apps/portal/routes/desktop/desktop.component.scss b/frontend/projects/ui/src/app/apps/portal/routes/desktop/desktop.component.scss new file mode 100644 index 000000000..079b6cb3f --- /dev/null +++ b/frontend/projects/ui/src/app/apps/portal/routes/desktop/desktop.component.scss @@ -0,0 +1,11 @@ +:host { + display: flex; + align-items: center; + align-content: center; + justify-content: center; + flex-wrap: wrap; + height: 100%; + max-width: 56rem; + margin: 0 auto; + gap: 2rem; +} diff --git a/frontend/projects/ui/src/app/apps/portal/routes/desktop/desktop.component.ts b/frontend/projects/ui/src/app/apps/portal/routes/desktop/desktop.component.ts new file mode 100644 index 000000000..f8ed19998 --- /dev/null +++ b/frontend/projects/ui/src/app/apps/portal/routes/desktop/desktop.component.ts @@ -0,0 +1,12 @@ +import { ChangeDetectionStrategy, Component, inject } from '@angular/core' +import { ServicesService } from '../../services/services.service' + +@Component({ + templateUrl: 'desktop.component.html', + styleUrls: ['desktop.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class DesktopComponent { + // TODO: Only show services added to desktop + readonly services$ = inject(ServicesService) +} diff --git a/frontend/projects/ui/src/app/apps/portal/routes/desktop/desktop.module.ts b/frontend/projects/ui/src/app/apps/portal/routes/desktop/desktop.module.ts new file mode 100644 index 000000000..cf5d25409 --- /dev/null +++ b/frontend/projects/ui/src/app/apps/portal/routes/desktop/desktop.module.ts @@ -0,0 +1,25 @@ +import { CommonModule } from '@angular/common' +import { NgModule } from '@angular/core' +import { RouterModule, Routes } from '@angular/router' +import { DesktopComponent } from './desktop.component' +import { CardComponent } from '../../components/card/card.component' +import { ToNavigationItemPipe } from '../../pipes/to-navigation-item' + +const ROUTES: Routes = [ + { + path: '', + component: DesktopComponent, + }, +] + +@NgModule({ + imports: [ + CommonModule, + CardComponent, + ToNavigationItemPipe, + RouterModule.forChild(ROUTES), + ], + declarations: [DesktopComponent], + exports: [DesktopComponent], +}) +export class DesktopModule {} diff --git a/frontend/projects/ui/src/app/apps/portal/routes/services/service/service.component.html b/frontend/projects/ui/src/app/apps/portal/routes/services/service.component.html similarity index 100% rename from frontend/projects/ui/src/app/apps/portal/routes/services/service/service.component.html rename to frontend/projects/ui/src/app/apps/portal/routes/services/service.component.html diff --git a/frontend/projects/ui/src/app/apps/portal/routes/services/service/service.component.scss b/frontend/projects/ui/src/app/apps/portal/routes/services/service.component.scss similarity index 100% rename from frontend/projects/ui/src/app/apps/portal/routes/services/service/service.component.scss rename to frontend/projects/ui/src/app/apps/portal/routes/services/service.component.scss diff --git a/frontend/projects/ui/src/app/apps/portal/routes/services/service/service.component.ts b/frontend/projects/ui/src/app/apps/portal/routes/services/service.component.ts similarity index 88% rename from frontend/projects/ui/src/app/apps/portal/routes/services/service/service.component.ts rename to frontend/projects/ui/src/app/apps/portal/routes/services/service.component.ts index 380573d1a..9efc08caf 100644 --- a/frontend/projects/ui/src/app/apps/portal/routes/services/service/service.component.ts +++ b/frontend/projects/ui/src/app/apps/portal/routes/services/service.component.ts @@ -4,7 +4,7 @@ import { getPkgId } from '@start9labs/shared' import { PatchDB } from 'patch-db-client' import { tap } from 'rxjs' import { DataModel } from 'src/app/services/patch-db/data-model' -import { NavigationService } from '../../../components/navigation/navigation.service' +import { NavigationService } from '../../components/navigation/navigation.service' @Component({ templateUrl: 'service.component.html', @@ -27,7 +27,7 @@ export class ServiceComponent { } else { this.navigation.addTab({ title: pkg.manifest.title, - routerLink: ['services', pkg.manifest.id].join('/'), + routerLink: `/portal/services/${pkg.manifest.id}`, icon: pkg.icon, }) } diff --git a/frontend/projects/ui/src/app/apps/portal/routes/services/service/service.module.ts b/frontend/projects/ui/src/app/apps/portal/routes/services/service/service.module.ts deleted file mode 100644 index 4d187310b..000000000 --- a/frontend/projects/ui/src/app/apps/portal/routes/services/service/service.module.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { CommonModule } from '@angular/common' -import { NgModule } from '@angular/core' -import { RouterModule, Routes } from '@angular/router' -import { ServiceComponent } from './service.component' - -const ROUTES: Routes = [ - { - path: '', - component: ServiceComponent, - }, -] - -@NgModule({ - imports: [CommonModule, RouterModule.forChild(ROUTES)], - declarations: [ServiceComponent], - exports: [ServiceComponent], -}) -export class ServiceModule {} diff --git a/frontend/projects/ui/src/app/apps/portal/routes/services/services.component.html b/frontend/projects/ui/src/app/apps/portal/routes/services/services.component.html deleted file mode 100644 index 51dcfae2a..000000000 --- a/frontend/projects/ui/src/app/apps/portal/routes/services/services.component.html +++ /dev/null @@ -1,7 +0,0 @@ - - {{ service.manifest.title }} - diff --git a/frontend/projects/ui/src/app/apps/portal/routes/services/services.component.scss b/frontend/projects/ui/src/app/apps/portal/routes/services/services.component.scss deleted file mode 100644 index e69de29bb..000000000 diff --git a/frontend/projects/ui/src/app/apps/portal/routes/services/services.component.ts b/frontend/projects/ui/src/app/apps/portal/routes/services/services.component.ts deleted file mode 100644 index bd9e8749b..000000000 --- a/frontend/projects/ui/src/app/apps/portal/routes/services/services.component.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { ChangeDetectionStrategy, Component, inject } from '@angular/core' -import { PackageDataEntry } from 'src/app/services/patch-db/data-model' -import { NavigationService } from '../../components/navigation/navigation.service' -import { ServicesService } from './services.service' - -@Component({ - templateUrl: 'services.component.html', - styleUrls: ['services.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush, -}) -export class ServicesComponent { - private readonly navigation = inject(NavigationService) - - readonly services$ = inject(ServicesService) - - onClick({ manifest, icon }: PackageDataEntry) { - this.navigation.addTab({ - title: manifest.title, - routerLink: ['services', manifest.id].join('/'), - icon, - }) - } -} diff --git a/frontend/projects/ui/src/app/apps/portal/routes/services/services.module.ts b/frontend/projects/ui/src/app/apps/portal/routes/services/services.module.ts index 82488da4a..3312e476f 100644 --- a/frontend/projects/ui/src/app/apps/portal/routes/services/services.module.ts +++ b/frontend/projects/ui/src/app/apps/portal/routes/services/services.module.ts @@ -1,23 +1,18 @@ import { CommonModule } from '@angular/common' import { NgModule } from '@angular/core' import { RouterModule, Routes } from '@angular/router' -import { ServicesComponent } from './services.component' +import { ServiceComponent } from './service.component' const ROUTES: Routes = [ - { - path: '', - component: ServicesComponent, - }, { path: ':pkgId', - loadChildren: () => - import('./service/service.module').then(m => m.ServiceModule), + component: ServiceComponent, }, ] @NgModule({ imports: [CommonModule, RouterModule.forChild(ROUTES)], - declarations: [ServicesComponent], - exports: [ServicesComponent], + declarations: [ServiceComponent], + exports: [ServiceComponent], }) export class ServicesModule {} diff --git a/frontend/projects/ui/src/app/apps/portal/routes/services/services.service.ts b/frontend/projects/ui/src/app/apps/portal/services/services.service.ts similarity index 100% rename from frontend/projects/ui/src/app/apps/portal/routes/services/services.service.ts rename to frontend/projects/ui/src/app/apps/portal/services/services.service.ts diff --git a/frontend/projects/ui/src/app/apps/portal/utils/to-navigation-item.ts b/frontend/projects/ui/src/app/apps/portal/utils/to-navigation-item.ts new file mode 100644 index 000000000..12749a399 --- /dev/null +++ b/frontend/projects/ui/src/app/apps/portal/utils/to-navigation-item.ts @@ -0,0 +1,13 @@ +import { PackageDataEntry } from 'src/app/services/patch-db/data-model' +import { NavigationItem } from '../components/navigation/navigation.service' + +export function toNavigationItem({ + manifest, + icon, +}: PackageDataEntry): NavigationItem { + return { + title: manifest.title, + routerLink: `/portal/services/${manifest.id}`, + icon, + } +}