MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

styling

This commit is contained in:
Sofia Papacharalampous 2024-07-01 16:20:56 +03:00
parent f7c1e56ee1
commit a4bf15aded
1 changed files with 33 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
dmp-frontend/src/app/ui/dmp/new/upload-dialogue/dmp-upload-dialog.component.html
View File

@ -7,13 +7,15 @@
<mat-icon>close</mat-icon> <mat-icon>close</mat-icon>
</div> </div>
</div> </div>
<div class=""> </div>
<div class="upload-form col-12 pr-0 pl-0"> <mat-dialog-content class="container-fluid confirmation-dialog">
<div class="row">
<div class="upload-form col-12">
<mat-form-field class="w-100" *ngIf="files?.length == 0 || files[0].type.includes('/xml')"> <mat-form-field class="w-100" *ngIf="files?.length == 0 || files[0].type.includes('/xml')">
<input [(ngModel)]="dmpTitle" matInput placeholder="{{'DMP-UPLOAD.PLACEHOLDER' | translate}}"> <input [(ngModel)]="dmpTitle" matInput placeholder="{{'DMP-UPLOAD.PLACEHOLDER' | translate}}">
</mat-form-field> </mat-form-field>
</div> </div>
<div class="col-12 pr-0 pl-0"> <div class="col-12">
<ngx-dropzone class="drop-file" (change)="selectFile($event)" [accept]="'text/xml, application/json'" [multiple]="false"> <ngx-dropzone class="drop-file" (change)="selectFile($event)" [accept]="'text/xml, application/json'" [multiple]="false">
<ngx-dropzone-preview class="file-preview" *ngFor="let f of files" [removable]="true" (removed)="onRemove(f)"> <ngx-dropzone-preview class="file-preview" *ngFor="let f of files" [removable]="true" (removed)="onRemove(f)">
<ngx-dropzone-label class="file-label">{{ f.name }}</ngx-dropzone-label> <ngx-dropzone-label class="file-label">{{ f.name }}</ngx-dropzone-label>
@ -30,11 +32,11 @@
<input class="hidden" #fileInput type="file" onClick="this.form.reset()" (change)="uploadFile($event)" accept="text/xml, application/json"> <input class="hidden" #fileInput type="file" onClick="this.form.reset()" (change)="uploadFile($event)" accept="text/xml, application/json">
</form> </form>
</div> </div>
<div class="upload-form col-12 pr-0 pl-0" *ngIf="formGroup == null && files.length > 0 && files[0].type.includes('/json')"> <div class="upload-form col-12" *ngIf="formGroup == null && files.length > 0 && files[0].type.includes('/json')">
{{ 'DMP-UPLOAD.ANALYZING-FILE' | translate }} {{ 'DMP-UPLOAD.ANALYZING-FILE' | translate }}
<b class="fa fa-spinner fa-spin" ></b> <b class="fa fa-spinner fa-spin" ></b>
</div> </div>
<div class="upload-form col-12 pr-0 pl-0" *ngIf="formGroup && files.length > 0 && files[0].type.includes('/json')"> <div class="upload-form col-12" *ngIf="formGroup && files.length > 0 && files[0].type.includes('/json')">
<mat-form-field class="w-100"> <mat-form-field class="w-100">
<input [formControl]="formGroup.get('label')" matInput required="true" placeholder="{{'DMP-UPLOAD.PLACEHOLDER' | translate}}"> <input [formControl]="formGroup.get('label')" matInput required="true" placeholder="{{'DMP-UPLOAD.PLACEHOLDER' | translate}}">
</mat-form-field> </mat-form-field>
@ -44,25 +46,31 @@
</mat-form-field> </mat-form-field>
<ng-container *ngIf="formGroup.get('blueprintId').value"> <ng-container *ngIf="formGroup.get('blueprintId').value">
<div *ngFor="let description of formGroup.get('descriptions').controls; let descriptionIndex=index;" class="row mb-3"> <div *ngFor="let description of formGroup.get('descriptions').controls; let descriptionIndex=index;" class="row mb-3">
<span *ngIf="description.get('label').value" style="font-size: 1rem;"> <div class="col-12">
{{ description.get('label').value }} <span *ngIf="description.get('label').value" style="font-size: 1rem;">
</span> {{ description.get('label').value }}
<mat-form-field class="w-100"> </span>
<mat-label>{{'DMP-UPLOAD.FIELDS.DESCRIPTION-TEMPLATE' | translate}}</mat-label> </div>
<app-single-auto-complete required="true" placeholder="{{'DMP-UPLOAD.FIELDS.DESCRIPTION-TEMPLATE-PLACHOLDER' | translate}}" [formControl]="description.get('templateId')" [configuration]="descriptionTemplateSingleAutocompleteConfiguration"></app-single-auto-complete> <div class="col-12">
<mat-error *ngIf="description.get('templateId').hasError('backendError')">{{description.get('templateId').getError('backendError').message}}</mat-error> <mat-form-field class="w-100">
<mat-error *ngIf="description.get('templateId').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-label>{{'DMP-UPLOAD.FIELDS.DESCRIPTION-TEMPLATE' | translate}}</mat-label>
</mat-form-field> <app-single-auto-complete required="true" placeholder="{{'DMP-UPLOAD.FIELDS.DESCRIPTION-TEMPLATE-PLACHOLDER' | translate}}" [formControl]="description.get('templateId')" [configuration]="descriptionTemplateSingleAutocompleteConfiguration"></app-single-auto-complete>
<mat-form-field class="w-100"> <mat-error *ngIf="description.get('templateId').hasError('backendError')">{{description.get('templateId').getError('backendError').message}}</mat-error>
<mat-label>{{'DMP-UPLOAD.FIELDS.SECTION' | translate}}</mat-label> <mat-error *ngIf="description.get('templateId').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-select [formControl]="description.get('sectionId')" placeholder="{{'DMP-UPLOAD.FIELDS.SECTION-PLACEHOLDER' | translate}}"> </mat-form-field>
<mat-option *ngFor="let section of selectedBlueprintSections" [value]="section.id"> </div>
<span style="font-size: 1rem;"> <div class="col-12">
{{ section.label }} <mat-form-field class="w-100">
</span> <mat-label>{{'DMP-UPLOAD.FIELDS.SECTION' | translate}}</mat-label>
</mat-option> <mat-select [formControl]="description.get('sectionId')" placeholder="{{'DMP-UPLOAD.FIELDS.SECTION-PLACEHOLDER' | translate}}">
</mat-select> <mat-option *ngFor="let section of selectedBlueprintSections" [value]="section.id">
</mat-form-field> <span style="font-size: 1rem;">
{{ section.label }}
</span>
</mat-option>
</mat-select>
</mat-form-field>
</div>
</div> </div>
</ng-container> </ng-container>
</div> </div>
@ -78,4 +86,4 @@
</div> </div>
</div> </div>
</div> </div>
</div> </mat-dialog-content>