Skip to content

Commit

Permalink
Qol 8091 pls plus address (#7)
Browse files Browse the repository at this point in the history
* fix builder bug
* update PlsPlusAddress
* fix duplication issue
* update package version
* update webpack and add binary assets
  • Loading branch information
devonpis authored Mar 17, 2022
1 parent b395142 commit 2822002
Show file tree
Hide file tree
Showing 8 changed files with 11,753 additions and 14,457 deletions.
10 changes: 4 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ You can consume this library either in Form.io Builder or Form.io Renderer.
To use custom components in the Form.io platform builder, please go to the [Project stage settings](https://help.form.io/userguide/projects#custom-js-and-css) and update the `Custom javascript` URL with the CDN URL of this library:

```
https://develop.dkbbbb129t0kf.amplifyapp.com/qg-formio.js
https://dev-static.qgov.net.au/formio-qld/v1/v1.x.x-latest/formio-qld.min.js
(This is a temporary URL for POC purpose, actual CDN URL still needs to be confirmed in production.)
```

Expand All @@ -73,11 +73,9 @@ To use custom components in the Form.io JS renderer, please include the script *
Pleaser refer to [Form.io doc](https://help.form.io/developers/form-renderer#getting-started) for how to initiate your form application in a HTML page.

```html
<link
rel="stylesheet"
href="https://unpkg.com/formiojs@latest/dist/formio.full.min.css"
/>
<script src="https://develop.dkbbbb129t0kf.amplifyapp.com/qg-formio.js"></script>
<script src="https://unpkg.com/formiojs@latest/dist/formio.full.js"></script>
...
<script src="https://dev-static.qgov.net.au/formio-qld/v1/v1.x.x-latest/formio-qld.min.js"></script>
(This is a temporary URL for POC purpose, actual CDN URL still needs to be
confirmed in production.)
```
26,049 changes: 11,638 additions & 14,411 deletions package-lock.json

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "qg-formio",
"version": "0.0.1",
"name": "formio-qld",
"version": "1.0.2",
"description": "",
"authors": {
"name": "Smart Service Queensland, Queensland Government",
Expand Down
47 changes: 32 additions & 15 deletions src/components/PlsPlusAddress/PlsPlusAddress.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const ContainerComponent = Formio.Components.components.container;
const Field = Formio.Components.components.field;
const NestedComponent = Formio.Components.components.nested;

export const PlsPlusAddressMode = {
const PlsPlusAddressMode = {
Autocomplete: "autocomplete",
Manual: "manual",
};
Expand All @@ -33,7 +33,7 @@ export class PlsPlusAddress extends ContainerComponent {
{
type: "plsplusaddress",
label: "Address",
key: "plsplusaddress",
key: "address",
switchToManualModeLabel: "Can't find address? Switch to manual mode.",
providerOptions: {},
manualModeViewString: "",
Expand All @@ -43,19 +43,22 @@ export class PlsPlusAddress extends ContainerComponent {
components: [
{
label: "Autocomplete address",
tableView: true,
persistent: false,
tableView: false,
key: "autocompleteAddress",
type: "hidden",
},
{
label: "Selected address",
tableView: true,
persistent: false,
tableView: false,
key: "selectedAddress",
type: "hidden",
},
{
label: "Address line 1 <i>(include unit number if needed)</i>",
tableView: true,
persistent: false,
tableView: false,
key: "address1",
type: "textfield",
input: true,
Expand All @@ -66,23 +69,26 @@ export class PlsPlusAddress extends ContainerComponent {
},
{
label: "Address line 2",
tableView: true,
persistent: false,
tableView: false,
key: "address2",
type: "textfield",
input: true,
validate: addressValidation,
},
{
label: "Address line 3",
tableView: true,
persistent: false,
tableView: false,
key: "address3",
type: "textfield",
input: true,
validate: addressValidation,
},
{
label: "Town, City or Suburb",
tableView: true,
persistent: false,
tableView: false,
key: "city",
type: "textfield",
input: true,
Expand All @@ -93,7 +99,8 @@ export class PlsPlusAddress extends ContainerComponent {
},
{
label: "State",
tableView: true,
persistent: false,
tableView: false,
key: "state",
type: "textfield",
input: true,
Expand All @@ -102,7 +109,8 @@ export class PlsPlusAddress extends ContainerComponent {
},
{
label: "Postcode",
tableView: true,
persistent: false,
tableView: false,
key: "postcode",
type: "textfield",
input: true,
Expand All @@ -128,7 +136,11 @@ export class PlsPlusAddress extends ContainerComponent {
icon: "home",
documentation: "/userguide/#address",
weight: 2,
schema: PlsPlusAddress.schema(),
// this is the tricky bit to get exception on duplicated keys in children components that belong to different nested components
// `tree: true` is needed for the exception, if it is defined in the schema, it will not pass to the submission data because it will fail the isDirty test (comparing defaultSchema and builder schema)
// as a solution `tree: true` need to define here instead
// https://github.com/formio/formio.js/blob/master/src/utils/formUtils.js#L89-L90
schema: { ...PlsPlusAddress.schema(), tree: true },
};
}

Expand All @@ -153,10 +165,11 @@ export class PlsPlusAddress extends ContainerComponent {

onChange(flags, fromRoot) {
if (this.autocompleteMode) {
this.dataValue.address.selectedAddress = this.address.autocompleteAddress;
} else {
if (this.dataValue?.address)
this.dataValue.address.selectedAddress =
this.address.autocompleteAddress;
} else if (this.dataValue?.address)
this.dataValue.address.selectedAddress = this.composedAddress;
}
return super.onChange(flags, fromRoot);
}

Expand Down Expand Up @@ -234,6 +247,10 @@ export class PlsPlusAddress extends ContainerComponent {
});
}

get isMultiple() {
return Boolean(this.component.multiple);
}

get address() {
return this.manualModeEnabled && this.dataValue
? this.dataValue.address
Expand All @@ -253,7 +270,7 @@ export class PlsPlusAddress extends ContainerComponent {
}

get defaultSchema() {
return PlsPlusAddress.schema();
return { ...PlsPlusAddress.schema(), tree: "true" };
}

isValueInLegacyFormat(value) {
Expand Down
1 change: 1 addition & 0 deletions src/components/PlsPlusAddress/PlsPlusAddress.stories.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@ You can preview the component's settings in the example below.
type: "plsplusaddress",
key: "plsplusaddress",
label: "PlsPlus Address field",
tree: true,
providerOptions: {
params: {
apiKey: "formiotest",
Expand Down
85 changes: 70 additions & 15 deletions src/index.js
Original file line number Diff line number Diff line change
@@ -1,22 +1,77 @@
import "core-js/stable";
import "regenerator-runtime/runtime";
import buildOptions from "./options/build.options";
import { getComponents } from "./utils/getComponents";
import * as components from "./components";
import templates from "./templates";
import providers from "./providers";
import { getComponents } from "./utils/getComponents";

const components = typeof Formio !== "undefined" ? require("./components") : {};
Formio.use({
components: getComponents(components),
templates,
providers,
options: buildOptions,
});

// let waitCount = 0;

// const wait = (props) => {
// const {
// condition,
// callback,
// interval = 100,
// timeout = 10000,
// timeoutCallback,
// } = props;
// waitCount += interval;
// if (typeof condition() !== "undefined") {
// callback();
// } else if (timeout && waitCount >= timeout) {
// timeoutCallback();
// } else {
// setTimeout(() => {
// wait(props);
// }, interval);
// }
// };

if (typeof Formio !== "undefined") {
// loop through the component folder index.js and add components to Formio for renderer and builder
Formio.use({
components: getComponents(components),
templates,
providers,
options: buildOptions,
});
} else {
console.warn(
"qg-formio.js requires Formio script included in this page. Please refer to https://qld-gov-au.github.io/formio/?path=/docs/welcome--page for usage."
);
}
// wait({
// condition: () => {
// return Formio;
// },
// callback: async () => {
// const [
// componentsModule,
// templatesModule,
// providersModule,
// getComponentsModule,
// ] = await Promise.all([
// import("./components"),
// import("./templates"),
// import("./providers"),
// import("./utils/getComponents"),
// ]);
// const { ...components } = componentsModule;
// const templates = templatesModule.default;
// const providers = providersModule.default;
// const { getComponents } = getComponentsModule;
// console.log(
// "test444",
// Formio,
// getComponents(components),
// templates,
// providers
// );
// Formio.use({
// components: getComponents(components),
// templates,
// providers,
// options: buildOptions,
// });
// },
// timeoutCallback: () => {
// console.warn(
// "formio.full.min.js requires Formio script included in this page. Please refer to https://qld-gov-au.github.io/formio/?path=/docs/welcome--page for usage."
// );
// },
// });
10 changes: 4 additions & 6 deletions src/stories/Welcome.stories.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ You can consume this library either in Form.io Builder or Form.io Renderer.
To use custom components in the Form.io platform builder, please go to the [Project stage settings](https://help.form.io/userguide/projects#custom-js-and-css) and update the `Custom javascript` URL with the CDN URL of this library:

```
https://develop.dkbbbb129t0kf.amplifyapp.com/qg-formio.js
https://dev-static.qgov.net.au/formio-qld/v1/v1.x.x-latest/formio-qld.min.js
(This is a temporary URL for POC purpose, actual CDN URL still needs to be confirmed in production.)
```

Expand All @@ -31,11 +31,9 @@ To use custom components in the Form.io JS renderer, please include the script *
Pleaser refer to [Form.io doc](https://help.form.io/developers/form-renderer#getting-started) for how to initiate your form application in a HTML page.

```html
<link
rel="stylesheet"
href="https://unpkg.com/formiojs@latest/dist/formio.full.min.css"
/>
<script src="https://develop.dkbbbb129t0kf.amplifyapp.com/qg-formio.js"></script>
<script src="https://unpkg.com/formiojs@latest/dist/formio.full.js"></script>
...
<script src="https://dev-static.qgov.net.au/formio-qld/v1/v1.x.x-latest/formio-qld.min.js"></script>
(This is a temporary URL for POC purpose, actual CDN URL still needs to be
confirmed in production.)
```
4 changes: 2 additions & 2 deletions webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ module.exports = {
entry: path.resolve(__dirname, "src/index.js"),
output: {
path: path.resolve(__dirname, "dist"),
filename: "qg-formio.js",
library: "qgFormio",
filename: "formio-qld.min.js",
library: "FormioQld",
libraryTarget: "umd",
},
module: {
Expand Down

0 comments on commit 2822002

Please sign in to comment.