From c86769dd4f8ac670c89a827cfe2d8b84ff7e2453 Mon Sep 17 00:00:00 2001 From: Rajnikant Date: Tue, 12 Apr 2022 15:03:40 +0530 Subject: [PATCH] I added install appliances confirmation dialog, Unit test cases for upload and delete file and suggested changes. --- src/app/app.module.ts | 4 +- .../add-image-dialog.component.html | 91 ++++++++++++++----- .../add-image-dialog.component.scss | 24 ++++- .../add-image-dialog.component.spec.ts | 41 ++++++++- .../add-image-dialog.component.ts | 47 +++++----- .../deleteallfiles-dialog.component.html | 21 ++++- .../deleteallfiles-dialog.component.scss | 11 +++ .../deleteallfiles-dialog.component.spec.ts | 54 +++++++++-- .../deleteallfiles-dialog.component.ts | 53 +++++------ .../image-manager/image-database-file.ts | 36 ++++++++ .../image-manager.component.html | 7 +- .../image-manager.component.scss | 5 - .../image-manager.component.spec.ts | 75 ++++++++++++++- .../image-manager/image-manager.component.ts | 84 ++++++----------- src/app/models/images.ts | 6 +- .../services/image-manager.service.spec.ts | 56 ++++++++++-- src/app/services/image-manager.service.ts | 17 ++-- 17 files changed, 458 insertions(+), 174 deletions(-) create mode 100644 src/app/components/image-manager/image-database-file.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 6e33c169..1ba74ca7 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -274,7 +274,7 @@ import { UserService } from './services/user.service'; import { LoggedUserComponent } from './components/users/logged-user/logged-user.component'; import { ImageManagerComponent } from './components/image-manager/image-manager.component'; import { AddImageDialogComponent } from './components/image-manager/add-image-dialog/add-image-dialog.component'; -import { DeleteallfilesDialogComponent } from './components/image-manager/deleteallfiles-dialog/deleteallfiles-dialog.component'; +import { DeleteAllImageFilesDialogComponent } from './components/image-manager/deleteallfiles-dialog/deleteallfiles-dialog.component'; @NgModule({ declarations: [ @@ -465,7 +465,7 @@ import { DeleteallfilesDialogComponent } from './components/image-manager/delete ProjectReadmeComponent, ImageManagerComponent, AddImageDialogComponent, - DeleteallfilesDialogComponent, + DeleteAllImageFilesDialogComponent, ], imports: [ BrowserModule, diff --git a/src/app/components/image-manager/add-image-dialog/add-image-dialog.component.html b/src/app/components/image-manager/add-image-dialog/add-image-dialog.component.html index 867efe68..1fef1ff4 100644 --- a/src/app/components/image-manager/add-image-dialog/add-image-dialog.component.html +++ b/src/app/components/image-manager/add-image-dialog/add-image-dialog.component.html @@ -1,27 +1,70 @@ -
-
- Please Select Image - -
-
- - -
-
- -
-
-
- {{i+1}}. {{img?.name}} -
-
-
-
- - +
+
+
+
Would you like to automatically install appliances for this image?
+
+
+
+ +
+ + + Yes + + + No + + +
+
+ +
+
+ + + + +
+
+
+
Please Select image
+ +
+
+ + +
+
+ +
+
+
+ {{i+1}}. {{img?.name}} +
+
+
+
+ + +
+
+
+
+
+
+
+

Uploaded image details

+

{{i+1}}. {{uploadFile?.filename ?? uploadFile?.error?.message}}

+
+
+
+ +
\ No newline at end of file diff --git a/src/app/components/image-manager/add-image-dialog/add-image-dialog.component.scss b/src/app/components/image-manager/add-image-dialog/add-image-dialog.component.scss index 48df4438..26141499 100644 --- a/src/app/components/image-manager/add-image-dialog/add-image-dialog.component.scss +++ b/src/app/components/image-manager/add-image-dialog/add-image-dialog.component.scss @@ -21,7 +21,7 @@ top: 0px; } .mat-toolbar-single-row { - height: auto !important; + height: auto; background: transparent; padding: 0; } @@ -59,7 +59,25 @@ } .txt-align{ text-align: end; - } - + .uploaded-text{ + color: #0ca8c7; + font-size: 17px; + } + .uploaded-error-text{ + color: #d52435; + font-weight: 600; + } + + .choose-instal-appliance { + display: flex; + flex-direction: row; + margin: 15px 0px 11px 0px; + align-items: flex-start; + } + + .instal-appliances-button { + margin: 11px; + } + \ No newline at end of file diff --git a/src/app/components/image-manager/add-image-dialog/add-image-dialog.component.spec.ts b/src/app/components/image-manager/add-image-dialog/add-image-dialog.component.spec.ts index 30885ae2..cf51111b 100644 --- a/src/app/components/image-manager/add-image-dialog/add-image-dialog.component.spec.ts +++ b/src/app/components/image-manager/add-image-dialog/add-image-dialog.component.spec.ts @@ -1,14 +1,53 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { MatCheckboxModule } from '@angular/material/checkbox'; +import { MatDialog, MatDialogModule, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; +import { MatIconModule } from '@angular/material/icon'; +import { MatMenuModule } from '@angular/material/menu'; +import { MatToolbarModule } from '@angular/material/toolbar'; +import { ImageManagerService } from 'app/services/image-manager.service'; +import { ServerService } from '../../../services/server.service'; +import { MockedServerService } from '../../../services/server.service.spec'; +import { of } from 'rxjs'; +import { Server } from '../../../models/server'; import { AddImageDialogComponent } from './add-image-dialog.component'; +import { NO_ERRORS_SCHEMA } from '@angular/core'; +import { ToasterService } from 'app/services/toaster.service'; +import { MockedToasterService } from 'app/services/toaster.service.spec'; + +export class MockedImageManagerService { + public getImages(server: Server) { + return of(); + } + +} describe('AddImageDialogComponent', () => { let component: AddImageDialogComponent; let fixture: ComponentFixture; + + let mockedServerService = new MockedServerService(); + let mockedImageManagerService = new MockedImageManagerService() + let mockedToasterService = new MockedToasterService() beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ AddImageDialogComponent ] + imports:[ + MatIconModule, + MatToolbarModule, + MatMenuModule, + MatCheckboxModule, + MatDialogModule + ], + providers: [ + { provide: ServerService, useValue: mockedServerService }, + { provide: ImageManagerService, useValue: mockedImageManagerService }, + { provide: MAT_DIALOG_DATA, useValue: {} }, + { provide: MatDialogRef, useValue: {} }, + { provide: ToasterService, useValue: mockedToasterService }, + ], + declarations: [ AddImageDialogComponent ], + schemas: [NO_ERRORS_SCHEMA], }) .compileComponents(); }); diff --git a/src/app/components/image-manager/add-image-dialog/add-image-dialog.component.ts b/src/app/components/image-manager/add-image-dialog/add-image-dialog.component.ts index 679391c2..456e23d5 100644 --- a/src/app/components/image-manager/add-image-dialog/add-image-dialog.component.ts +++ b/src/app/components/image-manager/add-image-dialog/add-image-dialog.component.ts @@ -3,7 +3,9 @@ import { animate, state, style, transition, trigger } from '@angular/animations' import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; import { Server } from '../../../models/server'; import { ImageManagerService } from '../../../services/image-manager.service'; -import { Observable } from 'rxjs'; +import { Observable, of } from 'rxjs'; +import { catchError } from 'rxjs/operators'; +import { ImageData } from '../../../models/images'; @Component({ selector: 'app-add-image-dialog', @@ -21,10 +23,11 @@ import { Observable } from 'rxjs'; export class AddImageDialogComponent implements OnInit { server: Server; uploadedFile: boolean = false; - uploadProgress: number = 0; + isExistImage: boolean = false; + isInstallAppliance: boolean = false + install_appliance: boolean = false selectFile: any = []; - - + uploadFileMessage: ImageData = [] constructor( @Inject(MAT_DIALOG_DATA) public data: any, @@ -37,34 +40,28 @@ export class AddImageDialogComponent implements OnInit { this.server = this.data } + selectInstallApplianceOption(ev) { + this.install_appliance = ev.value + } + async uploadImageFile(event) { for (let imgFile of event.target.files) { this.selectFile.push(imgFile) } - - await this.upload().subscribe((_) => { - console.log(_) - this.dialogRef.close('file uploaded'); - }) + await this.upload() } // files uploading upload() { - return new Observable(observe => { - this.selectFile.forEach((img, i) => { - let resCount = 1 - try { - resCount = resCount + i - this.uploadedFile = true; - this.imageService.uploadedImage(this.server, img.name, img) - .subscribe(() => { - this.selectFile.length == resCount ? observe.next() : '' - }, (error) => { - observe.error(error) - }) - } catch (error) { - } - }) - }) + const calls = []; + this.uploadedFile = true; + this.selectFile.forEach(imgElement => { + calls.push(this.imageService.uploadedImage(this.server, this.install_appliance, imgElement.name, imgElement).pipe(catchError(error => of(error)))) + }); + Observable.forkJoin(calls).subscribe(responses => { + this.uploadFileMessage = responses + this.uploadedFile = false; + this.isExistImage = true; + }); } } diff --git a/src/app/components/image-manager/deleteallfiles-dialog/deleteallfiles-dialog.component.html b/src/app/components/image-manager/deleteallfiles-dialog/deleteallfiles-dialog.component.html index ad0e9cc2..72a4d605 100644 --- a/src/app/components/image-manager/deleteallfiles-dialog/deleteallfiles-dialog.component.html +++ b/src/app/components/image-manager/deleteallfiles-dialog/deleteallfiles-dialog.component.html @@ -1,6 +1,6 @@ -
+

Do you want delete all files ?.

-
+

Your selected files

{{i+1}}. {{file?.filename}}

@@ -9,11 +9,26 @@
-
+

Please wait.

+
+ +
+
+
+
Images can't be deleted because image used in one or more template.
+

{{i+1}}. {{message?.error?.message}}

+
+
+
{{fileNotDeleted.length}} Images deleted successfully.
+
+
+
+ +
\ No newline at end of file diff --git a/src/app/components/image-manager/deleteallfiles-dialog/deleteallfiles-dialog.component.scss b/src/app/components/image-manager/deleteallfiles-dialog/deleteallfiles-dialog.component.scss index e69de29b..f962e55b 100644 --- a/src/app/components/image-manager/deleteallfiles-dialog/deleteallfiles-dialog.component.scss +++ b/src/app/components/image-manager/deleteallfiles-dialog/deleteallfiles-dialog.component.scss @@ -0,0 +1,11 @@ +.delete-text{ + color: #0ca8c7; + font-size: 17px; + } + +.deleted-error-text{ + color: #d52435; + font-weight: 600; +} + + \ No newline at end of file diff --git a/src/app/components/image-manager/deleteallfiles-dialog/deleteallfiles-dialog.component.spec.ts b/src/app/components/image-manager/deleteallfiles-dialog/deleteallfiles-dialog.component.spec.ts index 96c8767d..43aea89c 100644 --- a/src/app/components/image-manager/deleteallfiles-dialog/deleteallfiles-dialog.component.spec.ts +++ b/src/app/components/image-manager/deleteallfiles-dialog/deleteallfiles-dialog.component.spec.ts @@ -1,20 +1,60 @@ +import { NO_ERRORS_SCHEMA } from '@angular/core'; import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { MatCheckboxModule } from '@angular/material/checkbox'; +import { MatDialogModule, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; +import { MatIconModule } from '@angular/material/icon'; +import { MatMenuModule } from '@angular/material/menu'; +import { MatToolbarModule } from '@angular/material/toolbar'; +import { ToasterService } from 'app/services/toaster.service'; +import { MockedToasterService } from 'app/services/toaster.service.spec'; +import { Server } from 'http'; +import { of } from 'rxjs'; +import { ImageManagerService } from '../../../services/image-manager.service'; +import { ServerService } from '../../../services/server.service'; +import { MockedServerService } from '../../../services/server.service.spec'; +import { ImageManagerComponent } from '../image-manager.component'; -import { DeleteallfilesDialogComponent } from './deleteallfiles-dialog.component'; +import { DeleteAllImageFilesDialogComponent } from './deleteallfiles-dialog.component'; -describe('DeleteallfilesDialogComponent', () => { - let component: DeleteallfilesDialogComponent; - let fixture: ComponentFixture; +export class MockedImageManagerService { + public deleteALLFile(server: Server, image_path) { + return of(); + } +} + + describe('DeleteAllImageFilesDialogComponent', () => { + let component: DeleteAllImageFilesDialogComponent; + let fixture: ComponentFixture; + let mockedServerService = new MockedServerService(); + let mockedImageManagerService = new MockedImageManagerService() + let mockedToasterService = new MockedToasterService() beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ DeleteallfilesDialogComponent ] + imports: [ + MatIconModule, + MatToolbarModule, + MatMenuModule, + MatCheckboxModule, + MatDialogModule, + ], + providers: [ + { provide: ServerService, useValue: mockedServerService }, + { provide: ImageManagerService, useValue: mockedImageManagerService }, + { provide: MAT_DIALOG_DATA, useValue: {} }, + { provide: MatDialogRef, useValue: {} }, + { provide: ToasterService, useValue: mockedToasterService }, + + ], + declarations: [DeleteAllImageFilesDialogComponent, + ], + schemas: [NO_ERRORS_SCHEMA], }) - .compileComponents(); + .compileComponents(); }); beforeEach(() => { - fixture = TestBed.createComponent(DeleteallfilesDialogComponent); + fixture = TestBed.createComponent(DeleteAllImageFilesDialogComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/src/app/components/image-manager/deleteallfiles-dialog/deleteallfiles-dialog.component.ts b/src/app/components/image-manager/deleteallfiles-dialog/deleteallfiles-dialog.component.ts index 0be324f1..6fd33fca 100644 --- a/src/app/components/image-manager/deleteallfiles-dialog/deleteallfiles-dialog.component.ts +++ b/src/app/components/image-manager/deleteallfiles-dialog/deleteallfiles-dialog.component.ts @@ -1,19 +1,25 @@ import { Component, Inject, OnInit } from '@angular/core'; import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; -import { ImageManagerService } from '@services/image-manager.service'; -import { ToasterService } from '@services/toaster.service'; -import { Observable } from 'rxjs'; +import { ImageManagerService } from '../../../services/image-manager.service'; +import { ToasterService } from '../../../services/toaster.service'; +import { Observable, of } from 'rxjs'; +import { catchError } from 'rxjs/operators'; +import { ImageData } from '../../../models/images'; @Component({ selector: 'app-deleteallfiles-dialog', templateUrl: './deleteallfiles-dialog.component.html', styleUrls: ['./deleteallfiles-dialog.component.scss'] }) -export class DeleteallfilesDialogComponent implements OnInit { +export class DeleteAllImageFilesDialogComponent implements OnInit { isDelete: boolean = false; + isUsedFiles: boolean = false; + deleteFliesDetails: ImageData = [] + fileNotDeleted: ImageData = [] + constructor( @Inject(MAT_DIALOG_DATA) public deleteData: any, - public dialogRef: MatDialogRef, + public dialogRef: MatDialogRef, private imageService: ImageManagerService, private toasterService: ToasterService ) { } @@ -23,30 +29,21 @@ export class DeleteallfilesDialogComponent implements OnInit { async deleteAll() { this.isDelete = true - await this.delete().subscribe((_) => { - this.dialogRef.close(true); - this.isDelete = false - }) + await this.deleteFile() } - delete() { - return new Observable(observe => { - this.deleteData.deleteFilesPaths.forEach((_, i) => { - let imgDeleteCount = 1 - try { - imgDeleteCount = imgDeleteCount + i - this.imageService.deleteImage(this.deleteData.server, _.filename).subscribe( - () => { - this.deleteData.deleteFilesPaths.length === imgDeleteCount ? observe.next() : '' - }, - (error) => { - this.toasterService.error(error) - } - ); - } catch (error) { - this.toasterService.error(error) - } - }) - }) + + deleteFile() { + const calls = []; + this.deleteData.deleteFilesPaths.forEach(pathElement => { + calls.push(this.imageService.deleteFile(this.deleteData.server, pathElement.filename).pipe(catchError(error => of(error)))) + }); + Observable.forkJoin(calls).subscribe(responses => { + this.deleteFliesDetails = responses.filter(x => x !== null) + this.fileNotDeleted = responses.filter(x => x === null) + this.isUsedFiles = true; + this.isDelete = true + }); + } diff --git a/src/app/components/image-manager/image-database-file.ts b/src/app/components/image-manager/image-database-file.ts new file mode 100644 index 00000000..09415d7b --- /dev/null +++ b/src/app/components/image-manager/image-database-file.ts @@ -0,0 +1,36 @@ + + +import { DataSource, SelectionModel } from '@angular/cdk/collections'; +import { MatSort } from '@angular/material/sort'; +import { BehaviorSubject, Observable, Subscription, merge } from 'rxjs'; +import { map } from 'rxjs/operators'; +import { Image } from '../../models/images'; + + +export class imageDatabase { + dataChange: BehaviorSubject = new BehaviorSubject([]); + get data(): Image[] { + return this.dataChange.value; + } + + public addImages(fileData: Image[]) { + this.dataChange.next(fileData); + } + +} + +export class imageDataSource extends DataSource { + constructor(private serverDatabase: imageDatabase) { + super(); + } + + connect(): Observable { + return merge(this.serverDatabase.dataChange).pipe( + map(() => { + return this.serverDatabase.data; + }) + ); + } + + disconnect() { } +} diff --git a/src/app/components/image-manager/image-manager.component.html b/src/app/components/image-manager/image-manager.component.html index 3d74edea..2cabdf60 100644 --- a/src/app/components/image-manager/image-manager.component.html +++ b/src/app/components/image-manager/image-manager.component.html @@ -21,7 +21,7 @@ - @@ -49,14 +49,15 @@ Image Size {{ (row.image_size/1000000).toFixed()}} MB + - - diff --git a/src/app/components/image-manager/image-manager.component.scss b/src/app/components/image-manager/image-manager.component.scss index 23e34b24..047a0ad8 100644 --- a/src/app/components/image-manager/image-manager.component.scss +++ b/src/app/components/image-manager/image-manager.component.scss @@ -10,11 +10,6 @@ margin-top: 10px; } -.fb-btn{ - background-color: #263238 !important; - box-shadow: none !important; - height: 45px; -} mat-header-cell, mat-cell { justify-content: center; } diff --git a/src/app/components/image-manager/image-manager.component.spec.ts b/src/app/components/image-manager/image-manager.component.spec.ts index 257ce8f7..bdba7db1 100644 --- a/src/app/components/image-manager/image-manager.component.spec.ts +++ b/src/app/components/image-manager/image-manager.component.spec.ts @@ -1,16 +1,74 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { NO_ERRORS_SCHEMA } from '@angular/core'; +import { MatCheckboxModule } from '@angular/material/checkbox'; +import { MatDialogModule } from '@angular/material/dialog'; +import { MatIconModule } from '@angular/material/icon'; +import { MatMenuModule } from '@angular/material/menu'; +import { MatToolbarModule } from '@angular/material/toolbar'; +import { ImageManagerService } from 'app/services/image-manager.service'; +import { ServerService } from 'app/services/server.service'; +import { MockedServerService } from 'app/services/server.service.spec'; +import { of } from 'rxjs'; +import { Server } from '../../models/server'; import { ImageManagerComponent } from './image-manager.component'; +import { Image } from '../../models/images'; +import { ProgressService } from 'app/common/progress/progress.service'; +import { MockedProgressService } from '../project-map/project-map.component.spec'; +import { MockedActivatedRoute } from '../preferences/preferences.component.spec'; +import { ActivatedRoute } from '@angular/router'; +import { MockedVersionService } from '../../services/version.service.spec'; +import { VersionService } from 'app/services/version.service'; +import { ToasterService } from 'app/services/toaster.service'; +import { MockedToasterService } from 'app/services/toaster.service.spec'; + +export class MockedImageManagerService { + public getImages(server: Server) { + return of(); + } + + public deleteFile(server: Server, image_path) { + return of(); + } + +} describe('ImageManagerComponent', () => { let component: ImageManagerComponent; let fixture: ComponentFixture; + let mockedServerService = new MockedServerService(); + let mockedImageManagerService = new MockedImageManagerService() + let mockedProgressService = new MockedProgressService() + let mockedVersionService = new MockedVersionService() + let mockedToasterService = new MockedToasterService() + let activatedRoute = new MockedActivatedRoute().get(); + + beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ ImageManagerComponent ] + imports: [ + MatIconModule, + MatToolbarModule, + MatMenuModule, + MatCheckboxModule, + MatDialogModule + ], + providers: [ + { + provide: ActivatedRoute, + useValue: activatedRoute, + }, + { provide: ServerService, useValue: mockedServerService }, + { provide: ImageManagerService, useValue: mockedImageManagerService }, + { provide: ProgressService, useValue: mockedProgressService }, + { provide: VersionService, useValue: mockedVersionService }, + { provide: ToasterService, useValue: mockedToasterService }, + ], + declarations: [ImageManagerComponent], + schemas: [NO_ERRORS_SCHEMA], }) - .compileComponents(); + .compileComponents(); }); beforeEach(() => { @@ -22,4 +80,17 @@ describe('ImageManagerComponent', () => { it('should create', () => { expect(component).toBeTruthy(); }); + + + it('should call save images', () => { + spyOn(mockedImageManagerService, 'getImages').and.returnValue(of({} as Image)); + component.getImages() + expect(mockedImageManagerService.getImages).toHaveBeenCalled(); + }); + + it('should delete image', () => { + spyOn(mockedImageManagerService, 'deleteFile').and.returnValue(of({} as Image)); + component.deleteFile('image_path') + expect(mockedImageManagerService.deleteFile).toHaveBeenCalled(); + }); }); diff --git a/src/app/components/image-manager/image-manager.component.ts b/src/app/components/image-manager/image-manager.component.ts index 31bd1867..3ca680d7 100644 --- a/src/app/components/image-manager/image-manager.component.ts +++ b/src/app/components/image-manager/image-manager.component.ts @@ -1,21 +1,17 @@ -import { Component, Input, OnInit } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import { ServerService } from '../../services/server.service'; import { VersionService } from '../../services/version.service'; import { ProgressService } from 'app/common/progress/progress.service'; -import { Images } from '../../models/images'; +import { Image } from '../../models/images'; import { Server } from '../../models/server'; import { ImageManagerService } from "../../services/image-manager.service"; -import { Version } from '../../models/version'; import { DataSource, SelectionModel } from '@angular/cdk/collections'; -import { MatSort } from '@angular/material/sort'; -import { BehaviorSubject, Observable, Subscription, merge } from 'rxjs'; -import { map } from 'rxjs/operators'; import { AddImageDialogComponent } from './add-image-dialog/add-image-dialog.component'; import { MatDialog } from '@angular/material/dialog'; import { ToasterService } from '../../services/toaster.service'; -import { NotificationService } from '@services/notification.service'; -import { DeleteallfilesDialogComponent } from './deleteallfiles-dialog/deleteallfiles-dialog.component'; +import { DeleteAllImageFilesDialogComponent } from './deleteallfiles-dialog/deleteallfiles-dialog.component'; +import { imageDataSource, imageDatabase } from "./image-database-file"; @Component({ selector: 'app-image-manager', @@ -30,7 +26,7 @@ export class ImageManagerComponent implements OnInit { isAllDelete: boolean = false selection = new SelectionModel(true, []); - displayedColumns = ['select', 'filename', 'image_type', 'image_size', 'delete']; + displayedColumns = ['select', 'filename', 'image_type', 'image_size','delete']; constructor( private imageService: ImageManagerService, @@ -50,33 +46,36 @@ export class ImageManagerComponent implements OnInit { if (server.authToken) { this.getImages() } - this.versionService.get(this.server).subscribe((version: Version) => { - this.version = version.version; - }); + // this.versionService.get(this.server).subscribe((version: Version) => { + // this.version = version.version; + // }); }); this.dataSource = new imageDataSource(this.imageDatabase); } getImages() { - this.imageService.getSavedImgList(this.server).subscribe( - (images: Images[]) => { + this.imageService.getImages(this.server).subscribe( + (images: Image[]) => { this.imageDatabase.addImages(images) }, (error) => { - this.progressService.setError(error); + this.toasterService.error(error.error.message) + } ); } deleteFile(path) { - this.imageService.deleteImage(this.server, path).subscribe( + this.imageService.deleteFile(this.server, path).subscribe( (res) => { this.getImages() this.unChecked() this.toasterService.success('File deleted'); }, (error) => { - this.toasterService.error(error) + this.getImages() + this.unChecked() + this.toasterService.error(error.error.message) } ); } @@ -87,7 +86,7 @@ export class ImageManagerComponent implements OnInit { return numSelected === numRows; } - masterToggle() { + selectAllImages() { this.isAllSelected() ? this.unChecked() : this.allChecked() } @@ -102,30 +101,30 @@ export class ImageManagerComponent implements OnInit { } public addImageDialog() { - console.log(this.server) const dialogRef = this.dialog.open(AddImageDialogComponent, { - width: '750px', + width: '600px', maxHeight: '550px', autoFocus: false, disableClose: true, data: this.server }); - dialogRef.afterClosed().subscribe((answer: string) => { - if (answer) { + dialogRef.afterClosed().subscribe((isAddes: boolean) => { + if (isAddes) { this.getImages() - this.toasterService.success('File added'); + this.unChecked() } else { + this.getImages() + this.unChecked() return false; } }); } deleteAllFiles() { - console.log(this.server) - const dialogRef = this.dialog.open(DeleteallfilesDialogComponent, { - width: '400px', - maxHeight: '350px', + const dialogRef = this.dialog.open(DeleteAllImageFilesDialogComponent, { + width: '500px', + maxHeight: '650px', autoFocus: false, disableClose: true, data: { @@ -140,38 +139,11 @@ export class ImageManagerComponent implements OnInit { this.getImages() this.toasterService.success('All files deleted'); } else { + this.unChecked() + this.getImages() return false; } }); - } } -export class imageDatabase { - dataChange: BehaviorSubject = new BehaviorSubject([]); - get data(): Images[] { - return this.dataChange.value; - } - - public addImages(fliesData: Images[]) { - this.dataChange.next(fliesData); - } - -} - -export class imageDataSource extends DataSource { - constructor(private serverDatabase: imageDatabase) { - super(); - } - - connect(): Observable { - return merge(this.serverDatabase.dataChange).pipe( - map(() => { - return this.serverDatabase.data; - }) - ); - } - - disconnect() { } -} - diff --git a/src/app/models/images.ts b/src/app/models/images.ts index 7dd38477..11e10612 100644 --- a/src/app/models/images.ts +++ b/src/app/models/images.ts @@ -1,4 +1,4 @@ -export class Images { +export class Image { filename: string; path: string; image_type: string; @@ -7,4 +7,8 @@ export class Images { checksum_algorithm: string; created_at: string; updated_at: string; +} + +export class ImageData { + } \ No newline at end of file diff --git a/src/app/services/image-manager.service.spec.ts b/src/app/services/image-manager.service.spec.ts index 8cb560a6..c54c18a1 100644 --- a/src/app/services/image-manager.service.spec.ts +++ b/src/app/services/image-manager.service.spec.ts @@ -1,16 +1,60 @@ -import { TestBed } from '@angular/core/testing'; +import { HttpClient } from '@angular/common/http'; +import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing'; +import { inject, TestBed } from '@angular/core/testing'; +import { AppTestingModule } from 'app/testing/app-testing/app-testing.module'; +import { Server } from '../models/server'; +import { HttpServer } from './http-server.service'; +import { getTestServer } from './testing'; import { ImageManagerService } from './image-manager.service'; +import { Image } from "../models/images"; describe('ImageManagerService', () => { - let service: ImageManagerService; + let httpClient: HttpClient; + let httpTestingController: HttpTestingController; + let httpServer: HttpServer; + let server: Server; beforeEach(() => { - TestBed.configureTestingModule({}); - service = TestBed.inject(ImageManagerService); + TestBed.configureTestingModule({ + imports: [HttpClientTestingModule, AppTestingModule], + providers: [HttpServer, ImageManagerService], + }); + + httpClient = TestBed.get(HttpClient); + httpTestingController = TestBed.get(HttpTestingController); + httpServer = TestBed.get(HttpServer); + server = getTestServer(); + // service = TestBed.inject(ImageManagerService); + }); + afterEach(() => { + httpTestingController.verify(); }); - it('should be created', () => { + + it('should be get Images', inject([ImageManagerService], (service: ImageManagerService) => { + service.getImages(server).subscribe(); + const req = httpTestingController.expectOne('http://127.0.0.1:3080/v3/images'); + expect(req.request.method).toEqual('GET'); expect(service).toBeTruthy(); - }); + })); + + it('should add image', inject([ImageManagerService], (service: ImageManagerService) => { + let install_appliance = true + const image: Image = { + filename: '', + path: '', + image_type: '', + image_size: 0, + checksum: '', + checksum_algorithm: '', + created_at: '', + updated_at: '', + }; + + service.uploadedImage(server, install_appliance, image.filename, image).subscribe(); + const req = httpTestingController.expectOne('http://127.0.0.1:3080/v3/images/upload/?install_appliances=true'); + expect(req.request.method).toEqual('POST'); + expect(req.request.body).toEqual(image); + })); }); diff --git a/src/app/services/image-manager.service.ts b/src/app/services/image-manager.service.ts index 5ad5aced..c69531b3 100644 --- a/src/app/services/image-manager.service.ts +++ b/src/app/services/image-manager.service.ts @@ -1,8 +1,8 @@ import { Injectable } from '@angular/core'; import { Server } from '../models/server'; import { HttpServer } from './http-server.service'; -import { merge, Observable, Subscription } from 'rxjs'; -import { Images } from "../models/images"; +import { Observable } from 'rxjs'; +import { Image } from "../models/images"; @Injectable({ providedIn: 'root' @@ -11,13 +11,14 @@ export class ImageManagerService { constructor(private httpServer: HttpServer) { } - getSavedImgList(server: Server) { - return this.httpServer.get(server, '/images') as Observable; + getImages(server: Server) { + return this.httpServer.get(server, '/images') as Observable; } - uploadedImage(server:Server, image_path, flie){ - return this.httpServer.post(server, `/images/upload/${image_path}?install_appliances=true`,flie) as Observable; + + uploadedImage(server:Server, install_appliance, image_path, flie){ + return this.httpServer.post(server, `/images/upload/${image_path}?install_appliances=${install_appliance}`,flie) as Observable; } - deleteImage(server:Server, image_path){ - return this.httpServer.delete(server, `/images/${image_path}`) as Observable; + deleteFile(server:Server, image_path){ + return this.httpServer.delete(server, `/images/${image_path}`) as Observable; } }