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

Refactor composite Title, description and delete button for improved styling

This commit is contained in:
George Kalampokis 2020-02-03 17:50:18 +02:00
parent eafcf80e10
commit 47650abfa0
9 changed files with 140 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
dmp-frontend/src/app/ui/language-editor/language-editor.component.html
View File

@ -1,26 +1,26 @@
<div *ngIf="parseFinished" class="language-editor">
<form (ngSubmit)="updateLang()" [formGroup]="formGroup">
<div class="row">
<mat-card class="col-md-8 offset-md-2">
<mat-card-title><div [innerHTML]="currentLang"></div></mat-card-title>
<mat-card-content>
<div *ngFor="let key of keys">
<mat-form-field >
<mat-label>{{key}} :</mat-label>
<textarea matInput class="language-area"
[formControl]="formGroup.get(key)"
cdkTextareaAutosize
#autosize="cdkTextareaAutosize"
cdkAutosizeMinRows="1"
cdkAutosizeMaxRows="5"></textarea>
</mat-form-field >
</div>
</mat-card-content>
</mat-card>
<button mat-fab class="mat-fab-bottom-right save-btn" type="submit">
<mat-icon class="mat-24" title="save">save</mat-icon>
</button>
</div>
<div class="row">
<mat-card class="col-md-8 offset-md-2">
<mat-card-title><div [innerHTML]="currentLang"></div></mat-card-title>
<mat-card-content>
<div *ngFor="let key of keys">
<mat-form-field >
<mat-label>{{key}} :</mat-label>
<textarea matInput class="language-area"
[formControl]="formGroup.get(key)"
cdkTextareaAutosize
#autosize="cdkTextareaAutosize"
cdkAutosizeMinRows="1"
cdkAutosizeMaxRows="5"></textarea>
</mat-form-field >
</div>
</mat-card-content>
</mat-card>
<button mat-fab class="mat-fab-bottom-right save-btn" type="submit">
<mat-icon class="mat-24" title="save">save</mat-icon>
</button>
</div>
</form>
</form>
</div>

86
dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-field/form-composite-field.component.html
View File

@ -2,25 +2,20 @@
<div *ngIf="form.get('fields').length === 1 && this.visibilityRulesService.checkElementVisibility(form.get('fields')['controls'][0].get('id').value)" class="col-12">
<div class="row">
<h5 *ngIf="form.get('title').value && !isChild" class="col-auto copositeField toc-copositeField-header" [id]="this.form.get('id').value">
{{form.get('numbering').value}}
{{form.get('title').value}}
<!-- <a *ngIf="this.markForConsiderationService.exists(compositeField)" (click)="markForConsideration()" style="cursor: pointer">
Mark For Consideration
</a> -->
</h5>
<mat-icon class="col-auto" *ngIf="this.form.get('additionalInformation').value && !isChild"
matTooltip="{{this.form.get('additionalInformation').value}}">info</mat-icon>
<h6 *ngIf="form.get('description').value && !isChild" class="col-12">{{form.get('description').value}}</h6>
<h6 *ngIf="form.get('extendedDescription').value && !isChild" class="col-12">
<i>{{form.get('extendedDescription').value}}</i>
</h6>
<app-form-field class="col-12" [form]="form.get('fields')['controls'][0]"
[datasetProfileId]="datasetProfileId" [isChild]="isChild"></app-form-field>
<div class="col-12">
<app-form-composite-title class="row" [form]="form" [isChild]="isChild"></app-form-composite-title>
</div>
<div class="col-12">
<div class="row">
<app-form-field class="align-self-center col" [form]="form.get('fields')['controls'][0]"
[datasetProfileId]="datasetProfileId" [isChild]="isChild"></app-form-field>
<div *ngIf="showDelete" class="col-auto align-self-center">
<button mat-icon-button type="button" class="deleteBtn" (click)="deleteCompositeField();">
<mat-icon>delete</mat-icon>
</button>
</div>
</div>
</div>
<!-- <button mat-icon-button type="button" *ngIf="!isChild" class="deleteBtn col-auto" (click)="DeleteField();">
<mat-icon>delete</mat-icon>
</button> -->
@ -29,33 +24,34 @@
</div>
<div *ngIf="form.get('fields').length > 1" class="col-12">
<div class="row">
<h5 *ngIf="form.get('title').value && !isChild" class="col-auto copositeField toc-copositeField-header" [id]="this.form.get('id').value">
{{form.get('numbering').value}}
{{form.get('title').value}}</h5>
<mat-icon class="col-auto" *ngIf="this.form.get('additionalInformation').value && !isChild"
matTooltip="{{this.form.get('additionalInformation').value}}">info</mat-icon>
<h6 *ngIf="form.get('description').value && !isChild" class="col-12">{{form.get('description').value}}</h6>
<h6 *ngIf="form.get('extendedDescription').value && !isChild" class="col-12">
<i>{{form.get('extendedDescription').value}}</i></h6>
<div *ngFor="let fieldFormGroup of form.get('fields')['controls']; let i = index;" class="col-12">
<!-- <div class="row">
<div class="col-12" *ngIf="(fieldFormGroup.get('multiplicity')?.value?.max - 1) > (fieldFormGroup.get('multiplicityItems')?.length)">
<a (click)="addMultipleField(i+1)" style="cursor: pointer">
Add one more field +
</a>
</div> -->
<app-form-field [form]="fieldFormGroup" class="col-12" [datasetProfileId]="datasetProfileId"
[isChild]="true"></app-form-field>
<!-- <div *ngIf="fieldFormGroup" class="col-12">
<div *ngFor="let multipleField of fieldFormGroup.get('multiplicityItems')['controls']; let j = index" class="row">
<app-form-field class="col-12" [form]="multipleField" [datasetProfileId]="datasetProfileId" [isChild]="true"></app-form-field>
<button mat-icon-button type="button" *ngIf="isChild" class="deleteBtn col-auto" (click)="DeleteField(i);">
<mat-icon>delete</mat-icon>
</button>
<div class="col-12">
<app-form-composite-title class="row" [form]="form" [isChild]="isChild"></app-form-composite-title>
</div>
<div class="col align-self-center">
<div *ngFor="let fieldFormGroup of form.get('fields')['controls']; let i = index;" class="col-12 copositeField">
<!-- <div class="row">
<div class="col-12" *ngIf="(fieldFormGroup.get('multiplicity')?.value?.max - 1) > (fieldFormGroup.get('multiplicityItems')?.length)">
<a (click)="addMultipleField(i+1)" style="cursor: pointer">
Add one more field +
</a>
</div> -->
<app-form-field [form]="fieldFormGroup" class="col-12 copositeField" [datasetProfileId]="datasetProfileId"
[isChild]="true"></app-form-field>
<!-- <div *ngIf="fieldFormGroup" class="col-12">
<div *ngFor="let multipleField of fieldFormGroup.get('multiplicityItems')['controls']; let j = index" class="row">
<app-form-field class="col-12" [form]="multipleField" [datasetProfileId]="datasetProfileId" [isChild]="true"></app-form-field>
<button mat-icon-button type="button" *ngIf="isChild" class="deleteBtn col-auto" (click)="DeleteField(i);">
<mat-icon>delete</mat-icon>
</button>
</div>
</div>
</div>
</div>-->
</div>-->
</div>
</div>
<div *ngIf="showDelete" class="col-auto align-self-center">
<button mat-icon-button type="button" class="deleteBtn" (click)="deleteCompositeField();">
<mat-icon>delete</mat-icon>
</button>
</div>
</div>
</div>

6
dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-field/form-composite-field.component.scss
View File

@ -1,6 +1,4 @@
.copositeField {
font-weight: bold;
color: #3a3737;
max-width: 100%;
padding-top: 1em;
padding-left: 0em !important;
padding-top: 2em !important;
}

27
dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-field/form-composite-field.component.ts
View File

@ -1,5 +1,5 @@
import { Component, Input, OnInit } from '@angular/core';
import { FormArray, FormGroup } from '@angular/forms';
import { FormArray, FormGroup, AbstractControl } from '@angular/forms';
import { DatasetDescriptionCompositeFieldEditorModel, DatasetDescriptionFieldEditorModel } from '../../dataset-description-form.model';
import { VisibilityRulesService } from '../../visibility-rules/visibility-rules.service';
@ -13,6 +13,7 @@ export class FormCompositeFieldComponent {
@Input() datasetProfileId: String;
@Input() form: FormGroup;
@Input() isChild: Boolean = false;
@Input() showDelete: Boolean = false;
constructor(
public visibilityRulesService: VisibilityRulesService,
@ -32,4 +33,28 @@ export class FormCompositeFieldComponent {
// markForConsideration() {
// this.markForConsiderationService.markForConsideration(this.compositeField);
// }
deleteCompositeField() {
if (this.isChild) {
this.deleteMultipeFieldFromCompositeFormGroup();
} else {
this.deleteCompositeFieldFormGroup();
}
}
deleteCompositeFieldFormGroup() {
const numberOfItems = this.form.get('multiplicityItems').get('' + 0).get('fields').value.length;
for (let i = 0; i < numberOfItems; i++) {
const multiplicityItem = this.form.get('multiplicityItems').get('' + 0).get('fields').get('' + i).value;
this.form.get('fields').get('' + i).patchValue(multiplicityItem);
}
(<FormArray>(this.form.get('multiplicityItems'))).removeAt(0);
}
deleteMultipeFieldFromCompositeFormGroup() {
const parent = this.form.parent;
const index = (parent as FormArray).controls.indexOf(this.form);
(parent as FormArray).removeAt(index);
// (<FormArray>(this.form as AbstractControl)).removeAt(fildIndex);
}
}

19
dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-title/form-composite-title.component.html Normal file
View File

@ -0,0 +1,19 @@
<div class="col-12">
<div class="row">
<h5 *ngIf="form.get('title').value && !isChild" class="col-auto copositeField toc-copositeField-header" [id]="this.form.get('id').value">
{{form.get('numbering').value}}
{{form.get('title').value}}
<!-- <a *ngIf="this.markForConsiderationService.exists(compositeField)" (click)="markForConsideration()" style="cursor: pointer">
Mark For Consideration
</a> -->
</h5>
<mat-icon class="col-auto" *ngIf="this.form.get('additionalInformation').value && !isChild"
matTooltip="{{this.form.get('additionalInformation').value}}">info</mat-icon>
</div>
</div>
<h6 *ngIf="form.get('description').value && !isChild" class="col-12">{{form.get('description').value}}</h6>
<h6 *ngIf="form.get('extendedDescription').value && !isChild" class="col-12">
<i>{{form.get('extendedDescription').value}}</i>
</h6>

6
dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-title/form-composite-title.component.scss Normal file
View File

@ -0,0 +1,6 @@
.copositeField {
font-weight: bold;
color: #3a3737;
max-width: 100%;
padding-top: 1em;
}

19
dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-title/form-composite-title.component.ts Normal file
View File

@ -0,0 +1,19 @@
import { Component, OnInit, Input } from '@angular/core';
import { FormGroup } from '@angular/forms';
@Component({
selector: 'app-form-composite-title',
templateUrl: './form-composite-title.component.html',
styleUrls: ['./form-composite-title.component.scss']
})
export class FormCompositeTitleComponent implements OnInit {
@Input() form: FormGroup;
@Input() isChild: Boolean = false;
constructor() { }
ngOnInit() {
}
}

14
dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section.component.html
View File

@ -17,12 +17,7 @@
<div class="col-12">
<div class="row">
<app-form-composite-field class="align-self-center col" [form]="compositeFieldFormGroup" [datasetProfileId]="datasetProfileId"
[isChild]="false"></app-form-composite-field>
<div *ngIf="(compositeFieldFormGroup.get('multiplicityItems').length) > 0" class="col-auto align-self-center mt-auto pb-2">
<button mat-icon-button type="button" class="deleteBtn" (click)="deleteCompositeFieldFormGroup(i);">
<mat-icon>delete</mat-icon>
</button>
</div>
[isChild]="false" [showDelete]="(compositeFieldFormGroup.get('multiplicityItems').length) > 0"></app-form-composite-field>
</div>
</div>
@ -31,12 +26,7 @@
<div class="col-12" *ngFor="let multipleCompositeFieldFormGroup of compositeFieldFormGroup.get('multiplicityItems')['controls']; let j = index">
<div class="row">
<app-form-composite-field class=" align-self-center col" [form]="multipleCompositeFieldFormGroup" [datasetProfileId]="datasetProfileId"
[isChild]="true"></app-form-composite-field>
<div class="col-auto align-self-center">
<button mat-icon-button type="button" class="deleteBtn" (click)="deleteMultipeFieldFromCompositeFormGroup(i,j);">
<mat-icon>delete</mat-icon>
</button>
</div>
[isChild]="true" [showDelete]="true"></app-form-composite-field>
</div>
</div>
<div *ngIf="(compositeFieldFormGroup.get('multiplicity').value.max - 1) > (compositeFieldFormGroup.get('multiplicityItems').length)"

4
dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description-form.module.ts
View File

@ -9,6 +9,7 @@ import { FormFocusService } from '@app/ui/misc/dataset-description-form/form-foc
import { VisibilityRulesService } from '@app/ui/misc/dataset-description-form/visibility-rules/visibility-rules.service';
import { CommonFormsModule } from '@common/forms/common-forms.module';
import { CommonUiModule } from '@common/ui/common-ui.module';
import { FormCompositeTitleComponent } from './components/form-composite-title/form-composite-title.component';
@NgModule({
imports: [
@ -21,7 +22,8 @@ import { CommonUiModule } from '@common/ui/common-ui.module';
FormProgressIndicationComponent,
FormSectionComponent,
FormCompositeFieldComponent,
FormFieldComponent
FormFieldComponent,
FormCompositeTitleComponent
],
exports: [
DatasetDescriptionFormComponent