wip(org): Work on patterns pages
This commit is contained in:
parent
ba34d47ee0
commit
2e1a7b473a
8 changed files with 665 additions and 9 deletions
574
sites/shared/components/account/patterns.mjs
Normal file
574
sites/shared/components/account/patterns.mjs
Normal file
|
@ -0,0 +1,574 @@
|
|||
// Dependencies
|
||||
import { useState, useEffect, useContext, useCallback } from 'react'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import orderBy from 'lodash.orderby'
|
||||
import { measurements, isDegreeMeasurement } from 'config/measurements.mjs'
|
||||
import { measurementAsMm, formatMm } from 'shared/utils.mjs'
|
||||
import { measurements as designMeasurements } from 'shared/prebuild/data/design-measurements.mjs'
|
||||
import { freeSewingConfig as conf } from 'shared/config/freesewing.config.mjs'
|
||||
// Hooks
|
||||
import { useDropzone } from 'react-dropzone'
|
||||
import { useAccount } from 'shared/hooks/use-account.mjs'
|
||||
import { useBackend } from 'shared/hooks/use-backend.mjs'
|
||||
import { useToast } from 'shared/hooks/use-toast.mjs'
|
||||
import { useRouter } from 'next/router'
|
||||
// Context
|
||||
import { LoadingContext } from 'shared/context/loading-context.mjs'
|
||||
import { ModalContext } from 'shared/context/modal-context.mjs'
|
||||
// Components
|
||||
import Link from 'next/link'
|
||||
import { PageLink } from 'shared/components/page-link.mjs'
|
||||
import { Collapse, useCollapseButton } from 'shared/components/collapse.mjs'
|
||||
import { BackToAccountButton, Choice } from './shared.mjs'
|
||||
import { ModalDesignPicker } from 'shared/components/modal/design-picker.mjs'
|
||||
import {
|
||||
FilterIcon,
|
||||
ClearIcon,
|
||||
PlusIcon,
|
||||
OkIcon,
|
||||
NoIcon,
|
||||
TrashIcon,
|
||||
EditIcon,
|
||||
SettingsIcon,
|
||||
DownloadIcon,
|
||||
LinkIcon,
|
||||
} from 'shared/components/icons.mjs'
|
||||
import { ModalWrapper } from 'shared/components/wrappers/modal.mjs'
|
||||
import Markdown from 'react-markdown'
|
||||
import { Tab } from './bio.mjs'
|
||||
import Timeago from 'react-timeago'
|
||||
import { Spinner } from 'shared/components/spinner.mjs'
|
||||
|
||||
export const ns = ['account', 'patterns', 'toast']
|
||||
|
||||
export const StandAloneNewSet = () => {
|
||||
const { t } = useTranslation(['account'])
|
||||
const toast = useToast()
|
||||
const { account, token } = useAccount()
|
||||
const backend = useBackend(token)
|
||||
|
||||
return (
|
||||
<div className="max-w-xl">
|
||||
<NewSet {...{ t, account, backend, toast }} title={false} standalone={true} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export const NewSet = ({
|
||||
t,
|
||||
refresh,
|
||||
closeCollapseButton,
|
||||
backend,
|
||||
toast,
|
||||
title = true,
|
||||
standalone = false,
|
||||
}) => {
|
||||
// Context
|
||||
const { startLoading, stopLoading } = useContext(LoadingContext)
|
||||
|
||||
// Hooks
|
||||
const router = useRouter()
|
||||
|
||||
// State
|
||||
const [name, setName] = useState('')
|
||||
|
||||
// Helper method to create a new set
|
||||
const createSet = async () => {
|
||||
startLoading()
|
||||
const result = await backend.createSet({
|
||||
name,
|
||||
})
|
||||
if (result.success) {
|
||||
toast.success(<span>{t('nailedIt')}</span>)
|
||||
if (standalone) router.push('/account/sets/')
|
||||
else {
|
||||
refresh()
|
||||
closeCollapseButton()
|
||||
}
|
||||
} else toast.for.backendError()
|
||||
stopLoading()
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{title ? <h2>{t('newSet')}</h2> : null}
|
||||
<h5>{t('name')}</h5>
|
||||
<p>{t('setNameDesc')}</p>
|
||||
<input
|
||||
autoFocus
|
||||
value={name}
|
||||
onChange={(evt) => setName(evt.target.value)}
|
||||
className="input w-full input-bordered flex flex-row"
|
||||
type="text"
|
||||
placeholder={'Georg Cantor'}
|
||||
/>
|
||||
<div className="flex flex-row gap-2 items-center w-full mt-8 mb-2">
|
||||
<button
|
||||
className="btn btn-primary grow capitalize"
|
||||
disabled={name.length < 1}
|
||||
onClick={createSet}
|
||||
>
|
||||
{t('newSet')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const EditField = (props) => {
|
||||
if (props.field === 'name') return <EditName {...props} />
|
||||
if (props.field === 'notes') return <EditNotes {...props} />
|
||||
if (props.field === 'imperial') return <EditUnits {...props} />
|
||||
if (props.field === 'public') return <EditPublic {...props} />
|
||||
if (props.field === 'img') return <EditImg {...props} />
|
||||
|
||||
return <p>FIXME: No edit component for this field</p>
|
||||
}
|
||||
|
||||
export const EditRow = (props) => (
|
||||
<Collapse
|
||||
color="secondary"
|
||||
openTitle={props.title}
|
||||
title={
|
||||
<>
|
||||
<div className="w-24 text-left md:text-right block md:inline font-bold pr-4">
|
||||
{props.title}
|
||||
</div>
|
||||
<div className="grow">{props.children}</div>
|
||||
</>
|
||||
}
|
||||
toggle={<EditIcon />}
|
||||
toggleClasses="btn btn-secondary"
|
||||
>
|
||||
<EditField field="name" {...props} />
|
||||
</Collapse>
|
||||
)
|
||||
|
||||
const Mval = ({ m, val = false, imperial = false, className = '' }) =>
|
||||
val ? (
|
||||
isDegreeMeasurement(m) ? (
|
||||
<span>{val}°</span>
|
||||
) : (
|
||||
<span
|
||||
dangerouslySetInnerHTML={{ __html: formatMm(val, imperial ? 'imperial' : 'metric') }}
|
||||
className={className}
|
||||
/>
|
||||
)
|
||||
) : null
|
||||
|
||||
const EditImg = ({ t, pattern, account }) => {
|
||||
const [img, setImg] = useState(pattern.img)
|
||||
|
||||
const onDrop = useCallback((acceptedFiles) => {
|
||||
const reader = new FileReader()
|
||||
reader.onload = () => {
|
||||
setImg(reader.result)
|
||||
}
|
||||
acceptedFiles.forEach((file) => reader.readAsDataURL(file))
|
||||
}, [])
|
||||
|
||||
const { getRootProps, getInputProps } = useDropzone({ onDrop })
|
||||
|
||||
//const update = async (evt) => {
|
||||
// evt.preventDefault()
|
||||
// if (evt.target.value !== value) {
|
||||
// setValue(evt.target.value)
|
||||
// }
|
||||
//}
|
||||
const save = () => {
|
||||
// FIXME
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div>
|
||||
<img
|
||||
alt="img"
|
||||
src={img || account.img}
|
||||
className="shadow mb-4 mask mask-squircle bg-neutral aspect-square"
|
||||
/>
|
||||
<div
|
||||
{...getRootProps()}
|
||||
className={`
|
||||
flex rounded-lg w-full flex-col items-center justify-center
|
||||
lg:h-64 lg:border-4 lg:border-secondary lg:border-dashed
|
||||
`}
|
||||
>
|
||||
<input {...getInputProps()} />
|
||||
<p className="hidden lg:block p-0 m-0">{t('imgDragAndDropImageHere')}</p>
|
||||
<p className="hidden lg:block p-0 my-2">{t('or')}</p>
|
||||
<button className={`btn btn-secondary btn-outline mt-4 w-64`}>
|
||||
{t('imgSelectImage')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-row gap-2 items-center justify-center mt-2">
|
||||
<button className="btn btn-secondary" onClick={save}>
|
||||
{t('save')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const EditName = ({ t, pattern, backend, toast, refresh }) => {
|
||||
const [value, setValue] = useState(pattern.name)
|
||||
const { loading, startLoading, stopLoading } = useContext(LoadingContext)
|
||||
|
||||
const update = async (evt) => {
|
||||
evt.preventDefault()
|
||||
if (evt.target.value !== value) {
|
||||
setValue(evt.target.value)
|
||||
}
|
||||
}
|
||||
|
||||
const save = async () => {
|
||||
startLoading()
|
||||
const result = await backend.updatePattern(pattern.id, { name: value })
|
||||
if (result.success) {
|
||||
refresh()
|
||||
toast.for.settingsSaved()
|
||||
} else toast.for.backendError()
|
||||
stopLoading()
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-row gap-2">
|
||||
<input
|
||||
value={value}
|
||||
onChange={update}
|
||||
className="input w-full input-bordered flex flex-row"
|
||||
type="text"
|
||||
placeholder={t('name')}
|
||||
/>
|
||||
<button className="btn btn-secondary" onClick={save} disabled={value === pattern.name}>
|
||||
<span className="flex flex-row items-center gap-2">
|
||||
{loading ? (
|
||||
<>
|
||||
<Spinner />
|
||||
<span>{t('processing')}</span>
|
||||
</>
|
||||
) : (
|
||||
t('save')
|
||||
)}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const EditNotes = ({ t, pattern, backend, toast, refresh }) => {
|
||||
const [value, setValue] = useState(pattern.notes)
|
||||
const [activeTab, setActiveTab] = useState('edit')
|
||||
const { loading, startLoading, stopLoading } = useContext(LoadingContext)
|
||||
|
||||
const update = async (evt) => {
|
||||
evt.preventDefault()
|
||||
if (evt.target.value !== value) {
|
||||
setValue(evt.target.value)
|
||||
}
|
||||
}
|
||||
|
||||
const save = async () => {
|
||||
startLoading()
|
||||
const result = await backend.updatePattern(pattern.id, { notes: value })
|
||||
if (result.success) {
|
||||
refresh()
|
||||
toast.for.settingsSaved()
|
||||
} else toast.for.backendError()
|
||||
stopLoading()
|
||||
}
|
||||
|
||||
// Shared props for tabs
|
||||
const tabProps = { activeTab, setActiveTab, t }
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="tabs w-full">
|
||||
<Tab id="edit" {...tabProps} />
|
||||
<Tab id="preview" {...tabProps} />
|
||||
</div>
|
||||
<div className="flex flex-row items-center mt-4">
|
||||
{activeTab === 'edit' ? (
|
||||
<textarea
|
||||
rows="5"
|
||||
className="textarea textarea-bordered textarea-lg w-full"
|
||||
placeholder={t('placeholder')}
|
||||
onChange={update}
|
||||
value={value}
|
||||
/>
|
||||
) : (
|
||||
<div className="text-left px-4 border w-full">
|
||||
<Markdown>{value}</Markdown>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="my-2 flex gap-2 items-center justify-center">
|
||||
<button className="btn btn-secondary" onClick={save} disabled={value === pattern.notes}>
|
||||
<span className="flex flex-row items-center gap-2">
|
||||
{loading ? (
|
||||
<>
|
||||
<Spinner />
|
||||
<span>{t('processing')}</span>
|
||||
</>
|
||||
) : (
|
||||
t('save')
|
||||
)}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const EditPublic = ({ t, pattern, backend, toast, refresh }) => {
|
||||
const [selection, setSelection] = useState(pattern.public)
|
||||
const { startLoading, stopLoading } = useContext(LoadingContext)
|
||||
|
||||
const update = async (val) => {
|
||||
setSelection(val)
|
||||
if (val !== pattern.public) {
|
||||
startLoading()
|
||||
const result = await backend.updatePattern(pattern.id, { public: val })
|
||||
if (result.success) {
|
||||
refresh()
|
||||
toast.for.settingsSaved()
|
||||
} else toast.for.backendError()
|
||||
stopLoading()
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{[true, false].map((val) => (
|
||||
<Choice val={val} t={t} update={update} current={selection} bool key={val}>
|
||||
<div className="flex flex-row gap-2 text-lg leading-5 items-center">
|
||||
{val ? (
|
||||
<>
|
||||
<OkIcon className="w-6 h-6 text-success" /> <span>{t('publicPattern')}</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<NoIcon className="w-6 h-6 text-error" /> <span>{t('privatePattern')}</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-row gap-2 text-normal font-light normal-case pt-1 items-center">
|
||||
{val ? t('publicPatternDesc') : t('privatePatternDesc')}
|
||||
</div>
|
||||
</Choice>
|
||||
))}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export const EditSectionTitle = ({ title }) => (
|
||||
<h5 className="border border-solid border-b-2 border-r-0 border-l-0 border-t-0 border-primary mt-4 mb-2">
|
||||
{title}
|
||||
</h5>
|
||||
)
|
||||
|
||||
const EditPattern = (props) => {
|
||||
const { account, pattern, t, setModal } = props
|
||||
|
||||
return (
|
||||
<div className="p-4">
|
||||
{/* Meta info */}
|
||||
{account.control > 2 ? (
|
||||
<div className="flex flex-row gap-4 text-sm items-center justify-center mb-2">
|
||||
<div className="flex flex-row gap-2 items-center">
|
||||
<b>{t('permalink')}:</b>
|
||||
{pattern.public ? (
|
||||
<PageLink href={`/patterns/${pattern.id}`} txt={`/patterns/${pattern.id}`} />
|
||||
) : (
|
||||
<NoIcon className="w-4 h-4 text-error" />
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<b>{t('created')}</b>: <Timeago date={pattern.createdAt} />
|
||||
</div>
|
||||
<div>
|
||||
<b>{t('updated')}</b>: <Timeago date={pattern.updatedAt} />
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{/* JSON & YAML links */}
|
||||
{account.control > 3 ? (
|
||||
<div className="flex flex-row gap-4 text-sm items-center justify-center">
|
||||
<a
|
||||
className="badge badge-secondary font-bold"
|
||||
href={`${conf.backend}/sets/${pattern.id}.json`}
|
||||
>
|
||||
JSON
|
||||
</a>
|
||||
<a
|
||||
className="badge badge-success font-bold"
|
||||
href={`${conf.backend}/sets/${pattern.id}.yaml`}
|
||||
>
|
||||
YAML
|
||||
</a>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<EditSectionTitle title={t('data')} />
|
||||
|
||||
{/* Name is always shown */}
|
||||
<EditRow title={t('name')} field="name" {...props}>
|
||||
{pattern.name}
|
||||
</EditRow>
|
||||
|
||||
{/* img: Control level determines whether or not to show this */}
|
||||
{account.control >= conf.account.patterns.img ? (
|
||||
<EditRow title={t('image')} field="img" {...props}>
|
||||
<img src={pattern.img} className="w-10 mask mask-squircle bg-neutral aspect-square" />
|
||||
</EditRow>
|
||||
) : null}
|
||||
|
||||
{/* public: Control level determines whether or not to show this */}
|
||||
{account.control >= conf.account.patterns.public ? (
|
||||
<EditRow title={t('public')} field="public" {...props}>
|
||||
<div className="flex flex-row gap-2">
|
||||
{pattern.public ? (
|
||||
<>
|
||||
<OkIcon className="h-6 w-6 text-success" /> <span>{t('publicPattern')}</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<NoIcon className="h-6 w-6 text-error" /> <span>{t('privatePattern')}</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</EditRow>
|
||||
) : null}
|
||||
|
||||
{/* notes: Control level determines whether or not to show this */}
|
||||
{account.control >= conf.account.patterns.notes ? (
|
||||
<EditRow title={t('notes')} field="notes" {...props}>
|
||||
<Markdown>{pattern.notes}</Markdown>
|
||||
</EditRow>
|
||||
) : null}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const Pattern = ({ pattern, t, account, backend, refresh }) => {
|
||||
// Context
|
||||
const { startLoading, stopLoading } = useContext(LoadingContext)
|
||||
const { setModal } = useContext(ModalContext)
|
||||
|
||||
// Hooks
|
||||
const toast = useToast()
|
||||
|
||||
const remove = async () => {
|
||||
startLoading()
|
||||
const result = await backend.removePattern(pattern.id)
|
||||
if (result) toast.success(t('gone'))
|
||||
else toast.for.backendError()
|
||||
// This just forces a refresh of the list from the server
|
||||
refresh()
|
||||
stopLoading()
|
||||
}
|
||||
|
||||
const removeModal = () => {
|
||||
setModal(
|
||||
<ModalWrapper slideFrom="top">
|
||||
<h2>{t('areYouCertain')}</h2>
|
||||
<p>{t('deleteSetWarning')}</p>
|
||||
<p className="flex flex-row gap-4 items-center justify-center">
|
||||
<button className="btn btn-neutral btn-outline px-8">{t('cancel')}</button>
|
||||
<button className="btn btn-error px-8" onClick={remove}>
|
||||
{t('delete')}
|
||||
</button>
|
||||
</p>
|
||||
</ModalWrapper>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Collapse
|
||||
primary
|
||||
top
|
||||
title={
|
||||
<>
|
||||
<img src={pattern.img} className="w-10 mask mask-squircle bg-neutral aspect-square" />
|
||||
<span>{pattern.name}</span>
|
||||
</>
|
||||
}
|
||||
openTitle={pattern.name}
|
||||
buttons={[
|
||||
<button
|
||||
key="rm"
|
||||
className="btn btn-error hover:text-error-content border-0"
|
||||
onClick={account.control > 4 ? remove : removeModal}
|
||||
title={t('removePattern')}
|
||||
>
|
||||
<TrashIcon />
|
||||
</button>,
|
||||
]}
|
||||
>
|
||||
<EditPattern {...{ t, pattern, account, backend, toast, refresh, setModal }} />
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-2">
|
||||
<Link
|
||||
key="draft"
|
||||
className="btn btn-secondary w-full"
|
||||
href={`/patterns/${pattern.id}/edit#view="draft"`}
|
||||
title={t('draftPattern')}
|
||||
>
|
||||
<SettingsIcon />
|
||||
<span className="pl-2">{t('draftPattern')}</span>
|
||||
</Link>
|
||||
<Link
|
||||
key="download"
|
||||
className="btn btn-primary w-full"
|
||||
href={`/patterns/${pattern.id}/edit#view="export"`}
|
||||
title={t('exportPattern')}
|
||||
>
|
||||
<DownloadIcon />
|
||||
<span className="pl-2">{t('exportPattern')}</span>
|
||||
</Link>
|
||||
</div>
|
||||
</Collapse>
|
||||
)
|
||||
}
|
||||
|
||||
// Component for the account/patterns page
|
||||
export const Patterns = ({ standAlone = false }) => {
|
||||
// Hooks
|
||||
const { account, token } = useAccount()
|
||||
const backend = useBackend(token)
|
||||
const { t } = useTranslation(ns)
|
||||
const toast = useToast()
|
||||
const { CollapseButton, closeCollapseButton } = useCollapseButton()
|
||||
|
||||
// State
|
||||
const [patterns, setPatterns] = useState([])
|
||||
const [changes, setChanges] = useState(0)
|
||||
|
||||
// Effects
|
||||
useEffect(() => {
|
||||
const getPatterns = async () => {
|
||||
const result = await backend.getPatterns()
|
||||
if (result.success) setPatterns(result.data.patterns)
|
||||
}
|
||||
getPatterns()
|
||||
}, [changes])
|
||||
|
||||
// Helper method to force a refresh
|
||||
const refresh = () => {
|
||||
setChanges(changes + 1)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-2xl xl:pl-4">
|
||||
{orderBy(patterns, ['name'], ['asc']).map((pattern) => (
|
||||
<Pattern {...{ account, pattern, t, backend, refresh }} key={pattern.id} />
|
||||
))}
|
||||
<Link href="/new/pattern" className="btn btn-primary w-full capitalize mt-4">
|
||||
{t('createANewPattern')}
|
||||
</Link>
|
||||
{standAlone ? null : <BackToAccountButton />}
|
||||
<pre>{JSON.stringify(patterns, null, 2)}</pre>
|
||||
</div>
|
||||
)
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue