diff options
Diffstat (limited to 'packages/frontend/src/components/form')
4 files changed, 34 insertions, 19 deletions
diff --git a/packages/frontend/src/components/form/InputArray.tsx b/packages/frontend/src/components/form/InputArray.tsx index 5314eba..13800c7 100644 --- a/packages/frontend/src/components/form/InputArray.tsx +++ b/packages/frontend/src/components/form/InputArray.tsx @@ -65,7 +65,7 @@ export function InputArray<T>({ name, readonly, placeholder, tooltip, label, hel onChange={(e): void => setCurrentValue(e.currentTarget.value)} /> </p> <p class="control"> - <button class="button is-info" disabled={!currentValue} onClick={(): void => { + <button class="button is-info has-tooltip-left" disabled={!currentValue} onClick={(): void => { const v = fromStr(currentValue) if (!isValid(v)) { setLocalError(i18n`The value ${v} is invalid for a payment url`) @@ -74,7 +74,7 @@ export function InputArray<T>({ name, readonly, placeholder, tooltip, label, hel setLocalError(null) onChange([v, ...array] as any); setCurrentValue(''); - }}><Translate>add</Translate></button> + }} data-tooltip={i18n`add element to the list`}><Translate>add</Translate></button> </p> </div> {help} diff --git a/packages/frontend/src/components/form/InputSecured.tsx b/packages/frontend/src/components/form/InputSecured.tsx index 7d8d655..7f871c7 100644 --- a/packages/frontend/src/components/form/InputSecured.tsx +++ b/packages/frontend/src/components/form/InputSecured.tsx @@ -20,7 +20,7 @@ */ import { Fragment, h, VNode } from "preact"; import { useState } from "preact/hooks"; -import { Translate } from "../../i18n"; +import { Translate, useTranslator } from "../../i18n"; import { InputProps, useField } from "./useField"; export type Props<T> = InputProps<T>; @@ -41,6 +41,8 @@ export function InputSecured<T>({ name, readonly, placeholder, tooltip, label, h const [active, setActive] = useState(false); const [newValue, setNuewValue] = useState("") + const i18n = useTranslator() + return <Fragment> <div class="field is-horizontal"> <div class="field-label is-normal"> @@ -55,7 +57,8 @@ export function InputSecured<T>({ name, readonly, placeholder, tooltip, label, h {!active ? <Fragment> <div class="field has-addons"> - <button class="button" onClick={(): void => { setActive(!active); }} > + <button class="button" + onClick={(): void => { setActive(!active); }} > <div class="icon is-left"><i class="mdi mdi-lock-reset" /></div> <span><Translate>Manage access token</Translate></span> </button> diff --git a/packages/frontend/src/components/form/InputStock.tsx b/packages/frontend/src/components/form/InputStock.tsx index b323012..a9200cd 100644 --- a/packages/frontend/src/components/form/InputStock.tsx +++ b/packages/frontend/src/components/form/InputStock.tsx @@ -87,9 +87,13 @@ export function InputStock<T>({ name, readonly, placeholder, tooltip, label, hel <div class="field-body is-flex-grow-3"> <div class="field has-addons"> {!alreadyExist ? - <button class="button" onClick={(): void => { valueHandler({ current: 0, lost: 0, sold: 0 } as Stock as any); }} > + <button class="button" + data-tooltip={i18n`click here to configure the stock of the product, leave it as is and the backend will not control stock`} + onClick={(): void => { valueHandler({ current: 0, lost: 0, sold: 0 } as Stock as any); }} > <span><Translate>Manage stock</Translate></span> - </button> : <button class="button" disabled > + </button> : <button class="button" + data-tooltip={i18n`this product has been configured without stock control`} + disabled > <span><Translate>Infinite</Translate></span> </button> } @@ -144,7 +148,9 @@ export function InputStock<T>({ name, readonly, placeholder, tooltip, label, hel </Fragment> : <InputNumber<Entity> name="current" label={i18n`Current`} side={ - <button class="button is-danger" onClick={(): void => { valueHandler(undefined as any) }} > + <button class="button is-danger" + data-tooltip={i18n`remove stock control for this product`} + onClick={(): void => { valueHandler(undefined as any) }} > <span><Translate>without stock</Translate></span> </button> } diff --git a/packages/frontend/src/components/form/InputTaxes.tsx b/packages/frontend/src/components/form/InputTaxes.tsx index af1dddd..91bbf85 100644 --- a/packages/frontend/src/components/form/InputTaxes.tsx +++ b/packages/frontend/src/components/form/InputTaxes.tsx @@ -38,18 +38,21 @@ export function InputTaxes<T>({ name, readonly, label }: Props<keyof T>): VNode const { value: taxes, onChange, } = useField<T>(name); const [value, valueHandler] = useState<Partial<Entity>>({}) - const [errors, setErrors] = useState<FormErrors<Entity>>({}) + // const [errors, setErrors] = useState<FormErrors<Entity>>({}) + + let errors: FormErrors<Entity> = {} + + try { + schema.validateSync(value, { abortEarly: false }) + } catch (err) { + const yupErrors = err.inner as yup.ValidationError[] + errors = yupErrors.reduce((prev, cur) => !cur.path ? prev : ({ ...prev, [cur.path]: cur.message }), {}) + } + const hasErrors = Object.keys(errors).some(k => (errors as any)[k] !== undefined) const submit = useCallback((): void => { - try { - schema.validateSync(value, { abortEarly: false }) - onChange([value as any, ...taxes] as any) - valueHandler({}) - } catch (err) { - const errors = err.inner as yup.ValidationError[] - const pathMessages = errors.reduce((prev, cur) => !cur.path ? prev : ({ ...prev, [cur.path]: cur.message }), {}) - setErrors(pathMessages) - } + onChange([value as any, ...taxes] as any) + valueHandler({}) }, [value]) const i18n = useTranslator() @@ -78,10 +81,13 @@ export function InputTaxes<T>({ name, readonly, label }: Props<keyof T>): VNode <Translate>currency and value separated with colon</Translate> <b>USD:2.3</b> </Input> - <Input<Entity> name="name" label={i18n`Name`} /> + <Input<Entity> name="name" label={i18n`Description`} /> <div class="buttons is-right mt-5"> - <button class="button is-info" onClick={submit}><Translate>Add</Translate></button> + <button class="button is-info" + data-tooltip={i18n`add tax to the tax list`} + disabled={hasErrors} + onClick={submit}><Translate>Add</Translate></button> </div> </FormProvider> </InputGroup> |