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