UI: Fixed generate url for entity details page

ui-ngx/src/app/modules/home/models/entity/entity-table-component.models.ts

@@ -31,6 +31,7 @@ import {
   GroupActionDescriptor,
   HeaderActionDescriptor
 } from '@home/models/entity/entities-table-config.models';
+import { ActivatedRoute } from '@angular/router';
 
 export interface IEntitiesTableComponent {
   entitiesTableConfig: EntityTableConfig<BaseData<HasId>>;
@@ -60,6 +61,7 @@ export interface IEntitiesTableComponent {
   searchInputField: ElementRef;
   paginator: MatPaginator;
   sort: MatSort;
+  route: ActivatedRoute;
 
   addEnabled(): boolean;
   clearSelection(): void;

ui-ngx/src/app/modules/home/pages/asset/assets-table-config.resolver.ts

@@ -103,7 +103,7 @@ export class AssetsTableConfigResolver implements Resolve<EntityTableConfig<Asse
         mergeMap((savedAsset) => this.assetService.getAssetInfo(savedAsset.id.id)
         ));
     };
-    this.config.onEntityAction = action => this.onAssetAction(action);
+    this.config.onEntityAction = action => this.onAssetAction(action, this.config);
     this.config.detailsReadonly = () => (this.config.componentsData.assetScope === 'customer_user' || this.config.componentsData.assetScope === 'edge_customer_user');
 
     this.config.headerComponent = AssetTableHeaderComponent;
@@ -337,11 +337,12 @@ export class AssetsTableConfigResolver implements Resolve<EntityTableConfig<Asse
     });
   }
 
-  private openAsset($event: Event, asset: Asset) {
+  private openAsset($event: Event, asset: Asset, config: EntityTableConfig<AssetInfo>) {
     if ($event) {
       $event.stopPropagation();
     }
-    this.router.navigateByUrl(`${this.router.url}/${asset.id.id}`);
+    const url = this.router.createUrlTree([asset.id.id], {relativeTo: config.table.route})
+    this.router.navigateByUrl(url);
   }
 
   addAssetsToCustomer($event: Event) {
@@ -466,10 +467,10 @@ export class AssetsTableConfigResolver implements Resolve<EntityTableConfig<Asse
     );
   }
 
-  onAssetAction(action: EntityAction<AssetInfo>): boolean {
+  onAssetAction(action: EntityAction<AssetInfo>, config: EntityTableConfig<AssetInfo>): boolean {
     switch (action.action) {
       case 'open':
-        this.openAsset(action.event, action.entity);
+        this.openAsset(action.event, action.entity, config);
         return true;
       case 'makePublic':
         this.makePublic(action.event, action.entity);

ui-ngx/src/app/modules/home/pages/customer/customers-table-config.resolver.ts

@@ -125,7 +125,7 @@ export class CustomersTableConfigResolver implements Resolve<EntityTableConfig<C
     this.config.loadEntity = id => this.customerService.getCustomer(id.id);
     this.config.saveEntity = customer => this.customerService.saveCustomer(customer);
     this.config.deleteEntity = id => this.customerService.deleteCustomer(id.id);
-    this.config.onEntityAction = action => this.onCustomerAction(action);
+    this.config.onEntityAction = action => this.onCustomerAction(action, this.config);
     this.config.deleteEnabled = (customer) => customer && (!customer.additionalInfo || !customer.additionalInfo.isPublic);
     this.config.entitySelectionEnabled = (customer) => customer && (!customer.additionalInfo || !customer.additionalInfo.isPublic);
     this.config.detailsReadonly = (customer) => customer && customer.additionalInfo && customer.additionalInfo.isPublic;
@@ -137,11 +137,12 @@ export class CustomersTableConfigResolver implements Resolve<EntityTableConfig<C
     return this.config;
   }
 
-  private openCustomer($event: Event, customer: Customer) {
+  private openCustomer($event: Event, customer: Customer, config: EntityTableConfig<Customer>) {
     if ($event) {
       $event.stopPropagation();
     }
-    this.router.navigateByUrl(`${this.router.url}/${customer.id.id}`);
+    const url = this.router.createUrlTree([customer.id.id], {relativeTo: config.table.route})
+    this.router.navigateByUrl(url);
   }
 
   manageCustomerUsers($event: Event, customer: Customer) {
@@ -179,10 +180,10 @@ export class CustomersTableConfigResolver implements Resolve<EntityTableConfig<C
     this.router.navigateByUrl(`customers/${customer.id.id}/edgeInstances`);
   }
 
-  onCustomerAction(action: EntityAction<Customer>): boolean {
+  onCustomerAction(action: EntityAction<Customer>, config: EntityTableConfig<Customer>): boolean {
     switch (action.action) {
       case 'open':
-        this.openCustomer(action.event, action.entity);
+        this.openCustomer(action.event, action.entity, config);
         return true;
       case 'manageUsers':
         this.manageCustomerUsers(action.event, action.entity);

ui-ngx/src/app/modules/home/pages/device-profile/device-profiles-table-config.resolver.ts

@@ -183,7 +183,8 @@ export class DeviceProfilesTableConfigResolver implements Resolve<EntityTableCon
     if ($event) {
       $event.stopPropagation();
     }
-    this.router.navigateByUrl(`deviceProfiles/${deviceProfile.id.id}`);
+    const url = this.router.createUrlTree(['deviceProfiles', deviceProfile.id.id]);
+    this.router.navigateByUrl(url);
   }
 
   importDeviceProfile($event: Event) {

ui-ngx/src/app/modules/home/pages/device/devices-table-config.resolver.ts

@@ -111,7 +111,7 @@ export class DevicesTableConfigResolver implements Resolve<EntityTableConfig<Dev
         mergeMap((savedDevice) => this.deviceService.getDeviceInfo(savedDevice.id.id)
         ));
     };
-    this.config.onEntityAction = action => this.onDeviceAction(action);
+    this.config.onEntityAction = action => this.onDeviceAction(action, this.config);
     this.config.detailsReadonly = () =>
       (this.config.componentsData.deviceScope === 'customer_user' || this.config.componentsData.deviceScope === 'edge_customer_user');
 
@@ -371,11 +371,12 @@ export class DevicesTableConfigResolver implements Resolve<EntityTableConfig<Dev
     return actions;
   }
 
-  private openDevice($event: Event, device: Device) {
+  private openDevice($event: Event, device: Device, config: EntityTableConfig<DeviceInfo>) {
     if ($event) {
       $event.stopPropagation();
     }
-    this.router.navigateByUrl(`${this.router.url}/${device.id.id}`);
+    const url = this.router.createUrlTree([device.id.id], {relativeTo: config.table.route})
+    this.router.navigateByUrl(url);
   }
 
   importDevices($event: Event) {
@@ -546,10 +547,10 @@ export class DevicesTableConfigResolver implements Resolve<EntityTableConfig<Dev
     });
   }
 
-  onDeviceAction(action: EntityAction<DeviceInfo>): boolean {
+  onDeviceAction(action: EntityAction<DeviceInfo>, config: EntityTableConfig<DeviceInfo>): boolean {
     switch (action.action) {
       case 'open':
-        this.openDevice(action.event, action.entity);
+        this.openDevice(action.event, action.entity, config);
         return true;
       case 'makePublic':
         this.makePublic(action.event, action.entity);

ui-ngx/src/app/modules/home/pages/edge/edges-table-config.resolver.ts

@@ -96,7 +96,7 @@ export class EdgesTableConfigResolver implements Resolve<EntityTableConfig<EdgeI
         mergeMap((savedEdge) => this.edgeService.getEdgeInfo(savedEdge.id.id)
         ));
     };
-    this.config.onEntityAction = action => this.onEdgeAction(action);
+    this.config.onEntityAction = action => this.onEdgeAction(action, this.config);
     this.config.detailsReadonly = () => this.config.componentsData.edgeScope === 'customer_user';
     this.config.headerComponent = EdgeTableHeaderComponent;
   }
@@ -370,11 +370,12 @@ export class EdgesTableConfigResolver implements Resolve<EntityTableConfig<EdgeI
       });
   }
 
-  private openEdge($event: Event, edge: Edge) {
+  private openEdge($event: Event, edge: Edge, config: EntityTableConfig<EdgeInfo>) {
     if ($event) {
       $event.stopPropagation();
     }
-    this.router.navigateByUrl(`${this.router.url}/${edge.id.id}`);
+    const url = this.router.createUrlTree([edge.id.id], {relativeTo: config.table.route})
+    this.router.navigateByUrl(url);
   }
 
   makePublic($event: Event, edge: Edge) {
@@ -525,10 +526,10 @@ export class EdgesTableConfigResolver implements Resolve<EntityTableConfig<EdgeI
     );
   }
 
-  onEdgeAction(action: EntityAction<EdgeInfo>): boolean {
+  onEdgeAction(action: EntityAction<EdgeInfo>, config: EntityTableConfig<EdgeInfo>): boolean {
     switch (action.action) {
       case 'open':
-        this.openEdge(action.event, action.entity);
+        this.openEdge(action.event, action.entity, config);
         return true;
       case 'makePublic':
         this.makePublic(action.event, action.entity);

ui-ngx/src/app/modules/home/pages/entity-view/entity-views-table-config.resolver.ts

@@ -103,7 +103,7 @@ export class EntityViewsTableConfigResolver implements Resolve<EntityTableConfig
         mergeMap((savedEntityView) => this.entityViewService.getEntityViewInfo(savedEntityView.id.id)
         ));
     };
-    this.config.onEntityAction = action => this.onEntityViewAction(action);
+    this.config.onEntityAction = action => this.onEntityViewAction(action, this.config);
     this.config.detailsReadonly = () => (this.config.componentsData.entityViewScope === 'customer_user' ||
       this.config.componentsData.entityViewScope === 'edge_customer_user');
 
@@ -333,11 +333,12 @@ export class EntityViewsTableConfigResolver implements Resolve<EntityTableConfig
       });
   }
 
-  private openEntityView($event: Event, entityView: EntityView) {
+  private openEntityView($event: Event, entityView: EntityView, config: EntityTableConfig<EntityViewInfo>) {
     if ($event) {
       $event.stopPropagation();
     }
-    this.router.navigateByUrl(`${this.router.url}/${entityView.id.id}`);
+    const url = this.router.createUrlTree([entityView.id.id], {relativeTo: config.table.route})
+    this.router.navigateByUrl(url);
   }
 
   makePublic($event: Event, entityView: EntityView) {
@@ -442,10 +443,10 @@ export class EntityViewsTableConfigResolver implements Resolve<EntityTableConfig
     );
   }
 
-  onEntityViewAction(action: EntityAction<EntityViewInfo>): boolean {
+  onEntityViewAction(action: EntityAction<EntityViewInfo>, config: EntityTableConfig<EntityViewInfo>): boolean {
     switch (action.action) {
       case 'open':
-        this.openEntityView(action.event, action.entity);
+        this.openEntityView(action.event, action.entity, config);
         return true;
       case 'makePublic':
         this.makePublic(action.event, action.entity);

ui-ngx/src/app/modules/home/pages/ota-update/ota-update-table-config.resolve.ts

@@ -132,7 +132,8 @@ export class OtaUpdateTableConfigResolve implements Resolve<EntityTableConfig<Ot
     if ($event) {
       $event.stopPropagation();
     }
-    this.router.navigateByUrl(`otaUpdates/${otaPackage.id.id}`);
+    const url = this.router.createUrlTree(['otaUpdates', otaPackage.id.id]);
+    this.router.navigateByUrl(url);
   }
 
   exportPackage($event: Event, otaPackageInfo: OtaPackageInfo) {

ui-ngx/src/app/modules/home/pages/tenant-profile/tenant-profiles-table-config.resolver.ts

@@ -122,7 +122,8 @@ export class TenantProfilesTableConfigResolver implements Resolve<EntityTableCon
     if ($event) {
       $event.stopPropagation();
     }
-    this.router.navigateByUrl(`tenantProfiles/${tenantProfile.id.id}`);
+    const url = this.router.createUrlTree(['tenantProfiles', tenantProfile.id.id]);
+    this.router.navigateByUrl(url);
   }
 
   setDefaultTenantProfile($event: Event, tenantProfile: TenantProfile) {

ui-ngx/src/app/modules/home/pages/tenant/tenants-table-config.resolver.ts

@@ -78,7 +78,7 @@ export class TenantsTableConfigResolver implements Resolve<EntityTableConfig<Ten
       mergeMap((savedTenant) => this.tenantService.getTenantInfo(savedTenant.id.id))
     );
     this.config.deleteEntity = id => this.tenantService.deleteTenant(id.id);
-    this.config.onEntityAction = action => this.onTenantAction(action);
+    this.config.onEntityAction = action => this.onTenantAction(action, this.config);
   }
 
   resolve(): EntityTableConfig<TenantInfo> {
@@ -87,11 +87,12 @@ export class TenantsTableConfigResolver implements Resolve<EntityTableConfig<Ten
     return this.config;
   }
 
-  private openTenant($event: Event, tenant: TenantInfo) {
+  private openTenant($event: Event, tenant: TenantInfo, config: EntityTableConfig<TenantInfo>) {
     if ($event) {
       $event.stopPropagation();
     }
-    this.router.navigateByUrl(`${this.router.url}/${tenant.id.id}`);
+    const url = this.router.createUrlTree([tenant.id.id], {relativeTo: config.table.route})
+    this.router.navigateByUrl(url);
   }
 
   manageTenantAdmins($event: Event, tenant: TenantInfo) {
@@ -101,10 +102,10 @@ export class TenantsTableConfigResolver implements Resolve<EntityTableConfig<Ten
     this.router.navigateByUrl(`tenants/${tenant.id.id}/users`);
   }
 
-  onTenantAction(action: EntityAction<TenantInfo>): boolean {
+  onTenantAction(action: EntityAction<TenantInfo>, config: EntityTableConfig<TenantInfo>): boolean {
     switch (action.action) {
       case 'open':
-        this.openTenant(action.event, action.entity);
+        this.openTenant(action.event, action.entity, config);
         return true;
       case 'manageTenantAdmins':
         this.manageTenantAdmins(action.event, action.entity);

ui-ngx/src/app/modules/home/pages/user/users-table-config.resolver.ts

@@ -98,7 +98,7 @@ export class UsersTableConfigResolver implements Resolve<EntityTableConfig<User>
     this.config.loadEntity = id => this.userService.getUser(id.id);
     this.config.saveEntity = user => this.saveUser(user);
     this.config.deleteEntity = id => this.userService.deleteUser(id.id);
-    this.config.onEntityAction = action => this.onUserAction(action);
+    this.config.onEntityAction = action => this.onUserAction(action, this.config);
     this.config.addEntity = () => this.addUser();
   }
 
@@ -174,11 +174,12 @@ export class UsersTableConfigResolver implements Resolve<EntityTableConfig<User>
     }).afterClosed();
   }
 
-  private openUser($event: Event, user: User) {
+  private openUser($event: Event, user: User, config: EntityTableConfig<User>) {
     if ($event) {
       $event.stopPropagation();
     }
-    this.router.navigateByUrl(`${this.router.url}/${user.id.id}`);
+    const url = this.router.createUrlTree([user.id.id], {relativeTo: config.table.route})
+    this.router.navigateByUrl(url);
   }
 
   loginAsUser($event: Event, user: User) {
@@ -236,10 +237,10 @@ export class UsersTableConfigResolver implements Resolve<EntityTableConfig<User>
     });
   }
 
-  onUserAction(action: EntityAction<User>): boolean {
+  onUserAction(action: EntityAction<User>, config: EntityTableConfig<User>): boolean {
     switch (action.action) {
       case 'open':
-        this.openUser(action.event, action.entity);
+        this.openUser(action.event, action.entity, config);
         return true;
       case 'loginAsUser':
         this.loginAsUser(action.event, action.entity);