Resolve "Support the listing and selection out of available primitives in the service inventory"

<div class="container">

    <h4 mat-dialog-title class="shadowed mb-3">

        <i class="fa fa-tasks mr-2"></i>

        <span>Supporting Service Information</span>

    </h4>

    <mat-dialog-content>

        <form class="row justify-content-center" [formGroup]="editForm">

            <div class="col-lg-4">

                <h6>ID</h6>

                <p>{{supportingService?.id}}</p>

            </div>

            <div class="col-lg-4">

                <h6>Name</h6>

                <p>{{supportingService?.name}}</p>

            </div>

            <div class="col-lg-4">

                <h6>Desc</h6>

                <p>{{supportingService?.description}}</p>

            </div>

            <div class="col-lg-4">

                <h6>Service Type</h6>

                <p>{{supportingService?.serviceType}}</p>

            </div>

            <div class="col-lg-4">

                <h6>Category</h6>

                <p>{{supportingService?.category}}</p>

            </div>

            <div class="col-lg-4">

                <h6>Specification</h6>

                <p><a routerLink='/{{appService.portalDomain}}/service_spec_update/{{supportingService?.serviceSpecification.id}}'>{{supportingService?.serviceSpecification.name}}</a></p>

            </div>

            <div class="col-lg-4">

                <h6>Start Date</h6>

                <p [class.mb-0]="supportingService?.startDate">{{supportingService?.startDate | date:'d MMM y, h:mm a'}} - Local Time</p>

                <p>{{supportingService?.startDate | date:'d MMM y, h:mm a':'UTC'}} - UTC</p>

            </div>

            <div class="col-lg-4">

                <h6>Start Mode</h6>

                <p>{{supportingService?.startMode}}</p>

            </div>

            <div class="col-lg-4">

                <mat-form-field>

                    <mat-label>State</mat-label>

                    <mat-select formControlName="state">

                        <mat-option *ngFor="let state of availableStates" [value]="state">{{state}}</mat-option>

                    </mat-select>

                </mat-form-field>

            </div>

            <div class="col-lg-6">

                <h6>Supporting Resources</h6>

                <p *ngIf="supportingService?.supportingResource.length === 0"> There are not supporting resources allocated </p>

                <p *ngFor="let resource of supportingService?.supportingResource" class="mb-2">{{resource.name}}</p>

            </div>

            <div class="col-lg-6">

                <h6>Supporting Services</h6>

                <p *ngIf="supportingService?.supportingService.length === 0"> There are not supporting services allocated </p>

                <p *ngFor="let service of supportingService?.supportingService" class="mb-2">{{service.name}}</p>

            </div>

            <div class="col-12">

                <h6>Service Characteristics</h6>

                <p *ngFor="let characteristic of supportingService?.serviceCharacteristic; let last = last" [ngClass]="{'mb-0':!last}">

                    {{characteristic.name}}: <dfn>{{characteristic.value.value}}</dfn>

                </p>

            </div>

            <div class="col-lg-12">

                <h6>Notes</h6>

                <div class="notes-container">

                    <div *ngFor="let note of supportingService?.note">

                        <div class="card card-paper mb-2 bg-light">

                            <div class="note-card-body">

                                {{note.text}}

                                <div class="small">written by {{note.author}} @ {{note.date | date:'d MMM y, h:mm a'}}</div>

                            </div>

                        </div>

                    </div>

                </div>

                <button type="button" *ngIf="!newNote" class="btn btn-primary btn-sm btn-block mb-2"

                    (click)="triggerNewNote()"><i class="far fa-sticky-note mr-2"></i>Add Note</button>

                <div class="card card-paper mb-2 bg-light" *ngIf="newNote">

                    <div class="note-card-body pb-0">

                        <div class="d-flex justify-content-center align-items-center">

                            <mat-form-field>

                                <mat-label>New Note</mat-label>

                                <textarea cdkTextareaAutosize #autosize="cdkTextareaAutosize" cdkAutosizeMinRows="2" matInput formControlName="note"></textarea>

                            </mat-form-field>

                            <button type="button" class="btn btn-danger btn-sm ml-2 mb-1" (click)="triggerNewNote()"><i

                                    class="fas fa-times"></i></button>

                        </div>

                    </div>

                </div>

            </div>

        </form>

    </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()" *ngIf="!editForm.pristine">Submit</button>

        </div>

    </div>

</div>

 No newline at end of file

// .notes-container {

//     max-height: 200px;

//     overflow-y: auto;

// }

.note-card-body {

    padding: .5rem;

}

mat-form-field {

    width: 100%;

}

 No newline at end of file

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { PreviewSupportingServicesComponent } from './preview-supporting-services.component';

describe('PreviewSupportingServicesComponent', () => {

  let component: PreviewSupportingServicesComponent;

  let fixture: ComponentFixture<PreviewSupportingServicesComponent>;

  beforeEach(async(() => {

    TestBed.configureTestingModule({

      declarations: [ PreviewSupportingServicesComponent ]

    })

    .compileComponents();

  }));

  beforeEach(() => {

    fixture = TestBed.createComponent(PreviewSupportingServicesComponent);

    component = fixture.componentInstance;

    fixture.detectChanges();

  });

  it('should create', () => {

    expect(component).toBeTruthy();

  });

});

import { Component, OnInit, Inject } from '@angular/core';

import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';

import { ServiceRef } from 'src/app/openApis/serviceOrderingManagement/models';

import { ServiceService } from 'src/app/openApis/serviceInventoryManagement/services';

import { Service, ServiceUpdate } from 'src/app/openApis/serviceInventoryManagement/models';

import { ToastrService } from 'ngx-toastr';

import { FormGroup, FormControl } from '@angular/forms';

import { AuthService } from 'src/app/shared/services/auth.service';

import { AppService } from 'src/app/shared/services/app.service';

@Component({

  selector: 'app-preview-supporting-services',

  templateUrl: './preview-supporting-services.component.html',

  styleUrls: ['./preview-supporting-services.component.scss']

})

export class PreviewSupportingServicesComponent implements OnInit {

  constructor(

    @Inject(MAT_DIALOG_DATA) public data: {

      serviceRef: ServiceRef

    },

    private dialogRef: MatDialogRef<PreviewSupportingServicesComponent>,

    private inventoryService: ServiceService,

    private toastr: ToastrService,

    private authService: AuthService,

    public appService: AppService

  ) { }

  supportingService: Service

  newNote: boolean = false

  editForm = new FormGroup ({

    state: new FormControl(),

    note: new FormControl()

  })

  availableStates = ['feasibilityChecked', 'designed', 'reserved', 'inactive', 'active', 'terminated']

  ngOnInit() {

    if (this.data.serviceRef) {

      this.inventoryService.retrieveService(this.data.serviceRef).subscribe(

        data => { this.supportingService = data },

        error => { console.error(error); this.toastr.error("An error occurred retrieving supporting Service information")},

        () => { 

          this.editForm.patchValue({

            state: this.supportingService.state

          })

        }

      )

    }

  }

  stateClassSelector(state:'feasibilityChecked' | 'designed' | 'reserved' | 'inactive' | 'active' | 'terminated') {

    let cssClass: string = 'badge'

    switch (state) {

      case 'active':

        cssClass += ' badge-success'

        break;

      case 'inactive':

        cssClass += ' badge-secondary'

        break;

      case 'terminated':

        cssClass += ' badge-danger'

        break;

      default:

        cssClass += ' badge-warning'

    }

    return cssClass

  }

  triggerNewNote() {

    if (this.newNote) this.editForm.get('note').reset()

    this.newNote = !this.newNote

  }

  closeDialog() { 

    this.dialogRef.close()

  }

  submitDialog() {

    let updateServiceObj: ServiceUpdate = {}

    if (!this.editForm.get('state').pristine) 

      updateServiceObj['state'] = this.editForm.get('state').value

    if (!this.editForm.get('note').pristine)

      updateServiceObj['note'] = [{

        author: this.authService.portalUserJWT.preferred_username,

        text: this.editForm.get('note').value

      }]

    this.inventoryService.patchService({service: updateServiceObj, id: this.supportingService.id}).subscribe(

      data => { },

      error => { console.error(error), this.toastr.error("An error occurred updating this Supporting Service") },

      () => { this.dialogRef.close('updated') }

    )

  }

}

import { fadeIn, simpleFade } from 'src/app/shared/animations/animations';

import { SelectionModel } from '@angular/cdk/collections';

import { EditServiceOrderItemsComponent } from './edit-service-order-items/edit-service-order-items.component';

import { PreviewSupportingServicesComponent } from '../../inventoryManagement/preview-supporting-services/preview-supporting-services.component';

import { TerminateServiceOrderItemsComponent } from './terminate-service-order-items/terminate-service-order-items.component';

import { AppService } from 'src/app/shared/services/app.service';

import { relative } from 'path';

    this.editModeNotes = !this.editModeNotes

  }

  openSupportingServiceDialog(supportingServiceRef: ServiceRef) {

    const dialogRef = this.dialog.open(PreviewSupportingServicesComponent, {

      data : { serviceRef: supportingServiceRef }, 

      disableClose: true

    })

    dialogRef.afterClosed().subscribe(

      result => {

        if (result) {

          this.toast.success("Supporting Service was successfully updated")

          this.enableOrderRefreshTimer()

        }

      }

    )

  }

  // openOrdersSpecCharacteristicsDialog(orderItem: ServiceOrderItem) {

  //   const dialogRef = this.dialog.open(EditOrdersServiceSpecCharacteristicsComponent, {