oip-common 0.0.5 → 0.0.7

package/src/components/menu/menu-item-edit-dialog.component.ts

@@ -0,0 +1,124 @@
+import { Component, EventEmitter, inject, Input, Output } from '@angular/core';
+import { ButtonModule } from 'primeng/button';
+import { DialogModule } from 'primeng/dialog';
+import { InputTextModule } from 'primeng/inputtext';
+import { FormsModule } from '@angular/forms';
+import { MenuService } from '../../services/app.menu.service';
+import { SecurityDataService } from '../../services/security-data.service';
+import { TranslatePipe } from '@ngx-translate/core';
+import { EditModuleInstanceDto } from '../../dtos/edit-module-instance.dto';
+import { MultiSelectModule } from 'primeng/multiselect';
+
+@Component({
+  imports: [ButtonModule, DialogModule, InputTextModule, FormsModule, TranslatePipe, MultiSelectModule],
+  selector: 'menu-item-edit-dialog',
+  standalone: true,
+  template: `
+    <p-dialog
+      header="{{ 'menuItemEditDialogComponent.header' | translate }}"
+      [modal]="true"
+      [style]="{ width: '40rem' }"
+      [(visible)]="visible">
+      <div class="flex items-center gap-4 mb-4 mt-1">
+        <label class="font-semibold w-1/3" for="oip-menu-item-edit-dialog-menu-input">
+          {{ 'menuItemEditDialogComponent.label' | translate }}
+        </label>
+        <input
+          autocomplete="off"
+          class="flex-auto"
+          id="oip-menu-item-edit-dialog-menu-input"
+          pInputText
+          [(ngModel)]="item.label" />
+      </div>
+
+      <div class="flex items-center gap-4 mb-4">
+        <label class="font-semibold w-1/3" for="oip-menu-item-edit-dialog-icon">
+          {{ 'menuItemEditDialogComponent.icon' | translate }}
+        </label>
+        <i class="{{ item.icon }}"></i>
+        <input class="flex-auto" id="oip-menu-item-edit-dialog-icon" pInputText [(ngModel)]="item.icon" />
+      </div>
+
+      <div class="flex items-center gap-4 mb-4">
+        <label class="font-semibold w-1/3" for="security">
+          {{ 'menuItemEditDialogComponent.security' | translate }}
+        </label>
+        <p-multiSelect
+          appendTo="body"
+          class="flex-auto"
+          id="oip-menu-item-edit-dialog-roles-multi-select"
+          placeholder="Select roles"
+          [maxSelectedLabels]="10"
+          [options]="roles"
+          [(ngModel)]="item.viewRoles" />
+      </div>
+
+      <div class="flex justify-end gap-2">
+        <p-button
+          id="oip-menu-item-edit-dialog-cancel-edit-button"
+          label="{{ 'menuItemEditDialogComponent.cancel' | translate }}"
+          severity="secondary"
+          (click)="changeVisible()"
+          (keydown)="changeVisible()" />
+        <p-button
+          id="oip-menu-item-edit-dialog-save-edit-button"
+          label="{{ 'menuItemEditDialogComponent.save' | translate }}"
+          (click)="save()"
+          (keydown)="save()" />
+      </div>
+    </p-dialog>
+  `
+})
+export class MenuItemEditDialogComponent {
+  private readonly menuService = inject(MenuService);
+  private readonly securityDataService = inject(SecurityDataService);
+
+  @Input() visible!: boolean;
+  @Output() visibleChange = new EventEmitter<boolean>();
+
+  modules: any[] = [];
+  roles: string[] = [];
+  item: EditModuleInstanceDto = {
+    icon: '',
+    label: '',
+    viewRoles: [''],
+    moduleId: 0,
+    moduleInstanceId: 0,
+    parentId: 0
+  };
+
+  changeVisible() {
+    this.visible = !this.visible;
+    this.visibleChange.emit(this.visible);
+  }
+
+  async save() {
+    await this.menuService.editModuleInstance(this.item);
+    await this.menuService.loadMenu();
+    this.hide();
+  }
+
+  hide() {
+    this.visible = false;
+    this.visibleChange.emit(this.visible);
+  }
+
+  async showDialog() {
+    this.item = {
+      moduleInstanceId: this.menuService.contextMenuItem?.moduleInstanceId,
+      moduleId: this.menuService.contextMenuItem?.moduleId,
+      parentId: this.menuService.contextMenuItem?.parentId,
+      label: this.menuService.contextMenuItem?.label,
+      icon: this.menuService.contextMenuItem?.icon,
+      viewRoles: this.menuService.contextMenuItem?.securities
+    };
+
+    this.roles = await this.securityDataService.getRealmRoles();
+    this.menuService.getModules().then((data) => {
+      this.modules = data;
+    });
+
+    this.visible = true;
+    this.visibleChange.emit(this.visible);
+  }
+}

package/src/components/menu/menu-item.component.ts

@@ -0,0 +1,295 @@
+import { ChangeDetectorRef, Component, HostBinding, inject, Input, OnDestroy, OnInit } from '@angular/core';
+import { NavigationEnd, Router, RouterLinkActive, RouterLink } from '@angular/router';
+import { animate, state, style, transition, trigger } from '@angular/animations';
+import { Subscription } from 'rxjs';
+import { filter } from 'rxjs/operators';
+import { LayoutService } from '../../services/app.layout.service';
+import { MenuService } from '../../services/app.menu.service';
+import { RippleModule } from 'primeng/ripple';
+import { NgIf, NgClass, NgFor } from '@angular/common';
+import { ConfirmationService, ContextMenuService, MenuItem, MenuItemCommandEvent, PrimeIcons } from 'primeng/api';
+import { MenuItemCreateDialogComponent } from './menu-item-create-dialog.component';
+import { ContextMenu, ContextMenuModule } from 'primeng/contextmenu';
+import { MsgService } from '../../services/msg.service';
+import { MenuItemEditDialogComponent } from './menu-item-edit-dialog.component';
+import { ContextMenuItemDto } from '../../dtos/context-menu-item.dto';
+import { TranslateService } from '@ngx-translate/core';
+import { ConfirmDialog } from 'primeng/confirmdialog';
+import { Menu } from '../../api/Menu';
+import { MenuDeleteModuleInstanceParams } from '../../api/data-contracts';
+
+interface MenuItemComponentTranslation {
+  delete: string;
+  edit: string;
+  new: string;
+  deleteItemConfirmHeader: string;
+  deleteItemConfirmMessage: string;
+  deleteItemSuccessMessage: string;
+  deleteItemConfirmRejectButtonPropsLabel: string;
+  deleteItemConfirmAcceptButtonPropsLabel: string;
+}
+
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: '[app-menuitem]',
+  template: `
+    <ng-container>
+      <p-confirm-dialog />
+      <div
+        *ngIf="root && item.visible !== false"
+        class="layout-menuitem-root-text"
+        (contextmenu)="onContextMenu($event, item)">
+        {{ item.label }}
+      </div>
+      <a
+        *ngIf="(!item.routerLink || item.items) && item.visible !== false"
+        pRipple
+        tabindex="0"
+        [attr.href]="item.url"
+        [attr.target]="item.target"
+        [ngClass]="item.class"
+        (click)="itemClick($event)">
+        <i class="layout-menuitem-icon" [ngClass]="item.icon"></i>
+        <span class="layout-menuitem-text">{{ item.label }}</span>
+        <i *ngIf="item.items" class="pi pi-fw pi-angle-down layout-submenu-toggler"></i>
+      </a>
+      <a
+        *ngIf="item.routerLink && !item.items && item.visible !== false"
+        pRipple
+        routerLinkActive="active-route"
+        tabindex="0"
+        [attr.target]="item.target"
+        [fragment]="item.fragment"
+        [ngClass]="item.class"
+        [preserveFragment]="item.preserveFragment"
+        [queryParams]="item.queryParams"
+        [queryParamsHandling]="item.queryParamsHandling"
+        [replaceUrl]="item.replaceUrl"
+        [routerLink]="item.routerLink"
+        [routerLinkActiveOptions]="
+          item.routerLinkActiveOptions || {
+            paths: 'exact',
+            queryParams: 'ignored',
+            matrixParams: 'ignored',
+            fragment: 'ignored'
+          }
+        "
+        [skipLocationChange]="item.skipLocationChange"
+        [state]="item.state"
+        (click)="itemClick($event)"
+        (contextmenu)="onContextMenu($event, item)">
+        <i class="layout-menuitem-icon" [ngClass]="item.icon"></i>
+        <span class="layout-menuitem-text">{{ item.label }}</span>
+        <i *ngIf="item.items" class="pi pi-fw pi-angle-down layout-submenu-toggler"></i>
+      </a>
+
+      <ul
+        *ngIf="item.items && item.visible !== false"
+        [@children]="submenuAnimation"
+        (contextmenu)="onContextMenu($event, item)">
+        <ng-template let-child let-i="index" ngFor [ngForOf]="item.items">
+          <li
+            app-menuitem
+            [class]="child.badgeClass"
+            [contextMenu]="contextMenu"
+            [index]="i"
+            [item]="child"
+            [menuItemCreateDialogComponent]="menuItemCreateDialogComponent"
+            [menuItemEditDialogComponent]="menuItemEditDialogComponent"
+            [parentKey]="key"></li>
+        </ng-template>
+      </ul>
+    </ng-container>
+  `,
+  animations: [
+    trigger('children', [
+      state(
+        'collapsed',
+        style({
+          height: '0'
+        })
+      ),
+      state(
+        'expanded',
+        style({
+          height: '*'
+        })
+      ),
+      transition('collapsed <=> expanded', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)'))
+    ])
+  ],
+  imports: [NgIf, RippleModule, NgClass, RouterLinkActive, RouterLink, NgFor, ContextMenuModule, ConfirmDialog],
+  providers: [ConfirmationService]
+})
+export class MenuItemComponent implements OnInit, OnDestroy {
+  private readonly layoutService = inject(LayoutService);
+  private readonly translateService = inject(TranslateService);
+  private readonly confirmationService = inject(ConfirmationService);
+  private readonly msgService = inject(MsgService);
+  private readonly menuDataService = inject(Menu);
+
+  @Input() item: ContextMenuItemDto;
+  @Input() index!: number;
+  @Input() @HostBinding('class.layout-root-menuitem') root!: boolean;
+  @Input() parentKey!: string;
+  @Input() menuItemCreateDialogComponent: MenuItemCreateDialogComponent;
+  @Input() menuItemEditDialogComponent: MenuItemEditDialogComponent;
+  @Input() contextMenu: ContextMenu;
+
+  private active = false;
+  private subscriptions: Subscription[] = [];
+  private localization: MenuItemComponentTranslation = {} as MenuItemComponentTranslation;
+
+  protected key: string = '';
+
+  constructor(
+    private readonly cd: ChangeDetectorRef,
+    public router: Router,
+    private readonly menuService: MenuService
+  ) {
+    this.subscriptions.push(
+      this.menuService.menuSource$.subscribe((value) => {
+        Promise.resolve(null).then(() => {
+          if (value.routeEvent) {
+            this.active = value.key === this.key || value.key.startsWith(this.key + '-');
+          } else if (value.key !== this.key && !value.key.startsWith(this.key + '-')) {
+            this.active = false;
+          }
+        });
+      })
+    );
+
+    this.subscriptions.push(
+      this.menuService.resetSource$.subscribe(() => {
+        this.active = false;
+      })
+    );
+
+    this.subscriptions.push(
+      this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe((params) => {
+        if (this.item.routerLink) {
+          this.updateActiveStateFromRoute();
+        }
+      })
+    );
+
+    this.subscriptions.push(
+      this.translateService.get('menuItemComponent').subscribe((value: MenuItemComponentTranslation) => {
+        this.localization = value;
+      })
+    );
+  }
+
+  ngOnInit() {
+    this.key = this.parentKey ? this.parentKey + '-' + this.index : String(this.index);
+
+    if (this.item.routerLink) {
+      this.updateActiveStateFromRoute();
+    }
+  }
+
+  updateActiveStateFromRoute() {
+    const activeRoute = this.router.isActive(this.item.routerLink[0], {
+      paths: 'exact',
+      queryParams: 'ignored',
+      matrixParams: 'ignored',
+      fragment: 'ignored'
+    });
+
+    if (activeRoute) {
+      this.menuService.onMenuStateChange({
+        key: this.key,
+        item: this.item,
+        routeEvent: true
+      });
+    }
+  }
+
+  itemClick(event: Event) {
+    // avoid processing disabled items
+    if (this.item.disabled) {
+      event.preventDefault();
+      return;
+    }
+
+    // execute command
+    if (this.item.command) {
+      this.item.command({ originalEvent: event, item: this.item });
+    }
+
+    // toggle active state
+    if (this.item.items) {
+      this.active = !this.active;
+    }
+
+    this.menuService.onMenuStateChange({ key: this.key, item: this.item });
+  }
+
+  get submenuAnimation() {
+    return this.root || this.active ? 'expanded' : 'collapsed';
+  }
+
+  @HostBinding('class.active-menuitem')
+  get activeClass() {
+    return this.active && !this.root;
+  }
+
+  ngOnDestroy() {
+    this.subscriptions.map((s) => s.unsubscribe());
+  }
+
+  private newClick(e: MenuItemCommandEvent) {
+    this.menuItemCreateDialogComponent.showDialog();
+  }
+
+  onContextMenu($event: MouseEvent, item: any) {
+    this.menuService.contextMenuItem = item;
+    this.contextMenu.model = [
+      {
+        label: this.localization.new,
+        icon: PrimeIcons.PLUS,
+        command: (event) => this.newClick(event)
+      },
+      {
+        label: this.localization.edit,
+        icon: PrimeIcons.FILE_EDIT,
+        command: (event) => this.editClick(event)
+      },
+      { separator: true },
+      {
+        label: this.localization.delete,
+        icon: PrimeIcons.TRASH,
+        command: (event) => this.deleteItem(event)
+      }
+    ];
+    this.contextMenu.show($event);
+  }
+
+  private deleteItem(event: MenuItemCommandEvent) {
+    this.confirmationService.confirm({
+      header: this.localization.deleteItemConfirmHeader,
+      message: this.localization.deleteItemConfirmMessage,
+      icon: PrimeIcons.TRASH,
+      rejectButtonProps: {
+        label: this.localization.deleteItemConfirmRejectButtonPropsLabel,
+        severity: 'secondary',
+        outlined: true
+      },
+      acceptButtonProps: {
+        label: this.localization.deleteItemConfirmAcceptButtonPropsLabel,
+        severity: 'danger'
+      },
+      accept: async () => {
+        await this.menuDataService.menuDeleteModuleInstance({
+          id: this.menuService.contextMenuItem?.moduleInstanceId
+        } as MenuDeleteModuleInstanceParams);
+        this.msgService.success(this.localization.deleteItemSuccessMessage);
+        await this.menuService.loadMenu();
+      }
+    });
+  }
+
+  private editClick(event: MenuItemCommandEvent) {
+    this.menuItemEditDialogComponent.showDialog();
+  }
+}

package/src/components/menu/menu.component.ts

@@ -0,0 +1,85 @@
+import { Component, inject, OnInit, ViewChild } from '@angular/core';
+import { MenuService } from '../../services/app.menu.service';
+import { ButtonModule } from 'primeng/button';
+import { SecurityService } from '../../services/security.service';
+import { ContextMenu, ContextMenuModule } from 'primeng/contextmenu';
+import { DialogModule } from 'primeng/dialog';
+import { MenuItemCommandEvent, PrimeIcons } from 'primeng/api';
+import { InputTextModule } from 'primeng/inputtext';
+import { FormsModule } from '@angular/forms';
+import { MenuItemComponent } from './menu-item.component';
+import { MenuItemCreateDialogComponent } from './menu-item-create-dialog.component';
+import { TranslateService } from '@ngx-translate/core';
+import { MenuItemEditDialogComponent } from './menu-item-edit-dialog.component';
+import { Menu } from '../../api/Menu';
+
+@Component({
+  imports: [
+    MenuItemComponent,
+    ButtonModule,
+    ContextMenuModule,
+    DialogModule,
+    InputTextModule,
+    MenuItemCreateDialogComponent,
+    FormsModule,
+    MenuItemEditDialogComponent
+  ],
+  providers: [Menu],
+  selector: 'app-menu',
+  standalone: true,
+  template: ` <div #empty class="layout-sidebar" (contextmenu)="onContextMenu($event)">
+      <ul class="layout-menu">
+        @for (item of menuService.menu; track item; let i = $index) {
+          <ng-container>
+            @if (item.separator) {
+              <li class="menu-separator"></li>
+            } @else {
+              <li
+                app-menuitem
+                [contextMenu]="contextMenu"
+                [index]="i"
+                [item]="item"
+                [menuItemCreateDialogComponent]="menuItemCreateDialogComponent"
+                [menuItemEditDialogComponent]="menuItemEditDialogComponent"
+                [root]="true"></li>
+            }
+          </ng-container>
+        }
+      </ul>
+    </div>
+    <p-contextMenu [target]="empty" />
+    @if (securityService.isAdmin) {
+      <menu-item-create-dialog />
+      <menu-item-edit-dialog />
+    }`
+})
+export class MenuComponent implements OnInit {
+  readonly menuService = inject(MenuService);
+  readonly securityService = inject(SecurityService);
+  readonly translateService = inject(TranslateService);
+
+  @ViewChild(MenuItemCreateDialogComponent)
+  menuItemCreateDialogComponent: MenuItemCreateDialogComponent;
+  @ViewChild(MenuItemEditDialogComponent)
+  menuItemEditDialogComponent: MenuItemEditDialogComponent;
+  @ViewChild(ContextMenu) contextMenu: ContextMenu;
+
+  ngOnInit() {
+    this.menuService.loadMenu().then();
+  }
+
+  private newClick(e: MenuItemCommandEvent) {
+    this.menuItemCreateDialogComponent.showDialog();
+  }
+
+  onContextMenu($event: MouseEvent) {
+    this.menuService.contextMenuItem = null;
+    this.contextMenu.model = [
+      {
+        label: this.translateService.instant('menuComponent.new'),
+        icon: PrimeIcons.PLUS,
+        command: (event) => this.newClick(event)
+      }
+    ];
+  }
+}

package/src/components/notfound.component.ts

@@ -0,0 +1,31 @@
+import { Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { LogoComponent } from './logo.component';
+import { Button } from 'primeng/button';
+import { AppFloatingConfiguratorComponent } from './app-floating-configurator.component';
+
+@Component({
+  selector: 'app-notfound',
+  template: ` <app-floating-configurator />
+    <div class="flex items-center justify-center min-h-screen overflow-hidden">
+      <div class="flex flex-col items-center justify-center">
+        <div
+          style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, color-mix(in srgb, var(--primary-color), transparent 60%) 10%, var(--surface-ground) 30%)">
+          <div
+            class="w-full bg-surface-0 dark:bg-surface-900 py-20 px-8 sm:px-20 flex flex-col items-center"
+            style="border-radius: 53px">
+            <div class="flex flex-col items-center justify-center">
+              <logo height="96" width="96"></logo>
+            </div>
+            <span class="text-primary font-bold text-3xl">404</span>
+            <h1 class="text-surface-900 dark:text-surface-0 font-bold text-3xl lg:text-5xl mb-2">Not Found</h1>
+            <div class="text-surface-600 dark:text-surface-200 mb-8">Requested resource is not available.</div>
+            <p-button id="oip-app-notfound-go-to-home-button" label="Go to home" routerLink="/" />
+          </div>
+        </div>
+      </div>
+    </div>`,
+  imports: [RouterLink, LogoComponent, Button, AppFloatingConfiguratorComponent],
+  standalone: true
+})
+export class NotfoundComponent {}

package/src/components/profile.component.ts

@@ -0,0 +1,44 @@
+import { Component, inject } from '@angular/core';
+import { FileUploadModule } from 'primeng/fileupload';
+import { ImageModule } from 'primeng/image';
+import { AvatarModule } from 'primeng/avatar';
+import { MsgService } from '../services/msg.service';
+import { UserService } from '../services/user.service';
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
+
+@Component({
+  selector: 'user-profile',
+  standalone: true,
+  imports: [FileUploadModule, ImageModule, ImageModule, FileUploadModule, ImageModule, AvatarModule, TranslatePipe],
+  template: `
+    <p-avatar
+      class="mr-2"
+      id="oip-user-profile-photo-avatar"
+      shape="circle"
+      size="xlarge"
+      [image]="userService.photoLoaded ? userService.photo : null" />
+    <div class="mt-2">
+      <p-fileupload
+        accept="image/*"
+        chooseIcon="pi pi-upload"
+        chooseLabel="{{ 'profileComponent.changePhoto' | translate }}"
+        id="oip-user-profile-file-upload"
+        maxFileSize="1000000"
+        mode="basic"
+        name="files"
+        url="/api/user-profile/post-user-photo"
+        withCredentials="true"
+        [auto]="true"
+        (onUpload)="onBasicUploadAuto($event)" />
+    </div>
+  `
+})
+export class ProfileComponent {
+  readonly userService = inject(UserService);
+  readonly msgService = inject(MsgService);
+  readonly translateService = inject(TranslateService);
+
+  onBasicUploadAuto($event) {
+    this.msgService.success(this.translateService.instant('profileComponent.successfullyUploaded'));
+  }
+}

package/src/components/security.component.ts

@@ -0,0 +1,102 @@
+import { Component, inject, Input, OnDestroy, OnInit } from '@angular/core';
+import { MultiSelectModule } from 'primeng/multiselect';
+import { TooltipModule } from 'primeng/tooltip';
+import { ButtonModule } from 'primeng/button';
+import { FormsModule } from '@angular/forms';
+import { MsgService } from './../services/msg.service';
+import { SecurityDataService } from './../services/security-data.service';
+import { PutSecurityDto } from './../dtos/put-security.dto';
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
+
+@Component({
+  selector: 'security',
+  template: `
+    <div class="flex flex-col md:flex-row gap-8">
+      <div class="md:w-1/2">
+        <div class="card flex flex-col gap-4">
+          <div class="font-semibold text-xl">
+            {{ 'securityComponent.security' | translate }}
+          </div>
+          @for (item of securityData; track item.name) {
+            <div class="flex flex-col gap-2">
+              <label htmlFor="oip-security-multiselect-{{ item.name }}">
+                {{ item.name }}
+                <span class="pi pi-question-circle" pTooltip="{{ item.description }}" tooltipPosition="right"></span>
+              </label>
+              <p-multiSelect
+                id="oip-security-multiselect-{{ item.name }}"
+                placeholder="Select roles"
+                [maxSelectedLabels]="10"
+                [options]="roles"
+                [(ngModel)]="item.roles" />
+            </div>
+          }
+          <div class="flex justify-content-end flex-wrap">
+            <p-button
+              icon="pi pi-save"
+              id="oip-security-save-button"
+              label="{{ 'securityComponent.save' | translate }}"
+              (click)="saveClick()"
+              (keydown)="saveKeyDown($event)" />
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+  imports: [MultiSelectModule, TooltipModule, FormsModule, ButtonModule, TranslatePipe],
+  standalone: true
+})
+export class SecurityComponent implements OnInit, OnDestroy {
+  private readonly msgService = inject(MsgService);
+  private readonly dataService = inject(SecurityDataService);
+  private readonly translateService = inject(TranslateService);
+  securityData: any[];
+  @Input() id: number;
+  @Input() controller: string;
+  roles: string[] = [];
+
+  ngOnDestroy(): void {
+    // on destroy
+  }
+
+  ngOnInit(): void {
+    if (!this.id) {
+      this.msgService.error('Module id not passed!');
+    }
+    if (!this.controller) {
+      this.msgService.error('Controller not passed!');
+    }
+    this.dataService.getSecurity(this.controller, this.id).then(
+      (result) => {
+        this.securityData = result;
+      },
+      (error) => this.msgService.error(error)
+    );
+
+    this.dataService.getRealmRoles().then(
+      (result) => {
+        this.roles = result;
+      },
+      (error) => this.msgService.error(error)
+    );
+  }
+
+  saveClick() {
+    const request: PutSecurityDto = {
+      id: this.id,
+      securities: this.securityData
+    };
+    this.dataService.saveSecurity(this.controller, request).then(
+      (result) => {
+        this.msgService.success(this.translateService.instant('securityComponent.savedSecurity'));
+      },
+      (error) => this.msgService.error(error)
+    );
+  }
+
+  saveKeyDown($event: KeyboardEvent) {
+    if ($event.key === 'Enter' || $event.key === 'Space') {
+      this.saveKeyDown(null);
+    }
+  }
+}