[NAB-354] I18nString view performance

- including also task NAB-353 - make better performance on action view - make better performance on i18n view
netgrif · May 6, 2024 · c63c83d · c63c83d
1 parent 511ecc7
commit c63c83d
Show file tree

Hide file tree

Showing 27 changed files with 242 additions and 221 deletions.
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -20,10 +20,10 @@ import {JoyrideService} from 'ngx-joyride';
 export class AppComponent implements AfterViewInit {
     title = 'Netgrif Application Builder';
 
-    @HostListener('window:beforeunload', ['$event'])
-    WindowBeforeUnload($event: any) {
-        $event.returnValue = 'Your data will be lost!';
-    }
+    // @HostListener('window:beforeunload', ['$event'])
+    // WindowBeforeUnload($event: any) {
+    //     $event.returnValue = 'Your data will be lost!';
+    // }
 
     constructor(
         private router: Router,

diff --git a/src/app/modeler/actions-mode/action-detail/action-detail.component.html b/src/app/modeler/actions-mode/action-detail/action-detail.component.html
@@ -1,21 +1,17 @@
 <div class="no-overflow" *ngIf="!isFunctionsModeSelected()" fxFlex>
     <mat-tree class="tree overflow-hidden" [dataSource]="dataSource" [treeControl]="treeControl"
-              style="display: flex; flex-direction: column; flex: auto">
+              >
         <!--  Leaf node template  -->
         <mat-tree-node *matTreeNodeDef="let node; when isLeafNode" #actionNode>
-            @defer (on viewport) {
-            <div class="mat-tree-node tree-offset" fxLayout="row" fxLayoutAlign="start center">
+            <div class="mat-tree-node tree-offset">
                 <nab-action-editor-list [leafNode]="node"
                                         (actionChanged)="actionChangedListener($event, node)"
                                         class="full-width editor-list-area-padding"></nab-action-editor-list>
             </div>
-            } @placeholder {
-            <div>loading...</div>
-            }
         </mat-tree-node>
         <!--  Inner node template  -->
         <mat-nested-tree-node *matTreeNodeDef="let node; when: isInnerNode" matTreeNodePadding #eventNode>
-            <div class="mat-tree-node" fxLayout="row" fxLayoutAlign="start center">
+            <div class="mat-tree-node">
                 <button mat-icon-button matTreeNodeToggle
                         [attr.aria-label]="'toggle ' + node.name">
                     <mat-icon class="mat-icon-rtl-mirror">
@@ -30,7 +26,7 @@
         </mat-nested-tree-node>
         <!--  + node template  -->
         <mat-nested-tree-node *matTreeNodeDef="let node; when: isAddNode" matTreeNodePadding #phaseNode>
-            <div class="mat-tree-node" fxLayout="row" fxLayoutAlign="start center">
+            <div class="mat-tree-node">
                 <button mat-icon-button matTreeNodeToggle
                         [attr.aria-label]="'toggle ' + node.name"
                         [disabled]="!actionsExpandable(node)">

diff --git a/src/app/modeler/actions-mode/action-detail/action-detail.component.ts b/src/app/modeler/actions-mode/action-detail/action-detail.component.ts
@@ -28,6 +28,7 @@ export class ActionDetailComponent implements OnInit {
     // TREE
     public treeControl = new NestedTreeControl<TreeNode>(node => node.children);
     public dataSource = new MatTreeNestedDataSource<TreeNode>();
+    public loading: boolean;
 
     constructor(private _modelService: ModelService,
                 private _actionsModeService: ActionsModeService,

diff --git a/...p/modeler/actions-mode/action-editor/action-editor-menu/action-editor-menu.component.html b/...p/modeler/actions-mode/action-editor/action-editor-menu/action-editor-menu.component.html
@@ -11,31 +11,33 @@
                 </span>
             </mat-panel-title>
         </mat-expansion-panel-header>
-        <mat-list>
-            <mat-list-item *ngFor="let item of actions.actions" class="menu-list-item">
-                <div fxLayout="row" fxFlex fxLayoutAlign="start center" class="test" *ngIf="item.label.length > 20">
-                    <button mat-button
-                            class="action-menu-panel"
-                            (click)="addTextToEditor(item.action)">
-                        <span matTooltip="{{item.label}}">{{item.label.substring(0, 20)}}...</span>
-                    </button>
-                </div>
-                <div fxLayout="row" fxFlex fxLayoutAlign="start center" class="test" *ngIf="item.label.length <= 20">
-                    <button mat-button
-                            class="action-menu-panel"
-                            (click)="addTextToEditor(item.action)">{{item.label}}
-                    </button>
-                </div>
-                <div fxLayout="row" fxFlex fxLayoutAlign="end center">
-                    <button mat-button
-                            *ngIf="item.description || item.header"
-                            class="description-info-button"
-                            (click)="handleClick(item)"
-                            (blur)="onBlur($event)">
-                        <mat-icon>info</mat-icon>
-                    </button>
-                </div>
-            </mat-list-item>
-        </mat-list>
+        <ng-template matExpansionPanelContent>
+            <mat-list>
+                <mat-list-item *ngFor="let item of actions.actions" class="menu-list-item">
+                    <div fxLayout="row" fxFlex fxLayoutAlign="start center" *ngIf="item.label.length > 28">
+                        <button mat-button
+                                class="action-menu-panel"
+                                (click)="addTextToEditor(item.action)">
+                            <span matTooltip="{{item.label}}">{{item.label.substring(0, 28)}}...</span>
+                        </button>
+                    </div>
+                    <div fxLayout="row" fxFlex fxLayoutAlign="start center" *ngIf="item.label.length <= 28">
+                        <button mat-button
+                                class="action-menu-panel"
+                                (click)="addTextToEditor(item.action)">{{item.label}}
+                        </button>
+                    </div>
+                    <div fxLayout="row" fxFlex fxLayoutAlign="end center">
+                        <button mat-icon-button
+                                *ngIf="item.description || item.header"
+                                class="description-info-button"
+                                (click)="handleClick(item)"
+                                (blur)="onBlur($event)">
+                            <mat-icon>info</mat-icon>
+                        </button>
+                    </div>
+                </mat-list-item>
+            </mat-list>
+        </ng-template>
     </mat-expansion-panel>
 </mat-accordion>
diff --git a/...p/modeler/actions-mode/action-editor/action-editor-menu/action-editor-menu.component.scss b/...p/modeler/actions-mode/action-editor/action-editor-menu/action-editor-menu.component.scss
@@ -1,5 +1,6 @@
 .action-menu-panel {
     font-size: 14px;
+    letter-spacing: normal;
 }
 
 .description-info-button {
@@ -18,6 +19,7 @@
 
 .actions-list-expansion-panel {
     box-shadow: none !important;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
 }
 
 .itemLabel {
@@ -32,3 +34,8 @@ mat-expansion-panel-header {
 .mat-expansion-panel-body {
     padding-left: 0 !important;
 }
+
+.menu-list-item {
+    padding-left: 0;
+    padding-right: 0;
+}
diff --git a/src/app/modeler/actions-mode/action-editor/action-editor/action-editor.component.html b/src/app/modeler/actions-mode/action-editor/action-editor/action-editor.component.html
@@ -12,60 +12,62 @@
     <mat-sidenav-content>
         <mat-expansion-panel (closed)="setHeightOnClose(index, action); closeDrawer()" mwlResizeHandle mwlResizable
                              id="{{action.event + '_' + action.phase + '_' + index}}"
-                             [resizeEdges]="{ bottom: true }"
+                             [resizeEdges]="{ bottom: true }" class="panel-fix"
                              (resizing)="onResizeEvent($event, action.event + '_' + action.phase + '_' + index)">
-            <mat-expansion-panel-header>
-                action
+            <mat-expansion-panel-header class="header">
+                Action: {{action.id}}
             </mat-expansion-panel-header>
-            <div fxLayout="row">
-                <div fxFlex fxLayoutGap="3em" fxLayoutAlign="start center">
-                    <button type="button" mat-button (click)="openDrawer()">
-                        <mat-icon *ngIf="drawer.opened; else closed">
-                            keyboard_arrow_left
-                        </mat-icon>
-                        <ng-template #closed>
+            <ng-template matExpansionPanelContent>
+                <div fxLayout="row">
+                    <div fxFlex fxLayoutGap="3em" fxLayoutAlign="start center">
+                        <button type="button" mat-button (click)="openDrawer()">
+                            <mat-icon *ngIf="drawer.opened; else closed">
+                                keyboard_arrow_left
+                            </mat-icon>
+                            <ng-template #closed>
+                                <mat-icon>
+                                    keyboard_arrow_right
+                                </mat-icon>
+                            </ng-template>
                             <mat-icon>
-                                keyboard_arrow_right
+                                functions
                             </mat-icon>
-                        </ng-template>
-                        <mat-icon>
-                            functions
-                        </mat-icon>
-                        Functions
-                    </button>
-                </div>
+                            Functions
+                        </button>
+                    </div>
 
-                <div fxFlex="50" fxLayoutGap="3em" fxLayoutAlign="end center">
-                    <mat-menu #referencesMenu="matMenu">
-                        <ng-container *ngFor="let configuration of editorConfigurations">
-                            <nab-action-editor-menu-item [trigger]="referenceItemTrigger" #referenceItem="menuInOtherComponent" [configuration]="configuration" [hidden]="!referencesOpened"></nab-action-editor-menu-item>
-                            <button mat-menu-item #referenceItemTrigger="matMenuTrigger" [matMenuTriggerFor]="referenceItem.menu">
-                                {{configuration.title}}
-                            </button>
-                        </ng-container>
-                    </mat-menu>
-                    <button #matButton fxFlexAlign="end center" type="button" mat-button
-                            #referencesTrigger="matMenuTrigger"
-                            [matMenuTriggerFor]="referencesMenu">
-                        <mat-icon>
-                            link
-                        </mat-icon>
-                        References
-                        <mat-icon *ngIf="referencesTrigger.menuOpen; else closedMenu">
-                            keyboard_arrow_up
-                        </mat-icon>
-                        <ng-template #closedMenu>
+                    <div fxFlex="50" fxLayoutGap="3em" fxLayoutAlign="end center">
+                        <mat-menu #referencesMenu="matMenu">
+                            <ng-container *ngFor="let configuration of editorConfigurations">
+                                <nab-action-editor-menu-item [trigger]="referenceItemTrigger" #referenceItem="menuInOtherComponent" [configuration]="configuration" [hidden]="!referencesOpened"></nab-action-editor-menu-item>
+                                <button mat-menu-item #referenceItemTrigger="matMenuTrigger" [matMenuTriggerFor]="referenceItem.menu">
+                                    {{configuration.title}}
+                                </button>
+                            </ng-container>
+                        </mat-menu>
+                        <button #matButton fxFlexAlign="end center" type="button" mat-button
+                                #referencesTrigger="matMenuTrigger"
+                                [matMenuTriggerFor]="referencesMenu">
                             <mat-icon>
-                                keyboard_arrow_down
+                                link
                             </mat-icon>
-                        </ng-template>
-                    </button>
+                            References
+                            <mat-icon *ngIf="referencesTrigger.menuOpen; else closedMenu">
+                                keyboard_arrow_up
+                            </mat-icon>
+                            <ng-template #closedMenu>
+                                <mat-icon>
+                                    keyboard_arrow_down
+                                </mat-icon>
+                            </ng-template>
+                        </button>
+                    </div>
+                </div>
+                <div fxLayout="column" fxLayoutAlign="start stretch" id="{{name + '_div'}}">
+    <!--                <ngx-monaco-editor class="full-size-editor" id="{{name + '_editor'}}" [options]="editorOptions"-->
+    <!--                                   [formControl]="formControl" (onInit)="onInit($event)"></ngx-monaco-editor>-->
                 </div>
-            </div>
-            <div fxLayout="column" fxLayoutAlign="start stretch" id="{{name + '_div'}}">
-<!--                <ngx-monaco-editor class="full-size-editor" id="{{name + '_editor'}}" [options]="editorOptions"-->
-<!--                                   [formControl]="formControl" (onInit)="onInit($event)"></ngx-monaco-editor>-->
-            </div>
+            </ng-template>
             <mat-action-row>
                 <div *ngIf="action.type === 'TRANSITION'" fxLayout="row" fxLayoutAlign="start center" class="netgrif-input">
                     <mat-form-field class="margin-left-8px">

diff --git a/src/app/modeler/actions-mode/action-editor/action-editor/action-editor.component.scss b/src/app/modeler/actions-mode/action-editor/action-editor/action-editor.component.scss
@@ -32,3 +32,12 @@
 .mat-action-row {
     padding: 4px 16px 4px 16px;
 }
+
+.header {
+    height: 48px !important;
+}
+
+.panel-fix {
+    margin: 0;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+}
diff --git a/src/app/modeler/actions-mode/action-editor/action-editor/action-editor.component.ts b/src/app/modeler/actions-mode/action-editor/action-editor/action-editor.component.ts
@@ -364,7 +364,7 @@ export class ActionEditorComponent implements OnInit {
         element.style.height = newHeight + 'px';
         const innerSize = newHeight - headerSize - bottomSize - 45;
         div.style.height = innerSize + 'px';
-        if (editorObject !== undefined) {
+        if (editorObject !== undefined && editorObject !== null) {
             editorObject.style.height = innerSize + 'px';
         }
 

diff --git a/src/app/modeler/actions-mode/action-master/action-master.component.html b/src/app/modeler/actions-mode/action-master/action-master.component.html
@@ -1,6 +1,6 @@
 <div fxLayout="column" class="height-fix">
-
-        <div *ngIf="!isFunctionsModeSelected()" class="height-max" matSort (matSortChange)="sortData($event)">
+    <div class="height-max" matSort (matSortChange)="sortData($event)">
+        <div *ngIf="!isFunctionsModeSelected()" class="height-100">
             <div mat-subheader class="header-action">
                 <p fxFlex="40" mat-sort-header="id"><strong>ID</strong></p>
                 <p fxFlex mat-sort-header="name">Name</p>
@@ -12,7 +12,7 @@
                                   [masterService]="masterService" ></nab-main-master-item>
             </mat-action-list>
         </div>
-        <div *ngIf="isFunctionsModeSelected()" class="height-max" matSort (matSortChange)="sortData($event)">
+        <div *ngIf="isFunctionsModeSelected()" class="height-100">
             <div mat-subheader class="header-action">
                 <p fxFlex="40"><strong>Name</strong></p>
                 <p fxFlex>Scope</p>
@@ -27,7 +27,7 @@
                                   [masterService]="masterService" ></nab-main-master-item>
             </mat-action-list>
         </div>
-
+    </div>
     <mat-paginator fxFlex class="footer" [length]="totalSize" [pageSize]="pageSize" [pageIndex]="pageIndex"
                    [pageSizeOptions]="pageSizeOptions" (page)="onPageChanged($event)" showFirstLastButtons="false">
     </mat-paginator>

diff --git a/src/app/modeler/actions-mode/action-master/action-master.component.scss b/src/app/modeler/actions-mode/action-master/action-master.component.scss
@@ -35,3 +35,9 @@ mat-paginator {
 .height-fix {
     height: calc(100vh - 42px);
 }
+
+.height-100 {
+    box-sizing: border-box;
+    height: calc(100%);
+    overflow: auto;
+}
diff --git a/src/app/modeler/components/master-detail/master-detail.component.scss b/src/app/modeler/components/master-detail/master-detail.component.scss
@@ -9,7 +9,7 @@
     overflow: auto;
 }
 
-ng-template {
+.fill-space {
     width: 100%;
     height: 100%;
 }
@@ -22,6 +22,3 @@ ng-template {
     border-left: 1px solid #dddddd;
 }
 
-mwlResizable {
-    box-sizing: border-box; // required for the enableGhostResize option to work
-}
diff --git a/src/app/modeler/i18n-mode/languages/languages.component.ts b/src/app/modeler/i18n-mode/languages/languages.component.ts
@@ -14,9 +14,8 @@ import {map, startWith} from 'rxjs/operators';
 })
 export class LanguagesComponent implements OnInit {
 
-    @ViewChild('newLanguageSelect')
-    newLanguageSelect: MatSelect;
-    newLocaleFormControl = new FormControl('', {
+    @ViewChild('newLanguageSelect') newLanguageSelect: MatSelect;
+    newLocaleFormControl = new FormControl<Locale>(undefined, {
         validators: [this.autocompleteStringValidator(), Validators.required]
     });
     filteredLocales: Observable<Array<Locale>>;
@@ -68,8 +67,7 @@ export class LanguagesComponent implements OnInit {
 
     addLocal() {
         console.log(this.newLocaleFormControl.value);
-        // TODO: release/4.0.0
-        // this.i18nService.addLocale(this.newLocaleFormControl.value.languageCode);
-        // this.newLocaleFormControl.reset();
+        this.i18nService.addLocale(this.newLocaleFormControl.value.languageCode);
+        this.newLocaleFormControl.reset();
     }
 }
diff --git a/src/app/modeler/i18n-mode/languages/progress/progress.component.html b/src/app/modeler/i18n-mode/languages/progress/progress.component.html
@@ -1,7 +1,7 @@
-<mat-card fxLayout="row" fxLayoutAlign="start center">
+<div class="card" fxLayout="row" fxLayoutAlign="start center">
     <nab-flag [locale]="locale"></nab-flag>
     <span fxFlex>{{locale.prettyName}}</span>
     <button mat-icon-button class="button-line" matTooltip="Remove locale" (click)="removeLocale()">
         <mat-icon>delete</mat-icon>
     </button>
-</mat-card>
+</div>
diff --git a/src/app/modeler/i18n-mode/languages/progress/progress.component.scss b/src/app/modeler/i18n-mode/languages/progress/progress.component.scss
@@ -4,7 +4,12 @@ nab-flag {
     padding-right: 16px;
 }
 
-button {
+.button-line {
     width: 40px;
     max-width: 40px;
 }
+
+.card {
+    padding: 0 16px;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+}