argos/dmp-frontend/src/app/projects/project.html

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

<table class="table table-striped" [mfData]="tableData | projectTableFilter : filterQuery : whoami?.id : onlyMyProjects"
    #mf="mfDataTable" [mfRowsOnPage]="rowsOnPage" [(mfSortBy)]="sortBy" [(mfSortOrder)]="sortOrder">
    <thead>
        <tr>
            <th colspan="1">
                <input class="form-control" [(ngModel)]="filterQuery" placeholder='Filter' />
            </th>
            <th style="width:50px;">
                <button class="btn btn-default" (click)="getProjects('false')">
                    <span class="glyphicon glyphicon-refresh"></span>
                </button>
            </th>
            <th colspan="1">
                <div class="checkbox">
                    <label><input type="checkbox" [(ngModel)]="onlyMyProjects" >Show only my projects</label>
                </div>
            </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="abbreviation">Αbbreviation</mfDefaultSorter>
            </th>
            <th>
                <mfDefaultSorter by="startdate">Start Date</mfDefaultSorter>
            </th>
            <th>
                <mfDefaultSorter by="enddate">End Date</mfDefaultSorter>
            </th>
            <th>
                <mfDefaultSorter by="status">Status</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="7">No elements</td>
        </tr>

        <tr *ngFor="let project of mf.data" class="hover">
            <td [ngClass]="{true:'visible', false:'invisible'}[showIDs]">{{project?.id}}</td>
            <td>{{(project?.label?.length > 40) ? (project?.label | slice:0:40)+'...':(project?.label) }}</td>
            <td>{{project?.abbreviation}}</td>
            <td>{{project?.startdate | date:'medium' }}</td>
            <td>{{project?.enddate | date:'medium'}}</td>
            <td>{{project?.status | statusToString}}</td>
            <td>{{(project?.description?.length > 40) ? (project?.description | slice:0:40)+'...':(project?.description) }}</td>
            <td>
                <a [ngClass]="{'not-active': whoami?.id!=project?.creationUser?.id }" class="editGridColumn" (click)="editRow(project, $event)">
                    <i class="fa fa-pencil fa-fw" data-toggle="tooltip" title="edit properties" id="editDMP" ></i>
                </a>
                <!--
                <a>
                    <i class="fa fa-eraser fa-fw" data-toggle="tooltip" title="delete project"></i>
                </a>
                -->
            </td>
            
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="1">
                <button type="button" class="btn btn-info btncustom" (click)="newProject(item)">New Project</button>
            </td>
            <td colspan="5">
                
                <mfBootstrapPaginator [rowsOnPageSet]="[5,10,20]"></mfBootstrapPaginator>
            </td>
        </tr>
    </tfoot>
</table>


<div class="modal fade" id="newEditProjectModal" tabindex="-1" role="dialog" aria-labelledby="newProjectModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Project</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)="SaveProject()" novalidate>

                        <label for="label-name" class="form-control-label">Label:</label>
                        <input type="text" class="form-control" id="label-name" [(ngModel)]= "project.label" name = "label" required>
                    <div class="form-group">
                        <label for="abbreviation-text" class="form-control-label">Abbreviation:</label>
                        <input class="form-control" id="abbreviation-text" [(ngModel)]= "project.abbreviation" name = "abbreviation">
                    </div>
                    <div class="form-group">
                        <label for="reference-text" class="form-control-label">Reference:</label>
                        <input class="form-control" id="reference-text" [(ngModel)]= "project.reference" name = "reference">
                    </div>
                    <div class="form-group">
                        <label for="uri-text" class="form-control-label">Uri:</label>
                        <input class="form-control" id="uri-text" [(ngModel)]= "project.uri" name = "uri">
                    </div>
                    <div class="form-group">
                        <label for="start-date" class="form-control-label">Start Date:</label>
                        <input class="form-control" type='date' class="form-control" [(ngModel)]= "project.startdate" id='start-date' name = "startdate" required/>
                    </div>
                    <div class="form-group">
                        <label for="end-date" class="form-control-label">End Date:</label>
                        <input class="form-control" type='date' class="form-control" [(ngModel)]= "project.enddate" id='end-date' name = "enddate" required/>
                    </div>
                    <div class="form-group">
                            <label for="status-name" class="col-form-label">Status:</label>
                            <select class="form-control" id="statusid" [(ngModel)]="project.status" name="statusDropDown">
                            <option *ngFor="let opt of statusDropDown.options" [value]="opt.key">{{opt.value}}</option>
                            </select>
                        </div>
                    <div class="form-group">
                        <label for="code-name" class="form-control-label">Description:</label>
                        <textarea rows="3" class="form-control" name="desc" id="description" [(ngModel)]= "project.description"> </textarea>
                    </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"  [disabled]="!newProjectForm.form.valid" (click)="SaveProject();">Save project</button>
            </div>
        </div>
    </div>
</div>