Commit a4452558 authored by Michail Tzanatos's avatar Michail Tzanatos
Browse files

improved preview product offering

parent 11294fab
Loading
Loading
Loading
Loading
+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 },
+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,
+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
+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
+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
Loading