1
0
Fork 0

wip(org): More work on managing patterns

This commit is contained in:
joostdecock 2023-05-31 15:32:54 +02:00
parent cdc67a6086
commit cab7f5d2c5
15 changed files with 375 additions and 176 deletions

View file

@ -20,14 +20,25 @@ export const DraftMenu = ({
language,
account,
DynamicDocs,
}) => (
<nav className="grow mb-12">
<DesignOptions
{...{ design, patternConfig, settings, update, language, account, DynamicDocs }}
/>
{account.control === 1 ? null : (
<CoreSettings {...{ patternConfig, settings, update, language, account, DynamicDocs }} />
)}
{ui.renderer === 'react' && <XrayMenu {...{ ui, update, DynamicDocs }} />}
</nav>
)
}) => {
// Default control level is 2 (in case people are not logged in)
const control = account.control || 2
const menuProps = {
design,
patternConfig,
settings,
update,
language,
account,
DynamicDocs,
control,
}
return (
<nav className="grow mb-12">
<DesignOptions {...menuProps} />
<CoreSettings {...menuProps} />
<XrayMenu {...menuProps} ui={ui} />
</nav>
)
}

View file

@ -14,17 +14,27 @@ import { Spinner } from 'shared/components/spinner.mjs'
export const ns = ['wbsave']
const whereAreWe = (router = false, design) => {
const whereAreWe = (router = false, design, from) => {
const info = {}
if (router?.asPath) {
const chunks = router.asPath.split('/')
info.new = chunks[1] === 'new'
info.design = chunks[3]
info.from = chunks[4]
info.fromId = chunks[5].split('#').shift()
info.locale = router.locale
if (from && from.type) {
if (from.type === 'pattern') {
// Editing an existing pattern
info.edit = true
info.patternId = from.data.id
if (from.data.set) info.set = from.data.setId
else if (from.data.cset) info.cset = from.data.csetId
} else if (from.type === 'new') {
// Creating a new pattern
const chunks = router.asPath.split('/')
info.design = chunks[3]
info.from = chunks[4]
info.fromId = chunks[5].split('#').shift()
if (info.design !== design) throw 'Design passed to view does not match URL state'
}
}
}
if (info.design !== design) throw 'Design passed to view does not match URL state'
return info
}
@ -101,7 +111,124 @@ const SaveNewPattern = ({
)
}
export const SaveView = ({ design, setView, settings, ui, update, language, DynamicDocs }) => {
const SaveExistingPattern = ({
t,
design,
settings,
info,
backend,
loading,
startLoading,
stopLoading,
toast,
router,
from,
}) => {
// State
const [name, setName] = useState(from.name ? from.name : defaultName(info))
const update = async (evt) => {
evt.preventDefault()
if (evt.target.value !== name) setName(evt.target.value)
}
const save = async () => {
startLoading()
const data = {
settings: {
...settings,
measurements: { ...settings.measurements },
},
}
if (data.settings.measurements) delete data.settings.measurements
if (data.settings.embed) delete data.settings.embed
const result = await backend.updatePattern(from.data.id, data)
if (result.success) {
toast.for.settingsSaved()
} else toast.for.backendError()
stopLoading()
}
const saveAs = async () => {
startLoading()
const data = {
data: {},
design,
name,
settings: {
...settings,
measurements: { ...settings.measurements },
},
}
if (data.settings.measurements) delete data.settings.measurements
if (data.settings.embed) delete data.settings.embed
if (info.set) data.set = info.set
else if (info.cset) data.cset = info.cset
else return toast.error(<span>¯\_()_/¯</span>)
const result = await backend.createPattern(data)
if (result.success) {
toast.for.settingsSaved()
router.push(`/patterns/${result.data.pattern.id}`)
} else toast.for.backendError()
stopLoading()
}
return (
<>
<div className="max-w-sm w-full">
<h2>{t('savePattern')}</h2>
<button className="btn mt-4 capitalize btn-primary w-full" onClick={save}>
<span className="flex flex-row items-center gap-2">
{loading ? (
<>
<Spinner />
<span>{t('processing')}</span>
</>
) : (
t('save')
)}
</span>
</button>
</div>
<div className="max-w-sm w-full">
<h2>{t('saveAsPattern')}</h2>
<label className="font-bold">{t('wbsave:giveItAName')}</label>
<input
value={name}
onChange={update}
className="input w-full input-bordered flex flex-row"
type="text"
placeholder={from.data.name ? from.data.name : t('title')}
/>
<button className="btn mt-4 capitalize btn-primary w-full" onClick={saveAs}>
<span className="flex flex-row items-center gap-2">
{loading ? (
<>
<Spinner />
<span>{t('processing')}</span>
</>
) : (
t('save')
)}
</span>
</button>
</div>
</>
)
}
export const SaveView = ({
design,
setView,
settings,
ui,
update,
language,
DynamicDocs,
from = false,
}) => {
// Hooks
const { t } = useTranslation(ns)
const { token } = useAccount()
@ -111,28 +238,27 @@ export const SaveView = ({ design, setView, settings, ui, update, language, Dyna
// Context
const { loading, startLoading, stopLoading } = useContext(LoadingContext)
const info = whereAreWe(router, design)
const info = whereAreWe(router, design, from)
const saveProps = {
t,
design,
settings,
info,
backend,
loading,
startLoading,
stopLoading,
toast,
router,
}
return (
<div className="m-auto mt-24">
<h1 className="max-w-6xl m-auto text-center">{t('wbsave:title')}</h1>
<div className="px-4 lg:px-12 flex flex-row flex-wrap gap-4 lg:gap-8 justify-around">
{info.new ? (
<SaveNewPattern
{...{
t,
design,
settings,
info,
backend,
loading,
startLoading,
stopLoading,
toast,
router,
}}
/>
) : null}
{info.new ? <SaveNewPattern {...saveProps} /> : null}
{info.edit ? <SaveExistingPattern {...saveProps} from={from} /> : null}
</div>
</div>
)