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

<div class="editor-container container">

  <div [ngClass]="{true:'visible', false:'invisible'}[dmpTableVisible]">
    <table class="table table-striped" [mfData]="tableData | dmpTableFilter : 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>
          </tr>
          <tr>
            <th [ngClass]="{true:'visible', false:'invisible'}[showIDs]"><mfDefaultSorter by="id">ID</mfDefaultSorter></th>
            <th [ngClass]="{true:'visible', false:'invisible'}[showIDs]"><mfDefaultSorter by="previous">Previous</mfDefaultSorter></th>
            <th><mfDefaultSorter by="label">Label</mfDefaultSorter></th>
            <th><mfDefaultSorter by="version">Version</mfDefaultSorter></th>
            <th><mfDefaultSorter by="project.label">Project</mfDefaultSorter></th>
            <th>ProfileData</th>
            <th>Profile</th>
          </tr>
        </thead>
        <tbody>
          <tr class="grayout-empty-table" *ngIf="!mf.data[0]" [contextMenu]="basicMenu" [contextMenuSubject]="dmp"> <td colspan="5">No elements</td></tr>
          <tr *ngFor="let dmp of mf.data" class="hover" [contextMenu]="basicMenu" [contextMenuSubject]="dmp">
            <td [ngClass]="{true:'visible', false:'invisible'}[showIDs]">{{dmp.id}}</td>
            <td [ngClass]="{true:'visible', false:'invisible'}[showIDs]">{{dmp.previous}}</td>
            <td>{{dmp?.label}}</td>
            <td>{{dmp?.version}}</td>
            <td>{{dmp?.project?.label}}</td>
            <td>{{dmp?.profileData}}</td>
            <td>{{dmp?.profile?.label}}</td>
          </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="5">
                    <mfBootstrapPaginator [rowsOnPageSet]="[10,20,40]"></mfBootstrapPaginator>
                </td>
            </tr>
            </tfoot>
    </table>
  </div>

  <!-- this is the dmp editor -->
  <div [ngClass]="{true:'visible', false:'invisible'}[dmpEditorVisible]">

    <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]="dmpEditorForm" novalidate style="display:block;">
            <div class="form-group" [ngClass]="{null:'invisible'}[editingDmp?.id]">
              <label class="center-block">ID: {{editingDmp?.id}}
                <input class="form-control invisible" formControlName="id" [ngModel]="editingDmp?.id">
              </label>
            </div>
            <div class="form-group">
              <label class="center-block">Previous:
                <select class="form-control" name="previous" formControlName="previous" [ngModel]="editingDmp?.previous" (ngModelChange)="setFormPreviousValue($event)">
                    <option *ngFor="let idLabel of dmpsLabelsIDs" value="{{idLabel.id}}" >{{idLabel.label}}</option>
                </select>
              </label>
            </div>
            <div class="form-group">
              <label class="center-block">Label:
                <input class="form-control" formControlName="label" [ngModel]="editingDmp?.label" (ngModelChange)="editingDmp.label=$event">
              </label>
            </div>
            <div class="form-group">
              <label class="center-block">Version:
                <input class="form-control" type="number" min="1" max="10000" formControlName="version" [ngModel]="editingDmp?.version" (ngModelChange)="editingDmp.version=$event">
              </label>
            </div>
            <div class="form-group">
              <label class="center-block">Project:
                <select class="form-control" name="project" formControlName="project" [ngModel]="editingDmp?.project?.id" (ngModelChange)="setFormProjectValue($event)">
                    <option *ngFor="let idLabel of projectLabelsIDs" [ngValue]="idLabel.id">{{idLabel.label}}</option>
                </select>
              </label>
            </div>
            <div class="form-group">
              <label class="center-block">ProfileData:
                <input class="form-control" formControlName="profileData" [ngModel]="editingDmp?.profileData" (ngModelChange)="editingDmp.profileData=$event">
              </label>
            </div>
            <div class="form-group">
              <label class="center-block">Profile:
                  <select class="form-control" name="profile" formControlName="profile" [ngModel]="editingDmp?.profile?.id" (ngModelChange)="setFormProfileValue($event)">
                      <option *ngFor="let idLabel of profileLabelsIDs" [ngValue]="idLabel.id">{{idLabel.label}}</option>
                  </select>
              </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: {{ dmpEditorForm.value | json }}</p>
        -->
    </div>

  </div>
  
</div>



<context-menu>
    <ng-template contextMenuItem [subMenu]="managedmp"> 
        <span></span>Manage DMPs
    </ng-template>
    <context-menu #managedmp>
        <ng-template contextMenuItem (execute)="newDmp($event?.item)"> 
            <span class="glyphicon glyphicon-plus"></span>Create DMP
        </ng-template>
        <ng-template contextMenuItem (execute)="editDmp($event?.item?.id)"> 
            <span class="glyphicon glyphicon-pencil"></span>Edit this DMP
        </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>