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:
Jean Fernandez 2024-03-06 13:54:15 -05:00 committed by GitHub
parent d025251572
commit c487c9fe25
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 112 additions and 9 deletions

View File

@ -2,4 +2,5 @@
max-height:300px;
overflow-y:scroll;
display: inline-block;
max-width: 100%;
}

View File

@ -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 = {
};

View File

@ -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
}
};