fix: minor issues and improvements

intershop · Dec 5, 2024 · f6ce17c · f6ce17c
1 parent ae1853e
commit f6ce17c
Show file tree

Hide file tree

Showing 15 changed files with 60 additions and 53 deletions.
diff --git a/docs/guides/field-library.md b/docs/guides/field-library.md
@@ -252,7 +252,7 @@ They are automatically updated using sync-formly-docs.ts -->
 | `addressLine2`    | ish-text-input-field  | Address Line 2, not required by default                                                     |
 | `postalCode`      | ish-text-input-field  | Postal code, required by default                                                            |
 | `city`            | ish-text-input-field  | City, required by default                                                                   |
-| `budgetPriceType` | ish-budget-type-field | Taxation ID, not required by default                                                        |
+| `budgetPriceType` | ish-budget-type-field | Budget Type ('gross' or 'net'), not required by default                                     |
 
 | ConfigurationGroup ID | ShortcutFor Types                               |
 | --------------------- | ----------------------------------------------- |

diff --git a/projects/organization-management/src/app/components/budget-info/budget-info.component.html b/projects/organization-management/src/app/components/budget-info/budget-info.component.html
@@ -3,11 +3,16 @@
     [ishServerHtml]="
       (
         'account.organization.budget_price_type.info' | translate : { type: (customer$ | async).budgetPriceType }
-      ).concat(additionalText | translate)
+      ).concat(suffix | translate)
     "
   >
   </span
 ></ng-template>
-<a [ngbPopover]="BudgetPriceTypeInfo" data-testing-id="BudgetPriceTypeInfoTestingID" placement="right">
+<a
+  *ngIf="'services.OrderApprovalServiceDefinition.runnable' | ishServerSetting"
+  [ngbPopover]="BudgetPriceTypeInfo"
+  placement="right"
+  data-testing-id="budgetPriceTypeInfoTestingID"
+>
   <fa-icon [icon]="['fas', 'info-circle']" />
 </a>
diff --git a/...ects/organization-management/src/app/components/budget-info/budget-info.component.spec.ts b/...ects/organization-management/src/app/components/budget-info/budget-info.component.spec.ts
@@ -1,7 +1,11 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap';
+import { MockComponent, MockPipe } from 'ng-mocks';
 import { instance, mock } from 'ts-mockito';
 
 import { AccountFacade } from 'ish-core/facades/account.facade';
+import { ServerSettingPipe } from 'ish-core/pipes/server-setting.pipe';
 
 import { BudgetInfoComponent } from './budget-info.component';
 
@@ -12,6 +16,8 @@ describe('Budget Info Component', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
+      imports: [NgbPopoverModule],
+      declarations: [BudgetInfoComponent, MockComponent(FaIconComponent), MockPipe(ServerSettingPipe, () => true)],
       providers: [{ provide: AccountFacade, useFactory: () => instance(mock(AccountFacade)) }],
     }).compileComponents();
   });
@@ -26,6 +32,10 @@ describe('Budget Info Component', () => {
     expect(component).toBeTruthy();
     expect(element).toBeTruthy();
     expect(() => fixture.detectChanges()).not.toThrow();
-    expect(element.querySelector('[data-testing-id=BudgetPriceTypeInfoTestingID]')).toBeTruthy();
+  });
+
+  it('should be display the tooltip info icon', () => {
+    fixture.detectChanges();
+    expect(element.querySelector('[data-testing-id=budgetPriceTypeInfoTestingID]')).toBeTruthy();
   });
 });
diff --git a/projects/organization-management/src/app/components/budget-info/budget-info.component.ts b/projects/organization-management/src/app/components/budget-info/budget-info.component.ts
@@ -1,27 +1,23 @@
-import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
-import { Observable } from 'rxjs';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 
 import { AccountFacade } from 'ish-core/facades/account.facade';
-import { Customer } from 'ish-core/models/customer/customer.model';
 import { GenerateLazyComponent } from 'ish-core/utils/module-loader/generate-lazy-component.decorator';
 
+/**
+ * The Budget Info Component display an info icon containing a message which budget type (gross or net) is used.
+ *
+ */
 @Component({
   selector: 'ish-budget-info',
   templateUrl: './budget-info.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 @GenerateLazyComponent()
-export class BudgetInfoComponent implements OnInit {
-  @Input() suffix: string;
+export class BudgetInfoComponent {
+  /** translation key for a further message text after the main message */
+  @Input() suffix = '';
 
-  customer$: Observable<Customer>;
-
-  additionalText: string;
+  customer$ = this.accountFacade.customer$;
 
   constructor(private accountFacade: AccountFacade) {}
-
-  ngOnInit() {
-    this.suffix ? (this.additionalText = this.suffix) : (this.additionalText = '');
-    this.customer$ = this.accountFacade.customer$;
-  }
 }
diff --git a/...cts/organization-management/src/app/components/budget-widget/budget-widget.component.html b/...cts/organization-management/src/app/components/budget-widget/budget-widget.component.html
@@ -1,16 +1,9 @@
 <ish-error-message [error]="error$ | async" />
 <ish-info-box class="infobox-wrapper" cssClass="infobox-widget">
-  <div class="d-flex align-items-center">
-    <div class="pb-2">
-      <h3 class="p-0 m-0">
-        {{ 'account.requisitions.widget.budget_title' | translate }}
-      </h3>
-    </div>
-    <div class="pl-2 pb-2">
-      <ish-budget-info />
-    </div>
+  <div class="d-flex align-items-start">
+    <h3 class="pr-2 mb-0">{{ 'account.requisitions.widget.budget_title' | translate }}</h3>
+    <ish-budget-info />
   </div>
-
   <div class="loading-container">
     <div *ngIf="(budgetLoading$ | async) !== true; else loading">
       <div class="row">

diff --git a/...-management/src/app/pages/organization-settings/organization-settings-page.component.html b/...-management/src/app/pages/organization-settings/organization-settings-page.component.html
@@ -26,7 +26,6 @@ <h3>{{ 'account.company_profile.detail.heading' | translate }}</h3>
   </div>
   <div class="col-2 col-lg-4">
     <a
-      *ishIsAuthorizedTo="'APP_B2B_MANAGE_USERS'"
       routerLink="/account/organization/settings/company"
       class="btn-tool"
       title="{{ 'account.profile.update.link' | translate }}"
@@ -38,14 +37,13 @@ <h3>{{ 'account.company_profile.detail.heading' | translate }}</h3>
 </div>
 
 <!--Preferences -->
-<div class="row section">
+<div *ngIf="'services.OrderApprovalServiceDefinition.runnable' | ishServerSetting" class="row section">
   <div class="col-10 col-lg-8">
     <h3>{{ 'account.organization.org_settings.preferences.subtitle' | translate }}</h3>
     <form class="form-horizontal" [formGroup]="budgetTypeForm">
       <formly-form
         [form]="budgetTypeForm"
         [fields]="fields"
-        [options]="options"
         [model]="model"
         (click)="budgetTypeChangeConfirmationDialog.show()"
       />

diff --git a/...nagement/src/app/pages/organization-settings/organization-settings-page.component.spec.ts b/...nagement/src/app/pages/organization-settings/organization-settings-page.component.spec.ts
@@ -1,13 +1,14 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { TranslateModule } from '@ngx-translate/core';
-import { MockComponent, MockDirective } from 'ng-mocks';
+import { MockComponent, MockDirective, MockPipe } from 'ng-mocks';
 import { of } from 'rxjs';
 import { instance, mock, when } from 'ts-mockito';
 
-import { AuthorizationToggleDirective } from 'ish-core/directives/authorization-toggle.directive';
 import { ServerHtmlDirective } from 'ish-core/directives/server-html.directive';
 import { AccountFacade } from 'ish-core/facades/account.facade';
 import { Customer } from 'ish-core/models/customer/customer.model';
+import { ServerSettingPipe } from 'ish-core/pipes/server-setting.pipe';
 import { ModalDialogComponent } from 'ish-shared/components/common/modal-dialog/modal-dialog.component';
 import { FormlyTestingModule } from 'ish-shared/formly/dev/testing/formly-testing.module';
 import { FieldLibrary } from 'ish-shared/formly/field-library/field-library';
@@ -35,9 +36,10 @@ describe('Organization Settings Page Component', () => {
     await TestBed.configureTestingModule({
       imports: [FormlyTestingModule, TranslateModule.forRoot()],
       declarations: [
+        MockComponent(FaIconComponent),
         MockComponent(ModalDialogComponent),
-        MockDirective(AuthorizationToggleDirective),
         MockDirective(ServerHtmlDirective),
+        MockPipe(ServerSettingPipe, () => true),
         OrganizationSettingsPageComponent,
       ],
       providers: [

diff --git a/...on-management/src/app/pages/organization-settings/organization-settings-page.component.ts b/...on-management/src/app/pages/organization-settings/organization-settings-page.component.ts
@@ -1,14 +1,18 @@
 import { ChangeDetectionStrategy, Component, DestroyRef, OnInit, inject } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormGroup } from '@angular/forms';
-import { FormlyFieldConfig, FormlyFormOptions } from '@ngx-formly/core';
+import { FormlyFieldConfig } from '@ngx-formly/core';
 import { pick } from 'lodash-es';
 
 import { AccountFacade } from 'ish-core/facades/account.facade';
 import { Customer } from 'ish-core/models/customer/customer.model';
 import { FieldLibrary } from 'ish-shared/formly/field-library/field-library';
 import { markAsDirtyRecursive } from 'ish-shared/forms/utils/form-utils';
 
+/**
+ * The Organization Settings Page Component shows the company profile.
+ * The account admin can edit it and change the type (gross / net) for the budget calculation
+ */
 @Component({
   selector: 'ish-organization-settings-page',
   templateUrl: './organization-settings-page.component.html',
@@ -21,7 +25,6 @@ export class OrganizationSettingsPageComponent implements OnInit {
   budgetTypeForm: FormGroup = new FormGroup({});
   model: Partial<Customer>;
   fields: FormlyFieldConfig[];
-  options: FormlyFormOptions = {};
   customer: Customer;
 
   constructor(private accountFacade: AccountFacade, private fieldLibrary: FieldLibrary) {}

diff --git a/src/app/core/appearance.module.ts b/src/app/core/appearance.module.ts
@@ -19,7 +19,8 @@ import { ThemeService } from './utils/theme/theme.service';
 export class AppearanceModule {
   constructor(popoverConfig: NgbPopoverConfig, themeService: ThemeService) {
     popoverConfig.placement = 'top';
-    popoverConfig.triggers = 'hover';
+    popoverConfig.triggers = 'click';
+    popoverConfig.autoClose = 'outside';
     popoverConfig.container = 'body';
 
     themeService.init();

diff --git a/src/app/core/models/customer/customer.mapper.ts b/src/app/core/models/customer/customer.mapper.ts
@@ -45,7 +45,7 @@ export class CustomerMapper {
           taxationID: data.taxationID,
           industry: data.industry,
           description: data.description,
-          budgetPriceType: data.budgetPriceType,
+          budgetPriceType: data.budgetPriceType || 'gross',
         }
       : {
           customerNo: data.customerNo,

diff --git a/src/app/core/models/customer/customer.model.ts b/src/app/core/models/customer/customer.model.ts
@@ -13,7 +13,6 @@ export interface Customer {
   taxationID?: string;
   industry?: string;
   description?: string;
-
   budgetPriceType?: 'net' | 'gross';
 }
 

diff --git a/src/app/pages/account/account-navigation/account-navigation.items.ts b/src/app/pages/account/account-navigation/account-navigation.items.ts
@@ -67,12 +67,6 @@ export const navigationItems: NavigationItem[] = [
     faIcon: 'briefcase',
     isCollapsed: true,
     children: [
-      {
-        id: 'org-settings',
-        localizationKey: 'account.organization.org_settings',
-        routerLink: '/account/organization/settings',
-        permission: 'APP_B2B_MANAGE_USERS',
-      },
       {
         id: 'addresses',
         localizationKey: 'account.saved_addresses.link',
@@ -99,6 +93,12 @@ export const navigationItems: NavigationItem[] = [
         feature: 'punchout',
         permission: 'APP_B2B_MANAGE_PUNCHOUT',
       },
+      {
+        id: 'org-settings',
+        localizationKey: 'account.organization.org_settings',
+        routerLink: '/account/organization/settings',
+        permission: 'APP_B2B_MANAGE_USERS',
+      },
     ],
   },
   {
@@ -108,12 +108,6 @@ export const navigationItems: NavigationItem[] = [
     isCollapsed: true,
     notRole: ['APP_B2B_CXML_USER', 'APP_B2B_OCI_USER'],
     children: [
-      {
-        id: 'profile',
-        localizationKey: 'account.profile.link',
-        routerLink: '/account/profile',
-        notRole: ['APP_B2B_CXML_USER', 'APP_B2B_OCI_USER'],
-      },
       {
         id: 'payment',
         localizationKey: 'account.payment.link',
@@ -127,6 +121,12 @@ export const navigationItems: NavigationItem[] = [
         feature: 'productNotifications',
         notRole: ['APP_B2B_CXML_USER', 'APP_B2B_OCI_USER'],
       },
+      {
+        id: 'profile',
+        localizationKey: 'account.profile.link',
+        routerLink: '/account/profile',
+        notRole: ['APP_B2B_CXML_USER', 'APP_B2B_OCI_USER'],
+      },
     ],
   },
   {

diff --git a/src/assets/i18n/de_DE.json b/src/assets/i18n/de_DE.json
@@ -294,7 +294,7 @@
   "account.ordertemplates.link": "Bestellvorlagen",
   "account.ordertemplates.widget.heading": "Meine Bestellvorlagen",
   "account.ordertemplates.widget.view_all.link": "Alle Bestellvorlagen ansehen",
-  "account.organization.budget_price_type.admin.info": "<br /> Sie können diese <a href=\"route://account/profile/company\">Einstellung</a> jederzeit ändern.",
+  "account.organization.budget_price_type.admin.info": "<br /> Sie können diese <a href=\"route://account/organization/settings\">Einstellung</a> jederzeit ändern.",
   "account.organization.budget_price_type.info": "Budgets werden in <b>{{type, select, =net{netto} =gross{brutto}}}</b> berechnet.",
   "account.organization.budget_price_type.notification_modal.all_effected": "Die Änderung wird sich auf sämtliche Benutzer- und Kostenstellenbudgets auswirken.",
   "account.organization.budget_price_type.notification_modal.ask": "Wollen Sie die Budgetberechnung wirklich ändern?",

diff --git a/src/assets/i18n/en_US.json b/src/assets/i18n/en_US.json
@@ -294,7 +294,7 @@
   "account.ordertemplates.link": "Order templates",
   "account.ordertemplates.widget.heading": "My order templates",
   "account.ordertemplates.widget.view_all.link": "View all order templates",
-  "account.organization.budget_price_type.admin.info": "<br /> You can change this <a href=\"route://account/profile/company\">setting</a> at any time.",
+  "account.organization.budget_price_type.admin.info": "<br /> You can change this <a href=\"route://account/organization/settings\">setting</a> at any time.",
   "account.organization.budget_price_type.info": "Budgets are calculated in: <b>{{type, select, =net{net} =gross{gross}}}</b>.",
   "account.organization.budget_price_type.notification_modal.all_effected": "Any calculations of user and cost center budgets will be affected.",
   "account.organization.budget_price_type.notification_modal.ask": "Do you really want to change the budget calculation?",

diff --git a/src/assets/i18n/fr_FR.json b/src/assets/i18n/fr_FR.json
@@ -294,7 +294,7 @@
   "account.ordertemplates.link": "Modèles de commande",
   "account.ordertemplates.widget.heading": "Mes modèles de commande",
   "account.ordertemplates.widget.view_all.link": "Afficher tous les modèles de commande",
-  "account.organization.budget_price_type.admin.info": "<br /> Vous pouvez modifier ce <a href=\"route://account/profile/company\">paramètre</a> à tout moment.",
+  "account.organization.budget_price_type.admin.info": "<br /> Vous pouvez modifier ce <a href=\"route://account/organization/settings\">paramètre</a> à tout moment.",
   "account.organization.budget_price_type.info": "Les budgets sont calculés en : <b>{{type, select, =net{net} =gross{brut}}}</b>.",
   "account.organization.budget_price_type.notification_modal.all_effected": "Tous les calculs des budgets des utilisateurs et des centres de coûts seront affectés.",
   "account.organization.budget_price_type.notification_modal.ask": "Voulez-vous vraiment modifier le calcul du budget ?",