Fix horizontal overflow for glossary lookup (#445)
* Fix Overflow for Labs Glossary * Add story to glossary lookup and report labs observation
This commit is contained in:
parent
d025251572
commit
c487c9fe25
|
@ -2,4 +2,5 @@
|
|||
max-height:300px;
|
||||
overflow-y:scroll;
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
|
|
@ -1,9 +1,8 @@
|
|||
import type { Meta, StoryObj } from '@storybook/angular';
|
||||
import {GlossaryLookupComponent} from "./glossary-lookup.component";
|
||||
import {applicationConfig, moduleMetadata} from "@storybook/angular";
|
||||
import { DecoratorFunction, StoryContext } from '@storybook/types';
|
||||
import {componentWrapperDecorator, moduleMetadata} from "@storybook/angular";
|
||||
import { DecoratorFunction } from '@storybook/types';
|
||||
import {HttpClient, HttpClientModule} from "@angular/common/http";
|
||||
import {BrowserModule} from "@angular/platform-browser";
|
||||
import {Observable, of} from "rxjs";
|
||||
import {HTTP_CLIENT_TOKEN} from "../../dependency-injection";
|
||||
|
||||
|
@ -15,7 +14,6 @@ import {HTTP_CLIENT_TOKEN} from "../../dependency-injection";
|
|||
|
||||
const withHttpClientProvider: DecoratorFunction<any> = (storyFunc, context) => {
|
||||
const { httpClientResp } = context.parameters;
|
||||
let { code, codeSystem } = context.args;
|
||||
// uses `moduleMetadata` decorator to cleanly add locale provider into module metadata
|
||||
|
||||
// It is also possible to do it directly in story with
|
||||
|
@ -54,12 +52,8 @@ const meta: Meta<GlossaryLookupComponent> = {
|
|||
decorators: [
|
||||
withHttpClientProvider,
|
||||
moduleMetadata({
|
||||
imports: [BrowserModule, HttpClientModule],
|
||||
imports: [HttpClientModule],
|
||||
}),
|
||||
// applicationConfig({
|
||||
// // imports: [BrowserModule, HttpClientModule],
|
||||
// providers: [{ provide: FastenApiService, useValue: MockFastenApiService }],
|
||||
// }),
|
||||
],
|
||||
tags: ['autodocs'],
|
||||
render: (args: GlossaryLookupComponent) => ({
|
||||
|
@ -143,6 +137,13 @@ export const Html: Story = {
|
|||
}
|
||||
};
|
||||
|
||||
// Wrap in small width div to verify that text doesn't overflow horizontally. Border included to make it easier to verify overflow.
|
||||
export const HorizontalOverflow: Story = {
|
||||
args: Html.args,
|
||||
parameters: Html.parameters,
|
||||
decorators: [componentWrapperDecorator((story) => `<div style="width: 300px; border-style: solid">${story}</div>`)]
|
||||
};
|
||||
|
||||
// More on writing stories with args: https://storybook.js.org/docs/angular/writing-stories/args
|
||||
export const Empty: Story = {
|
||||
};
|
||||
|
|
|
@ -0,0 +1,101 @@
|
|||
import type { Meta, StoryObj } from '@storybook/angular';
|
||||
import { moduleMetadata } from '@storybook/angular';
|
||||
import { DecoratorFunction } from '@storybook/types';
|
||||
import { ReportLabsObservationComponent } from './report-labs-observation.component'
|
||||
import { PipesModule } from 'src/app/pipes/pipes.module';
|
||||
import { NgbCollapse } from '@ng-bootstrap/ng-bootstrap';
|
||||
import { ResourceFhir } from 'src/app/models/fasten/resource_fhir';
|
||||
import { GlossaryLookupComponent } from '../glossary-lookup/glossary-lookup.component';
|
||||
import { NgChartsModule } from 'ng2-charts';
|
||||
import { HTTP_CLIENT_TOKEN } from 'src/app/dependency-injection';
|
||||
import { HttpClient, HttpClientModule, HttpHandler } from '@angular/common/http';
|
||||
import { RouterTestingModule } from '@angular/router/testing';
|
||||
import { Observable, of } from 'rxjs';
|
||||
|
||||
import R4Example1Json from "../../../lib/fixtures/r4/resources/observation/example1.json";
|
||||
import { Html as GlossaryLookupHtml } from '../glossary-lookup/glossary-lookup.stories';
|
||||
|
||||
|
||||
const withHttpClientProvider: DecoratorFunction<any> = (storyFunc, context) => {
|
||||
const { httpClientResp } = context.parameters;
|
||||
|
||||
class MockHttpClient extends HttpClient {
|
||||
|
||||
get(): Observable<any> {
|
||||
return of(httpClientResp)
|
||||
}
|
||||
}
|
||||
|
||||
return moduleMetadata({ providers: [{ provide: HTTP_CLIENT_TOKEN, useClass: MockHttpClient }] })(
|
||||
storyFunc,
|
||||
context
|
||||
);
|
||||
};
|
||||
|
||||
// More on how to set up stories at: https://storybook.js.org/docs/angular/writing-stories/introduction
|
||||
const meta: Meta<ReportLabsObservationComponent> = {
|
||||
title: 'Components/ReportLabsObservation',
|
||||
component: ReportLabsObservationComponent,
|
||||
decorators: [
|
||||
withHttpClientProvider,
|
||||
moduleMetadata({
|
||||
imports: [PipesModule, GlossaryLookupComponent, NgChartsModule, RouterTestingModule, HttpClientModule],
|
||||
declarations: [NgbCollapse],
|
||||
providers: [],
|
||||
})
|
||||
],
|
||||
tags: ['autodocs'],
|
||||
render: (args: ReportLabsObservationComponent) => ({
|
||||
props: {
|
||||
backgroundColor: null,
|
||||
...args,
|
||||
},
|
||||
}),
|
||||
argTypes: {
|
||||
observations: {
|
||||
control: 'array'
|
||||
},
|
||||
observationCode: {
|
||||
control: 'string'
|
||||
},
|
||||
observationTitle: {
|
||||
control: 'string'
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<ReportLabsObservationComponent>;
|
||||
|
||||
const observation: ResourceFhir = {
|
||||
source_id: '',
|
||||
source_resource_id: '',
|
||||
source_resource_type: 'Observation',
|
||||
fhir_version: '4',
|
||||
sort_title: 'sort',
|
||||
sort_date: new Date(),
|
||||
resource_raw: R4Example1Json,
|
||||
};
|
||||
|
||||
const observation2: ResourceFhir = {
|
||||
source_id: '',
|
||||
source_resource_id: '',
|
||||
source_resource_type: 'Observation',
|
||||
fhir_version: '4',
|
||||
sort_title: 'sort',
|
||||
sort_date: new Date(),
|
||||
resource_raw: R4Example1Json,
|
||||
};
|
||||
|
||||
// More on writing stories with args: https://storybook.js.org/docs/angular/writing-stories/args
|
||||
export const Entry: Story = {
|
||||
args: {
|
||||
observations: [observation, observation2],
|
||||
observationCode: '788-0',
|
||||
observationTitle: 'Erythrocyte distribution width [Ratio] by Automated count',
|
||||
},
|
||||
parameters: {
|
||||
...GlossaryLookupHtml.parameters
|
||||
}
|
||||
};
|
Loading…
Reference in New Issue