Allow import and export data

src/app/features/pill/pill-import-confirm-dialog.component.ts

@@ -0,0 +1,49 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import {
+  MatDialogActions,
+  MatDialogClose,
+  MatDialogContent,
+  MatDialogModule,
+  MatDialogRef,
+  MatDialogTitle,
+} from '@angular/material/dialog';
+import { TranslocoModule } from '@ngneat/transloco';
+
+@Component({
+  selector: 'app-confirm-dialog',
+  standalone: true,
+  imports: [CommonModule, TranslocoModule, MatButtonModule, MatDialogModule],
+  template: `
+    <h1 mat-dialog-title>
+      {{ 'pills.import.title_confirmation_modal' | transloco }}
+    </h1>
+    <div mat-dialog-content>
+      <p style="white-space: pre-line">
+        {{ 'pills.import.message_confirmation_modal' | transloco }}
+      </p>
+    </div>
+    <div mat-dialog-actions>
+      <button mat-button (click)="onCancel()">
+        {{ 'pills.import.cancel' | transloco }}
+      </button>
+      <button mat-button (click)="onConfirm()">
+        {{ 'pills.import.confirm' | transloco }}
+      </button>
+    </div>
+  `,
+})
+export class ConfirmDialogComponent {
+  constructor(
+    private readonly dialogRef: MatDialogRef<ConfirmDialogComponent>
+  ) {}
+
+  onCancel(): void {
+    this.dialogRef.close(false);
+  }
+
+  onConfirm(): void {
+    this.dialogRef.close(true);
+  }
+}

src/app/features/pill/pills.service.ts

@@ -52,6 +52,15 @@ export class PillsService {
     );
   }
 
+  exportData() {
+    return JSON.stringify(this.pillsTaked);
+  }
+
+  importData(pills: any) {
+    this.pillsTaked = pills;
+    this.savePills();
+  }
+
   private loadPills() {
     const savedPills =
       this.localStorageService.getItem(PILLS_STORAGE_KEY) || '[]';

src/app/features/sidenav/sidenav-content/sidenav-content.component.html

@@ -4,9 +4,7 @@
   </div>
 
   <div class="sidenav-content">
-    {{ "menus.section_under_construction" | transloco }}
-
-    <div style="margin-top: 62px">
+    <div style="text-align: center">
       <mat-form-field appearance="fill">
         <mat-label
           ><mat-icon>translate</mat-icon>
@@ -22,5 +20,14 @@
         </mat-select>
       </mat-form-field>
     </div>
+
+    <div style="display: flex; flex-direction: column; gap: 8px">
+      <button mat-button (click)="exportData()">
+        <mat-icon>save</mat-icon> {{ "menus.export-data" | transloco }}
+      </button>
+      <button mat-button (click)="importData()">
+        <mat-icon>south_west</mat-icon> {{ "menus.import-data" | transloco }}
+      </button>
+    </div>
   </div>
 </div>

src/app/features/sidenav/sidenav-content/sidenav-content.component.scss

@@ -10,4 +10,6 @@
   padding: 7px;
   margin-top: 30px;
   font-size: 1.3em;
+  display: flex;
+  flex-direction: column;
 }

src/app/features/sidenav/sidenav-content/sidenav-content.component.ts

@@ -1,7 +1,11 @@
 import { Component, OnInit } from '@angular/core';
-import { TranslocoService } from '@ngneat/transloco';
+import { TranslocoModule, TranslocoService } from '@ngneat/transloco';
 import { I18nService } from 'src/app/shared/services/i18n.service';
 import { SidenavService } from '../../sidenav.service';
+import { PillsService } from '../../pill/pills.service';
+import { MatDialog } from '@angular/material/dialog';
+import { ConfirmDialogComponent } from '../../pill/pill-import-confirm-dialog.component';
+import { filter, tap } from 'rxjs';
 
 @Component({
   selector: 'app-sidenav-content',
@@ -10,9 +14,10 @@ import { SidenavService } from '../../sidenav.service';
 })
 export class SidenavContentComponent implements OnInit {
   constructor(
-    private sidenavService: SidenavService,
-    private translocoService: TranslocoService,
-    private i18nService: I18nService
+    private readonly sidenavService: SidenavService,
+    private readonly i18nService: I18nService,
+    private readonly dialog: MatDialog,
+    private readonly pillsService: PillsService
   ) {}
 
   ngOnInit(): void {}
@@ -21,6 +26,46 @@ export class SidenavContentComponent implements OnInit {
     this.i18nService.setLanguage(this.i18nService.actualLang);
   }
 
+  exportData() {
+    const data = this.pillsService.exportData();
+    const blob = new Blob([data], { type: 'application/json' });
+    const url = window.URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'pills.json';
+    a.click();
+    window.URL.revokeObjectURL(url);
+  }
+
+  importData() {
+    const dialogRef = this.dialog.open(ConfirmDialogComponent);
+    dialogRef
+      .afterClosed()
+      .pipe(
+        filter((result) => !!result),
+        tap(() => {
+          const input = document.createElement('input');
+          input.type = 'file';
+          input.accept = '.json';
+          input.onchange = (event: Event) => {
+            const target = event.target as HTMLInputElement;
+            const file = target.files?.[0];
+            if (file) {
+              const reader = new FileReader();
+              reader.onload = (e) => {
+                const content = e.target?.result as string;
+                this.pillsService.importData(JSON.parse(content));
+                window.location.reload();
+              };
+              reader.readAsText(file);
+            }
+          };
+          input.click();
+        })
+      )
+      .subscribe();
+  }
+
   get languageSelected() {
     return this.i18nService.actualLang;
   }

src/assets/i18n/en.json

@@ -9,17 +9,25 @@
   },
   "menus": {
     "section_under_construction": "Section under construction",
-    "language": "Language"
+    "language": "Language",
+    "export-data": "Export data",
+    "import-data": "Import data"
   },
   "pills": {
     "slide_start_message": "Slide to register\nthis moment!",
     "take_every": "Take every",
-    "last_pill": "Las pill",
+    "last_pill": "Last pill",
     "taked_at": "Taked at",
     "pill_taked": "Pill taked!",
     "can_take_other_at": "Can take other at",
     "comment": "Comment",
     "add_comment": "Add comment",
-    "edit_comment": "Edit comment"
+    "edit_comment": "Edit comment",
+    "import": {
+      "title_confirmation_modal": "Import data",
+      "message_confirmation_modal": "Are you sure you want to import new data?\nThe old data will be lost.",
+      "confirm": "Import",
+      "cancel": "Cancel"
+    }
   }
 }

src/assets/i18n/es.json

@@ -8,7 +8,8 @@
     "show_more": "Mostrar más"
   },
   "menus": {
-    "section_under_construction": "Sección en construcción",
+    "export-data": "Exportar datos",
+    "import-data": "Importar datos",
     "language": "Idioma"
   },
   "pills": {
@@ -20,6 +21,12 @@
     "can_take_other_at": "Puedes tomar otra a las",
     "comment": "Comentario",
     "add_comment": "Añadir comentario",
-    "edit_comment": "Editar comentario"
+    "edit_comment": "Editar comentario",
+    "import": {
+      "title_confirmation_modal": "Importar datos",
+      "message_confirmation_modal": "¿Estás seguro de que quieres importar datos nuevos?\nLos antiguos se perderán.",
+      "confirm": "Importar",
+      "cancel": "Cancelar"
+    }
   }
 }