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;
|
max-height:300px;
|
||||||
overflow-y:scroll;
|
overflow-y:scroll;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,9 +1,8 @@
|
||||||
import type { Meta, StoryObj } from '@storybook/angular';
|
import type { Meta, StoryObj } from '@storybook/angular';
|
||||||
import {GlossaryLookupComponent} from "./glossary-lookup.component";
|
import {GlossaryLookupComponent} from "./glossary-lookup.component";
|
||||||
import {applicationConfig, moduleMetadata} from "@storybook/angular";
|
import {componentWrapperDecorator, moduleMetadata} from "@storybook/angular";
|
||||||
import { DecoratorFunction, StoryContext } from '@storybook/types';
|
import { DecoratorFunction } from '@storybook/types';
|
||||||
import {HttpClient, HttpClientModule} from "@angular/common/http";
|
import {HttpClient, HttpClientModule} from "@angular/common/http";
|
||||||
import {BrowserModule} from "@angular/platform-browser";
|
|
||||||
import {Observable, of} from "rxjs";
|
import {Observable, of} from "rxjs";
|
||||||
import {HTTP_CLIENT_TOKEN} from "../../dependency-injection";
|
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 withHttpClientProvider: DecoratorFunction<any> = (storyFunc, context) => {
|
||||||
const { httpClientResp } = context.parameters;
|
const { httpClientResp } = context.parameters;
|
||||||
let { code, codeSystem } = context.args;
|
|
||||||
// uses `moduleMetadata` decorator to cleanly add locale provider into module metadata
|
// uses `moduleMetadata` decorator to cleanly add locale provider into module metadata
|
||||||
|
|
||||||
// It is also possible to do it directly in story with
|
// It is also possible to do it directly in story with
|
||||||
|
@ -54,12 +52,8 @@ const meta: Meta<GlossaryLookupComponent> = {
|
||||||
decorators: [
|
decorators: [
|
||||||
withHttpClientProvider,
|
withHttpClientProvider,
|
||||||
moduleMetadata({
|
moduleMetadata({
|
||||||
imports: [BrowserModule, HttpClientModule],
|
imports: [HttpClientModule],
|
||||||
}),
|
}),
|
||||||
// applicationConfig({
|
|
||||||
// // imports: [BrowserModule, HttpClientModule],
|
|
||||||
// providers: [{ provide: FastenApiService, useValue: MockFastenApiService }],
|
|
||||||
// }),
|
|
||||||
],
|
],
|
||||||
tags: ['autodocs'],
|
tags: ['autodocs'],
|
||||||
render: (args: GlossaryLookupComponent) => ({
|
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
|
// More on writing stories with args: https://storybook.js.org/docs/angular/writing-stories/args
|
||||||
export const Empty: Story = {
|
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