fix dmp blueprint editor screen
This commit is contained in:
parent
b94aa51489
commit
17dbd198ad
|
|
@ -0,0 +1,127 @@
|
|||
package eu.eudat.models.data.entities.xmlmodels.dmpprofiledefinition;
|
||||
|
||||
import eu.eudat.models.data.entities.xmlmodels.dmpprofiledefinition.types.ExtraFieldType;
|
||||
import eu.eudat.models.data.entities.xmlmodels.dmpprofiledefinition.types.FieldCategory;
|
||||
import eu.eudat.models.data.entities.xmlmodels.dmpprofiledefinition.types.SystemFieldType;
|
||||
|
||||
import java.util.UUID;
|
||||
|
||||
public class FieldModel {
|
||||
|
||||
private UUID id;
|
||||
private FieldCategory category;
|
||||
private Integer type;
|
||||
private String label;
|
||||
private String placeholder;
|
||||
private String description;
|
||||
private Integer ordinal;
|
||||
private boolean required;
|
||||
|
||||
public UUID getId() {
|
||||
return id;
|
||||
}
|
||||
public void setId(UUID id) {
|
||||
this.id = id;
|
||||
}
|
||||
|
||||
public FieldCategory getCategory() {
|
||||
return category;
|
||||
}
|
||||
public void setCategory(FieldCategory category) {
|
||||
this.category = category;
|
||||
}
|
||||
|
||||
public Integer getType() {
|
||||
return type;
|
||||
}
|
||||
public void setType(Integer type) {
|
||||
this.type = type;
|
||||
}
|
||||
|
||||
public String getLabel() {
|
||||
return label;
|
||||
}
|
||||
public void setLabel(String label) {
|
||||
this.label = label;
|
||||
}
|
||||
|
||||
public String getPlaceholder() {
|
||||
return placeholder;
|
||||
}
|
||||
public void setPlaceholder(String placeholder) {
|
||||
this.placeholder = placeholder;
|
||||
}
|
||||
|
||||
public String getDescription() {
|
||||
return description;
|
||||
}
|
||||
public void setDescription(String description) {
|
||||
this.description = description;
|
||||
}
|
||||
|
||||
public Integer getOrdinal() {
|
||||
return ordinal;
|
||||
}
|
||||
public void setOrdinal(Integer ordinal) {
|
||||
this.ordinal = ordinal;
|
||||
}
|
||||
|
||||
public boolean isRequired() {
|
||||
return required;
|
||||
}
|
||||
public void setRequired(boolean required) {
|
||||
this.required = required;
|
||||
}
|
||||
|
||||
public SystemField toSystemField(){
|
||||
SystemField systemField = new SystemField();
|
||||
if (this.category == FieldCategory.SYSTEM) {
|
||||
systemField.setId(this.id);
|
||||
systemField.setType(SystemFieldType.fromInteger(this.type));
|
||||
systemField.setLabel(this.label);
|
||||
systemField.setPlaceholder(this.placeholder);
|
||||
systemField.setDescription(this.description);
|
||||
systemField.setOrdinal(this.ordinal);
|
||||
systemField.setRequired(this.required);
|
||||
}
|
||||
return systemField;
|
||||
}
|
||||
|
||||
public FieldModel fromSystemField(SystemField systemField){
|
||||
this.setId(systemField.getId());
|
||||
this.setCategory(FieldCategory.SYSTEM);
|
||||
this.setType(systemField.getType().getType());
|
||||
this.setLabel(systemField.getLabel());
|
||||
this.setPlaceholder(systemField.getPlaceholder());
|
||||
this.setDescription(systemField.getDescription());
|
||||
this.setOrdinal(systemField.getOrdinal());
|
||||
this.setRequired(systemField.isRequired());
|
||||
return this;
|
||||
}
|
||||
|
||||
public ExtraField toExtraField(){
|
||||
ExtraField extraField = new ExtraField();
|
||||
if (this.category == FieldCategory.EXTRA) {
|
||||
extraField.setId(this.id);
|
||||
extraField.setType(ExtraFieldType.fromInteger(this.type));
|
||||
extraField.setLabel(this.label);
|
||||
extraField.setPlaceholder(this.placeholder);
|
||||
extraField.setDescription(this.description);
|
||||
extraField.setOrdinal(this.ordinal);
|
||||
extraField.setRequired(this.required);
|
||||
}
|
||||
return extraField;
|
||||
}
|
||||
|
||||
public FieldModel fromExtraField(ExtraField extraField){
|
||||
this.setId(extraField.getId());
|
||||
this.setCategory(FieldCategory.EXTRA);
|
||||
this.setType(extraField.getType().getValue());
|
||||
this.setLabel(extraField.getLabel());
|
||||
this.setPlaceholder(extraField.getPlaceholder());
|
||||
this.setDescription(extraField.getDescription());
|
||||
this.setOrdinal(extraField.getOrdinal());
|
||||
this.setRequired(extraField.getRequired());
|
||||
return this;
|
||||
}
|
||||
}
|
||||
|
|
@ -2,6 +2,7 @@ package eu.eudat.models.data.entities.xmlmodels.dmpprofiledefinition;
|
|||
|
||||
import eu.eudat.logic.utilities.builders.XmlBuilder;
|
||||
import eu.eudat.logic.utilities.interfaces.XmlSerializable;
|
||||
import eu.eudat.models.data.entities.xmlmodels.dmpprofiledefinition.types.FieldCategory;
|
||||
import org.w3c.dom.Document;
|
||||
import org.w3c.dom.Element;
|
||||
import org.w3c.dom.Node;
|
||||
|
|
@ -10,6 +11,7 @@ import org.w3c.dom.NodeList;
|
|||
import java.util.LinkedList;
|
||||
import java.util.List;
|
||||
import java.util.UUID;
|
||||
import java.util.stream.Collectors;
|
||||
|
||||
public class Section implements XmlSerializable<Section> {
|
||||
|
||||
|
|
@ -17,9 +19,8 @@ public class Section implements XmlSerializable<Section> {
|
|||
private String label;
|
||||
private String description;
|
||||
private Integer ordinal;
|
||||
private List<SystemField> systemFields;
|
||||
private List<FieldModel> fields;
|
||||
private List<DescriptionTemplate> descriptionTemplates;
|
||||
private List<ExtraField> extraFields;
|
||||
|
||||
public UUID getId() {
|
||||
return id;
|
||||
|
|
@ -49,11 +50,11 @@ public class Section implements XmlSerializable<Section> {
|
|||
this.ordinal = ordinal;
|
||||
}
|
||||
|
||||
public List<SystemField> getSystemFields() {
|
||||
return systemFields;
|
||||
public List<FieldModel> getFields() {
|
||||
return fields;
|
||||
}
|
||||
public void setSystemFields(List<SystemField> systemFields) {
|
||||
this.systemFields = systemFields;
|
||||
public void setFields(List<FieldModel> fields) {
|
||||
this.fields = fields;
|
||||
}
|
||||
|
||||
public List<DescriptionTemplate> getDescriptionTemplates() {
|
||||
|
|
@ -63,13 +64,6 @@ public class Section implements XmlSerializable<Section> {
|
|||
this.descriptionTemplates = descriptionTemplates;
|
||||
}
|
||||
|
||||
public List<ExtraField> getExtraFields() {
|
||||
return extraFields;
|
||||
}
|
||||
public void setExtraFields(List<ExtraField> extraFields) {
|
||||
this.extraFields = extraFields;
|
||||
}
|
||||
|
||||
@Override
|
||||
public Element toXml(Document doc) {
|
||||
Element rootElement = doc.createElement("section");
|
||||
|
|
@ -77,8 +71,10 @@ public class Section implements XmlSerializable<Section> {
|
|||
rootElement.setAttribute("label", this.label);
|
||||
rootElement.setAttribute("description", this.description);
|
||||
rootElement.setAttribute("ordinal", String.valueOf(this.ordinal));
|
||||
List<FieldModel> temp = this.fields.stream().filter(f -> f.getCategory().equals(FieldCategory.SYSTEM)).collect(Collectors.toList());
|
||||
List<SystemField> systemFieldsList = temp.stream().map(FieldModel::toSystemField).collect(Collectors.toList());
|
||||
Element systemFields = doc.createElement("systemFields");
|
||||
for (SystemField systemField : this.systemFields) {
|
||||
for (SystemField systemField : systemFieldsList) {
|
||||
systemFields.appendChild(systemField.toXml(doc));
|
||||
}
|
||||
rootElement.appendChild(systemFields);
|
||||
|
|
@ -87,8 +83,10 @@ public class Section implements XmlSerializable<Section> {
|
|||
descriptionTemplates.appendChild(descriptionTemplate.toXml(doc));
|
||||
}
|
||||
rootElement.appendChild(descriptionTemplates);
|
||||
temp = this.fields.stream().filter(f -> f.getCategory().equals(FieldCategory.EXTRA)).collect(Collectors.toList());
|
||||
List<ExtraField> extraFieldList = temp.stream().map(FieldModel::toExtraField).collect(Collectors.toList());
|
||||
Element extraFields = doc.createElement("extraFields");
|
||||
for (ExtraField extraField : this.extraFields) {
|
||||
for (ExtraField extraField : extraFieldList) {
|
||||
extraFields.appendChild(extraField.toXml(doc));
|
||||
}
|
||||
rootElement.appendChild(extraFields);
|
||||
|
|
@ -102,14 +100,15 @@ public class Section implements XmlSerializable<Section> {
|
|||
this.label = item.getAttribute("label");
|
||||
this.description = item.getAttribute("description");
|
||||
this.ordinal = Integer.valueOf(item.getAttribute("ordinal"));
|
||||
this.systemFields = new LinkedList<>();
|
||||
this.fields = new LinkedList<>();
|
||||
Element systemFields = (Element) XmlBuilder.getNodeFromListByTagName(item.getChildNodes(), "systemFields");
|
||||
if (systemFields != null) {
|
||||
NodeList systemFieldElements = systemFields.getChildNodes();
|
||||
for (int temp = 0; temp < systemFieldElements.getLength(); temp++) {
|
||||
Node systemFieldElement = systemFieldElements.item(temp);
|
||||
if (systemFieldElement.getNodeType() == Node.ELEMENT_NODE) {
|
||||
this.systemFields.add(new SystemField().fromXml((Element) systemFieldElement));
|
||||
SystemField systemField = new SystemField().fromXml((Element) systemFieldElement);
|
||||
this.fields.add(new FieldModel().fromSystemField(systemField));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -124,14 +123,14 @@ public class Section implements XmlSerializable<Section> {
|
|||
}
|
||||
}
|
||||
}
|
||||
this.extraFields = new LinkedList<>();
|
||||
Element extraFields = (Element) XmlBuilder.getNodeFromListByTagName(item.getChildNodes(), "extraFields");
|
||||
if (extraFields != null) {
|
||||
NodeList extraFieldElements = extraFields.getChildNodes();
|
||||
for (int temp = 0; temp < extraFieldElements.getLength(); temp++) {
|
||||
Node extraFieldElement = extraFieldElements.item(temp);
|
||||
if (extraFieldElement.getNodeType() == Node.ELEMENT_NODE) {
|
||||
this.extraFields.add(new ExtraField().fromXml((Element) extraFieldElement));
|
||||
ExtraField extraField = new ExtraField().fromXml((Element) extraFieldElement);
|
||||
this.fields.add(new FieldModel().fromExtraField(extraField));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,27 @@
|
|||
package eu.eudat.models.data.entities.xmlmodels.dmpprofiledefinition.types;
|
||||
|
||||
public enum FieldCategory {
|
||||
SYSTEM(0),
|
||||
EXTRA(1);
|
||||
|
||||
private Integer value;
|
||||
|
||||
private FieldCategory(Integer value) {
|
||||
this.value = value;
|
||||
}
|
||||
|
||||
public Integer getValue() {
|
||||
return value;
|
||||
}
|
||||
|
||||
public static FieldCategory fromInteger(Integer value) {
|
||||
switch (value) {
|
||||
case 0:
|
||||
return SYSTEM;
|
||||
case 1:
|
||||
return EXTRA;
|
||||
default:
|
||||
throw new RuntimeException("Unsupported FieldCategory Type");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -17,14 +17,14 @@ export interface SectionDmpBlueprint {
|
|||
label: string;
|
||||
description: string;
|
||||
ordinal: number;
|
||||
systemFields: SystemFieldInSection[];
|
||||
fields: FieldInSection[];
|
||||
descriptionTemplates?: DescriptionTemplatesInSection[];
|
||||
extraFields?: ExtraFieldInSection[];
|
||||
}
|
||||
|
||||
export interface SystemFieldInSection {
|
||||
export interface FieldInSection {
|
||||
id: string;
|
||||
type: SystemFieldType;
|
||||
category: FieldCategory;
|
||||
type: number;
|
||||
label: string;
|
||||
placeholder: string;
|
||||
description: string;
|
||||
|
|
@ -32,6 +32,11 @@ export interface SystemFieldInSection {
|
|||
ordinal: number;
|
||||
}
|
||||
|
||||
export enum FieldCategory {
|
||||
SYSTEM = 0,
|
||||
EXTRA = 1
|
||||
}
|
||||
|
||||
export enum SystemFieldType {
|
||||
TEXT = 0,
|
||||
HTML_TEXT = 1,
|
||||
|
|
@ -54,16 +59,6 @@ export interface DescriptionTemplatesInSection {
|
|||
maxMultiplicity: number;
|
||||
}
|
||||
|
||||
export interface ExtraFieldInSection {
|
||||
id: string;
|
||||
label: string;
|
||||
description: string;
|
||||
placeholder: string;
|
||||
type: ExtraFieldType;
|
||||
required: boolean;
|
||||
ordinal: number;
|
||||
}
|
||||
|
||||
export enum ExtraFieldType {
|
||||
TEXT = 0,
|
||||
RICH_TEXT = 1,
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ import { DialodConfirmationUploadDmpProfiles } from './listing/criteria/dialog-c
|
|||
import { DmpProfileCriteriaComponent } from './listing/criteria/dmp-profile-criteria.component';
|
||||
import { DmpProfileListingComponent } from './listing/dmp-profile-listing.component';
|
||||
import { NgxDropzoneModule } from "ngx-dropzone";
|
||||
import { DragDropModule } from '@angular/cdk/drag-drop';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
|
|
@ -18,7 +19,8 @@ import { NgxDropzoneModule } from "ngx-dropzone";
|
|||
UrlListingModule,
|
||||
ConfirmationDialogModule,
|
||||
DmpProfileRoutingModule,
|
||||
NgxDropzoneModule
|
||||
NgxDropzoneModule,
|
||||
DragDropModule
|
||||
],
|
||||
declarations: [
|
||||
DmpProfileEditorComponent,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { FormBuilder, FormGroup } from "@angular/forms";
|
||||
import { DescriptionTemplatesInSection, DmpBlueprint, DmpBlueprintDefinition, ExtraFieldInSection, ExtraFieldType, SectionDmpBlueprint, SystemFieldInSection, SystemFieldType } from "@app/core/model/dmp/dmp-blueprint/dmp-blueprint";
|
||||
import { DescriptionTemplatesInSection, DmpBlueprint, DmpBlueprintDefinition, FieldCategory, FieldInSection, SectionDmpBlueprint } from "@app/core/model/dmp/dmp-blueprint/dmp-blueprint";
|
||||
|
||||
export class DmpBlueprintEditor {
|
||||
public id: string;
|
||||
|
|
@ -60,7 +60,7 @@ export class SectionDmpBlueprintEditor {
|
|||
public label: string;
|
||||
public description: string;
|
||||
public ordinal: number;
|
||||
public systemFields: SystemFieldInSectionEditor[] = new Array<SystemFieldInSectionEditor>();
|
||||
public fields: FieldInSectionEditor[] = new Array<FieldInSectionEditor>();
|
||||
public descriptionTemplates: DescriptionTemplatesInSectionEditor[] = new Array<DescriptionTemplatesInSectionEditor>();
|
||||
|
||||
fromModel(item: SectionDmpBlueprint): SectionDmpBlueprintEditor {
|
||||
|
|
@ -68,9 +68,8 @@ export class SectionDmpBlueprintEditor {
|
|||
this.label = item.label;
|
||||
this.description = item.description;
|
||||
this.ordinal = item.ordinal;
|
||||
if (item.systemFields) { item.systemFields.map(x => this.systemFields.push(new SystemFieldInSectionEditor().fromModel(x))); }
|
||||
if (item.fields) { item.fields.map(x => this.fields.push(new FieldInSectionEditor().fromModel(x))); }
|
||||
if (item.descriptionTemplates) { item.descriptionTemplates.map(x => this.descriptionTemplates.push(new DescriptionTemplatesInSectionEditor().fromModel(x))); }
|
||||
debugger;
|
||||
return this;
|
||||
}
|
||||
|
||||
|
|
@ -82,12 +81,12 @@ export class SectionDmpBlueprintEditor {
|
|||
ordinal: [this.ordinal]
|
||||
});
|
||||
const formBuilder = new FormBuilder();
|
||||
const systemFieldsFormArray = new Array<FormGroup>();
|
||||
this.systemFields.forEach(item => {
|
||||
const fieldsFormArray = new Array<FormGroup>();
|
||||
this.fields.forEach(item => {
|
||||
const form: FormGroup = item.buildForm();
|
||||
systemFieldsFormArray.push(form);
|
||||
fieldsFormArray.push(form);
|
||||
});
|
||||
formGroup.addControl('systemFields', formBuilder.array(systemFieldsFormArray));
|
||||
formGroup.addControl('fields', formBuilder.array(fieldsFormArray));
|
||||
const descriptionTemplatesFormArray = new Array<FormGroup>();
|
||||
this.descriptionTemplates.forEach(item => {
|
||||
const form: FormGroup = item.buildForm();
|
||||
|
|
@ -98,17 +97,21 @@ export class SectionDmpBlueprintEditor {
|
|||
}
|
||||
}
|
||||
|
||||
export class SystemFieldInSectionEditor {
|
||||
export class FieldInSectionEditor {
|
||||
public id: string;
|
||||
public type: SystemFieldType;
|
||||
public category: FieldCategory;
|
||||
public type: number;
|
||||
public label: string;
|
||||
public placeholder: string;
|
||||
public description: string;
|
||||
public required: boolean;
|
||||
public ordinal: number;
|
||||
|
||||
fromModel(item: SystemFieldInSection): SystemFieldInSectionEditor {
|
||||
fromModel(item: FieldInSection): FieldInSectionEditor {
|
||||
this.id = item.id;
|
||||
this.category = item.category;
|
||||
this.type = item.type;
|
||||
this.label = item.label;
|
||||
this.placeholder = item.placeholder;
|
||||
this.description = item.description;
|
||||
this.required = item.required;
|
||||
|
|
@ -119,7 +122,9 @@ export class SystemFieldInSectionEditor {
|
|||
buildForm(): FormGroup {
|
||||
const formGroup = new FormBuilder().group({
|
||||
id: [this.id],
|
||||
category: [this.category],
|
||||
type: [this.type],
|
||||
label: [this.label],
|
||||
placeholder: [this.placeholder],
|
||||
description: [this.description],
|
||||
required: [this.required],
|
||||
|
|
@ -157,36 +162,36 @@ export class DescriptionTemplatesInSectionEditor {
|
|||
}
|
||||
}
|
||||
|
||||
export class ExtraFieldsInSectionEditor {
|
||||
public id: string;
|
||||
public label: string;
|
||||
public description: string;
|
||||
public placeholder: string;
|
||||
public type: ExtraFieldType;
|
||||
public required: boolean;
|
||||
public ordinal: number;
|
||||
// export class ExtraFieldsInSectionEditor {
|
||||
// public id: string;
|
||||
// public label: string;
|
||||
// public description: string;
|
||||
// public placeholder: string;
|
||||
// public type: ExtraFieldType;
|
||||
// public required: boolean;
|
||||
// public ordinal: number;
|
||||
|
||||
fromModel(item: ExtraFieldInSection): ExtraFieldsInSectionEditor {
|
||||
this.id = item.id;
|
||||
this.label = item.label;
|
||||
this.description = item.description;
|
||||
this.placeholder = item.placeholder;
|
||||
this.type = item.type;
|
||||
this.required = item.required;
|
||||
this.ordinal = item.ordinal;
|
||||
return this;
|
||||
}
|
||||
// fromModel(item: ExtraFieldInSection): ExtraFieldsInSectionEditor {
|
||||
// this.id = item.id;
|
||||
// this.label = item.label;
|
||||
// this.description = item.description;
|
||||
// this.placeholder = item.placeholder;
|
||||
// this.type = item.type;
|
||||
// this.required = item.required;
|
||||
// this.ordinal = item.ordinal;
|
||||
// return this;
|
||||
// }
|
||||
|
||||
buildForm(): FormGroup {
|
||||
const formGroup = new FormBuilder().group({
|
||||
id: [this.id],
|
||||
label: [this.label],
|
||||
description: [this.description],
|
||||
placeholder: [this.placeholder],
|
||||
type: [this.type],
|
||||
required: [this.required],
|
||||
ordinal: [this.ordinal]
|
||||
});
|
||||
return formGroup;
|
||||
}
|
||||
}
|
||||
// buildForm(): FormGroup {
|
||||
// const formGroup = new FormBuilder().group({
|
||||
// id: [this.id],
|
||||
// label: [this.label],
|
||||
// description: [this.description],
|
||||
// placeholder: [this.placeholder],
|
||||
// type: [this.type],
|
||||
// required: [this.required],
|
||||
// ordinal: [this.ordinal]
|
||||
// });
|
||||
// return formGroup;
|
||||
// }
|
||||
// }
|
||||
|
|
@ -33,22 +33,23 @@
|
|||
</mat-card-header> -->
|
||||
<mat-card-content>
|
||||
<div class="row" style="gap:1em">
|
||||
<mat-form-field class="col-lg-6" appearance="legacy">
|
||||
<input matInput placeholder="{{'DMP-PROFILE-EDITOR.FIELDS.LABEL' | translate}}" type="text" name="label" formControlName="label"
|
||||
required>
|
||||
<mat-form-field class="col-lg-6" >
|
||||
<mat-label>Name</mat-label>
|
||||
<input matInput type="text" name="label" formControlName="label" required>
|
||||
<mat-error *ngIf="dmpBlueprintsFormGroup.get('label').hasError('required')">
|
||||
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
||||
</mat-form-field>
|
||||
<h4 class="col-12">Sections</h4>
|
||||
|
||||
<ng-container formArrayName="sections">
|
||||
<div *ngFor="let section of sectionsArray().controls; let sectionIndex=index;" class="section-input" style="width: 100%;">
|
||||
<div formArrayName="sections" style="width: 100%;" cdkDropList (cdkDropListDropped)="dropSections($event)">
|
||||
<div *ngFor="let section of sectionsArray().controls; let sectionIndex=index;" class="section-input" cdkDrag>
|
||||
<ng-container [formGroupName]="sectionIndex">
|
||||
<div class="col-12">
|
||||
<div class="row">
|
||||
<mat-card class="col-11" style="width: 100%;">
|
||||
<mat-card class="col-11" style="width: 100%; margin-bottom: 1%;">
|
||||
<mat-card-header>
|
||||
<mat-card-title>Section {{sectionIndex + 1}}</mat-card-title>
|
||||
<mat-icon cdkDragHandle style="cursor: move; color: #129d99;">drag_indicator</mat-icon>
|
||||
</mat-card-header>
|
||||
<div class="col-12">
|
||||
<div class="row">
|
||||
|
|
@ -73,122 +74,158 @@
|
|||
|
||||
<div class="col-12">
|
||||
<div class="row">
|
||||
|
||||
<div class="col-12">
|
||||
<mat-form-field>
|
||||
<mat-label>System fields</mat-label>
|
||||
<mat-select multiple>
|
||||
<mat-option *ngFor="let f of fieldList" [disabled]="systemFieldDisabled(f.type, sectionIndex)" [value]="f.type" (click)="selectedFieldType(f.label, f.type, sectionIndex)">{{f.label}}</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="systemFieldsArray(sectionIndex).hasError('required')">
|
||||
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
||||
</mat-form-field>
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<mat-form-field>
|
||||
<mat-label>System fields</mat-label>
|
||||
<mat-select multiple>
|
||||
<mat-option *ngFor="let f of fieldList" [disabled]="systemFieldDisabled(f.type, sectionIndex)" [value]="f.type" (click)="selectedFieldType(f.label, f.type, sectionIndex)">{{f.label}}</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="fieldsArray(sectionIndex).hasError('required')">
|
||||
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<button mat-button class="action-btn" type="button" (click)="addExtraField(sectionIndex)">Add extra field</button>
|
||||
<!-- <button mat-button class="action-btn" style="margin-left: 3%;" type="button" (click)="addExtraField(sectionIndex)">Add description templates</button> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
|
||||
<div formArrayName="fields" cdkDropList (cdkDropListDropped)="drop($event, sectionIndex)">
|
||||
<div *ngFor="let field of fieldsArray(sectionIndex).controls; let fieldIndex=index;" cdkDrag>
|
||||
<ng-container [formGroupName]="fieldIndex">
|
||||
<div class="col-12" *ngIf="fieldsArray(sectionIndex).length > 0">
|
||||
<div class="row">
|
||||
<div class="col-xx-1" style="padding-left: 0;">
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<span style="font-size: 15px;">{{fieldIndex + 1}}</span>
|
||||
</div>
|
||||
<div class="col-8">
|
||||
<mat-icon cdkDragHandle style="cursor: move; color: #129d99;">drag_indicator</mat-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ng-container *ngIf="field.get('category').value === 0">
|
||||
<div class="col-2" >
|
||||
<mat-form-field>
|
||||
<mat-label>System Field</mat-label>
|
||||
<input matInput disabled value="{{transfromEnumToString(field.get('type').value)}}" type="text" name="name">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<mat-form-field>
|
||||
<mat-label>Label</mat-label>
|
||||
<input matInput type="text" name="label" formControlName="label">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<mat-form-field>
|
||||
<mat-label>Placeholder</mat-label>
|
||||
<input matInput type="text" name="placeholder" formControlName="placeholder">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<mat-form-field>
|
||||
<mat-label>Description</mat-label>
|
||||
<input matInput type="text" name="description" formControlName="description">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="centered-row-item col-1">
|
||||
<mat-checkbox [disabled]="field.get('type').value === 0 || field.get('type').value === 1" formControlName="required">Required</mat-checkbox>
|
||||
</div>
|
||||
<div class="field-delete col-1" (click)="removeSystemFieldWithIndex(sectionIndex, fieldIndex)">
|
||||
<mat-icon class="field-delete-icon">delete</mat-icon>
|
||||
<span class="field-delete-text">{{'DATASET-PROFILE-EDITOR.STEPS.TOOLKIT.DELETE' | translate}}</span>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngIf="field.get('category').value === 1">
|
||||
<div class="col-2">
|
||||
<mat-form-field>
|
||||
<mat-label>Type</mat-label>
|
||||
<mat-select placeholder="Type" formControlName="type" required>
|
||||
<mat-option *ngFor="let extraFieldType of getExtraFieldTypes()" [value]="extraFieldType">
|
||||
{{getExtraFieldTypeValue(extraFieldType)}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<mat-form-field>
|
||||
<mat-label>Label</mat-label>
|
||||
<input matInput type="text" name="label" formControlName="label" required>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<mat-form-field>
|
||||
<mat-label>Placeholder</mat-label>
|
||||
<input matInput type="text" name="placeholder" formControlName="placeholder" required>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<mat-form-field>
|
||||
<mat-label>Description</mat-label>
|
||||
<input matInput type="text" name="description" formControlName="description">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="centered-row-item col-1">
|
||||
<mat-checkbox formControlName="required">
|
||||
Required
|
||||
</mat-checkbox>
|
||||
</div>
|
||||
<div class="field-delete col-1" (click)="removeExtraField(sectionIndex, fieldIndex)">
|
||||
<mat-icon class="field-delete-icon">delete</mat-icon>
|
||||
<span class="field-delete-text">{{'DATASET-PROFILE-EDITOR.STEPS.TOOLKIT.DELETE' | translate}}</span>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<!-- <mat-form-field>
|
||||
<mat-label>Description Templates</mat-label> -->
|
||||
<app-multiple-auto-complete placeholder="Description Templates2" [hidePlaceholder]="true" required='false' [configuration]="profilesAutoCompleteConfiguration">
|
||||
</app-multiple-auto-complete>
|
||||
<!-- <button matSuffix class="input-btn" (click)="allAvailableProfiles($event)">
|
||||
<mat-icon class="icon-btn">view_list</mat-icon>
|
||||
</button> -->
|
||||
<!-- </mat-form-field> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<ng-container formArrayName="systemFields">
|
||||
<div *ngFor="let systemField of systemFieldsArray(sectionIndex).controls; let systemFieldIndex=index;">
|
||||
<ng-container [formGroupName]="systemFieldIndex">
|
||||
<div class="col-12" *ngIf="systemFieldsArray(sectionIndex).length > 0">
|
||||
<!-- <div *ngFor="let systemField of systemFieldsArray(sectionIndex).value; let i=index;" class="section-input" style="width: 100%;"> -->
|
||||
<div class="row">
|
||||
<div class="col-3">
|
||||
<mat-form-field>
|
||||
<mat-label>System Field</mat-label>
|
||||
<input matInput disabled value="{{transfromEnumToString(systemField.get('type').value)}}" type="text" name="name">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<mat-form-field>
|
||||
<mat-label>Label</mat-label>
|
||||
<input matInput type="text" name="label" formControlName="label">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<mat-form-field>
|
||||
<mat-label>Placeholder</mat-label>
|
||||
<input matInput type="text" name="placeholder" formControlName="placeholder">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<mat-form-field>
|
||||
<mat-label>Description</mat-label>
|
||||
<input matInput type="text" name="description" formControlName="description">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<!-- <div class="col-3">
|
||||
<mat-checkbox style="margin-top: 4%;" formControlName="required">Required</mat-checkbox>
|
||||
</div> -->
|
||||
</div>
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<ng-container formArrayName="extraFields">
|
||||
<div class="col-12">
|
||||
<div class="row" *ngFor="let extraField of extraFieldsArray(sectionIndex).controls; let extraFieldIndex=index;">
|
||||
<ng-container [formGroupName]="extraFieldIndex">
|
||||
<mat-form-field class="col-3">
|
||||
<mat-label>Label</mat-label>
|
||||
<input matInput type="text" name="label" formControlName="label" required>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="col-3">
|
||||
<mat-label>Description</mat-label>
|
||||
<input matInput type="text" name="description" formControlName="description">
|
||||
</mat-form-field>
|
||||
<mat-form-field class="col-3">
|
||||
<mat-label>Type</mat-label>
|
||||
<mat-select placeholder="Type" formControlName="type" required>
|
||||
<mat-option *ngFor="let extraFieldType of getExtraFieldTypes()" [value]="extraFieldType">
|
||||
{{getExtraFieldTypeValue(extraFieldType)}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<div class="centered-row-item col-1">
|
||||
<mat-checkbox formControlName="required">
|
||||
Required
|
||||
</mat-checkbox>
|
||||
</div>
|
||||
<div class="extra-field-delete col-1" (click)="removeExtraField(sectionIndex, extraFieldIndex)">
|
||||
<mat-icon class="extra-field-delete-icon">delete</mat-icon>
|
||||
<span class="extra-field-delete-text">{{'DATASET-PROFILE-EDITOR.STEPS.TOOLKIT.DELETE' | translate}}</span>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="row">
|
||||
<div class="col-auto">
|
||||
<button mat-button class="action-btn" type="button" (click)="addExtraField(sectionIndex)">Add extra field</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</ng-container>
|
||||
|
||||
<div class="col-12">
|
||||
<!-- <div class="col-12">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="col-12"> -->
|
||||
<!-- <mat-form-field>
|
||||
<mat-label>Description Templates</mat-label>
|
||||
<mat-select (selectionChange)="addDescriptionTemplate($event, sectionIndex)" multiple>
|
||||
<mat-option *ngFor="let descTemplate of descriptionsList">{{descTemplate}}</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field> -->
|
||||
<mat-form-field>
|
||||
<!-- <mat-form-field>
|
||||
<mat-label>Description Templates</mat-label>
|
||||
<app-multiple-auto-complete placeholder="Description Templates2" [hidePlaceholder]="true" required='false' [formControl]="section.get('descriptionTemplates')" [configuration]="profilesAutoCompleteConfiguration" (optionRemoved)="onRemoveTemplate($event, sectionIndex)" (optionActionClicked)="onPreviewTemplate($event, sectionIndex)" (optionSelected)="onOptionSelected(sectionIndex)">
|
||||
</app-multiple-auto-complete>
|
||||
</app-multiple-auto-complete> -->
|
||||
<!-- <button matSuffix class="input-btn" (click)="allAvailableProfiles($event)">
|
||||
<mat-icon class="icon-btn">view_list</mat-icon>
|
||||
</button> -->
|
||||
</mat-form-field>
|
||||
<!-- </mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- <ng-container formArrayName="descriptionTemplates">
|
||||
<div *ngFor="let descriptionTemplate of descriptionTemplatesArray(sectionIndex).controls; let j=index;" class="section-input" style="width: 100%;">
|
||||
<ng-container [formGroupName]="j">
|
||||
|
|
@ -243,7 +280,7 @@
|
|||
</ul>
|
||||
</div> -->
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="row">
|
||||
|
|
|
|||
|
|
@ -102,18 +102,18 @@
|
|||
}
|
||||
}
|
||||
|
||||
.extra-field-delete{
|
||||
.field-delete{
|
||||
align-items: center;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
|
||||
.extra-field-delete-icon{
|
||||
.field-delete-icon{
|
||||
font-size: 1.2em;
|
||||
width: 14px;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.extra-field-delete-text{
|
||||
.field-delete-text{
|
||||
font-size: 1em;
|
||||
margin-left: 0.5em;
|
||||
color: var(--primary-color);
|
||||
|
|
|
|||
|
|
@ -32,10 +32,11 @@ import { DatasetProfileCriteria } from '@app/core/query/dataset-profile/dataset-
|
|||
import { DmpService } from '@app/core/services/dmp/dmp.service';
|
||||
import { AvailableProfilesComponent } from '@app/ui/dmp/editor/available-profiles/available-profiles.component';
|
||||
import { DatasetPreviewDialogComponent } from '@app/ui/dmp/dataset-preview/dataset-preview-dialog.component';
|
||||
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
|
||||
import { DmpBlueprint, DmpBlueprintDefinition, ExtraFieldType, SystemFieldType } from '@app/core/model/dmp/dmp-blueprint/dmp-blueprint';
|
||||
import { CdkDragDrop, CdkDropList, CdkDrag, moveItemInArray } from '@angular/cdk/drag-drop';
|
||||
import { DmpBlueprint, DmpBlueprintDefinition, ExtraFieldType, FieldCategory, SystemFieldType } from '@app/core/model/dmp/dmp-blueprint/dmp-blueprint';
|
||||
import { DmpBlueprintEditor } from './dmp-blueprint-editor.model';
|
||||
import { Guid } from '@common/types/guid';
|
||||
import { isNullOrUndefined } from '@app/utilities/enhancers/utils';
|
||||
|
||||
|
||||
@Component({
|
||||
|
|
@ -172,10 +173,11 @@ export class DmpProfileEditorComponent extends BaseComponent implements AfterVie
|
|||
label: this.fb.control(''),
|
||||
description: this.fb.control(''),
|
||||
ordinal: this.fb.control(ordinal),
|
||||
systemFields: this.fb.array([]),
|
||||
fields: this.fb.array([]),
|
||||
//systemFields: this.fb.array([]),
|
||||
descriptionTemplates: this.fb.control(''),
|
||||
// this.fb.array([this.initDescriptionTemplate()]),
|
||||
extraFields: this.fb.array([])
|
||||
//extraFields: this.fb.array([])
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -187,6 +189,31 @@ export class DmpProfileEditorComponent extends BaseComponent implements AfterVie
|
|||
this.sectionsArray().removeAt(sectionIndex);
|
||||
}
|
||||
|
||||
fieldsArray(sectionIndex: number): FormArray {
|
||||
return this.sectionsArray().at(sectionIndex).get('fields') as FormArray;
|
||||
}
|
||||
|
||||
initField(fieldCategory: FieldCategory, fieldType?: number): FormGroup {
|
||||
return this.fb.group({
|
||||
id: this.fb.control(Guid.create().toString()),
|
||||
category: this.fb.control(fieldCategory),
|
||||
label: this.fb.control(''),
|
||||
placeholder: this.fb.control(''),
|
||||
description: this.fb.control(''),
|
||||
type: (isNullOrUndefined(fieldType)) ? this.fb.control('') : this.fb.control(fieldType),
|
||||
required: (!isNullOrUndefined(fieldType) && (fieldType == 0 || fieldType == 1)) ? this.fb.control(true) : this.fb.control(false),
|
||||
ordinal: this.fb.control('')
|
||||
});
|
||||
}
|
||||
|
||||
addField(sectionIndex: number, fieldCategory: FieldCategory, fieldType?: number): void {
|
||||
this.fieldsArray(sectionIndex).push(this.initField(fieldCategory, fieldType));
|
||||
}
|
||||
|
||||
removeField(sectionIndex: number, fieldIndex: number): void {
|
||||
this.fieldsArray(sectionIndex).removeAt(fieldIndex);
|
||||
}
|
||||
|
||||
systemFieldsArray(sectionIndex: number): FormArray {
|
||||
return this.sectionsArray().at(sectionIndex).get('systemFields') as FormArray;
|
||||
}
|
||||
|
|
@ -204,7 +231,7 @@ export class DmpProfileEditorComponent extends BaseComponent implements AfterVie
|
|||
}
|
||||
|
||||
addSystemField(sectionIndex: number, systemField?: SystemFieldType): void {
|
||||
this.systemFieldsArray(sectionIndex).push(this.initSystemField(systemField));
|
||||
this.fieldsArray(sectionIndex).push(this.initField(FieldCategory.SYSTEM, systemField));
|
||||
}
|
||||
|
||||
transfromEnumToString(type: SystemFieldType): string{
|
||||
|
|
@ -227,8 +254,8 @@ export class DmpProfileEditorComponent extends BaseComponent implements AfterVie
|
|||
let i = 0;
|
||||
for (let s in this.sectionsArray().controls) {
|
||||
if (i != sectionIndex) {
|
||||
for (let f of this.systemFieldsArray(i).controls) {
|
||||
if (f.get('type').value == systemField) {
|
||||
for (let f of this.fieldsArray(i).controls) {
|
||||
if (f.get('category').value == FieldCategory.SYSTEM && f.get('type').value == systemField) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
|
@ -239,14 +266,14 @@ export class DmpProfileEditorComponent extends BaseComponent implements AfterVie
|
|||
}
|
||||
|
||||
removeSystemFieldWithIndex(sectionIndex: number, fieldIndex: number): void {
|
||||
this.systemFieldsArray(sectionIndex).removeAt(fieldIndex);
|
||||
this.fieldsArray(sectionIndex).removeAt(fieldIndex);
|
||||
}
|
||||
|
||||
removeSystemField(sectionIndex: number, systemField: SystemFieldType): void {
|
||||
let i = 0;
|
||||
for(let sf of this.systemFieldsArray(sectionIndex).controls){
|
||||
if(sf.get('type').value == systemField){
|
||||
this.systemFieldsArray(sectionIndex).removeAt(i);
|
||||
for(let f of this.fieldsArray(sectionIndex).controls){
|
||||
if(f.get('category').value == FieldCategory.SYSTEM && f.get('type').value == systemField){
|
||||
this.fieldsArray(sectionIndex).removeAt(i);
|
||||
return;
|
||||
}
|
||||
i++;
|
||||
|
|
@ -293,11 +320,11 @@ export class DmpProfileEditorComponent extends BaseComponent implements AfterVie
|
|||
}
|
||||
|
||||
addExtraField(sectionIndex: number): void {
|
||||
this.extraFieldsArray(sectionIndex).push(this.initExtraField());
|
||||
this.fieldsArray(sectionIndex).push(this.initField(FieldCategory.EXTRA));
|
||||
}
|
||||
|
||||
removeExtraField(sectionIndex: number, extraFieldIndex: number): void {
|
||||
this.extraFieldsArray(sectionIndex).removeAt(extraFieldIndex);
|
||||
removeExtraField(sectionIndex: number, fieldIndex: number): void {
|
||||
this.fieldsArray(sectionIndex).removeAt(fieldIndex);
|
||||
}
|
||||
|
||||
getExtraFieldTypes(): Number[] {
|
||||
|
|
@ -319,12 +346,14 @@ export class DmpProfileEditorComponent extends BaseComponent implements AfterVie
|
|||
onSubmitTest(): void {
|
||||
}
|
||||
|
||||
drop(event: CdkDragDrop<string[]>) {
|
||||
this.moveItemInFormArray(
|
||||
this.systemFieldsArray(0),
|
||||
event.previousIndex,
|
||||
event.currentIndex
|
||||
);
|
||||
drop(event: CdkDragDrop<string[]>, sectionIndex: number) {
|
||||
moveItemInArray(this.fieldsArray(sectionIndex).controls, event.previousIndex, event.currentIndex);
|
||||
moveItemInArray(this.fieldsArray(sectionIndex).value, event.previousIndex, event.currentIndex);
|
||||
}
|
||||
|
||||
dropSections(event: CdkDragDrop<string[]>) {
|
||||
moveItemInArray(this.sectionsArray().controls, event.previousIndex, event.currentIndex);
|
||||
moveItemInArray(this.sectionsArray().value, event.previousIndex, event.currentIndex);
|
||||
}
|
||||
|
||||
moveItemInFormArray(formArray: FormArray, fromIndex: number, toIndex: number): void {
|
||||
|
|
@ -458,13 +487,13 @@ export class DmpProfileEditorComponent extends BaseComponent implements AfterVie
|
|||
this.router.navigate(['/dmp-profiles']);
|
||||
}
|
||||
|
||||
addField() {
|
||||
(<FormArray>this.formGroup.get('definition').get('fields')).push(new DmpProfileFieldEditorModel().buildForm());
|
||||
}
|
||||
// addField() {
|
||||
// (<FormArray>this.formGroup.get('definition').get('fields')).push(new DmpProfileFieldEditorModel().buildForm());
|
||||
// }
|
||||
|
||||
removeField(index: number) {
|
||||
(<FormArray>this.formGroup.get('definition').get('fields')).controls.splice(index, 1);
|
||||
}
|
||||
// removeField(index: number) {
|
||||
// (<FormArray>this.formGroup.get('definition').get('fields')).controls.splice(index, 1);
|
||||
// }
|
||||
|
||||
getDMPProfileFieldDataTypeValues(): Number[] {
|
||||
let keys: string[] = Object.keys(DmpProfileFieldDataType);
|
||||
|
|
|
|||
|
|
@ -65,8 +65,27 @@
|
|||
</div>
|
||||
<div class="col-auto form" id="editor-form">
|
||||
<div class="col-12 blueprint-section" [hidden]="this.step !== 0">
|
||||
<div class="dmp-blueprint-form">
|
||||
<div class="input-form">
|
||||
<div class="heading2">0.1 Title of DMP *</div>
|
||||
<mat-form-field>
|
||||
<mat-label>Title</mat-label>
|
||||
<input matInput type="text" name="label" [formControl]="formGroup.get('label')" required>
|
||||
<!-- <mat-error *ngIf="formGroup.get('label').hasError('backendError')">
|
||||
{{formGroup.get('label').getError('backendError').message}}</mat-error>
|
||||
<mat-error *ngIf="formGroup.get('label').hasError('required')">
|
||||
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> -->
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="input-form">
|
||||
<div class="heading2">0.2 Description of DMP *</div>
|
||||
<rich-text-editor-component [parentFormGroup]="formGroup" [controlName]="'description'"
|
||||
[placeholder]="'Fill with description'" [required]="true">
|
||||
</rich-text-editor-component>
|
||||
</div>
|
||||
<div class="dmp-blueprint-form" style="margin-top: 3%;">
|
||||
<div class="heading2">0.3 Blueprint of DMP *</div>
|
||||
<mat-form-field>
|
||||
<mat-label>Select blueprint</mat-label>
|
||||
<app-single-auto-complete [required]="false" [formControl]="formGroup.get('profile')" placeholder="Select blueprint" [configuration]="dmpBlueprintAutoCompleteConfiguration">
|
||||
</app-single-auto-complete>
|
||||
</mat-form-field>
|
||||
|
|
|
|||
|
|
@ -368,6 +368,17 @@ a:hover {
|
|||
}
|
||||
}
|
||||
|
||||
.heading2 {
|
||||
text-align: left;
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
letter-spacing: 0px;
|
||||
color: #212121;
|
||||
opacity: 0.81;
|
||||
margin-top: 1.625rem;
|
||||
margin-bottom: 0.625rem;
|
||||
}
|
||||
|
||||
::ng-deep .input-form .mat-form-field-appearance-outline .mat-form-field-outline {
|
||||
background: #fafafa !important;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue