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

<div style="margin: auto; max-width: 1000px; margin-top:50px">
        <data-table id="films-grid" headerTitle="Datasets" [items]="datasets" [itemCount]="datasetCount" (reload)="reloadDatasets($event)"
            [limit]="8" [sortBy]="'name'" [sortAsc]="false" [substituteRows]="false"
             [translations]="translations" >
            
            <data-table-column [property]="'name'" [header]="'Label'" [sortable]="true">                  
            </data-table-column>
            <data-table-column [property]="'dmp'" [header]="'DMP'" [sortable]="true">
            </data-table-column>
            <data-table-column [property]="'profile'" [header]="'Profile'" [sortable]="true">
            </data-table-column>
            <data-table-column [property]="'uriDataset'" [header]="'Uri'" [sortable]="true">
            </data-table-column>
            <!-- <data-table-column [property]="'definition'" [header]="'Definition'" [sortable]="true">
            </data-table-column> -->
            <data-table-column header="Actions">
                <template #dataTableHeader let-item="item">
                    <i>Actions</i>
                </template>
                <template #dataTableCell let-item="item">
                    <a class="editGridColumn" (click) = "editRow(item)"><i class="fa fa-pencil fa-fw"></i></a> <!--data-toggle="modal" data-target="#exampleModalDmps" -->
                </template>
            </data-table-column>
            <data-table-column header="Edit">
                <template #dataTableHeader let-item="item">
                    <i>Edit</i>
                </template>
                <template #dataTableCell let-item="item">
                    <a class="editGridColumn" (click) = "selectDataset(item)"><i class="fa fa-pencil fa-fw"></i></a> <!--data-toggle="modal" data-target="#exampleModalDmps" -->
                </template>
            </data-table-column>
        </data-table>
        <div style="margin-top: 10px">
            <button type="button" class="btn btn-info" (click) = "newDataset(item)" >New Dataset</button>   <!-- data-toggle="modal" data-target="#newDatasetModal" -->
            <!-- <b>Selected:</b>
            <span *ngIf="projectsTable.selectedRow == null"><i>No item selected</i></span>
            <span [textContent]="projectsTable.selectedRow && projectsTable.selectedRow.item.name"></span> -->
        </div>    
        
    </div>

    <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">Create New 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="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>