netgrif · mazarijuraj · Apr 7, 2025 · May 14, 2025 · May 14, 2025 · May 14, 2025
diff --git a/.gitignore b/.gitignore
@@ -51,6 +51,7 @@ Thumbs.db
 .scannerwork/
 out/
 package-lock.json
+pnpm-lock.yaml
 ### JetBrains template
 # Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio, WebStorm and Rider
 # Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@netgrif/application-builder",
-    "version": "2.1.0-RC.2",
+    "version": "2.1.0-RC.3",
     "description": "Netgrif Application Builder for building, configuring and modeling applications for Application Engine.",
     "homepage": "https://builder.netgrif.com",
     "license": "SEE LICENSE IN LICENSE FILE",

diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,105 +1,98 @@
 <div class="app-container">
-    <mat-sidenav-container class="app-mat-sidenav-container" fxLayout="column">
-        <mat-sidenav fxFlex class="app-mat-viewnav" mode="side" disableClose="true" opened>
-            <div fxFlex fxLayout="column">
-                <a [href]="config.services.urls.netgrif" target="_blank" class="logo">
-                    <img src="../assets/netgrif_logo.svg" alt="Netgrif logo" class="main-toolbar-logo">
-                </a>
-                <div fxLayout="column" fxLayoutAlign="start center" fxFlex="100"
-                     style="padding-top: 4px; padding-bottom: 4px; overflow-y: hidden;">
-                    <mat-action-list class="menu-items">
-                        <mat-list-item class="field-list-mat-list-item"
-                                       (click)="openApplicationDialog()"
-                                       matTooltip="Application" matTooltipPosition="right"
-                                       style="margin-bottom: 4px;">
-                            <mat-icon>app_registration</mat-icon>
-                        </mat-list-item>
-                    </mat-action-list>
-                    <div fxFlex style="overflow-y: auto;">
-                        <mat-action-list class="menu-items">
-                            @for (process of applicationService.models; track process[0]) {
-                                <!--TODO trieda active-process nefunguje pri prvotnej inicializácii-->
-                                <mat-list-item class="field-list-mat-list-item"
-                                               [class.active-process]="process[0] === modelService.model.id"
-                                               (click)="switchToProcess(process[0])"
-                                               [matTooltip]="'['+process[0]+'] '+process[1].title.value"
-                                               matTooltipPosition="right">
-                                    <mat-icon>{{ process[1].icon }}</mat-icon>
-                                </mat-list-item>
-                            }
-                            <mat-list-item class="field-list-mat-list-item"
-                                           (click)="applicationService.addNewEmptyModel()"
-                                           matTooltip="Add new process" matTooltipPosition="right"
-                                           style="margin: 4px 0;">
-                                <mat-icon>add</mat-icon>
-                            </mat-list-item>
-                        </mat-action-list>
-                    </div>
-                    <div style="overflow-y: hidden;">
-                        <mat-divider style="width: 80%;margin: auto;padding: 4px 0;"></mat-divider>
-                        <mat-action-list class="menu-items">
-                            <mat-list-item class="field-list-mat-list-item"
-                                           joyrideStep="{{tutorial.demo.step}}"
-                                           title="{{tutorial.demo.title}}"
-                                           text="{{tutorial.demo.text}}"
-                                           stepPosition="{{tutorial.demo.position}}"
-                                           (click)="openInTab(config.services.urls.engine)"
-                                           matTooltip="Netgrif Demo" matTooltipPosition="right">
-                                <mat-icon>play_arrow</mat-icon>
-                            </mat-list-item>
-                            <mat-list-item class="field-list-mat-list-item"
-                                           joyrideStep="{{tutorial.youtube.step}}"
-                                           title="{{tutorial.youtube.title}}"
-                                           text="{{tutorial.youtube.text}}"
-                                           stepPosition="{{tutorial.youtube.position}}"
-                                           (click)="openInTab(config.services.urls.youtube)"
-                                           matTooltip="Youtube Channel" matTooltipPosition="right">
-                                <mat-icon svgIcon="youtube"></mat-icon>
-                            </mat-list-item>
-                            <mat-list-item class="field-list-mat-list-item"
-                                           joyrideStep="{{tutorial.github.step}}"
-                                           title="{{tutorial.github.title}}"
-                                           text="{{tutorial.github.text}}"
-                                           stepPosition="{{tutorial.github.position}}"
-                                           (click)="openInTab(config.services.urls.github)"
-                                           matTooltip="Github" matTooltipPosition="right">
-                                <mat-icon svgIcon="github">device_hub</mat-icon>
-                            </mat-list-item>
-                            <mat-list-item class="field-list-mat-list-item"
-                                           joyrideStep="{{tutorial.mortgage.step}}"
-                                           title="{{tutorial.mortgage.title}}"
-                                           text="{{tutorial.mortgage.text}}"
-                                           stepPosition="{{tutorial.mortgage.position}}"
-                                           (click)="addMortgage()"
-                                           matTooltip="Mortgage demo" matTooltipPosition="right">
-                                <mat-icon>device_hub</mat-icon>
-                            </mat-list-item>
-                        </mat-action-list>
-                        <mat-divider style="width: 80%;margin: auto;padding: 4px 0;"></mat-divider>
-                        <mat-action-list class="menu-items">
-                            <mat-list-item class="field-list-mat-list-item"
-                                           joyrideStep="{{tutorial.bug.step}}"
-                                           title="{{tutorial.bug.title}}"
-                                           text="{{tutorial.bug.text}}"
-                                           stepPosition="{{tutorial.bug.position}}"
-                                           (done)="tutorial.onClose()"
-                                           (click)="openInTab(config.services.urls.issues)"
-                                           matTooltip="Report a bug" matTooltipPosition="right">
-                                <mat-icon>bug_report</mat-icon>
-                            </mat-list-item>
-                            <mat-list-item class="field-list-mat-list-item"
-                                           (click)="help()"
-                                           matTooltip="Help" matTooltipPosition="right">
-                                <mat-icon>help</mat-icon>
-                            </mat-list-item>
-                        </mat-action-list>
-                    </div>
-                </div>
-            </div>
+    <mat-sidenav-container class="app-mat-sidenav-container">
+        <mat-sidenav class="app-mat-viewnav" mode="side" disableClose="true" opened>
+            <a [href]="config.services.urls.netgrif" target="_blank" class="logo">
+                <img src="../assets/netgrif_logo.svg" alt="Netgrif logo" class="main-toolbar-logo">
+            </a>
+            <mat-action-list class="menu-items">
+                <mat-list-item class="field-list-mat-list-item"
+                               joyrideStep="{{tutorial.demo.step}}"
+                               title="{{tutorial.demo.title}}"
+                               text="{{tutorial.demo.text}}"
+                               stepPosition="{{tutorial.demo.position}}"
+                               (click)="openInTab(config.services.urls.engine)"
+                               matTooltip="Netgrif Demo" matTooltipPosition="right">
+                    <mat-icon>play_arrow</mat-icon>
+                </mat-list-item>
+                <mat-list-item class="field-list-mat-list-item"
+                               joyrideStep="{{tutorial.youtube.step}}"
+                               title="{{tutorial.youtube.title}}"
+                               text="{{tutorial.youtube.text}}"
+                               stepPosition="{{tutorial.youtube.position}}"
+                               (click)="openInTab(config.services.urls.youtube)"
+                               matTooltip="Youtube Channel" matTooltipPosition="right">
+                    <mat-icon svgIcon="youtube"></mat-icon>
+                </mat-list-item>
+                <mat-list-item class="field-list-mat-list-item"
+                               joyrideStep="{{tutorial.github.step}}"
+                               title="{{tutorial.github.title}}"
+                               text="{{tutorial.github.text}}"
+                               stepPosition="{{tutorial.github.position}}"
+                               (click)="openInTab(config.services.urls.github)"
+                               matTooltip="Github" matTooltipPosition="right">
+                    <mat-icon svgIcon="github">device_hub</mat-icon>
+                </mat-list-item>
+                <mat-list-item class="field-list-mat-list-item"
+                               joyrideStep="{{tutorial.mortgage.step}}"
+                               title="{{tutorial.mortgage.title}}"
+                               text="{{tutorial.mortgage.text}}"
+                               stepPosition="{{tutorial.mortgage.position}}"
+                               (click)="addMortgage()"
+                               matTooltip="Mortgage demo" matTooltipPosition="right">
+                    <mat-icon>device_hub</mat-icon>
+                </mat-list-item>
+            </mat-action-list>
+            <mat-action-list class="app-viewnaw-bottom-list menu-items">
+                <mat-list-item class="field-list-mat-list-item"
+                               joyrideStep="{{tutorial.bug.step}}"
+                               title="{{tutorial.bug.title}}"
+                               text="{{tutorial.bug.text}}"
+                               stepPosition="{{tutorial.bug.position}}"
+                               (done)="tutorial.onClose()"
+                               (click)="openInTab(config.services.urls.issues)"
+                               matTooltip="Report a bug" matTooltipPosition="right">
+                    <mat-icon>bug_report</mat-icon>
+                </mat-list-item>
+                <mat-list-item class="field-list-mat-list-item"
+                               (click)="help()"
+                               matTooltip="Help" matTooltipPosition="right">
+                    <mat-icon>help</mat-icon>
+                </mat-list-item>
+            </mat-action-list>
         </mat-sidenav>
         <joyrideStep joyrideStep="{{tutorial.welcome.step}}" stepPosition="{{tutorial.welcome.position}}"
                      title="{{tutorial.welcome.title}}" text="{{tutorial.welcome.text}}"
                      (next)="tutorial.welcome.onNext()"></joyrideStep>
+        <mat-tab-group mat-stretch-tabs="false" mat-align-tabs="start" animationDuration="0ms" class="app-tabs"
+                       [selectedIndex]="activeProcessIndex()"
+                       (selectedTabChange)="changeTab($event)">
+            <mat-tab disabled="true">
+                <ng-template mat-tab-label>
+                    <button mat-icon-button (click)="openApplicationDialog()">
+                        <mat-icon class="tab-icon" matTooltip="Application" style="color: rgba(0,0,0,0.6)!important;">
+                            app_registration
+                        </mat-icon>
+                    </button>
+                </ng-template>
+            </mat-tab>
+            @for (process of applicationService.models; track process[0]) {
+                <mat-tab label="{{process[0]}}">
+                    <ng-template mat-tab-label>
+                        @if (process[1].icon) {
+                            <mat-icon class="tab-icon">{{ process[1].icon }}</mat-icon>
+                        }
+                        {{ process[1].title.value }} [{{ process[1].id }}]
+                    </ng-template>
+                </mat-tab>
+            }
+            <mat-tab disabled="true">
+                <ng-template mat-tab-label>
+                    <button mat-icon-button (click)="addNewEmptyModel()">
+                        <mat-icon>add</mat-icon>
+                    </button>
+                </ng-template>
+            </mat-tab>
+        </mat-tab-group>
         <router-outlet></router-outlet>
     </mat-sidenav-container>
 </div>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
@@ -16,7 +16,7 @@
     .logo {
         display: flex;
         justify-content: center;
-        padding-top: 0;
+        padding-top: 1px;
     }
 
     mat-action-list {
@@ -86,12 +86,12 @@
     padding-top: 0;
 
     .mdc-list-item {
-        //padding-left: 9px;
-        //padding-right: 9px;
+        padding-left: 9px;
+        padding-right: 9px;
         height: 42px;
     }
 }
 
-.active-process {
-    background-color: map-get(netgif-theme.$netgrif-blue, 900);
+.tab-icon {
+    margin-right: 8px;
 }
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -1,25 +1,23 @@
-import {AfterViewInit, Component, HostListener} from '@angular/core';
+import {AfterViewInit, Component, HostListener, OnInit} from '@angular/core';
 import {MatDialog} from '@angular/material/dialog';
-import {Router} from '@angular/router';
 import {NetgrifApplicationEngine} from '@netgrif/components-core/';
 import {JoyrideService} from 'ngx-joyride';
 import {AppBuilderConfigurationService} from './app-builder-configuration.service';
 import {DialogApplicationEditComponent} from './dialogs/dialog-application-edit/dialog-application-edit.component';
-import {DialogConfirmComponent} from './dialogs/dialog-confirm/dialog-confirm.component';
 import {DialogIntroComponent} from './dialogs/dialog-intro/dialog-intro.component';
-import {ModelImportService} from './modeler/model-import-service';
 import {MortgageService} from './modeler/mortgage.service';
 import {ModelService} from './modeler/services/model/model.service';
 import {ApplicationService} from './project-builder/application.service';
 import {DatabaseStorageService} from './project-builder/database-storage.service';
 import {TutorialService} from './tutorial/tutorial-service';
+import {MatTabChangeEvent} from '@angular/material/tabs';
 
 @Component({
     selector: 'nab-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.scss'],
 })
-export class AppComponent implements AfterViewInit {
+export class AppComponent implements OnInit, AfterViewInit {
     title = 'Netgrif Application Builder';
     config: NetgrifApplicationEngine;
 
@@ -30,46 +28,33 @@ export class AppComponent implements AfterViewInit {
 
     constructor(
         config: AppBuilderConfigurationService,
-        private router: Router,
         private matDialog: MatDialog,
         private readonly joyrideService: JoyrideService,
         private _mortgageService: MortgageService,
         private tutorialService: TutorialService,
-        private importService: ModelImportService,
         private db: DatabaseStorageService,
         public modelService: ModelService,
         public applicationService: ApplicationService,
     ) {
         this.config = config.get();
     }
 
+    ngOnInit(): void {
+        this.applicationService.createApplication();
+        this.applicationService.switchToFirst();
+    }
+
     ngAfterViewInit(): void {
         // TODO: NAB-326 https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API
-        this.matDialog.open(DialogIntroComponent, {
-            width: '40%',
-            panelClass: 'dialog-width-40',
-            disableClose: true,
-            data: this.db.getAllApplications(),
-        });
-
-        /*const oldModel = localStorage.getItem(ModelerConfig.LOCALSTORAGE.DRAFT_MODEL.KEY);
-        if (!oldModel) {
-            return;
+        const apps = this.db.getAllApplications();
+        if (apps && apps.length > 0) {
+            this.matDialog.open(DialogIntroComponent, {
+                width: '40%',
+                panelClass: 'dialog-width-40',
+                disableClose: true,
+                data: apps,
+            });
         }
-        const dialogRef = this.matDialog.open(DialogLocalStorageModelComponent, {
-            data: {
-                id: localStorage.getItem(ModelerConfig.LOCALSTORAGE.DRAFT_MODEL.ID),
-                timestamp: localStorage.getItem(ModelerConfig.LOCALSTORAGE.DRAFT_MODEL.TIMESTAMP),
-                title: localStorage.getItem(ModelerConfig.LOCALSTORAGE.DRAFT_MODEL.TITLE),
-            },
-        });
-        dialogRef.afterClosed().subscribe(result => {
-            if (result === true) {
-                this.importService.importFromXml(oldModel);
-            } else if (result === false) {
-                localStorage.clear();
-            }
-        });*/
     }
 
     openApplicationDialog() {
@@ -80,14 +65,7 @@ export class AppComponent implements AfterViewInit {
     }
 
     addMortgage() {
-        const dialogRef = this.matDialog.open(DialogConfirmComponent);
-
-        dialogRef.afterClosed().subscribe(result => {
-            if (result === true) {
-                this._mortgageService.loadModel();
-                this.router.navigate(['/modeler']);
-            }
-        });
+        this._mortgageService.loadModel();
     }
 
     help() {
@@ -105,8 +83,20 @@ export class AppComponent implements AfterViewInit {
         window.open(url, '_blank');
     }
 
-    switchToProcess(processId: string) {
+    switchToProcess(processId: string): void {
         this.applicationService.switchActiveModel(processId);
     }
 
+    changeTab(tabEvent: MatTabChangeEvent): void {
+        this.switchToProcess(tabEvent.tab.textLabel);
+    }
+
+    addNewEmptyModel(): void {
+        const model = this.applicationService.addNewEmptyModel();
+        this.applicationService.switchActiveModel(model.id);
+    }
+
+    activeProcessIndex(): number {
+        return this.applicationService.modelList.indexOf(this.applicationService.getActiveModel()) + 1;
+    }
 }