added product spec characteristic tab with update/create characteristic dialog (b648407f) · Commits · OSL / code / org.etsi.osl.tmf.web

src/app/app-products.module.ts

+2 −0

Original line number	Diff line number	Diff line
		@@ -10,6 +10,7 @@ import { ListProductSpecsComponent } from './p_product/admin/productCatalogManag
		import { EditProductCatalogsComponent } from './p_product/admin/productCatalogManagement/edit-product-catalogs/edit-product-catalogs.component';
		import { EditProductCategoriesComponent } from './p_product/admin/productCatalogManagement/edit-product-categories/edit-product-categories.component';
		import { EditProductSpecsComponent } from './p_product/admin/productCatalogManagement/edit-product-specs/edit-product-specs.component';
		import { EditProductSpecCharacteristicsComponent } from './p_product/admin/productCatalogManagement/edit-product-specs/edit-product-spec-characteristics/edit-product-spec-characteristics.component';
		import { DeleteProductCatalogsComponent } from './p_product/admin/productCatalogManagement/delete-product-catalogs/delete-product-catalogs.component';
		import { DeleteProductCategoriesComponent } from './p_product/admin/productCatalogManagement/delete-product-categories/delete-product-categories.component';
		import { DeleteProductSpecsComponent } from './p_product/admin/productCatalogManagement/delete-product-specs/delete-product-specs.component';
		@@ -34,6 +35,7 @@ import { AssignSubcategoriesComponent } from './p_product/admin/productCatalogMa
		EditProductCatalogsComponent,
		EditProductCategoriesComponent,
		EditProductSpecsComponent,
		EditProductSpecCharacteristicsComponent,
		DeleteProductCatalogsComponent,
		DeleteProductCategoriesComponent,
		DeleteProductSpecsComponent,

src/app/p_product/admin/productCatalogManagement/edit-product-specs/edit-product-spec-characteristics/edit-product-spec-characteristics.component.html

0 → 100644

+229 −0

Original line number	Diff line number	Diff line
		<div class="container">

		<h4 mat-dialog-title class="row shadowed mb-3" *ngIf="newSpec">
		<i class="far fa-clipboard mr-2"></i>
		<span>Design New Product Characteristic</span>
		</h4>

		<h4 mat-dialog-title class=" shadowed mb-3" *ngIf="!newSpec">
		<i class="far fa-edit mr-2"></i>
		<span>Edit Service Characteristic</span>
		</h4>

		<form [formGroup]="editFormCharacteristic">
		<mat-dialog-content>

		<div class="row justify-content-center align-items-center">
		<mat-form-field class="col-md-12">
		<mat-label>Name</mat-label>
		<input matInput formControlName="name">
		</mat-form-field>

		<mat-form-field class="col-md-12">
		<mat-label>Description</mat-label>
		<textarea matTextareaAutosize="true" matAutosizeMinRows="2" matInput formControlName="description"></textarea>
		</mat-form-field>

		<div class="col-12" formGroupName="validFor">
		<div class="row">
		<mat-form-field class="col-md-6" [owlDateTimeTrigger]="pickerFrom">
		<mat-label>Valid From</mat-label>
		<!-- <input matInput [matDatepicker]="pickerFrom" formControlName="startDateTime">
		<mat-datepicker-toggle matSuffix [for]="pickerFrom"></mat-datepicker-toggle>
		<mat-datepicker #pickerFrom></mat-datepicker> -->

		<input matInput [owlDateTime]="pickerFrom" placeholder="Date Time" formControlName="startDateTime">
		<mat-icon matSuffix>date_range</mat-icon>
		<!-- <span [owlDateTimeTrigger]="dt1"><i class="fa fa-calendar"></i></span> -->
		<owl-date-time #pickerFrom></owl-date-time>
		</mat-form-field>

		<mat-form-field class="col-md-6" [owlDateTimeTrigger]="pickerUntil">
		<mat-label>Valid Until</mat-label>
		<!-- <input matInput [matDatepicker]="pickerUntil" formControlName="endDateTime">
		<mat-datepicker-toggle matSuffix [for]="pickerUntil"></mat-datepicker-toggle>
		<mat-datepicker #pickerUntil></mat-datepicker> -->
		<input matInput [owlDateTime]="pickerUntil" placeholder="Date Time" formControlName="endDateTime">
		<mat-icon matSuffix>date_range</mat-icon>
		<!-- <span [owlDateTimeTrigger]="dt1"><i class="fa fa-calendar"></i></span> -->
		<owl-date-time #pickerUntil></owl-date-time>
		</mat-form-field>
		</div>
		</div>

		<mat-form-field [ngClass]="{'col-lg-2':subTypeSelection, 'col-lg-4':!subTypeSelection}">
		<mat-label>Value Type</mat-label>
		<mat-select formControlName="valueType">
		<mat-option *ngFor="let type of valueTypes" [value]="type">
		{{type}}</mat-option>
		</mat-select>
		</mat-form-field>

		<mat-form-field class="col-lg-2" *ngIf="subTypeSelection">
		<mat-label>Of</mat-label>
		<mat-select [formControl]="subValueTypeCtrl">
		<mat-option *ngFor="let type of subValueTypes" [value]="type">
		{{type}}</mat-option>
		</mat-select>
		</mat-form-field>

		<!-- <mat-form-field appearance="" class="col-md-2">
		<mat-label>Value Sub Type</mat-label>
		<mat-select [formControl]="valueSubType">
		<mat-option *ngFor="let type of valueTypes" [value]="type">
		{{type}}</mat-option>
		</mat-select>
		</mat-form-field> -->

		<mat-form-field class="col-lg-2">
		<mat-label>Min Cardinality</mat-label>
		<input matInput type="number" formControlName="minCardinality">
		</mat-form-field>

		<mat-form-field class="col-lg-2">
		<mat-label>Max Cardinality</mat-label>
		<input matInput type="number" formControlName="maxCardinality">
		</mat-form-field>

		<div class="col-lg-4">
		<div class="row">
		<div class="col-6 text-center">
		<mat-checkbox color="primary" formControlName="extensible">Extensible</mat-checkbox>
		</div>

		<div class="col-6 text-center ">
		<mat-checkbox color="primary" formControlName="configurable">Configurable</mat-checkbox>
		</div>
		</div>
		</div>

		</div>

		<div class="mt-3" *ngIf="editFormCharacteristic.controls.valueType.value">
		<h5 class="shadowed mb-3 d-flex align-items-center">
		<div class="mr-4">
		<i class="fas fa-sort-numeric-up-alt mr-2"></i>
		<span>Service Characteristic Value</span>
		</div>
		<div>
		<button type="button" class="btn btn-success btn-sm" (click)="createFormArrayItem()"><i
		class="fas fa-plus-circle mr-2"></i>Add</button>
		</div>
		</h5>

		<div formArrayName="serviceSpecCharacteristicValue" class="container-fluid">

		<div *ngFor="let val of editFormCharacteristic.get('serviceSpecCharacteristicValue')['controls']; let i = index;"
		[formGroupName]="i" class="row align-items-center justify-content-center characteristic-value-container" [@fadeIn]>

		<ng-template [ngIf]="!isCharValueBlockExpanded[i]" [ngIfElse]="blockExpanded">
		<div formGroupName="value" class="col-lg-6 mt-2">
		<div class="row">
		<mat-form-field class="col-lg-6">
		<mat-label>Alias</mat-label>
		<input matInput formControlName="alias">
		</mat-form-field>
		<mat-form-field class="col-lg-6">
		<mat-label>Value</mat-label>
		<input matInput formControlName="value">
		</mat-form-field>

		</div>
		</div>

		<mat-form-field class="col-lg-2 mt-2">
		<mat-label>Unit Of Measure</mat-label>
		<input matInput formControlName="unitOfMeasure">
		</mat-form-field>

		<div class="col-lg-2 text-center mt-2">
		<mat-checkbox color="primary" formControlName="isDefault" (change)="isDefaultCheckboxChanged(i, $event)">Is
		Default
		</mat-checkbox>
		</div>

		<div class="col-lg-2">
		<div class="row">
		<div class="col-6">
		<div class="text-left text-lg-center mt-1">
		<button class="btn btn-md" (click)="deleteFormArrayItem(i)"><i
		class="far fa-trash-alt" aria-hidden="true" matTooltip="Delete value"></i></button>
		</div>
		</div>

		<div class="col-6">
		<div class="text-right">
		<button class="btn btn-lg" (click)="expandCharValueBlock(i)"><i
		class="fa fa-expand" aria-hidden="true" matTooltip="Expand block"></i></button>
		</div>
		</div>
		</div>
		</div>

		</ng-template>

		<ng-template #blockExpanded>

		<div formGroupName="value" class="col-lg-6 mt-2 order-1">
		<!-- <div class="row"> -->
		<mat-form-field>
		<mat-label>Alias</mat-label>
		<input matInput formControlName="alias">
		</mat-form-field>
		</div>

		<mat-form-field class="col-lg-2 mt-2 order-3 order-md-2">
		<mat-label>Unit Of Measure</mat-label>
		<input matInput formControlName="unitOfMeasure">
		</mat-form-field>

		<div class="col-lg-2 text-center mt-2 order-4">
		<mat-checkbox color="primary" formControlName="isDefault" (change)="isDefaultCheckboxChanged(i, $event)">Is
		Default
		</mat-checkbox>
		</div>


		<div class="col-lg-2 order-5">
		<div class="row">
		<div class="col-6">
		<div class="text-left text-lg-center mt-1">
		<button class="btn btn-md" (click)="deleteFormArrayItem(i)"><i
		class="far fa-trash-alt" aria-hidden="true" matTooltip="Delete value"></i></button>
		</div>
		</div>

		<div class="col-6">
		<div class="text-right">
		<button class="btn btn-lg" (click)="expandCharValueBlock(i)"><i
		class="fa fa-compress" aria-hidden="true" matTooltip="Collapse block"></i></button>
		</div>
		</div>
		</div>
		</div>

		<div class="col-md-12 order-2 order-lg-6" formGroupName="value">
		<mat-form-field>
		<mat-label>Value</mat-label>
		<textarea matTextareaAutosize="true" matAutosizeMaxRows="4" matInput formControlName="value"></textarea>
		<!-- <input matInput formControlName="value"> -->
		</mat-form-field>
		</div>

		</ng-template>

		</div>

		</div>

		</div>

		</mat-dialog-content>
		<div class="container-fluid">
		<div class="row justify-content-end">
		<button type="button" class="btn btn-danger m-2" (click)="closeDialog()">Cancel</button>
		<button type="submit" class="btn btn-success m-2" (click)="submitDialog()">Submit</button>
		</div>
		</div>
		</form>
		</div>

src/app/p_product/admin/productCatalogManagement/edit-product-specs/edit-product-spec-characteristics/edit-product-spec-characteristics.component.scss

0 → 100644

+0 −0

Empty file added.

src/app/p_product/admin/productCatalogManagement/edit-product-specs/edit-product-spec-characteristics/edit-product-spec-characteristics.component.ts

0 → 100644

+210 −0

Original line number	Diff line number	Diff line
		import { Component, OnInit, Inject } from '@angular/core';
		import { MatCheckboxChange } from '@angular/material/checkbox';
		import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
		import { UntypedFormGroup, UntypedFormControl, UntypedFormArray } from '@angular/forms';
		import { ToastrService } from 'ngx-toastr';
		import { Subject } from 'rxjs';
		import { takeUntil } from 'rxjs/operators';
		import { trigger } from '@angular/animations';
		import { fadeIn, simpleFade } from 'src/app/shared/animations/animations';
		import { ProductSpecification, ProductSpecificationCharacteristicRes, ProductSpecificationCharacteristicValue, ProductSpecificationUpdate } from 'src/app/openApis/productCatalogManagement/models';
		import { ProductSpecificationService } from 'src/app/openApis/productCatalogManagement/services';



		@Component({
		selector: 'app-edit-product-spec-characteristics',
		templateUrl: './edit-product-spec-characteristics.component.html',
		styleUrls: ['./edit-product-spec-characteristics.component.scss'],
		animations: [trigger('fadeIn', fadeIn()), trigger('simpleFade', simpleFade())]
		})
		export class EditProductSpecCharacteristicsComponent implements OnInit {

		constructor(
		@Inject(MAT_DIALOG_DATA) public data: {
		productSpec: ProductSpecification,
		specToBeUpdated: ProductSpecificationCharacteristicRes,
		},
		private dialogRef: MatDialogRef<EditProductSpecCharacteristicsComponent>,
		private specService: ProductSpecificationService,
		private toast: ToastrService
		) { }

		editFormCharacteristic = new UntypedFormGroup({
		name: new UntypedFormControl(),
		description: new UntypedFormControl(),
		configurable: new UntypedFormControl(),
		extensible: new UntypedFormControl(),
		maxCardinality: new UntypedFormControl(1),
		minCardinality: new UntypedFormControl(0),
		validFor: new UntypedFormGroup({
		endDateTime: new UntypedFormControl(new Date(new Date().setFullYear(new Date().getFullYear() + 20))),
		startDateTime: new UntypedFormControl(new Date())
		}),
		valueType: new UntypedFormControl(),
		serviceSpecCharacteristicValue: new UntypedFormArray([])
		})

		subValueTypeCtrl = new UntypedFormControl('INTEGER')

		valueTypes = ['INTEGER', 'SMALLINT', 'LONGINT', 'FLOAT', 'BINARY', 'BOOLEAN', 'ARRAY', 'SET', 'TEXT', 'LONGTEXT', 'ENUM', 'TIMESTAMP']
		subValueTypes = ['INTEGER', 'SMALLINT', 'LONGINT', 'FLOAT', 'BINARY', 'BOOLEAN', 'TEXT', 'LONGTEXT', 'TIMESTAMP']

		// valueSubType = new FormControl()
		subTypeSelection: boolean = false

		newSpec: boolean = false

		compDestroy$ = new Subject()

		isCharValueBlockExpanded: boolean[] = []

		ngOnInit(): void {
		if (this.data.specToBeUpdated) {
		if (!this.data.specToBeUpdated.validFor) this.data.specToBeUpdated.validFor = { endDateTime: null, startDateTime: null }
		this.editFormCharacteristic.patchValue(this.data.specToBeUpdated)

		const formArray = this.editFormCharacteristic.get('serviceSpecCharacteristicValue') as UntypedFormArray
		this.data.specToBeUpdated.productSpecCharacteristicValue.forEach(val => {
		formArray.push(this.updateFormArrayItem(val))
		this.isCharValueBlockExpanded.push(false)
		})

		this.subValueTypeCtrl.patchValue(this.data.specToBeUpdated.productSpecCharacteristicValue[0].valueType)
		if (['SET', 'ARRAY', 'ENUM'].includes(this.data.specToBeUpdated.valueType)) {
		this.subTypeSelection = true
		}
		}

		else { this.newSpec = true }

		this.editFormCharacteristic.get('valueType').valueChanges.pipe(
		takeUntil(this.compDestroy$)
		)
		.subscribe(
		val => {
		this.editFormCharacteristic.setControl('serviceSpecCharacteristicValue', new UntypedFormArray([]))
		this.createFormArrayItem()


		if (['SET', 'ARRAY', 'ENUM'].includes(val)) {
		this.subTypeSelection = true
		this.subValueTypeCtrl.valueChanges.pipe(
		takeUntil(this.compDestroy$)
		)
		.subscribe(
		subVal => {
		this.editFormCharacteristic.setControl('serviceSpecCharacteristicValue', new UntypedFormArray([]))
		this.createFormArrayItem()
		}
		)
		} else {
		this.subTypeSelection = false
		}
		// const formArray = this.editFormCharacteristic.get('serviceSpecCharacteristicValue') as FormArray
		// if (val !== 'ARRAY' && val !=='ENUM' && val !=='SET') {
		// this.subTypeSelection = false
		// formArray.setControl(0,
		// new FormGroup({
		// value: new FormGroup({
		// alias: new FormControl(),
		// value: new FormControl(),
		// }),
		// unitOfMeasure: new FormControl(),
		// isDefault: new FormControl(),
		// valueType: new FormControl(this.editFormCharacteristic.get('valueType').value)
		// }))
		// }
		}
		)
		}


		updateFormArrayItem(CharValue: ProductSpecificationCharacteristicValue): UntypedFormGroup {
		return new UntypedFormGroup({
		value: new UntypedFormGroup({
		alias: new UntypedFormControl(CharValue.value.alias),
		value: new UntypedFormControl(CharValue.value.value),
		}),
		unitOfMeasure: new UntypedFormControl(CharValue.unitOfMeasure),
		isDefault: new UntypedFormControl({ value: (CharValue.isDefault \|\| this.data.specToBeUpdated.valueType === 'ARRAY'), disabled: this.data.specToBeUpdated.valueType === 'ARRAY' }),
		valueType: new UntypedFormControl(CharValue.valueType)
		})
		}


		createFormArrayItem() {
		const formArray = this.editFormCharacteristic.get('serviceSpecCharacteristicValue') as UntypedFormArray

		// let isDisabled: boolean = true
		let subType: string = this.editFormCharacteristic.get('valueType').value

		if (['SET', 'ARRAY', 'ENUM'].includes(this.editFormCharacteristic.get('valueType').value)) {
		// isDisabled = false
		subType = this.subValueTypeCtrl.value
		}

		formArray.push(
		new UntypedFormGroup({
		value: new UntypedFormGroup({
		alias: new UntypedFormControl(),
		value: new UntypedFormControl(),
		}),
		unitOfMeasure: new UntypedFormControl(),
		isDefault: new UntypedFormControl({ value: this.editFormCharacteristic.get('valueType').value === 'ARRAY', disabled: this.editFormCharacteristic.get('valueType').value === 'ARRAY' }),
		valueType: new UntypedFormControl(subType)
		})
		)
		this.isCharValueBlockExpanded.push(false)
		}

		deleteFormArrayItem(index) {
		const formArray = this.editFormCharacteristic.get('serviceSpecCharacteristicValue') as UntypedFormArray
		formArray.removeAt(index)
		this.isCharValueBlockExpanded.splice(index, 1)
		}

		expandCharValueBlock(index) {
		this.isCharValueBlockExpanded[index] = !this.isCharValueBlockExpanded[index]
		}

		isDefaultCheckboxChanged(index, event: MatCheckboxChange) {
		if (this.editFormCharacteristic.get('valueType').value === "ENUM" && event.checked) {
		const formArray = this.editFormCharacteristic.get('serviceSpecCharacteristicValue') as UntypedFormArray
		for (let i = 0; i < formArray.controls.length; i++) {
		if (i !== index) formArray.controls[i].get('isDefault').setValue(false)
		}
		}
		}


		closeDialog() {
		this.dialogRef.close()
		}

		submitDialog() {

		if (this.newSpec) {
		this.data.productSpec.productSpecCharacteristic.push(this.editFormCharacteristic.getRawValue())
		} else {
		// const updateCharacteristIndex = this.data.productSpec.productSpecCharacteristic.findIndex(char => char.id === this.data.specToBeUpdated.id)
		// this.data.productSpec.productSpecCharacteristic[updateCharacteristIndex] = this.editFormCharacteristic.getRawValue()
		}

		const updateCharacteristicObj: ProductSpecificationUpdate = {
		productSpecCharacteristic: this.data.productSpec.productSpecCharacteristic
		}

		this.specService.patchProductSpecification({ id: this.data.productSpec.id, productSpecification: updateCharacteristicObj }).subscribe(
		data => { },
		error => { console.error(error); this.toast.error("An error occurred upon updating Spec Characteristics") },
		() => { this.dialogRef.close('updated') }
		)
		}

		ngOnDestroy(): void {
		this.compDestroy$.next("destroyed")
		}


		}
		No newline at end of file

src/app/p_product/admin/productCatalogManagement/edit-product-specs/edit-product-specs.component.html

+114 −0

File changed.

Preview size limit exceeded, changes collapsed.