argos/dmp-admin/src/app/managers/datasetprofile-editor/datasetprofile-editor.component.html

<div class="editor-container container">
  
    <div [ngClass]="{true:'visible', false:'invisible'}[tableVisible]">
      <table class="table table-striped" [mfData]="tableData | datasetProfileTableFilter : filterQuery" #mf="mfDataTable" [mfRowsOnPage]="rowsOnPage" [(mfSortBy)]="sortBy" [(mfSortOrder)]="sortOrder">
        <thead>
            <tr>
                <th colspan="1">
                    <input class="form-control" [(ngModel)]="filterQuery" placeholder='Filter'/>
                </th>
                <th>
                    <button class="btn btn-default" (click)="refreshTable($event)">
                        <span class="glyphicon glyphicon-refresh"></span>
                      </button>
                </th>
                <th>
                  <button type="button" class="btn btn-sm btn-primary btn-create" data-toggle="modal" data-target="#newdataset-modal-container" [routerLink]="['/form']">Create New</button>                  
                </th>

            </tr>
            <tr>
              <!-- <th [ngClass]="{true:'visible', false:'invisible'}[showIDs]"><mfDefaultSorter by="id">ID</mfDefaultSorter></th> -->
              <th><mfDefaultSorter by="label">Label</mfDefaultSorter></th>
              <th><mfDefaultSorter by="created">Created</mfDefaultSorter></th>
              <th><mfDefaultSorter by="description">Description</mfDefaultSorter></th>
              <th><mfDefaultSorter by="status">Status</mfDefaultSorter></th> 
              <th></th>
            </tr>
          </thead>
          <tbody>
            <tr class="grayout-empty-table" *ngIf="!mf.data[0]" [contextMenu]="basicMenu" [contextMenuSubject]="datasetProfile"> <td colspan="5">No elements</td></tr>
            <tr *ngFor="let datasetProfile of mf.data" class="hover" [contextMenu]="basicMenu" [contextMenuSubject]="datasetProfile">
              <!-- <td [ngClass]="{true:'visible', false:'invisible'}[showIDs]">{{datasetProfile.id}}</td> -->
              <td>{{datasetProfile?.label}}</td>
              <td>{{datasetProfile?.created}}</td>
              <td>{{datasetProfile?.description}}</td>
              <td>{{datasetProfile?.status}}</td>
              <td><button type="button" class="btn btn-sm btn-primary btn-create" data-toggle="modal" data-target="#newdataset-modal-container" [routerLink]="['/form/'+datasetProfile.id]">Go</button></td>                  
              
            </tr>
          </tbody>
          <tfoot>
              <tr>
                  <td colspan="5">
                      <mfBootstrapPaginator [rowsOnPageSet]="[10,20,40]"></mfBootstrapPaginator>
                  </td>
              </tr>
              </tfoot>
      </table>
    </div>
  
    <!-- this is the form editor -->
    <div [ngClass]="{true:'visible', false:'invisible'}[editorVisible]">
  
      <div> <!-- form container -->
          <div style="display:block;">
            <button (click)="switchToTable()" class="btn btn-lg btn-success pull-right" style="max-width:120px;">
                <span class="glyphicon glyphicon-arrow-left"></span> Go back
            </button>
          </div>
          <form [formGroup]="datasetProfileEditorForm" novalidate style="display:block;">
              <div class="form-group" [ngClass]="{null:'invisible'}[editingDatasetProfile?.id]">
                <label class="center-block">ID: {{datasetProfile?.id}}
                  <input class="form-control invisible" formControlName="id" [ngModel]="editingDatasetProfile?.id">
                </label>
              </div>
              <div class="form-group">
                <label class="center-block">Label:
                  <input class="form-control" formControlName="label" [ngModel]="editingDatasetProfile?.label" (ngModelChange)="editingDatasetProfile.label=$event">
                </label>
              </div>
              <div class="form-group">
                <label class="center-block">Ruleset:
                  <input class="form-control" formControlName="ruleset" [ngModel]="editingDatasetProfile?.ruleset" (ngModelChange)="editingDatasetProfile.ruleset=$event">
                </label>
              </div>
              <div class="form-group">
                <label class="center-block">Viewstyle:
                  <input class="form-control" formControlName="viewstyle" [ngModel]="editingDatasetProfile?.viewstyle" (ngModelChange)="editingDatasetProfile.viewstyle$event">
                </label>
              </div>
              <div class="form-group">
                <label class="center-block">Definition:
                  <input class="form-control" formControlName="definition" [ngModel]="editingDatasetProfile?.definition" (ngModelChange)="editingDatasetProfile.definition$event">
                </label>
              </div>
              <div class="form-group" style="width:540px;">
                <button style="float:right;" type="submit" (click)="save($event, $data, $form)"class="btn btn-success">Save</button>
              </div>
          </form>
          <!--
          <p>Form value: {{ datasetProfileEditorForm.value | json }}</p>
          -->
      </div>
      
    </div>
    
  </div>
  
  
  
  <context-menu>
      <ng-template contextMenuItem [subMenu]="manage"> 
          <span></span>Manage Dataset Profiles
      </ng-template>
      <context-menu #manage>
          <ng-template contextMenuItem (execute)="new($event?.item)"> 
              <span class="glyphicon glyphicon-plus"></span>Create Dataset profile
          </ng-template>
          <ng-template contextMenuItem (execute)="edit($event?.item?.id)"> 
              <span class="glyphicon glyphicon-pencil"></span>Edit this Dataset profile
          </ng-template>
          <ng-template contextMenuItem (execute)="delete($event?.item?.id)">
              <span class="glyphicon glyphicon-trash red"></span> Delete this
          </ng-template>
      </context-menu>
      <ng-template contextMenuItem> 
          <span></span>Show full tree connections
      </ng-template>
  </context-menu>