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='Search in Labels' />
                </th>
                <th colspan="1">
                    <!-- <input class="form-control" [(ngModel)]="versionFilter" placeholder='Filter' /> -->                    
                    <select class="form-control" [id]="statusid" [(ngModel)]="statusDropDownkey" [name]="statusDropDown"
                        #datasetfield >
                        <option *ngFor="let opt of statusDropDown.options" [value]="opt.key">{{opt.value}}</option>
                        </select>
                </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="status">Status</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 dataset of mf.data" class="hover">
                <td [ngClass]="{true:'visible', false:'invisible'}[showIDs]">{{dataset.id}}</td>
                <td>{{dataset?.label}}</td>
                <td>{{dataset?.status}}</td>
                <td>{{dataset?.uri}}</td>
                <td>{{dataset?.profile?.label}}</td>
                <td>{{dataset?.description}}</td>
                <td><a class="editGridColumn" (click)="editRow(dataset, $event)"><i class="fa fa-pencil fa-fw" data-toggle="tooltip" title="edit Properties" id="editDataset"></i>
                    <i class="fa fa-eraser fa-fw" data-toggle="tooltip" title="delete Dataset"></i> 
                    <i class="fa fa-list-alt 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" disabled>
                        </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> -->
                    </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</button>
                    <button type="submit" class="btn btn-primary" (click)="SaveDescribeDataset();">Save and describe</button>
                </div>
            </div>
        </div>
    </div>