# Project: Create web components for FHIR Resources **URL:** \ **Category:** Toolkit\ **Tags:** gsoc2021-project, toolkit, gsoc2021\ **Created:** [May 17, 2021, 9:13pm UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/4155 "2021-05-17T21:13:26Z")\ **Posts on this page:** 20\ **Page:** 2
**Author:** ![Shashwat](https://forums.librehealth.io/user_avatar/forums.librehealth.io/shashwat/32/1914_2.png) [@Shashwat](https://forums.librehealth.io/u/Shashwat)\ **Post date:** [June 7, 2021, 6:43am UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/4155/23 "2021-06-07T06:43:46Z")
> **[\[init\]react-ehr : initial commit (!108) · Merge requests · LibreHealth /...](https://gitlab.com/librehealth/toolkit/lh-toolkit-webcomponents/-/merge_requests/108)** > > The LibreHealth Toolkit Web Components based on HTML custom elements and implement the FHIR Resources commit rebased and MR landed. ---
**Author:** ![Shashwat](https://forums.librehealth.io/user_avatar/forums.librehealth.io/shashwat/32/1914_2.png) [@Shashwat](https://forums.librehealth.io/u/Shashwat)\ **Post date:** [June 8, 2021, 1:40pm UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/4155/24 "2021-06-08T13:40:19Z")
made a few commits to the exisiting MR : [REACT EHR](https://geforce6t.gitlab.io/lh-toolkit-webcomponents/) `username: benteke_cristian` `password: 02021994Va` ---
**Author:** ![r0bby](https://forums.librehealth.io/user_avatar/forums.librehealth.io/r0bby/32/1781_2.png) [@r0bby](https://forums.librehealth.io/u/r0bby)\ **Post date:** [June 8, 2021, 11:42pm UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/4155/25 "2021-06-08T23:42:51Z")
You should trip trailing and leading whitespace in username validation. Similar for passwords as well. ---
**Author:** ![Shashwat](https://forums.librehealth.io/user_avatar/forums.librehealth.io/shashwat/32/1914_2.png) [@Shashwat](https://forums.librehealth.io/u/Shashwat)\ **Post date:** [June 9, 2021, 7:29pm UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/4155/26 "2021-06-09T19:29:12Z")
@sunbiz should the general seach component that I had proposed be created as a react component or a lit component ? ---
**Author:** ![sunbiz](https://forums.librehealth.io/user_avatar/forums.librehealth.io/sunbiz/32/395_2.png) [@sunbiz](https://forums.librehealth.io/u/sunbiz)\ **Post date:** [June 9, 2021, 8:44pm UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/4155/27 "2021-06-09T20:44:13Z")
Since you are more comfortable with React, you can use that. It will also be the _proof of the pudding_ that different web components can work together on a page. However, it will be nice if you also used the material design UX for that component. ---
**Author:** ![Shashwat](https://forums.librehealth.io/user_avatar/forums.librehealth.io/shashwat/32/1914_2.png) [@Shashwat](https://forums.librehealth.io/u/Shashwat)\ **Post date:** [June 9, 2021, 8:49pm UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/4155/28 "2021-06-09T20:49:00Z")
Sure @sunbiz ! For the time being I’ll do with react. ---
**Author:** ![Shashwat](https://forums.librehealth.io/user_avatar/forums.librehealth.io/shashwat/32/1914_2.png) [@Shashwat](https://forums.librehealth.io/u/Shashwat)\ **Post date:** [June 9, 2021, 9:26pm UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/4155/29 "2021-06-09T21:26:07Z")
Actually I have a small doubt regarding the last statement here, by material design do we mean this : - [GitHub - jamesmfriedman/rmwc: A React wrapper for Material Design (Web) Components](https://github.com/jamesmfriedman/rmwc) or - [material ui](https://material-ui.com/) that we have already used in the project? ---
**Author:** ![sunbiz](https://forums.librehealth.io/user_avatar/forums.librehealth.io/sunbiz/32/395_2.png) [@sunbiz](https://forums.librehealth.io/u/sunbiz)\ **Post date:** [June 10, 2021, 7:02pm UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/4155/30 "2021-06-10T19:02:08Z")
Is there a reason to not use the official web components from Google - [https://rmwc.io/](https://rmwc.io/) ---
**Author:** ![Shashwat](https://forums.librehealth.io/user_avatar/forums.librehealth.io/shashwat/32/1914_2.png) [@Shashwat](https://forums.librehealth.io/u/Shashwat)\ **Post date:** [June 10, 2021, 7:39pm UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/4155/31 "2021-06-10T19:39:39Z")
It’s mainly because I started with MUI, I felt that MUI is a bit more powerful than rmwc , the variety of components are more and most of the use cases are covered here. rmwc is under limited support according to the README, so I started with MUI. Anyways I will switch to rmwc if you suggest it @sunbiz ! ---
**Author:** ![sunbiz](https://forums.librehealth.io/user_avatar/forums.librehealth.io/sunbiz/32/395_2.png) [@sunbiz](https://forums.librehealth.io/u/sunbiz)\ **Post date:** [June 10, 2021, 8:20pm UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/4155/32 "2021-06-10T20:20:34Z")
> [@Shashwat](#): > > It’s mainly because I started with MUI, I felt that MUI is a bit more powerful than rmwc It’s your choice… I am fine with either. ---
**Author:** ![Shashwat](https://forums.librehealth.io/user_avatar/forums.librehealth.io/shashwat/32/1914_2.png) [@Shashwat](https://forums.librehealth.io/u/Shashwat)\ **Post date:** [June 11, 2021, 11:52am UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/4155/33 "2021-06-11T11:52:10Z")
[https://geforce6t.github.io/blog/2021/06/11/Week1/](https://geforce6t.github.io/blog/2021/06/11/Week1/) new commit covering all the screens and components for checkin workflow : > **[\[init\]react-ehr : initial commit (!108) · Merge requests · LibreHealth /...](https://gitlab.com/librehealth/toolkit/lh-toolkit-webcomponents/-/merge_requests/108/diffs?commit_id=aabf6703be92308616d663274d2cbc03e21dfe4d)** > > The LibreHealth Toolkit Web Components based on HTML custom elements and implement the FHIR Resources @sunbiz how should the response be handled for the create patient component ? for editing the patient resouce entry via get resource, I did everything inside of the react component, but as the post request is already made from the lit-component in `create-patient` should I add response handling there itself or should it be done inside react ? ---
**Author:** ![sunbiz](https://forums.librehealth.io/user_avatar/forums.librehealth.io/sunbiz/32/395_2.png) [@sunbiz](https://forums.librehealth.io/u/sunbiz)\ **Post date:** [June 11, 2021, 6:22pm UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/4155/34 "2021-06-11T18:22:02Z")
> [@Shashwat](#): > > @sunbiz how should the response be handled for the create patient component ? for editing the patient resouce entry via get resource, I did everything inside of the react component, but as the post request is already made from the lit-component in `create-patient` should I add response handling there itself or should it be done inside react ? I think the POST response should always be in the app. The web component can be installed in different configurations and it should be upto the dev assembling the components to handle what to do after the POST. However, shouldn’t the editing be done through the create-patient resource too? There shouldn’t be separate one from _create_ and _edit_, if they have the same elements inside it. ---
**Author:** ![Shashwat](https://forums.librehealth.io/user_avatar/forums.librehealth.io/shashwat/32/1914_2.png) [@Shashwat](https://forums.librehealth.io/u/Shashwat)\ **Post date:** [June 12, 2021, 2:51am UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/4155/35 "2021-06-12T02:51:39Z")
> [@sunbiz](#): > > However, shouldn’t the editing be done through the create-patient resource too? There shouldn’t be separate one from _create_ and _edit_ , if they have the same elements inside it. @sunbiz I’ve used the `patient-get-component`’s value for editing , as after selecting an entry in the search component the get component is used to show the details of that specific ID. The values of the components will already be filled so it will be easier to make small/large edits, but if the create patient is used it will be initialised with all empty value because of the way it’s configured. ---
**Author:** ![Shashwat](https://forums.librehealth.io/user_avatar/forums.librehealth.io/shashwat/32/1914_2.png) [@Shashwat](https://forums.librehealth.io/u/Shashwat)\ **Post date:** [June 13, 2021, 1:03pm UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/4155/36 "2021-06-13T13:03:00Z")
> **[\[checkin\]: bugs found while implementing checkin workflow (#99) · Issues ·...](https://gitlab.com/librehealth/toolkit/lh-toolkit-webcomponents/-/issues/99)** > > https://gitlab.com/librehealth/toolkit/lh-toolkit-webcomponents/-/blob/master/packages/fhir-active-status/fhir-active-status.js#L65 =\> the value property doesn't exist on target in this case ... @sunbiz I made the above issue regarding few probable bugs. ---
**Author:** ![Shashwat](https://forums.librehealth.io/user_avatar/forums.librehealth.io/shashwat/32/1914_2.png) [@Shashwat](https://forums.librehealth.io/u/Shashwat)\ **Post date:** [June 16, 2021, 7:22pm UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/4155/37 "2021-06-16T19:22:56Z")
> **[\[appointment\]: Create custom element for Schedule resource (#100) · Issues ·...](https://gitlab.com/librehealth/toolkit/lh-toolkit-webcomponents/-/issues/100)** > > The LibreHealth Toolkit Web Components based on HTML custom elements and implement the FHIR Resources @sunbiz I made a MR with some new components for this. ---
**Author:** ![sunbiz](https://forums.librehealth.io/user_avatar/forums.librehealth.io/sunbiz/32/395_2.png) [@sunbiz](https://forums.librehealth.io/u/sunbiz)\ **Post date:** [June 16, 2021, 7:45pm UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/4155/38 "2021-06-16T19:45:11Z")
> [@Shashwat](#): > > @sunbiz I made a MR with some new components for this. Thanks. I will review this one. I see a few draft MRs, which I assume are work-in-progress. ---
**Author:** ![Shashwat](https://forums.librehealth.io/user_avatar/forums.librehealth.io/shashwat/32/1914_2.png) [@Shashwat](https://forums.librehealth.io/u/Shashwat)\ **Post date:** [June 17, 2021, 1:38pm UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/4155/39 "2021-06-17T13:38:02Z")
> **[\[appointment\]: Create component for slot resource (#102) · Issues ·...](https://gitlab.com/librehealth/toolkit/lh-toolkit-webcomponents/-/issues/102)** @sunbiz I’ve created a MR for this. ---
**Author:** ![sunbiz](https://forums.librehealth.io/user_avatar/forums.librehealth.io/sunbiz/32/395_2.png) [@sunbiz](https://forums.librehealth.io/u/sunbiz)\ **Post date:** [June 18, 2021, 5:33am UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/4155/40 "2021-06-18T05:33:39Z")
I have merged this… In addition, thanks for the excellent find why some components aren’t working in the demo. Please create an issue and send an MR to fix it. ---
**Author:** ![Shashwat](https://forums.librehealth.io/user_avatar/forums.librehealth.io/shashwat/32/1914_2.png) [@Shashwat](https://forums.librehealth.io/u/Shashwat)\ **Post date:** [June 18, 2021, 9:47pm UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/4155/41 "2021-06-18T21:47:48Z")
[https://geforce6t.github.io/blog/2021/06/19/Week2/](https://geforce6t.github.io/blog/2021/06/19/Week2/) @sunbiz I’ll create the tests MR soon. ---
**Author:** ![Shashwat](https://forums.librehealth.io/user_avatar/forums.librehealth.io/shashwat/32/1914_2.png) [@Shashwat](https://forums.librehealth.io/u/Shashwat)\ **Post date:** [June 19, 2021, 7:08am UTC](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/4155/42 "2021-06-19T07:08:12Z")
> **[\[feat\]: add unit tests for appointment workflow components (!113) · Merge...](https://gitlab.com/librehealth/toolkit/lh-toolkit-webcomponents/-/merge_requests/113)** > > \#104 @sunbiz I’ve added the unit tests in this MR [Previous page](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/4155.md?page=1) [Next page](https://forums.librehealth.io/t/project-create-web-components-for-fhir-resources/4155.md?page=3)