112 lines
3.9 KiB
JavaScript
112 lines
3.9 KiB
JavaScript
// Dependencies
|
|
import { Fragment } from 'react'
|
|
import { nsMerge } from 'shared/utils.mjs'
|
|
import { ns as authNs } from 'shared/components/wrappers/auth/index.mjs'
|
|
import { designMeasurements, horFlexClasses } from 'shared/utils.mjs'
|
|
// Hooks
|
|
import { useTranslation } from 'next-i18next'
|
|
import { useLoadingStatus } from 'shared/hooks/use-loading-status.mjs'
|
|
// Components
|
|
import {
|
|
UserSetPicker,
|
|
BookmarkedSetPicker,
|
|
CuratedSetPicker,
|
|
ns as setsNs,
|
|
} from 'shared/components/account/sets.mjs'
|
|
import { MeasiesEditor } from './editor.mjs'
|
|
import { Popout } from 'shared/components/popout/index.mjs'
|
|
import { Accordion } from 'shared/components/accordion.mjs'
|
|
import { MsetIcon, BookmarkIcon, CsetIcon, EditIcon } from 'shared/components/icons.mjs'
|
|
|
|
export const ns = nsMerge(authNs, setsNs)
|
|
|
|
const tabNames = ['account:chooseASet', 'editCurrentMeasies']
|
|
|
|
export const MeasiesView = ({ design, Design, settings, update, missingMeasurements, setView }) => {
|
|
const { t } = useTranslation(['workbench'])
|
|
const { setLoadingStatus, LoadingStatus } = useLoadingStatus()
|
|
|
|
const loadMeasurements = (set) => {
|
|
update.settings([
|
|
[['measurements'], designMeasurements(Design, set.measies)],
|
|
[['units'], set.imperial ? 'imperial' : 'metric'],
|
|
])
|
|
setView('draft')
|
|
setLoadingStatus([true, 'appliedMeasies', true, true])
|
|
}
|
|
|
|
return (
|
|
<div className="max-w-7xl mt-8 mx-auto px-4">
|
|
<LoadingStatus />
|
|
<h2>{t('account:measurements')}</h2>
|
|
{missingMeasurements &&
|
|
settings.measurements &&
|
|
Object.keys(settings.measurements).length > 0 && (
|
|
<Popout note dense noP>
|
|
<h5>{t('weLackSomeMeasies', { nr: missingMeasurements.length })}</h5>
|
|
<ol className="list list-inside ml-4 list-decimal">
|
|
{missingMeasurements.map((m, i) => (
|
|
<li key={i}>{t(`measurements:${m}`)}</li>
|
|
))}
|
|
</ol>
|
|
<p className="text-lg">{t('youCanPickOrEnter')}</p>
|
|
</Popout>
|
|
)}
|
|
{!missingMeasurements && (
|
|
<Popout note ompact>
|
|
<span className="text-lg">{t('measiesOk')}</span>
|
|
</Popout>
|
|
)}
|
|
<Accordion
|
|
items={[
|
|
[
|
|
<Fragment key={1}>
|
|
<div className={horFlexClasses}>
|
|
<h5 id="ownsets">{t('workbench:chooseFromOwnSets')}</h5>
|
|
<MsetIcon className="w-6 h-6 shrink-0" />
|
|
</div>
|
|
<p>{t('workbench:chooseFromOwnSetsDesc')}</p>
|
|
</Fragment>,
|
|
<UserSetPicker
|
|
key={2}
|
|
design={design}
|
|
clickHandler={loadMeasurements}
|
|
t={t}
|
|
size="md"
|
|
/>,
|
|
],
|
|
[
|
|
<Fragment key={1}>
|
|
<div className={horFlexClasses}>
|
|
<h5 id="bookmarkedsets">{t('workbench:chooseFromBookmarkedSets')}</h5>
|
|
<BookmarkIcon className="w-6 h-6 shrink-0" />
|
|
</div>
|
|
<p>{t('workbench:chooseFromBookmarkedSetsDesc')}</p>
|
|
</Fragment>,
|
|
<BookmarkedSetPicker design={design} clickHandler={loadMeasurements} t={t} size="md" />,
|
|
],
|
|
[
|
|
<Fragment key={1}>
|
|
<div className={horFlexClasses}>
|
|
<h5 id="curatedsets">{t('workbench:chooseFromCuratedSets')}</h5>
|
|
<CsetIcon />
|
|
</div>
|
|
<p>{t('workbench:chooseFromCuratedSetsDesc')}</p>
|
|
</Fragment>,
|
|
<CuratedSetPicker design={design} clickHandler={loadMeasurements} t={t} key={2} />,
|
|
],
|
|
[
|
|
<Fragment key={1}>
|
|
<div className={horFlexClasses}>
|
|
<h5 id="editmeasies">{t('workbench:editMeasiesByHand')}</h5>
|
|
<EditIcon />
|
|
</div>
|
|
<p>{t('workbench:editMeasiesByHandDesc')}</p>
|
|
</Fragment>,
|
|
<MeasiesEditor {...{ Design, settings, update }} key={2} />,
|
|
],
|
|
]}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|