Commit 1ee5f4b9 authored by Alicja Reniewicz's avatar Alicja Reniewicz
Browse files

move blocking UI to menu component

parent 6214ed1f
......@@ -5,6 +5,7 @@ import {AngularMaterialModule} from '../angular-material/angular-material.module
import {RouterModule} from '@angular/router';
import {ConfirmationDialogComponent} from './confirmation-dialog/confirmation-dialog.component';
import {AutoFocusDirective} from './directive/auto-focus.directive';
import {BlockUIModule} from 'ng-block-ui';
@NgModule({
declarations: [
......@@ -15,7 +16,8 @@ import {AutoFocusDirective} from './directive/auto-focus.directive';
imports: [
CommonModule,
AngularMaterialModule,
RouterModule
RouterModule,
BlockUIModule.forRoot()
],
exports: [
MenuComponent,
......
<div class="menu-container" [class.menu-is-mobile]="mobileQuery.matches">
<mat-toolbar color="primary" class="element-dark-primary">
<mat-toolbar-row class="mat-elevation-z6">
<button mat-icon-button *ngIf="isMenuVisible()" (click)="snav.toggle()">
<mat-icon>menu</mat-icon>
</button>
<h1 class="menu-app-name">Melodic</h1>
</mat-toolbar-row>
<block-ui>
<div class="menu-container" [class.menu-is-mobile]="mobileQuery.matches">
<mat-toolbar color="primary" class="element-dark-primary">
<mat-toolbar-row class="mat-elevation-z6">
<button mat-icon-button *ngIf="isMenuVisible()" (click)="snav.toggle()">
<mat-icon>menu</mat-icon>
</button>
<h1 class="menu-app-name">Melodic</h1>
</mat-toolbar-row>
<mat-toolbar-row>
<p class="view-text">{{getCurrentViewTitle()}}</p>
</mat-toolbar-row>
</mat-toolbar>
<mat-toolbar-row>
<p class="view-text">{{getCurrentViewTitle()}}</p>
</mat-toolbar-row>
</mat-toolbar>
<mat-sidenav-container class="menu-sidenav-container"
[style.marginTop.px]="mobileQuery.matches ? 56 : 0">
<mat-sidenav-container class="menu-sidenav-container"
[style.marginTop.px]="mobileQuery.matches ? 56 : 0">
<mat-sidenav #snav [mode]="mobileQuery.matches ? 'over' : 'side'"
[fixedInViewport]="mobileQuery.matches" fixedTopGap="56">
<mat-nav-list>
<a mat-list-item routerLink="/deploying">New deployment</a>
<a mat-list-item routerLink="/process">Process view</a>
<a mat-list-item routerLink="/application">Your application</a>
<a mat-list-item routerLink="/process/details/deployment">Deployed artifacts</a>
<a mat-list-item routerLink=".">Melodic components</a>
<a mat-list-item routerLink="/provider/cloud-definition">Providers settings</a>
<a mat-list-item routerLink="/process/details/offer">Offers</a>
<a *ngIf="isAdmin()" mat-list-item routerLink="/user">Manage users</a>
<a mat-list-item routerLink="/user/password">Change password</a>
<a mat-list-item (click)="onLogOutClick(); snav.close()">Log out</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav #snav [mode]="mobileQuery.matches ? 'over' : 'side'"
[fixedInViewport]="mobileQuery.matches" fixedTopGap="56">
<mat-nav-list>
<a mat-list-item routerLink="/deploying">New deployment</a>
<a mat-list-item routerLink="/process">Process view</a>
<a mat-list-item routerLink="/application">Your application</a>
<a mat-list-item routerLink="/process/details/deployment">Deployed artifacts</a>
<a mat-list-item routerLink=".">Melodic components</a>
<a mat-list-item routerLink="/provider/cloud-definition">Providers settings</a>
<a mat-list-item routerLink="/process/details/offer">Offers</a>
<a *ngIf="isAdmin()" mat-list-item routerLink="/user">Manage users</a>
<a mat-list-item routerLink="/user/password">Change password</a>
<a mat-list-item (click)="onLogOutClick(); snav.close()">Log out</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<router-outlet></router-outlet>
</mat-sidenav-content>
</mat-sidenav-container>
</div>
<mat-sidenav-content>
<router-outlet></router-outlet>
</mat-sidenav-content>
</mat-sidenav-container>
</div>
</block-ui>
......@@ -2,6 +2,7 @@ import {AfterViewChecked, ChangeDetectorRef, Component, OnDestroy} from '@angula
import {MediaMatcher} from '@angular/cdk/layout';
import {UserService} from '../../user/service/user.service';
import {UserRole} from '../../user/model/user-role.enum';
import {BlockUI, NgBlockUI} from 'ng-block-ui';
@Component({
selector: 'app-menu',
......@@ -10,6 +11,7 @@ import {UserRole} from '../../user/model/user-role.enum';
})
export class MenuComponent implements OnDestroy, AfterViewChecked {
@BlockUI() blockUI: NgBlockUI;
mobileQuery: MediaQueryList;
private readonly mobileQueryListener: () => void;
......@@ -50,4 +52,12 @@ export class MenuComponent implements OnDestroy, AfterViewChecked {
return false;
}
}
blockUIView(message: string) {
this.blockUI.start(message);
}
unblockUIView() {
this.blockUI.stop();
}
}
......@@ -13,7 +13,6 @@ import {CloudDefinitionFormComponent} from '../provider/cloud-definition-form/cl
import {ProviderModule} from '../provider/provider.module';
import {FileUploaderModule} from '../file-uploader/file-uploader.module';
import {SensitiveVariablesDialogComponent} from '../file-uploader/sensitive-variables-dialog/sensitive-variables-dialog.component';
import {BlockUIModule} from 'ng-block-ui';
@NgModule({
declarations: [
......@@ -31,8 +30,7 @@ import {BlockUIModule} from 'ng-block-ui';
FormsModule,
ReactiveFormsModule,
ProviderModule,
FileUploaderModule,
BlockUIModule.forRoot()
FileUploaderModule
],
exports: [
UploaderXmiComponent,
......
<block-ui>
<div id="xmi-uploader-div">
<div id="xmi-uploader-div">
<mat-card>
<mat-card-header>
......@@ -65,5 +64,4 @@
</mat-card-content>
</mat-card>
</div>
</block-ui>
</div>
......@@ -6,7 +6,7 @@ import {SecureVariablesExistence, UploadedModel} from '../model/uploaded-model';
import {SensitiveVariablesDialogComponent} from '../../file-uploader/sensitive-variables-dialog/sensitive-variables-dialog.component';
import {SecureVariablesService} from '../../file-uploader/service/secure-variables.service';
import {SecureVariable} from '../../file-uploader/model/secure-variable';
import {BlockUI, NgBlockUI} from 'ng-block-ui';
import {MenuComponent} from '../../common-template/menu/menu.component';
@Component({
......@@ -17,7 +17,6 @@ import {BlockUI, NgBlockUI} from 'ng-block-ui';
})
export class UploaderXmiComponent implements OnInit {
@BlockUI() blockUI: NgBlockUI;
sensitiveVariablesDialog: MatDialogRef<SensitiveVariablesDialogComponent>;
title = 'Upload xmi';
......@@ -31,7 +30,8 @@ export class UploaderXmiComponent implements OnInit {
constructor(private snackBar: MatSnackBar,
private dialog: MatDialog,
private deploymentService: DeploymentService,
private secureVariablesService: SecureVariablesService) {
private secureVariablesService: SecureVariablesService,
private menuComponent: MenuComponent) {
}
ngOnInit() {
......@@ -93,16 +93,16 @@ export class UploaderXmiComponent implements OnInit {
const modelName = model.name;
console.log(`Delete click for model with name: ${modelName}`);
this.deletingInProgress = true;
this.blockUI.start(`Deleting model ${modelName} in progress...`);
this.menuComponent.blockUIView(`Deleting model ${modelName} in progress...`);
this.deploymentService.deleteModel(modelName).subscribe(() => {
this.blockUI.stop();
this.menuComponent.unblockUIView();
console.log(`Model ${modelName} successfully deleted`);
this.snackBar.open(`Model ${modelName} successfully deleted from CDO.`, 'Close', {duration: 10000});
this.deletingInProgress = false;
this.getUploadedModelsList();
},
error1 => {
this.blockUI.stop();
this.menuComponent.unblockUIView();
console.log(`Problem by deleting model ${modelName}`);
this.snackBar.open(`Problem by deleting model ${modelName} from CDO.`, 'Close', {duration: 10000});
this.deletingInProgress = false;
......@@ -164,11 +164,11 @@ export class UploaderXmiComponent implements OnInit {
informAboutSavingSecureVariables(modelName: string) {
this.secureVariablesUploadingInProgress = true;
this.blockUI.start(`Saving secure variables for model ${modelName} in progress...`);
this.menuComponent.blockUIView(`Saving secure variables for model ${modelName} in progress...`);
}
setSavingSecureVariablesAsFinished() {
this.secureVariablesUploadingInProgress = false;
this.blockUI.stop();
this.menuComponent.unblockUIView();
}
}
......@@ -6,6 +6,7 @@ import {SecureVariablesService} from '../service/secure-variables.service';
import {UploaderXmiComponent} from '../../deploying-application/uploader-xmi/uploader-xmi.component';
import {DeploymentService} from '../../deploying-application/service/deployment.service';
import {SecureVariable} from '../model/secure-variable';
import {MenuComponent} from '../../common-template/menu/menu.component';
@Component({
selector: 'app-file-uploader',
......@@ -22,7 +23,8 @@ export class FileUploaderComponent implements OnDestroy {
private secureVariablesService: SecureVariablesService,
private deploymentService: DeploymentService,
private snackBar: MatSnackBar,
private uploaderXmiComponent: UploaderXmiComponent
private uploaderXmiComponent: UploaderXmiComponent,
private menuComponent: MenuComponent
) {
}
......@@ -64,46 +66,45 @@ export class FileUploaderComponent implements OnDestroy {
public upload(): void {
this.isUploading = true;
this.uploaderXmiComponent.blockUI
.start(`Validating of your model from ${this.uploadingFile.name} and storing in database in progress ...`);
this.menuComponent.blockUIView(`Validating of your model from ${this.uploadingFile.name} and storing in database in progress ...`);
const formData = new FormData();
formData.set(this.fileAlias, this.uploadingFile, this.uploadingFile.name);
this.fileUploadSubscription = this.deploymentService.uploadModel(formData)
.subscribe((event: any) => {
if (event.type === HttpEventType.UploadProgress) {
this.progressPercentage = Math.floor(event.loaded * 100 / event.total);
this.loaded = event.loaded;
this.total = event.total;
}
this.uploadEvent.emit({file: this.uploadingFile, event});
if (event.type === HttpEventType.Response) {
const secureVariables: Array<SecureVariable> = event.body.secureVariables;
console.log('File uploaded, removing from uploading list', event.body.secureVariables);
const modelName = event.body.modelName;
this.secureVariablesService.addUploadedModelToLocalStorage(modelName, secureVariables);
if (secureVariables.length !== 0) {
console.log(`Open dialog for sensitive variables. The first one: ${secureVariables[0]}`);
this.openDialog(secureVariables, modelName);
} else {
console.log(`List of sensitive variables for ${modelName} is empty`);
if (event.type === HttpEventType.UploadProgress) {
this.progressPercentage = Math.floor(event.loaded * 100 / event.total);
this.loaded = event.loaded;
this.total = event.total;
}
this.uploadEvent.emit({file: this.uploadingFile, event});
if (event.type === HttpEventType.Response) {
const secureVariables: Array<SecureVariable> = event.body.secureVariables;
console.log('File uploaded, removing from uploading list', event.body.secureVariables);
const modelName = event.body.modelName;
this.secureVariablesService.addUploadedModelToLocalStorage(modelName, secureVariables);
if (secureVariables.length !== 0) {
console.log(`Open dialog for sensitive variables. The first one: ${secureVariables[0]}`);
this.openDialog(secureVariables, modelName);
} else {
console.log(`List of sensitive variables for ${modelName} is empty`);
}
this.setUploadingAsFinished();
this.remove();
}
this.setUploadingAsFinished();
this.remove();
}
}, (error: any) => {
}, (error: any) => {
this.setUploadingAsFinished();
console.log(`Error by uploading`, error);
console.log(`Error message: ${error.error.message}`);
if (this.fileUploadSubscription) {
this.fileUploadSubscription.unsubscribe();
}
this.progressPercentage = 0;
this.loaded = 0;
this.isUploading = false;
this.uploadEvent.emit({file: this.uploadingFile, event: error});
console.log(`After emit error event`, error);
});
console.log(`Error by uploading`, error);
console.log(`Error message: ${error.error.message}`);
if (this.fileUploadSubscription) {
this.fileUploadSubscription.unsubscribe();
}
this.progressPercentage = 0;
this.loaded = 0;
this.isUploading = false;
this.uploadEvent.emit({file: this.uploadingFile, event: error});
console.log(`After emit error event`, error);
});
}
public remove(): void {
......@@ -149,11 +150,11 @@ export class FileUploaderComponent implements OnDestroy {
public setUploadingInProgress() {
this.uploaderXmiComponent.uploadInProgress = true;
this.uploaderXmiComponent.blockUI.start('Validating of your models and storing in database in progress ..');
this.menuComponent.blockUIView('Validating of your models and storing in database in progress ..');
}
public setUploadingAsFinished() {
this.uploaderXmiComponent.uploadInProgress = false;
this.uploaderXmiComponent.blockUI.stop();
this.menuComponent.unblockUIView();
}
}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment