format date & view

internetarchive · Dec 13, 2024 · 66e8fe8 · 66e8fe8
1 parent e17e948
commit 66e8fe8
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 25 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -47,18 +47,7 @@
 
   <script type="module" src="../dist/src/monthly-giving-circle.js"></script>
   <script type="module">
-    let showReceipts = false;
-    // let displayFullscreen = false;
-
-    const mgcComponent = document.querySelector('iaux-monthly-giving-circle');
-    // options hooks
-    document.getElementById('toggle-receipts').addEventListener('click', async () => {
-      if (showReceipts) {
-        mgcComponent.receipts = [];
-        showReceipts = false;
-        return;
-      }
-      mgcComponent.receipts = [
+    const receiptsData = [
         {
           amount: 100,
           date: '2020-01-01',
@@ -68,30 +57,45 @@
         },
         {
           amount: 100,
-          date: '2020-02-01',
+          date: '2023-02-01',
           donor: 'John Doe',
           paymentMethod: 'Credit Card',
           status: 'Completed',
           is_test: true,
         },
         {
           amount: 100,
-          date: '2020-03-01',
-          donor: 'John Doe',
-          paymentMethod: 'Credit Card',
-          status: 'Pending',
-          is_test: true,
-        },
-        {
-          amount: 100,
-          date: '2020-03-01',
+          date: '2024-03-01',
           donor: 'John Doe',
           paymentMethod: 'Credit Card',
           status: 'Pending',
           is_test: true,
         },
-      ]
+      ];
+
+
+    let showReceipts = false;
+    // let displayFullscreen = false;
 
+    const mgcComponent = document.querySelector('iaux-monthly-giving-circle');
+
+    // load start data
+    mgcComponent.receipts = receiptsData;
+
+    // event handlers
+    mgcComponent.addEventListener('EmailReceiptRequest', (e) => {
+      // eslint-disable-next-line no-alert
+      alert(`EmailReceiptRequest: ${JSON.stringify(e.detail)}`);
+    });
+
+    // options hooks
+    document.getElementById('toggle-receipts').addEventListener('click', async () => {
+      if (showReceipts) {
+        mgcComponent.receipts = [];
+        showReceipts = false;
+        return;
+      }
+      mgcComponent.receipts = receiptsData;
       await mgcComponent.updateComplete;
 
       showReceipts = true;

diff --git a/src/monthly-giving-circle.ts b/src/monthly-giving-circle.ts
@@ -61,7 +61,11 @@ export class MonthlyGivingCircle extends LitElement {
           .donations=${this.receipts}
           @EmailReceiptRequest=${(event: CustomEvent) => {
             console.log('EmailReceiptRequest', event.detail);
-            alert(`Email receipt: ${JSON.stringify(event.detail.donation)}`);
+            this.dispatchEvent(
+              new CustomEvent('EmailReceiptRequest', {
+                detail: { ...event.detail },
+              })
+            );
           }}
         ></iaux-mgc-receipts>
       `;

diff --git a/src/presentational/button-style.ts b/src/presentational/button-style.ts
@@ -69,6 +69,7 @@ export class MonthlyGivingCircle extends LitElement {
       background: transparent;
       display: flex;
       align-items: flex-end;
+      padding: 0;
     }
   `;
 }
diff --git a/src/presentational/mgc-title.ts b/src/presentational/mgc-title.ts
@@ -28,6 +28,11 @@ export class MonthlyGivingCircle extends LitElement {
   }
 
   static styles = css`
+    :host {
+      padding-bottom: 5px;
+      display: block;
+    }
+
     h2 {
       font-size: 1.5em;
       display: flex;

diff --git a/src/receipts.ts b/src/receipts.ts
@@ -18,6 +18,31 @@ export class MGCWelcome extends LitElement {
     return `USD ${amount}`;
   }
 
+  dateFormatted(date: string) {
+    const splitDate = date.split('-');
+    const year = splitDate[0];
+    const month = parseInt(splitDate[1], 10);
+    const day = splitDate[2];
+
+    const monthMap: { [key: number]: string } = {
+      1: 'January',
+      2: 'February',
+      3: 'March',
+      4: 'April',
+      5: 'May',
+      6: 'June',
+      7: 'July',
+      8: 'August',
+      9: 'September',
+      10: 'October',
+      11: 'November',
+      12: 'December',
+    };
+
+    const displayMonth = monthMap[month];
+    return `${displayMonth} ${day}, ${year}`;
+  }
+
   emailReceipt(donation: donation) {
     this.dispatchEvent(
       new CustomEvent('EmailReceiptRequest', {
@@ -43,7 +68,7 @@ export class MGCWelcome extends LitElement {
                 const emailUnavailable = donation.status === 'pending';
                 return html`
                   <tr id=${`donation-${donation.id}`}>
-                    <td>${donation.date}</td>
+                    <td>${this.dateFormatted(donation.date)}</td>
                     <td>${this.donationAmountFormatted(donation.amount)}</td>
                     <td class="status">${donation.status}</td>
                     <td>
@@ -73,6 +98,11 @@ export class MGCWelcome extends LitElement {
     table {
       width: 100%;
       text-align: left;
+      max-width: 600px;
+    }
+
+    button {
+      padding: 1rem 0;
     }
   `;
 }