1
0
Fork 0

wip(lab): Work on workbench

- Moved the various tabs on the draft view to their own views.
- Renames modes to views
- Started to group various aspects of the workbench state under
  `_state` in the gist to prevent it from getting all mixed up
  with the core settings.
- Updated events title to make it more clear not all events might
  be present
- Removed valid state in measurements input since it was only
  getting updated on keyboard input but now when preloading
  measurements (which it does now)
This commit is contained in:
Joost De Cock 2022-02-12 14:31:17 +01:00
parent bbb2b2c23f
commit 3653700572
12 changed files with 155 additions and 156 deletions

View file

@ -13,15 +13,17 @@ const MeasurementInput = ({ m, gist, app, updateMeasurements }) => {
const { t } = useTranslation(['app', 'measurements'])
const prefix = (app.site === 'org') ? '' : 'https://freesewing.org'
const title = t(`measurements:${m}`)
const isValid = input => {
if (input === '') return ''
return !isNaN(input)
}
const isValValid = val => (typeof val === 'undefined' || val === '')
? null
: !isNaN(val)
const isValid = (newVal) => (typeof newVal === 'undefined')
? isValValid(gist?.measurements?.[m])
: isValValid(newVal)
const update = evt => {
setVal(evt.target.value)
const ok = isValid(evt.target.value)
console.log({ok})
if (ok) {
setValid(true)
updateMeasurements(evt.target.value*10, m)
@ -29,10 +31,6 @@ const MeasurementInput = ({ m, gist, app, updateMeasurements }) => {
}
const [val, setVal] = useState(gist?.measurements?.[m] || '')
const [valid, setValid] = useState(typeof gist?.measurements?.[m] === 'undefined'
? '' :
isValid(gist.measurements[m])
)
useEffect(() => {
if (gist?.measurements?.[m]) setVal(gist.measurements[m]/10)
@ -40,6 +38,7 @@ const MeasurementInput = ({ m, gist, app, updateMeasurements }) => {
if (!m) return null
const valid = isValid()
return (
<div className="form-control mb-2" key={`wrap-${m}`}>
<label className="label">
@ -59,20 +58,19 @@ const MeasurementInput = ({ m, gist, app, updateMeasurements }) => {
type="text"
placeholder={title}
className={`
input input-lg input-bordered grow text-base-content
${valid === false && 'input-error'}
${valid === true && 'input-success'}
border-r-0
input input-lg input-bordered grow text-base-content border-r-0
${isValid() === false && 'input-error'}
${isValid() === true && 'input-success'}
`}
value={val}
onChange={update}
/>
<span role="img" className={`bg-transparent border-y
${valid === false && 'border-error text-neutral-content'}
${valid === true && 'border-success text-neutral-content'}
${valid === '' && 'border-base-200 text-base-content'}
${isValid() === false && 'border-error text-neutral-content'}
${isValid() === true && 'border-success text-neutral-content'}
${isValid() === null && 'border-base-200 text-base-content'}
`}>
{valid === ''
{isValid() === null
? ''
: valid
? '👍'
@ -82,7 +80,7 @@ const MeasurementInput = ({ m, gist, app, updateMeasurements }) => {
<span className={`
${valid === false && 'bg-error text-neutral-content'}
${valid === true && 'bg-success text-neutral-content'}
${valid === '' && 'bg-base-200 text-base-content'}
${valid === null && 'bg-base-200 text-base-content'}
`}>
cm
</span>