Skip to content

Commit

Permalink
Minor styling to ticket details, fix certificate stuff
Browse files Browse the repository at this point in the history
  • Loading branch information
sei-bstein committed Jan 21, 2025
1 parent b3422a7 commit 8790adf
Show file tree
Hide file tree
Showing 4 changed files with 47 additions and 29 deletions.
1 change: 1 addition & 0 deletions projects/gameboard-ui/src/app/api/certificates.service.ts
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ export class CertificatesService {
}

getCompetitiveCertificates(userId: string): Promise<CompetitiveModeCertificate[]> {
console.log("getting certs", userId);
return firstValueFrom(this.http.get<CompetitiveModeCertificate[]>(this.apiUrl.build(`user/${userId}/certificates/competitive`)));
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -247,7 +247,7 @@ <h4 class="mt-5 mb-3 d-flex align-items-center">
<div *ngIf="changedTicket && !!changedTicket?.id">

<div class="form-group p-0 m-0 mb-4">
<label class="font-weight-bold" for="assignee-input">Assigned to <fa-icon
<label class="text-muted ticket-field-label" for="assignee-input">Assigned to <fa-icon
*ngIf="!changedTicket.assigneeId" class="text-warning ml-1"
[icon]="faExclamationCircle"></fa-icon></label><br />
<app-inplace-editor [editData]="assignees" [currentText]="changedTicket.assignee?.name ?? 'None'"
Expand All @@ -258,7 +258,7 @@ <h4 class="mt-5 mb-3 d-flex align-items-center">
</div>

<div class="form-group p-0 m-0 mb-4">
<label class="font-weight-bold" for="__-input">Status</label><br />
<label class="text-muted ticket-field-label" for="__-input">Status</label><br />
<div id="___-input" class="btn-group" btnRadioGroup name="____" tabindex="0"
[(ngModel)]="changedTicket.status" (click)="changed$.next(changedTicket)">
<label class="btn btn-outline-success btn-sm" btnRadio="Open">Open</label>
Expand All @@ -268,7 +268,7 @@ <h4 class="mt-5 mb-3 d-flex align-items-center">
</div>

<div class="form-group p-0 m-0 mb-4">
<label class="font-weight-bold" for="__-input">Labels</label><br />
<label class="text-muted ticket-field-label" for="__-input">Labels</label><br />
<div class="d-flex flex-wrap">
<span *ngFor="let label of currentLabels" class="badge badge-pill mr-2 py-0 mb-2"
[ngStyle]="label | textToColor">
Expand All @@ -283,11 +283,11 @@ <h4 class="mt-5 mb-3 d-flex align-items-center">
</div>

<div class="form-group p-0 m-0 mb-4">
<label class="font-weight-bold" for="assignee-input">Challenge</label><br />
<label class="text-muted ticket-field-label" for="assignee-input">Challenge</label><br />
<app-inplace-editor [editData]="challenges" [currentText]="changedTicket.challenge?.name || 'None'"
(startEditFunc)="startEditChallenge()"
(selectOptionFunc)="selectChallenge($event)"></app-inplace-editor>
<p *ngIf="changedTicket.challenge" class="mb-0 pt-0 mb-1 px-2 align-items-center small">
<p *ngIf="changedTicket.challenge" class="mb-0 pt-0 mb-1 align-items-center small">
<span class="text-muted">Support Code:</span>
<span appCopyOnClick class="btn-link cursor-pointer"
tooltip="Click to copy this ticket's support code">
Expand All @@ -296,21 +296,24 @@ <h4 class="mt-5 mb-3 d-flex align-items-center">
</p>
</div>
<div class="form-group p-0 m-0 mb-4">
<label class="font-weight-bold" for="assignee-input">Game Session <fa-icon
<label class="text-muted ticket-field-label" for="assignee-input">Game Session <fa-icon
*ngIf="!changedTicket.playerId && false" class="text-danger ml-1"
[icon]="faExclamationCircle"></fa-icon></label><br />
<app-inplace-editor [editData]="sessions" [noEdit]="!!changedTicket.challengeId"
[currentText]="changedTicket.player?.gameName || 'None'" (startEditFunc)="startEditSession()"
(selectOptionFunc)="selectSession($event)"></app-inplace-editor>
<p *ngIf="changedTicket.playerId" class="mb-0 pt-0 mb-1 px-2 align-items-center small">Game Id:
{{changedTicket.player?.gameId | slice:0:16}}</p>
<div *ngIf="changedTicket.player?.gameId" class="font-weight-bold fs-08 cursor-pointer text-success"
[appCopyOnClick]="changedTicket.player?.gameId"
appCopyOnClickMessage="Copied **{{ changedTicket.player?.gameName || 'unkonwn game' }}**'s ID to your clipboard.">
{{ changedTicket.player?.gameId | slice:0:8 }}
</div>
</div>

<div class="form-group p-0 m-0 mb-4">
<label class="d-block font-weight-bold" for="assignee-input">
<label class="d-block text-muted ticket-field-label" for="assignee-input">
{{ ctx.ticket.isTeamGame ? "Player / Team" : "Player" }}
</label>
<p *ngIf="ctx.ticket?.player; else noPlayer" class="mb-0 pt-0 mb-1 px-2 align-items-center">
<p *ngIf="ctx.ticket?.player; else noPlayer" class="mb-0 pt-0 mb-1 align-items-center">
<button *ngIf="ctx.ticket.player?.approvedName; else noPlayer" class="btn btn-link p-0 copy-id-button"
tooltip="Click to copy this player's ID" [appCopyOnClick]="ctx.ticket.playerId">
{{ctx.ticket.player?.approvedName}}
Expand All @@ -326,19 +329,20 @@ <h4 class="mt-5 mb-3 d-flex align-items-center">
</div>

<div class="form-group p-0 m-0 mb-4">
<label class="font-weight-bold" for="assignee-input">Requested by <fa-icon
<label class="text-muted ticket-field-label" for="assignee-input">Requested by <fa-icon
*ngIf="!changedTicket.requesterId" class="text-danger ml-1"
[icon]="faExclamationCircle"></fa-icon></label><br />
<app-inplace-editor [editData]="requesters" [noEdit]="!ctx.ticket.staffCreated || !!ctx.ticket.playerId"
[currentText]="changedTicket.requester?.name ?? 'None'" (startEditFunc)="startEditRequesters()"
(selectOptionFunc)="selectRequester($event)"></app-inplace-editor>
<p class="mb-0 pt-0 mb-1 px-2 align-items-center small">User Id: {{changedTicket.requesterId |
slice:0:16}}</p>
<div class="cursor-pointer text-success" [appCopyOnClick]="changedTicket.requesterId"
tooltip="Click to copy the requester's User ID to your clipboard">
{{changedTicket.requesterId | slice:0:8}}</div>
</div>

<div *ngIf="ctx.ticket.staffCreated" class="form-group p-0 m-0 mb-4">
<label class="font-weight-bold" for="assignee-input">Created by</label><br />
<p style="vertical-align:middle;" class="mb-0 pt-0 mb-1 px-2 align-items-center">
<label class="text-muted ticket-field-label" for="assignee-input">Created by</label><br />
<p style="vertical-align:middle;" class="mb-0 pt-0 align-items-center">
{{ctx.ticket.creator?.name || 'None'}}</p>
</div>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -132,3 +132,9 @@ textarea {
.copy-id-button {
color: $success;
}

.ticket-field-label {
font-size: 0.9rem;
font-weight: bold;
text-transform: uppercase;
}
Original file line number Diff line number Diff line change
@@ -1,18 +1,25 @@
<!-- in place edit + suggestions template -->
<div *ngIf="editData.isEditing" class="editor" style="position: relative;">
<div class="input-group">
<input #input type="text" autoFocus class="form-control mb-0 py-0 pr-1 edit-h" (input)="editData.filtering$.next(input.value)">
<div class="input-group-append edit-h">
<button class="btn btn-secondary" type="button" (click)="editData.isEditing=false"><fa-icon class="p-0 m-0 " [icon]="faTimes"></fa-icon></button>
</div>
</div>
<div style="position: absolute; z-index: 20;" class="w-100">
<div *ngFor="let option of editData.filteredOptions" class="bg-white w-100 text-black px-2 py-1 select-item d-flex justify-content-between" (click)="selectOption(option)">
<span>{{option.name}} <span class="text-muted ml-2">{{option.secondary}}</span></span>
<span class="plus-icon text-muted"><fa-icon [icon]="faPlusSquare"></fa-icon></span>
</div>
<div *ngIf="editData.isEditing" class="editor" style="position: relative;">
<div class="input-group">
<input #input type="text" autoFocus class="form-control mb-0 py-0 pr-1 edit-h"
(input)="editData.filtering$.next(input.value)">
<div class="input-group-append edit-h">
<button class="btn btn-secondary" type="button" (click)="editData.isEditing=false"><fa-icon class="p-0 m-0 "
[icon]="faTimes"></fa-icon></button>
</div>
</div>
<div *ngIf="!editData.isEditing" (click)="startEditing()" class="edit-h" [class.editable]="!noEdit" style="display:table;">
<span style="display:table-cell;vertical-align:middle;" class="mb-0 py-0 px-2 align-items-center">{{currentText}}&nbsp;&nbsp;<fa-icon *ngIf="!noEdit" class="p-0 m-0 " [icon]="faPen" size="sm"></fa-icon></span>
<div style="position: absolute; z-index: 20;" class="w-100">
<div *ngFor="let option of editData.filteredOptions"
class="bg-white w-100 text-black px-2 py-1 select-item d-flex justify-content-between"
(click)="selectOption(option)">
<span>{{option.name}} <span class="text-muted ml-2">{{option.secondary}}</span></span>
<span class="plus-icon text-muted"><fa-icon [icon]="faPlusSquare"></fa-icon></span>
</div>
</div>
</div>
<div *ngIf="!editData.isEditing" (click)="startEditing()" class="edit-h" [class.editable]="!noEdit"
style="display:table;">
<span style="display:table-cell;vertical-align:middle;"
class="mb-0 py-0 align-items-center">{{currentText}}&nbsp;&nbsp;<fa-icon *ngIf="!noEdit" class="p-0 m-0 "
[icon]="faPen" size="sm"></fa-icon></span>
</div>

0 comments on commit 8790adf

Please sign in to comment.