diff --git a/src/app/appmarket/appmanagement/app-add-json-app/app-add-json-app.component.css b/src/app/appmarket/appmanagement/app-add-json-app/app-add-json-app.component.css new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/src/app/appmarket/appmanagement/app-add-json-app/app-add-json-app.component.html b/src/app/appmarket/appmanagement/app-add-json-app/app-add-json-app.component.html new file mode 100644 index 0000000000000000000000000000000000000000..308e3ad22cff13505b7bfa16e2545a9837b60e8c --- /dev/null +++ b/src/app/appmarket/appmanagement/app-add-json-app/app-add-json-app.component.html @@ -0,0 +1,35 @@ +<nmaas-modal style="width: 600px; height: 800px"> + <div class="nmaas-modal-header">{{ 'APPS_MANAGEMENT.ADD_JSON'| translate}}</div> + <div class="nmaas-modal-body"> + <div style="margin-bottom: 10px"> + {{ 'APPS_MANAGEMENT.ADD_JSON_INFO'| translate}} + </div> + <div style="margin-bottom: 4rem"> + <p-fileUpload name="json" (onUpload)="onUpload($event)" customUpload="true" [draggable]="true" + (uploadHandler)="onUpload($event)" [multiple]="false" accept=".json" maxFileSize="1000000"> + + </p-fileUpload> + </div> + <div> + <div style="margin-bottom: 10px"> + {{ 'APPS_MANAGEMENT.ADD_JSON_TEXTAREA'| translate}} + </div> + <textarea rows="10" cols="100" pInputTextarea [(ngModel)]="jsonText"></textarea> + </div> + <div class="flex flex-row justify-content-center justify-content-center mt-2"> + <button *ngIf="jsonText.length >0" pButton class="btn btn-success" + (click)="sendJsonText()"> {{'APPS_MANAGEMENT.SEND_JSON' | translate}}</button> + </div> + + <div *ngIf="error.length > 0" style="color: indianred"> + {{error}} + </div> + + + </div> + <div class="nmaas-modal-footer"> + <button type="button" class="btn btn-default" (click)="modal.hide()"> + {{'APP_CHANGE_STATE_MODAL.CANCEL_BUTTON' | translate}} + </button> + </div> +</nmaas-modal> diff --git a/src/app/appmarket/appmanagement/app-add-json-app/app-add-json-app.component.spec.ts b/src/app/appmarket/appmanagement/app-add-json-app/app-add-json-app.component.spec.ts new file mode 100644 index 0000000000000000000000000000000000000000..ad59c13d01f5bc042b0bf98b2e56d8c679e407b2 --- /dev/null +++ b/src/app/appmarket/appmanagement/app-add-json-app/app-add-json-app.component.spec.ts @@ -0,0 +1,38 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AppAddJsonAppComponent } from './app-add-json-app.component'; +import {HttpClientTestingModule, HttpTestingController} from '@angular/common/http/testing'; +import {RouterTestingModule} from '@angular/router/testing'; +import {TranslateFakeLoader, TranslateLoader, TranslateModule} from '@ngx-translate/core'; + +describe('AppAddJsonAppComponent', () => { + let component: AppAddJsonAppComponent; + let fixture: ComponentFixture<AppAddJsonAppComponent>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ AppAddJsonAppComponent ], + imports: [ + HttpClientTestingModule, + RouterTestingModule, + TranslateModule.forRoot({ + loader: { + provide: TranslateLoader, + useClass: TranslateFakeLoader + } + }), + ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(AppAddJsonAppComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/appmarket/appmanagement/app-add-json-app/app-add-json-app.component.ts b/src/app/appmarket/appmanagement/app-add-json-app/app-add-json-app.component.ts new file mode 100644 index 0000000000000000000000000000000000000000..37c7c218d5c062f80f003f7086a1bbc0764749c7 --- /dev/null +++ b/src/app/appmarket/appmanagement/app-add-json-app/app-add-json-app.component.ts @@ -0,0 +1,75 @@ +import {Component, OnInit, ViewChild} from '@angular/core'; +import {ModalComponent} from '../../../shared'; +import {AppsService} from '../../../service'; +import {HttpHeaders} from '@angular/common/http'; +import {Router} from '@angular/router'; + +@Component({ + selector: 'app-app-add-json-app', + templateUrl: './app-add-json-app.component.html', + styleUrls: ['./app-add-json-app.component.css'] +}) +export class AppAddJsonAppComponent implements OnInit { + + @ViewChild(ModalComponent, { static: true }) + public readonly modal: ModalComponent; + + public jsonText = ''; + public error = ''; + + + + constructor(private readonly appsService: AppsService, + private readonly router: Router) { } + + + + ngOnInit(): void { + } + + onUpload(event: any) { + console.log(event); + const file = event.files[0]; + console.log(file); + const fileReader = new FileReader(); + fileReader.readAsText(file); + fileReader.onload = () => { + if (typeof fileReader.result === 'string') { + console.log(JSON.parse(fileReader.result)); + this.appsService.createApplicationDTO(JSON.parse(fileReader.result)).subscribe(result => { + console.log('uploaded', result); + this.modal.hide(); + this.router.navigate(['admin/apps/view/', result.id]) + }, + error => { + console.log(error) + this.error = error.message + }) + } + } + fileReader.onerror = (error) => { + console.log(error); + } + } + + public sendJsonText() { + if (this.jsonText.length > 0) { + this.appsService.createApplicationDTO(JSON.parse(this.jsonText)).subscribe(result => { + console.log('uploaded', result); + this.modal.hide(); + this.router.navigate(['admin/apps/view/', result.id]) + }, + error => { + console.log(error) + this.error = error.message + }) + + } + } + + public show() { + this.modal.show(); + } + + +} diff --git a/src/app/appmarket/appmanagement/app-add-json-version-app/app-add-json-version-app.component.css b/src/app/appmarket/appmanagement/app-add-json-version-app/app-add-json-version-app.component.css new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/src/app/appmarket/appmanagement/app-add-json-version-app/app-add-json-version-app.component.html b/src/app/appmarket/appmanagement/app-add-json-version-app/app-add-json-version-app.component.html new file mode 100644 index 0000000000000000000000000000000000000000..3efb28f34a6f47d78edef81668159683208e3a8a --- /dev/null +++ b/src/app/appmarket/appmanagement/app-add-json-version-app/app-add-json-version-app.component.html @@ -0,0 +1,35 @@ +<nmaas-modal style="width: 600px; height: 800px"> + <div class="nmaas-modal-header">{{ 'APPS_MANAGEMENT.ADD_JSON_version'| translate}}</div> + <div class="nmaas-modal-body"> + <div style="margin-bottom: 10px"> + {{ 'APPS_MANAGEMENT.ADD_JSON_INFO'| translate}} + </div> + <div style="margin-bottom: 4rem"> + <p-fileUpload name="json" (onUpload)="onUpload($event)" customUpload="true" [draggable]="true" + (uploadHandler)="onUpload($event)" [multiple]="false" accept=".json" maxFileSize="1000000"> + + </p-fileUpload> + </div> + <div> + <div style="margin-bottom: 10px"> + {{ 'APPS_MANAGEMENT.ADD_JSON_TEXTAREA'| translate}} + </div> + <textarea rows="10" cols="100" pInputTextarea [(ngModel)]="jsonText"></textarea> + </div> + <div class="flex flex-row justify-content-center justify-content-center mt-2"> + <button *ngIf="jsonText.length >0" pButton class="btn btn-success" + (click)="sendJsonText()"> {{'APPS_MANAGEMENT.SEND_JSON' | translate}}</button> + </div> + + <div *ngIf="error.length > 0" style="color: indianred"> + {{error}} + </div> + + + </div> + <div class="nmaas-modal-footer"> + <button type="button" class="btn btn-default" (click)="modal.hide()"> + {{'APP_CHANGE_STATE_MODAL.CANCEL_BUTTON' | translate}} + </button> + </div> +</nmaas-modal> diff --git a/src/app/appmarket/appmanagement/app-add-json-version-app/app-add-json-version-app.component.spec.ts b/src/app/appmarket/appmanagement/app-add-json-version-app/app-add-json-version-app.component.spec.ts new file mode 100644 index 0000000000000000000000000000000000000000..17907bbf9d0b2fc284f0a0208aa8cf2639758fc7 --- /dev/null +++ b/src/app/appmarket/appmanagement/app-add-json-version-app/app-add-json-version-app.component.spec.ts @@ -0,0 +1,38 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AppAddJsonVersionAppComponent } from './app-add-json-version-app.component'; +import {HttpClientTestingModule} from '@angular/common/http/testing'; +import {RouterTestingModule} from '@angular/router/testing'; +import {TranslateFakeLoader, TranslateLoader, TranslateModule} from '@ngx-translate/core'; + +describe('AppAddJsonVersionAppComponent', () => { + let component: AppAddJsonVersionAppComponent; + let fixture: ComponentFixture<AppAddJsonVersionAppComponent>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ AppAddJsonVersionAppComponent ], + imports: [ + HttpClientTestingModule, + RouterTestingModule, + TranslateModule.forRoot({ + loader: { + provide: TranslateLoader, + useClass: TranslateFakeLoader + } + }), + ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(AppAddJsonVersionAppComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/appmarket/appmanagement/app-add-json-version-app/app-add-json-version-app.component.ts b/src/app/appmarket/appmanagement/app-add-json-version-app/app-add-json-version-app.component.ts new file mode 100644 index 0000000000000000000000000000000000000000..49986732502c852119bb74b905ddb4fd239b3bcd --- /dev/null +++ b/src/app/appmarket/appmanagement/app-add-json-version-app/app-add-json-version-app.component.ts @@ -0,0 +1,73 @@ +import {Component, EventEmitter, OnInit, Output, ViewChild} from '@angular/core'; +import {ModalComponent} from '../../../shared'; +import {AppsService} from '../../../service'; +import {Router} from '@angular/router'; + +@Component({ + selector: 'app-app-add-json-version-app', + templateUrl: './app-add-json-version-app.component.html', + styleUrls: ['./app-add-json-version-app.component.css'] +}) +export class AppAddJsonVersionAppComponent implements OnInit { + + @ViewChild(ModalComponent, { static: true }) + public readonly modal: ModalComponent; + + public jsonText = ''; + public error = ''; + + @Output() + public refresh: EventEmitter<boolean> = new EventEmitter<boolean>(); + + + constructor(private readonly appsService: AppsService, + private readonly router: Router) { } + + + ngOnInit(): void { + } + + onUpload(event: any) { + console.log(event); + const file = event.files[0]; + console.log(file); + const fileReader = new FileReader(); + fileReader.readAsText(file); + fileReader.onload = () => { + if (typeof fileReader.result === 'string') { + console.log(JSON.parse(fileReader.result)); + this.appsService.createApplication(JSON.parse(fileReader.result)).subscribe(result => { + console.log('uploaded', result); + this.modal.hide(); + this.refresh.emit(true); + }, + error => { + console.log(error) + this.error = error.message + }) + } + } + fileReader.onerror = (error) => { + console.log(error); + } + } + + public sendJsonText() { + if (this.jsonText.length > 0) { + this.appsService.createApplication(JSON.parse(this.jsonText)).subscribe(result => { + console.log('uploaded', result); + this.modal.hide(); + this.refresh.emit(true); + }, + error => { + console.log(error) + this.error = error.message + }) + + } + } + + public show() { + this.modal.show(); + } +} diff --git a/src/app/appmarket/appmanagement/app-management-list/appmanagementlist.component.html b/src/app/appmarket/appmanagement/app-management-list/appmanagementlist.component.html index 4767380305f5cd5f8d62379562185d16560163ef..fdbd33019ce3cd308cfc5074860b1514eecc1595 100644 --- a/src/app/appmarket/appmanagement/app-management-list/appmanagementlist.component.html +++ b/src/app/appmarket/appmanagement/app-management-list/appmanagementlist.component.html @@ -1,6 +1,8 @@ <div class="col-sm-12 col-sm-offset-1 col-sm 10 col-md-offset-1 col-md-10"> <h3>{{'APPS_MANAGEMENT.TITLE'| translate}}</h3> <button [routerLink]="['/admin/apps/create']" class="btn btn-primary">{{ 'APPS_MANAGEMENT.ADD_BUTTON' | translate }}</button> + <button (click)="appAddJson.show()" class="btn btn-primary" style="margin-left: 10px">{{ 'APPS_MANAGEMENT.ADD_BUTTON' | translate }} (JSON)</button> + <hr> <table class="table table-hover table-condensed" aria-describedby="Apps management table"> <thead> @@ -34,6 +36,9 @@ </li> <li> <a [routerLink]="['/admin/apps/create/version', app?.name]">{{ 'APPS_MANAGEMENT.ADD_NEW_VERSION_BUTTON' | translate }}</a> + </li> + <li> + <a (click)="appAddJsonVersion.show()" >{{ 'APPS_MANAGEMENT.ADD_NEW_VERSION_BUTTON' | translate }} (JSON)</a> </li> <li> <a [routerLink]="['/admin/apps/edit', app?.id]">{{ 'APPS_MANAGEMENT.EDIT_BUTTON' | translate }}</a> @@ -77,3 +82,11 @@ <app-appchangestatemodal [appName]="selectedAppName" [app]="selectedVersion"></app-appchangestatemodal> <app-app-change-owner-modal #appChangeOwnerModal></app-app-change-owner-modal> + +<app-app-add-json-app #appAddJson></app-app-add-json-app> + +<app-app-add-json-version-app #appAddJsonVersion (refresh)="refresh()"></app-app-add-json-version-app> + +<app-app-add-json-app #appAddJson></app-app-add-json-app> + +<app-app-add-json-version-app #appAddJsonVersion (refresh)="refresh()"></app-app-add-json-version-app> diff --git a/src/app/appmarket/appmanagement/app-management-list/appmanagementlist.component.ts b/src/app/appmarket/appmanagement/app-management-list/appmanagementlist.component.ts index 150488fd8571ac0fbac6aeb5bde11d69b53a4d60..be91ee2cf3bb1cac042213cca229b0e17bab868c 100644 --- a/src/app/appmarket/appmanagement/app-management-list/appmanagementlist.component.ts +++ b/src/app/appmarket/appmanagement/app-management-list/appmanagementlist.component.ts @@ -19,6 +19,7 @@ export class AppManagementListComponent implements OnInit { @ViewChild(AppChangeStateModalComponent, { static: true }) public appChangeStateModalComponent: AppChangeStateModalComponent; + public selectedAppName = ''; public selectedVersion: ApplicationVersion = new ApplicationVersion(); @@ -32,28 +33,7 @@ export class AppManagementListComponent implements OnInit { } ngOnInit() { - this.appsService.getAllApplicationBase().pipe( - map(apps => { - return apps - .map(app => { - // filter out deleted app versions - app.versions = app.versions.filter(av => parseApplicationState(av.state) !== ApplicationState.DELETED) - return app - }) - // filter out apps with no versions - .filter(app => app.versions.length >= 1) - // sort by lowercase name - .sort((a, b) => { - if (a.name.toLowerCase() === b.name.toLowerCase()) { - return 0; - } - return (a.name.toLowerCase() > b.name.toLowerCase()) ? 1 : -1; - }) - }) - ).subscribe(val => { - this.apps = val; - this.versionRowVisible = new Array(val.length).fill(false); - }); + this.refresh(); } public getStateAsString(state: any): string { @@ -83,4 +63,29 @@ export class AppManagementListComponent implements OnInit { return semver.compare(semver.coerce(a.version) || '0.0.0', semver.coerce(b.version) || '0.0.0') } + public refresh() { + this.appsService.getAllApplicationBase().pipe( + map(apps => { + return apps + .map(app => { + // filter out deleted app versions + app.versions = app.versions.filter(av => parseApplicationState(av.state) !== ApplicationState.DELETED) + return app + }) + // filter out apps with no versions + .filter(app => app.versions.length >= 1) + // sort by lowercase name + .sort((a, b) => { + if (a.name.toLowerCase() === b.name.toLowerCase()) { + return 0; + } + return (a.name.toLowerCase() > b.name.toLowerCase()) ? 1 : -1; + }) + }) + ).subscribe(val => { + this.apps = val; + this.versionRowVisible = new Array(val.length).fill(false); + }); + } + } diff --git a/src/app/appmarket/appmanagement/app-management.module.ts b/src/app/appmarket/appmanagement/app-management.module.ts index 1cc5c3f2263f94cc4de6c45f921fa586f56ce520..dad77eb77c97692b890f24965a803234dab0a164 100644 --- a/src/app/appmarket/appmanagement/app-management.module.ts +++ b/src/app/appmarket/appmanagement/app-management.module.ts @@ -28,6 +28,9 @@ import {TabViewModule} from 'primeng/tabview'; import { AppChangeOwnerModalComponent } from './app-change-owner-modal/app-change-owner-modal.component'; import {TooltipModule} from 'primeng/tooltip'; import {DropdownModule} from 'primeng/dropdown'; +import { AppAddJsonAppComponent } from './app-add-json-app/app-add-json-app.component'; +import {InputTextareaModule} from 'primeng/inputtextarea'; +import { AppAddJsonVersionAppComponent } from './app-add-json-version-app/app-add-json-version-app.component'; export function getJsonTemplates(config: ConfigTemplateService) { @@ -53,7 +56,9 @@ export function formioAppConfigFactory(appConfig: AppConfigService) { AppStorageVolumeEditComponent, AppStaticGlobalDeployParametersEditComponent, JsonEditComponent, - AppChangeOwnerModalComponent + AppChangeOwnerModalComponent, + AppAddJsonAppComponent, + AppAddJsonVersionAppComponent ], imports: [ CommonModule, @@ -73,7 +78,8 @@ export function formioAppConfigFactory(appConfig: AppConfigService) { ReactiveFormsModule, TabViewModule, TooltipModule, - DropdownModule + DropdownModule, + InputTextareaModule ], exports: [], providers: [