fix: optimize code

onecx · Feb 23, 2024 · d9c91a6 · d9c91a6
1 parent 66c2978
commit d9c91a6
Show file tree

Hide file tree

Showing 8 changed files with 78 additions and 20 deletions.
diff --git a/src/app/product-store/app-search/app-search.component.html b/src/app/product-store/app-search/app-search.component.html
@@ -22,7 +22,7 @@
           />
           <label for="app_search_app_id">{{ 'APP.APP_ID' | translate }}</label>
         </span>
-        <span class="p-float-label">
+        <!--span class="p-float-label">
           <input
             id="app_search_app_name"
             pInputText
@@ -33,7 +33,7 @@
             [title]="'APP.APP_NAME' | translate"
           />
           <label for="app_search_app_name">{{ 'APP.APP_NAME' | translate }}</label>
-        </span>
+        </span-->
         <span class="p-float-label">
           <input
             id="app_search_product_name"
@@ -60,7 +60,7 @@
       [rows]="viewMode === 'grid' ? 24 : 10"
       [layout]="viewMode"
       [emptyMessage]="'ACTIONS.SEARCH.NOT_FOUND' | translate"
-      filterBy="appId,appName,appType,productName,classifications"
+      filterBy="appId,appType,productName,classifications"
       [sortField]="sortField"
       [sortOrder]="sortOrder"
     >
@@ -72,7 +72,6 @@
           [initialViewMode]="viewMode"
           [sortingOptions]="[
             { label: 'APP.APP_ID' | translate, value: 'appId' },
-            { label: 'APP.APP_NAME' | translate, value: 'appName' },
             { label: 'APP.APP_TYPE' | translate, value: 'appType' },
             { label: 'APP.PRODUCT_NAME' | translate, value: 'productName' }
           ]"
@@ -82,7 +81,6 @@
           (filterChange)="onFilterChange($event)"
           [filterColumns]="[
             'APP.APP_ID' | translate,
-            'APP.APP_NAME' | translate,
             'APP.APP_TYPE' | translate,
             'APP.PRODUCT_NAME' | translate,
             'APP.CLASSIFICATIONS' | translate

diff --git a/src/app/product-store/app-search/app-search.component.spec.ts b/src/app/product-store/app-search/app-search.component.spec.ts
@@ -13,7 +13,7 @@ import { MicrofrontendsAPIService } from 'src/app/shared/generated'
 
 const form = new FormGroup<AppSearchCriteria>({
   appId: new FormControl<string | null>(null, Validators.minLength(2)),
-  appName: new FormControl<string | null>(null),
+  //appName: new FormControl<string | null>(null),
   productName: new FormControl<string | null>(null)
 })
 

diff --git a/src/app/product-store/app-search/app-search.component.ts b/src/app/product-store/app-search/app-search.component.ts
@@ -18,8 +18,8 @@ import { limitText } from 'src/app/shared/utils'
 
 export interface AppSearchCriteria {
   appId: FormControl<string | null>
-  appName: FormControl<string | null>
-  //  appType: FormControl<AppType | null>
+  // appName: FormControl<string | null>
+  // appType: FormControl<AppType | null>
   productName: FormControl<string | null>
 }
 export type AppType = 'MS' | 'MFE'
@@ -69,12 +69,13 @@ export class AppSearchComponent implements OnInit, OnDestroy {
     this.hasDeletePermission = this.user.hasPermission('APP#DELETE')
     this.appSearchCriteriaGroup = new FormGroup<AppSearchCriteria>({
       appId: new FormControl<string | null>(null),
-      appName: new FormControl<string | null>(null),
+      //appName: new FormControl<string | null>(null),
       productName: new FormControl<string | null>(null)
     })
   }
 
   ngOnInit(): void {
+    this.prepareDialogTranslations()
     this.prepareActionButtons()
     this.searchApps()
   }
@@ -95,7 +96,7 @@ export class AppSearchComponent implements OnInit, OnDestroy {
       .searchMicrofrontends({
         mfeAndMsSearchCriteria: {
           appId: this.appSearchCriteriaGroup.controls['appId'].value,
-          appName: this.appSearchCriteriaGroup.controls['appName'].value,
+          //appName: this.appSearchCriteriaGroup.controls['appName'].value,
           productName: this.appSearchCriteriaGroup.controls['productName'].value,
           pageSize: 100
         }
@@ -114,7 +115,7 @@ export class AppSearchComponent implements OnInit, OnDestroy {
       .searchMicroservice({
         mfeAndMsSearchCriteria: {
           appId: this.appSearchCriteriaGroup.controls['appId'].value,
-          appName: this.appSearchCriteriaGroup.controls['appName'].value,
+          // appName: this.appSearchCriteriaGroup.controls['appName'].value,
           productName: this.appSearchCriteriaGroup.controls['productName'].value,
           pageSize: 100
         }
@@ -191,6 +192,45 @@ export class AppSearchComponent implements OnInit, OnDestroy {
       )
   }
 
+  private prepareDialogTranslations(): void {
+    this.translate
+      .get([
+        'APP.APP_ID',
+        'APP.APP_TYPE',
+        'PRODUCT.NAME',
+        'ACTIONS.DATAVIEW.VIEW_MODE_GRID',
+        'ACTIONS.DATAVIEW.VIEW_MODE_LIST',
+        'ACTIONS.DATAVIEW.VIEW_MODE_TABLE',
+        'ACTIONS.DATAVIEW.SORT_BY',
+        'ACTIONS.DATAVIEW.FILTER',
+        'ACTIONS.DATAVIEW.FILTER_OF',
+        'ACTIONS.DATAVIEW.SORT_DIRECTION_ASC',
+        'ACTIONS.DATAVIEW.SORT_DIRECTION_DESC'
+      ])
+      .subscribe((data) => {
+        this.dataViewControlsTranslations = {
+          sortDropdownPlaceholder: data['ACTIONS.DATAVIEW.SORT_BY'],
+          filterInputPlaceholder: data['ACTIONS.DATAVIEW.FILTER'],
+          filterInputTooltip:
+            data['ACTIONS.DATAVIEW.FILTER_OF'] +
+            data['APP.APP_ID'] +
+            ', ' +
+            data['APP.APP_TYPE'] +
+            ', ' +
+            data['PRODUCT.NAME'],
+          viewModeToggleTooltips: {
+            grid: data['ACTIONS.DATAVIEW.VIEW_MODE_GRID'],
+            list: data['ACTIONS.DATAVIEW.VIEW_MODE_LIST']
+          },
+          sortOrderTooltips: {
+            ascending: data['ACTIONS.DATAVIEW.SORT_DIRECTION_ASC'],
+            descending: data['ACTIONS.DATAVIEW.SORT_DIRECTION_DESC']
+          },
+          sortDropdownTooltip: data['ACTIONS.DATAVIEW.SORT_BY']
+        }
+      })
+  }
+
   public onLayoutChange(viewMode: string): void {
     this.viewMode = viewMode
   }

diff --git a/src/app/product-store/product-detail/product-apps/product-apps.component.html b/src/app/product-store/product-detail/product-apps/product-apps.component.html
@@ -13,7 +13,7 @@
     [rows]="viewMode === 'grid' ? 12 : 10"
     [layout]="viewMode"
     [emptyMessage]="'ACTIONS.SEARCH.NOT_FOUND' | translate"
-    filterBy="app_name"
+    filterBy="appId,appType"
     [sortField]="sortField"
     [sortOrder]="sortOrder"
   >
@@ -23,12 +23,15 @@
         [enableSorting]="true"
         [supportedViews]="['grid']"
         [initialViewMode]="viewMode"
-        [sortingOptions]="[{ label: 'APP.APP_NAME' | translate, value: 'app_name' }]"
+        [sortingOptions]="[
+          { label: 'APP.APP_ID' | translate, value: 'appId' },
+          { label: 'APP.APP_TYPE' | translate, value: 'appType' }
+        ]"
         [defaultSortOption]="sortField"
         [defaultSortDirection]="sortOrder === 1"
         (dataViewChange)="onLayoutChange($event)"
         (filterChange)="onFilterChange($event)"
-        [filterColumns]="['APP.APP_NAME' | translate]"
+        [filterColumns]="['APP.APP_ID' | translate, 'APP.APP_TYPE' | translate]"
         (sortChange)="onSortChange($event)"
         (sortDirectionChange)="onSortDirChange($event)"
         [translations]="dataViewControlsTranslations"

diff --git a/src/app/product-store/product-detail/product-apps/product-apps.component.ts b/src/app/product-store/product-detail/product-apps/product-apps.component.ts
@@ -1,6 +1,7 @@
 import { Component, Input, OnChanges, ViewChild } from '@angular/core'
 import { SelectItem } from 'primeng/api'
 import { combineLatest, finalize, map, of, Observable, startWith, catchError } from 'rxjs'
+import { DataView } from 'primeng/dataview'
 
 import { DataViewControlTranslations, UserService } from '@onecx/portal-integration-angular'
 import {
@@ -35,16 +36,16 @@ export class ProductAppsComponent implements OnChanges {
   public iconItems: SelectItem[] = [{ label: '', value: null }]
   public filter: string | undefined
   public viewMode = 'grid'
-  public sortField = 'name'
+  public sortField = 'appId'
   public sortOrder = 1
   public searchInProgress = false
   public displayDetailDialog = false
   public displayDeleteDialog = false
   public hasCreatePermission = false
   public hasDeletePermission = false
 
-  @ViewChild(DataView) dv: DataView | undefined
   public dataViewControlsTranslations: DataViewControlTranslations = {}
+  @ViewChild(DataView) dv: DataView | undefined
   public limitText = limitText
 
   constructor(
@@ -123,7 +124,7 @@ export class ProductAppsComponent implements OnChanges {
   }
   public onFilterChange(filter: string): void {
     this.filter = filter
-    //this.dv?.filter(filter, 'contains')
+    this.dv?.filter(filter, 'contains')
   }
   public onSortChange(field: string): void {
     this.sortField = field

diff --git a/src/app/product-store/product-detail/product-detail.component.html b/src/app/product-store/product-detail/product-detail.component.html
@@ -12,7 +12,11 @@
     <div *ngIf="!loading && !product && changeMode !== 'CREATE'" class="card px-3 align-items-center">
       <p-message severity="error" styleClass="p-2" [text]="'ACTIONS.SEARCH.PRODUCT.NOT_EXISTS' | translate"></p-message>
     </div>
-    <p-tabView *ngIf="(product && !loading) || changeMode === 'CREATE'">
+    <p-tabView
+      *ngIf="(product && !loading) || changeMode === 'CREATE'"
+      (onChange)="onTabChange($event)"
+      [activeIndex]="selectedTabIndex"
+    >
       <p-tabPanel id="product_detail_panel_props" class="p-0" [header]="'DIALOG.TABS.PROPERTIES' | translate">
         <app-product-props
           [product]="product"

diff --git a/src/app/product-store/product-detail/product-detail.component.ts b/src/app/product-store/product-detail/product-detail.component.ts
@@ -30,6 +30,7 @@ export class ProductDetailComponent implements OnInit {
   public headerImageUrl?: string
   public productDeleteVisible = false
   public productDeleteMessage = ''
+  public selectedTabIndex = 0
 
   constructor(
     private router: Router,
@@ -54,6 +55,11 @@ export class ProductDetailComponent implements OnInit {
     }
   }
 
+  public onTabChange($event: any) {
+    this.selectedTabIndex = $event.index
+    this.prepareActionButtons()
+  }
+
   public getProduct() {
     this.loading = true
     this.productApi
@@ -111,7 +117,7 @@ export class ProductDetailComponent implements OnInit {
               icon: 'pi pi-pencil',
               show: 'always',
               conditional: true,
-              showCondition: this.changeMode === 'VIEW' && this.product !== undefined,
+              showCondition: this.changeMode === 'VIEW' && this.product !== undefined && this.selectedTabIndex === 0,
               permission: 'PRODUCT#EDIT'
             },
             {
@@ -121,7 +127,7 @@ export class ProductDetailComponent implements OnInit {
               icon: 'pi pi-copy',
               show: 'always',
               conditional: true,
-              showCondition: this.changeMode === 'VIEW' && this.product !== undefined,
+              showCondition: this.changeMode === 'VIEW' && this.product !== undefined && this.selectedTabIndex === 0,
               permission: 'PRODUCT#CREATE'
             },
             {

diff --git a/src/app/product-store/product-search/product-search.component.scss b/src/app/product-store/product-search/product-search.component.scss
@@ -1,4 +1,10 @@
 :host ::ng-deep {
+  // correction for data-view-control component
+  .data-view-control-border.p-dropdown:last-of-type {
+    border-top-left-radius: var(--border-radius);
+    border-bottom-left-radius: var(--border-radius);
+  }
+
   .p-dataview-content .p-grid > div {
     min-height: 60px;
     &.listview-row {