Add TenantGridComponent with HTML template, styles, and unit tests for tenant display

This commit is contained in:
Christian Werner 2025-10-22 02:57:43 +02:00
parent a21d59fe41
commit b5e8c28104
4 changed files with 79 additions and 0 deletions

View File

@ -0,0 +1,12 @@
@if (loading()) {
Loading...
} @else {
@for (tenant of tenants(); track tenant.id) {
<app-panel class="neutral-80">
<span class="title">{{tenant.name}}</span>
<span class="actions">
<app-link [href]="'tenants/'+tenant.id">View Details</app-link>
</span>
</app-panel>
}
}

View File

@ -0,0 +1,13 @@
:host {
display: flex;
flex-direction: column;
gap: .5rem;
app-panel {
display: flex;
}
.actions {
margin-left: auto;
}
}

View File

@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { TenantGridComponent } from './tenant-grid.component';
describe('TenantGridComponent', () => {
let component: TenantGridComponent;
let fixture: ComponentFixture<TenantGridComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [TenantGridComponent]
})
.compileComponents();
fixture = TestBed.createComponent(TenantGridComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View File

@ -0,0 +1,31 @@
import {Component, inject, OnInit, signal} from '@angular/core';
import {TenantService} from '../../../clients/gandalf/mithrandir/tenant/tenant.service';
import {TenantGridViewDto} from '../../../clients/gandalf/mithrandir/tenant/dtos/tenant-grid-view-dto';
import {PanelComponent} from '../../panel/panel.component';
import {LinkComponent} from '../../link/link.component';
@Component({
selector: 'app-tenant-grid',
imports: [
PanelComponent,
LinkComponent
],
templateUrl: './tenant-grid.component.html',
styleUrl: './tenant-grid.component.scss'
})
export class TenantGridComponent implements OnInit {
protected tenants = signal<TenantGridViewDto[]>([]);
protected loading = signal<boolean>(true);
private tenantService = inject(TenantService);
async ngOnInit(): Promise<void> {
const tenants = await this.tenantService.tenantsAsync();
this.tenants.set(tenants);
this.loading.set(false);
}
}