Added option to import/export the scheduler config

src/app/app.component.css

@@ -1,3 +1,8 @@
 .outlet {
     margin: 16px;
+}
+
+mat-toolbar {
+    display: flex;
+    justify-content: space-between;
 }

src/app/app.component.html

@@ -1,5 +1,8 @@
 <mat-toolbar>
   <span>Daily Random Scheduler</span>
+  <button mat-icon-button (click)="openImportExport()">
+    <mat-icon>import_export</mat-icon>
+  </button>
 </mat-toolbar>
 
 <div class="outlet">

src/app/app.component.ts

@@ -1,13 +1,33 @@
-import { Component } from '@angular/core';
-import { MatToolbarModule } from '@angular/material/toolbar';
-import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
+import { Component, inject } from "@angular/core";
+import { MatButtonModule } from "@angular/material/button";
+import { MatDialog, MatDialogModule } from "@angular/material/dialog";
+import { MatIconModule } from "@angular/material/icon";
+import { MatToolbarModule } from "@angular/material/toolbar";
+import { RouterLink, RouterLinkActive, RouterOutlet } from "@angular/router";
+import { ImportExportDialogComponent } from './import-export-dialog/import-export-dialog.component';
 
 @Component({
-    selector: 'app-root',
-    templateUrl: './app.component.html',
-    styleUrls: ['./app.component.css'],
-    standalone: true,
-    imports: [RouterLink, RouterLinkActive, RouterOutlet, MatToolbarModule]
+  selector: "app-root",
+  templateUrl: "./app.component.html",
+  styleUrls: ["./app.component.css"],
+  standalone: true,
+  imports: [
+    RouterLink,
+    RouterLinkActive,
+    RouterOutlet,
+    MatToolbarModule,
+    MatIconModule,
+    MatButtonModule,
+    MatDialogModule,
+  ],
 })
 export class AppComponent {
+
+    private dialog = inject(MatDialog);
+
+  openImportExport() {
+    this.dialog.open(ImportExportDialogComponent, {
+      width: "800px"
+    });
+  }
 }

src/app/import-export-dialog/import-export-dialog.component.css

@@ -0,0 +1,3 @@
+.full-width {
+  width: 100%;
+}

src/app/import-export-dialog/import-export-dialog.component.html

@@ -0,0 +1,19 @@
+<h2 mat-dialog-title>Import/Export</h2>
+<mat-dialog-content>
+
+    <h3>Import</h3>
+    <mat-form-field class="full-width">
+        <mat-label>Data</mat-label>
+        <textarea [formControl]="importControl" rows="5" matInput placeholder="Paste JSON data"></textarea>
+    </mat-form-field>
+    <button mat-button (click)="importData()" [disabled]="importControl.invalid">
+        Import 
+        <mat-icon>upload</mat-icon>
+    </button>
+
+    <h3>Export</h3>
+    <button mat-button (click)="copyConfigToClipboard()">
+        Export 
+        <mat-icon>content_paste_go</mat-icon>
+    </button>
+</mat-dialog-content>

src/app/import-export-dialog/import-export-dialog.component.ts

@@ -0,0 +1,43 @@
+import { CommonModule } from "@angular/common";
+import { ChangeDetectionStrategy, Component, inject } from "@angular/core";
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from "@angular/material/button";
+import { MatDialogModule } from "@angular/material/dialog";
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from "@angular/material/icon";
+import { MatInputModule } from '@angular/material/input';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { ChoiceDataService } from "../shared/choice-data.service";
+
+@Component({
+  selector: "app-import-export-dialog",
+  standalone: true,
+  imports: [
+    CommonModule,
+    MatDialogModule,
+    MatButtonModule,
+    MatIconModule,
+    MatFormFieldModule,
+    MatInputModule,
+    ReactiveFormsModule
+  ],
+  templateUrl: `./import-export-dialog.component.html`,
+  styleUrl: "./import-export-dialog.component.css",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ImportExportDialogComponent {
+  private choiceDataService = inject(ChoiceDataService);
+  private snackBar = inject(MatSnackBar);
+
+  importControl = new FormControl("");
+
+  copyConfigToClipboard() {
+    this.choiceDataService.copyToClipboard();
+    this.snackBar.open("Config copied to clipboard", null, { duration: 3000 });
+  }
+
+  importData() {
+    this.choiceDataService.import(this.importControl.value);
+    this.snackBar.open("Config imported successfully", null, { duration: 3000 });
+  }
+}

src/app/shared/choice-data.service.ts

@@ -1,9 +1,12 @@
 import { Injectable } from '@angular/core';
 
-import {Choice} from "./choice";
-import {ChoiceGroup} from "./choice-group";
+import { Choice } from "./choice";
+import { ChoiceGroup } from "./choice-group";
 
-import {LocalStorageService} from "./local-storage.service";
+import { LocalStorageService } from "./local-storage.service";
+import { Config } from './model';
+
+import { Clipboard } from '@angular/cdk/clipboard';
 
 @Injectable()
 export class ChoiceDataService {
@@ -12,45 +15,58 @@ export class ChoiceDataService {
   private lastChoiceIdSaveString = "lastChoiceId";
   private lastChoiceGroupIdSaveString = "lastChoiceGroup";
 
-  lastChoiceId: number = 0;
-  lastChoiceGroupId: number = 0;
-  groups: ChoiceGroup[] = [];
+  private configSaveString = 'schedulerConfig';
+
+  private config: Config;
+  private defaultCOnfig: Config = {
+    groups: [],
+    lastChoiceGroupId: 0,
+    lastChoiceId: 0
+  }
 
-  constructor(private lss: LocalStorageService) {
-    this.groups = lss.get(this.choicesSaveString) || [];
-    this.lastChoiceId = lss.get(this.lastChoiceIdSaveString) || 0;
-    this.lastChoiceGroupId = lss.get(this.lastChoiceGroupIdSaveString) || 0;
+  constructor(
+    private lss: LocalStorageService,
+    private clipboard: Clipboard
+  ) {
+    this.config = lss.get(this.configSaveString) || this.defaultCOnfig;
   }
 
   private save() {
-    this.lss.save(this.choicesSaveString,this.groups);
-    this.lss.save(this.lastChoiceIdSaveString,this.lastChoiceId);
-    this.lss.save(this.lastChoiceGroupIdSaveString,this.lastChoiceGroupId);
+    this.lss.save(this.configSaveString, this.config);
+  }
+
+  public copyToClipboard() {
+    this.clipboard.copy(JSON.stringify(this.config));
+  }
+
+  public import(json: string) {
+    this.config = JSON.parse(json);
+    this.save();
   }
 
   // ###################### ChoiceGroup methods ##########################
 
   addChoiceGroup(group:ChoiceGroup):ChoiceDataService {
     if (!group.id) {
-      group.id = ++this.lastChoiceGroupId;
+      group.id = ++this.config.lastChoiceGroupId;
     }
-    this.groups.push(group);
+    this.config.groups.push(group);
     this.save();
     return this;
   }
 
   deleteChoiceGroupById(groupId: number): ChoiceDataService {
-    this.groups = this.groups.filter(group => group.id !== groupId);
+    this.config.groups = this.config.groups.filter(group => group.id !== groupId);
     this.save();
     return this;
   }
 
   getAllChoiceGroups(): ChoiceGroup[] {
-    return this.groups;
+    return this.config.groups;
   }
 
   getChoiceGroupById(groupId:number): ChoiceGroup {
-    return this.groups.filter(group => group.id === groupId).pop();
+    return this.config.groups.filter(group => group.id === groupId).pop();
   }
 
   updateChoiceGroupById(groupId: number, values: Object = {}): ChoiceGroup {
@@ -67,7 +83,7 @@ export class ChoiceDataService {
 
   addChoice(choice: Choice, groupId: number):ChoiceDataService {
     if (!choice.id) {
-      choice.id = ++this.lastChoiceId;
+      choice.id = ++this.config.lastChoiceId;
     }
     let group = this.getChoiceGroupById(groupId);
     if (!!group) {

src/app/shared/local-storage.service.ts

@@ -5,7 +5,7 @@ export class LocalStorageService {
 
   constructor() { }
 
-  save(key,data) {
+  save(key: string, data) {
     localStorage.setItem(key,JSON.stringify(data));
   }
 

src/app/shared/model.ts

@@ -0,0 +1,7 @@
+import { ChoiceGroup } from './choice-group';
+
+export interface Config {
+    groups: ChoiceGroup[];
+    lastChoiceId: number;
+    lastChoiceGroupId: number;
+}