mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-11 11:26:35 +00:00
Handle defaults, required and optional fields (#1662)
* Handle defaults, required and optional fields * Lint
This commit is contained in:
parent
cfbf2903c1
commit
6c262c20ce
@ -1,6 +1,7 @@
|
|||||||
import '@polymer/paper-button/paper-button.js';
|
import '@polymer/paper-button/paper-button.js';
|
||||||
import '@polymer/paper-dialog-scrollable/paper-dialog-scrollable.js';
|
import '@polymer/paper-dialog-scrollable/paper-dialog-scrollable.js';
|
||||||
import '@polymer/paper-dialog/paper-dialog.js';
|
import '@polymer/paper-dialog/paper-dialog.js';
|
||||||
|
import '@polymer/paper-tooltip/paper-tooltip.js';
|
||||||
import '@polymer/paper-spinner/paper-spinner.js';
|
import '@polymer/paper-spinner/paper-spinner.js';
|
||||||
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
|
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
|
||||||
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
|
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
|
||||||
@ -76,6 +77,7 @@ class HaConfigFlow extends
|
|||||||
|
|
||||||
<ha-form
|
<ha-form
|
||||||
data="{{_stepData}}"
|
data="{{_stepData}}"
|
||||||
|
on-data-changed='_increaseCounter'
|
||||||
schema="[[_step.data_schema]]"
|
schema="[[_step.data_schema]]"
|
||||||
error="[[_step.errors]]"
|
error="[[_step.errors]]"
|
||||||
compute-label="[[_computeLabelCallback(localize, _step)]]"
|
compute-label="[[_computeLabelCallback(localize, _step)]]"
|
||||||
@ -96,7 +98,17 @@ class HaConfigFlow extends
|
|||||||
<div class='submit-spinner'><paper-spinner active></paper-spinner></div>
|
<div class='submit-spinner'><paper-spinner active></paper-spinner></div>
|
||||||
</template>
|
</template>
|
||||||
<template is="dom-if" if="[[!_loading]]">
|
<template is="dom-if" if="[[!_loading]]">
|
||||||
<paper-button on-click="_submitStep">Submit</paper-button>
|
<div>
|
||||||
|
<paper-button
|
||||||
|
on-click="_submitStep"
|
||||||
|
disabled='[[!_canSubmit]]'
|
||||||
|
>Submit</paper-button>
|
||||||
|
<template is='dom-if' if='[[!_canSubmit]]'>
|
||||||
|
<paper-tooltip position="left">
|
||||||
|
Not all required fields are filled in.
|
||||||
|
</paper-tooltip>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
@ -118,6 +130,17 @@ class HaConfigFlow extends
|
|||||||
// Error message when can't talk to server etc
|
// Error message when can't talk to server etc
|
||||||
_errorMsg: String,
|
_errorMsg: String,
|
||||||
|
|
||||||
|
_canSubmit: {
|
||||||
|
type: Boolean,
|
||||||
|
computed: '_computeCanSubmit(_step, _stepData, _counter)'
|
||||||
|
},
|
||||||
|
|
||||||
|
// Bogus counter because observing of `_stepData` doesn't seem to work
|
||||||
|
_counter: {
|
||||||
|
type: Number,
|
||||||
|
value: 0,
|
||||||
|
},
|
||||||
|
|
||||||
_opened: {
|
_opened: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
value: false,
|
value: false,
|
||||||
@ -131,7 +154,10 @@ class HaConfigFlow extends
|
|||||||
/*
|
/*
|
||||||
* Store user entered data.
|
* Store user entered data.
|
||||||
*/
|
*/
|
||||||
_stepData: Object,
|
_stepData: {
|
||||||
|
type: Object,
|
||||||
|
value: null,
|
||||||
|
}
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -175,7 +201,17 @@ class HaConfigFlow extends
|
|||||||
|
|
||||||
const curInstance = this._instance;
|
const curInstance = this._instance;
|
||||||
|
|
||||||
this.hass.callApi('post', `config/config_entries/flow/${this._step.flow_id}`, this._stepData)
|
const data = {};
|
||||||
|
Object.keys(this._stepData).forEach((key) => {
|
||||||
|
const value = this._stepData[key];
|
||||||
|
const isEmpty = [undefined, ''].includes(value);
|
||||||
|
|
||||||
|
if (!isEmpty) {
|
||||||
|
data[key] = value;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
this.hass.callApi('post', `config/config_entries/flow/${this._step.flow_id}`, data)
|
||||||
.then(
|
.then(
|
||||||
(step) => {
|
(step) => {
|
||||||
if (curInstance !== this._instance) return;
|
if (curInstance !== this._instance) return;
|
||||||
@ -194,8 +230,14 @@ class HaConfigFlow extends
|
|||||||
if (!step.errors) step.errors = {};
|
if (!step.errors) step.errors = {};
|
||||||
this._step = step;
|
this._step = step;
|
||||||
// We got a new form if there are no errors.
|
// We got a new form if there are no errors.
|
||||||
if (Object.keys(step.errors).length === 0) {
|
if (step.type === 'form' && Object.keys(step.errors).length === 0) {
|
||||||
this._stepData = {};
|
const data = {};
|
||||||
|
step.data_schema.forEach((field) => {
|
||||||
|
if ('default' in field) {
|
||||||
|
data[field.name] = field.default;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
this._stepData = data;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -255,6 +297,17 @@ class HaConfigFlow extends
|
|||||||
// Returns a callback for ha-form to calculate error messages
|
// Returns a callback for ha-form to calculate error messages
|
||||||
return error => localize(`component.${step.handler}.config.error.${error}`);
|
return error => localize(`component.${step.handler}.config.error.${error}`);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
_computeCanSubmit(step, stepData) {
|
||||||
|
// We can submit if all required fields are filled in
|
||||||
|
return step !== null && step.type === 'form' && stepData !== null &&
|
||||||
|
step.data_schema.every(field =>
|
||||||
|
field.optional || !['', undefined].includes(stepData[field.name]));
|
||||||
|
}
|
||||||
|
|
||||||
|
_increaseCounter() {
|
||||||
|
this._counter += 1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
customElements.define('ha-config-flow', HaConfigFlow);
|
customElements.define('ha-config-flow', HaConfigFlow);
|
||||||
|
Loading…
x
Reference in New Issue
Block a user