argos/dmp-frontend/src/app/datasets/dataset.html

<div style="margin: auto; max-width: 1000px; margin-top:50px">



        <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' />
                    <input class="form-control" [(ngModel)]="versionFilter" 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="dmp">DMP</mfDefaultSorter>
                </th>
                <th>
                    <mfDefaultSorter by="uri">Uri</mfDefaultSorter>
                </th>
                <th>
                    <mfDefaultSorter by="profile">Profile</mfDefaultSorter>
                </th>
                <th>
                    <mfDefaultSorter by="description">Description</mfDefaultSorter>
                </th>
                <th>
                    <mfDefaultSorter>Actions </mfDefaultSorter>
                </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>{{dmp?.version}}</td>
                <td>{{dmp?.previous}}</td>
                <td>{{dmp?.project?.label}}</td>
                <td>{{dmp?.description}}</td>
                <td><a class="editGridColumn" (click)="editRow(dmp, $event)"><i class="fa fa-pencil fa-fw" data-toggle="tooltip" title="edit Dataset" id="editDataset"></i>
                    <i class="fa fa-eraser fa-fw" data-toggle="tooltip" title="delete Dataset"></i> 
                    <i class="fa fa-table fa-fw" data-toggle="tooltip" title="describe dataset" id="describeDataset"></i></a></td>
                
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="5">
                    <button type="button" class="btn btn-info btncustom" (click) = "newDataset(item)" >New Dataset</button> 
                    <mfBootstrapPaginator [rowsOnPageSet]="[5,20,40]"></mfBootstrapPaginator>
                </td>
            </tr>
        </tfoot>
    </table>



    <div class="modal fade" id="newDatasetModal" tabindex="-1" role="dialog" aria-labelledby="newDatasetModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Dataset</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="recipient-name" class="col-form-label">Dataset Profile:</label>
                                    <select class="form-control" [id]="datasetProfileDropDownKey" [(ngModel)]="dataset.profile" [name]="datasetProfileDropDown" #datasetfield>
                                      <option *ngFor="let opt of datasetProfileDropDown.options" [value]="opt.key">{{opt.value}}</option>
                                      </select>
                                  </div>
                        <div class="form-group">
                            <label for="label-name" class="form-control-label">Label:</label>
                            <input type="text" class="form-control" id="label-name" [(ngModel)]= "dataset.label" name = "label">
                        </div>
                        <div class="form-group">
                            <label for="abbreviation-text" class="form-control-label">DMP:</label>
                            <input class="form-control" id="abbreviation-text" [(ngModel)]= "dataset.dmp" name = "dmp">
                        </div>
                        <div class="form-group">
                            <label for="uri-text" class="form-control-label">Uri:</label>
                            <input class="form-control" id="uri-text" [(ngModel)]= "dataset.uri" name = "uri">
                        </div>
                       <div class="form-group">
                            <label for="start-date" class="form-control-label">Properties:</label>
                            <input class="form-control" id="startDate-date" [(ngModel)]= "dataset.properties" name = "properties">
                        </div>
                         <!-- <div class="form-group">
                            <label for="end-date" class="form-control-label">End Date:</label>
                            <input class="form-control" id="endDate-date" [(ngModel)]= "dataset.endDate" name = "endDate">
                        </div> -->
                        <div class="form-group">
                            <label for="code-name" class="form-control-label">Code:</label>
                            <input type="text" class="form-control" id="code-name" disabled>
                        </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)="SaveDataset();">Save Dmp</button>
                </div>
            </div>
        </div>
    </div>