From 82ff444cecfbc841d3fabd3ebdd0adb031f35f94 Mon Sep 17 00:00:00 2001 From: Paulus Schoutsen Date: Mon, 3 Feb 2020 08:53:57 -0800 Subject: [PATCH] Confirm when resetting hassio optoins (#4718) --- hassio/src/addon-view/hassio-addon-config.ts | 11 +++ src/dialogs/generic/show-dialog-box.ts | 78 +++++++++++++------- 2 files changed, 64 insertions(+), 25 deletions(-) diff --git a/hassio/src/addon-view/hassio-addon-config.ts b/hassio/src/addon-view/hassio-addon-config.ts index 95f821cfea..1a91052163 100644 --- a/hassio/src/addon-view/hassio-addon-config.ts +++ b/hassio/src/addon-view/hassio-addon-config.ts @@ -25,6 +25,7 @@ import { fireEvent } from "../../../src/common/dom/fire_event"; import "../../../src/components/ha-yaml-editor"; // tslint:disable-next-line: no-duplicate-imports import { HaYamlEditor } from "../../../src/components/ha-yaml-editor"; +import { showConfirmationDialog } from "../../../src/dialogs/generic/show-dialog-box"; @customElement("hassio-addon-config") class HassioAddonConfig extends LitElement { @@ -115,6 +116,16 @@ class HassioAddonConfig extends LitElement { } private async _resetTapped(): Promise { + const confirmed = await showConfirmationDialog(this, { + title: this.addon.name, + text: "Are you sure you want to reset all your options?", + confirmText: "reset options", + }); + + if (!confirmed) { + return; + } + this._error = undefined; const data: HassioAddonSetOptionParams = { options: null, diff --git a/src/dialogs/generic/show-dialog-box.ts b/src/dialogs/generic/show-dialog-box.ts index 1c573bb2ca..4d9975a6df 100644 --- a/src/dialogs/generic/show-dialog-box.ts +++ b/src/dialogs/generic/show-dialog-box.ts @@ -1,26 +1,32 @@ import { fireEvent } from "../../common/dom/fire_event"; -export interface AlertDialogParams { +interface BaseDialogParams { confirmText?: string; text?: string; title?: string; - confirm?: (out?: string) => void; } -interface ConfirmationDialogParams extends AlertDialogParams { +export interface AlertDialogParams extends BaseDialogParams { + confirm?: () => void; +} + +export interface ConfirmationDialogParams extends BaseDialogParams { dismissText?: string; + confirm?: () => void; cancel?: () => void; } -interface PromptDialogParams extends AlertDialogParams { +export interface PromptDialogParams extends BaseDialogParams { inputLabel?: string; inputType?: string; defaultValue?: string; + confirm?: (out?: string) => void; } export interface DialogParams extends ConfirmationDialogParams, PromptDialogParams { + confirm?: (out?: string) => void; confirmation?: boolean; prompt?: boolean; } @@ -28,35 +34,57 @@ export interface DialogParams export const loadGenericDialog = () => import(/* webpackChunkName: "confirmation" */ "./dialog-box"); +const showDialogHelper = ( + element: HTMLElement, + dialogParams: DialogParams, + extra?: { + confirmation?: DialogParams["confirmation"]; + prompt?: DialogParams["prompt"]; + } +) => + new Promise((resolve) => { + const origCancel = dialogParams.cancel; + const origConfirm = dialogParams.confirm; + + fireEvent(element, "show-dialog", { + dialogTag: "dialog-box", + dialogImport: loadGenericDialog, + dialogParams: { + ...dialogParams, + ...extra, + cancel: () => { + resolve(extra?.prompt ? null : false); + if (origCancel) { + origCancel(); + } + }, + confirm: (out) => { + resolve(extra?.prompt ? out : true); + if (origConfirm) { + origConfirm(out); + } + }, + }, + }); + }); + export const showAlertDialog = ( element: HTMLElement, dialogParams: AlertDialogParams -): void => { - fireEvent(element, "show-dialog", { - dialogTag: "dialog-box", - dialogImport: loadGenericDialog, - dialogParams, - }); -}; +) => showDialogHelper(element, dialogParams); export const showConfirmationDialog = ( element: HTMLElement, dialogParams: ConfirmationDialogParams -): void => { - fireEvent(element, "show-dialog", { - dialogTag: "dialog-box", - dialogImport: loadGenericDialog, - dialogParams: { ...dialogParams, confirmation: true }, - }); -}; +) => + showDialogHelper(element, dialogParams, { confirmation: true }) as Promise< + boolean + >; export const showPromptDialog = ( element: HTMLElement, dialogParams: PromptDialogParams -): void => { - fireEvent(element, "show-dialog", { - dialogTag: "dialog-box", - dialogImport: loadGenericDialog, - dialogParams: { ...dialogParams, prompt: true }, - }); -}; +) => + showDialogHelper(element, dialogParams, { prompt: true }) as Promise< + null | string + >;