minor change toi viewing addresses and fix build

This commit is contained in:
Matt Hill
2025-10-30 13:36:49 -06:00
parent 5340c421e1
commit c631311e96
4 changed files with 36 additions and 44 deletions

View File

@@ -377,13 +377,8 @@
"budgets": [ "budgets": [
{ {
"type": "initial", "type": "initial",
"maximumWarning": "500kB", "maximumWarning": "2mb",
"maximumError": "1MB" "maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "4kB",
"maximumError": "8kB"
} }
], ],
"outputHashing": "all" "outputHashing": "all"

View File

@@ -5,7 +5,12 @@ import {
input, input,
output, output,
} from '@angular/core' } from '@angular/core'
import { CopyService, DialogService, i18nPipe } from '@start9labs/shared' import {
CopyService,
DialogService,
i18nKey,
i18nPipe,
} from '@start9labs/shared'
import { TUI_IS_MOBILE } from '@taiga-ui/cdk' import { TUI_IS_MOBILE } from '@taiga-ui/cdk'
import { import {
TuiButton, TuiButton,
@@ -22,6 +27,14 @@ import { InterfaceComponent } from '../interface.component'
selector: 'td[actions]', selector: 'td[actions]',
template: ` template: `
<div class="desktop"> <div class="desktop">
<button
tuiIconButton
appearance="flat-grayscale"
iconStart="@tui.info"
(click)="viewDetails()"
>
{{ 'Address details' | i18n }}
</button>
@if (interface.value()?.type === 'ui') { @if (interface.value()?.type === 'ui') {
<a <a
tuiIconButton tuiIconButton
@@ -62,7 +75,7 @@ import { InterfaceComponent } from '../interface.component'
> >
{{ 'Actions' | i18n }} {{ 'Actions' | i18n }}
<tui-data-list *tuiTextfieldDropdown="let close"> <tui-data-list *tuiTextfieldDropdown="let close">
<button tuiOption new iconStart="@tui.eye" (click)="onDetails.emit()"> <button tuiOption new iconStart="@tui.info" (click)="viewDetails()">
{{ 'Address details' | i18n }} {{ 'Address details' | i18n }}
</button> </button>
@if (interface.value()?.type === 'ui') { @if (interface.value()?.type === 'ui') {
@@ -125,12 +138,24 @@ export class AddressActionsComponent {
readonly interface = inject(InterfaceComponent) readonly interface = inject(InterfaceComponent)
readonly href = input.required<string>() readonly href = input.required<string>()
readonly bullets = input.required<string[]>()
readonly disabled = input.required<boolean>() readonly disabled = input.required<boolean>()
readonly onDetails = output<void>()
open = false open = false
viewDetails() {
this.dialog
.openAlert(
`<ul>${this.bullets()
.map(b => `<li>${b}</li>`)
.join('')}</ul>` as i18nKey,
{
label: 'About this address' as i18nKey,
},
)
.subscribe()
}
showQR() { showQR() {
this.dialog this.dialog
.openComponent(new PolymorpheusComponent(QRModal), { .openComponent(new PolymorpheusComponent(QRModal), {

View File

@@ -12,7 +12,7 @@ import { InterfaceAddressItemComponent } from './item.component'
selector: 'section[addresses]', selector: 'section[addresses]',
template: ` template: `
<header>{{ 'Addresses' | i18n }}</header> <header>{{ 'Addresses' | i18n }}</header>
<table [appTable]="[null, 'Type', 'Access', 'Gateway', 'URL', null]"> <table [appTable]="['Type', 'Access', 'Gateway', 'URL', null]">
@for (address of addresses()?.common; track $index) { @for (address of addresses()?.common; track $index) {
<tr [address]="address" [isRunning]="isRunning()"></tr> <tr [address]="address" [isRunning]="isRunning()"></tr>
} @empty { } @empty {

View File

@@ -1,11 +1,5 @@
import { import { ChangeDetectionStrategy, Component, input } from '@angular/core'
ChangeDetectionStrategy, import { i18nPipe } from '@start9labs/shared'
Component,
input,
inject,
} from '@angular/core'
import { DialogService, i18nKey, i18nPipe } from '@start9labs/shared'
import { TuiButton } from '@taiga-ui/core'
import { DisplayAddress } from '../interface.service' import { DisplayAddress } from '../interface.service'
import { AddressActionsComponent } from './actions.component' import { AddressActionsComponent } from './actions.component'
import { TuiBadge } from '@taiga-ui/kit' import { TuiBadge } from '@taiga-ui/kit'
@@ -14,16 +8,6 @@ import { TuiBadge } from '@taiga-ui/kit'
selector: 'tr[address]', selector: 'tr[address]',
template: ` template: `
@if (address(); as address) { @if (address(); as address) {
<td [style.width.rem]="3">
<button
tuiIconButton
appearance="flat-grayscale"
iconStart="@tui.info"
(click)="viewDetails(address.bullets)"
>
{{ 'Address details' | i18n }}
</button>
</td>
<td>{{ address.type }}</td> <td>{{ address.type }}</td>
<td> <td>
@if (address.access === 'public') { @if (address.access === 'public') {
@@ -50,8 +34,8 @@ import { TuiBadge } from '@taiga-ui/kit'
actions actions
[disabled]="!isRunning()" [disabled]="!isRunning()"
[href]="address.url" [href]="address.url"
[bullets]="address.bullets"
[style.width.rem]="5" [style.width.rem]="5"
(onDetails)="viewDetails(address.bullets)"
></td> ></td>
} }
`, `,
@@ -89,22 +73,10 @@ import { TuiBadge } from '@taiga-ui/kit'
} }
} }
`, `,
imports: [i18nPipe, AddressActionsComponent, TuiButton, TuiBadge], imports: [i18nPipe, AddressActionsComponent, TuiBadge],
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
}) })
export class InterfaceAddressItemComponent { export class InterfaceAddressItemComponent {
readonly address = input.required<DisplayAddress>() readonly address = input.required<DisplayAddress>()
readonly isRunning = input.required<boolean>() readonly isRunning = input.required<boolean>()
readonly dialog = inject(DialogService)
viewDetails(bullets: string[]) {
this.dialog
.openAlert(
`<ul>${bullets.map(b => `<li>${b}</li>`).join('')}</ul>` as i18nKey,
{
label: 'About this address' as i18nKey,
},
)
.subscribe()
}
} }