Skip to content

Commit

Permalink
Merge pull request #133 from Morphclue/feat/poll-views
Browse files Browse the repository at this point in the history 
Poll View: Event List
  • Loading branch information
@Clashsoft
Clashsoft authored Feb 29, 2024
2 parents 6e38738 + a6d7a46 commit 50762ec
Show file tree
Hide file tree
Showing 16 changed files with 478 additions and 353 deletions.
218 changes: 35 additions & 183 deletions apps/frontend/src/app/poll/choose-events/choose-events.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,11 +46,18 @@ <h1 class="text-center">
You can select up to {{ limit }} choices.
</div>
}
<div class="d-flex justify-content-end mb-3">
<button class="btn btn-outline-primary me-2" (click)="selectAll('yes')">
Select All
</button>
<div ngbDropdown class="d-inline-block">
<div class="btn-toolbar justify-content-end mb-3" role="toolbar">
<div class="btn-group ms-2" role="group">
@for (view of views; track view.id) {
<a
class="btn btn-outline-secondary {{ view.icon }}"
ngbTooltip="View as {{ view.name }}" container="body"
routerLink="." [queryParams]="{view: view.id}"
routerLinkActive="active"
></a>
}
</div>
<div ngbDropdown class="d-inline-block ms-2">
<button type="button" class="btn btn-outline-secondary" id="sort-dropdown" ngbDropdownToggle>
Sort
</button>
Expand All @@ -69,183 +76,28 @@ <h1 class="text-center">
</div>
</div>
</div>
@if (pollEvents) {
<div class="table-responsive text-center">
<table class="table align-middle">
<thead>
<tr>
<th scope="col"></th>
@for (event of pollEvents; track event) {
<th scope="col">
<app-event-head
[event]="event"
[class.text-muted]="isPastEvent(event)"
></app-event-head>
</th>
}
<th class="border-0" scope="col"></th>
</tr>
</thead>
<tbody>
@if (!closedReason) {
<tr>
<th style="min-width: 240px" scope="row">
<input
class="form-control"
type="text"
id="name"
placeholder="Your name"
[disabled]="poll?.settings?.anonymous ?? false"
[(ngModel)]="newParticipant.name" (change)="validateNew()"
>
</th>
@for (event of pollEvents; track event) {
<td>
<app-check-button
[poll]="poll"
[(check)]="newParticipant.selection[event._id]"
(checkChange)="validateNew()"
[isFull]="!newParticipant.selection[event._id]"
[isPastEvent]="isPastEvent(event)"
></app-check-button>
</td>
}
<th class="border-0 text-start" scope="col">
<div class="d-inline-block" [ngbTooltip]="errors.length ? errors.join(',\n') : null">
<button class="btn btn-primary btn-sm" [disabled]="errors.length" (click)="submit()">
Submit
</button>
</div>
</th>
</tr>
}
@if (showResults) {
@for (participant of participants; track participant) {
<tr>
<th>
{{ poll?.settings?.anonymous ? 'Anonymous' : participant.name }}
@if (participant.createdAt) {
<span class="small text-muted" [ngbTooltip]="participant.createdAt | date:'medium'">
{{ participant.createdAt | date: 'shortTime' }}
</span>
}
@if (participant.updatedAt !== participant.createdAt) {
<span class="small text-muted" [ngbTooltip]="participant.updatedAt | date:'medium'">
&bull; edited
</span>
}
</th>
@if (participant !== editParticipant) {
@for (pollEvent of pollEvents; track pollEvent; let n = $index) {
<td>
@switch (participant.selection[pollEvent._id]) {
@case ('yes') {
<h5 class="p-yes bi-check-lg" ngbTooltip="Yes"></h5>
}
@case ('no') {
<h5 class="p-no bi-x-lg" ngbTooltip="No"></h5>
}
@case ('maybe') {
<h5 class="p-maybe bi-question" ngbTooltip="Maybe"></h5>
}
@default {
<h5 class="p-unset bi-question" ngbTooltip="Unspecified"></h5>
}
}
</td>
}
}
@if (participant === editParticipant && editDto) {
@for (event of pollEvents; track event) {
<td>
<app-check-button
[poll]="poll"
[(check)]="editDto.selection[event._id]"
(checkChange)="validateEdit()"
[isPastEvent]="isPastEvent(event)"
></app-check-button>
</td>
}
}
@if (participant === editParticipant) {
<td class="border-0 text-start">
<button class="btn btn-primary btn-sm ms-1 bi-x" type="button" (click)="cancelEdit()"></button>
<div class="d-inline-block" [ngbTooltip]="errors.length ? errors.join(',\n') : null">
<button class="btn btn-secondary btn-sm ms-1 bi-check" type="button" [disabled]="errors.length"
(click)="confirmEdit()"></button>
</div>
</td>
}
@if (!editParticipant) {
<td class="border-0 text-start">
@if (poll?.settings?.allowEdit && token === participant.token) {
<button
class="btn btn-primary btn-sm ms-1 bi-pencil"
placement="top"
ngbTooltip="Edit participation"
(click)="setEditParticipant(participant)">
</button>
}
@if (isAdmin || token === participant.token) {
<button
class="btn btn-sm btn-danger ms-1 bi-trash"
type="button"
placement="top"
ngbTooltip="Delete participation"
(click)="deleteParticipation(participant._id)">
</button>
}
</td>
}
</tr>
}
@if (poll?.settings?.showResult !== ShowResultOptions.NEVER || isAdmin) {
<tr>
<th>Sum</th>
@for (pollEvent of pollEvents; track pollEvent) {
<td>
@if (bestOption === pollEvent.participants) {
<h5 class="bi-award text-primary">
{{ pollEvent.participants }}
</h5>
}
@if (bestOption !== pollEvent.participants) {
<div>
{{ pollEvent.participants }}
</div>
}
</td>
}
<td class="border-0"></td>
</tr>
}
}
@if (poll && isAdmin) {
<tr>
<th>Select Events</th>
@for (pollEvent of pollEvents; track pollEvent; let i = $index) {
<td>
<input
type="checkbox"
class="text-primary form-check-hidden"
[class.bi-star-fill]="bookedEvents[i]"
[class.bi-star]="!bookedEvents[i]"
[(ngModel)]="bookedEvents[i]"
>
</td>
}
<td class="border-0 text-start">
<button
class="btn btn-sm btn-primary"
type="button"
(click)="book()">
Book
</button>
</td>
</tr>
}
</tbody>
</table>
</div>
@if (poll && pollEvents && participants) {
@switch (view$ | async) {
@case ("table") {
<apollusia-table
[poll]="poll"
[pollEvents]="pollEvents"
[participants]="participants"
[isAdmin]="isAdmin"
[canParticipate]="!closedReason"
[showResults]="!hiddenReason"
[token]="token"
[bestOption]="bestOption"
></apollusia-table>
}
@case ("events") {
<apollusia-event-list
[poll]="poll"
[pollEvents]="pollEvents"
[participants]="participants"
[bestOption]="bestOption"
></apollusia-event-list>
}
}
}
</div>
31 changes: 0 additions & 31 deletions apps/frontend/src/app/poll/choose-events/choose-events.component.scss
View file
Original file line number Diff line number Diff line change
@@ -1,34 +1,3 @@
.table-responsive td, .table-responsive th {
min-width: 100px;
}

.form-check-hidden {
appearance: none;
cursor: pointer;
}

*:not(:hover) > .hover-info {
visibility: hidden;
}

@media (min-width: 768px) {
th:first-child, th:last-child,
td:first-child, td:last-child {
position: sticky;
backdrop-filter: blur(5px);
}

th:first-child, td:first-child {
background: linear-gradient(90deg, var(--bs-body-bg), rgba(var(--bs-body-bg), 0.75));
left: 0;
}

th:last-child, td:last-child {
background: linear-gradient(90deg, rgba(var(--bs-body-bg), 0.75), var(--bs-body-bg));
right: 0;
}
}

h5 {
margin: 0;
}
Loading

0 comments on commit 50762ec

Please sign in to comment.