Merge pull request #6832 from vvlladd28/improvement/vc/improvement-mobile-view

[3.4] UI: Improvement VC in mobile mode

ui-ngx/src/app/core/http/entities-version-control.service.ts

@@ -38,11 +38,10 @@ import { EntityType, entityTypeTranslations } from '@shared/models/entity-type.m
 import { select, Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { selectIsUserLoaded } from '@core/auth/auth.selectors';
-import { catchError, finalize, map, switchMap, takeWhile, tap } from 'rxjs/operators';
+import { catchError, finalize, switchMap, takeWhile, tap } from 'rxjs/operators';
 import { TranslateService } from '@ngx-translate/core';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 import { ActionLoadFinish, ActionLoadStart } from '@core/interceptors/load.actions';
-import { NULL_UUID } from '@shared/models/id/has-uuid';
 
 @Injectable({
   providedIn: 'root'
@@ -184,6 +183,9 @@ export class EntitiesVersionControlService {
           (this.translate.instant(entityTypeTranslations.get(entityLoadError.target.entityType).type) as string).toLowerCase();
         messageArgs.targetEntityId = entityLoadError.target.id;
         break;
+      case EntityLoadErrorType.RUNTIME:
+        messageArgs.message = entityLoadError.message;
+        break;
     }
     return this.sanitizer.bypassSecurityTrustHtml(this.translate.instant(messageId, messageArgs));
   }

ui-ngx/src/app/modules/home/components/vc/auto-commit-settings.component.html

@@ -32,7 +32,6 @@
         <fieldset class="fields-group" [disabled]="isLoading$ | async">
           <legend class="group-title" translate>admin.auto-commit-entities</legend>
           <div fxLayout="column">
-            <div class="tb-control-list">
             <div *ngFor="let entityTypeFormGroup of entityTypesFormGroupArray(); trackBy: trackByEntityType;
                let $index = index; last as isLast;"
                  fxLayout="row" fxLayoutAlign="start center" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
@@ -58,7 +57,7 @@
                   <div class="entity-type-config-content" fxLayout="column" fxLayoutGap="0.5em">
                     <mat-divider></mat-divider>
                     <div fxLayout="column" fxLayout.gt-lg="row" fxLayoutGap.gt-lg="16px">
-                        <div fxLayout="row" fxLayoutGap="16px">
+                      <div fxLayout="row" fxLayoutGap="16px" fxLayout.xs="column" fxLayoutGap.xs="0px">
                         <tb-entity-type-select
                           showLabel
                           formControlName="entityType"
@@ -74,7 +73,8 @@
                           </tb-branch-autocomplete>
                         </div>
                       </div>
-                        <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="16px" formGroupName="config">
+                      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="16px"
+                           fxLayout.xs="column" fxLayoutAlign.xs="start start" fxLayoutGap.xs="0px"  formGroupName="config">
                         <mat-checkbox *ngIf="entityTypeFormGroup.get('entityType').value === entityTypes.DEVICE" formControlName="saveCredentials">
                           {{ 'version-control.export-credentials' | translate }}
                         </mat-checkbox>
@@ -90,7 +90,6 @@
                 </ng-template>
               </mat-expansion-panel>
             </div>
-            </div>
             <div *ngIf="!entityTypesFormGroupArray().length">
               <span translate fxLayoutAlign="center center"
                     class="tb-prompt">admin.no-auto-commit-entities-prompt</span>

ui-ngx/src/app/modules/home/components/vc/auto-commit-settings.component.scss

@@ -37,11 +37,6 @@
     }
   }
 
-  .tb-control-list {
-    overflow-y: auto;
-    max-height: 600px;
-  }
-
   .tb-prompt {
     margin: 30px 0;
   }

ui-ngx/src/app/modules/home/components/vc/complex-version-create.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section style="min-width: 800px;">
+<section style="min-width: 600px;">
   <section *ngIf="!versionCreateResult$">
     <mat-toolbar>
       <h2>{{ 'version-control.create-entities-version' | translate }}</h2>
@@ -35,7 +35,8 @@
           <mat-form-field class="mat-block" fxFlex>
             <mat-label translate>version-control.version-name</mat-label>
             <input required matInput formControlName="versionName">
-            <mat-error *ngIf="createVersionFormGroup.get('versionName').hasError('required')">
+            <mat-error *ngIf="createVersionFormGroup.get('versionName').hasError('required') ||
+                              createVersionFormGroup.get('versionName').hasError('pattern')">
               {{ 'version-control.version-name-required' | translate }}
             </mat-error>
           </mat-form-field>

ui-ngx/src/app/modules/home/components/vc/complex-version-create.component.ts

@@ -20,7 +20,9 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import {
   ComplexVersionCreateRequest,
   createDefaultEntityTypesVersionCreate,
-  SyncStrategy, syncStrategyHintMap, syncStrategyTranslationMap,
+  SyncStrategy,
+  syncStrategyHintMap,
+  syncStrategyTranslationMap,
   VersionCreateRequestType,
   VersionCreationResult
 } from '@shared/models/vc.models';
@@ -82,7 +84,7 @@ export class ComplexVersionCreateComponent extends PageComponent implements OnIn
   ngOnInit(): void {
     this.createVersionFormGroup = this.fb.group({
       branch: [this.branch, [Validators.required]],
-      versionName: [null, [Validators.required]],
+      versionName: [null, [Validators.required, Validators.pattern(/(?:.|\s)*\S(&:.|\s)*/)]],
       syncStrategy: [SyncStrategy.MERGE, Validators.required],
       entityTypes: [createDefaultEntityTypesVersionCreate(), []],
     });

ui-ngx/src/app/modules/home/components/vc/complex-version-load.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section [ngStyle]="versionLoadResult$ ? {minWidth: '500px'} : {minWidth: '800px'}">
+<section [ngStyle]="versionLoadResult$ ? {minWidth: '500px'} : {minWidth: '600px'}">
   <section *ngIf="!versionLoadResult$">
     <mat-toolbar>
       <h2>{{ 'version-control.restore-entities-from-version' | translate: {versionName} }}</h2>

ui-ngx/src/app/modules/home/components/vc/entity-types-version-create.component.html

@@ -19,7 +19,6 @@
   <fieldset class="fields-group">
     <legend class="group-title" translate>version-control.entities-to-export</legend>
     <div fxLayout="column">
-      <div class="tb-control-list">
       <div *ngFor="let entityTypeFormGroup of entityTypesFormGroupArray(); trackBy: trackByEntityType;
                let $index = index; last as isLast;"
            fxLayout="row" fxLayoutAlign="start center" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
@@ -94,7 +93,6 @@
           </ng-template>
         </mat-expansion-panel>
       </div>
-      </div>
       <div *ngIf="!entityTypesFormGroupArray().length">
             <span translate fxLayoutAlign="center center"
                   class="tb-prompt">version-control.no-entities-to-export-prompt</span>

ui-ngx/src/app/modules/home/components/vc/entity-types-version-create.component.scss

@@ -32,11 +32,6 @@
       }
     }
 
-    .tb-control-list {
-      overflow-y: auto;
-      max-height: 600px;
-    }
-
     .tb-prompt {
       margin: 30px 0;
     }

ui-ngx/src/app/modules/home/components/vc/entity-types-version-load.component.html

@@ -19,7 +19,6 @@
   <fieldset class="fields-group">
     <legend class="group-title" translate>version-control.entities-to-restore</legend>
     <div fxLayout="column">
-      <div class="tb-control-list">
       <div *ngFor="let entityTypeFormGroup of entityTypesFormGroupArray(); trackBy: trackByEntityType;
                let $index = index; last as isLast;"
            fxLayout="row" fxLayoutAlign="start center" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
@@ -80,7 +79,6 @@
           </ng-template>
         </mat-expansion-panel>
       </div>
-      </div>
       <div *ngIf="!entityTypesFormGroupArray().length">
             <span translate fxLayoutAlign="center center"
                   class="tb-prompt">version-control.no-entities-to-restore-prompt</span>

ui-ngx/src/app/modules/home/components/vc/entity-types-version-load.component.scss

@@ -32,11 +32,6 @@
       }
     }
 
-    .tb-control-list {
-      overflow-y: auto;
-      max-height: 600px;
-    }
-
     .tb-prompt {
       margin: 30px 0;
     }

ui-ngx/src/app/modules/home/components/vc/entity-version-create.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section style="min-width: 400px;">
+<section style="min-width: 300px;">
   <section *ngIf="!versionCreateResult$">
     <mat-toolbar>
       <h2>{{ 'version-control.create-entity-version' | translate }}</h2>
@@ -34,7 +34,8 @@
           <mat-form-field class="mat-block" fxFlex>
             <mat-label translate>version-control.version-name</mat-label>
             <input required matInput formControlName="versionName">
-            <mat-error *ngIf="createVersionFormGroup.get('versionName').hasError('required')">
+            <mat-error *ngIf="createVersionFormGroup.get('versionName').hasError('required') ||
+                              createVersionFormGroup.get('versionName').hasError('pattern')">
               {{ 'version-control.version-name-required' | translate }}
             </mat-error>
           </mat-form-field>

ui-ngx/src/app/modules/home/components/vc/entity-version-create.component.ts

@@ -80,7 +80,7 @@ export class EntityVersionCreateComponent extends PageComponent implements OnIni
     this.createVersionFormGroup = this.fb.group({
       branch: [this.branch, [Validators.required]],
       versionName: [this.translate.instant('version-control.default-create-entity-version-name',
-        {entityName: this.entityName}), [Validators.required]],
+        {entityName: this.entityName}), [Validators.required, Validators.pattern(/(?:.|\s)*\S(&:.|\s)*/)]],
       saveRelations: [false, []],
       saveAttributes: [true, []],
       saveCredentials: [true, []]

ui-ngx/src/app/modules/home/components/vc/entity-version-diff.component.scss

@@ -19,6 +19,7 @@
 .entity-version-diff-view {
   position: relative;
   &:not(.tb-fullscreen) {
+    max-height: 95vh;
     &.content-ready {
       width: 600px;
       @media #{$mat-gt-sm} {

ui-ngx/src/app/modules/home/components/vc/entity-version-diff.component.ts

@@ -161,7 +161,7 @@ export class EntityVersionDiffComponent extends PageComponent implements OnInit,
           setTimeout(() => {
             this.diffCount = this.differ.getNumDiffs();
             this.updateHasNextAndPrevious();
-          });
+          }, 2);
         });
       });
     });

ui-ngx/src/app/modules/home/components/vc/entity-version-restore.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section [ngStyle]="entityDataInfo ? {minWidth: '400px'} : {}">
+<section [ngStyle]="entityDataInfo ? {minWidth: '300px'} : {}">
   <section *ngIf="!versionLoadResult$">
     <mat-toolbar *ngIf="entityDataInfo">
       <h2>{{ 'version-control.restore-entity-from-version' | translate: {versionName} }}</h2>

ui-ngx/src/app/modules/home/components/vc/entity-versions-table.component.html

@@ -31,6 +31,7 @@
           </tb-branch-autocomplete>
         </div>
         <span fxFlex></span>
+        <div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center end">
           <button *ngIf="singleEntityMode" mat-stroked-button color="primary"
                   #createVersionButton
                   [disabled]="(isLoading$ | async)"
@@ -45,6 +46,7 @@
             <mat-icon>update</mat-icon>
             {{'version-control.create-entities-version' | translate }}
           </button>
+          <div fxLayout="row">
             <button mat-icon-button [disabled]="isLoading$ | async" (click)="updateData()"
                     matTooltip="{{ 'action.refresh' | translate }}"
                     matTooltipPosition="above">
@@ -58,6 +60,8 @@
               <mat-icon>search</mat-icon>
             </button>
           </div>
+        </div>
+      </div>
     </mat-toolbar>
     <mat-toolbar class="mat-table-toolbar" [fxShow]="textSearchMode">
       <div class="mat-toolbar-tools">
@@ -70,7 +74,7 @@
           <mat-label>&nbsp;</mat-label>
           <input #searchInput matInput
                  [(ngModel)]="pageLink.textSearch"
-                 placeholder="{{ 'common.enter-search' | translate }}"/>
+                 placeholder="{{ 'version-control.search' | translate }}"/>
         </mat-form-field>
         <button mat-icon-button (click)="exitFilterMode()"
                 matTooltip="{{ 'action.close' | translate }}"

ui-ngx/src/app/modules/home/components/vc/entity-versions-table.component.ts

@@ -18,11 +18,15 @@ import {
   AfterViewInit,
   ChangeDetectorRef,
   Component,
-  ElementRef, EventEmitter,
+  ElementRef,
+  EventEmitter,
   Input,
   OnDestroy,
-  OnInit, Output, Renderer2,
+  OnInit,
-  ViewChild, ViewContainerRef
+  Output,
+  Renderer2,
+  ViewChild,
+  ViewContainerRef
 } from '@angular/core';
 import { PageComponent } from '@shared/components/page.component';
 import { Store } from '@ngrx/store';
@@ -213,7 +217,7 @@ export class EntityVersionsTableComponent extends PageComponent implements OnIni
               }
             }
           }
-        }, {}, {}, {}, false);
+        }, {maxHeight: '100vh', height: '100%', padding: '10px'}, {}, {}, false);
       createVersionPopover.tbComponentRef.instance.popoverComponent = createVersionPopover;
     }
   }
@@ -240,7 +244,7 @@ export class EntityVersionsTableComponent extends PageComponent implements OnIni
               }
             }
           }
-        }, {}, {}, {}, false);
+        }, {maxHeight: '100vh', height: '100%', padding: '10px'}, {}, {}, false);
       complexCreateVersionPopover.tbComponentRef.instance.popoverComponent = complexCreateVersionPopover;
     }
   }
@@ -290,7 +294,7 @@ export class EntityVersionsTableComponent extends PageComponent implements OnIni
               this.versionRestored.emit();
             }
           }
-        }, {}, {}, {}, false);
+        }, {maxHeight: '100vh', height: '100%', padding: '10px'}, {}, {}, false);
       restoreVersionPopover.tbComponentRef.instance.popoverComponent = restoreVersionPopover;
     }
   }
@@ -312,7 +316,7 @@ export class EntityVersionsTableComponent extends PageComponent implements OnIni
           onClose: (result: VersionLoadResult | null) => {
             restoreEntitiesVersionPopover.hide();
           }
-        }, {}, {}, {}, false);
+        }, {maxHeight: '100vh', height: '100%', padding: '10px'}, {}, {}, false);
       restoreEntitiesVersionPopover.tbComponentRef.instance.popoverComponent = restoreEntitiesVersionPopover;
     }
   }

ui-ngx/src/app/modules/home/components/vc/repository-settings.component.scss

@@ -34,3 +34,8 @@
     }
   }
 }
+:host ::ng-deep {
+  .mat-checkbox-layout {
+    white-space: normal !important;
+  }
+}

ui-ngx/src/app/shared/models/vc.models.ts

@@ -178,13 +178,15 @@ export interface EntityTypeLoadResult {
 
 export enum EntityLoadErrorType {
   DEVICE_CREDENTIALS_CONFLICT = 'DEVICE_CREDENTIALS_CONFLICT',
-  MISSING_REFERENCED_ENTITY = 'MISSING_REFERENCED_ENTITY'
+  MISSING_REFERENCED_ENTITY = 'MISSING_REFERENCED_ENTITY',
+  RUNTIME = 'RUNTIME'
 }
 
 export const entityLoadErrorTranslationMap = new Map<EntityLoadErrorType, string>(
   [
     [EntityLoadErrorType.DEVICE_CREDENTIALS_CONFLICT, 'version-control.device-credentials-conflict'],
-    [EntityLoadErrorType.MISSING_REFERENCED_ENTITY, 'version-control.missing-referenced-entity']
+    [EntityLoadErrorType.MISSING_REFERENCED_ENTITY, 'version-control.missing-referenced-entity'],
+    [EntityLoadErrorType.RUNTIME, 'version-control.runtime-failed']
   ]
 );
 
@@ -192,6 +194,7 @@ export interface EntityLoadError {
   type: EntityLoadErrorType;
   source: EntityId;
   target: EntityId;
+  message?: string;
 }
 
 export interface VersionLoadResult {

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -3318,6 +3318,7 @@
     "version-control": {
         "version-control": "Version control",
         "management": "Version control management",
+        "search": "Search versions",
         "branch": "Branch",
         "default": "Default",
         "select-branch": "Select branch",
@@ -3378,7 +3379,8 @@
         "sync-strategy-merge-hint": "Creates or updates selected entities in the repository. All other repository entities are <b>not modified</b>.",
         "sync-strategy-overwrite-hint": "Creates or updates selected entities in the repository. All other repository entities are <b>deleted</b>.",
         "device-credentials-conflict": "Failed to load the device with external id <b>{{entityId}}</b><br/>due to the same credentials are already present in the database for another device.<br/>Please consider disabling the <b>load credentials</b> setting in the restore form.",
-        "missing-referenced-entity": "Failed to load the <b>{{sourceEntityTypeName}}</b> with external id <b>{{sourceEntityId}}</b><br/>because it references missing <b>{{targetEntityTypeName}}</b> with id <b>{{targetEntityId}}</b>."
+        "missing-referenced-entity": "Failed to load the <b>{{sourceEntityTypeName}}</b> with external id <b>{{sourceEntityId}}</b><br/>because it references missing <b>{{targetEntityTypeName}}</b> with id <b>{{targetEntityId}}</b>.",
+        "runtime-failed": "<b>Failed:</b> {{message}}"
     },
     "widget": {
         "widget-library": "Widgets Library",