boilerplate-details.component.html

<app-prefix-list></app-prefix-list>
<app-main-list></app-main-list>
<app-suffix-list></app-suffix-list>
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a routerLink="../../../../">Projects</a></li>
    <li class="breadcrumb-item"><a routerLink="../../">Requirement List</a></li>
    <li class="breadcrumb-item" aria-current="page">Edit Requirement</li>
  </ol>
</nav>
<mat-grid-list cols="2">
  <div class="first">
    <div *ngIf="get_metrics(currentboilerplate.title)"
      style="display:flex; flex-direction: row; align-items: center;margin-bottom: 50px;">
      <mat-accordion>
        <mat-expansion-panel *ngFor="let msection of mes_list" class="alert alert-warning" role="alert">
          <mat-expansion-panel-header>
            <mat-panel-title [innerHTML]='msection.Description'>
            </mat-panel-title>
          </mat-expansion-panel-header>
          <p [innerHTML]=msection.Title></p>
          <p [innerHTML]='msection.Info'></p>
        </mat-expansion-panel>
      </mat-accordion>
    </div>
    <div *ngIf=" currentboilerplate.id" class="edit-form">
      <form ngNativeValidate>
        <div class="form-group" style="display:flex; flex-direction: row; align-items: center">
          <label for="title" style="margin-right: 50px;">Requirement title</label>
          <input name="title" id="title" type="text" class="form-control" required
            [(ngModel)]="currentboilerplate.title" (change)="this.updateBoilerplate()" style="width: 63%;" />
        </div>
        <div style="display: flex; flex-grow: grow; margin-top: 50px; ">
          <form class="form-group form-inline ">
            <mat-checkbox class="example-full-width" [(ngModel)]="currentboilerplate.has_prefix"
              (change)="this.updateBoilerplate()" name="has_prefix">Prefix
            </mat-checkbox>
          </form>
          <div *ngIf="this.currentboilerplate.has_prefix" style="margin-left: 30px;">
            <app-prefix-details></app-prefix-details>
          </div>
        </div>
        <mat-divider></mat-divider>
        <div style="display: flex; flex-grow: grow; margin-top: 50px;">
          <form class="form-group form-inline ">
            <mat-checkbox class="example-full-width" [(ngModel)]="currentboilerplate.has_main" name="has_prefix"
              [disabled]="true">Main
            </mat-checkbox>
          </form>
          <div *ngIf="this.currentboilerplate.has_main" style="margin-left: 30px;">
            <app-main-details></app-main-details>
          </div>
        </div>
        <mat-divider></mat-divider>
        <div style="display: flex; flex-grow: grow; margin-top: 50px;">
          <form class="form-group form-inline ">
            <mat-checkbox class="example-full-width" [(ngModel)]="this.currentboilerplate.has_suffix"
              (change)="this.updateBoilerplate()" name="has_suffix">Suffix
            </mat-checkbox>
          </form>
          <div *ngIf="this.currentboilerplate.has_suffix" style="margin-left: 30px;">
            <app-suffix-details></app-suffix-details>
          </div>
        </div>
      </form>
      <div class="list row">
        <div fxFlex fxLayout fxHide.xs fxLayoutAlign="start">
          <input class="btn btn-success" type="button" value=" Update Boilerplate"
            (click)="updateDetailsOfBoilerplate()" />
        </div>
        <div fxFlex fxLayout fxHide.xs fxLayoutAlign="end">
          <input class="btn btn-warning" type="button" value="Delete Boilerplate" (click)="deleteBoilerplate()" />
        </div>
      </div>
      <p>{{ message }}</p>
    </div>
    <!---->
    <!--<app-prefix-list></app-prefix-list>-->
    <!---->
    <div *ngIf="!currentboilerplate.id">
      <mat-spinner style="margin: auto;"></mat-spinner>
    </div>
  </div>

  <!-- Dictionary -->
  <div class="second">
    <div class="search-hero">
      <input class="form-control" type="text" name="search" [(ngModel)]="searchText" autocomplete="off"
        placeholder="Start searching for a System, Function, etc.">
    </div>
    <mat-tab-group mat-align-tabs="center">
      <div *ngFor="let section of systems| filter:searchText">
        <div *ngIf="section.Name == 'System' ">
          <mat-tab label=Syntax>
            <div *ngFor="let items of syntax| filter:searchText">
              <mat-accordion>
                <mat-expansion-panel>
                  <mat-expansion-panel-header>
                    <mat-panel-title>
                      {{ items.pos }}
                    </mat-panel-title>
                  </mat-expansion-panel-header>
                  <div *ngFor="let item of items.data| filter:searchText">
                    <mat-accordion>
                      <mat-expansion-panel>
                        <mat-expansion-panel-header>
                          <mat-panel-title>
                            {{ item.name }}
                          </mat-panel-title>
                          <mat-panel-description>
                            <h5>{{ item.details }}</h5>
                          </mat-panel-description>
                        </mat-expansion-panel-header>
                        <p>Details : {{item.explanation}}</p>
                      </mat-expansion-panel>

                    </mat-accordion>
                  </div>
                </mat-expansion-panel>
              </mat-accordion>
            </div>
            <mat-accordion>
              <mat-expansion-panel>
                <mat-expansion-panel-header>
                  <mat-panel-title>
                    Find triples
                  </mat-panel-title>
                  <mat-panel-description>
                    <h5>You can search the information that is in the DSOs for a specifix input</h5>
                  </mat-panel-description>
                </mat-expansion-panel-header>
                <div class="list row">
                  <input fxFlex fxLayout fxHide.xs class="form-control" type="text" name="search"
                    [(ngModel)]="searchTextinstances" autocomplete="off"
                    placeholder="Searching for properties about an Class/Instance in the DSO.">
                  <button fxLayout fxLayoutGap="15px" (click)="searchInstance()" class="btn btn-success">Search</button>
                </div>
                <p [innerHTML]="searchInstance_list"></p>
              </mat-expansion-panel>
            </mat-accordion>
          </mat-tab>
        </div>
        <mat-tab label={{section.Name}}>
          <div *ngFor="let item of section.TheClasses| filter:searchText">
            <div *ngIf="item.Class">
              <mat-accordion>
                <mat-expansion-panel>
                  <mat-expansion-panel-header>
                    <mat-panel-title>
                      {{ item.Class }}
                    </mat-panel-title>
                    <mat-panel-description>
                      <!-- only mini description-->
                    </mat-panel-description>
                  </mat-expansion-panel-header>
                  {{ item.Comment }}
                  <ul>
                    <button mat-button [matMenuTriggerFor]="menu"
                      [matMenuTriggerData]="{section: section.Name ,class: item.Class}" #menuTrigger>
                      <h4><b>Instances</b></h4>
                    </button>
                    <div *ngFor="let instan of item.Instance_of_Class| filter:searchText">
                      <li>
                        <mat-expansion-panel hideToggle>
                          <mat-expansion-panel-header>
                            <mat-panel-title class="d-flex justify-content-between">
                              <span div fxLayout="row" fxLayoutAlign="space-around center">{{instan.Instance}}</span>
                              <div style="margin-bottom: 4px;">
                                <button
                                  *ngIf="section.Name == 'Function' || section.Name == 'System' || section.Name == 'Item'"
                                  mat-mini-fab color="primary" style="margin-right: 8px;"
                                  (click)="openInstanceDialog(instan.Instance, section.Name, item.Class, '', '', '', '')">
                                  <mat-icon>add</mat-icon>
                                </button>
                                <button mat-mini-fab color="warn"
                                  (click)="deleteInstance(section.Name , item.Class, '', '', '', '', instan.Instance, instan.Comment)">
                                  <mat-icon>delete</mat-icon>
                                </button>
                              </div>
                            </mat-panel-title>
                          </mat-expansion-panel-header>
                          <div fxLayout="column">
                            <p fxFlex fxHide.xs>{{instan.Comment}}</p>
                          </div>
                        </mat-expansion-panel>
                      </li>
                    </div>
                  </ul>
                  <ul>
                    <div *ngIf=checklen(item.Subclass)>
                      <h4><b>Subclasses</b></h4>
                    </div>
                    <div *ngFor="let sub of item.Subclass| filter:searchText">
                      <li>
                        <mat-expansion-panel hideToggle>
                          <mat-expansion-panel-header>
                            <mat-panel-title>
                              {{sub.SubClass_name}}
                            </mat-panel-title>
                          </mat-expansion-panel-header>
                          <p>{{sub.SubclassComment}}</p>
                          <div *ngIf=checklen(sub.SubSubClass)>
                            <h5><b>Subclasses</b></h5>
                          </div>
                          <div *ngFor="let subsub of sub.SubSubClass| filter:searchText">
                      <li>
                        <mat-expansion-panel hideToggle>
                          <mat-expansion-panel-header>
                            <mat-panel-title>
                              {{ subsub.SubSubClass_name}}
                            </mat-panel-title>
                          </mat-expansion-panel-header>
                          <p>{{subsub.SubSubclassComment}}</p>
                          <div *ngIf=checklen(subsub.SubSubClass)>
                            <h5><b>Subclasses</b></h5>
                          </div>
                          <div *ngFor="let subsubsub of subsub.SubSubClass| filter:searchText">
                      <li>
                        <mat-expansion-panel hideToggle>
                          <mat-expansion-panel-header>
                            <mat-panel-title>
                              {{ subsubsub.SubSubClass_name}}
                            </mat-panel-title>
                          </mat-expansion-panel-header>
                          <p>{{subsubsub.SubSubclassComment}}</p>
                          <div *ngIf=checklen(subsubsub.SubSubClass)>
                            <h5><b>Subclasses</b></h5>
                          </div>
                          <div *ngFor="let subsubsubsub of subsubsub.SubSubClass| filter:searchText">
                      <li>
                        <mat-expansion-panel hideToggle>
                          <mat-expansion-panel-header>
                            <mat-panel-title>
                              {{ subsubsubsub.SubSubClass_name}}
                            </mat-panel-title>
                          </mat-expansion-panel-header>
                          <p>{{subsubsubsub.SubSubclassComment}} </p>
                          <ul> <button mat-button [matMenuTriggerFor]="menu"
                              [matMenuTriggerData]="{section: section.Name ,class: item.Class, subclass: sub.SubClass_name, subsubclass:subsub.SubSubClass_name , subsubsubclass: subsubsub.SubSubClass_name, subsubsubsubclass: subsubsubsub.SubSubClass_name}"
                              #menuTrigger>
                              <h5>Instances</h5>
                            </button>
                            <div
                              *ngFor="let subsubsubsubinstansub of subsubsubsub.SubInstanceOfSubclass| filter:searchText">
                              <li>
                                <mat-expansion-panel hideToggle>
                                  <mat-expansion-panel-header>
                                    <mat-panel-title class="d-flex justify-content-between">
                                      <span div fxLayout="row"
                                        fxLayoutAlign="space-around center">{{subsubsubsubinstansub.Instance}}</span>
                                      <div style="margin-bottom: 4px;">
                                        <button
                                          *ngIf="section.Name == 'Function' || section.Name == 'System' || section.Name == 'Item'  "
                                          mat-mini-fab color="primary" style="margin-right: 8px;"
                                          (click)="openInstanceDialog(subsubsubsubinstansub.Instance, section.Name, item.Class, sub.SubClass_name, subsub.SubSubClass_name, subsubsub.SubSubClass_name, subsubsubsub.SubSubClass_name)">
                                          <mat-icon>add</mat-icon>
                                        </button>
                                        <button mat-mini-fab color="warn"
                                          (click)="deleteInstance(section.Name , item.Class, sub.SubClass_name, subsub.SubSubClass_name , subsubsub.SubSubClass_name, subsubsubsub.SubSubClass_name, subsubsubsubinstansub.Instance, subsubsubsubinstansub.Comment)">

                                          <mat-icon>delete</mat-icon>
                                        </button>
                                      </div>
                                    </mat-panel-title>
                                  </mat-expansion-panel-header>
                                  <div fxLayout="column">
                                    <p fxFlex fxHide.xs>{{subsubsubsubinstansub.Comment}}</p>
                                  </div>
                                </mat-expansion-panel>
                              </li>
                            </div>
                          </ul>
                        </mat-expansion-panel>
                      </li>
                    </div>
                    <ul> <button mat-button [matMenuTriggerFor]="menu"
                        [matMenuTriggerData]="{section: section.Name ,class: item.Class, subclass: sub.SubClass_name, subsubclass:subsub.SubSubClass_name , subsubsubclass: subsubsub.SubSubClass_name}"
                        #menuTrigger>
                        <h5>Instances</h5>
                      </button>
                      <div *ngFor="let subsubsubinstansub of subsubsub.SubInstanceOfSubclass| filter:searchText">
                        <li>
                          <mat-expansion-panel hideToggle>
                            <mat-expansion-panel-header>
                              <mat-panel-title class="d-flex justify-content-between">
                                <span div fxLayout="row"
                                  fxLayoutAlign="space-around center">{{subsubsubinstansub.Instance}}</span>
                                <div style="margin-bottom: 4px;">
                                  <button
                                    *ngIf="section.Name == 'Function' || section.Name == 'System' || section.Name == 'Item'  "
                                    mat-mini-fab color="primary" style="margin-right: 8px;"
                                    (click)="openInstanceDialog(subsubsubinstansub.Instance, section.Name, item.Class, sub.SubClass_name, subsub.SubSubClass_name, subsubsub.SubSubClass_name, '')">
                                    <mat-icon>add</mat-icon>
                                  </button>
                                  <button mat-mini-fab color="warn"
                                    (click)="deleteInstance(section.Name , item.Class, sub.SubClass_name, subsub.SubSubClass_name , subsubsub.SubSubClass_name, '', subsubsubinstansub.Instance, subsubsubinstansub.Comment)">
                                    <mat-icon>delete</mat-icon>
                                  </button>
                                </div>
                              </mat-panel-title>
                            </mat-expansion-panel-header>
                            <div fxLayout="column">
                              <p fxFlex fxHide.xs>{{subsubsubinstansub.Comment}}</p>
                            </div>
                          </mat-expansion-panel>
                        </li>
                      </div>
                    </ul>
                </mat-expansion-panel>
                </li>
            </div>
            <ul> <button mat-button [matMenuTriggerFor]="menu"
                [matMenuTriggerData]="{section: section.Name ,class: item.Class, subclass: sub.SubClass_name, subsubclass:subsub.SubSubClass_name }"
                #menuTrigger>
                <h5>Instances</h5>
              </button>
              <div *ngFor="let subsubinstansub of subsub.SubInstanceOfSubclass| filter:searchText">
                <li>
                  <mat-expansion-panel hideToggle>
                    <mat-expansion-panel-header>
                      <mat-panel-title class="d-flex justify-content-between">
                        <span div fxLayout="row" fxLayoutAlign="space-around center">{{subsubinstansub.Instance}}</span>
                        <div style="margin-bottom: 4px;">
                          <button
                            *ngIf="section.Name == 'Function' || section.Name == 'System' || section.Name == 'Item'  "
                            mat-mini-fab color="primary" style="margin-right: 8px;"
                            (click)="openInstanceDialog(subsubinstansub.Instance, section.Name, item.Class, sub.SubClass_name, subsub.SubSubClass_name, '', '')">
                            <mat-icon>add</mat-icon>
                          </button>
                          <button mat-mini-fab color="warn"
                            (click)="deleteInstance(section.Name , item.Class, sub.SubClass_name, subsub.SubSubClass_name , '', '', subsubinstansub.Instance, subsubinstansub.Comment)">
                            <mat-icon>delete</mat-icon>
                          </button>
                        </div>
                      </mat-panel-title>
                    </mat-expansion-panel-header>
                    <div fxLayout="column">
                      <p fxFlex fxHide.xs>{{subsubinstansub.Comment}}</p>
                    </div>
                  </mat-expansion-panel>
                </li>
              </div>
            </ul>
            </mat-expansion-panel>
            </li>

          </div>
          <ul> <button mat-button [matMenuTriggerFor]="menu"
              [matMenuTriggerData]="{section: section.Name ,class: item.Class, subclass: sub.SubClass_name}"
              #menuTrigger>
              <h5>Instances</h5>
            </button>
            <div *ngFor="let instansub of sub.InstanceOfSubclass| filter:searchText">
              <li>
                <mat-expansion-panel hideToggle>
                  <mat-expansion-panel-header>
                    <mat-panel-title class="d-flex justify-content-between">
                      <span div fxLayout="row" fxLayoutAlign="space-around center">{{instansub.Instance}}</span>
                      <div style="margin-bottom: 4px;">
                        <button
                          *ngIf="section.Name == 'Function' || section.Name == 'System' || section.Name == 'Item'  "
                          mat-mini-fab color="primary" style="margin-right: 8px;"
                          (click)="openInstanceDialog(instansub.Instance, section.Name, item.Class, sub.SubClass_name, '', '', '')">
                          <mat-icon>add</mat-icon>
                        </button>
                        <button mat-mini-fab color="warn"
                          (click)="deleteInstance(section.Name , item.Class, sub.SubClass_name, '', '', '', instansub.Instance, instansub.Comment)">
                          <mat-icon>delete</mat-icon>
                        </button>
                      </div>
                    </mat-panel-title>
                  </mat-expansion-panel-header>
                  <div fxLayout="column">
                    <p fxFlex fxHide.xs>{{instansub.Comment}}</p>
                  </div>
                </mat-expansion-panel>
              </li>
            </div>
          </ul>
          </mat-expansion-panel>
          </li>

      </div>
      </ul>
      </mat-expansion-panel>
      </mat-accordion>
  </div>
  </div>
  <mat-accordion>
    <mat-expansion-panel>
      <mat-expansion-panel-header>
        <mat-panel-title>
          Find triples
        </mat-panel-title>
        <mat-panel-description>
          <h5>You can search the information that is in the DSOs for a specifix input</h5>
        </mat-panel-description>
      </mat-expansion-panel-header>
      <div class="list row">
        <input fxFlex fxLayout fxHide.xs class="form-control" type="text" name="search"
          [(ngModel)]="searchTextinstances" autocomplete="off"
          placeholder="Searching for properties about an Class/Instance in the DSO.">
        <button fxLayout fxLayoutGap="15px" (click)="searchInstance()" class="btn btn-success">Search</button>
      </div>
      <p [innerHTML]="searchInstance_list"></p>
    </mat-expansion-panel>
  </mat-accordion>
  <ul>
    <button mat-button [matMenuTriggerFor]="menu" [matMenuTriggerData]="{section: section.Name}" #menuTrigger>
      <h4>Instances</h4>
    </button>
    <div *ngFor="let genin of section.GeneralInstances| filter:searchText">
      <li>
        <mat-expansion-panel hideToggle>
          <mat-expansion-panel-header>
            <mat-panel-title class="d-flex justify-content-between">
              <span div fxLayout="row" fxLayoutAlign="space-around center">{{genin.Instance}}</span>
              <div style="margin-bottom: 4px;">
                <button *ngIf="section.Name == 'Function' || section.Name == 'System' || section.Name == 'Item'  "
                  mat-mini-fab color="primary" style="margin-right: 8px;"
                  (click)="openInstanceDialog(genin.Instance, section.Name, '', '', '', '', '')">
                  <mat-icon>add</mat-icon>
                </button>
                <button mat-mini-fab color="warn"
                  (click)="deleteInstance(section.Name , '', '', '' , '', '', genin.Instance, genin.Comment)">
                  <mat-icon>delete</mat-icon>
                </button>
              </div>
            </mat-panel-title>
          </mat-expansion-panel-header>
          <div fxLayout="column">
            <p fxFlex fxHide.xs> {{genin.Comment}}</p>
          </div>
        </mat-expansion-panel>
      </li>
    </div>
  </ul>
  </mat-tab>
  </div>
  </mat-tab-group>
  <div *ngIf="!checklen(systems)">
    <mat-spinner style="margin: auto;"></mat-spinner>
  </div>
  </div>
</mat-grid-list>

<mat-menu #menu="matMenu">
  <ng-template let-class="class" let-section="section" let-subclass="subclass" let-subsubclass="subsubclass"
    let-subsubsubclass="subsubsubclass" let-subsubsubsubclass="subsubsubsubclass" matMenuContent><button mat-menu-item
      (click)="openDialog(section, class, subclass, subsubclass, subsubsubclass, subsubsubsubclass)">Add
      Instances</button> </ng-template>
</mat-menu>