added deletion products, custom validator for product name, correct translations

angular.json

@@ -108,7 +108,12 @@
             "assets": ["src/favicon.ico", "src/assets"],
             "styles": ["src/styles.scss"],
             "scripts": [],
-            "codeCoverageExclude": ["src/app/test/**", "src/app/generated/**"]
+            "codeCoverageExclude": [
+              "**/*.module.ts",
+              "src/app/test/**",
+              "src/app/environments/**",
+              "src/app/generated/**"
+            ]
           }
         },
         "lint": {

proxy.conf.js

@@ -26,16 +26,6 @@ const PROXY_CONFIG = {
     changeOrigin: true,
     logLevel: 'debug',
     bypass: bypassFn
-  },
-  '/ahm-api': {
-    target: 'http://ahm',
-    secure: false,
-    pathRewrite: {
-      '^.*/ahm-api': ''
-    },
-    changeOrigin: true,
-    logLevel: 'debug',
-    bypass: logFn
   }
 }
 

sonar-local-project.properties

@@ -18,7 +18,7 @@ sonar.testExecutionReportPaths=reports/sonarqube_report.xml
 sonar.sourceEncoding=UTF-8
 #sonar.sources=src/app
 #sonar.working.directory=dist/sonar
-sonar.coverage.exclusions=*.ts,*.js,src/*.ts,src/**/*.module.ts,src/environments/*,src/assets/**/*,src/app/generated/**/*,src/test/*
+sonar.coverage.exclusions=*.ts,*.js,src/*.ts,src/**/*.module.ts,src/environments/*,src/assets/**/*,src/app/generated/**/*,src/app/test/*
 #sonar.exclusions=src/app/generated/**/*
 #sonar.cpd.exclusions=
 #sonar.tests=src/app

src/app/product-store/product-detail/product-detail.component.html

@@ -9,16 +9,16 @@
   >
   </ocx-page-header>
   <ocx-page-content>
-    <div *ngIf="!product && changeMode !== 'NEW'" class="card px-3 align-items-center">
+    <div *ngIf="!loading && !product && changeMode !== 'CREATE'" class="card px-3 align-items-center">
       <p-message severity="error" styleClass="p-2" [text]="'VALIDATION.PRODUCT.NOT_EXISTS' | translate"></p-message>
     </div>
-    <p-tabView *ngIf="(product && !loading) || changeMode === 'NEW'">
+    <p-tabView *ngIf="(product && !loading) || changeMode === 'CREATE'">
       <p-tabPanel id="product_detail_panel_props" [header]="'DIALOG.TABS.PROPERTIES' | translate">
         <ps-product-props
           [product]="product"
           [changeMode]="changeMode"
-          (productCreate)="onCreate($event)"
-          (productNameChanged)="onNameChange($event)"
+          (productCreated)="onCreate($event)"
+          (productChanged)="onChange($event)"
         ></ps-product-props>
       </p-tabPanel>
 
@@ -32,3 +32,45 @@
     </p-tabView>
   </ocx-page-content>
 </ocx-portal-page>
+
+<p-dialog
+  [(visible)]="productDeleteVisible"
+  [header]="'ACTIONS.DELETE.PRODUCT.HEADER' | translate"
+  [modal]="true"
+  [resizable]="false"
+  [dismissableMask]="true"
+  [style]="{ 'max-width': '500px' }"
+>
+  <div class="flex column-gap-3 row-gap-1 justify-content-start align-items-center">
+    <div class="pi pi-question-circle text-3xl danger-action-text"></div>
+    <div>
+      <div>{{('ACTIONS.DELETE.MESSAGE' | translate).replace('{{ITEM}}', product?.name)}}</div>
+      <div class="mt-2">{{ 'ACTIONS.DELETE.MESSAGE_INFO' | translate }}</div>
+    </div>
+  </div>
+  <ng-template pTemplate="footer">
+    <div class="flex flex-wrap column-gap-2 row-gap-1 justify-content-end">
+      <button
+        pButton
+        autofocus
+        type="button"
+        class="m-0"
+        icon="pi pi-times"
+        iconPos="left"
+        [label]="'ACTIONS.CONFIRMATION.NO' | translate"
+        [title]="'ACTIONS.CONFIRMATION.NO.TOOLTIP' | translate"
+        (click)="productDeleteVisible = false"
+      ></button>
+      <button
+        pButton
+        type="button"
+        class="m-0"
+        icon="pi pi-check"
+        iconPos="left"
+        [label]="'ACTIONS.CONFIRMATION.YES' | translate"
+        [title]="'ACTIONS.CONFIRMATION.YES.TOOLTIP' | translate"
+        (click)="onDeleteConfirmation()"
+      ></button>
+    </div>
+  </ng-template>
+</p-dialog>

src/app/product-store/product-detail/product-detail.component.ts

@@ -10,7 +10,7 @@ import { Product, ProductsAPIService, MicrofrontendsAPIService, GetProductReques
 import { environment } from '../../../environments/environment'
 import { ProductPropertyComponent } from './product-props/product-props.component'
 
-type ChangeMode = 'VIEW' | 'NEW' | 'EDIT'
+type ChangeMode = 'VIEW' | 'CREATE' | 'EDIT'
 
 @Component({
   templateUrl: './product-detail.component.html',
@@ -24,7 +24,7 @@ export class ProductDetailComponent implements OnInit {
   public productName: string
   public product: Product | undefined
   //  usedInWorkspace: Workspace[] | undefined
-  public changeMode: ChangeMode = 'NEW'
+  public changeMode: ChangeMode = 'CREATE'
   public loading = false
   public dateFormat = 'medium'
   public actions: Action[] = []
@@ -75,7 +75,6 @@ export class ProductDetailComponent implements OnInit {
           this.prepareTranslations()
         },
         error: (err: any) => {
-          console.log('ERR')
           this.msgService.error({
             summaryKey: 'DIALOG.LOAD_ERROR'
             // detailKey: err.error.indexOf('was not found') > 1 ? 'DIALOG.NOT_FOUND' : err.error
@@ -109,10 +108,10 @@ export class ProductDetailComponent implements OnInit {
     this.translate
       .get([
         'ACTIONS.DELETE.LABEL',
-        'ACTIONS.DELETE.TOOLTIP',
+        'ACTIONS.DELETE.PRODUCT.TOOLTIP',
         'ACTIONS.DELETE.MESSAGE',
         'ACTIONS.EDIT.LABEL',
-        'ACTIONS.EDIT.TOOLTIP',
+        'ACTIONS.EDIT.PRODUCT.TOOLTIP',
         'ACTIONS.CANCEL',
         'ACTIONS.TOOLTIPS.CANCEL',
         'ACTIONS.SAVE',
@@ -139,7 +138,7 @@ export class ProductDetailComponent implements OnInit {
       },
       {
         label: data['ACTIONS.EDIT.LABEL'],
-        title: data['ACTIONS.EDIT.TOOLTIP'],
+        title: data['ACTIONS.EDIT.PRODUCT.TOOLTIP'],
         actionCallback: () => this.onEdit(),
         icon: 'pi pi-pencil',
         show: 'always',
@@ -151,7 +150,7 @@ export class ProductDetailComponent implements OnInit {
         label: data['ACTIONS.CANCEL'],
         title: data['ACTIONS.TOOLTIPS.CANCEL'],
         actionCallback: () => this.onCancel(),
-        icon: 'pi pi-pencil',
+        icon: 'pi pi-times',
         show: 'always',
         conditional: true,
         showCondition: this.changeMode !== 'VIEW'
@@ -160,15 +159,15 @@ export class ProductDetailComponent implements OnInit {
         label: data['ACTIONS.SAVE'],
         title: data['ACTIONS.TOOLTIPS.SAVE'],
         actionCallback: () => this.onSave(),
-        icon: 'pi pi-pencil',
+        icon: 'pi pi-save',
         show: 'always',
         conditional: true,
         showCondition: this.changeMode !== 'VIEW',
         permission: 'PRODUCT#EDIT'
       },
       {
         label: data['ACTIONS.DELETE.LABEL'],
-        title: data['ACTIONS.DELETE.TOOLTIP'],
+        title: data['ACTIONS.DELETE.PRODUCT.TOOLTIP'],
         actionCallback: () => {
           this.productDeleteMessage = data['ACTIONS.DELETE.MESSAGE'].replace('{{ITEM}}', this.product?.name)
           this.productDeleteVisible = true
@@ -208,7 +207,7 @@ export class ProductDetailComponent implements OnInit {
       this.getProduct()
       this.prepareTranslations()
     }
-    if (this.changeMode === 'NEW') {
+    if (this.changeMode === 'CREATE') {
       this.close()
     }
   }
@@ -217,8 +216,35 @@ export class ProductDetailComponent implements OnInit {
   }
   public onCreate(data: any) {
     this.product = data
+    this.changeMode === 'VIEW'
+    this.router.navigate(['./../', this.product?.name], { relativeTo: this.route })
+  }
+  public onChange(nameChanged: boolean) {
+    console.log('detail.onChange ')
+    if (nameChanged) {
+      this.close()
+    } else {
+      this.getProduct()
+      this.changeMode === 'VIEW'
+      this.prepareTranslations()
+    }
   }
-  public onNameChange(change: boolean) {
-    change ? this.close() : this.getProduct()
+  public onDelete(ev: MouseEvent, item: Product): void {
+    ev.stopPropagation()
+    this.product = item
+    this.productDeleteVisible = true
+  }
+  public onDeleteConfirmation(): void {
+    if (this.product?.id) {
+      this.productApi.deleteProduct({ id: this.product?.id }).subscribe({
+        next: () => {
+          this.productDeleteVisible = false
+          this.product = undefined
+          this.msgService.success({ summaryKey: 'ACTIONS.DELETE.PRODUCT.OK' })
+          this.close()
+        },
+        error: () => this.msgService.error({ summaryKey: 'ACTIONS.DELETE.PRODUCT.NOK' })
+      })
+    }
   }
 }

src/app/product-store/product-detail/product-props/product-props.component.html

@@ -6,6 +6,10 @@
           <input pInputText type="text" class="w-full" id="product_detail_item_name" formControlName="name" />
           <label class="ocx-required-label" for="product_detail_item_name">{{ 'PRODUCT.NAME' | translate }}</label>
         </span>
+        <!-- Custom validator message -->
+        <div *ngIf="this.formGroup.controls['name'].errors?.['invalidProductName']">
+          <label class="control-error">{{ 'VALIDATION.PRODUCT.INVALID_NAME' | translate }}</label>
+        </div>
       </div>
       <div class="w-full sm:w-10 md:w-9 lg:w-6 px-3">
         <span class="p-float-label" [title]="'PRODUCT.TOOLTIPS.VERSION' | translate" controlErrorAnchor>

src/app/product-store/product-detail/product-props/product-props.component.spec.ts

@@ -100,15 +100,15 @@ describe('ProductPropertyComponent', () => {
       classifications: new FormControl<string[] | null>(null)
     })
     component.formGroup = formGroup as FormGroup<ProductDetailForm>
-    component.changeMode = 'NEW'
+    component.changeMode = 'CREATE'
 
     component.onSubmit()
 
     expect(apiServiceSpy.createProduct).toHaveBeenCalled()
-    expect(msgServiceSpy.success).toHaveBeenCalledWith({ summaryKey: 'ACTIONS.CREATE.MESSAGE.PRODUCT_OK' })
+    expect(msgServiceSpy.success).toHaveBeenCalledWith({ summaryKey: 'ACTIONS.CREATE.PRODUCT.OK' })
   })
 
-  it('should call updateProduct onSubmit in view mode', () => {
+  it('should call updateProduct onSubmit in edit mode', () => {
     apiServiceSpy.updateProduct.and.returnValue(of({}))
     const formGroup = new FormGroup<ProductDetailForm>({
       id: new FormControl<string | null>('id'),
@@ -123,15 +123,15 @@ describe('ProductPropertyComponent', () => {
       classifications: new FormControl<string[] | null>(null)
     })
     component.formGroup = formGroup as FormGroup<ProductDetailForm>
-    component.changeMode = 'VIEW'
+    component.changeMode = 'EDIT'
 
     component.onSubmit()
 
     expect(apiServiceSpy.updateProduct).toHaveBeenCalled()
-    expect(msgServiceSpy.success).toHaveBeenCalledWith({ summaryKey: 'ACTIONS.EDIT.MESSAGE.PRODUCT_OK' })
+    expect(msgServiceSpy.success).toHaveBeenCalledWith({ summaryKey: 'ACTIONS.EDIT.PRODUCT.OK' })
   })
 
-  it('should display error if searchProducts fails', () => {
+  it('should display error if updateProduct fails', () => {
     apiServiceSpy.updateProduct.and.returnValue(throwError(() => new Error()))
     const formGroup = new FormGroup<ProductDetailForm>({
       id: new FormControl<string | null>('id'),
@@ -146,17 +146,17 @@ describe('ProductPropertyComponent', () => {
       classifications: new FormControl<string[] | null>(null)
     })
     component.formGroup = formGroup as FormGroup<ProductDetailForm>
-    component.changeMode = 'VIEW'
+    component.changeMode = 'EDIT'
 
     component.onSubmit()
 
     expect(component.formGroup.valid).toBeTrue()
     expect(msgServiceSpy.error).toHaveBeenCalledWith({
-      summaryKey: 'ACTIONS.EDIT.MESSAGE.PRODUCT_NOK'
+      summaryKey: 'ACTIONS.EDIT.PRODUCT.NOK'
     })
   })
 
-  it('should display error if searchProducts fails', () => {
+  it('should display error if createProduct fails', () => {
     apiServiceSpy.createProduct.and.returnValue(throwError(() => new Error()))
     const formGroup = new FormGroup<ProductDetailForm>({
       id: new FormControl<string | null>('id'),
@@ -171,13 +171,13 @@ describe('ProductPropertyComponent', () => {
       classifications: new FormControl<string[] | null>(null)
     })
     component.formGroup = formGroup as FormGroup<ProductDetailForm>
-    component.changeMode = 'NEW'
+    component.changeMode = 'CREATE'
 
     component.onSubmit()
 
     expect(component.formGroup.valid).toBeTrue()
     expect(msgServiceSpy.error).toHaveBeenCalledWith({
-      summaryKey: 'ACTIONS.CREATE.MESSAGE.PRODUCT_NOK'
+      summaryKey: 'ACTIONS.CREATE.PRODUCT.NOK'
     })
   })