Commit f996eaa8 authored by Muhammad Kamran's avatar Muhammad Kamran

created positive int component

parent 70b3d07e
<!doctype html>
<html>
<head>
<title>
<fhir-positiveint>demo
</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
<script type="module" src="../node_modules/@lh-toolkit/fhir-positiveint/fhir-positiveint.js"></script>
</head>
<body>
<p>
<h1>Default element without passing url</h1>
<fhir-positiveint></fhir-positiveint>
</p>
<p>
<h1>Default element without passing url with JSON</h1>
<fhir-positiveint value="2"></fhir-positiveint>
</p>
<p>
<p>
<h1>Default element when url is passed for patient 2</h1>
<fhir-positiveint url="http://hapi.fhir.org/baseDstu3/Patient/2"></fhir-positiveint>
</p>
</body>
</html>
......@@ -59,6 +59,7 @@
<li><a href="demos/fhir-searchbox.html">fhir-searchbox</a> </li>
<li><a href="demos/fhir-appointment-status.html">fhir-appointment-status</a> </li>
<li><a href="demos/fhir-instant.html">fhir-instant</a> </li>
<li><a href="demos/fhir-positiveInt.html">fhir-positiveInt</a> </li>
</ul>
<h6>*If you don't see the elements after clicking on the link, you probably forgot
to do: <code>lerna bootstrap --use-workspaces</code></h6>
......
......@@ -58,7 +58,7 @@ class FhirInstant extends LitElement {
<div id="instantDiv">
${instant !== 'false'
? html`
<mwc-formfield class="instant" alignEnd label="DATE OF BIRTH:">
<mwc-formfield class="instant" alignEnd label="Date Time:">
<input
id="date"
type="datetime-local"
......
# fhir-positiveInt
The fhir-positiveInt adds input date to the page that displays the positiveInt. It is commonly used
as a form field. It uses number input and iron-ajax.
### Functionality
Default : shows an empty date input field for `display`
######a. GET:
- It displays date time when it receives a value. `value` can be passed as a string.
- It can also receive value from a 'url' which can be passed as property "url". The `positiveInt` key value is checked for in key-value pair of data.
- Setting `positiveInt` property as true or false can help show and hide this component.
######b. SET:
- An input of date value is taken as its value and used for posting purposes.
### Properties of fhir-positiveInt
- `value`:`String` - used to take the input value of each field.
- `url`:`String` - used to make AJAX call to FHIR resource. Default: null.
- `positiveInt`:`String` - used to shows the field. Use this property to show/hide. Default: true.
### License
Mozilla Public License, v. 2.0.
### Typical Use:
1. Import on the page.
2. Use the below tags:
- With url:
`<fhir-allergy-positiveInt url=""></fhir-allergy-positiveInt>`
- Without url:
`<fhir-allergy-positiveInt></fhir-allergy-positiveInt>`
/**
@license
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/
/**
* `<fhir-positiveInt>` adds input number to the page. Uses input type number with only positive numbers.
* In typical use, just use `<fhir-positive-int url=""></fhir-positive-int>`
* @customElement
* @polymer
* @demo https://librehealth.gitlab.io/toolkit/lh-toolkit-webcomponents/demos/fhir-positiveInt.html
*
*/
import { LitElement, html } from '@polymer/lit-element/lit-element.js';
import '@material/mwc-formfield/mwc-formfield.js';
import '@polymer/iron-ajax/iron-ajax.js';
class FhirPositiveInt extends LitElement {
static get properties() {
return {
/**positiveInt is used to show persons date of birth. Use this property to show/hide. Default: true */
positiveInt: String,
/**url is used to make AJAX call to FHIR resource. Default: null */
url: String,
/**value is used to take the input value of each field*/
value: String
};
}
constructor() {
super();
this.positiveInt = 'true';
this.value = '';
}
/**_didRender() delivers only after _render*/
_didRender() {
this.shadowRoot
.getElementById('ajax')
.addEventListener('iron-ajax-response', function(e) {
var positiveInt = this.parentNode.host;
if (e.detail.response.positiveInt !== undefined) {
positiveInt.shadowRoot.querySelector('.positiveInt').value = 1;
} else {
this.parentNode.removeChild(
this.parentNode.querySelector('#positiveIntDiv')
);
}
});
}
_render({ positiveInt, url, value }) {
return html`
<div id="positiveIntDiv">
${positiveInt !== 'false'
? html`
<mwc-formfield class="positiveInt" alignEnd label="Positive Int:">
<input
id="positiveInt"
type="number"
min="0"
value="${this.value}"
on-input="${e => (this.value = e.target.value)}"
/>
</mwc-formfield>
`
: ''}
</div>
<iron-ajax
id="ajax"
bubbles
auto
handle-as="json"
url="${url}"
></iron-ajax>
`;
}
}
window.customElements.define('fhir-positiveint', FhirPositiveInt);
{
"name": "@lh-toolkit/fhir-positiveint",
"version": "0.0.1",
"description": "The custom element for is used to put in or receive positiveInt",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "https://gitlab.com/librehealth/toolkit/lh-toolkit-webcomponents.git"
},
"license": "MPL-2.0",
"dependencies": {
"@polymer/lit-element": "^0.5.1",
"@material/mwc-formfield": "^0.6.0",
"moment": "2.18.1",
"@polymer/iron-ajax": "^3.0.0-pre.19"
},
"publishConfig": {
"access": "public"
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment