improved preview product offering (a4452558) · Commits · OSL / code / org.etsi.osl.tmf.web

src/app/app-products-routing.module.ts

+3 −0

Original line number	Diff line number	Diff line
		@@ -15,6 +15,7 @@ import { EditIndividualsComponent } from './shared/components/partyManagement/ed
		import { ListProductOfferingsComponent } from './p_product/admin/productCatalogManagement/list-product-offerings/list-product-offerings.component';
		import { EditProductCatalogsComponent } from './p_product/admin/productCatalogManagement/edit-product-catalogs/edit-product-catalogs.component';
		import { EditProductOfferingsComponent } from './p_product/admin/productCatalogManagement/edit-product-offerings/edit-product-offerings.component';
		import { ProductOrderCheckoutComponent } from './p_product/orderCheckout/product-order-checkout/product-order-checkout.component';

		const routes: Routes = [

		@@ -29,6 +30,8 @@ const routes: Routes = [
		{ path: 'product_category_update/:id', component: EditProductCategoriesComponent },
		{ path: 'product_category_update', component: EditProductCategoriesComponent },

		{ path: 'product_order_checkout', component: ProductOrderCheckoutComponent },

		{ path: 'product_offerings', component: ListProductOfferingsComponent },
		{ path: 'product_offering_update/:id', component: EditProductOfferingsComponent },
		{ path: 'product_offering_update', component: EditProductOfferingsComponent },

src/app/app-products.module.ts

+3 −1

Original line number	Diff line number	Diff line
		@@ -25,6 +25,7 @@ import { AssignProductOfferingsComponent } from './p_product/admin/productCatalo
		import { AssignSubcategoriesComponent } from './p_product/admin/productCatalogManagement/edit-product-categories/assign-subcategories/assign-subcategories.component';
		import { ConfirmCharacteristicAssignmentComponent } from './p_product/admin/productCatalogManagement/edit-product-specs/assign-service-specification/confirm-characteristic-assignment/confirm-characteristic-assignment.component';
		import { SortByValuePipe } from './p_product/admin/productCatalogManagement/edit-product-offerings/sort-by-value.pipe';
		import { ProductOrderCheckoutComponent } from './p_product/orderCheckout/product-order-checkout/product-order-checkout.component';

		@NgModule({
		declarations: [
		@@ -49,7 +50,8 @@ import { SortByValuePipe } from './p_product/admin/productCatalogManagement/edit
		PreviewMarketPlaceItemComponent,
		AssignProductOfferingsComponent,
		AssignSubcategoriesComponent,
		SortByValuePipe
		SortByValuePipe,
		ProductOrderCheckoutComponent
		],
		imports: [
		CommonModule,

src/app/p_product/marketplace/preview-market-place-item/preview-market-place-item.component.html

+44 −28

Original line number	Diff line number	Diff line
		@@ -14,12 +14,14 @@

		<div class="col-md-8" >
		<div class="header-section">{{productOffering?.name}}</div>
		<!-- <div class="separator-div"></div> -->
		<div class="mt-1">
		<!-- <div class="badge badge-info mr-1"
		*ngFor="let category of offering.category">
		<div class="badge badge-info mr-1"
		*ngFor="let category of productOffering.category">
		{{category.name}}
		</div> -->
		</div>
		</div>

		<div class="mt-1">
		</div>

		<div class="row mt-3 general-info-tab">
		@@ -29,14 +31,6 @@
		{{productOffering?.version}}
		</div>
		</div>
		<div class="col-6">
		<b>Bundle</b>
		<div>
		<span *ngIf="productSpec">{{productSpec?.isBundle}}</span>
		<span *ngIf="!productSpec && finishedLoading">Not Specified</span>
		</div>
		</div>

		</div>

		<button *ngIf="(authService.isAuthenticated$ \| async)" type="button" class="btn btn-primary my-3" (click)="placeInOrderList()">
		@@ -47,7 +41,6 @@
		<div *ngIf="!(authService.isAuthenticated$ \| async)" class="my-3">
		<b class="shadowed">You must be logged in to place an order</b>
		</div>
		<!-- <div class="separator-div"></div> -->

		</div>

		@@ -56,33 +49,56 @@
		<div class="general-info-tab">
		<b>Description</b>
		<div class="text-justify mt-2">
		<!-- {{spec?.description}} -->
		<div markdown [data]="productOffering?.description" ngPreserveWhitespaces></div>
		</div>
		</div>

		<!-- <button type="button" class="btn btn-primary " (click)="placeInOrderList()">
		<i class="fas fa-shopping-cart mr-1"></i>
		<span> Place in Order List </span>
		</button> -->
		<div class="separator-div"></div>

		<div class="header-section">Product Characteristics</div>

		<div class="separator-div"></div>

		<div class="no-chars-found" *ngIf="!dataSource.data.length">This product does not contain any configurable characteristics</div>

		</mat-dialog-content>
		<div class="table-responsive text-left" [hidden]="!dataSource.data.length">

		<table mat-table [dataSource]="dataSource" matSort #sort1="matSort" matSortActive="name" matSortDirection="asc" class="table table-generic">
		<ng-container matColumnDef="name">
		<th mat-header-cell *matHeaderCellDef mat-sort-header> Characteristic's Name </th>
		<td mat-cell *matCellDef="let element" matTooltipClass="universal-tooltip" [matTooltip]="element.description"
		matTooltipPosition="above">
		<b>{{element.name}}</b>
		</td>
		</ng-container>

		<div mat-dialog-actions class="d-flex justify-content-end">
		<button type="button" class="btn btn-outline-danger my-2" (click)="closeDialog()">Cancel</button>

		</div>
		<ng-container matColumnDef="defaultValues">
		<th mat-header-cell *matHeaderCellDef> Default Values </th>
		<td mat-cell *matCellDef="let element">
		<span *ngFor="let val of element.productSpecCharacteristicValue; let last = last"
		[class.hidden]="!val \|\| !val.isDefault">

		<div *ngIf="val && val.isDefault">
		{{val.value.value}}
		<span *ngIf="val.value.alias">({{val.value.alias}})</span>
		</div>
		<div *ngIf="last && val.unitOfMeasure" class="value-measureUnits">{{val.unitOfMeasure}}</div>

		</span>
		</td>
		</ng-container>

		<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
		<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
		</table>
		</div>

		</mat-dialog-content>

		</ng-container>

		<div mat-dialog-actions class="d-flex justify-content-end">
		<button type="button" class="btn btn-outline-danger my-2" (click)="closeDialog()">Cancel</button>
		</div>

		</div>
		No newline at end of file

src/app/p_product/marketplace/preview-market-place-item/preview-market-place-item.component.ts

+22 −8

Original line number	Diff line number	Diff line
		import { trigger } from '@angular/animations';
		import { Component, OnInit, Inject } from '@angular/core';
		import { Component, OnInit, Inject, ViewChild } from '@angular/core';
		import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
		import { ProductOffering, ProductSpecification } from 'src/app/openApis/productCatalogManagement/models';
		import { MatSort } from '@angular/material/sort';
		import { MatTableDataSource } from '@angular/material/table';
		import { ProductOffering, ProductSpecification, ProductSpecificationCharacteristicRes } from 'src/app/openApis/productCatalogManagement/models';
		import { ProductSpecificationService } from 'src/app/openApis/productCatalogManagement/services';
		import { fadeIn } from 'src/app/shared/animations/animations';
		import { AuthService } from 'src/app/shared/services/auth.service';
		@@ -31,9 +33,21 @@ export class PreviewMarketPlaceItemComponent implements OnInit {
		finishedLoading: boolean = false
		specLogoUrl: string

		dataSource = new MatTableDataSource<ProductSpecificationCharacteristicRes>();
		displayedColumns = ['name', 'defaultValues'];

		@ViewChild('sort1', {static: true}) sort1: MatSort;


		ngOnInit(): void {
		this.productOffering = this.data.productOffering

		if (this.productOffering.prodSpecCharValueUse) {
		this.dataSource.data = this.productOffering.prodSpecCharValueUse;
		this.dataSource.sort = this.sort1;
		}

		// Logic to fetch logo or extra spec details
		if (this.productOffering.productSpecification && this.productOffering.productSpecification.id) {
		this.retrieveProductSpec(this.data.productOffering)
		} else {
		@@ -48,12 +62,14 @@ export class PreviewMarketPlaceItemComponent implements OnInit {
		error => console.error(error),
		() => {
		this.finishedLoading = true
		//Check if spec has a defined logo
		this.specLogoUrl = this.themingService.getConfig().DEPLOYMENT_LOGO_PATH

		if (this.dataSource.data.length === 0 && this.productSpec.productSpecCharacteristic) {
		this.dataSource.data = this.productSpec.productSpecCharacteristic;
		this.dataSource.sort = this.sort1;
		}
		}
		)


		}

		placeInOrderList() {}
		@@ -61,6 +77,4 @@ export class PreviewMarketPlaceItemComponent implements OnInit {
		closeDialog() {
		this.dialogRef.close()
		}


		}
		No newline at end of file

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

0 → 100644

+217 −0

Original line number	Diff line number	Diff line
		<div class="container py-5">

		<!-- 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>

		<ng-container *ngIf="orderedSpecsConfigurationList.length">

		<div class="row">
		<div class="col-md-8 mb-4">
		<div class="card card-paper shadow">
		<h5 class="card-header">
		Selected Service 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
		</div>

		<div formArray="specCharFormArray" *ngIf="configurableSpecChar.length > 0">
		<div *ngFor="let charForm of specCharFormArray.controls; let i = index; let last = last" [formGroup]="charForm"
		class="row justify-content-center"
		[class.justify-content-start]="charForm.get('valueType').value ==='ARRAY'"
		[ngClass]="{'border-bottom':!last, 'align-items-center':charForm.get('valueType').value !=='ARRAY', 'align-items-baseline':charForm.get('valueType').value ==='ARRAY'}">
		<div class="col-md-6">
		<div class="d-flex align-items-center">
		<i class="fas fa-info-circle mr-2 info-icon" *ngIf="!configurableSpecChar[i].description" matTooltipClass="universal-tooltip" matTooltip="No description available" matTooltipPosition="above"></i>
		<i class="fas fa-info-circle mr-2 info-icon" *ngIf="configurableSpecChar[i].description" matTooltipClass="universal-tooltip" [matTooltip]="configurableSpecChar[i].description" matTooltipPosition="above"></i>
		<b>{{charForm.get('name').value}}</b>
		</div>

		</div>
		<div class="col-md-6" [ngSwitch]="charForm.get('valueType').value">

		<ng-container *ngSwitchCase="'SET'">
		<ng-container *ngTemplateOutlet="iterables"></ng-container>
		</ng-container>

		<ng-container *ngSwitchCase="'ARRAY'">
		<ng-container *ngTemplateOutlet="arrays"></ng-container>
		</ng-container>

		<ng-container *ngSwitchCase="'ENUM'">
		<ng-container *ngTemplateOutlet="enumerable"></ng-container>
		</ng-container>

		<ng-container *ngSwitchCase="'BINARY'">
		<ng-container *ngTemplateOutlet="enumerable"></ng-container>
		</ng-container>

		<ng-container *ngSwitchCase="'TIMESTAMP'">
		<mat-form-field [owlDateTimeTrigger]="pickerFrom">
		<mat-label>Custom Value</mat-label>
		<input matInput [owlDateTime]="pickerFrom" placeholder="Date Time"
		[(ngModel)]="charForm.get('value').value[0].value.value"
		[ngModelOptions]="{standalone: true}">
		<mat-icon matSuffix>date_range</mat-icon>
		<owl-date-time #pickerFrom></owl-date-time>
		</mat-form-field>
		</ng-container>

		<ng-container *ngSwitchDefault>
		<mat-form-field >
		<mat-label>Custom Value</mat-label>
		<input matInput [(ngModel)]="charForm.get('value').value[0].value.value"
		[ngModelOptions]="{standalone: true}">
		</mat-form-field>
		</ng-container>

		<ng-template #iterables>
		<mat-form-field>
		<mat-label>Custom Value</mat-label>
		<mat-select formControlName="value" multiple>
		<mat-option
		*ngFor="let charValue of configurableSpecChar[i].serviceSpecCharacteristicValue"
		[value]="charValue">
		{{charValue.value.alias}}</mat-option>
		</mat-select>
		</mat-form-field>
		</ng-template>

		<ng-template #enumerable>
		<mat-form-field >
		<mat-label>Custom Value</mat-label>
		<mat-select [(ngModel)]="charForm.get('value').value[0]"
		[ngModelOptions]="{standalone: true}">
		<mat-option
		*ngFor="let charValue of configurableSpecChar[i].serviceSpecCharacteristicValue"
		[value]="charValue">
		{{charValue.value.alias}}</mat-option>
		</mat-select>
		</mat-form-field>

		</ng-template>

		<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 class="row">
		<mat-form-field class="col-sm-6 col-md-12 col-xl-6">
		<mat-label>Custom Alias</mat-label>
		<input matInput [(ngModel)]="charValue.value.alias"
		[ngModelOptions]="{standalone: true}">
		</mat-form-field >
		<mat-form-field class="col-sm-6 col-md-12 col-xl-6">
		<mat-label>Custom Value</mat-label>
		<input matInput [(ngModel)]="charValue.value.value"
		[ngModelOptions]="{standalone: true}">
		</mat-form-field>
		</div>
		</div>
		<div class="col-2 d-flex justify-content-center align-items-center" *ngIf="configurableSpecChar[i].serviceSpecCharacteristicValue.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>

		<div class="row mb-3">
		<div class="col-12">
		<button class="btn btn-block btn-success"
		(click)="addToArrayCharacteristicValue(configurableSpecChar[i])"><i
		class="fas fa-plus-circle mr-1"></i>Add new value</button>
		</div>
		</div>

		</div>

		</ng-template>
		</div>
		</div>
		</div>
		</div>

		<div class="card-footer">
		</div>
		</div>
		</div>

		<div class="col-md-4 mb-4">

		<h5 class="d-flex justify-content-between align-items-center mb-3">
		<span class="text-muted">Order Item List</span>
		<span class="badge badge-secondary badge-pill">{{orderedSpecsConfigurationList.length}}</span>
		</h5>

		<ul class="list-group mb-3 card card-paper shadow">
		<li class="list-group-item d-flex justify-content-between align-items-center"
		*ngFor="let item of orderedSpecsConfigurationList" (click)="viewAndConfigureSpec(item)"
		[ngClass]="{'selected-spec': selectedOrderSpecToView === item}">
		<div>
		<h6 class="my-0">{{item.spec.name}}</h6>
		<small class="text-muted">{{item.spec.version}}</small>
		</div>
		<div>
		<button mat-icon-button (click)="removeSpecFromCart(item)"><i
		class="material-icons">close</i></button>
		</div>
		</li>
		</ul>
		</div>
		</div>

		<div class="row" *ngIf="orderedSpecsConfigurationList.length">
		<div class="col-md-12 mb-4">
		<div class="card card-paper shadow">
		<h5 class="card-header">
		Service Order Preferences
		</h5>
		<div class="card-body">
		<div class="row">
		<mat-form-field class="col-12">
		<mat-label>Notes about the order</mat-label>
		<textarea matInput [formControl]="serviceNoteCtrl" cdkTextareaAutosize
		#autosize="cdkTextareaAutosize" cdkAutosizeMinRows="2">
		</textarea>
		</mat-form-field>
		</div>
		<div class="row">
		<mat-form-field class="col-md-6" [owlDateTimeTrigger]="pickerFrom">
		<mat-label>Requested Start Date</mat-label>

		<input matInput [owlDateTime]="pickerFrom" placeholder="Date Time" [formControl]="reqStartDate">
		<mat-icon matSuffix>date_range</mat-icon>
		<owl-date-time #pickerFrom></owl-date-time>
		<mat-hint>Date is displayed in Local Time <span *ngIf="reqStartDate.value">(UTC: {{reqStartDate.value \| date:'dd/MM/yy, HH:mm':'UTC'}})</span></mat-hint>
		</mat-form-field>

		<mat-form-field class="col-md-6" [owlDateTimeTrigger]="pickerUntil">
		<mat-label>Requested Completion Date</mat-label>
		<input matInput [owlDateTime]="pickerUntil" placeholder="Date Time"
		[formControl]="reqCompletionDate">
		<mat-icon matSuffix>date_range</mat-icon>
		<owl-date-time #pickerUntil></owl-date-time>
		<mat-hint>Date is displayed in Local Time <span *ngIf="reqCompletionDate.value">(UTC: {{reqCompletionDate.value \| date:'dd/MM/yy, HH:mm':'UTC'}})</span></mat-hint>
		</mat-form-field>
		</div>
		</div>
		<div class="card-footer">
		</div>
		</div>
		</div>
		</div>
		</ng-container>


		<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>
		</div>
		</div> -->

		</div>
		No newline at end of file