feat: export data button for admin external resources

src/app/pages/admin-resources/admin-resources.component.css

@@ -54,4 +54,7 @@ th {
   border: 1px solid #ddd;
   text-align: center;
   color: #888
+}
+.export-button {
+  margin-right: 8px;
 }

src/app/pages/admin-resources/admin-resources.component.html

@@ -3,24 +3,29 @@
 <div class="page-container">
   <section class="header">
     <h1 class="header-title">{{ "External Resources Events" | translate }}</h1>
+    <div>
+    <button (click)="exportEvents()" mat-raised-button class="export-button">
+      {{ "Export Data" | translate }}
+    </button>
     <button (click)="toggleLanguage()" mat-raised-button class="lang-button">
       {{ "For English" | translate }}
     </button>
+    </div>
   </section>
   <section class="page-content">
   <table>
     <thead>
       <tr>
-        <th>{{ "Parent" | translate }}</th>
         <th>{{ "Date" | translate }}</th>
+        <th>{{ "Parent" | translate }}</th>
         <th>{{ "Category" | translate }}</th>
         <th>{{ "Resource" | translate }}</th>
       </tr>
     </thead>
     <tbody>
       <tr *ngFor="let event of events">
-        <td>{{ event.parentUsername }}</td>
         <td>{{ event.timestamp | date : "medium" }}</td>
+        <td>{{ event.parentUsername }}</td>
         <td>{{ event.category }}</td>
         <td><a target="_blank" href={{event.properties.url}}>{{ event.title }}</a></td>
       </tr>

src/app/pages/admin-resources/admin-resources.component.ts

@@ -24,4 +24,27 @@ export class AdminExternalResourcesComponent implements OnInit {
       this.translate.use("es");
     }
   }
+  async exportEvents() {
+    try {
+      const result = await this.parentEventsService.exportEvents();
+      const title =
+        this.translate.currentLang === "es"
+          ? "Eventos de Recursos Externos.csv"
+          : "External Resources Events.csv";
+      this.downloadFile(result, title);
+    } catch (error) {
+      console.error("Error exporting events:", error);
+    }
+  }
+  downloadFile(data: Blob, filename: string) {
+    const blob = new Blob([data], { type: "text/csv" });
+    const url = window.URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+    window.URL.revokeObjectURL(url);
+    document.body.removeChild(a);
+  }
 }

src/app/pages/educational-resources/educational-resources-page.component.css

@@ -1,6 +1,6 @@
 .page-container {
   width: 100%;
-  max-width: 1400px;
+  max-width: 1440px;
   min-height: 100vh;
   margin: 0 auto;
   padding: 16px;
@@ -43,7 +43,7 @@ h2 {
   text-align: center;
   color: #000000;
   margin: auto;
-  max-width: 320px;
+  max-width: 332px;
   @media (min-width: 900px) {
     max-width: none;
   }
@@ -54,7 +54,8 @@ h2 {
 }
 .home-component-item {
   width: 100%;
-  height: 48px;
+  min-height: 48px;
+  padding: 0 8px;
   cursor: pointer;
   display: flex;
   align-items: center;

src/app/services/parent-events/parent-events.service.ts

@@ -33,11 +33,23 @@ export class ParentEventsService {
     const [user] = JSON.parse(localStorage.getItem("currentUser"));
     this.token = user.token;
     return this.http
-      .get<any>(this.endpoint + '/admin', {
+      .get<any>(this.endpoint + "/admin", {
         headers: {
           Authorization: `Bearer ${this.token}`,
         },
       })
       .toPromise();
   }
+  async exportEvents() {
+    const [user] = JSON.parse(localStorage.getItem("currentUser"));
+    this.token = user.token;
+    return this.http
+      .get<any>(this.endpoint + "/admin/export", {
+        headers: {
+          Authorization: `Bearer ${this.token}`,
+        },
+        responseType: "blob" as "json",
+      })
+      .toPromise();
+  }
 }

src/assets/i18n/en-US.json

@@ -606,5 +606,8 @@
   "Clinic": "Clinic",
   "Parent": "Parent",
   "Growth Charts Results": "Growth Charts Results",
-  "External Resources Events": "External Resources Events"
+  "External Resources Events": "External Resources Events",
+  "Category": "Category",
+  "Resource": "Resource",
+  "Export Data": "Export Data"
 }

src/assets/i18n/es.json

@@ -621,5 +621,8 @@
   "Clinic": "Clínica",
   "Parent": "Padre",
   "Growth Charts Results": "Resultados de gráficos de crecimiento",
-  "External Resources Events": "Eventos de Recursos Externos"
+  "External Resources Events": "Eventos de Recursos Externos",
+  "Category": "Categoría",
+  "Resource": "Recurso",
+  "Export Data": "Exportar Datos"
 }