wip(org): More work on managing patterns
This commit is contained in:
parent
cdc67a6086
commit
cab7f5d2c5
15 changed files with 375 additions and 176 deletions
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
)
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue