fixed remove buttons for both relatinoships and metadata

This commit is contained in:
lotte
2019-12-16 15:31:14 +01:00
parent e3355455af
commit aa7b3b7bb4
7 changed files with 56 additions and 46 deletions

View File

@@ -3,7 +3,7 @@ import { autoserialize, Serialize, Deserialize } from 'cerialize';
import { hasValue } from '../../shared/empty.util'; import { hasValue } from '../../shared/empty.util';
/* tslint:disable:max-classes-per-file */ /* tslint:disable:max-classes-per-file */
const VIRTUAL_METADATA_PREFIX = 'virtual::'; export const VIRTUAL_METADATA_PREFIX = 'virtual::';
/** A single metadata value and its properties. */ /** A single metadata value and its properties. */
export interface MetadataValueInterface { export interface MetadataValueInterface {

View File

@@ -58,6 +58,8 @@
[relationshipOptions]="model.relationship"> [relationshipOptions]="model.relationship">
</ds-existing-metadata-list-element> </ds-existing-metadata-list-element>
</ng-container> </ng-container>
<ng-content></ng-content> <ng-content></ng-content>
</div> </div>

View File

@@ -16,7 +16,7 @@ import {
ViewChild, ViewChild,
ViewContainerRef ViewContainerRef
} from '@angular/core'; } from '@angular/core';
import { FormGroup } from '@angular/forms'; import { FormArray, FormGroup } from '@angular/forms';
import { import {
DYNAMIC_FORM_CONTROL_TYPE_ARRAY, DYNAMIC_FORM_CONTROL_TYPE_ARRAY,
@@ -29,7 +29,7 @@ import {
DYNAMIC_FORM_CONTROL_TYPE_SELECT, DYNAMIC_FORM_CONTROL_TYPE_SELECT,
DYNAMIC_FORM_CONTROL_TYPE_TEXTAREA, DYNAMIC_FORM_CONTROL_TYPE_TEXTAREA,
DYNAMIC_FORM_CONTROL_TYPE_TIMEPICKER, DYNAMIC_FORM_CONTROL_TYPE_TIMEPICKER,
DynamicDatePickerModel, DynamicDatePickerModel, DynamicFormArrayModel,
DynamicFormControl, DynamicFormControl,
DynamicFormControlContainerComponent, DynamicFormControlContainerComponent,
DynamicFormControlEvent, DynamicFormControlEvent,
@@ -331,4 +331,12 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
.filter((sub) => hasValue(sub)) .filter((sub) => hasValue(sub))
.forEach((sub) => sub.unsubscribe()); .forEach((sub) => sub.unsubscribe());
} }
//
//
// removeItem($event, arrayContext: DynamicFormArrayModel, index: number): void {
// const formArrayControl = this.group.get(this.formBuilderService.getPath(arrayContext)) as FormArray;
// this.removeArrayItem.emit(this.getEvent($event, arrayContext, index, 'remove'));
// this.formBuilderService.removeFormArrayGroup(index, formArrayControl, arrayContext);
// this.formService.changeForm(this.formId, this.formModel);
// }
} }

View File

@@ -1,8 +1,9 @@
<div *ngIf="metadataRepresentation" class="mt-2 mb-4"> <div *ngIf="metadataRepresentation" class="mt-2 mb-4 d-flex">
<button type="button" class="close float-left" aria-label="Close button" (click)="removeSelection()"> <span class="d-inline-block align-middle ml-1 mr-auto">
<span aria-hidden="true">&times;</span>
</button>
<span class="d-inline-block align-middle ml-1">
<ds-metadata-representation-loader [mdRepresentation]="metadataRepresentation"></ds-metadata-representation-loader> <ds-metadata-representation-loader [mdRepresentation]="metadataRepresentation"></ds-metadata-representation-loader>
</span> </span>
<button type="button" class="btn btn-secondary"
(click)="removeSelection()">
<i class="fas fa-trash" aria-hidden="true"></i>
</button>
</div> </div>

View File

@@ -1,7 +1,7 @@
import { isEmpty, isNotEmpty, isNotNull } from '../../../empty.util'; import { hasValue, isEmpty, isNotEmpty, isNotNull } from '../../../empty.util';
import { ConfidenceType } from '../../../../core/integration/models/confidence-type'; import { ConfidenceType } from '../../../../core/integration/models/confidence-type';
import { PLACEHOLDER_PARENT_METADATA } from '../ds-dynamic-form-ui/models/relation-group/dynamic-relation-group.model'; import { PLACEHOLDER_PARENT_METADATA } from '../ds-dynamic-form-ui/models/relation-group/dynamic-relation-group.model';
import { MetadataValueInterface } from '../../../../core/shared/metadata.models'; import { MetadataValueInterface, VIRTUAL_METADATA_PREFIX } from '../../../../core/shared/metadata.models';
export interface OtherInformation { export interface OtherInformation {
[name: string]: string [name: string]: string
@@ -65,6 +65,10 @@ export class FormFieldMetadataValueObject implements MetadataValueInterface {
return this.hasValue() && this.value === PLACEHOLDER_PARENT_METADATA; return this.hasValue() && this.value === PLACEHOLDER_PARENT_METADATA;
} }
get isVirtual(): boolean {
return hasValue(this.authority) && this.authority.startsWith(VIRTUAL_METADATA_PREFIX);
}
toString() { toString() {
return this.display || this.value; return this.display || this.value;
} }

View File

@@ -10,45 +10,35 @@
(dfBlur)="onBlur($event)" (dfBlur)="onBlur($event)"
(dfChange)="onChange($event)" (dfChange)="onChange($event)"
(dfFocus)="onFocus($event)"> (dfFocus)="onFocus($event)">
<ng-template modelType="ARRAY" let-group let-index="index" let-context="context"> <ng-template modelType="ARRAY" let-group let-index="index" let-context="context">
metadata: {{context.metadata}} <!--Array with repeatable items-->
<!--Array with repeatable items--> <div *ngIf="!context.notRepeatable && (!context.hasRelationship || (context.hasRelationship && index < 1))"
<div *ngIf="!context.notRepeatable && (!context.hasRelationship || (context.hasRelationship && index < 1))" class="col-xs-2 d-flex flex-column justify-content-sm-start align-items-end">
class="col-xs-2 d-flex flex-column justify-content-sm-start align-items-end"> <div class="btn-group" role="group" aria-label="Add and remove button">
<div class="btn-group" role="group" aria-label="Add and remove button"> <button type="button" class="btn btn-secondary"
<button type="button" class="btn btn-secondary" [disabled]="isItemReadOnly(context, index)"
[disabled]="isItemReadOnly(context, index)" (click)="insertItem($event, group.context, group.index + 1)">
(click)="insertItem($event, group.context, group.index + 1)"> <i class="fas fa-plus" aria-hidden="true"></i>
<i class="fas fa-plus" aria-hidden="true"></i> </button>
</button> <button type="button" class="btn btn-secondary"
<button type="button" class="btn btn-secondary" (click)="removeItem($event, context, index)"
(click)="removeItem($event, context, index)" [disabled]="group.context.groups.length === 1 || isItemReadOnly(context, index)">
[disabled]="group.context.groups.length === 1 || isItemReadOnly(context, index)"> <i class="fas fa-trash" aria-hidden="true"></i>
<i class="fas fa-trash" aria-hidden="true"></i> </button>
</button>
</div>
</div> </div>
</div>
<!--Array with non repeatable items - Only delete button--> <!--Array with non repeatable items - Only delete button-->
<div *ngIf="context.notRepeatable && group.context.groups.length > 1 || (context.hasRelationship && index > 0)" <div *ngIf="context.notRepeatable && group.context.groups.length > 1 || (context.hasRelationship && index > 0 && !group.group[0]?.value?.isVirtual)"
class="col-xs-2 d-flex flex-column justify-content-sm-start align-items-end"> class="col-xs-2 d-flex flex-column justify-content-sm-start align-items-end">
<div class="btn-group" role="group" aria-label="Remove button"> <div class="btn-group" role="group" aria-label="Remove button">
<button type="button" class="btn btn-secondary" <button type="button" class="btn btn-secondary"
(click)="removeItem($event, context, index)" (click)="removeItem($event, context, index)"
[disabled]="group.context.groups.length === 1 || isItemReadOnly(context, index)"> [disabled]="group.context.groups.length === 1 || isItemReadOnly(context, index)">
<i class="fas fa-trash" aria-hidden="true"></i> <i class="fas fa-trash" aria-hidden="true"></i>
</button> </button>
</div>
</div> </div>
</div>
<!-- <div *ngIf="!context.notRepeatable && context.hasRelationship && index < 1" class="col-auto text-center">-->
<!-- <button type="button" class="btn btn-secondary"-->
<!-- [disabled]="isItemReadOnly(context, index)"-->
<!-- (click)="insertItem($event, group.context, group.index + 1)">-->
<!-- {{'form.add' | translate}}-->
<!-- </button>-->
<!-- </div>-->
</ng-template> </ng-template>
</ds-dynamic-form> </ds-dynamic-form>

View File

@@ -322,4 +322,9 @@ export class FormComponent implements OnDestroy, OnInit {
const control = group.controls[index] as FormControl; const control = group.controls[index] as FormControl;
return { $event, context, control, group, model, type }; return { $event, context, control, group, model, type };
} }
print(data) {
console.log(data);
}
} }