version 4.16.11

package.json

@@ -3,7 +3,7 @@
   "displayName": "Cyclos 4 UI",
   "description": "The new Cyclos 4 frontend",
   "icon": "cyclos.png",
-  "version": "4.16.10",
+  "version": "4.16.11",
   "license": "MIT",
   "author": {
     "name": "Cyclos development team",

src/app/shared/format-field-value.component.html

@@ -1,6 +1,6 @@
 <ng-container *ngIf="hasValue$ | async; else empty">
   <ng-container *ngIf="directValue">
-    <ng-container *ngIf="!link && !externalLink">
+    <ng-container *ngIf="!link && !externalLink && !isLinkedUser()">
       {{ value }}
     </ng-container>
     <ng-container *ngIf="isLinkedUser()">

src/app/shared/format-field-value.component.ts

@@ -304,7 +304,7 @@ export class FormatFieldValueComponent extends AbstractComponent implements OnIn
   }
 
   downloadImage(event: MouseEvent, image: Image) {
-    this.addSub(this.imagesService.getImageContent({ idOrKey: image.id }).subscribe(blob => {
+    this.addSub(this.imagesService.getImageContent({ id: image.id }).subscribe(blob => {
       download(blob, image.name, image.contentType);
     }));
     event.stopPropagation();

src/app/shared/image-upload.component.ts

@@ -254,7 +254,7 @@ export class ImageUploadComponent extends BaseComponent implements OnDestroy {
           // Once the upload is complete, we have to fetch the image model
           file.subscription.unsubscribe();
           file.uploadDone = true;
-          this.addSub(this.imagesService.viewImage({ idOrKey: event.body }).pipe(first()).subscribe(image => {
+          this.addSub(this.imagesService.viewImage({ id: event.body }).pipe(first()).subscribe(image => {
             file.image = image;
             this.storedFileCacheService.write(image);
             observer.next(file.image);

src/app/shared/images-field.component.ts

@@ -154,7 +154,7 @@ export class ImagesFieldComponent extends BaseFormFieldComponent<string | string
         // Remove each temp image in the list
         this.uploadedImages
           .filter(i => result.removedImages.includes(i.id))
-          .forEach(i => this.addSub(this.imagesService.deleteImage({ idOrKey: i.id }).subscribe()));
+          .forEach(i => this.addSub(this.imagesService.deleteImage({ id: i.id }).subscribe()));
 
         // Update the arrays
         this.uploadedImages = this.uploadedImages.filter(i => !result.removedImages.includes(i.id));
@@ -173,7 +173,7 @@ export class ImagesFieldComponent extends BaseFormFieldComponent<string | string
     // Remove all uploaded temporary files
     this.uploadedImages.forEach(i => {
       this.errorHandler.requestWithCustomErrorHandler(() => {
-        this.addSub(this.imagesService.deleteImage({ idOrKey: i.id }).subscribe());
+        this.addSub(this.imagesService.deleteImage({ id: i.id }).subscribe());
       });
     });
     this.images.forEach(i => this.storedFileCacheService.delete(i.id));

src/app/ui/banking/vouchers/base-voucher-transaction.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, Directive, Injector, OnInit } from '@angular/core';
+import { Directive,  Injector, OnInit } from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { VoucherBasicDataForTransaction, VoucherInitialDataForTransaction, VoucherTransactionPreview, VoucherTransactionResult } from 'app/api/models';
 import { VouchersService } from 'app/api/services/vouchers.service';
@@ -61,10 +61,6 @@ export abstract class BaseVoucherTransactionComponent<
       this.self = this.authHelper.isSelf(data.user);
     }));
     this.step = 'token';
-
-    // TODO this shouldn't be needed, but started with Angular 13.2.x.
-    // There's the issue https://jira.cyclos.org/browse/CYCLOS-9724 for tracking this.
-    this.step$.subscribe(() => setTimeout(() => this.injector.get(ChangeDetectorRef).detectChanges()));
   }
 
   /**
@@ -146,6 +142,7 @@ export abstract class BaseVoucherTransactionComponent<
       token: data.token,
       body: this.form.value
     };
+
     this.addSub(this.performTransaction(null, params).subscribe(result => {
       this.router.navigate(['/banking', 'voucher-transactions', 'view', result.id], { state: { url: this.router.url } });
     }));

src/app/ui/banking/vouchers/search-vouchers.component.ts

@@ -68,7 +68,7 @@ export class SearchVouchersComponent
   protected toSearchParams(value: any): VoucherSearchParams {
     const result = super.toSearchParams(value);
     if (value.transactionDateBegin || value.transactionDateEnd) {
-      result.transactionPeriod = this.ApiHelper.dateRangeFilter(value.redeemBegin, value.redeemEnd);
+      result.transactionPeriod = this.ApiHelper.dateRangeFilter(value.transactionDateBegin, value.transactionDateEnd);
     }
     if (value.creationBegin || value.creationEnd) {
       result.creationPeriod = this.ApiHelper.dateRangeFilter(value.creationBegin, value.creationEnd);

src/app/ui/banking/vouchers/voucher-filters.component.html

@@ -75,11 +75,11 @@
             </date-field>
           </div>
         </div>
-        <!-- Transaction date date -->
+        <!-- Transaction date -->
         <div class="row no-gutters col-12">
           <div class="col-12 col-md-6">
             <date-field formControlName="transactionDateBegin"
-              [label]="i18n.voucher.transaction.date" minDate="past100"
+              [label]="data.topUpEnabled ? i18n.voucher.generalSearchTransactionDate : i18n.voucher.redeem.date" minDate="past100"
               maxDate="todayEnd" fieldSize="full" class>
             </date-field>
           </div>

src/app/ui/core/menu.service.ts

@@ -496,16 +496,27 @@ export class MenuService {
     }
   }
 
+  /**
+ * Returns, amongst the list of possible menus, the one whose root menu matches the one given
+ */
+  matchingRootMenu(possible: Menu[], menu: FrontendMenuEnum): Menu {
+    for (const current of possible) {
+      if (this.rootMenuForEnum(menu) === current.root) {
+        return current;
+      }
+    }
+  }
+
   /**
    * Returns the menu for running an own custom operation, according to the given operation type.
    * This works for both system-scoped operations or user-scoped operations for the current user.
    * @param operation The operation
    */
   menuForOwnerOperation(operation: Operation): Menu {
     const possibleMenus = [
-      Menu.RUN_OPERATION_BANKING, Menu.RUN_OPERATION_MARKETPLACE, Menu.RUN_OPERATION_PERSONAL
+      Menu.RUN_OPERATION_BANKING, Menu.RUN_OPERATION_MARKETPLACE, Menu.RUN_OPERATION_PERSONAL, Menu.RUN_OPERATION_CONTENT, Menu.RUN_OPERATION_OPERATORS, Menu.RUN_OPERATION_BROKERING
     ];
-    return this.matchingMenu(possibleMenus, operation.adminMenu, operation.userMenu);
+    return this.matchingRootMenu(possibleMenus, operation.menu);
   }
 
   /**
@@ -839,6 +850,15 @@ export class MenuService {
         case RootMenu.PERSONAL:
           operationMenu = Menu.RUN_OPERATION_PERSONAL;
           break;
+        case RootMenu.CONTENT:
+          operationMenu = Menu.RUN_OPERATION_CONTENT;
+          break;
+        case RootMenu.BROKERING:
+          operationMenu = Menu.RUN_OPERATION_BROKERING;
+          break;
+        case RootMenu.OPERATORS:
+          operationMenu = Menu.RUN_OPERATION_OPERATORS;
+          break;
         default:
           // Invalid root menu for operations
           return;
@@ -853,8 +873,8 @@ export class MenuService {
       };
 
       // Add both system and self operations
-      doAddOperations('system', systemOperations.filter(o => this.adminMenuMatches(root, o.adminMenu)));
-      doAddOperations('self', userOperations.filter(o => this.userMenuMatches(root, o.userMenu)));
+      doAddOperations('system', systemOperations.filter(o => root === this.rootMenuForEnum(o.menu)));
+      doAddOperations('self', userOperations.filter(o => root === this.rootMenuForEnum(o.menu)));
     };
 
 
@@ -1013,7 +1033,7 @@ export class MenuService {
 
       if (!isAdmin && authorizations.view) {
         add(Menu.AUTHORIZED_PAYMENTS, `/banking/${owner}/authorized-payments`,
-        SvgIcon.Wallet2Check, this.i18n.menu.bankingAuthorizations);
+          SvgIcon.Wallet2Check, this.i18n.menu.bankingAuthorizations);
       }
 
       if (isAdmin && banking.searchGeneralAuthorizedPayments) {
@@ -1088,8 +1108,13 @@ export class MenuService {
       // Operators
       if (operators.enable) {
         add(Menu.MY_OPERATORS, '/users/self/operators', SvgIcon.PersonCircleOutline, this.i18n.menu.operatorsOperators);
-        add(Menu.REGISTER_OPERATOR, '/users/self/operators/registration', SvgIcon.PersonPlus, this.i18n.menu.operatorsRegister);
-        add(Menu.OPERATOR_GROUPS, '/users/self/operator-groups', SvgIcon.People, this.i18n.menu.operatorsGroups);
+        if (operators.manageOperators) {
+          add(Menu.REGISTER_OPERATOR, '/users/self/operators/registration', SvgIcon.PersonPlus, this.i18n.menu.operatorsRegister);
+        }
+        if (operators.manageGroups) {
+          add(Menu.OPERATOR_GROUPS, '/users/self/operator-groups', SvgIcon.People, this.i18n.menu.operatorsGroups);
+        }
+        addOperations(RootMenu.OPERATORS);
       }
 
       // Brokering
@@ -1281,6 +1306,7 @@ export class MenuService {
 
     // Content pages in the content root menu
     const pagesInContent = addContentPages(Menu.CONTENT_PAGE_CONTENT);
+    addOperations(RootMenu.CONTENT);
 
     // For guests, content will always be dropdown.
     // For logged users, only if at least 1 content page with layout full is used

src/app/ui/core/quick-access-helper.service.ts

@@ -152,6 +152,8 @@ export class QuickAccessHelperService {
       case QuickAccessTypeEnum.TOKEN:
         const tokenType = quickAccess.tokenType;
         return { icon: this.tokenHelper.icon(tokenType), label: tokenType.pluralName };
+      case QuickAccessTypeEnum.HELP:
+        return { icon: SvgIcon.QuestionCircle , label: this.i18n.dashboard.action.help };
     }
   }
 

src/app/ui/core/run-operation-helper.service.ts

@@ -16,6 +16,7 @@ import { ApiHelper } from 'app/shared/api-helper';
 import { downloadResponse, empty } from 'app/shared/helper';
 import { BreadcrumbService } from 'app/ui/core/breadcrumb.service';
 import { OperationHelperService } from 'app/ui/core/operation-helper.service';
+import { UiLayoutService } from 'app/ui/core/ui-layout.service';
 import { PageData } from 'app/ui/shared/page-data';
 import { cloneDeep } from 'lodash-es';
 import { Observable } from 'rxjs';
@@ -53,7 +54,8 @@ export class RunOperationHelperService {
     private operationHelper: OperationHelperService,
     private operationsService: OperationsService,
     private nextRequestState: NextRequestState,
-    private confirmation: ConfirmationService) {
+    private confirmation: ConfirmationService,
+    private uiLayout: UiLayoutService) {
   }
 
   /**
@@ -351,8 +353,8 @@ export class RunOperationHelperService {
         this.nextRequestState.leaveNotification = true;
         break;
       case OperationResultTypeEnum.URL:
-        // Open the URL in a new window
-        window.open(result.url);
+        // Open the URL in a new window        
+        window.open(result.url, result.newWindow == null || result.newWindow ? '_blank' : '_self');        
         handled = true;
         break;
       case OperationResultTypeEnum.EXTERNAL_REDIRECT:
@@ -372,8 +374,18 @@ export class RunOperationHelperService {
         path => path.startsWith('/operations/') && path.includes('/' + backTo) :
         // We need to go back to the first page which is not a custom operation
         path => !path.startsWith('/operations/');
-      const index = cloneDeep(this.breadcrumb.breadcrumb$.value).reverse().findIndex(pathCondition);
-      if (index > 0) {
+      const path = cloneDeep(this.breadcrumb.breadcrumb$.value).reverse();
+      let index = path.findIndex(pathCondition);
+      if (index < 0 && result.backToRoot) {
+        // Not found, go back to the first operation page in the breadcrumb
+        index = path.findIndex(path => path.startsWith('/operations/'));
+      }
+      if (index === 0) {
+        // Already in the target page - reload it
+        this.uiLayout.currentPage.reload();
+        return true;
+      } else if (index > 0) {
+        // Go back to a specific page
         this.allowActionExecution = true;
         this.breadcrumb.back(index);
         return true;

src/app/ui/dashboard/dashboard.component.ts

@@ -371,6 +371,12 @@ export class DashboardComponent extends BasePageComponent<DataForFrontendHome> i
             }
           }
           break;
+        case QuickAccessTypeEnum.HELP:
+          if(dataForFrontend.hasHelp){
+            const helpMenu = this.menu.helpMenu;
+            addAction(new ActiveMenu(helpMenu));
+          }
+          break;
       }
     }
   }

src/app/ui/marketplace/search/search-ads.component.html

@@ -45,6 +45,16 @@
             </custom-field-filter>
           </div>
         </ng-container>
+        <div *ngIf="data.groups?.length > 1" class="col-12 col-md-6">
+          <multi-selection-field hierarchyProperty="groupSet"
+            formControlName="groups" [label]="i18n.user.groupFilter">
+            <field-option *ngFor="let group of data.groups"
+              [value]="ApiHelper.internalNameOrId(group)"
+              [internalName]="group.internalName" [id]="group.id"
+              [text]="group.name" [parent]="group.groupSet">
+            </field-option>
+          </multi-selection-field>
+        </div>
         <ng-container *ngIf="moreFilters$ | async">
           <div class="col-12 col-md-6" *ngIf="data.searchByDistanceData">
             <distance-selection-field [data]="data.searchByDistanceData"
@@ -80,17 +90,7 @@
               <field-option [text]="i18n.ad.type.webshop" value="webshop">
               </field-option>
             </single-selection-field>
-          </div>
-          <div *ngIf="data.groups?.length > 1" class="col-12 col-md-6">
-            <multi-selection-field hierarchyProperty="groupSet"
-              formControlName="groups" [label]="i18n.user.groupFilter">
-              <field-option *ngFor="let group of data.groups"
-                [value]="ApiHelper.internalNameOrId(group)"
-                [internalName]="group.internalName" [id]="group.id"
-                [text]="group.name" [parent]="group.groupSet">
-              </field-option>
-            </multi-selection-field>
-          </div>
+          </div>         
           <div class="col-12 col-md-6">
             <boolean-field labelPosition="sideForced"
               formControlName="hasImages" [label]="i18n.ad.hasImages">

src/app/ui/marketplace/view/view-ad.component.html

@@ -31,14 +31,18 @@
       </label-value>
       <label-value *ngIf="status" [label]="i18n.general.status">
         {{ status }}
+      </label-value>      
+      <label-value *ngIf="ad.publicationPeriod?.begin" [label]="i18n.ad.publicationDate">
+          {{ data.publicationPeriod.begin | date }}              
+      </label-value>
+      <label-value *ngIf="ad.publicationPeriod?.end" [label]="i18n.ad.expirationDate">
+       	  {{ data.publicationPeriod.end | date }}              
+      </label-value>              
+      <label-value *ngIf="ad.promotionalPeriodActive" [label]="i18n.ad.promotionalPeriod">      	
+       	<span>{{ data.promotionalPeriod.begin | date }}<span
+             class="d-inline pl-2 pr-2"> -
+        </span>{{ data.promotionalPeriod.end | date }}</span>        
       </label-value>
-      <ng-container *ngIf="data.publicationPeriod">
-        <label-value [label]="i18n.ad.publicationPeriod">
-          <span>{{ data.publicationPeriod.begin | date }}<span
-              class="d-inline pl-2 pr-2"> -
-            </span>{{ data.publicationPeriod.end | date }}</span>
-        </label-value>
-      </ng-container>
       <custom-field-value *ngFor="let value of ad.customValues"
         [fieldValue]="value"></custom-field-value>
       <ng-container *ngIf="webshop">
@@ -57,10 +61,10 @@
         <label-value [label]="i18n.ad.productNumber">
           {{ data.productNumber }}
         </label-value>
-      </ng-container>
+      </ng-container>     
       <label-value *ngIf="ad.price" [label]="i18n.ad.price"
         class="totalAmount">
-        <ng-container *ngIf="ad.promotionalPrice; else plainPrice">
+        <ng-container *ngIf="ad.promotionalPeriodActive; else plainPrice">
           {{ ad.promotionalPrice | currency:ad.currency }}
           <span class="promo-price">
             {{ ad.price | currency:ad.currency }}

src/app/ui/shared/menu.ts

@@ -150,6 +150,9 @@ export namespace Menu {
   export const RUN_OPERATION_BANKING = new Menu(RootMenu.BANKING, 'RUN_OPERATION_BANKING');
   export const RUN_OPERATION_MARKETPLACE = new Menu(RootMenu.MARKETPLACE, 'RUN_OPERATION_MARKETPLACE');
   export const RUN_OPERATION_PERSONAL = new Menu(RootMenu.PERSONAL, 'RUN_OPERATION_PERSONAL');
+  export const RUN_OPERATION_CONTENT = new Menu(RootMenu.CONTENT, 'RUN_OPERATION_CONTENT');
+  export const RUN_OPERATION_BROKERING = new Menu(RootMenu.BROKERING, 'RUN_OPERATION_BROKERING');
+  export const RUN_OPERATION_OPERATORS = new Menu(RootMenu.OPERATORS, 'RUN_OPERATION_OPERATORS');
   export const RUN_USER_OPERATION = new Menu(RootMenu.MARKETPLACE, 'RUN_USER_OPERATION');
   export const RUN_MARKETPLACE_OPERATION = new Menu(RootMenu.MARKETPLACE, 'RUN_MARKETPLACE_OPERATION');
   export const RUN_RECORD_OPERATION = new Menu(RootMenu.PERSONAL, 'RUN_RECORD_OPERATION');

src/app/ui/users/profile/edit-profile.component.ts

@@ -938,7 +938,7 @@ export class EditProfileComponent
 
   removeAllImages() {
     for (const image of this.images || []) {
-      this.addSub(this.imagesService.deleteImage({ idOrKey: image.id }).subscribe());
+      this.addSub(this.imagesService.deleteImage({ id: image.id }).subscribe());
     }
     this.images = [];
     this.changeDetector.detectChanges();