Merge branch '41-implement-product-offering-design-and-exposure' into 'develop' (11294fab) · Commits · OSL / code / org.etsi.osl.tmf.web

src/app/app-products.module.ts

+3 −2

Original line number	Diff line number	Diff line
		@@ -24,7 +24,7 @@ import { PreviewMarketPlaceItemComponent } from './p_product/marketplace/preview
		import { AssignProductOfferingsComponent } from './p_product/admin/productCatalogManagement/edit-product-categories/assign-product-offerings/assign-product-offerings.component';
		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';

		@NgModule({
		declarations: [
		@@ -48,7 +48,8 @@ import { ConfirmCharacteristicAssignmentComponent } from './p_product/admin/prod
		EditProductOfferingsComponent,
		PreviewMarketPlaceItemComponent,
		AssignProductOfferingsComponent,
		AssignSubcategoriesComponent
		AssignSubcategoriesComponent,
		SortByValuePipe
		],
		imports: [
		CommonModule,

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

+129 −0

Original line number	Diff line number	Diff line
		@@ -151,6 +151,135 @@
		</div>
		<!-- END OF Main Properties Tab -->

		<!-- Product Offering Characteristics Tab -->
		<div class="tab-pane active disable"
		*ngIf="activeListItem === 'Product Offering Characteristics'"
		role="tabpanel">
		<form>
		<div class="card mat-elevation-z1 bg-light">
		<div class="card-body">
		<div class="row align-items-center">

		<div *ngIf="!editForm.value.productSpecification" class="col-12 text-center text-muted">
		<br>
		<h5>Please select a Linked Product Specification in the "Main Properties" tab first.</h5>
		<br>
		</div>

		<div *ngIf="editForm.value.productSpecification" class="col-12">

		<div class="col-12 mb-4">
		<h5>Choose Configurable Characteristics to expose from:
		<a routerLink='/{{appService.portalDomain}}/product_spec_update/{{editForm.value.productSpecification.id}}'>{{editForm.value.productSpecification.name}}</a>
		<dfn class="text-primary"></dfn>
		</h5>
		<small class="text-muted">Select the configurable characteristics to include in the product offering. Expand to select specific characteristic values.</small>
		</div>

		<div *ngIf="availableSpecCharacteristics.length === 0" class="alert alert-warning">
		No characteristics found in the selected Product Specification.
		</div>

		<mat-accordion multi="true">
		<mat-expansion-panel *ngFor="let char of availableSpecCharacteristics" class="mb-2">

		<mat-expansion-panel-header>
		<div class="d-flex align-items-center w-100">
		<mat-checkbox color="primary"
		class="mr-3 mt-2"
		[checked]="isCharacteristicSelected(char)"
		(click)="$event.stopPropagation()"
		(change)="onCharacteristicToggle(char, $event)">
		</mat-checkbox>

		<div class="d-flex flex-column">
		<strong>{{char.name}}</strong>
		<i *ngIf="char.valueType">{{char.valueType}}</i>
		</div>

		<div class="ml-auto mr-3 text-muted" *ngIf="char.productSpecCharacteristicValue?.length > 0">
		<small>{{ getSelectedValuesCount(char) }} / {{ char.productSpecCharacteristicValue.length }} values</small>
		</div>
		</div>
		</mat-expansion-panel-header>

		<ng-template matExpansionPanelContent>
		<div class="pt-3 pb-3">
		<p *ngIf="char.description">{{char.description}}</p>
		<div *ngIf="!char.productSpecCharacteristicValue \|\| char.productSpecCharacteristicValue.length === 0">
		<p class="text-muted font-italic">
		This characteristic has no pre-defined values.
		</p>
		</div>

		<div *ngIf="char.productSpecCharacteristicValue?.length > 0">
		<p class="mb-2 text-primary text-small">Select the characteristic values for this offering:</p>

		<div class="row">
		<div class="col-md-6 col-lg-4" *ngFor="let val of char.productSpecCharacteristicValue \| sortByValue">

		<mat-checkbox color="primary"
		[checked]="isValueSelected(char, val)"
		[disabled]="!isCharacteristicSelected(char)"
		(change)="onValueToggle(char, val, $event)">

		<ng-container *ngIf="val.value; else emptyValue">
		<span *ngIf="val.value.alias">
		{{val.value.alias}}: {{val.value.value}}
		<span *ngIf="val.unitOfMeasure" class="text-muted"> - ({{val.unitOfMeasure}})</span>
		</span>
		<span *ngIf="!val.value.alias">
		{{val.value.value}}
		<span *ngIf="val.unitOfMeasure" class="text-muted">({{val.unitOfMeasure}})</span>
		</span>
		</ng-container>
		<ng-template #emptyValue>
		<span class="text-muted font-italic">Empty Value</span>
		</ng-template>

		</mat-checkbox>
		</div>
		</div>

		<div class="mt-2">
		<button mat-button color="primary" class="btn-sm px-2 mr-3"
		[disabled]="!isCharacteristicSelected(char)"
		(click)="selectAllValues(char)">Select All Values</button>
		<button mat-button color="warn" class="btn-sm px-2"
		[disabled]="!isCharacteristicSelected(char)"
		(click)="deselectAllValues(char)">Deselect All</button>
		</div>
		</div>
		</div>
		</ng-template>


		</mat-expansion-panel>
		</mat-accordion>

		</div>
		</div>

		<div class="container-fluid mt-3" *ngIf="availableSpecCharacteristics.length > 0">
		<div class="row">
		<button type="button" color="primary" mat-button (click)="selectAllCharacteristics()" class="mr-2">Select All Characteristics</button>
		<button type="button" color="warn" mat-button (click)="deselectAllCharacteristics()">Deselect All Characteristics</button>
		</div>
		</div>
		</div>

		<div class="card-footer">
		<button type="submit" class="btn btn-primary float-right"
		(click)="updateOfferingCharacteristics()">
		<i class="fas fa-check mr-2"></i>Submit
		</button>
		</div>
		</div>
		</form>
		</div>

		<!-- END OF Product Offering Characteristics Tab -->

		</div>
		</div>
		</div>

src/app/p_product/admin/productCatalogManagement/edit-product-offerings/edit-product-offerings.component.scss

+3 −0

Original line number	Diff line number	Diff line
		.nav-link:hover {
		cursor: pointer;
		}

src/app/p_product/admin/productCatalogManagement/edit-product-offerings/edit-product-offerings.component.ts

+405 −83

File changed.

Preview size limit exceeded, changes collapsed.

src/app/p_product/admin/productCatalogManagement/edit-product-offerings/sort-by-value.pipe.ts

0 → 100644

+21 −0

Original line number	Diff line number	Diff line
		import { Pipe, PipeTransform } from '@angular/core';

		@Pipe({
		name: 'sortByValue'
		})
		export class SortByValuePipe implements PipeTransform {

		transform(values: any[]): any[] {
		if (!values \|\| !Array.isArray(values)) {
		return [];
		}

		return [...values].sort((a, b) => {
		const labelA = (a.value?.alias \|\| a.value?.value \|\| '').toString().toLowerCase();
		const labelB = (b.value?.alias \|\| b.value?.value \|\| '').toString().toLowerCase();

		return labelA.localeCompare(labelB, undefined, { numeric: true });
		});
		}

		}
		No newline at end of file