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

<meta name="google-signin-client_id" content="524432312250-vhgidft856v8qftsc81kls4c74v87d8o.apps.googleusercontent.com">

<div style="margin: auto; max-width: 1000px; margin-top:50px">
    <div>
        <span>Filter: </span>
        <input type="text" id="myInput" (keyup)="filterGrid()" placeholder="Search for projects.." title="Type in a name">
    </div>
    <data-table id="dmps-grid" headerTitle="My Dmps" [items]="dmps" [itemCount]="dmpCount" (reload)="reloadDmps($event)" [limit]="8"
        [sortBy]="'label'" [sortAsc]="true" [selectColumn]="true" [multiSelect]="false" [substituteRows]="false" [translations]="translations"
        [indexColumnHeader]="'#'" [selectOnRowClick]="true" (rowClick)="selectDmp($event)">

        <data-table-column [property]="'label'" [header]="'Label'" [sortable]="true">
        </data-table-column>
        <data-table-column [property]="'projectLabel'" [header]="'project'" [sortable]="true">
        </data-table-column>
        <data-table-column [property]="'previous'" [header]="'Previous'" [sortable]="true">
        </data-table-column>
        <data-table-column [property]="'version'" [header]="'Version'" [sortable]="true">
        </data-table-column>
        <data-table-column [property]="'profileData'" [header]="'Profile Data'" [sortable]="true">
        </data-table-column>
        <data-table-column [property]="'profile'" [header]="'Profile'" [sortable]="true">
        </data-table-column>
        <data-table-column [property]="'active'" [header]="'Status'" [width]="100" [resizable]="true">
            <template #dataTableHeader let-item="item">
                <span>Active</span>
            </template>
            <template #dataTableCell let-item="item">
                <span style="color: grey">
            <span class="fa fa-check" *ngIf="item.active"></span>
                <span class="fa fa-times" *ngIf="!item.active"></span>
                </span>
            </template>
        </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>
    <div style="margin-top: 10px">
        <b>Selected:</b>
        <!-- <span *ngIf="dmpsTable.selectedRow == null"><i>No item selected</i></span>
        <span [textContent]="dmpsTable.selectedRow && dmpsTable.selectedRow.item.name"></span> -->
    </div>
    <button type="button" class="btn btn-info" (click)="newDmp(item)">New Dmp</button>
    <!-- data-toggle="modal" data-target="#newDmpModal" -->

    <!-- <select class="form-control" [id]="datasetDropDownKey" [(ngModel)]="datasetDropDownKey">
                <option *ngFor="let opt of datasetDropDown.options" [value]="opt.key">{{opt.value}}</option>
                </select> -->

</div>


<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">
                <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="recipient-name" class="col-form-label">Project:</label>
                        <select class="form-control" [id]="projectsDropDownKey" [(ngModel)]="dmp.project" [name]="projectsDropDown" #datasetfield>
                                  <option *ngFor="let opt of projectsDropDown.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" name="previous">
                    </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)]="dmp.label" name="label">
                    </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" name="version">
                    </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="panel panel-default">
                        <div class="panel-heading">
                            <span style="font-weight: bold;">Profile</span>
                            <div class="panel-body">
                                <div class="form-group">
                                    <label for="uri-text" class="form-control-label">Label:</label>
                                    <input class="form-control" id="uri-text" [(ngModel)]="dmp.profile" name="profile">
                                </div>
                                <div class="form-group">
                                    <label for="uri-text" class="form-control-label">Definition:</label>
                                    <input class="form-control" id="uri-text" [(ngModel)]="dmp.profileDefinition" name="profileDefinition">

                                </div>
                            </div>
                        </div>
                    </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> -->
            <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)="SaveNewDmp();">Save Dmp</button>
        </div>
    </div>
</div>
</div>

<!--Modal for DMPs-->
<!-- <modal *ngIf="item && show" [(show)]="show" [item]="item" [(dataSetVisibe)]="dataSetVisibe"></modal> -->

<!--DATASET TABLE-->
<datasets-table *ngIf="dataSetVisibe" [dmpIdforDatasets]="dmpIdforDatasets" [dmpLabelforDatasets] = "dmpLabelforDatasets" [(dataSetVisibe)]="dataSetVisibe"></datasets-table>

<a href="#" (click)="signOut();" #isignOutBtn>Sign out</a>
<router-outlet></router-outlet>