Refactor composite Title, description and delete button for improved styling
This commit is contained in:
parent
eafcf80e10
commit
47650abfa0
|
@ -22,5 +22,5 @@
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -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 *ngIf="form.get('fields').length === 1 && this.visibilityRulesService.checkElementVisibility(form.get('fields')['controls'][0].get('id').value)" class="col-12">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<h5 *ngIf="form.get('title').value && !isChild" class="col-auto copositeField toc-copositeField-header" [id]="this.form.get('id').value">
|
<div class="col-12">
|
||||||
{{form.get('numbering').value}}
|
<app-form-composite-title class="row" [form]="form" [isChild]="isChild"></app-form-composite-title>
|
||||||
{{form.get('title').value}}
|
</div>
|
||||||
<!-- <a *ngIf="this.markForConsiderationService.exists(compositeField)" (click)="markForConsideration()" style="cursor: pointer">
|
<div class="col-12">
|
||||||
Mark For Consideration
|
<div class="row">
|
||||||
</a> -->
|
<app-form-field class="align-self-center col" [form]="form.get('fields')['controls'][0]"
|
||||||
</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>
|
[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();">
|
<!-- <button mat-icon-button type="button" *ngIf="!isChild" class="deleteBtn col-auto" (click)="DeleteField();">
|
||||||
<mat-icon>delete</mat-icon>
|
<mat-icon>delete</mat-icon>
|
||||||
</button> -->
|
</button> -->
|
||||||
|
@ -29,23 +24,18 @@
|
||||||
</div>
|
</div>
|
||||||
<div *ngIf="form.get('fields').length > 1" class="col-12">
|
<div *ngIf="form.get('fields').length > 1" class="col-12">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<h5 *ngIf="form.get('title').value && !isChild" class="col-auto copositeField toc-copositeField-header" [id]="this.form.get('id').value">
|
<div class="col-12">
|
||||||
{{form.get('numbering').value}}
|
<app-form-composite-title class="row" [form]="form" [isChild]="isChild"></app-form-composite-title>
|
||||||
{{form.get('title').value}}</h5>
|
</div>
|
||||||
<mat-icon class="col-auto" *ngIf="this.form.get('additionalInformation').value && !isChild"
|
<div class="col align-self-center">
|
||||||
matTooltip="{{this.form.get('additionalInformation').value}}">info</mat-icon>
|
<div *ngFor="let fieldFormGroup of form.get('fields')['controls']; let i = index;" class="col-12 copositeField">
|
||||||
|
|
||||||
<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="row">
|
||||||
<div class="col-12" *ngIf="(fieldFormGroup.get('multiplicity')?.value?.max - 1) > (fieldFormGroup.get('multiplicityItems')?.length)">
|
<div class="col-12" *ngIf="(fieldFormGroup.get('multiplicity')?.value?.max - 1) > (fieldFormGroup.get('multiplicityItems')?.length)">
|
||||||
<a (click)="addMultipleField(i+1)" style="cursor: pointer">
|
<a (click)="addMultipleField(i+1)" style="cursor: pointer">
|
||||||
Add one more field +
|
Add one more field +
|
||||||
</a>
|
</a>
|
||||||
</div> -->
|
</div> -->
|
||||||
<app-form-field [form]="fieldFormGroup" class="col-12" [datasetProfileId]="datasetProfileId"
|
<app-form-field [form]="fieldFormGroup" class="col-12 copositeField" [datasetProfileId]="datasetProfileId"
|
||||||
[isChild]="true"></app-form-field>
|
[isChild]="true"></app-form-field>
|
||||||
<!-- <div *ngIf="fieldFormGroup" class="col-12">
|
<!-- <div *ngIf="fieldFormGroup" class="col-12">
|
||||||
<div *ngFor="let multipleField of fieldFormGroup.get('multiplicityItems')['controls']; let j = index" class="row">
|
<div *ngFor="let multipleField of fieldFormGroup.get('multiplicityItems')['controls']; let j = index" class="row">
|
||||||
|
@ -58,5 +48,11 @@
|
||||||
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,6 +1,4 @@
|
||||||
.copositeField {
|
.copositeField {
|
||||||
font-weight: bold;
|
padding-left: 0em !important;
|
||||||
color: #3a3737;
|
padding-top: 2em !important;
|
||||||
max-width: 100%;
|
|
||||||
padding-top: 1em;
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import { Component, Input, OnInit } from '@angular/core';
|
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 { DatasetDescriptionCompositeFieldEditorModel, DatasetDescriptionFieldEditorModel } from '../../dataset-description-form.model';
|
||||||
import { VisibilityRulesService } from '../../visibility-rules/visibility-rules.service';
|
import { VisibilityRulesService } from '../../visibility-rules/visibility-rules.service';
|
||||||
|
|
||||||
|
@ -13,6 +13,7 @@ export class FormCompositeFieldComponent {
|
||||||
@Input() datasetProfileId: String;
|
@Input() datasetProfileId: String;
|
||||||
@Input() form: FormGroup;
|
@Input() form: FormGroup;
|
||||||
@Input() isChild: Boolean = false;
|
@Input() isChild: Boolean = false;
|
||||||
|
@Input() showDelete: Boolean = false;
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
public visibilityRulesService: VisibilityRulesService,
|
public visibilityRulesService: VisibilityRulesService,
|
||||||
|
@ -32,4 +33,28 @@ export class FormCompositeFieldComponent {
|
||||||
// markForConsideration() {
|
// markForConsideration() {
|
||||||
// this.markForConsiderationService.markForConsideration(this.compositeField);
|
// 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);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
|
@ -0,0 +1,6 @@
|
||||||
|
.copositeField {
|
||||||
|
font-weight: bold;
|
||||||
|
color: #3a3737;
|
||||||
|
max-width: 100%;
|
||||||
|
padding-top: 1em;
|
||||||
|
}
|
|
@ -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() {
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -17,12 +17,7 @@
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<app-form-composite-field class="align-self-center col" [form]="compositeFieldFormGroup" [datasetProfileId]="datasetProfileId"
|
<app-form-composite-field class="align-self-center col" [form]="compositeFieldFormGroup" [datasetProfileId]="datasetProfileId"
|
||||||
[isChild]="false"></app-form-composite-field>
|
[isChild]="false" [showDelete]="(compositeFieldFormGroup.get('multiplicityItems').length) > 0"></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>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -31,12 +26,7 @@
|
||||||
<div class="col-12" *ngFor="let multipleCompositeFieldFormGroup of compositeFieldFormGroup.get('multiplicityItems')['controls']; let j = index">
|
<div class="col-12" *ngFor="let multipleCompositeFieldFormGroup of compositeFieldFormGroup.get('multiplicityItems')['controls']; let j = index">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<app-form-composite-field class=" align-self-center col" [form]="multipleCompositeFieldFormGroup" [datasetProfileId]="datasetProfileId"
|
<app-form-composite-field class=" align-self-center col" [form]="multipleCompositeFieldFormGroup" [datasetProfileId]="datasetProfileId"
|
||||||
[isChild]="true"></app-form-composite-field>
|
[isChild]="true" [showDelete]="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>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div *ngIf="(compositeFieldFormGroup.get('multiplicity').value.max - 1) > (compositeFieldFormGroup.get('multiplicityItems').length)"
|
<div *ngIf="(compositeFieldFormGroup.get('multiplicity').value.max - 1) > (compositeFieldFormGroup.get('multiplicityItems').length)"
|
||||||
|
|
|
@ -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 { VisibilityRulesService } from '@app/ui/misc/dataset-description-form/visibility-rules/visibility-rules.service';
|
||||||
import { CommonFormsModule } from '@common/forms/common-forms.module';
|
import { CommonFormsModule } from '@common/forms/common-forms.module';
|
||||||
import { CommonUiModule } from '@common/ui/common-ui.module';
|
import { CommonUiModule } from '@common/ui/common-ui.module';
|
||||||
|
import { FormCompositeTitleComponent } from './components/form-composite-title/form-composite-title.component';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
imports: [
|
imports: [
|
||||||
|
@ -21,7 +22,8 @@ import { CommonUiModule } from '@common/ui/common-ui.module';
|
||||||
FormProgressIndicationComponent,
|
FormProgressIndicationComponent,
|
||||||
FormSectionComponent,
|
FormSectionComponent,
|
||||||
FormCompositeFieldComponent,
|
FormCompositeFieldComponent,
|
||||||
FormFieldComponent
|
FormFieldComponent,
|
||||||
|
FormCompositeTitleComponent
|
||||||
],
|
],
|
||||||
exports: [
|
exports: [
|
||||||
DatasetDescriptionFormComponent
|
DatasetDescriptionFormComponent
|
||||||
|
|
Loading…
Reference in New Issue