271 lines
13 KiB
HTML
271 lines
13 KiB
HTML
|
||
<table class="table table-striped customTable" [mfData]="tableData | dmpTableFilter : filterQuery | dmpVersionFilter : versionFilter |dmpstatusFilter: statusFilter"
|
||
#mf="mfDataTable" [mfRowsOnPage]="rowsOnPage" [(mfSortBy)]="sortBy" [(mfSortOrder)]="sortOrder">
|
||
<thead>
|
||
<tr class="rowFilter">
|
||
<th colspan="1">
|
||
<input class="form-control" [(ngModel)]="filterQuery" placeholder='Search in Labels' />
|
||
</th>
|
||
<th colspan="1">
|
||
<button class="btn btn-default " (click)="getDmps('false')">
|
||
<span class="glyphicon glyphicon-refresh"></span>
|
||
</button>
|
||
</th>
|
||
|
||
<th class="rowFilterTopBorder" colspan="3">
|
||
<button type="button" class="btn btn-info btnMoreFilters" data-toggle="collapse" data-target="#demo" (click)="clickFilters($event.target)">More filters</button>
|
||
<div id="demo" class="collapse">
|
||
<input style="margin-top: 5px;" class="form-control" type="number" [(ngModel)]="versionFilter" placeholder='Version' />
|
||
<select style="margin-top: 5px;" class="form-control" [id]="statusid" [(ngModel)]="statusFilter" [name]="statusDropDown"
|
||
#datasetfield>
|
||
<option *ngFor="let opt of statusDropDown.options" [value]="opt.key">{{opt.value}}</option>
|
||
</select>
|
||
</div>
|
||
</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="version">Version</mfDefaultSorter>
|
||
</th>
|
||
<th>
|
||
<mfDefaultSorter by="previous">Previous</mfDefaultSorter>
|
||
</th>
|
||
<th>
|
||
<mfDefaultSorter by="project">Project</mfDefaultSorter>
|
||
</th>
|
||
<th>
|
||
<mfDefaultSorter by="description">Description</mfDefaultSorter>
|
||
</th>
|
||
<th>
|
||
<mfDefaultSorter by="created">Created at</mfDefaultSorter>
|
||
</th>
|
||
<th>
|
||
<mfDefaultSorter by="status">Status</mfDefaultSorter>
|
||
</th>
|
||
<th>
|
||
Actions
|
||
</th>
|
||
<th>
|
||
|
||
</th>
|
||
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr class="grayout-empty-table" *ngIf="!mf.data[0]">
|
||
<td colspan="5">No elements</td>
|
||
</tr>
|
||
|
||
<tr *ngFor="let dmp of mf.data" class="hover">
|
||
<td [ngClass]="{true:'visible', false:'invisible'}[showIDs]">{{dmp?.id}}</td>
|
||
<!-- data-toggle="modal" data-target="#dmp-deatils-fullscreen" -->
|
||
<td class="url-like" (click)="viewDetailedDMP(dmp)">{{(dmp?.label?.length > 40) ? (dmp?.label | slice:0:40)+'...':(dmp?.label) }}</td>
|
||
<td style="width:20px;">{{dmp?.version}}</td>
|
||
<td style="width:300px;">{{dmp?.previous}}</td>
|
||
<td class="url-like" (click)="viewDetailedProject(dmp)">{{(dmp?.project?.label?.length > 40) ? (dmp?.project?.label | slice:0:40)+'...':(dmp?.project?.label) }}</td>
|
||
<td>{{(dmp?.description?.length > 40) ? (dmp?.description | slice:0:40)+'...':(dmp?.description) }}</td>
|
||
<td>{{dmp?.created | date:'yyyy-MM-dd HH:mm:ss Z'}}</td>
|
||
<td>{{dmp?.status | statusToString }}</td>
|
||
<td>
|
||
<a class="editGridColumn cursor-link" (click)="editDmp(dmp)"> <!--btn btn-primary btn-rounded css for button style -->
|
||
<i class="fa fa-pencil fa-fw" data-toggle="tooltip" title="edit properties" id="editDMP"></i></a>
|
||
<a class="editGridColumn cursor-link" (click)="editDmpVersion(dmp)">
|
||
<i class="fa fa-clone fa-fw" data-toggle="tooltip" title="create new version" id="changeVersionDMP"></i> </a>
|
||
<a class="editGridColumn cursor-link" (click)="markDMPForDelete(dmp)">
|
||
<i class="fa fa-eraser fa-fw" data-toggle="modal" data-target="#delete-dmp-confirm" title="delete DMP"></i> </a>
|
||
<!--
|
||
<a class="editGridColumn cursor-link" (click)="selectDmp(dmp)">
|
||
<i class="fa fa-table fa-fw" data-toggle="tooltip" title="show dataset for this DMP" id="showDatasets"></i></a>
|
||
-->
|
||
</td>
|
||
<td style="max-width:100px;">
|
||
<button type="button" class="btn btn-default table-button" (click)="showDatasetsOfDmp(dmp)"> <i class="fa fa-folder-o" aria-hidden="true"></i> Datasets</button>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
<tfoot>
|
||
<tr>
|
||
<td colspan="1">
|
||
<button type="button" class="btn btn-info btncustom" (click)="newDmpForm(item)">Create New</button>
|
||
</td>
|
||
<td colspan="7">
|
||
<mfBootstrapPaginator [rowsOnPageSet]="[5,10,20]"></mfBootstrapPaginator>
|
||
</td>
|
||
</tr>
|
||
</tfoot>
|
||
</table>
|
||
<!-- </div> -->
|
||
|
||
<!--Modal for new and edit DMP-->
|
||
<div class="modal fade" id="newDmpModal" tabindex="-1" role="dialog" aria-labelledby="newDmpModalLabel" aria-hidden="true">
|
||
<div class="modal-dialog" role="document">
|
||
<div class="modal-content">
|
||
<div class="modal-header centered-text">
|
||
<h4 class="modal-title" id="modalLabel"><b>{{ dmp?.id ? "Edit Data Management Plan" : "New Data Management Plan" }}</b></h4>
|
||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||
<span aria-hidden="true">×</span>
|
||
</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<form #dmpForm="ngForm" (ngSubmit)="SaveNewDmp()">
|
||
<div class="form-group">
|
||
<div class="form-group">
|
||
<label for="label-name" class="form-control-label">Label:</label>
|
||
<input type="text" class="form-control" id="label-name" [ngModel]="dmp?.label" (ngModelChange)="dmp.label=$event" name="label" required>
|
||
</div>
|
||
<label for="recipient-name" class="col-form-label">Project:</label>
|
||
<select class="form-control" id="projectsDropDownKey" [ngModel]="dmp?.project" (ngModelChange)="dmp.project=$event" name="projectsDropDown" required>
|
||
<option *ngFor="let opt of projectsDropDown.options" [value]="opt.key">{{opt.value}}</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="status-name" class="col-form-label">Status:</label>
|
||
<select class="form-control" id="statusid" [ngModel]="dmp?.status" (ngModelChange)="dmp.status=$event" name="statusDropDown" (change)="SelectDMPStatus(dmp, $event, oldValue);">
|
||
<option *ngFor="let opt of statusDropDown.options" [value]="opt.key">{{opt.value}}</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="label-name" class="form-control-label">Previous:</label>
|
||
<input type="text" class="form-control" id="label-previous" [ngModel]="dmp?.previous" (ngModelChange)="dmp.previous=$event" name="previous" disabled>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="abbreviation-text" class="form-control-label">Version:</label>
|
||
<input class="form-control" id="abbreviation-text" [ngModel]="dmp?.version" (ngModelChange)="dmp.version=$event" name="version" disabled>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="abbreviation-text" class="form-control-label">Description:</label>
|
||
<textarea rows="3" class="form-control" id="abbreviation-text" [ngModel]="dmp?.description" (ngModelChange)="dmp.description=$event" name="description"></textarea>
|
||
</div>
|
||
<!--
|
||
<div class="form-group">
|
||
<label for="reference-text" class="form-control-label">Profile Data:</label>
|
||
<textarea class="form-control" id="reference-text" [(ngModel)]="dmp?.profileData" name="profileData"></textarea>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="start-date" class="form-control-label">Start Date:</label>
|
||
<input class="form-control" id="startDate-date" [(ngModel)]= "dmp?.startDate" name = "startDate">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="end-date" class="form-control-label">End Date:</label>
|
||
<input class="form-control" id="endDate-date" [(ngModel)]= "dmp?.endDate" name = "endDate">
|
||
</div>
|
||
-->
|
||
</form>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||
<button type="submit" class="btn btn-primary" (click)="SaveDmp();">Save Dmp</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!--Modal for changing version-->
|
||
<div class="modal fade" id="newVersionDmpModal" tabindex="-1" role="dialog" aria-labelledby="newVersionDmpModalLabel" aria-hidden="true">
|
||
<div class="modal-dialog" role="document">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h4 class="modal-title" id="modalLabel"><b>Clone Data Management Plan</b></h4>
|
||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||
<span aria-hidden="true">×</span>
|
||
</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<form #dmpForm="ngForm" (ngSubmit)="SaveNewDmp()">
|
||
<div class="form-group">
|
||
<label for="label-name" class="form-control-label">Label:</label>
|
||
<input type="text" class="form-control" id="label-name" [ngModel]="dmp?.label" (ngModelChange)="dmp.label=$event" name="label">
|
||
</div>
|
||
<div class="form-group" hidden>
|
||
<label for="recipient-name" class="col-form-label">Project:</label>
|
||
<select class="form-control" [id]="projectsDropDownKey" [ngModel]="dmp?.project" (ngModelChange)="dmp.project=$event" [name]="projectsDropDown" #datasetfield>
|
||
<option *ngFor="let opt of projectsDropDown.options" [value]="opt.key">{{opt.value}}</option>
|
||
</select>
|
||
</div>
|
||
|
||
|
||
<div class="form-group" hidden>
|
||
<label for="label-name" class="form-control-label">Previous:</label>
|
||
<input type="text" class="form-control" id="label-previous" [ngModel]="dmp?.previous" (ngModelChange)="dmp.previous=$event" name="previous">
|
||
</div>
|
||
<div class="form-group" hidden>
|
||
<label for="abbreviation-text" class="form-control-label">Version:</label>
|
||
<input class="form-control" id="abbreviation-text" [ngModel]="dmp?.version" (ngModelChange)="dmp.version=$event" name="version">
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||
<button type="submit" class="btn btn-primary" [disabled]="!dmpForm.form.valid" (click)="cloneDMP(dmp);">Save Dmp</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="modal" tabindex="-1" id="messageForChangingStatus" role="dialog">
|
||
<div class="modal-dialog" role="document">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title">Change Staus</h5>
|
||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||
<span aria-hidden="true">×</span>
|
||
</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<p>The submitted status is available only when all the DMP's datasets are "Submitted" or "Cancel"</p>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-secondary" data-dismiss="modal">OK</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
<!-- MODAL FOR DETAILS -->
|
||
<button class="btn btn-primary" data-toggle="modal" data-target="#dmp-deatils-fullscreen" contenteditable="false">Open Fullscreen Modal</button>
|
||
|
||
<div class="modal fade modal-fullscreen footer-to-bottom" id="dmp-deatils-fullscreen" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||
<div class="modal-dialog animated zoomInLeft">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||
<h4 class="modal-title">Modal title</h4>
|
||
</div>
|
||
<div class="modal-body">
|
||
<p class="">One fine body…</p>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
||
<button type="button" class="btn btn-primary">Save changes</button>
|
||
</div>
|
||
</div>
|
||
<!-- /.modal-content -->
|
||
</div>
|
||
<!-- /.modal-dialog -->
|
||
</div>
|
||
<!-- /.modal -->
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<router-outlet name="dmpDetails"></router-outlet>
|
||
|
||
|
||
|
||
|
||
<!-- Confirmation module- do not delete -->
|
||
<confirmation [confirmationID]="'delete-dmp-confirm'" [confirmationTitle]="'Caution'" [confirmationDescr]="'This action will delete this DMP. Are you sure ? This is not revertable !'" (responseSender)="deleteDMP($event)"></confirmation>
|