src/app/shared/components/tissue-block-list/tissue-block-list.component.ts
Tissue block list in spatial search UI
| changeDetection | ChangeDetectionStrategy.OnPush |
| selector | ccf-tissue-block-list |
| styleUrls | ./tissue-block-list.component.scss |
| templateUrl | ./tissue-block-list.component.html |
Properties |
|
Inputs |
HostBindings |
| tissueBlocks | |
Type : TissueBlockResult[]
|
|
Default value : []
|
|
|
Tissue blocks to be displayed |
|
| class |
Type : "ccf-tissue-block-list"
|
Default value : 'ccf-tissue-block-list'
|
|
HTML class |
| Readonly className |
Type : string
|
Default value : 'ccf-tissue-block-list'
|
Decorators :
@HostBinding('class')
|
|
HTML class |
import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';
import { TissueBlockResult } from 'ccf-database';
/**
* Tissue block list in spatial search UI
*/
@Component({
selector: 'ccf-tissue-block-list',
templateUrl: './tissue-block-list.component.html',
styleUrls: ['./tissue-block-list.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class TissueBlockListComponent {
/** HTML class */
@HostBinding('class') readonly className = 'ccf-tissue-block-list';
/** Tissue blocks to be displayed */
@Input() tissueBlocks: TissueBlockResult[] = [];
}
<div class="tissue-block-header">
<div class="title">{{ tissueBlocks.length }} Tissue Blocks</div>
<button class="info" mat-icon-button>
<mat-icon
matTooltip="Total quantity of registered Tissue Blocks detected by the Probing Sphere"
matTooltipPosition="right"
>info</mat-icon
>
</button>
</div>
<div class="tissue-list">
<div class="donor" *ngFor="let tissueBlock of tissueBlocks">
<mat-icon class="icon">person</mat-icon>
<div class="donor-info">
<div class="description">{{ tissueBlock.donor.label }}</div>
<div class="description">{{ tissueBlock.donor.description }}</div>
</div>
</div>
</div>
./tissue-block-list.component.scss
:host {
.tissue-block-header {
display: flex;
justify-content: space-between;
margin-bottom: 1rem;
.title {
font-size: 0.875rem;
}
.info {
padding: 0;
background: none;
border: none;
outline: none;
border-radius: 0.25rem;
transition: 0.6s;
}
}
.tissue-list {
overflow: auto;
}
.donor {
min-height: 3rem;
padding-left: 0.5rem;
display: flex;
font-size: 0.75rem;
line-height: 1rem;
align-items: center;
flex-grow: 1;
height: 2.5rem;
width: 22rem;
padding: 0.5rem;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
cursor: pointer;
margin-right: 1rem;
margin-bottom: 0.5rem;
.icon {
margin-right: 0.5rem;
}
.donor-info {
.title {
font-weight: 600;
}
.description {
width: 17rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
}