Project: Web Components for FHIR Resources

toolkit
gsoc2018-project
gsoc2018

(Subhashinie) #41

Okay… I’ll continue with the material components.


(Namratanehete) #42

I also agree to use material components.


(Subhashinie) #43

I temporarily created a github repository to store what I have done upto now. It currently contains a few partially complete components for the schedule resource and a basic demo. Below is the demo using those components. Did not add the FHIR functionality yet. I guess the documentation of “dom-repeat” have not yet been updated for polymer 3.0. Until I figure that out, I’ll be working on schedule-add component and the components for Appointment this week, while improving the components shown below.


(Parvati Ravindranathan Naliyatthaliyazchayil) #44

Hello @sunbiz, @namratanehete, @judywawira I have made the blog post of this week where I have written about the components I worked on the past week and its functionalities. Would like to request you to give suggestions if something doesn’t seem correct.


(Art Eaton) #45

I am not going to sign up for Medium, but pretend a whole lot of clapping was added. In the meantime, add a really cool rock riff as background music.

  "I was working just yesterday", "But I just bought it.", "My cousin said that can't be the problem."  Yeah.  No shortcuts, and sometimes you have to backtrack to get your eyeglasses and lunch-box.

  -Excellent patience for the patients.  One component at a time.  Now, you can just script the implementation of one, run a quick compile and just have all the rest done in a few minutes..

…or just keep plugging away…

  Two weeks in, and you have something that WORKS.  That is awesome!

(Subhashinie) #46

Those who are building web components, how did you take input through the material web component “textfiled” (mwc-textfield)? This was what I tried. When the native “input” and “mwc-textfield” were given inputs and the button is clicked, only the input from the native can be printed in the console. Here the button simply logs the value of the attribute “inputValue” in the console. The material “textfield” only logs an empty string. Was anyone able to work that out?


(Saptarshi Purkayastha) #47

It is the usual <input> way. Just use the value property to get/set the value in the mwc-textfield. Whats the error that you are receiving?

I will soon be posting here - https://gitlab.com/librehealth/toolkit/lh-toolkit-webcomponents , an example custom element, unit test and packing scripts that I suggest both of you fork, clone and then follow as a pattern for other custom elements. Please send Merge Requests from your fork, when you have created new custom elements.


(Subhashinie) #48

It does not give an error regarding that, not in the browser console or in the cmd terminal. When I type in both “input” and “mwc-textfield” and click the button which prints the received values in the console, text from “input” is printed and text from “mwc-textfield” is not. It only a blank space is printed. It is not the initially assigned value either. This is my code.

import {LitElement, html} from '@polymer/lit-element';
import {Button} from "@material/mwc-button";
import {Textfield} from "@material/mwc-textfield";

/**
 * `lhwc-search-with-options element`
 * web component for all FHIR resources
 */
class SearchWithOptions extends LitElement {
    constructor() {
        super();
        this.inputValue = "";
        this.inputValue2 = "a";
        this.optionSelected = "";
    }

    static get properties() {
	    return {
	        inputValue: String,
	        inputValue2: String,
                optionSelected: String,
	        inputLabel: String,
	        optionsToSelect: Object
	    }
    };

    _render({inputLabel, optionsToSelect}) {
        var optionsArr = JSON.parse(optionsToSelect);
        return html`
            <style>
             .search-input {
                width: 180px;
             }
             .search-gap-tiny {
                margin-left: 5px;
             }
            </style>
            <label class="search-gap-tiny" for="search-input">${inputLabel}</label>
            <input class="search-input" id="search-input"
                on-input=${e => this.inputValue = e.target.value}></input>
            <mwc-textfield on-input=${e => this.inputValue2 = e.target.value}></mwc-textfield>

            <select class="search-gap-tiny" id="search-select">
                ${optionsArr.map((i) => html`<option value$=${i.id}>${i.name}</option>`)}
            </select>
            <mwc-button class="search-gap-tiny" raised label="Search"
                on-click=${() => this.showTheInput()}>
            </mwc-button>
        `;
    }

    showTheInput() {
        console.log(this.inputValue);
        console.log(this.inputValue2);
    }
}

window.customElements.define('lhwc-search-with-options', SearchWithOptions);

This is the output.


(Subhashinie) #49

Until we find a workaround for this or material web components releases “textfield” in npm, is it okay if I continue with the native “input”, then later replace all the “inputs” with “mwc-textfields”? Or is it better to continue with “mwc-textfield” from now itself?


(Subhashinie) #50

This is my blog post for coding week 2 & 3. I built a component named . It is just like the component that is in the librehealth repo. I am currently adding the tests.


(Saptarshi Purkayastha) #51

I wrote to you in chat, but I will write here again. Do you have a repo where I can look at this and other code. I dont understand what do you mean by received text is not printed. I am not sure I understand why you have used the arrow functions on the mwc-button on-click.


(Subhashinie) #52

I just made a commit including,

The code tries to print input from all three into the console. This is the link to the repository : https://github.com/SuKSW/lh-web-components . I used the arrow functions because the other way did not work for me. I thought maybe it was different in LitElements compared to PolymerElements. Also using arrow functions worked.

The code for the new component as mention in the blog post is in : https://gitlab.com/SuKSW/lh-toolkit-webcomponents/tree/newcomponent . It is a fork of the main repo but not in the master branch.

Regarding the reply I got in the chat, I am sorry. Truly didn’t see it. I also left a reply there.


(Subhashinie) #53

Oh… the arrow functions can be found here also : https://github.com/Polymer/lit-element/blob/master/README.md


(Saptarshi Purkayastha) #54

Can I request you to follow the convention that is in the lh-toolkit-webcomponents branch? Please look at the merge that I did from @parumenon1 where she is using mwc-textfield without any issues.

Also, I changed the build tool a little, since it is inefficient to have to go to each package folder and having to run npm install in it. So, I have added a lerna script to use yarn as the default npm client. So, you will need to install yarn too. All the details are in README.


(Subhashinie) #55

@sunbiz Regarding the coding convention, I almost duplicated the component fhir-period exactly as it was :smiley: , an changed the functionality while changing fhir-period to fhir-coding. Hope the component I bulit is according to the coding convention.

Regarding mwc-textfield, as I noticed, @parumenon1 has not yet started to work on taking inputs from the user. When I asked her last week she told that will be working on the POST requests starting this week. @parumenon1 If you have already a component that takes input from the user and posts it to the FHIR server, could you give me a link to it?

I’ll change my “inputs” too to “mwc-textfields” and continue working on, adding GET request response data into those fields as well. So later we can add the POST functionality to those components as well.

Thanks you. We’'ll follow the instructions in the README contributing guide.


(Saptarshi Purkayastha) #56

The unit tests are taking value from the <mwc-textfield>. Please use the “value” property, just like you can from the <input>.


(Subhashinie) #57

I checked her test code. She uses a “text-fixture” element. Within the test() function she have something like this:

var name = fixture('DefaultElemnt'); 

Then when adding the event listener to “name”,

var firstName = name.shadowRoot.querySelector('.fName').value;

Therefore I tried accessing value with

document.getElementById("class-of-the-textfield").value
document.getElementById("text-field").value //id used for the input inside textfield
document.querySelector('element-name').shadowRoot.querySelector('.class-of-textfield').value
document.querySelector('.class-of-textfield').value
document.querySelector('element-name').shadowRoot.querySelector('mwc-textfield').shadowRoot.querySelector('.class-of-textfield').value

that did not work either. @parumenon1 tell me when you find a solution.


(Parvati Ravindranathan Naliyatthaliyazchayil) #58

I am on it this week. Will put it up as soon as I finish one. As of now, I dont have an example. I was working to get all my components into the repo until yesterday. But I think the POST part comes up on the whole page and not a component. Page refers to assembling components I suppose, which I was supposed to start working after first evaluations. So, I think you can go ahead and do GET for your components just like I did and put POST aside for now as its part of Bigger components/page. Pls correct me if I am wrong @sunbiz


(Subhashinie) #59

Eureka!!! The value can be accessed like this : e.target._input.value. This is how it works :

<mwc-textfield on-input=${e => this.inputValue2 = e.target._input.value}></mwc-textfield> 

Found it here: https://github.com/material-components/material-components-web-components/issues/48

It was not the POST I was worried about. I couldn’t take inputs from the granular components to the top level ones. The ones who are writing mwc-testfield are also trying to give a better solution. However… problem solved.


(Parvati Ravindranathan Naliyatthaliyazchayil) #60

@SuKSW you were correct. Even I am using the same it in same way now using “._input.value”