oip-common 0.0.7 → 0.0.9

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

@@ -1,124 +0,0 @@
-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

@@ -1,295 +0,0 @@
-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

@@ -1,85 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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

@@ -1,102 +0,0 @@
-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);
-    }
-  }
-}