open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve edit close date UI

Browse Source
This commit is contained in:
James Grugett 2022-08-28 00:35:22 -05:00
parent 03e07037ea
commit 7c798a063c
1 changed files with 25 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
web/components/contract/contract-details.tsx
View File

@ -191,7 +191,7 @@ export function ContractDetails(props: {
<Row> <Row>
<Button <Button
size={'xs'} size={'xs'}
className={'max-w-[200px] pr-1'} className={'max-w-[200px] pr-2'}
color={'gray-white'} color={'gray-white'}
onClick={() => onClick={() =>
groupToDisplay groupToDisplay
@ -203,11 +203,10 @@ export function ContractDetails(props: {
</Button> </Button>
<Button <Button
size={'xs'} size={'xs'}
className={'!px-2'}
color={'gray-white'} color={'gray-white'}
onClick={() => setOpen(!open)} onClick={() => setOpen(!open)}
> >
<PencilIcon className="inline h-5 w-5 shrink-0" /> <PencilIcon className="mb-0.5 mr-0.5 inline h-4 w-4 shrink-0" />
</Button> </Button>
</Row> </Row>
)} )}
@ -277,14 +276,22 @@ function EditableCloseDate(props: {
const [isEditingCloseTime, setIsEditingCloseTime] = useState(false) const [isEditingCloseTime, setIsEditingCloseTime] = useState(false)
const [closeDate, setCloseDate] = useState( const [closeDate, setCloseDate] = useState(
closeTime && dayJsCloseTime.format('YYYY-MM-DDTHH:mm') closeTime && dayJsCloseTime.format('YYYY-MM-DD')
) )
const [closeHoursMinutes, setCloseHoursMinutes] = useState(
closeTime && dayJsCloseTime.format('HH:mm')
)
const newCloseTime = closeDate
? dayjs(`${closeDate}T${closeHoursMinutes}`).valueOf()
: undefined
const isSameYear = dayJsCloseTime.isSame(dayJsNow, 'year') const isSameYear = dayJsCloseTime.isSame(dayJsNow, 'year')
const isSameDay = dayJsCloseTime.isSame(dayJsNow, 'day') const isSameDay = dayJsCloseTime.isSame(dayJsNow, 'day')
const onSave = () => { const onSave = () => {
const newCloseTime = dayjs(closeDate).valueOf() if (!newCloseTime) return
if (newCloseTime === closeTime) setIsEditingCloseTime(false) if (newCloseTime === closeTime) setIsEditingCloseTime(false)
else if (newCloseTime > Date.now()) { else if (newCloseTime > Date.now()) {
const content = contract.description const content = contract.description
@ -309,16 +316,24 @@ function EditableCloseDate(props: {
return ( return (
<> <>
{isEditingCloseTime ? ( {isEditingCloseTime ? (
<div className="form-control mr-1 items-start"> <Row className="mr-1 items-start">
<input <input
type="datetime-local" type="date"
className="input input-bordered" className="input input-bordered"
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
onChange={(e) => setCloseDate(e.target.value || '')} onChange={(e) => setCloseDate(e.target.value)}
min={Date.now()} min={Date.now()}
value={closeDate} value={closeDate}
/> />
</div> <input
type="time"
className="input input-bordered ml-2"
onClick={(e) => e.stopPropagation()}
onChange={(e) => setCloseHoursMinutes(e.target.value)}
min="00:00"
value={closeHoursMinutes}
/>
</Row>
) : ( ) : (
<DateTimeTooltip <DateTimeTooltip
text={closeTime > Date.now() ? 'Trading ends:' : 'Trading ended:'} text={closeTime > Date.now() ? 'Trading ends:' : 'Trading ended:'}
@ -342,7 +357,7 @@ function EditableCloseDate(props: {
color={'gray-white'} color={'gray-white'}
onClick={() => setIsEditingCloseTime(true)} onClick={() => setIsEditingCloseTime(true)}
> >
<PencilIcon className="mr-0.5 inline h-4 w-4" /> Edit <PencilIcon className="!container mr-0.5 mb-0.5 inline h-4 w-4" />
</Button> </Button>
))} ))}
</> </>