diff options
Diffstat (limited to 'catalog-ui/src/app/ng2/pages/attributes-outputs/attribute-creator')
4 files changed, 248 insertions, 0 deletions
diff --git a/catalog-ui/src/app/ng2/pages/attributes-outputs/attribute-creator/attribute-creator.component.html b/catalog-ui/src/app/ng2/pages/attributes-outputs/attribute-creator/attribute-creator.component.html new file mode 100644 index 0000000000..9687d1e151 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/attributes-outputs/attribute-creator/attribute-creator.component.html @@ -0,0 +1,66 @@ +<!-- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2021 Nordix Foundation. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= +--> + +<div class="attribute-creator"> + <loader [display]="isLoading" [size]="'large'" [relative]="true" [loaderDelay]="500"></loader> + <form class="w-sdc-form"> + + <div class="side-by-side"> + <div class="i-sdc-form-item"> + <label class="i-sdc-form-label required">Name</label> + <input class="i-sdc-form-input" + type="text" + name="propertyName" + data-tests-id="property-name" + [(ngModel)]="attributeModel.name" + [ngModelOptions]="{ debounce: 200 }" + autofocus/> + </div> + <!-- Type --> + <div class="i-sdc-form-item"> + <label class="i-sdc-form-label required">Type</label> + <ui-element-dropdown [testId]="'property-type'" + class="cell link-selector" + [values]="typesAttributes" + [(value)]="attributeModel.type"></ui-element-dropdown> + </div> + <div class="i-sdc-form-item attributeSchemaType" *ngIf="showSchema()"> + <label class="i-sdc-form-label required">Schema Type</label> + <ui-element-dropdown [testId]="'property-type'" + class="cell link-selector" + [values]="typesSchemaAttributes" + [(value)]="attributeModel.schema.property.type"></ui-element-dropdown> + </div> + </div> + + <!-- Description --> + <div class="i-sdc-form-item"> + <label class="i-sdc-form-label">Description</label> + <textarea class="i-sdc-form-textarea" + [pattern]="validation.commentValidationPattern" + name="propertyDescription" + [(ngModel)]="attributeModel.description" + [ngModelOptions]="{ debounce: 200 }" + data-tests-id="property-description" + ></textarea> + </div> + + </form> +</div> diff --git a/catalog-ui/src/app/ng2/pages/attributes-outputs/attribute-creator/attribute-creator.component.less b/catalog-ui/src/app/ng2/pages/attributes-outputs/attribute-creator/attribute-creator.component.less new file mode 100644 index 0000000000..8b5152b06a --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/attributes-outputs/attribute-creator/attribute-creator.component.less @@ -0,0 +1,36 @@ +@import '../../../../../assets/styles/variables.less'; + +.attribute-creator { + font-family: @font-opensans-regular; + user-select: none; + padding-top: 12px; + padding-bottom: 20px; + + .i-sdc-form-label { + font-size: 12px; + } + + .w-sdc-form .i-sdc-form-item { + margin-bottom: 15px; + } + + .side-by-side { + display: flex; + + .i-sdc-form-item { + flex-basis: 100%; + + &:first-child { + flex-basis: 50%; + margin-right: 10px; + } + + } + + .attributeSchemaType { + margin-left: 10px; + } + } + + +} diff --git a/catalog-ui/src/app/ng2/pages/attributes-outputs/attribute-creator/attribute-creator.component.ts b/catalog-ui/src/app/ng2/pages/attributes-outputs/attribute-creator/attribute-creator.component.ts new file mode 100644 index 0000000000..5fc3d5b5ac --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/attributes-outputs/attribute-creator/attribute-creator.component.ts @@ -0,0 +1,98 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2021 Nordix Foundation. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import {Component} from '@angular/core'; +import {DataTypesMap} from 'app/models'; +import {DropdownValue} from 'app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component'; +import {DataTypeService} from 'app/ng2/services/data-type.service'; +import {PROPERTY_DATA} from 'app/utils'; +import * as _ from 'lodash'; +import {PROPERTY_TYPES} from '../../../../utils'; +import {AttributeBEModel} from "../../../../models/attributes-outputs/attribute-be-model"; +import {Validation} from "../../../../view-models/workspace/tabs/general/general-view-model"; + +@Component({ + selector: 'attribute-creator', + templateUrl: './attribute-creator.component.html', + styleUrls: ['./attribute-creator.component.less'], +}) + +export class AttributeCreatorComponent { + + validation:Validation; + typesAttributes: DropdownValue[]; + typesSchemaAttributes: DropdownValue[]; + attributeModel: AttributeBEModel; + dataTypes: DataTypesMap; + isLoading: boolean; + + constructor(protected dataTypeService: DataTypeService) { + } + + ngOnInit() { + this.attributeModel = new AttributeBEModel(); + this.attributeModel.type = ''; + this.attributeModel.schema.property.type = ''; + const types: string[] = PROPERTY_DATA.TYPES; // All types - simple type + map + list + this.dataTypes = this.dataTypeService.getAllDataTypes(); // Get all data types in service + const nonPrimitiveTypes: string[] = _.filter(Object.keys(this.dataTypes), (type: string) => { + return types.indexOf(type) === -1; + }); + + this.typesAttributes = _.map(PROPERTY_DATA.TYPES, + (type: string) => new DropdownValue(type, type) + ); + const typesSimpleProperties = _.map(PROPERTY_DATA.SIMPLE_TYPES, + (type: string) => new DropdownValue(type, type) + ); + const nonPrimitiveTypesValues = _.map(nonPrimitiveTypes, + (type: string) => new DropdownValue(type, + type.replace('org.openecomp.datatypes.heat.', '')) + ) + .sort((a, b) => a.label.localeCompare(b.label)); + this.typesAttributes = _.concat(this.typesAttributes, nonPrimitiveTypesValues); + this.typesSchemaAttributes = _.concat(typesSimpleProperties, nonPrimitiveTypesValues); + this.typesAttributes.unshift(new DropdownValue('', 'Select Type...')); + this.typesSchemaAttributes.unshift(new DropdownValue('', 'Select Schema Type...')); + + } + + checkFormValidForSubmit() { + const showSchema: boolean = this.showSchema(); + const isSchemaValid: boolean = (!(showSchema && !this.attributeModel.schema.property.type)); + if (!showSchema) { + this.attributeModel.schema.property.type = ''; + } + return this.attributeModel.name && this.attributeModel.type && isSchemaValid; + } + + showSchema(): boolean { + return [PROPERTY_TYPES.LIST, PROPERTY_TYPES.MAP].indexOf(this.attributeModel.type) > -1; + } + + onSchemaTypeChange(): void { + if (this.attributeModel.type === PROPERTY_TYPES.MAP) { + this.attributeModel.value = JSON.stringify({'': null}); + } else if (this.attributeModel.type === PROPERTY_TYPES.LIST) { + this.attributeModel.value = JSON.stringify([]); + } + } + +} diff --git a/catalog-ui/src/app/ng2/pages/attributes-outputs/attribute-creator/attribute-creator.module.ts b/catalog-ui/src/app/ng2/pages/attributes-outputs/attribute-creator/attribute-creator.module.ts new file mode 100644 index 0000000000..5779731b63 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/attributes-outputs/attribute-creator/attribute-creator.module.ts @@ -0,0 +1,48 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2021 Nordix Foundation. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import {CommonModule} from '@angular/common'; +import {NgModule} from '@angular/core'; +import {FormsModule} from '@angular/forms'; +import {FormElementsModule} from 'app/ng2/components/ui/form-components/form-elements.module'; +import {UiElementsModule} from 'app/ng2/components/ui/ui-elements.module'; +import {TranslateModule} from '../../../shared/translator/translate.module'; +import {AttributeCreatorComponent} from './attribute-creator.component'; + +@NgModule({ + declarations: [ + AttributeCreatorComponent, + ], + imports: [ + CommonModule, + FormsModule, + FormElementsModule, + UiElementsModule, + TranslateModule + ], + exports: [], + entryComponents: [ + AttributeCreatorComponent + ], + providers: [] +}) + +export class AttributeCreatorModule { +} |