Fix logo management (#118)

* fix: logo management * fix: saving * fix: cleanup * fix: added undeployed to list view of product search results * fix: improve change on extern URL
onecx · May 10, 2024 · 15210a3 · 15210a3
1 parent a8891bc
commit 15210a3
Show file tree

Hide file tree

Showing 32 changed files with 487 additions and 386 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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
@@ -1,10 +1,4 @@
 <p-dialog
-  [header]="
-    loading
-      ? ''
-      : ('ACTIONS.' + this.changeMode + '.' + (appAbstract?.appType ? appAbstract?.appType : 'MS') + '.HEADER'
-        | translate)
-  "
   [(visible)]="displayDialog"
   (onHide)="onDialogHide()"
   [baseZIndex]="10000"
@@ -21,6 +15,24 @@
           '600px': '100vw',
       }"
 >
+  <ng-template pTemplate="header">
+    <div *ngIf="loading" class="pi pi-spinner"></div>
+    <div *ngIf="!loading" class="w-full flex flex-row justify-content-between align-items-center">
+      <div class="p-dialog-title" [class.danger-action-text]="undeployed || deprecated">
+        {{ this.dialogTitelKey | translate }}
+      </div>
+      <div
+        *ngIf="undeployed"
+        class="p-dialog-title font-bold danger-action-text pi pi-ban"
+        [title]="'APP.TOOLTIPS.UNDEPLOYED' | translate"
+      ></div>
+      <div
+        *ngIf="!undeployed && deprecated"
+        class="p-dialog-title font-bold danger-action-text pi pi-exclamation-circle"
+        [title]="'APP.TOOLTIPS.DEPRECATED' | translate"
+      ></div>
+    </div>
+  </ng-template>
   <form *ngIf="!loading && appAbstract?.appType === 'MFE'" [formGroup]="formGroupMfe" errorTailor>
     <ng-template pTemplate="header">
       <span>{{ 'ACTIONS.' + this.changeMode + '.MFE.HEADER' | translate }}</span>
@@ -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"
             />
-            <label for="mfe_config_mfe_detail_field_creationDate">{{ 'INTERNAL.CREATION_DATE' | translate }}</label>
+            <label for="app_detail_form_mfe_field_creationDate">{{ 'INTERNAL.CREATION_DATE' | translate }}</label>
           </span>
         </div>
         <div
@@ -301,18 +313,48 @@
               pInputText
               type="text"
               readonly
-              id="mfe_config_mfe_detail_field_modificationDate"
+              id="app_detail_form_mfe_field_modificationDate"
               class="w-full pt-3 pb-2"
               [value]="mfe?.['modificationDate'] ? (mfe?.['modificationDate'] | date : dateFormat) : ''"
               [pTooltip]="'INTERNAL.TOOLTIPS.MODIFICATION_DATE' | translate"
               tooltipPosition="top"
               tooltipEvent="focus"
             />
-            <label for="mfe_config_mfe_detail_field_modificationDate">
+            <label for="app_detail_form_mfe_field_modificationDate">
               {{ 'INTERNAL.MODIFICATION_DATE' | translate }}
             </label>
           </span>
         </div>
+        <div
+          class="col-12 md:col-3 px-4 flex align-items-center"
+          style="min-width: 12rem"
+          [title]="'APP.TOOLTIPS.UNDEPLOYED' | translate"
+        >
+          <p-checkbox
+            type="text"
+            [readonly]="true"
+            inputId="app_detail_form_ms_field_undeployed"
+            [(ngModel)]="undeployed"
+            [ngModelOptions]="{ standalone: true }"
+            [binary]="true"
+            [label]="'APP.UNDEPLOYED' | translate"
+          ></p-checkbox>
+        </div>
+        <div
+          class="col-12 md:col-3 px-4 flex align-items-center"
+          style="min-width: 12rem"
+          [title]="'APP.TOOLTIPS.DEPRECATED' | translate"
+        >
+          <p-checkbox
+            type="text"
+            [readonly]="true"
+            inputId="app_detail_form_ms_field_deprecated"
+            [(ngModel)]="deprecated"
+            [ngModelOptions]="{ standalone: true }"
+            [binary]="true"
+            [label]="'APP.DEPRECATED' | translate"
+          ></p-checkbox>
+        </div>
       </div>
     </p-fieldset>
   </form>
@@ -321,7 +363,7 @@
     <ng-template pTemplate="header">
       <span>{{ 'ACTIONS.' + this.changeMode + '.MS.HEADER' | translate }}</span>
     </ng-template>
-    <p-fieldset [toggleable]="false" [collapsed]="false" styleClass="surface-100 py-0 mx-0 mt-3">
+    <p-fieldset [toggleable]="false" [collapsed]="false" styleClass="surface-100 py-0 mx-0">
       <ng-template pTemplate="header">
         <span [title]="'APP.TOOLTIPS.GROUP.LOCAL_MODULE' | translate">{{ 'APP.GROUP.LOCAL_MODULE' | translate }}</span>
       </ng-template>
@@ -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"
             />
-            <label for="mfe_config_mfe_detail_field_creationDate">{{ 'INTERNAL.CREATION_DATE' | translate }}</label>
+            <label for="app_detail_form_ms_field_creationDate">{{ 'INTERNAL.CREATION_DATE' | translate }}</label>
           </span>
         </div>
         <div
@@ -450,18 +492,33 @@
               pInputText
               type="text"
               readonly
-              id="mfe_config_mfe_detail_field_modificationDate"
+              id="app_detail_form_ms_field_modificationDate"
               class="w-full pt-3 pb-2"
               [value]="ms?.['modificationDate'] ? (ms?.['modificationDate'] | date : dateFormat) : ''"
               [pTooltip]="'INTERNAL.TOOLTIPS.MODIFICATION_DATE' | translate"
               tooltipPosition="top"
               tooltipEvent="focus"
             />
-            <label for="mfe_config_mfe_detail_field_modificationDate">
+            <label for="app_detail_form_ms_field_modificationDate">
               {{ 'INTERNAL.MODIFICATION_DATE' | translate }}
             </label>
           </span>
         </div>
+        <div
+          class="col-12 md:col-3 px-4 flex align-items-center"
+          style="min-width: 12rem"
+          [title]="'APP.TOOLTIPS.UNDEPLOYED' | translate"
+        >
+          <p-checkbox
+            type="text"
+            [readonly]="true"
+            inputId="app_detail_form_ms_field_undeployed"
+            [(ngModel)]="undeployed"
+            [ngModelOptions]="{ standalone: true }"
+            [binary]="true"
+            [label]="'APP.UNDEPLOYED' | translate"
+          ></p-checkbox>
+        </div>
       </div>
     </p-fieldset>
   </form>

diff --git 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
@@ -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'
         }
       })
   }