diff options
author | Sebastian <sebasjm@gmail.com> | 2021-11-03 17:30:11 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2021-11-03 17:35:29 -0300 |
commit | a82b5a6992fda61d6eaa0bb079e284805a394777 (patch) | |
tree | 857168ae8c28d93253ec319708ae0818bd76c30f /packages/anastasis-webui/src/components | |
parent | 9fb6536fbc91adaf7a8a80860fcef5e1f80bfb3b (diff) | |
download | wallet-core-a82b5a6992fda61d6eaa0bb079e284805a394777.tar.xz |
feedback from meeting and editing policy
Diffstat (limited to 'packages/anastasis-webui/src/components')
5 files changed, 93 insertions, 32 deletions
diff --git a/packages/anastasis-webui/src/components/AsyncButton.tsx b/packages/anastasis-webui/src/components/AsyncButton.tsx new file mode 100644 index 000000000..5602715e4 --- /dev/null +++ b/packages/anastasis-webui/src/components/AsyncButton.tsx @@ -0,0 +1,51 @@ +/* + This file is part of GNU Taler + (C) 2021 Taler Systems S.A. + + GNU Taler is free software; you can redistribute it and/or modify it under the + terms of the GNU General Public License as published by the Free Software + Foundation; either version 3, or (at your option) any later version. + + GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY + WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR + A PARTICULAR PURPOSE. See the GNU General Public License for more details. + + You should have received a copy of the GNU General Public License along with + GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> + */ + +/** +* +* @author Sebastian Javier Marchano (sebasjm) +*/ + +import { ComponentChildren, h, VNode } from "preact"; +// import { LoadingModal } from "../modal"; +import { useAsync } from "../hooks/async"; +// import { Translate } from "../../i18n"; + +type Props = { + children: ComponentChildren; + disabled: boolean; + onClick?: () => Promise<void>; + [rest: string]: any; +}; + +export function AsyncButton({ onClick, disabled, children, ...rest }: Props): VNode { + const { isLoading, request } = useAsync(onClick); + + // if (isSlow) { + // return <LoadingModal onCancel={cancel} />; + // } + console.log(isLoading) + if (isLoading) { + + return <button class="button">Loading...</button>; + } + + return <span {...rest}> + <button class="button is-info" onClick={request} disabled={disabled}> + {children} + </button> + </span>; +} diff --git a/packages/anastasis-webui/src/components/fields/DateInput.tsx b/packages/anastasis-webui/src/components/fields/DateInput.tsx index 69a05fcf3..c406b85d1 100644 --- a/packages/anastasis-webui/src/components/fields/DateInput.tsx +++ b/packages/anastasis-webui/src/components/fields/DateInput.tsx @@ -1,4 +1,4 @@ -import { format } from "date-fns"; +import { format, isAfter, parse, sub, subYears } from "date-fns"; import { h, VNode } from "preact"; import { useLayoutEffect, useRef, useState } from "preact/hooks"; import { DatePicker } from "../picker/DatePicker"; @@ -19,16 +19,14 @@ export function DateInput(props: DateInputProps): VNode { inputRef.current?.focus(); } }, [props.grabFocus]); - const [opened, setOpened2] = useState(false) - function setOpened(v: boolean): void { - console.log('dale', v) - setOpened2(v) - } + const [opened, setOpened] = useState(false) const value = props.bind[0] || ""; const [dirty, setDirty] = useState(false) const showError = dirty && props.error + const calendar = subYears(new Date(), 30) + return <div class="field"> <label class="label"> {props.label} @@ -36,27 +34,37 @@ export function DateInput(props: DateInputProps): VNode { <i class="mdi mdi-information" /> </span>} </label> - <div class="control has-icons-right"> - <input - type="text" - class={showError ? 'input is-danger' : 'input'} - readonly - onFocus={() => { setOpened(true) } } - value={value} - ref={inputRef} /> - - <span class="control icon is-right"> - <span class="icon"><i class="mdi mdi-calendar" /></span> - </span> + <div class="control"> + <div class="field has-addons"> + <p class="control"> + <input + type="text" + class={showError ? 'input is-danger' : 'input'} + value={value} + onChange={(e) => { + const text = e.currentTarget.value + setDirty(true) + props.bind[1](text); + }} + ref={inputRef} /> + </p> + <p class="control"> + <a class="button" onClick={() => { setOpened(true) }}> + <span class="icon"><i class="mdi mdi-calendar" /></span> + </a> + </p> + </div> </div> + <p class="help">Using the format yyyy-mm-dd</p> {showError && <p class="help is-danger">{props.error}</p>} <DatePicker opened={opened} + initialDate={calendar} years={props.years} closeFunction={() => setOpened(false)} dateReceiver={(d) => { setDirty(true) - const v = format(d, 'yyyy/MM/dd') + const v = format(d, 'yyyy-MM-dd') props.bind[1](v); }} /> diff --git a/packages/anastasis-webui/src/components/menu/NavigationBar.tsx b/packages/anastasis-webui/src/components/menu/NavigationBar.tsx index e1bb4c7c0..935951ab9 100644 --- a/packages/anastasis-webui/src/components/menu/NavigationBar.tsx +++ b/packages/anastasis-webui/src/components/menu/NavigationBar.tsx @@ -49,7 +49,7 @@ export function NavigationBar({ onMobileMenu, title }: Props): VNode { </a> <div class="navbar-end"> <div class="navbar-item" style={{ paddingTop: 4, paddingBottom: 4 }}> - <LangSelector /> + {/* <LangSelector /> */} </div> </div> </div> diff --git a/packages/anastasis-webui/src/components/menu/SideBar.tsx b/packages/anastasis-webui/src/components/menu/SideBar.tsx index 35720e0f1..72655662f 100644 --- a/packages/anastasis-webui/src/components/menu/SideBar.tsx +++ b/packages/anastasis-webui/src/components/menu/SideBar.tsx @@ -39,9 +39,9 @@ export function Sidebar({ mobile }: Props): VNode { return ( <aside class="aside is-placed-left is-expanded"> - {mobile && <div class="footer" onClick={(e) => { return e.stopImmediatePropagation() }}> + {/* {mobile && <div class="footer" onClick={(e) => { return e.stopImmediatePropagation() }}> <LangSelector /> - </div>} + </div>} */} <div class="aside-tools"> <div class="aside-tools-label"> <div><b>Anastasis</b> Reducer</div> @@ -68,7 +68,7 @@ export function Sidebar({ mobile }: Props): VNode { <li class={reducer.currentReducerState.backup_state === BackupStates.ContinentSelecting || reducer.currentReducerState.backup_state === BackupStates.CountrySelecting ? 'is-active' : ''}> <div class="ml-4"> - <span class="menu-item-label"><Translate>Location & Currency</Translate></span> + <span class="menu-item-label"><Translate>Location</Translate></span> </div> </li> <li class={reducer.currentReducerState.backup_state === BackupStates.UserAttributesCollecting ? 'is-active' : ''}> @@ -85,7 +85,7 @@ export function Sidebar({ mobile }: Props): VNode { <li class={reducer.currentReducerState.backup_state === BackupStates.PoliciesReviewing ? 'is-active' : ''}> <div class="ml-4"> - <span class="menu-item-label"><Translate>Policies reviewing</Translate></span> + <span class="menu-item-label"><Translate>Policies</Translate></span> </div> </li> <li class={reducer.currentReducerState.backup_state === BackupStates.SecretEditing ? 'is-active' : ''}> @@ -94,12 +94,12 @@ export function Sidebar({ mobile }: Props): VNode { <span class="menu-item-label"><Translate>Secret input</Translate></span> </div> </li> - <li class={reducer.currentReducerState.backup_state === BackupStates.PoliciesPaying ? 'is-active' : ''}> + {/* <li class={reducer.currentReducerState.backup_state === BackupStates.PoliciesPaying ? 'is-active' : ''}> <div class="ml-4"> <span class="menu-item-label"><Translate>Payment (optional)</Translate></span> </div> - </li> + </li> */} <li class={reducer.currentReducerState.backup_state === BackupStates.BackupFinished ? 'is-active' : ''}> <div class="ml-4"> @@ -116,7 +116,7 @@ export function Sidebar({ mobile }: Props): VNode { <li class={reducer.currentReducerState.recovery_state === RecoveryStates.ContinentSelecting || reducer.currentReducerState.recovery_state === RecoveryStates.CountrySelecting ? 'is-active' : ''}> <div class="ml-4"> - <span class="menu-item-label"><Translate>Location & Currency</Translate></span> + <span class="menu-item-label"><Translate>Location</Translate></span> </div> </li> <li class={reducer.currentReducerState.recovery_state === RecoveryStates.UserAttributesCollecting ? 'is-active' : ''}> diff --git a/packages/anastasis-webui/src/components/picker/DatePicker.tsx b/packages/anastasis-webui/src/components/picker/DatePicker.tsx index 5b33fa8be..a94b3708e 100644 --- a/packages/anastasis-webui/src/components/picker/DatePicker.tsx +++ b/packages/anastasis-webui/src/components/picker/DatePicker.tsx @@ -24,6 +24,7 @@ import { h, Component } from "preact"; interface Props { closeFunction?: () => void; dateReceiver?: (d: Date) => void; + initialDate?: Date; years?: Array<number>; opened?: boolean; } @@ -213,8 +214,8 @@ export class DatePicker extends Component<Props, State> { // } } - constructor() { - super(); + constructor(props) { + super(props); this.closeDatePicker = this.closeDatePicker.bind(this); this.dayClicked = this.dayClicked.bind(this); @@ -226,11 +227,12 @@ export class DatePicker extends Component<Props, State> { this.toggleYearSelector = this.toggleYearSelector.bind(this); this.displaySelectedMonth = this.displaySelectedMonth.bind(this); + const initial = props.initialDate || now; this.state = { - currentDate: now, - displayedMonth: now.getMonth(), - displayedYear: now.getFullYear(), + currentDate: initial, + displayedMonth: initial.getMonth(), + displayedYear: initial.getFullYear(), selectYearMode: false } } |