argos/dmp-frontend/src/app/dmps/dmps.html

<table *ngIf="stateConfig.dmps.tableVisible" 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>
            <td>{{dmp?.label}}</td>
            <td style="width:20px;">{{dmp?.version}}</td>
            <td style="width:300px;">{{dmp?.previous}}</td>
            <td>{{dmp?.project?.label}}</td>
            <td>{{(dmp?.description?.length > 20) ? (dmp?.description | slice:0:20)+'...':(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="8">
                <button type="button" class="btn btn-info btncustom" (click)="newDmpForm(item)">Create New</button>
                <mfBootstrapPaginator [rowsOnPageSet]="[5,20,40]"></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="exampleModalLabel"><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">&times;</span>
              </button>
            </div>
            <div class="modal-body">
                <form #newProjectForm="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">
                        </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">
                                  <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">
                <h5 class="modal-title" id="exampleModalLabel">DMP</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
            </div>
            <div class="modal-body">
                <form #newProjectForm="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" (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">&times;</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>


<!--DATASET TABLE-->
<datasets-table *ngIf="stateConfig.datasets.tableVisible" [dmpIdforDatasets]="stateConfig.dmps.selectedID" [dmpLabelforDatasets]="stateConfig.dmps.selectedLabel" [(dataSetVisibe)]="stateConfig.datasets.tableVisible"></datasets-table>


<!-- 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>