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

<div class="editor-container container">
    
      <div [ngClass]="{true:'visible', false:'invisible'}[tableVisible]">
        <table class="table table-striped" [mfData]="tableData | registryTableFilter : 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><mfDefaultSorter by="label">Label</mfDefaultSorter></th>
                <th><mfDefaultSorter by="abbreviation">Abbreviation</mfDefaultSorter></th>
                <th><mfDefaultSorter by="reference">Reference</mfDefaultSorter></th>
                <th><mfDefaultSorter by="uri">Uri</mfDefaultSorter></th>
                <th><mfDefaultSorter by="definition">Definition</mfDefaultSorter></th>
              </tr>
            </thead>
            <tbody>
              <tr class="grayout-empty-table" *ngIf="!mf.data[0]" [contextMenu]="basicMenu" [contextMenuSubject]="registry"> <td colspan="5">No elements</td></tr>
              <tr *ngFor="let registry of mf.data" class="hover" [contextMenu]="basicMenu" [contextMenuSubject]="registry">
                <td [ngClass]="{true:'visible', false:'invisible'}[showIDs]">{{registry.id}}</td>
                <td>{{registry?.label}}</td>
                <td>{{registry?.abbreviation}}</td>
                <td>{{registry?.reference}}</td>
                <td>{{registry?.uri}}</td>
                <td>{{registry?.definition}}</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'}[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]="registryEditorForm" novalidate style="display:block;">
                <div class="form-group" [ngClass]="{null:'invisible'}[editingRegistry?.id]">
                  <label class="center-block">ID: {{editingRegistry?.id}}
                    <input class="form-control invisible" formControlName="id" [ngModel]="editingRegistry?.id">
                  </label>
                </div>
                <div class="form-group">
                  <label class="center-block">Label:
                    <input class="form-control" formControlName="label" [ngModel]="editingRegistry?.label" (ngModelChange)="editingRegistry.label=$event">
                  </label>
                </div>
                <div class="form-group">
                  <label class="center-block">Abbreviation:
                    <input class="form-control" formControlName="abbreviation" [ngModel]="editingRegistry?.abbreviation" (ngModelChange)="editingRegistry.abbreviation=$event">
                  </label>
                </div>
                <div class="form-group">
                  <label class="center-block">Reference:
                    <input class="form-control" formControlName="reference" [ngModel]="editingRegistry?.reference" (ngModelChange)="editingRegistry.reference$event">
                  </label>
                </div>
                <div class="form-group">
                  <label class="center-block">Uri:
                    <input class="form-control" formControlName="uri" [ngModel]="editingRegistry?.uri" (ngModelChange)="editingRegistry.uri$event">
                  </label>
                </div>
                <div class="form-group">
                  <label class="center-block">Definition:
                    <input class="form-control" formControlName="definition" [ngModel]="editingRegistry?.definition" (ngModelChange)="editingRegistry.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: {{ registryEditorForm.value | json }}</p>
            -->
        </div>
        
      </div>
      
    </div>
    
    
    
    <context-menu>
        <ng-template contextMenuItem [subMenu]="manage"> 
            <span></span>Manage Registries
        </ng-template>
        <context-menu #manage>
            <ng-template contextMenuItem (execute)="newRegistry($event?.item)"> 
                <span class="glyphicon glyphicon-plus"></span>Create Registry
            </ng-template>
            <ng-template contextMenuItem (execute)="editRegistry($event?.item?.id)"> 
                <span class="glyphicon glyphicon-pencil"></span>Edit this Registry
            </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>