button-with-spinner.component.ts

import { StateResource, createEmptyStateResource } from '@alfa-client/tech-shared';
import { CommonModule } from '@angular/common';
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { Resource } from '@ngxp/rest';
import { ButtonComponent, ErrorMessageComponent, buttonVariants } from '@ods/system';
import { VariantProps } from 'class-variance-authority';
import { isNil } from 'lodash-es';

type ButtonVariants = VariantProps<typeof buttonVariants>;

@Component({
  selector: 'ods-button-with-spinner',
  standalone: true,
  imports: [CommonModule, ButtonComponent, ErrorMessageComponent],
  styles: [':host {@apply flex flex-col}'],
  template: `<ods-error-message
      *ngIf="stateResource.error"
      text="Ein Fehler ist aufgetreten."
      subText="Versuchen Sie es nocheinmal."
    >
    </ods-error-message>
    <ods-button
      [text]="text"
      [variant]="variant"
      [size]="size"
      [dataTestId]="dataTestId"
      [isLoading]="isLoading"
      (click)="clickEmitter.emit()"
    >
    </ods-button>`,
})
export class ButtonWithSpinnerComponent implements OnInit {
  @Input() text: string = '';
  @Input() dataTestId: string = '';
  @Input() stateResource: StateResource<Resource>;
  @Input() variant: ButtonVariants['variant'] = 'primary';
  @Input() size: ButtonVariants['size'] = 'medium';

  @Output() public clickEmitter: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();

  ngOnInit(): void {
    this.stateResource = this.getStateResource();
  }

  getStateResource(): StateResource<Resource> {
    return isNil(this.stateResource) ? createEmptyStateResource<Resource>() : this.stateResource;
  }

  get isLoading(): boolean {
    return this.stateResource.loading || this.stateResource.reload;
  }
}