diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 1730c9fadbd3c6c136d68c3053a8d4233149eb7b..e1a7452124a4cad22aecce1e5085ab73c4029cf6 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -9,6 +9,7 @@ import { MatCardModule } from '@angular/material/card'; import { MatInputModule } from '@angular/material/input'; import { MatDialogModule } from '@angular/material/dialog'; import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; +import { MatSelectModule } from '@angular/material/select'; import { RepositoryComponent } from './repository/repository.component'; import { AccessapiComponent } from './accessapi/accessapi.component'; @@ -18,7 +19,7 @@ import { SettingsmartapiComponent } from './settingsmartapi/settingsmartapi.comp import { UserComponent } from './user/user.component'; import { ReactiveFormsModule } from '@angular/forms'; -import {FormsModule} from '@angular/forms'; +import { FormsModule } from '@angular/forms'; import { RepositoryinfoComponent } from './repositoryinfo/repositoryinfo.component'; @@ -29,7 +30,7 @@ import { PublishApiComponent } from './publishapi/publishapi.component'; import { SearchComponent } from './search/search.component' import { ParseXmlService } from './services/parse-xml.service'; import { AuthenticationModule } from './authentication/authentication.module'; -import { SearchModule} from './search/search.module'; +import { SearchModule } from './search/search.module'; import { StatsComponent } from './stats/stats.component'; import { MappingComponent } from './mapping/mapping.component'; import { NebularModule } from './nebular.module'; @@ -61,8 +62,7 @@ import { NbDialogModule } from '@nebular/theme'; DashboardComponent, MappingComponent, DatasetsDialogComponent, - - ], + ], imports: [ BrowserModule, BrowserAnimationsModule, @@ -72,6 +72,7 @@ import { NbDialogModule } from '@nebular/theme'; MatInputModule, MatDialogModule, MatProgressSpinnerModule, + MatSelectModule, FormsModule, ReactiveFormsModule, HttpClientModule, @@ -79,7 +80,7 @@ import { NbDialogModule } from '@nebular/theme'; SearchModule, AppRoutingModule, AuthenticationModule, - NebularModule, + NebularModule, BrowserAnimationsModule, NbThemeModule.forRoot({ name: 'default' }), NbLayoutModule, @@ -91,21 +92,22 @@ import { NbDialogModule } from '@nebular/theme'; NbListModule, NbAccordionModule, NbToastrModule.forRoot(), - NbDialogModule.forRoot() + NbDialogModule.forRoot(), ], providers: [ AppConfiguration, ParseXmlService, { - provide: APP_INITIALIZER, - useFactory: AppConfigurationFactory, - deps: [AppConfiguration, HttpClient], multi: true }, + provide: APP_INITIALIZER, + useFactory: AppConfigurationFactory, + deps: [AppConfiguration, HttpClient], multi: true + }, ], bootstrap: [AppComponent] }) export class AppModule { } export function AppConfigurationFactory(appConfig: AppConfiguration) { - return () => appConfig.ensureInit(); - } + return () => appConfig.ensureInit(); +} diff --git a/src/app/datasets/datasets-dialog/datasets-dialog.component.html b/src/app/datasets/datasets-dialog/datasets-dialog.component.html index df8cf6e987dd0f3f9796ce0f54f4be86d254050f..3adf474ed50b184e6402a4b006c38ec5c976101a 100644 --- a/src/app/datasets/datasets-dialog/datasets-dialog.component.html +++ b/src/app/datasets/datasets-dialog/datasets-dialog.component.html @@ -1,13 +1,13 @@ -<nb-card nbSpinnerSize="giant"> - <nb-card-header>Select dataset id</nb-card-header> - <nb-card-body> - <nb-select multiple [(selected)]="datasetIdSelected"> - <nb-option *ngFor="let id of datasetId" [value]="id">{{id}}</nb-option> - </nb-select> +<h1 mat-dialog-title>Select dataset id</h1> +<div mat-dialog-content> + <mat-form-field appearance="fill"> + <mat-select multiple [(ngModel)]="datasetIdSelected"> + <mat-option *ngFor="let id of data.datasetId" [value]="id">{{id}}</mat-option> + </mat-select> + </mat-form-field> - <div> - <button nbButton status="danger" (click)="closeDialog()">Prev</button> - <button nbButton (click)="onClickNext()" [disabled]="datasetIdSelected.length === 0">Next</button> - </div> - </nb-card-body> -</nb-card> \ No newline at end of file + <div> + <button nbButton status="danger" (click)="closeDialog()">Prev</button> + <button nbButton (click)="onClickNext()" [disabled]="datasetIdSelected.length === 0">Next</button> + </div> +</div> \ No newline at end of file diff --git a/src/app/datasets/datasets-dialog/datasets-dialog.component.scss b/src/app/datasets/datasets-dialog/datasets-dialog.component.scss index f0de5e5bd3a2adf7d60c616c2a754ec970c08316..4fb7f779608c4e0a0ca4a365f29bc14746015ab6 100644 --- a/src/app/datasets/datasets-dialog/datasets-dialog.component.scss +++ b/src/app/datasets/datasets-dialog/datasets-dialog.component.scss @@ -2,3 +2,11 @@ button { margin-right: 5px; margin-top: 5px; } + +mat-form-field { + width: 100%; +} + +h1 { + font-size: 25px; +} \ No newline at end of file diff --git a/src/app/datasets/datasets-dialog/datasets-dialog.component.ts b/src/app/datasets/datasets-dialog/datasets-dialog.component.ts index ab1ee55dea347746f2b61548a22b3423ba7d657f..1de59498e9dc45e11b5db47014bf96fc3ee9017c 100644 --- a/src/app/datasets/datasets-dialog/datasets-dialog.component.ts +++ b/src/app/datasets/datasets-dialog/datasets-dialog.component.ts @@ -1,5 +1,9 @@ -import { Component, OnInit } from '@angular/core'; -import { NbDialogRef } from '@nebular/theme'; +import { Component, Inject, OnInit } from '@angular/core'; +import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; + +interface DialogData { + datasetId: number[]; +} @Component({ selector: 'app-datasets-dialog', @@ -8,23 +12,23 @@ import { NbDialogRef } from '@nebular/theme'; }) export class DatasetsDialogComponent implements OnInit { - datasetId: number[]; datasetIdSelected: number[] = []; constructor( - private dialog: NbDialogRef<DatasetsDialogComponent> + public dialogRef: MatDialogRef<DatasetsDialogComponent>, + @Inject(MAT_DIALOG_DATA) public data: DialogData, ) { } ngOnInit() { - this.datasetIdSelected = [...this.datasetId]; + this.datasetIdSelected = [...this.data.datasetId]; } onClickNext() { - this.dialog.close(this.datasetIdSelected); + this.dialogRef.close(this.datasetIdSelected); } closeDialog() { - this.dialog.close([]); + this.dialogRef.close([]); } } diff --git a/src/app/datasets/datasets.component.html b/src/app/datasets/datasets.component.html index 932de6059a34248ecdb63497f8eb4c21d831fc0d..6a790148a033cb2feced2cdde114fe7e4f14537b 100644 --- a/src/app/datasets/datasets.component.html +++ b/src/app/datasets/datasets.component.html @@ -1,41 +1,42 @@ -<div [nbSpinner]="loading" nbSpinnerSize="giant"> - <h6><strong>Repository : </strong>{{urlRepo}} - </h6> +<h6><strong>Repository : </strong>{{urlRepo}} +</h6> - <nb-card *ngFor="let path of openApi.paths"> - <nb-card-header>{{path.pathName}}</nb-card-header> - <nb-accordion> - <nb-accordion-item *ngFor="let request of path.requests"> - <nb-accordion-item-header>{{request.summary}}</nb-accordion-item-header> - <nb-accordion-item-body> - <strong>Parameters</strong> - <nb-list> - <nb-list-item *ngFor="let parameter of request.parameters"> - <label>{{parameter.name}}</label><input nbInput - *ngIf="values.has(path.pathName) && values.get(path.pathName).has(request.httpmethod) && values.get(path.pathName).get(request.httpmethod).has(parameter.name)" - [ngModel]="values.get(path.pathName).get(request.httpmethod).get(parameter.name).value" - (ngModelChange)="values.get(path.pathName).get(request.httpmethod).get(parameter.name).value = $event" /> - </nb-list-item> - </nb-list> - <button class="launch-button" (click)="launchRequest(path.pathName, request.httpmethod, true)">Launch</button> - <div class="preview" [nbSpinner]="spinners.get(path.pathName)"> - <ng-container *ngIf="spinners.get(path.pathName); else preview"></ng-container> - <ng-template #preview> - <ng-container *ngIf="request.tags != null && request.tags.length > 0"> - <pre *ngIf="request.tags[0] === tagEnum.dataset">{{ previews.get(path.pathName)|json}}</pre> - <ul *ngIf="request.tags[0] === tagEnum.search"> - <li *ngFor="let datasetId of previews.get(path.pathName)">{{datasetId}}</li> - </ul> - </ng-container> - </ng-template> - </div> - </nb-accordion-item-body> - </nb-accordion-item> - </nb-accordion> - </nb-card> +<nb-card *ngFor="let path of openApi.paths"> + <nb-card-header>{{path.pathName}}</nb-card-header> + <nb-accordion> + <nb-accordion-item *ngFor="let request of path.requests"> + <nb-accordion-item-header>{{request.summary}}</nb-accordion-item-header> + <nb-accordion-item-body> + <strong>Parameters</strong> + <nb-list> + <nb-list-item *ngFor="let parameter of request.parameters"> + <label>{{parameter.name}}</label><input nbInput + *ngIf="values.has(path.pathName) && values.get(path.pathName).has(request.httpmethod) && values.get(path.pathName).get(request.httpmethod).has(parameter.name)" + [ngModel]="values.get(path.pathName).get(request.httpmethod).get(parameter.name).value" + (ngModelChange)="values.get(path.pathName).get(request.httpmethod).get(parameter.name).value = $event" /> + </nb-list-item> + </nb-list> + <button class="launch-button" (click)="launchRequest(path.pathName, request.httpmethod, true)">Launch</button> + <div class="preview" [nbSpinner]="spinners.get(path.pathName)"> + <ng-container *ngIf="spinners.get(path.pathName); else preview"></ng-container> + <ng-template #preview> + <ng-container *ngIf="request.tags != null && request.tags.length > 0"> + <pre *ngIf="request.tags[0] === tagEnum.dataset">{{ previews.get(path.pathName)|json}}</pre> + <ul *ngIf="request.tags[0] === tagEnum.search"> + <li *ngFor="let datasetId of previews.get(path.pathName)">{{datasetId}}</li> + </ul> + </ng-container> + </ng-template> + </div> + </nb-accordion-item-body> + </nb-accordion-item> + </nb-accordion> +</nb-card> +<div *ngIf="loading" class="overlay"> + <mat-spinner class="spinner"> + </mat-spinner> </div> - <!-- <form> <div> diff --git a/src/app/datasets/datasets.component.scss b/src/app/datasets/datasets.component.scss index 02ce6f8b9c40b9c129fb8e041d97ac9f29e57c89..37bfe02d69da11212264d1be6e3950a9f0b65d29 100644 --- a/src/app/datasets/datasets.component.scss +++ b/src/app/datasets/datasets.component.scss @@ -13,4 +13,21 @@ label { margin-top: 5px; max-height: 500px; min-height: 30px; -} \ No newline at end of file +} + +.overlay { + position: fixed; + display: block; + width: 100%; + height: 100%; + top: 0; + left: 0; + z-index: 99999; +} + +.spinner { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} diff --git a/src/app/datasets/datasets.component.ts b/src/app/datasets/datasets.component.ts index ed22817a8e37cfa43af213dbc05f2a77313413ab..f80db3dc76d9ea9eb84f546c6fb3d98a77aefcaf 100644 --- a/src/app/datasets/datasets.component.ts +++ b/src/app/datasets/datasets.component.ts @@ -4,8 +4,9 @@ import { OpenApi } from '../publishapi/class/openapi'; import { ParameterType } from '../publishapi/class/openapi-enum'; import { OpenApiTag } from '../publishapi/class/openapi-dto'; import { environment } from 'src/environments/environment.prod'; -import { NbDialogService, NbStepperComponent } from '@nebular/theme'; +import { NbStepperComponent } from '@nebular/theme'; import { DatasetsDialogComponent } from './datasets-dialog/datasets-dialog.component'; +import { MatDialog } from '@angular/material/dialog'; interface RequestInfo { value?: string; @@ -47,7 +48,7 @@ export class DatasetsComponent implements OnInit, OnChanges { constructor( private dataSetService: DatasetCrudService, - private dialogService: NbDialogService + public dialog: MatDialog ) { } get urlRepo() { @@ -289,23 +290,20 @@ export class DatasetsComponent implements OnInit, OnChanges { } private getListFromDialog(searchRequestPathName: string, searchRequestHttpMethod: string, - datasetRequestPathName: string, datasetRequestHttpMethod: string) { + datasetRequestPathName: string, datasetRequestHttpMethod: string) { this.launchRequest(searchRequestPathName, searchRequestHttpMethod, false).then((response) => { - this.dialogService.open(DatasetsDialogComponent, { - context: { + this.dialog.open(DatasetsDialogComponent, { + data: { datasetId: response }, - closeOnBackdropClick: false, - closeOnEsc: false, - autoFocus: true, - }).onClose.subscribe({ + }).afterClosed().subscribe({ next: (datasetId) => this.onCloseDatasetDialog(datasetRequestPathName, datasetRequestHttpMethod, datasetId) }); }).finally(() => this.loading = false); } private onCloseDatasetDialog(datasetRequestPathName: string, datasetRequestHttpMethod: string, datasetId: number[]) { - if (datasetId.length === 0) { + if (datasetId == null || datasetId.length === 0) { this.ready = false; return; } diff --git a/src/app/repository/repository.component.html b/src/app/repository/repository.component.html index c2581dd218b46d695eda5049e0944baa4a8e6016..a864d608ec004ff05ac816e59b2fad4884c330c3 100644 --- a/src/app/repository/repository.component.html +++ b/src/app/repository/repository.component.html @@ -42,7 +42,7 @@ </div> <div> <br> - <button type="submit" (click)="publishCatalog()" class="btn btn-success">Publish catalog description in FDP</button> + <button type="submit" (click)="publishCatalog()" class="btn btn-success" [disabled]="!Form.valid">Publish catalog description in FDP</button> </div> </form>