From fba08a32126f2ada55d8e3ae1a8655b34a3421d6 Mon Sep 17 00:00:00 2001 From: deaflynx Date: Tue, 18 Nov 2025 10:41:40 +0200 Subject: [PATCH] Refactor API key dialog components and styles. --- .../add-api-key-dialog.component.html | 0 .../add-api-key-dialog.component.scss | 0 .../add-api-key-dialog.component.ts | 2 +- .../api-key-generated-dialog.component.html | 0 .../api-key-generated-dialog.component.scss | 10 ++-- .../api-key-generated-dialog.component.ts | 0 .../api-key/api-keys-table-config.ts | 46 ++++++++++--------- .../api-keys-table-dialog.component.html | 0 .../api-keys-table-dialog.component.scss | 0 .../api-keys-table-dialog.component.ts | 0 ...t-api-key-description-panel.component.html | 0 ...t-api-key-description-panel.component.scss | 0 ...dit-api-key-description-panel.component.ts | 0 .../home/components/home-components.module.ts | 14 ++---- .../home/pages/security/security.component.ts | 5 +- 15 files changed, 40 insertions(+), 37 deletions(-) rename ui-ngx/src/app/modules/home/components/api-key/{components/dialog => }/add-api-key-dialog.component.html (100%) rename ui-ngx/src/app/modules/home/components/api-key/{components/dialog => }/add-api-key-dialog.component.scss (100%) rename ui-ngx/src/app/modules/home/components/api-key/{components/dialog => }/add-api-key-dialog.component.ts (98%) rename ui-ngx/src/app/modules/home/components/api-key/{components/dialog => }/api-key-generated-dialog.component.html (100%) rename ui-ngx/src/app/modules/home/components/api-key/{components/dialog => }/api-key-generated-dialog.component.scss (90%) rename ui-ngx/src/app/modules/home/components/api-key/{components/dialog => }/api-key-generated-dialog.component.ts (100%) rename ui-ngx/src/app/modules/home/components/api-key/{components/dialog => }/api-keys-table-dialog.component.html (100%) rename ui-ngx/src/app/modules/home/components/api-key/{components/dialog => }/api-keys-table-dialog.component.scss (100%) rename ui-ngx/src/app/modules/home/components/api-key/{components/dialog => }/api-keys-table-dialog.component.ts (100%) rename ui-ngx/src/app/modules/home/components/api-key/{components/dialog => }/edit-api-key-description-panel.component.html (100%) rename ui-ngx/src/app/modules/home/components/api-key/{components/dialog => }/edit-api-key-description-panel.component.scss (100%) rename ui-ngx/src/app/modules/home/components/api-key/{components/dialog => }/edit-api-key-description-panel.component.ts (100%) diff --git a/ui-ngx/src/app/modules/home/components/api-key/components/dialog/add-api-key-dialog.component.html b/ui-ngx/src/app/modules/home/components/api-key/add-api-key-dialog.component.html similarity index 100% rename from ui-ngx/src/app/modules/home/components/api-key/components/dialog/add-api-key-dialog.component.html rename to ui-ngx/src/app/modules/home/components/api-key/add-api-key-dialog.component.html diff --git a/ui-ngx/src/app/modules/home/components/api-key/components/dialog/add-api-key-dialog.component.scss b/ui-ngx/src/app/modules/home/components/api-key/add-api-key-dialog.component.scss similarity index 100% rename from ui-ngx/src/app/modules/home/components/api-key/components/dialog/add-api-key-dialog.component.scss rename to ui-ngx/src/app/modules/home/components/api-key/add-api-key-dialog.component.scss diff --git a/ui-ngx/src/app/modules/home/components/api-key/components/dialog/add-api-key-dialog.component.ts b/ui-ngx/src/app/modules/home/components/api-key/add-api-key-dialog.component.ts similarity index 98% rename from ui-ngx/src/app/modules/home/components/api-key/components/dialog/add-api-key-dialog.component.ts rename to ui-ngx/src/app/modules/home/components/api-key/add-api-key-dialog.component.ts index 548f2661fe..5cdc7b2026 100644 --- a/ui-ngx/src/app/modules/home/components/api-key/components/dialog/add-api-key-dialog.component.ts +++ b/ui-ngx/src/app/modules/home/components/api-key/add-api-key-dialog.component.ts @@ -25,7 +25,7 @@ import { FormBuilder, Validators } from '@angular/forms'; import { deepTrim } from '@core/utils'; import { ApiKeyService } from '@core/http/api-key.service'; import { ApiKeyInfo } from '@shared/models/api-key.models'; -import { ApiKeysTableDialogData } from '@home/components/api-key/components/dialog/api-keys-table-dialog.component'; +import { ApiKeysTableDialogData } from '@home/components/api-key/api-keys-table-dialog.component'; import { DAY } from '@shared/models/time/time.models'; @Component({ diff --git a/ui-ngx/src/app/modules/home/components/api-key/components/dialog/api-key-generated-dialog.component.html b/ui-ngx/src/app/modules/home/components/api-key/api-key-generated-dialog.component.html similarity index 100% rename from ui-ngx/src/app/modules/home/components/api-key/components/dialog/api-key-generated-dialog.component.html rename to ui-ngx/src/app/modules/home/components/api-key/api-key-generated-dialog.component.html diff --git a/ui-ngx/src/app/modules/home/components/api-key/components/dialog/api-key-generated-dialog.component.scss b/ui-ngx/src/app/modules/home/components/api-key/api-key-generated-dialog.component.scss similarity index 90% rename from ui-ngx/src/app/modules/home/components/api-key/components/dialog/api-key-generated-dialog.component.scss rename to ui-ngx/src/app/modules/home/components/api-key/api-key-generated-dialog.component.scss index ecd4de8363..7122a08f23 100644 --- a/ui-ngx/src/app/modules/home/components/api-key/components/dialog/api-key-generated-dialog.component.scss +++ b/ui-ngx/src/app/modules/home/components/api-key/api-key-generated-dialog.component.scss @@ -13,6 +13,8 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +@import '../../src/scss/constants'; + :host{ display: grid; width: 500px; @@ -34,8 +36,10 @@ pre[class*=language-] { margin: 0; background: #F3F6FA; - border-color: #305680; + border-color: $tb-primary-color; padding-right: 38px; + overflow: hidden; + overflow-x: auto; padding-bottom: 4px; min-height: 42px; scrollbar-width: thin; @@ -49,7 +53,7 @@ button.clipboard-btn { right: -2px; p { - color: #305680; + color: $tb-primary-color; } p, div { background-color: #F3F6FA; @@ -64,7 +68,7 @@ display: block; width: 18px; height: 18px; - background: #305680; + background: $tb-primary-color; mask-image: url(/assets/copy-code-icon.svg); -webkit-mask-image: url(/assets/copy-code-icon.svg); mask-repeat: no-repeat; diff --git a/ui-ngx/src/app/modules/home/components/api-key/components/dialog/api-key-generated-dialog.component.ts b/ui-ngx/src/app/modules/home/components/api-key/api-key-generated-dialog.component.ts similarity index 100% rename from ui-ngx/src/app/modules/home/components/api-key/components/dialog/api-key-generated-dialog.component.ts rename to ui-ngx/src/app/modules/home/components/api-key/api-key-generated-dialog.component.ts diff --git a/ui-ngx/src/app/modules/home/components/api-key/api-keys-table-config.ts b/ui-ngx/src/app/modules/home/components/api-key/api-keys-table-config.ts index daf4dbf7b2..a6b8626de2 100644 --- a/ui-ngx/src/app/modules/home/components/api-key/api-keys-table-config.ts +++ b/ui-ngx/src/app/modules/home/components/api-key/api-keys-table-config.ts @@ -17,7 +17,8 @@ import { DateEntityTableColumn, EntityTableColumn, - EntityTableConfig + EntityTableConfig, + CellActionDescriptor } from '@home/models/entity/entities-table-config.models'; import { EntityType, EntityTypeResource, entityTypeTranslations } from '@shared/models/entity-type.models'; import { Direction } from '@shared/models/page/sort-order'; @@ -32,14 +33,13 @@ import { CustomTranslatePipe } from '@shared/pipe/custom-translate.pipe'; import { TbPopoverService } from '@shared/components/popover.service'; import { map } from 'rxjs/operators'; import { UserId } from '@shared/models/id/user-id'; -import { AddApiKeyDialogComponent } from '@home/components/api-key/components/dialog/add-api-key-dialog.component'; +import { AddApiKeyDialogComponent } from '@home/components/api-key/add-api-key-dialog.component'; +import { EditApiKeyDescriptionPanelComponent } from '@home/components/api-key/edit-api-key-description-panel.component'; +import { ApiKeysTableDialogData } from '@home/components/api-key/api-keys-table-dialog.component'; import { - EditApiKeyDescriptionPanelComponent -} from '@home/components/api-key/components/dialog/edit-api-key-description-panel.component'; -import { ApiKeysTableDialogData } from '@home/components/api-key/components/dialog/api-keys-table-dialog.component'; -import { - ApiKeyGeneratedDialogComponent, ApiKeyGeneratedDialogData -} from '@home/components/api-key/components/dialog/api-key-generated-dialog.component'; + ApiKeyGeneratedDialogComponent, + ApiKeyGeneratedDialogData +} from '@home/components/api-key/api-key-generated-dialog.component'; @Injectable() export class ApiKeysTableConfig extends EntityTableConfig { @@ -65,6 +65,7 @@ export class ApiKeysTableConfig extends EntityTableConfig { this.entityTranslations = entityTypeTranslations.get(EntityType.API_KEY); this.entityResources = {} as EntityTypeResource; this.tableTitle = this.translate.instant('api-key.api-keys'); + this.defaultSortOrder = {property: 'createdTime', direction: Direction.DESC}; this.entitiesFetchFunction = pageLink => this.apiKeyService.getUserApiKeys(this.userId.id, pageLink); this.addEntity = () => this.addApiKey(); @@ -75,18 +76,7 @@ export class ApiKeysTableConfig extends EntityTableConfig { this.deleteEntitiesContent = () => this.translate.instant('api-key.delete-api-keys-text'); this.deleteEntity = id => this.apiKeyService.deleteApiKey(id.id); - this.cellActionDescriptors = [{ - name: '', - nameFunction: (entity) => - this.translate.instant(entity.enabled ? 'api-key.disable' : 'api-key.enable'), - icon: 'mdi:toggle-switch', - isEnabled: (entity) => !entity.expired, - iconFunction: (entity) => entity.enabled ? 'mdi:toggle-switch' : 'mdi:toggle-switch-off-outline', - onAction: ($event, entity) => this.toggleEnableMode($event, entity) - }]; - - this.defaultSortOrder = {property: 'createdTime', direction: Direction.DESC}; - + this.cellActionDescriptors = this.configureCellActions(); this.columns.push( new DateEntityTableColumn('createdTime', 'common.created-time', this.datePipe, '170px'), new EntityTableColumn('description', 'api-key.description', '100%', @@ -108,6 +98,21 @@ export class ApiKeysTableConfig extends EntityTableConfig { ); } + private configureCellActions(): Array> { + const actions: Array> = []; + actions.push( + { + name: '', + nameFunction: (entity) => this.translate.instant(entity.enabled ? 'api-key.disable' : 'api-key.enable'), + icon: 'mdi:toggle-switch', + isEnabled: (entity) => !entity.expired, + iconFunction: (entity) => entity.enabled ? 'mdi:toggle-switch' : 'mdi:toggle-switch-off-outline', + onAction: ($event, entity) => this.toggleEnableMode($event, entity) + } + ) + return actions; + } + private addApiKey(): Observable { return this.dialog.open(AddApiKeyDialogComponent, { disableClose: true, @@ -137,7 +142,6 @@ export class ApiKeysTableConfig extends EntityTableConfig { }); } - private toggleEnableMode($event: Event, entity: ApiKeyInfo): void { if ($event) { $event.stopPropagation(); diff --git a/ui-ngx/src/app/modules/home/components/api-key/components/dialog/api-keys-table-dialog.component.html b/ui-ngx/src/app/modules/home/components/api-key/api-keys-table-dialog.component.html similarity index 100% rename from ui-ngx/src/app/modules/home/components/api-key/components/dialog/api-keys-table-dialog.component.html rename to ui-ngx/src/app/modules/home/components/api-key/api-keys-table-dialog.component.html diff --git a/ui-ngx/src/app/modules/home/components/api-key/components/dialog/api-keys-table-dialog.component.scss b/ui-ngx/src/app/modules/home/components/api-key/api-keys-table-dialog.component.scss similarity index 100% rename from ui-ngx/src/app/modules/home/components/api-key/components/dialog/api-keys-table-dialog.component.scss rename to ui-ngx/src/app/modules/home/components/api-key/api-keys-table-dialog.component.scss diff --git a/ui-ngx/src/app/modules/home/components/api-key/components/dialog/api-keys-table-dialog.component.ts b/ui-ngx/src/app/modules/home/components/api-key/api-keys-table-dialog.component.ts similarity index 100% rename from ui-ngx/src/app/modules/home/components/api-key/components/dialog/api-keys-table-dialog.component.ts rename to ui-ngx/src/app/modules/home/components/api-key/api-keys-table-dialog.component.ts diff --git a/ui-ngx/src/app/modules/home/components/api-key/components/dialog/edit-api-key-description-panel.component.html b/ui-ngx/src/app/modules/home/components/api-key/edit-api-key-description-panel.component.html similarity index 100% rename from ui-ngx/src/app/modules/home/components/api-key/components/dialog/edit-api-key-description-panel.component.html rename to ui-ngx/src/app/modules/home/components/api-key/edit-api-key-description-panel.component.html diff --git a/ui-ngx/src/app/modules/home/components/api-key/components/dialog/edit-api-key-description-panel.component.scss b/ui-ngx/src/app/modules/home/components/api-key/edit-api-key-description-panel.component.scss similarity index 100% rename from ui-ngx/src/app/modules/home/components/api-key/components/dialog/edit-api-key-description-panel.component.scss rename to ui-ngx/src/app/modules/home/components/api-key/edit-api-key-description-panel.component.scss diff --git a/ui-ngx/src/app/modules/home/components/api-key/components/dialog/edit-api-key-description-panel.component.ts b/ui-ngx/src/app/modules/home/components/api-key/edit-api-key-description-panel.component.ts similarity index 100% rename from ui-ngx/src/app/modules/home/components/api-key/components/dialog/edit-api-key-description-panel.component.ts rename to ui-ngx/src/app/modules/home/components/api-key/edit-api-key-description-panel.component.ts diff --git a/ui-ngx/src/app/modules/home/components/home-components.module.ts b/ui-ngx/src/app/modules/home/components/home-components.module.ts index cfafe70a96..2418eb9ad2 100644 --- a/ui-ngx/src/app/modules/home/components/home-components.module.ts +++ b/ui-ngx/src/app/modules/home/components/home-components.module.ts @@ -198,16 +198,10 @@ import { CalculatedFieldsModule } from '@home/components/calculated-fields/calcu import { AlarmRuleModule } from "@home/components/alarm-rules/alarm-rule.module"; import { AlarmRulesTableComponent } from "@home/components/alarm-rules/alarm-rules-table.component"; import { ApiKeysTableComponent } from '@home/components/api-key/api-keys-table.component'; -import { AddApiKeyDialogComponent } from '@home/components/api-key/components/dialog/add-api-key-dialog.component'; -import { - EditApiKeyDescriptionPanelComponent -} from '@home/components/api-key/components/dialog/edit-api-key-description-panel.component'; -import { - ApiKeyGeneratedDialogComponent -} from '@home/components/api-key/components/dialog/api-key-generated-dialog.component'; -import { - ApiKeysTableDialogComponent -} from '@home/components/api-key/components/dialog/api-keys-table-dialog.component'; +import { AddApiKeyDialogComponent } from '@home/components/api-key/add-api-key-dialog.component'; +import { EditApiKeyDescriptionPanelComponent } from '@home/components/api-key/edit-api-key-description-panel.component'; +import { ApiKeyGeneratedDialogComponent } from '@home/components/api-key/api-key-generated-dialog.component'; +import { ApiKeysTableDialogComponent } from '@home/components/api-key/api-keys-table-dialog.component'; @NgModule({ declarations: diff --git a/ui-ngx/src/app/modules/home/pages/security/security.component.ts b/ui-ngx/src/app/modules/home/pages/security/security.component.ts index 026d798e36..daf83186de 100644 --- a/ui-ngx/src/app/modules/home/pages/security/security.component.ts +++ b/ui-ngx/src/app/modules/home/pages/security/security.component.ts @@ -53,8 +53,9 @@ import { AuthService } from '@core/auth/auth.service'; import { UserPasswordPolicy } from '@shared/models/settings.models'; import { MatCheckboxChange } from '@angular/material/checkbox'; import { - ApiKeysTableDialogComponent, ApiKeysTableDialogData -} from '@home/components/api-key/components/dialog/api-keys-table-dialog.component'; + ApiKeysTableDialogComponent, + ApiKeysTableDialogData +} from '@home/components/api-key/api-keys-table-dialog.component'; @Component({ selector: 'tb-security',