rxnt / react-json-schema-form-extras Goto Github PK
View Code? Open in Web Editor NEWAn assortment of extra widgets for Mozilla's JSON Schema Form.
An assortment of extra widgets for Mozilla's JSON Schema Form.
In the IMO search popup window, it seems like it would be a major convenience to be able to press enter to trigger the search. Right now in Chrome enter doesn't work, I need to click the search button.
There seems to be some CSS issue with bootstrap modal and we can't make it show the bootstrap dialog.
Goals have a following response:
{Id: 15, Name: "Asthma management", SNOMED: {Code: "406162001", Description: "Asthma management"}}
We should be able to use "SNOMED.Code" if we want to in parsed object.
In Plan and Coding > Plan Details tab
Codes can be entered in 2 ways
May need to add onChange or some other handler so that the data of custom widgets stays in sync with Mozilla's json schema form view of the data. This will matter when we try to submit the form - the Mozilla object will need access to the widget's data.
Will build a small playground to experiment with submission of custom widgets.
Currently IMO search is done on enter on the form, which is not straight forward for old users
For some reason during testing it often happens, that when selecting an item typeahead simply ignores it, maybe we need to switch to in-house implementation instead of react-bootstrap-typeahead.
We need to be able to query CPT codes in RxNT and present results in the same way, it's done currently - ${Code} - ${Description}
Typeahead package allows to do this, with a function specified as a labelKey, but we can't serialize function in a JSON, so we'll have to find some other way to do this.
During integration, Autocomplete does not work with following error
Uncaught TypeError: Cannot read property '0' of undefined
at search (AsyncTypeaheadAPI.js:17)
at AsyncTypeaheadField._this.handleSearch (AsyncTypeaheadField.js:56)
at Container.eval (
Use case is following,
We have allergies, that have a server autocomplete functionality (they have allergy name and id).
We add allergies to the Table
and want to edit Allergy name.
When editing allergy name, we also want to use Autocomplete from server side.
Problem.
Currently autocomplete will change a single field name
leaving the old id intact, and making data inconsistent.
Solution:
We need to change both Allergy name and Allergy ID on table autocomplete.
When clicking a cell in the table, the input resizes and squishes the other table cells. In order to mirror RxNT's billing system (and to have a table that looks clean), we probably don't want any resizing to happen. The input should be the same size as the table cell.
I dug around for about 30 mins in the CSS & in the react bootstrap table project to try to come up with a solution, figured I'd run it by you and see if you had any ideas. Also, it may be better to solve this inside of the extras project and not with slap-on CSS in the encounter project, since I imagine users are generally going to want this fixed.
The main problem I ran into is that I can't see which CSS classes are being added via chrome's inspector, because the input element is dynamically inserted.
While integrating with Encounter drugs and allergies we see that table column have different proportions, then table header proportions.
Need to align them to look the same way.
Seen, while schema testing in encounter
This project is now at a point that a fork is needed for RxNT-specific features. We can move the widgets for allergies and medications to this other repository, then leave this project with a simple abstraction that allows for using asyncTypeahead via a decorator.
This project will also soon contain a grid widget, and possibly other abstract widgets.
This establishes better User Experience
In some cases for the RxNT encounter, we don't want any input search field shown above the table (we might use only the plus icon next to the collapser, for example).
It would be great to be able to exclude the inputField with a 'none' option instead of having to provide a 'typeahead' or 'asyncTypeahead'.
We found this out with Raj during integration
VM7679 TableField.js:44 Uncaught TypeError: Cannot read property 'map' of undefined
at addIndex (VM7679 TableField.js:44)
at TableField._this.toTableConf (VM7679 TableField.js:147)
at TableField.render (
Currently when rending Table with no configurations, order of columns is determined by the order in schema properties part.
{
type: "object",
properties: {
a: { type: "boolean" },
b: { type: "string" }
}
}
We expect a
to be the first column and b
to be the last one. While testing this caused problems - a
& b
switched position, after saving and reading from mongo.
In order to handle this cases we need to be able to specify predefined column order.
While integrating with encounter, it seems fields
specified in final schema property, ignored at the rendered form.
Follow up on trello board
This is the latest SandeepRequirement to trigger IMO search only when Enter was clicked
I think uiSchema is the original place to put ui related configurations, so I reused and so we don't need to have externalFieldsData as a separate configuration. I think that makes things simpler.
Due to mongo restrictions (not able save keys with dot inside), we need to flip current mapping configurations:
"responseSchemaMapping": {
"Name": "goal",
"SNOMED.Code": "snomed"
}
will be
"responseSchemaMapping": {
"goal": "Name",
"snomed": "SNOMED.Code"
}
IMO field will make the same requests for Problem and details, there is no need to store it in configurations, since they are not going to change.
We can remove extra IMO configuration, making support easier in long term
Currently the default confirmation behavior is a popup, we want to be able to configure it with a simple configuration
Currently the CSS file for the table module loads from the CDN provided by the table creator. Will probably want to adjust this dependency to rely directly on the CSS file inside of the npm package.
This exception is shown during testing
DX tab does not have free text enter button, we need to be able to hide it.
After talking with Raj, it turns out we are responsible for authentication with RxNT to make IMO working. Authentication info is taken from externalTemplateV2User and encounterTemplateV2EncounterInfo parent infos
{
"ApplicationName": "EHR",
"ExternalDoctorCompanyId": externalTemplateV2User.DoctorCompanyID
"ExternalAppLoginId": encounterTemplateV2EncounterInfo.LoggedInUserID
}
And should be submitted to https://devqa.rxnt.com/PMV2API/billing/authentication/AuthenticateExternalUser for credentials
One of the requirements of RxNT is to have some fields expandable and collapsible, we need to support this functionality
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.