Improve manage pages form positioning and request/confirm promotion/award pages
parent
14bf1d6e38
commit
fe7140afd9
|
|
@ -85,7 +85,7 @@ export interface Rank {
|
|||
|
||||
export interface Award {
|
||||
_id?: string;
|
||||
userId: string;
|
||||
userId: string | User;
|
||||
decorationId?: any; // Decoration or string
|
||||
reason?: string;
|
||||
proposer?: AppUser;
|
||||
|
|
|
|||
|
|
@ -1,66 +1,68 @@
|
|||
<form #form="ngForm" class="overview">
|
||||
<h3>{{'request.award.headline' | translate}}</h3>
|
||||
<div class="request-award-container">
|
||||
<form #form="ngForm" class="overview">
|
||||
<h3>{{'request.award.headline' | translate}}</h3>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="user">{{'request.award.field.user' | translate}}</label>
|
||||
<select class="form-control"
|
||||
name="user"
|
||||
id="user"
|
||||
[(ngModel)]="user"
|
||||
[compareWith]="equals"
|
||||
(change)="toggleUser()"
|
||||
required>
|
||||
<option [ngValue]="{_id: '0'}">{{'request.award.field.user.placeholder' | translate}}</option>
|
||||
<option *ngFor="let user of users" [ngValue]="user">
|
||||
{{user.username}}
|
||||
</option>
|
||||
</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 class="form-group">
|
||||
<label for="user">{{'request.award.field.user' | translate}}</label>
|
||||
<select class="form-control"
|
||||
name="user"
|
||||
id="user"
|
||||
[(ngModel)]="user"
|
||||
[compareWith]="equals"
|
||||
(change)="toggleUser()"
|
||||
required>
|
||||
<option [ngValue]="{_id: '0'}">{{'request.award.field.user.placeholder' | translate}}</option>
|
||||
<option *ngFor="let user of users" [ngValue]="user">
|
||||
{{user.username}}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-sm-2"
|
||||
style="border-radius: 0px 15px 15px 0px; font-style: oblique" #decoDescription>
|
||||
|
||||
|
||||
<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>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="reason">{{'request.award.field.reason' | translate}}</label>
|
||||
<textarea class="form-control center-block" name="reason" [(ngModel)]="reason" required
|
||||
id="reason" placeholder="{{'request.award.field.reason.placeholder' | translate}}" rows="3"></textarea>
|
||||
</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 class="col-sm-2"
|
||||
style="border-radius: 0px 15px 15px 0px; font-style: oblique" #decoDescription>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button id="cancel"
|
||||
(click)="cancel()"
|
||||
class="btn btn-default">
|
||||
{{'request.award.button.cancel' | translate}}
|
||||
</button>
|
||||
<div class="form-group">
|
||||
<label for="reason">{{'request.award.field.reason' | translate}}</label>
|
||||
<textarea class="form-control center-block" name="reason" [(ngModel)]="reason" required
|
||||
id="reason" placeholder="{{'request.award.field.reason.placeholder' | translate}}" rows="3"></textarea>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<button id="cancel"
|
||||
(click)="cancel()"
|
||||
class="btn btn-default">
|
||||
{{'request.award.button.cancel' | translate}}
|
||||
</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">
|
||||
<table class="table table-hover">
|
||||
|
|
@ -113,5 +115,4 @@
|
|||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,18 +1,19 @@
|
|||
@import url('../../style/overview.scss');
|
||||
div.request-award-container {
|
||||
margin: 2em auto;
|
||||
width: 95%;
|
||||
min-width: 835px;
|
||||
|
||||
.overview {
|
||||
width: 100% !important;
|
||||
margin-left: 25px !important;
|
||||
form {
|
||||
width: 33%;
|
||||
min-width: 300px;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.decoration-preview {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.trash {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.table {
|
||||
overflow-wrap: break-word;
|
||||
table-layout: fixed;
|
||||
|
|
@ -21,16 +22,6 @@
|
|||
.table-container {
|
||||
margin-top: 40px;
|
||||
overflow-x: auto;
|
||||
width: 90%;
|
||||
min-width: 800px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
width: 25%;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 80px 0 20px -20px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<form #form="ngForm" class="overview">
|
||||
<div class="confirm-award-container">
|
||||
<h3>{{'request.confirm.award.headline' | translate}}</h3>
|
||||
|
||||
<div class="table-container">
|
||||
|
|
@ -58,4 +58,4 @@
|
|||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
@import url('../../style/overview.scss');
|
||||
|
||||
.overview {
|
||||
margin-left: 25px !important;
|
||||
div.confirm-award-container {
|
||||
margin: 2em auto;
|
||||
width: 95%;
|
||||
min-width: 835px;
|
||||
}
|
||||
|
||||
.decoration-preview {
|
||||
|
|
@ -10,6 +10,7 @@
|
|||
|
||||
.action {
|
||||
cursor: pointer;
|
||||
line-height: 2em;
|
||||
}
|
||||
|
||||
.table {
|
||||
|
|
@ -20,14 +21,5 @@
|
|||
.table-container {
|
||||
margin-top: 40px;
|
||||
overflow-x: auto;
|
||||
width: 90%;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 80px 0 20px -20px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 = {
|
||||
_id: award._id,
|
||||
confirmed: decision ? 1 : 2
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<form #form="ngForm" class="overview">
|
||||
<div class="confirm-promotion-container">
|
||||
<h3>{{'request.confirm.promotion.headline' | translate}}</h3>
|
||||
|
||||
<div class="table-container">
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
<td class="text-right">
|
||||
<a class="action" (click)="confirm(promotion, true)">
|
||||
{{'request.confirm.promotion.table.button.action.accept' | translate}}
|
||||
</a><br>
|
||||
</a>
|
||||
<a class="action" (click)="confirm(promotion, false, rejectReason.value)">
|
||||
{{'request.confirm.promotion.table.button.action.reject' | translate}}
|
||||
</a>
|
||||
|
|
@ -61,4 +61,4 @@
|
|||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
@import url('../../style/overview.scss');
|
||||
|
||||
.overview {
|
||||
margin-left: 25px !important;
|
||||
div.confirm-promotion-container {
|
||||
margin: 2em auto;
|
||||
width: 95%;
|
||||
min-width: 835px;
|
||||
}
|
||||
|
||||
.decoration-preview {
|
||||
|
|
@ -10,6 +10,7 @@
|
|||
|
||||
.action {
|
||||
cursor: pointer;
|
||||
line-height: 2em;
|
||||
}
|
||||
|
||||
.table {
|
||||
|
|
@ -20,14 +21,5 @@
|
|||
.table-container {
|
||||
margin-top: 40px;
|
||||
overflow-x: auto;
|
||||
width: 90%;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 80px 0 20px -20px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 = {
|
||||
_id: promotion._id,
|
||||
confirmed: decision ? 1 : 2
|
||||
|
|
|
|||
|
|
@ -1,61 +1,63 @@
|
|||
<form #form="ngForm" class="overview">
|
||||
<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="request-promotion-container">
|
||||
<form #form="ngForm">
|
||||
<h3>{{'request.promotion.headline' | translate}}</h3>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="user">{{'request.promotion.field.rank.before' | 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>
|
||||
<label for="user">{{'request.promotion.field.participant' | translate}}</label>
|
||||
<select class="form-control"
|
||||
name="decoration"
|
||||
id="decoration"
|
||||
#decorationField
|
||||
[(ngModel)]="newLevel"
|
||||
required>
|
||||
<option *ngFor="let rank of ranks" [ngValue]="rank.level">
|
||||
{{rank.name}}
|
||||
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>
|
||||
<div *ngIf="showForm">
|
||||
|
||||
<button id="cancel"
|
||||
(click)="cancel()"
|
||||
class="btn btn-default">
|
||||
{{'request.promotion.button.cancel' | translate}}
|
||||
</button>
|
||||
<div class="form-group">
|
||||
<label for="user">{{'request.promotion.field.rank.before' | translate}}</label>
|
||||
<input class="form-control"
|
||||
[(ngModel)]="selectedUserRank"
|
||||
[ngModelOptions]="{standalone: true}"
|
||||
readonly>
|
||||
</div>
|
||||
|
||||
<button id="save"
|
||||
*ngIf="showForm"
|
||||
(click)="addPromotion()"
|
||||
class="btn btn-default"
|
||||
[disabled]="newLevel === user.rankLvl">
|
||||
{{'request.promotion.button.submit' | translate}}
|
||||
</button>
|
||||
<div class="form-group">
|
||||
<label for="decoration">{{'request.promotion.field.rank.after' | translate}}</label>
|
||||
<select class="form-control"
|
||||
name="decoration"
|
||||
id="decoration"
|
||||
#decorationField
|
||||
[(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">
|
||||
<label>Beförderungsanträge</label>
|
||||
|
|
@ -106,6 +108,4 @@
|
|||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,19 @@
|
|||
@import url('../../style/overview.scss');
|
||||
.request-promotion-container {
|
||||
margin: 2em auto;
|
||||
width: 95%;
|
||||
min-width: 835px;
|
||||
|
||||
.overview {
|
||||
margin-left: 25px !important;
|
||||
form {
|
||||
width: 33%;
|
||||
min-width: 300px;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.decoration-preview {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.trash {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.table {
|
||||
overflow-wrap: break-word;
|
||||
table-layout: fixed;
|
||||
|
|
@ -20,16 +22,6 @@
|
|||
.table-container {
|
||||
margin-top: 40px;
|
||||
overflow-x: auto;
|
||||
width: 90%;
|
||||
min-width: 800px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
width: 25%;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 80px 0 20px -20px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="overview">
|
||||
<div class="sql-dashboard-container">
|
||||
<h3>{{'request.sql.dashboard.headline' | translate}}</h3>
|
||||
|
||||
<div class="table-container">
|
||||
|
|
@ -6,11 +6,11 @@
|
|||
<table class="table table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="col-sm-1">{{'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-1">{{'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-1 text-center">{{'request.confirm.promotion.table.head.date' | translate}}</th>
|
||||
<th class="col-sm-2">{{'request.confirm.promotion.table.head.participant' | translate}}</th>
|
||||
<th class="col-sm-2">{{'request.confirm.promotion.table.head.rank.before' | translate}}</th>
|
||||
<th class="col-sm-2">{{'request.confirm.promotion.table.head.rank.after' | translate}}</th>
|
||||
<th class="col-sm-2 ">{{'request.confirm.promotion.table.head.requester' | translate}}</th>
|
||||
<th class="col-sm-1 text-right">{{'request.confirm.promotion.table.head.date' | translate}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody *ngFor="let promotion of promotions">
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
<td>
|
||||
{{promotion.proposer.username}}
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<td class="text-right">
|
||||
{{promotion.timestamp | date: 'dd.MM.yyyy'}}
|
||||
</td>
|
||||
</tr>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
@import url('../../style/overview.scss');
|
||||
|
||||
.overview {
|
||||
margin-left: 25px !important;
|
||||
.sql-dashboard-container {
|
||||
margin: 2em auto;
|
||||
width: 95%;
|
||||
min-width: 835px;
|
||||
}
|
||||
|
||||
.decoration-preview {
|
||||
|
|
@ -16,11 +16,6 @@
|
|||
.table-container {
|
||||
margin-top: 40px;
|
||||
overflow-x: auto;
|
||||
width: 90%;
|
||||
min-width: 800px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 80px 0 20px -20px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,10 +8,8 @@
|
|||
bottom: 10px;
|
||||
}
|
||||
|
||||
.absolute-label {
|
||||
display: block;
|
||||
position: absolute;
|
||||
font-size: 12px;
|
||||
padding: 5px;
|
||||
margin-left: 25%;
|
||||
@media all and (max-width: 959px) {
|
||||
.overview {
|
||||
left: 345px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue