diff --git a/package-lock.json b/package-lock.json index 8e23e7a..474904b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,12 +23,12 @@ "@ngneat/falso": "^7.2.0", "@ngx-translate/core": "^14.0.0", "@ngx-translate/http-loader": "^7.0.0", - "@onecx/accelerator": "^4.14.3", - "@onecx/angular-accelerator": "^4.14.3", - "@onecx/integration-interface": "^4.14.3", - "@onecx/keycloak-auth": "^4.14.3", - "@onecx/portal-integration-angular": "^4.14.3", - "@onecx/portal-layout-styles": "^4.14.3", + "@onecx/accelerator": "^4.20.2", + "@onecx/angular-accelerator": "^4.20.2", + "@onecx/integration-interface": "^4.20.2", + "@onecx/keycloak-auth": "^4.20.2", + "@onecx/portal-integration-angular": "^4.20.2", + "@onecx/portal-layout-styles": "^4.20.2", "file-saver": "^2.0.5", "ngx-color": "^8.0.3", "primeflex": "^3.3.1", @@ -7391,18 +7391,18 @@ } }, "node_modules/@onecx/accelerator": { - "version": "4.14.3", - "resolved": "https://registry.npmjs.org/@onecx/accelerator/-/accelerator-4.14.3.tgz", - "integrity": "sha512-b1liw9i7B7NAG0W/8j+xXnuYZF4J3ZqYkTiY7Klorr99QVGXVw4I2KalANP2NlU0U+TYa00XOKhZ3to2/jIB4w==", + "version": "4.23.0", + "resolved": "https://registry.npmjs.org/@onecx/accelerator/-/accelerator-4.23.0.tgz", + "integrity": "sha512-PdGPpk/rLy8NHXLV/9qh5dejAZeTTXLGYl0rp8FLwl90pDAcIMJa9b98rY1xUotxRw0d5xn6zPZjp1ruFklYzg==", "peerDependencies": { "rxjs": "7.8.1", "tslib": "^2.3.0" } }, "node_modules/@onecx/angular-accelerator": { - "version": "4.14.3", - "resolved": "https://registry.npmjs.org/@onecx/angular-accelerator/-/angular-accelerator-4.14.3.tgz", - "integrity": "sha512-yzuwz/T5y3O1AkBy6MQo1eLlGZRfBajq0i1DjnDq0XIkwVNCSIV0IM1wUTqUTkfrZuA8h9zaKOVWcdpnmkzQDw==", + "version": "4.23.0", + "resolved": "https://registry.npmjs.org/@onecx/angular-accelerator/-/angular-accelerator-4.23.0.tgz", + "integrity": "sha512-Yjq5RZ7+523GC6lyP3cF6bK0yLyN3kol8EVsSS6DpnZibpKawyoznXvGZAi5q+wkzkIgxPhU3p7YGNY+hSgZuA==", "dependencies": { "tslib": "^2.3.0" }, @@ -7414,8 +7414,8 @@ "@angular/platform-browser": "^15.2.7", "@angular/router": "^15.2.7", "@ngx-translate/core": "^14.0.0", - "@onecx/angular-integration-interface": "~4", - "@onecx/integration-interface": "~4", + "@onecx/angular-integration-interface": "^4", + "@onecx/integration-interface": "^4", "chart.js": "^4.4.0", "d3-scale-chromatic": "^3.0.0", "primeng": "^15.2.1", @@ -7450,36 +7450,36 @@ } }, "node_modules/@onecx/integration-interface": { - "version": "4.14.3", - "resolved": "https://registry.npmjs.org/@onecx/integration-interface/-/integration-interface-4.14.3.tgz", - "integrity": "sha512-C10rwpkm7bf47PEeQq7SsdP3iWFHDFG3t6s9wZBMuz3rVC5tbsAwlm1xrWIwpX1yTMhNyZBP5wQyyWaioMGkrQ==", + "version": "4.23.0", + "resolved": "https://registry.npmjs.org/@onecx/integration-interface/-/integration-interface-4.23.0.tgz", + "integrity": "sha512-hjt1srNl/ZbvmCM4v6xAje5PzFGj7khHbZXb/EYjni/XWyZK1k88qiZ8wEVEPDA0kDVBRYSYWGnx7T19uNDMIg==", "peerDependencies": { - "@onecx/accelerator": "~4", + "@onecx/accelerator": "^4", "rxjs": "7.8.1", "tslib": "^2.3.0" } }, "node_modules/@onecx/keycloak-auth": { - "version": "4.14.3", - "resolved": "https://registry.npmjs.org/@onecx/keycloak-auth/-/keycloak-auth-4.14.3.tgz", - "integrity": "sha512-hl35hy+rF4H3PWcwTzPo+1KLP4Y5lxVK81+kdlh/+Nsyb1jT4i1PF3h1YQ/y6+6yfyicL0ZD7YHBjX3K7wLrhA==", + "version": "4.23.0", + "resolved": "https://registry.npmjs.org/@onecx/keycloak-auth/-/keycloak-auth-4.23.0.tgz", + "integrity": "sha512-TNXNazV9VdG7riTie2dNLg85DZLqIYjKyuEKn/XrRXoF+xBKux5csILoPHC7Cdf/aFqYGVzsNFVGpYqupjkZYA==", "dependencies": { "tslib": "^2.3.0" }, "peerDependencies": { "@angular/common": ">=15.2.7", "@angular/core": ">=15.2.7", - "@onecx/angular-integration-interface": "~4", - "@onecx/integration-interface": "~4", + "@onecx/angular-integration-interface": "^4", + "@onecx/integration-interface": "^4", "keycloak-angular": "^13.0.0", "keycloak-js": "^18.0.0", "rxjs": "~7.8.0" } }, "node_modules/@onecx/portal-integration-angular": { - "version": "4.14.3", - "resolved": "https://registry.npmjs.org/@onecx/portal-integration-angular/-/portal-integration-angular-4.14.3.tgz", - "integrity": "sha512-MwJ7Z2mIFJsJg5NhrEWa0H+CM3P9GsSMoqw1BuaAGlUKWXGQ6YdoWAcVzAv/3PrDvoXnA60xkYA3sBBd+7bY3w==", + "version": "4.23.0", + "resolved": "https://registry.npmjs.org/@onecx/portal-integration-angular/-/portal-integration-angular-4.23.0.tgz", + "integrity": "sha512-1ACokNOZ9oGuP57aTaEOv6jKbB/NR7kvJo7zzBIc0LQU1kAcjiL0EK1EWkl815OJkRhvgd3Kiez7G+owqDgqJg==", "dependencies": { "tslib": "^2.3.0" }, @@ -7498,10 +7498,10 @@ "@ngrx/store": "^15.4.0", "@ngx-translate/core": "^14.0.0", "@ngx-translate/http-loader": "^7.0.0", - "@onecx/angular-accelerator": "~4", - "@onecx/angular-integration-interface": "~4", - "@onecx/angular-testing": "~4", - "@onecx/integration-interface": "~4", + "@onecx/angular-accelerator": "^4", + "@onecx/angular-integration-interface": "^4", + "@onecx/angular-testing": "^4", + "@onecx/integration-interface": "^4", "fast-deep-equal": "^3.1.3", "msw": "^1.3.2", "primeng": "^15.2.1", @@ -7510,9 +7510,9 @@ } }, "node_modules/@onecx/portal-layout-styles": { - "version": "4.14.3", - "resolved": "https://registry.npmjs.org/@onecx/portal-layout-styles/-/portal-layout-styles-4.14.3.tgz", - "integrity": "sha512-GrEa5FygHBByZSDtjozjxhD83AlZ5Yd+rbpgSq2YIWORF+0aj7vkQihtaFaWIbseizgIge5sukMWEPDh1Nn5fQ==", + "version": "4.23.0", + "resolved": "https://registry.npmjs.org/@onecx/portal-layout-styles/-/portal-layout-styles-4.23.0.tgz", + "integrity": "sha512-2e+B6Wly7WeXXYSaUwdyUQ0h3iGCp//7FOtpui/LVQrPG8enKqdiYniPsf5acboc3HsddHdQNZQZP8TaOELRdQ==", "peerDependencies": { "tslib": "^2.5.0" } diff --git a/package.json b/package.json index 2a45fbf..a3d7f8c 100644 --- a/package.json +++ b/package.json @@ -49,12 +49,12 @@ "@ngneat/falso": "^7.2.0", "@ngx-translate/core": "^14.0.0", "@ngx-translate/http-loader": "^7.0.0", - "@onecx/accelerator": "^4.14.3", - "@onecx/angular-accelerator": "^4.14.3", - "@onecx/integration-interface": "^4.14.3", - "@onecx/keycloak-auth": "^4.14.3", - "@onecx/portal-integration-angular": "^4.14.3", - "@onecx/portal-layout-styles": "^4.14.3", + "@onecx/accelerator": "^4.20.2", + "@onecx/angular-accelerator": "^4.20.2", + "@onecx/integration-interface": "^4.20.2", + "@onecx/keycloak-auth": "^4.20.2", + "@onecx/portal-integration-angular": "^4.20.2", + "@onecx/portal-layout-styles": "^4.20.2", "file-saver": "^2.0.5", "ngx-color": "^8.0.3", "primeflex": "^3.3.1", diff --git a/src/_mixins.scss b/src/_mixins.scss index a2878d1..b03879e 100644 --- a/src/_mixins.scss +++ b/src/_mixins.scss @@ -113,6 +113,19 @@ } } +@mixin dataview-zebra-rows { + :host ::ng-deep { + .p-dataview-content .p-grid > div { + min-height: 60px; + &.listview-row { + &:nth-child(odd) { + background-color: #f8f9fa; + } + } + } + } +} + @mixin correct-search-criteria { :host ::ng-deep { .search-criteria-container > div { diff --git a/src/app/product-store/app-detail/app-detail.component.html b/src/app/product-store/app-detail/app-detail.component.html index d8047dc..02972f6 100644 --- a/src/app/product-store/app-detail/app-detail.component.html +++ b/src/app/product-store/app-detail/app-detail.component.html @@ -1,10 +1,4 @@ + + +
+
+ {{ this.dialogTitelKey | translate }} +
+
+
+
+
{{ 'ACTIONS.' + this.changeMode + '.MFE.HEADER' | translate }} @@ -281,14 +293,14 @@ pInputText type="text" readonly - id="mfe_config_mfe_detail_field_creationDate" + id="app_detail_form_mfe_field_creationDate" class="w-full pt-3 pb-2" [value]="mfe?.['creationDate'] ? (mfe?.['creationDate'] | date : dateFormat) : ''" [pTooltip]="'INTERNAL.TOOLTIPS.CREATION_DATE' | translate" tooltipPosition="top" tooltipEvent="focus" /> - +
-
+
+ +
+
+ +
@@ -321,7 +363,7 @@ {{ 'ACTIONS.' + this.changeMode + '.MS.HEADER' | translate }} - + {{ 'APP.GROUP.LOCAL_MODULE' | translate }} @@ -430,14 +472,14 @@ pInputText type="text" readonly - id="mfe_config_mfe_detail_field_creationDate" + id="app_detail_form_ms_field_creationDate" class="w-full pt-3 pb-2" [value]="ms?.['creationDate'] ? (ms?.['creationDate'] | date : dateFormat) : ''" [pTooltip]="'INTERNAL.TOOLTIPS.CREATION_DATE' | translate" tooltipPosition="top" tooltipEvent="focus" /> - +
-
+
+ +
diff --git a/src/app/product-store/app-detail/app-detail.component.scss b/src/app/product-store/app-detail/app-detail.component.scss index e0ba7df..949c7c0 100644 --- a/src/app/product-store/app-detail/app-detail.component.scss +++ b/src/app/product-store/app-detail/app-detail.component.scss @@ -1,3 +1,7 @@ +@import '/src/_mixins.scss'; + +@include danger-action; + /* limit deletion dialog */ :host ::ng-deep { // popup dialogues @@ -8,10 +12,6 @@ } } - .danger-action-text { - color: var(--danger-button-bg); - } - .p-dialog { background: var(--panel-content-bg); .p-dialog-content { diff --git a/src/app/product-store/app-detail/app-detail.component.ts b/src/app/product-store/app-detail/app-detail.component.ts index 6be36b8..1d859c6 100644 --- a/src/app/product-store/app-detail/app-detail.component.ts +++ b/src/app/product-store/app-detail/app-detail.component.ts @@ -62,7 +62,10 @@ export class AppDetailComponent implements OnChanges { public ms: Microservice | undefined public formGroupMfe: FormGroup public formGroupMs: FormGroup + public dialogTitelKey = '' public loading = false + public undeployed = false + public deprecated = false public hasCreatePermission = false public hasEditPermission = false public technologies: SelectItem[] = [ @@ -155,6 +158,8 @@ export class AppDetailComponent implements OnChanges { if (data) { this.mfe = data if (this.mfe) this.viewFormMfe(this.mfe) + this.undeployed = this.mfe?.undeployed ?? false + this.deprecated = this.mfe?.deprecated ?? false if (this.changeMode === 'COPY') { if (this.mfe?.id) { this.mfe.id = undefined @@ -165,6 +170,7 @@ export class AppDetailComponent implements OnChanges { } this.enableForms() } + this.dialogTitelKey = 'ACTIONS.' + this.changeMode + '.MFE.HEADER' } }) } @@ -178,6 +184,7 @@ export class AppDetailComponent implements OnChanges { if (data) { this.ms = data if (this.ms) this.viewFormMs(this.ms) + this.undeployed = this.ms?.undeployed ?? false if (this.changeMode === 'COPY') { if (this.ms?.id) { this.ms.id = undefined @@ -188,6 +195,7 @@ export class AppDetailComponent implements OnChanges { } this.enableForms() } + this.dialogTitelKey = 'ACTIONS.' + this.changeMode + '.MS.HEADER' } }) } diff --git a/src/app/product-store/product-detail/product-detail.component.html b/src/app/product-store/product-detail/product-detail.component.html index 81b46b8..d526765 100644 --- a/src/app/product-store/product-detail/product-detail.component.html +++ b/src/app/product-store/product-detail/product-detail.component.html @@ -4,8 +4,8 @@ [header]="product?.displayName" [subheader]="('DIALOG.DETAIL.SUBHEADER' | translate) + ': ' + ('ACTIONS.' + changeMode + '.LABEL' | translate)" [actions]="(actions$ | async) ?? []" - [figureImage]="headerImageUrl" - [figureBackground]="!product?.imageUrl" + [figureImage]="currentLogoUrl" + [figureBackground]="!currentLogoUrl" > @@ -22,7 +22,8 @@ [product]="product" [changeMode]="changeMode" (productCreated)="onCreate($event)" - (productChanged)="onChange($event)" + (productChanged)="onChange()" + (currentLogoUrl)="onUpdateLogoUrl($event)" > diff --git a/src/app/product-store/product-detail/product-detail.component.scss b/src/app/product-store/product-detail/product-detail.component.scss index ea06f62..1568166 100644 --- a/src/app/product-store/product-detail/product-detail.component.scss +++ b/src/app/product-store/product-detail/product-detail.component.scss @@ -1,3 +1,7 @@ +@import '/src/_mixins.scss'; + +@include danger-action; + /* limit deletion dialog */ :host ::ng-deep { // each tab panel manages its own padding separately @@ -13,8 +17,4 @@ height: unset !important; } } - - .danger-action-text { - color: var(--danger-button-bg); - } } diff --git a/src/app/product-store/product-detail/product-detail.component.ts b/src/app/product-store/product-detail/product-detail.component.ts index 610d286..dcc72f5 100644 --- a/src/app/product-store/product-detail/product-detail.component.ts +++ b/src/app/product-store/product-detail/product-detail.component.ts @@ -5,8 +5,14 @@ import { Observable, finalize, map } from 'rxjs' import { TranslateService } from '@ngx-translate/core' import { Action, PortalMessageService, UserService } from '@onecx/portal-integration-angular' -import { Product, ProductAndWorkspaces, ProductsAPIService } from 'src/app/shared/generated' -import { prepareUrl } from 'src/app/shared/utils' +import { + ImagesInternalAPIService, + Product, + ProductAndWorkspaces, + ProductsAPIService, + RefType +} from 'src/app/shared/generated' +import { bffImageUrl } from 'src/app/shared/utils' import { ProductPropertyComponent } from './product-props/product-props.component' export type ChangeMode = 'VIEW' | 'CREATE' | 'EDIT' | 'COPY' @@ -27,6 +33,7 @@ export class ProductDetailComponent implements OnInit { public productDeleteVisible = false public productDeleteMessage = '' public selectedTabIndex = 0 + public currentLogoUrl: string | undefined = undefined @ViewChild(ProductPropertyComponent, { static: false }) productPropsComponent!: ProductPropertyComponent @@ -36,6 +43,7 @@ export class ProductDetailComponent implements OnInit { private user: UserService, private location: Location, private productApi: ProductsAPIService, + private imageApi: ImagesInternalAPIService, private msgService: PortalMessageService, private translate: TranslateService ) { @@ -73,7 +81,7 @@ export class ProductDetailComponent implements OnInit { if (data) { this.product = data this.prepareActionButtons() - this.headerImageUrl = prepareUrl(this.product?.imageUrl) + this.currentLogoUrl = this.getLogoUrl(this.product!) } } }) @@ -108,16 +116,6 @@ export class ProductDetailComponent implements OnInit { conditional: true, showCondition: this.changeMode === 'VIEW' }, - { - label: data['ACTIONS.EDIT.LABEL'], - title: data['ACTIONS.EDIT.PRODUCT.TOOLTIP'], - actionCallback: () => this.onEdit(), - icon: 'pi pi-pencil', - show: 'always', - conditional: true, - showCondition: this.selectedTabIndex === 0 && this.changeMode === 'VIEW' && this.product !== undefined, - permission: 'PRODUCT#EDIT' - }, { label: data['ACTIONS.COPY.LABEL'], title: data['ACTIONS.COPY.PRODUCT.HEADER'], @@ -128,6 +126,20 @@ export class ProductDetailComponent implements OnInit { showCondition: this.selectedTabIndex === 0 && this.changeMode === 'VIEW' && this.product !== undefined, permission: 'PRODUCT#CREATE' }, + { + label: data['ACTIONS.EDIT.LABEL'], + title: data['ACTIONS.EDIT.PRODUCT.TOOLTIP'], + actionCallback: () => this.onEdit(), + icon: 'pi pi-pencil', + show: 'always', + conditional: true, + showCondition: + this.selectedTabIndex === 0 && + this.changeMode === 'VIEW' && + this.product !== undefined && + !this.product.undeployed, + permission: 'PRODUCT#EDIT' + }, { label: data['ACTIONS.CANCEL'], title: data['ACTIONS.TOOLTIPS.CANCEL'], @@ -198,13 +210,9 @@ export class ProductDetailComponent implements OnInit { this.router.navigate(['./../', this.product?.name], { relativeTo: this.route }) } - public onChange(nameChanged: boolean) { - if (nameChanged) { - this.close() - } else { - this.changeMode = 'VIEW' - this.getProduct() - } + public onChange() { + this.changeMode = 'VIEW' + this.getProduct() } public onDelete(ev: MouseEvent, item: Product): void { @@ -225,4 +233,14 @@ export class ProductDetailComponent implements OnInit { }) } } + + // called by props component (this is the master of this url) + public onUpdateLogoUrl(url: string) { + this.currentLogoUrl = url + } + + public getLogoUrl(product: Product): string { + if (product?.imageUrl) return product?.imageUrl + else return bffImageUrl(this.imageApi.configuration.basePath, product?.name, RefType.Logo) + } } diff --git a/src/app/product-store/product-detail/product-intern/product-intern.component.html b/src/app/product-store/product-detail/product-intern/product-intern.component.html index 00abd53..ee676a0 100644 --- a/src/app/product-store/product-detail/product-intern/product-intern.component.html +++ b/src/app/product-store/product-detail/product-intern/product-intern.component.html @@ -7,14 +7,14 @@ pInputText type="text" readonly - id="portal_detail_internal_field_creationDate" + id="product_detail_intern_field_creationDate" class="w-full pt-3 pb-2" [value]="product?.creationDate | date : dateFormat" [pTooltip]="'INTERNAL.TOOLTIPS.CREATION_DATE' | translate" tooltipPosition="top" tooltipEvent="focus" /> - +
@@ -23,14 +23,14 @@ pInputText type="text" readonly - id="portal_detail_internal_field_creationUser" + id="product_detail_intern_field_creationUser" class="w-full pt-3 pb-2" [value]="product?.creationUser" [pTooltip]="'INTERNAL.TOOLTIPS.CREATION_USER' | translate" tooltipPosition="top" tooltipEvent="focus" /> - +
@@ -42,14 +42,14 @@ pInputText type="text" readonly - id="portal_detail_internal_field_modificationDate" + id="product_detail_intern_field_modificationDate" class="w-full pt-3 pb-2" [value]="product?.modificationDate | date : dateFormat" [pTooltip]="'INTERNAL.TOOLTIPS.MODIFICATION_DATE' | translate" tooltipPosition="top" tooltipEvent="focus" /> -