product order checkout ui (bcf31c90) · Commits · OSL / code / org.etsi.osl.tmf.web

src/app/p_product/orderCheckout/product-order-checkout/product-order-checkout.component.html

+10 −10

Original line number	Diff line number	Diff line
		@@ -2,7 +2,7 @@

		<!-- Heading -->
		<h2 class="h2 text-center shadowed mb-5">Product Order Checkout</h2>
		<!--

		<h4 class="row justify-content-center" *ngIf="orderedSpecsConfigurationList.length === 0">
		Product Order List is empty
		</h4>
		@@ -13,13 +13,13 @@
		<div class="col-md-8 mb-4">
		<div class="card card-paper shadow">
		<h5 class="card-header">
		Selected Service Configuration
		Selected Product Configuration
		<small class="text-muted d-block">{{selectedOrderSpecToView?.spec.name}}</small>
		</h5>
		<div class="card-body">

		<div *ngIf="configurableSpecChar.length === 0" class="no-chars-found">
		This service does not contain any configurable characteristics
		This product does not contain any configurable characteristics
		</div>

		<div formArray="specCharFormArray" *ngIf="configurableSpecChar.length > 0">
		@@ -77,7 +77,7 @@
		<mat-label>Custom Value</mat-label>
		<mat-select formControlName="value" multiple>
		<mat-option
		*ngFor="let charValue of configurableSpecChar[i].serviceSpecCharacteristicValue"
		*ngFor="let charValue of configurableSpecChar[i].productSpecCharacteristicValue"
		[value]="charValue">
		{{charValue.value.alias}}</mat-option>
		</mat-select>
		@@ -90,7 +90,7 @@
		<mat-select [(ngModel)]="charForm.get('value').value[0]"
		[ngModelOptions]="{standalone: true}">
		<mat-option
		*ngFor="let charValue of configurableSpecChar[i].serviceSpecCharacteristicValue"
		*ngFor="let charValue of configurableSpecChar[i].productSpecCharacteristicValue"
		[value]="charValue">
		{{charValue.value.alias}}</mat-option>
		</mat-select>
		@@ -101,7 +101,7 @@
		<ng-template #arrays>
		<div>
		<div class="row" *ngFor="let charValue of charForm.get('value').value; let chVi = index">
		<div [ngClass]="{'col-12': configurableSpecChar[i].serviceSpecCharacteristicValue.length === 1, 'col-10': configurableSpecChar[i].serviceSpecCharacteristicValue.length > 1}">
		<div [ngClass]="{'col-12': configurableSpecChar[i].productSpecCharacteristicValue.length === 1, 'col-10': configurableSpecChar[i].productSpecCharacteristicValue.length > 1}">
		<div class="row">
		<mat-form-field class="col-sm-6 col-md-12 col-xl-6">
		<mat-label>Custom Alias</mat-label>
		@@ -115,7 +115,7 @@
		</mat-form-field>
		</div>
		</div>
		<div class="col-2 d-flex justify-content-center align-items-center" *ngIf="configurableSpecChar[i].serviceSpecCharacteristicValue.length > 1">
		<div class="col-2 d-flex justify-content-center align-items-center" *ngIf="configurableSpecChar[i].productSpecCharacteristicValue.length > 1">
		<button mat-icon-button><i class="material-icons" (click)="deleteFromArrayCharacteristicValue(configurableSpecChar[i], chVi)" aria-label="Clear Characteristic Value">clear</i></button>
		</div>
		</div>
		@@ -169,7 +169,7 @@
		<div class="col-md-12 mb-4">
		<div class="card card-paper shadow">
		<h5 class="card-header">
		Service Order Preferences
		Product Order Preferences
		</h5>
		<div class="card-body">
		<div class="row">
		@@ -210,8 +210,8 @@

		<div class="row justify-content-center" *ngIf="orderedSpecsConfigurationList.length">
		<div class="col-12">
		<button class="btn btn-primary btn-block shadow" type="submit" (click)="submitOrder()">Order Service</button>
		<button class="btn btn-primary btn-block shadow" type="submit" (click)="submitOrder()">Order Product</button>
		</div>
		</div>
		</div> -->

		</div>
		No newline at end of file

src/app/p_product/orderCheckout/product-order-checkout/product-order-checkout.component.scss

+31 −0

Original line number	Diff line number	Diff line
		.shadow {
		box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
		}

		.selected-spec {
		// color: #fff;
		background-color: rgba(0, 0, 0, 0.06);
		border-color: #ddd;
		}

		.list-group-item {
		cursor: pointer;
		}

		.container {
		min-height: 40vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		}

		.info-icon {
		color:555;
		cursor: pointer;
		}

		.border-bottom {
		border-bottom: 1px dotted rgba(0, 0, 0, 0.125);
		margin-bottom: .75rem;
		}

src/app/p_product/orderCheckout/product-order-checkout/product-order-checkout.component.ts

+172 −0

Original line number	Diff line number	Diff line
		import { Component, OnInit } from '@angular/core';
		import { ProductRequesterService, productSpecConfigurationListItem } from '../services/product-requester.service';
		import { UntypedFormArray, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
		import { ProductOffering, ProductSpecificationCharacteristicRes } from 'src/app/openApis/productCatalogManagement/models';
		import { Subscription } from 'rxjs';
		import { SortingService } from 'src/app/shared/functions/sorting.service';
		import { ToastrService } from 'ngx-toastr';

		const today = new Date();

		@Component({
		selector: 'app-product-order-checkout',
		@@ -9,7 +16,172 @@ import { Component, OnInit } from '@angular/core';

		export class ProductOrderCheckoutComponent implements OnInit {

		constructor(
		private productRequesterService: ProductRequesterService,
		private sortingService: SortingService,
		private toastr: ToastrService
		) { }

		subscription = new Subscription
		serviceNoteCtrl = new UntypedFormControl('')
		reqStartDate = new UntypedFormControl(new Date())
		reqCompletionDate = new UntypedFormControl(new Date(new Date().setDate(today.getDate()+1)))

		specCharFormArray = new UntypedFormArray([])

		configurableSpecChar: ProductSpecificationCharacteristicRes[] = []

		orderedSpecsConfigurationList: productSpecConfigurationListItem[] = []
		selectedOrderSpecToView: productSpecConfigurationListItem

		ngOnInit(): void {
		if (this.productRequesterService.orderedProductSpecsList.length === 0) {
		this.freshLoadOrderListChanges()
		}

		this.populateOrderedSpecsConfigurationList()
		}



		freshLoadOrderListChanges() {
		let storageOrderArray = []
		storageOrderArray = JSON.parse(localStorage.getItem('orderedSpecsList')) \|\| []

		this.subscription = this.productRequesterService.orderListUpdated$.subscribe(
		() => {
		if (storageOrderArray.length && (storageOrderArray.length === this.productRequesterService.orderedProductSpecsList.length)){
		this.populateOrderedSpecsConfigurationList()
		}
		}
		)
		}

		populateOrderedSpecsConfigurationList() {
		this.productRequesterService.orderedProductSpecsList.forEach( orderedSpec => {
		this.orderedSpecsConfigurationList.push({
		spec: orderedSpec,
		checked: false,
		specCharacteristics: this.initCharacteristicsValue(orderedSpec)
		})
		})

		this.selectedOrderSpecToView = this.orderedSpecsConfigurationList[0]

		if (this.orderedSpecsConfigurationList.length) {
		this.initValuesForm()
		}
		}


		initCharacteristicsValue(orderedSpec: ProductOffering): { name: string; valueType: string; value: import("src/app/openApis/productCatalogManagement/models").ProductSpecificationCharacteristicValue[]; }[] {
		let initialCharValues: {
		name: string,
		valueType: string,
		value: ProductSpecificationCharacteristicRes[]
		}[] = []

		const configurableSpecChar = orderedSpec.prodSpecCharValueUse;

		configurableSpecChar.forEach( confSpecChar => {

		const charDefaultValueArray = confSpecChar.productSpecCharacteristicValue.filter( val => val.isDefault )

		//In case there are no Default Values assigned, initiate Default Value Array with null values
		if (charDefaultValueArray.length === 0) {charDefaultValueArray[0] = {value: {value:'' , alias:''}}}

		initialCharValues.push({
		name: confSpecChar.name,
		valueType: confSpecChar.valueType,
		value: charDefaultValueArray
		})
		})


		return initialCharValues
		}

		initValuesForm() {
		// console.log(this.requesterService.serviceConfigurationList)
		this.specCharFormArray = new UntypedFormArray([])

		const formArray = this.specCharFormArray as UntypedFormArray

		this.configurableSpecChar = this.selectedOrderSpecToView.spec.prodSpecCharValueUse;

		//Sort Configurable Characteristics by Asc Name Order
		this.configurableSpecChar.sort(this.sortingService.ascStringSortingFunctionByNameProperty())

		this.configurableSpecChar.forEach( (confSpecChar) => {
		formArray.push(this.updateFormArrayItem(confSpecChar))
		})

		}

		updateFormArrayItem( specChar: ProductSpecificationCharacteristicRes): UntypedFormGroup {
		const charValueArray = this.orderedSpecsConfigurationList.find(listItem => listItem.spec.id === this.selectedOrderSpecToView.spec.id).specCharacteristics.find(char => char.name === specChar.name).value

		return new UntypedFormGroup({
		name: new UntypedFormControl(specChar.name),
		valueType: new UntypedFormControl(specChar.valueType),
		value: new UntypedFormControl(charValueArray)
		})
		}

		addToArrayCharacteristicValue(characteristic: ProductSpecificationCharacteristicRes) {
		this.orderedSpecsConfigurationList.find(listItem => listItem.spec.id === this.selectedOrderSpecToView.spec.id).specCharacteristics.find(char => char.name === characteristic.name).value.push(
		{
		isDefault: true,
		valueType: characteristic.productSpecCharacteristicValue[0].valueType,
		value: {value: '', alias: ''}
		}
		)
		}

		deleteFromArrayCharacteristicValue(characteristic: ProductSpecificationCharacteristicRes, index) {
		this.orderedSpecsConfigurationList.find(listItem => listItem.spec.id === this.selectedOrderSpecToView.spec.id).specCharacteristics.find(char => char.name === characteristic.name).value.splice(index, 1)
		}

		viewAndConfigureSpec(item: productSpecConfigurationListItem) {

		this.updateActiveProductInList()

		this.selectedOrderSpecToView = item
		this.initValuesForm()
		}

		updateActiveProductInList() {
		this.orderedSpecsConfigurationList.find(listItem => listItem.spec.id === this.selectedOrderSpecToView.spec.id).specCharacteristics = this.specCharFormArray.value
		}

		submitOrder() {
		this.toastr.warning('NA GINEI LINK ME TO SERVICE ORDER');
		}

		removeSpecFromCart(item: productSpecConfigurationListItem) {
		const toBeRemovedSpecIndex = this.orderedSpecsConfigurationList.findIndex(el => el.spec.id === item.spec.id)
		this.selectedOrderSpecToView = null

		this.orderedSpecsConfigurationList.splice(toBeRemovedSpecIndex, 1)
		this.productRequesterService.orderedProductSpecsList.splice(toBeRemovedSpecIndex, 1)
		this.removeOrderFromLocalStorage(item.spec.id)

		if (toBeRemovedSpecIndex === this.orderedSpecsConfigurationList.length) {
		this.selectedOrderSpecToView = this.orderedSpecsConfigurationList[toBeRemovedSpecIndex-1]
		} else {
		this.selectedOrderSpecToView = this.orderedSpecsConfigurationList[toBeRemovedSpecIndex]
		}
		}

		removeOrderFromLocalStorage(specId) {
		let orderArray = []
		orderArray = JSON.parse(localStorage.getItem('orderedProductSpecsList')) \|\| []
		if (orderArray.length){
		orderArray.splice(orderArray.findIndex(el => el === specId), 1)
		}

		localStorage.setItem('orderedProductSpecsList', JSON.stringify(orderArray))
		}


		}

src/app/p_product/orderCheckout/services/product-requester.service.ts

+6 −1

Original line number	Diff line number	Diff line
		@@ -35,5 +35,10 @@ export class ProductRequesterService {
		}
		}
		export interface productSpecConfigurationListItem {

		checked:boolean,
		spec: ProductOffering,
		specCharacteristics: {
		name: string,
		valueType: string,
		value: ProductSpecificationCharacteristicValue[] }[]
		}