Skip to content
Snippets Groups Projects
Commit 66ce7e9b authored by OZGCloud's avatar OZGCloud
Browse files

OZG-5600-OZG-5605 Add new button with stateResource

parent 96467f95
No related branches found
No related tags found
No related merge requests found
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ResourceButtonComponent } from './button.component';
describe('ResourceButtonComponent', () => {
let component: ResourceButtonComponent;
let fixture: ComponentFixture<ResourceButtonComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [ResourceButtonComponent],
}).compileComponents();
fixture = TestBed.createComponent(ResourceButtonComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
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, buttonVariants } from '@ods/system';
import { VariantProps } from 'class-variance-authority';
import { isNil } from 'lodash-es';
type ButtonVariants = VariantProps<typeof buttonVariants>;
@Component({
selector: 'ods-resource-button',
standalone: true,
imports: [CommonModule, ButtonComponent],
template: `<ods-button
[text]="text"
[type]="type"
[size]="size"
[dataTestId]="dataTestId"
[isLoading]="isLoading"
(click)="clickEmitter.emit()"
>
</ods-button>`,
})
export class ResourceButtonComponent implements OnInit {
@Input() text: string = '';
@Input() dataTestId: string = '';
@Input() stateResource: StateResource<Resource>;
@Input() type: ButtonVariants['type'] = '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;
}
}
......@@ -4,7 +4,7 @@ import { VariantProps, cva } from 'class-variance-authority';
import { SpinnerIconComponent } from '../icons/spinner-icon/spinner-icon.component';
const buttonVariants = cva(
export const buttonVariants = cva(
'flex cursor-pointer items-center gap-4 rounded-md font-medium disabled:cursor-wait text-sm min-w-32',
{
variants: {
......@@ -35,6 +35,7 @@ type ButtonVariants = VariantProps<typeof buttonVariants>;
[disabled]="isLoading"
[attr.aria-disabled]="isLoading"
[attr.aria-label]="text"
[attr.data-test-id]="dataTestId"
(click)="clickEmitter.emit()"
>
<ng-content *ngIf="!isLoading" select="[icon]"></ng-content>
......@@ -44,6 +45,7 @@ type ButtonVariants = VariantProps<typeof buttonVariants>;
})
export class ButtonComponent {
@Input() text: string = '';
@Input() dataTestId: string = '';
@Input() isLoading: boolean = false;
@Input() type: ButtonVariants['type'] = 'primary';
@Input() size: ButtonVariants['size'] = 'medium';
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment