hardi
/
opt-cc
1
0
Fork 0
Code Pull Requests Releases 47 Activity

Improve manage pages form positioning and request/confirm promotion/award pages

pull/59/head
HardiReady 2019-03-02 15:14:52 +01:00
parent 14bf1d6e38
commit fe7140afd9
14 changed files with 163 additions and 202 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
static/src/app/models/model-interfaces.ts
View File

@ -85,7 +85,7 @@ export interface Rank {
export interface Award { export interface Award {
_id?: string; _id?: string;
userId: string; userId: string | User;
decorationId?: any; // Decoration or string decorationId?: any; // Decoration or string
reason?: string; reason?: string;
proposer?: AppUser; proposer?: AppUser;

119
static/src/app/request/award/req-award.component.html
View File

@ -1,66 +1,68 @@
<form #form="ngForm" class="overview"> <div class="request-award-container">
<h3>{{'request.award.headline' | translate}}</h3> <form #form="ngForm" class="overview">
<h3>{{'request.award.headline' | translate}}</h3>
<div class="form-group"> <div class="form-group">
<label for="user">{{'request.award.field.user' | translate}}</label> <label for="user">{{'request.award.field.user' | translate}}</label>
<select class="form-control" <select class="form-control"
name="user" name="user"
id="user" id="user"
[(ngModel)]="user" [(ngModel)]="user"
[compareWith]="equals" [compareWith]="equals"
(change)="toggleUser()" (change)="toggleUser()"
required> required>
<option [ngValue]="{_id: '0'}">{{'request.award.field.user.placeholder' | translate}}</option> <option [ngValue]="{_id: '0'}">{{'request.award.field.user.placeholder' | translate}}</option>
<option *ngFor="let user of users" [ngValue]="user"> <option *ngFor="let user of users" [ngValue]="user">
{{user.username}} {{user.username}}
</option> </option>
</select> </select>
</div>
<div class="form-group">
<label for="decoration">{{'request.award.field.award' | translate}}</label>
<select class="form-control"
name="decoration"
id="decoration"
[(ngModel)]="decoration"
[compareWith]="equals"
(change)="toggleDecoPreview(decoDescription, decoPreview)"
required>
<option [ngValue]="{_id: '0'}">{{'request.award.field.award.placeholder' | translate}}</option>
<option *ngFor="let deco of decorations" [ngValue]="deco">
{{deco.name}}
</option>
</select>
</div>
<div class="div-table-row" [style.display]="decoPreviewDisplay" style="margin-top: 5px; margin-bottom:10px">
<div class="col-sm-1 decoration-preview">
<img class="center-block" #decoPreview>
</div> </div>
<div class="col-sm-2"
style="border-radius: 0px 15px 15px 0px; font-style: oblique" #decoDescription> <div class="form-group">
&nbsp; <label for="decoration">{{'request.award.field.award' | translate}}</label>
<select class="form-control"
name="decoration"
id="decoration"
[(ngModel)]="decoration"
[compareWith]="equals"
(change)="toggleDecoPreview(decoDescription, decoPreview)"
required>
<option [ngValue]="{_id: '0'}">{{'request.award.field.award.placeholder' | translate}}</option>
<option *ngFor="let deco of decorations" [ngValue]="deco">
{{deco.name}}
</option>
</select>
</div> </div>
</div>
<div class="form-group"> <div class="div-table-row" [style.display]="decoPreviewDisplay" style="margin-top: 5px; margin-bottom:10px">
<label for="reason">{{'request.award.field.reason' | translate}}</label> <div class="col-sm-1 decoration-preview">
<textarea class="form-control center-block" name="reason" [(ngModel)]="reason" required <img class="center-block" #decoPreview>
id="reason" placeholder="{{'request.award.field.reason.placeholder' | translate}}" rows="3"></textarea> </div>
</div> <div class="col-sm-2"
style="border-radius: 0px 15px 15px 0px; font-style: oblique" #decoDescription>
&nbsp;
</div>
</div>
<button id="cancel" <div class="form-group">
(click)="cancel()" <label for="reason">{{'request.award.field.reason' | translate}}</label>
class="btn btn-default"> <textarea class="form-control center-block" name="reason" [(ngModel)]="reason" required
{{'request.award.button.cancel' | translate}} id="reason" placeholder="{{'request.award.field.reason.placeholder' | translate}}" rows="3"></textarea>
</button> </div>
<button id="save" <button id="cancel"
(click)="addAwarding(decoPreview, decoDescription)" (click)="cancel()"
class="btn btn-default" class="btn btn-default">
[disabled]="!form.valid || user._id === '0' || decoration._id === '0'"> {{'request.award.button.cancel' | translate}}
{{'request.award.button.submit' | translate}} </button>
</button>
<button id="save"
(click)="addAwarding(decoPreview, decoDescription)"
class="btn btn-default"
[disabled]="!form.valid || user._id === '0' || decoration._id === '0'">
{{'request.award.button.submit' | translate}}
</button>
</form>
<div class="table-container" *ngIf="showForm"> <div class="table-container" *ngIf="showForm">
<table class="table table-hover"> <table class="table table-hover">
@ -113,5 +115,4 @@
</tbody> </tbody>
</table> </table>
</div> </div>
</div>
</form>

27
static/src/app/request/award/req-award.component.scss
View File

@ -1,18 +1,19 @@
@import url('../../style/overview.scss'); div.request-award-container {
margin: 2em auto;
width: 95%;
min-width: 835px;
.overview { form {
width: 100% !important; width: 33%;
margin-left: 25px !important; min-width: 300px;
margin: auto;
}
} }
.decoration-preview { .decoration-preview {
padding: 5px; padding: 5px;
} }
.trash {
cursor: pointer;
}
.table { .table {
overflow-wrap: break-word; overflow-wrap: break-word;
table-layout: fixed; table-layout: fixed;
@ -21,16 +22,6 @@
.table-container { .table-container {
margin-top: 40px; margin-top: 40px;
overflow-x: auto; overflow-x: auto;
width: 90%;
min-width: 800px; min-width: 800px;
padding: 5px; padding: 5px;
} }
.form-group {
width: 25%;
min-width: 300px;
}
h3 {
margin: 80px 0 20px -20px;
}

4
static/src/app/request/confirm-award/confirm-award.component.html
View File

@ -1,4 +1,4 @@
<form #form="ngForm" class="overview"> <div class="confirm-award-container">
<h3>{{'request.confirm.award.headline' | translate}}</h3> <h3>{{'request.confirm.award.headline' | translate}}</h3>
<div class="table-container"> <div class="table-container">
@ -58,4 +58,4 @@
</tbody> </tbody>
</table> </table>
</div> </div>
</form> </div>

18
static/src/app/request/confirm-award/confirm-award.component.scss
View File

@ -1,7 +1,7 @@
@import url('../../style/overview.scss'); div.confirm-award-container {
margin: 2em auto;
.overview { width: 95%;
margin-left: 25px !important; min-width: 835px;
} }
.decoration-preview { .decoration-preview {
@ -10,6 +10,7 @@
.action { .action {
cursor: pointer; cursor: pointer;
line-height: 2em;
} }
.table { .table {
@ -20,14 +21,5 @@
.table-container { .table-container {
margin-top: 40px; margin-top: 40px;
overflow-x: auto; overflow-x: auto;
width: 90%;
padding: 5px; padding: 5px;
} }
.form-group {
width: 25%;
}
h3 {
margin: 80px 0 20px -20px;
}

2
static/src/app/request/confirm-award/confirm-award.component.ts
View File

@ -25,7 +25,7 @@ export class ConfirmAwardComponent implements OnInit {
}); });
} }
confirm(award: Award, decision: boolean, reason: string, rejectReason: string) { confirm(award: Award, decision: boolean, reason: string, rejectReason?: string) {
const updateObject = { const updateObject = {
_id: award._id, _id: award._id,
confirmed: decision ? 1 : 2 confirmed: decision ? 1 : 2

6
static/src/app/request/confirm-promotion/confirm-promotion.component.html
View File

@ -1,4 +1,4 @@
<form #form="ngForm" class="overview"> <div class="confirm-promotion-container">
<h3>{{'request.confirm.promotion.headline' | translate}}</h3> <h3>{{'request.confirm.promotion.headline' | translate}}</h3>
<div class="table-container"> <div class="table-container">
@ -52,7 +52,7 @@
<td class="text-right"> <td class="text-right">
<a class="action" (click)="confirm(promotion, true)"> <a class="action" (click)="confirm(promotion, true)">
{{'request.confirm.promotion.table.button.action.accept' | translate}} {{'request.confirm.promotion.table.button.action.accept' | translate}}
</a><br> </a>
<a class="action" (click)="confirm(promotion, false, rejectReason.value)"> <a class="action" (click)="confirm(promotion, false, rejectReason.value)">
{{'request.confirm.promotion.table.button.action.reject' | translate}} {{'request.confirm.promotion.table.button.action.reject' | translate}}
</a> </a>
@ -61,4 +61,4 @@
</tbody> </tbody>
</table> </table>
</div> </div>
</form> </div>

18
static/src/app/request/confirm-promotion/confirm-promotion.component.scss
View File

@ -1,7 +1,7 @@
@import url('../../style/overview.scss'); div.confirm-promotion-container {
margin: 2em auto;
.overview { width: 95%;
margin-left: 25px !important; min-width: 835px;
} }
.decoration-preview { .decoration-preview {
@ -10,6 +10,7 @@
.action { .action {
cursor: pointer; cursor: pointer;
line-height: 2em;
} }
.table { .table {
@ -20,14 +21,5 @@
.table-container { .table-container {
margin-top: 40px; margin-top: 40px;
overflow-x: auto; overflow-x: auto;
width: 90%;
padding: 5px; padding: 5px;
} }
.form-group {
width: 25%;
}
h3 {
margin: 80px 0 20px -20px;
}

2
static/src/app/request/confirm-promotion/confirm-promotion.component.ts
View File

@ -33,7 +33,7 @@ export class ConfirmPromotionComponent implements OnInit {
}); });
} }
confirm(promotion: Promotion, decision: boolean, rejectReason: string) { confirm(promotion: Promotion, decision: boolean, rejectReason?: string) {
const updateObject = { const updateObject = {
_id: promotion._id, _id: promotion._id,
confirmed: decision ? 1 : 2 confirmed: decision ? 1 : 2

104
static/src/app/request/promotion/req-promotion.component.html
View File

@ -1,61 +1,63 @@
<form #form="ngForm" class="overview"> <div class="request-promotion-container">
<h3>{{'request.promotion.headline' | translate}}</h3> <form #form="ngForm">
<h3>{{'request.promotion.headline' | translate}}</h3>
<div class="form-group">
<label for="user">{{'request.promotion.field.participant' | translate}}</label>
<select class="form-control"
name="user"
id="user"
[(ngModel)]="user"
[compareWith]="equals"
required
(change)="toggleUser()">
<option [ngValue]="{_id: '0'}">{{'request.promotion.field.participant.placeholder' | translate}}</option>
<option *ngFor="let user of users" [ngValue]="user">
{{user.username}}
</option>
</select>
</div>
<div *ngIf="showForm">
<div class="form-group"> <div class="form-group">
<label for="user">{{'request.promotion.field.rank.before' | translate}}</label> <label for="user">{{'request.promotion.field.participant' | translate}}</label>
<input class="form-control"
[(ngModel)]="selectedUserRank"
[ngModelOptions]="{standalone: true}"
readonly>
</div>
<div class="form-group">
<label for="decoration">{{'request.promotion.field.rank.after' | translate}}</label>
<select class="form-control" <select class="form-control"
name="decoration" name="user"
id="decoration" id="user"
#decorationField [(ngModel)]="user"
[(ngModel)]="newLevel" [compareWith]="equals"
required> required
<option *ngFor="let rank of ranks" [ngValue]="rank.level"> (change)="toggleUser()">
{{rank.name}} <option [ngValue]="{_id: '0'}">{{'request.promotion.field.participant.placeholder' | translate}}</option>
<option *ngFor="let user of users" [ngValue]="user">
{{user.username}}
</option> </option>
</select> </select>
</div> </div>
</div> <div *ngIf="showForm">
<button id="cancel" <div class="form-group">
(click)="cancel()" <label for="user">{{'request.promotion.field.rank.before' | translate}}</label>
class="btn btn-default"> <input class="form-control"
{{'request.promotion.button.cancel' | translate}} [(ngModel)]="selectedUserRank"
</button> [ngModelOptions]="{standalone: true}"
readonly>
</div>
<button id="save" <div class="form-group">
*ngIf="showForm" <label for="decoration">{{'request.promotion.field.rank.after' | translate}}</label>
(click)="addPromotion()" <select class="form-control"
class="btn btn-default" name="decoration"
[disabled]="newLevel === user.rankLvl"> id="decoration"
{{'request.promotion.button.submit' | translate}} #decorationField
</button> [(ngModel)]="newLevel"
required>
<option *ngFor="let rank of ranks" [ngValue]="rank.level">
{{rank.name}}
</option>
</select>
</div>
</div>
<button id="cancel"
(click)="cancel()"
class="btn btn-default">
{{'request.promotion.button.cancel' | translate}}
</button>
<button id="save"
*ngIf="showForm"
(click)="addPromotion()"
class="btn btn-default"
[disabled]="newLevel === user.rankLvl">
{{'request.promotion.button.submit' | translate}}
</button>
</form>
<div class="table-container"> <div class="table-container">
<label>Beförderungsanträge</label> <label>Beförderungsanträge</label>
@ -106,6 +108,4 @@
</tbody> </tbody>
</table> </table>
</div> </div>
</div>
</form>

26
static/src/app/request/promotion/req-promotion.component.scss
View File

@ -1,17 +1,19 @@
@import url('../../style/overview.scss'); .request-promotion-container {
margin: 2em auto;
width: 95%;
min-width: 835px;
.overview { form {
margin-left: 25px !important; width: 33%;
min-width: 300px;
margin: auto;
}
} }
.decoration-preview { .decoration-preview {
padding: 5px; padding: 5px;
} }
.trash {
cursor: pointer;
}
.table { .table {
overflow-wrap: break-word; overflow-wrap: break-word;
table-layout: fixed; table-layout: fixed;
@ -20,16 +22,6 @@
.table-container { .table-container {
margin-top: 40px; margin-top: 40px;
overflow-x: auto; overflow-x: auto;
width: 90%;
min-width: 800px; min-width: 800px;
padding: 5px; padding: 5px;
} }
.form-group {
width: 25%;
min-width: 300px;
}
h3 {
margin: 80px 0 20px -20px;
}

14
static/src/app/request/sql-dashboard/sql-dashboard.component.html
View File

@ -1,4 +1,4 @@
<div class="overview"> <div class="sql-dashboard-container">
<h3>{{'request.sql.dashboard.headline' | translate}}</h3> <h3>{{'request.sql.dashboard.headline' | translate}}</h3>
<div class="table-container"> <div class="table-container">
@ -6,11 +6,11 @@
<table class="table table-hover"> <table class="table table-hover">
<thead> <thead>
<tr> <tr>
<th class="col-sm-1">{{'request.confirm.promotion.table.head.participant' | translate}}</th> <th class="col-sm-2">{{'request.confirm.promotion.table.head.participant' | translate}}</th>
<th class="col-sm-1">{{'request.confirm.promotion.table.head.rank.before' | translate}}</th> <th class="col-sm-2">{{'request.confirm.promotion.table.head.rank.before' | translate}}</th>
<th class="col-sm-1">{{'request.confirm.promotion.table.head.rank.after' | translate}}</th> <th class="col-sm-2">{{'request.confirm.promotion.table.head.rank.after' | translate}}</th>
<th class="col-sm-1 ">{{'request.confirm.promotion.table.head.requester' | translate}}</th> <th class="col-sm-2 ">{{'request.confirm.promotion.table.head.requester' | translate}}</th>
<th class="col-sm-1 text-center">{{'request.confirm.promotion.table.head.date' | translate}}</th> <th class="col-sm-1 text-right">{{'request.confirm.promotion.table.head.date' | translate}}</th>
</tr> </tr>
</thead> </thead>
<tbody *ngFor="let promotion of promotions"> <tbody *ngFor="let promotion of promotions">
@ -27,7 +27,7 @@
<td> <td>
{{promotion.proposer.username}} {{promotion.proposer.username}}
</td> </td>
<td class="text-center"> <td class="text-right">
{{promotion.timestamp | date: 'dd.MM.yyyy'}} {{promotion.timestamp | date: 'dd.MM.yyyy'}}
</td> </td>
</tr> </tr>

13
static/src/app/request/sql-dashboard/sql-dashboard.component.scss
View File

@ -1,7 +1,7 @@
@import url('../../style/overview.scss'); .sql-dashboard-container {
margin: 2em auto;
.overview { width: 95%;
margin-left: 25px !important; min-width: 835px;
} }
.decoration-preview { .decoration-preview {
@ -16,11 +16,6 @@
.table-container { .table-container {
margin-top: 40px; margin-top: 40px;
overflow-x: auto; overflow-x: auto;
width: 90%;
min-width: 800px; min-width: 800px;
padding: 5px; padding: 5px;
} }
h3 {
margin: 80px 0 20px -20px;
}

10
static/src/app/style/overview.scss
View File

@ -8,10 +8,8 @@
bottom: 10px; bottom: 10px;
} }
.absolute-label { @media all and (max-width: 959px) {
display: block; .overview {
position: absolute; left: 345px;
font-size: 12px; }
padding: 5px;
margin-left: 25%;
} }