Merge pull request #140 from Morphclue/fix/poll-info

New Poll Info in Dashboard and Poll View
Morphclue · Mar 3, 2024 · ed4019f · ed4019f
2 parents dc86588 + e85a83b
commit ed4019f
Show file tree

Hide file tree

Showing 7 changed files with 111 additions and 59 deletions.
diff --git a/apps/frontend/src/app/core/core.module.ts b/apps/frontend/src/app/core/core.module.ts
@@ -6,6 +6,7 @@ import {NgbxDarkmodeModule, THEME_ATTRIBUTE} from '@mean-stream/ngbx';
 import {NgbAlertModule, NgbCollapseModule, NgbDropdownModule, NgbTooltipModule} from '@ng-bootstrap/ng-bootstrap';
 
 import {CookieBannerComponent} from './cookie-banner/cookie-banner.component';
+import {InfoTableComponent} from './info-table/info-table.component';
 import {LocationLinkComponent} from './location-link/location-link.component';
 import {MarkdownComponent} from './markdown/markdown.component';
 import {NavbarComponent} from './navbar/navbar.component';
@@ -20,6 +21,7 @@ import {TokenComponent} from './token/token.component';
     LocationLinkComponent,
     LocationIconPipe,
     CookieBannerComponent,
+    InfoTableComponent,
   ],
   imports: [
     CommonModule,
@@ -41,6 +43,7 @@ import {TokenComponent} from './token/token.component';
     LocationLinkComponent,
     LocationIconPipe,
     CookieBannerComponent,
+    InfoTableComponent,
   ],
   providers: [
     {

diff --git a/apps/frontend/src/app/core/info-table/info-table.component.html b/apps/frontend/src/app/core/info-table/info-table.component.html
@@ -0,0 +1,61 @@
+<table class="w-100">
+  @if (poll.location; as location) {
+    <tr>
+      <th>
+        <i [class]="location | locationIcon" ngbTooltip="Location"></i>
+      </th>
+      <td>
+        <app-location-link [location]="location"></app-location-link>
+      </td>
+    </tr>
+  }
+  @if (poll.settings.deadline; as deadline) {
+    <tr>
+      <th>
+        <i class="bi-calendar" ngbTooltip="Deadline"></i>
+      </th>
+      <td>
+        {{ deadline | date: 'medium' }}
+      </td>
+    </tr>
+  }
+  @if (description && poll.description; as description) {
+    <tr>
+      <th>
+        <i class="bi-text-paragraph" ngbTooltip="Description"></i>
+      </th>
+      <td>
+        <app-markdown [text]="description"></app-markdown>
+      </td>
+    </tr>
+  }
+  <tr>
+    <th>
+      <i class="bi-link" ngbTooltip="Link"></i>
+    </th>
+    <td>
+      <a routerLink="." class="text-truncate">{{ url }}</a>
+      &nbsp;
+      <button class="btn p-0 btn-link bi-clipboard" ngbTooltip="Copy to clipboard"
+              (click)="copyToClipboard()"></button>
+    </td>
+  </tr>
+  @if (stats) {
+    <tr>
+      <th>
+        <i class="bi-calendar-check"></i>
+      </th>
+      <td>
+        {{ poll.events }} {poll.events, plural, =1 {Option} other {Options}}
+      </td>
+    </tr>
+    <tr>
+      <th>
+        <i class="bi-person-check"></i>
+      </th>
+      <td>
+        {{ poll.participants }} {poll.participants, plural, =1 {Participant} other {Participants}}
+      </td>
+    </tr>
+  }
+</table>
diff --git a/apps/frontend/src/app/core/info-table/info-table.component.scss b/apps/frontend/src/app/core/info-table/info-table.component.scss
@@ -0,0 +1,5 @@
+table > tr > th:first-child {
+  width: 2rem;
+  padding: 0;
+  vertical-align: top;
+}
diff --git a/apps/frontend/src/app/core/info-table/info-table.component.ts b/apps/frontend/src/app/core/info-table/info-table.component.ts
@@ -0,0 +1,34 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {ToastService} from '@mean-stream/ngbx';
+
+import {ReadPoll} from '../../model';
+
+@Component({
+  selector: 'apollusia-info-table',
+  templateUrl: './info-table.component.html',
+  styleUrl: './info-table.component.scss',
+})
+export class InfoTableComponent implements OnInit {
+  @Input({required: true}) poll: ReadPoll;
+  @Input() description = true;
+  @Input() stats = false;
+
+  url = '';
+
+  constructor(
+    private toastService: ToastService,
+  ) {
+  }
+
+  ngOnInit() {
+    this.url = `${document.baseURI}poll/${this.poll.id}/participate`;
+  }
+
+  copyToClipboard() {
+    navigator.clipboard.writeText(this.url).then(() => {
+      this.toastService.success('Copy Poll Link', 'Successfully copied link to clipboard');
+    }).catch(e => {
+      this.toastService.error('Copy Poll Link', 'Failed to copy link to clipboard', e);
+    });
+  }
+}
diff --git a/apps/frontend/src/app/dashboard/card/card.component.html b/apps/frontend/src/app/dashboard/card/card.component.html
@@ -14,36 +14,7 @@ <h5 class="card-title">{{ poll.title }}</h5>
       </div>
     </div>
   </div>
-  @if (poll.description && !small) {
-    <div class="card-body">
-      <app-markdown [text]="poll.description"></app-markdown>
-    </div>
-  }
-  <div class="card-footer">
-    @if (poll.description && small) {
-      <div class="bi-file-text text-truncate" [ngbTooltip]="description">
-        Description: {{ poll.description }}
-        <ng-template #description>
-          <app-markdown [text]="poll.description"></app-markdown>
-        </ng-template>
-      </div>
-    }
-    @if (poll.settings.deadline) {
-      <div class="bi-calendar">
-        Deadline: {{ poll.settings.deadline | date:'medium' }}
-      </div>
-    }
-    @if (poll.location) {
-      <div [class]="poll.location | locationIcon">
-        Location:
-        <app-location-link [location]="poll.location"></app-location-link>
-      </div>
-    }
-    <div class="bi-check">
-      Options: {{ poll.events }}
-    </div>
-    <div class="bi-person">
-      Participants: {{ poll.participants }}
-    </div>
+  <div class="card-body">
+    <apollusia-info-table [poll]="poll" [description]="!small" [stats]="true"></apollusia-info-table>
   </div>
 </div>
diff --git a/apps/frontend/src/app/poll/choose-events/choose-events.component.html b/apps/frontend/src/app/poll/choose-events/choose-events.component.html
@@ -5,31 +5,13 @@
   <h1 class="text-center">
     {{ poll?.title }}
   </h1>
-  <div class="mb-3">
-    @if (poll?.location; as location) {
-      <div class="d-flex align-items-center">
-        <i class="text-primary fs-4 me-2 {{location | locationIcon}}" ngbTooltip="Location"></i>
-        <app-location-link [location]="location"></app-location-link>
+  @if (poll) {
+    <div class="card mb-3">
+      <div class="card-body">
+        <apollusia-info-table [poll]="poll"></apollusia-info-table>
       </div>
-    }
-    @if (poll?.settings?.deadline; as deadline) {
-      <div class="d-flex align-items-center">
-        <i class="bi-calendar text-primary fs-4 me-2" ngbTooltip="Deadline"></i>
-        {{ deadline | date: 'medium' }}
-      </div>
-    }
-    @if (poll?.description; as description) {
-      <div class="d-flex align-items-center">
-        <i class="bi-file-text text-primary fs-4 me-2" ngbTooltip="Description"></i>
-        <app-markdown [text]="description"></app-markdown>
-      </div>
-    }
-    <div class="d-flex align-items-center">
-      <i class="bi-link text-primary fs-4 me-2" ngbTooltip="Link"></i>
-      <a routerLink="." class="text-truncate">{{ url }}</a>
-      <button class="btn btn-link bi-clipboard" ngbTooltip="Copy to clipboard" (click)="copyToClipboard()"></button>
     </div>
-  </div>
+  }
   @if (closedReason) {
     <div class="alert alert-info">
       {{ closedReason }}
@@ -41,7 +23,7 @@ <h1 class="text-center">
     </div>
   }
   @if (!closedReason && poll?.settings?.maxParticipantEvents; as limit) {
-    <div class="alert alert-info mb-0">
+    <div class="alert alert-info">
       This poll is limited.
       You can select up to {{ limit }} choices.
     </div>

diff --git a/apps/frontend/src/app/poll/choose-events/choose-events.component.ts b/apps/frontend/src/app/poll/choose-events/choose-events.component.ts
@@ -135,10 +135,6 @@ export class ChooseEventsComponent implements OnInit {
 
   // Primary Actions
 
-  copyToClipboard() {
-    navigator.clipboard.writeText(this.url).then().catch(e => console.log(e));
-  }
-
   sort(sortMethod: SortMethod) {
     if (this.currentSort === sortMethod.name) {
       this.currentSortDirection *= -1;