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

<app-spinner> </app-spinner>
<table class="table table-striped" [mfData]="tableData | datasetTableFilter : filterQuery | datasetstatusFilter: statusFilter" #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)]="statusFilter" [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)="getDatasets('false')">
                    <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="profile">Profile</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>

        </tr>
    </thead>
    <tbody>
        <tr class="grayout-empty-table" *ngIf="!mf.data[0]">
            <td colspan="7">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?.uri}}</td>
            <td>{{dataset?.profile?.label}}</td>
            <td>{{dataset?.description}}</td>
            <td>{{dataset?.created | date:'yyyy-MM-dd HH:mm:ss Z'}}</td>
            <td>{{dataset?.status | statusToString }}</td>
            <td><a  href="#" class="editGridColumn" (click)="editRow(dataset, $event)">
                    <i class="fa fa-pencil fa-fw" data-toggle="tooltip" title="edit Properties" id="editDataset"></i></a>
                <a  href="#" class="editGridColumn" (click)="editRow(dataset, $event)">
                        <i class="fa fa-eraser fa-fw" data-toggle="modal" data-target="#delete-dataset-confirm" (click)="markDatasetForDelete(dataset)" title="delete Dataset"></i></a> 
                <a  href="#" class="editGridColumn" (click)="editRow(dataset, $event)">
                        <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" >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)="SaveDataset()">
                    <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="status-name" class="col-form-label">Status:</label>
                            <select class="form-control" id="statusid" [(ngModel)]="dataset.status" name="statusDropDown" #datasetfield>
                            <option *ngFor="let opt of statusDropDown.options" [value]="opt.key">{{opt.value}}</option>
                            </select>
                        </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)]="dataset.description" name="description"></textarea>
                            </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>

<!-- Confirmation module- do not delete --> 
<confirmation [confirmationID]="'delete-dataset-confirm'" [confirmationTitle]="'Caution'" [confirmationDescr]="'This action will delete this dataset. Are you sure you want to delete this dataset ? This is not revertable !'" (responseSender)="deleteDataset($event)"></confirmation>