554 lines
18 KiB
JavaScript
554 lines
18 KiB
JavaScript
// Dependencies
|
|
import { useState, useEffect, useContext } from 'react'
|
|
import { useTranslation } from 'next-i18next'
|
|
import { capitalize, shortDate, cloudflareImageUrl, horFlexClasses } from 'shared/utils.mjs'
|
|
import { freeSewingConfig as conf, controlLevels } from 'shared/config/freesewing.config.mjs'
|
|
// Context
|
|
import { LoadingStatusContext } from 'shared/context/loading-status-context.mjs'
|
|
// Hooks
|
|
import { useAccount } from 'shared/hooks/use-account.mjs'
|
|
import { useBackend } from 'shared/hooks/use-backend.mjs'
|
|
import { useRouter } from 'next/router'
|
|
// Context
|
|
import { ModalContext } from 'shared/context/modal-context.mjs'
|
|
// Components
|
|
import { PageLink, Link, AnchorLink } from 'shared/components/link.mjs'
|
|
import { BackToAccountButton } from './shared.mjs'
|
|
import {
|
|
StringInput,
|
|
MarkdownInput,
|
|
PassiveImageInput,
|
|
ListInput,
|
|
} from 'shared/components/inputs.mjs'
|
|
import {
|
|
OkIcon,
|
|
NoIcon,
|
|
TrashIcon,
|
|
PlusIcon,
|
|
CameraIcon,
|
|
EditIcon,
|
|
ResetIcon,
|
|
UploadIcon,
|
|
FreeSewingIcon,
|
|
CloneIcon,
|
|
BoolYesIcon,
|
|
BoolNoIcon,
|
|
} from 'shared/components/icons.mjs'
|
|
import { DisplayRow } from './shared.mjs'
|
|
import { ModalWrapper } from 'shared/components/wrappers/modal.mjs'
|
|
import Markdown from 'react-markdown'
|
|
import Timeago from 'react-timeago'
|
|
import { TableWrapper } from 'shared/components/wrappers/table.mjs'
|
|
import { DynamicOrgDocs } from 'site/components/dynamic-org-docs.mjs'
|
|
|
|
export const ns = ['account', 'patterns', 'status']
|
|
|
|
export const Pattern = ({ id, publicOnly = false }) => {
|
|
// Hooks
|
|
const { account, control } = useAccount()
|
|
const { setLoadingStatus } = useContext(LoadingStatusContext)
|
|
const backend = useBackend()
|
|
const { t, i18n } = useTranslation(ns)
|
|
// FIXME: implement a solution for loading docs dynamically
|
|
const docs = {}
|
|
for (const option of ['name', 'units', 'public', 'notes', 'image']) {
|
|
docs[option] = <DynamicOrgDocs language={i18n.language} path={`site/patterns/${option}`} />
|
|
}
|
|
|
|
// Context
|
|
const { setModal } = useContext(ModalContext)
|
|
|
|
const [edit, setEdit] = useState(false)
|
|
const [pattern, setPattern] = useState()
|
|
// Set fields for editing
|
|
const [name, setName] = useState(pattern?.name)
|
|
const [image, setImage] = useState(pattern?.image)
|
|
const [isPublic, setIsPublic] = useState(pattern?.public ? true : false)
|
|
const [notes, setNotes] = useState(pattern?.notes || '')
|
|
|
|
// Effect
|
|
useEffect(() => {
|
|
const getPattern = async () => {
|
|
setLoadingStatus([true, t('backendLoadingStarted')])
|
|
const result = await backend.getPattern(id)
|
|
if (result.success) {
|
|
setPattern(result.data.pattern)
|
|
setName(result.data.pattern.name)
|
|
setImage(result.data.pattern.image)
|
|
setIsPublic(result.data.pattern.public ? true : false)
|
|
setNotes(result.data.pattern.notes)
|
|
setLoadingStatus([true, 'backendLoadingCompleted', true, true])
|
|
} else setLoadingStatus([true, 'backendError', true, false])
|
|
}
|
|
const getPublicPattern = async () => {
|
|
setLoadingStatus([true, t('backendLoadingStarted')])
|
|
const result = await backend.getPublicPattern(id)
|
|
if (result.success) {
|
|
setPattern({
|
|
...result.data,
|
|
public: true,
|
|
})
|
|
setName(result.data.name)
|
|
setImage(result.data.image)
|
|
setIsPublic(true)
|
|
setNotes(result.data.notes)
|
|
setLoadingStatus([true, 'backendLoadingCompleted', true, true])
|
|
} else setLoadingStatus([true, 'backendError', true, false])
|
|
}
|
|
if (id) {
|
|
if (publicOnly) getPublicPattern()
|
|
else getPattern()
|
|
}
|
|
console.log(' in useeffect')
|
|
}, [id, publicOnly])
|
|
|
|
const save = async () => {
|
|
setLoadingStatus([true, 'gatheringInfo'])
|
|
// Compile data
|
|
const data = {}
|
|
if (name || name !== pattern.name) data.name = name
|
|
if (image || image !== pattern.image) data.img = image
|
|
if ([true, false].includes(isPublic) && isPublic !== pattern.public) data.public = isPublic
|
|
if (notes || notes !== pattern.notes) data.notes = notes
|
|
setLoadingStatus([true, 'savingPattern'])
|
|
const result = await backend.updatePattern(pattern.id, data)
|
|
if (result.success) {
|
|
setPattern(result.data.pattern)
|
|
setEdit(false)
|
|
setLoadingStatus([true, 'nailedIt', true, true])
|
|
} else setLoadingStatus([true, 'backendError', true, false])
|
|
}
|
|
|
|
if (!pattern) return null
|
|
|
|
const heading = (
|
|
<>
|
|
<div className="flex flex-wrap md:flex-nowrap flex-row gap-2 w-full">
|
|
<div className="w-full md:w-96 shrink-0">
|
|
<PatternCard pattern={pattern} size="md" />
|
|
</div>
|
|
<div className="flex flex-col justify-end gap-2 mb-2 grow">
|
|
{account.control > 3 && pattern?.public ? (
|
|
<div className="flex flex-row gap-2 items-center">
|
|
<a
|
|
className="badge badge-secondary font-bold badge-lg"
|
|
href={`${conf.backend}/patterns/${pattern.id}.json`}
|
|
>
|
|
JSON
|
|
</a>
|
|
<a
|
|
className="badge badge-success font-bold badge-lg"
|
|
href={`${conf.backend}/patterns/${pattern.id}.yaml`}
|
|
>
|
|
YAML
|
|
</a>
|
|
</div>
|
|
) : (
|
|
<span></span>
|
|
)}
|
|
<button
|
|
onClick={() =>
|
|
setModal(
|
|
<ModalWrapper flex="col" justify="top lg:justify-center" slideFrom="right">
|
|
<img src={cloudflareImageUrl({ type: 'public', id: pattern.img })} />
|
|
</ModalWrapper>
|
|
)
|
|
}
|
|
className={`btn btn-secondary btn-outline ${horFlexClasses}`}
|
|
>
|
|
<CameraIcon />
|
|
{t('showImage')}
|
|
</button>
|
|
{pattern.userId === account.id && publicOnly && (
|
|
<Link
|
|
href={`/patterns/${pattern.id}/edit`}
|
|
className={`btn btn-primary btn-outline ${horFlexClasses}`}
|
|
>
|
|
<FreeSewingIcon /> {t('updatePattern')}
|
|
</Link>
|
|
)}
|
|
{account.username && (
|
|
<Link
|
|
href={`/patterns/${pattern.id}/clone`}
|
|
className={`btn btn-primary btn-outline ${horFlexClasses}`}
|
|
>
|
|
<CloneIcon /> {t('clonePattern')}
|
|
</Link>
|
|
)}
|
|
{!publicOnly && (
|
|
<>
|
|
{edit ? (
|
|
<>
|
|
<button
|
|
onClick={() => setEdit(false)}
|
|
className={`btn btn-primary btn-outline ${horFlexClasses}`}
|
|
>
|
|
<ResetIcon />
|
|
{t('cancel')}
|
|
</button>
|
|
<button onClick={save} className={`btn btn-primary ${horFlexClasses}`}>
|
|
<UploadIcon />
|
|
{t('saveThing', { thing: t('account:pattern') })}
|
|
</button>
|
|
</>
|
|
) : (
|
|
<>
|
|
<Link
|
|
href={`/patterns/${pattern.id}/edit`}
|
|
className={`btn btn-primary btn-outline ${horFlexClasses}`}
|
|
>
|
|
<FreeSewingIcon /> {t('updatePattern')}
|
|
</Link>
|
|
<button
|
|
onClick={() => setEdit(true)}
|
|
className={`btn btn-primary ${horFlexClasses}`}
|
|
>
|
|
<EditIcon /> {t('editThing', { thing: t('account:patternMetadata') })}
|
|
</button>
|
|
</>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-row flex-wrap gap-4 text-sm items-center justify-between mb-2"></div>
|
|
</>
|
|
)
|
|
|
|
if (!edit)
|
|
return (
|
|
<div className="max-w-2xl">
|
|
{heading}
|
|
<DisplayRow title={t('name')}>{pattern.name}</DisplayRow>
|
|
{control >= controlLevels.sets.notes && (
|
|
<DisplayRow title={t('notes')}>
|
|
<Markdown>{pattern.notes}</Markdown>
|
|
</DisplayRow>
|
|
)}
|
|
{control >= controlLevels.patterns.public && (
|
|
<>
|
|
<DisplayRow title={t('public')}>
|
|
{pattern.public ? <BoolYesIcon /> : <BoolNoIcon />}
|
|
</DisplayRow>
|
|
{pattern.public && (
|
|
<DisplayRow title={t('permalink')}>
|
|
<PageLink href={`/patterns/${pattern.id}`} txt={`/patterns/${pattern.id}`} />
|
|
</DisplayRow>
|
|
)}
|
|
</>
|
|
)}
|
|
{control >= controlLevels.sets.createdAt && (
|
|
<DisplayRow title={t('created')}>
|
|
<Timeago date={pattern.createdAt} />
|
|
<span className="px-2 opacity-50">|</span>
|
|
{shortDate(i18n.language, pattern.createdAt, false)}
|
|
</DisplayRow>
|
|
)}
|
|
{control >= controlLevels.patterns.updatedAt && (
|
|
<DisplayRow title={t('updated')}>
|
|
<Timeago date={pattern.updatedAt} />
|
|
<span className="px-2 opacity-50">|</span>
|
|
{shortDate(i18n.language, pattern.updatedAt, false)}
|
|
</DisplayRow>
|
|
)}
|
|
{control >= controlLevels.patterns.id && (
|
|
<DisplayRow title={t('id')}>{pattern.id}</DisplayRow>
|
|
)}
|
|
</div>
|
|
)
|
|
|
|
return (
|
|
<div className="max-w-2xl">
|
|
{heading}
|
|
<ul className="list list-disc list-inside ml-4">
|
|
<li>
|
|
<AnchorLink id="name" txt={t('name')} />
|
|
</li>
|
|
{account.control >= conf.account.sets.img ? (
|
|
<li>
|
|
<AnchorLink id="image" txt={t('image')} />
|
|
</li>
|
|
) : null}
|
|
{['public', 'units', 'notes'].map((id) =>
|
|
account.control >= conf.account.sets[id] ? (
|
|
<li key={id}>
|
|
<AnchorLink id="units" txt={t(id)} />
|
|
</li>
|
|
) : null
|
|
)}
|
|
</ul>
|
|
|
|
{/* Name is always shown */}
|
|
<span id="name"></span>
|
|
<StringInput
|
|
id="pattern-name"
|
|
label={t('name')}
|
|
update={setName}
|
|
current={name}
|
|
original={pattern.name}
|
|
docs={docs.name}
|
|
placeholder="Maurits Cornelis Escher"
|
|
valid={(val) => val && val.length > 0}
|
|
/>
|
|
|
|
{/* img: Control level determines whether or not to show this */}
|
|
<span id="image"></span>
|
|
{account.control >= conf.account.sets.img ? (
|
|
<PassiveImageInput
|
|
id="pattern-img"
|
|
label={t('image')}
|
|
update={setImage}
|
|
current={image}
|
|
docs={docs.image}
|
|
valid={(val) => val.length > 0}
|
|
/>
|
|
) : null}
|
|
|
|
{/* public: Control level determines whether or not to show this */}
|
|
<span id="public"></span>
|
|
{account.control >= conf.account.patterns.public ? (
|
|
<ListInput
|
|
id="pattern-public"
|
|
label={t('public')}
|
|
update={setIsPublic}
|
|
docs={docs.public}
|
|
list={[
|
|
{
|
|
val: true,
|
|
label: (
|
|
<div className="flex flex-row items-center flex-wrap justify-between w-full">
|
|
<span>{t('publicPattern')}</span>
|
|
<OkIcon
|
|
className="w-8 h-8 text-success bg-base-100 rounded-full p-1"
|
|
stroke={4}
|
|
/>
|
|
</div>
|
|
),
|
|
desc: t('publicPatternDesc'),
|
|
},
|
|
{
|
|
val: false,
|
|
label: (
|
|
<div className="flex flex-row items-center flex-wrap justify-between w-full">
|
|
<span>{t('privatePattern')}</span>
|
|
<NoIcon className="w-8 h-8 text-error bg-base-100 rounded-full p-1" stroke={3} />
|
|
</div>
|
|
),
|
|
desc: t('privatePatternDesc'),
|
|
},
|
|
]}
|
|
current={isPublic}
|
|
/>
|
|
) : null}
|
|
|
|
{/* notes: Control level determines whether or not to show this */}
|
|
<span id="notes"></span>
|
|
{account.control >= conf.account.patterns.notes ? (
|
|
<MarkdownInput
|
|
id="pattern-notes"
|
|
label={t('notes')}
|
|
update={setNotes}
|
|
docs={docs.notes}
|
|
current={notes}
|
|
placeholder={t('mdSupport')}
|
|
/>
|
|
) : null}
|
|
<button
|
|
onClick={save}
|
|
className="btn btn-primary btn-lg flex flex-row items-center gap-4 mx-auto mt-8"
|
|
>
|
|
<UploadIcon />
|
|
{t('saveThing', { thing: t('account:pattern') })}
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export const PatternCard = ({
|
|
pattern,
|
|
href = false,
|
|
onClick = false,
|
|
useA = false,
|
|
size = 'md',
|
|
}) => {
|
|
const sizes = {
|
|
lg: 96,
|
|
md: 52,
|
|
sm: 36,
|
|
xs: 20,
|
|
}
|
|
const s = sizes[size]
|
|
|
|
const wrapperProps = {
|
|
className: `bg-base-300 w-full mb-2 mx-auto flex flex-col items-start text-center justify-center rounded shadow py-4 h-${s} w-${s}`,
|
|
style: {
|
|
backgroundImage: `url(${cloudflareImageUrl({ type: 'w1000', id: pattern.img })})`,
|
|
backgroundSize: 'cover',
|
|
backgroundRepeat: 'no-repeat',
|
|
backgroundPosition: '50%',
|
|
},
|
|
}
|
|
if (pattern.img === 'default-avatar') wrapperProps.style.backgroundPosition = 'bottom right'
|
|
|
|
const inner = null
|
|
|
|
// Is it a button with an onClick handler?
|
|
if (onClick)
|
|
return (
|
|
<button {...wrapperProps} onClick={onClick}>
|
|
{inner}
|
|
</button>
|
|
)
|
|
|
|
// Returns a link to an internal page
|
|
if (href && !useA)
|
|
return (
|
|
<Link {...wrapperProps} href={href}>
|
|
{inner}
|
|
</Link>
|
|
)
|
|
|
|
// Returns a link to an external page
|
|
if (href && useA)
|
|
return (
|
|
<a {...wrapperProps} href={href}>
|
|
{inner}
|
|
</a>
|
|
)
|
|
|
|
// Returns a div
|
|
return <div {...wrapperProps}>{inner}</div>
|
|
}
|
|
|
|
// Component for the account/patterns page
|
|
export const Patterns = () => {
|
|
const router = useRouter()
|
|
const { locale } = router
|
|
|
|
// Hooks
|
|
const backend = useBackend()
|
|
const { t } = useTranslation(ns)
|
|
const { setLoadingStatus, LoadingProgress } = useContext(LoadingStatusContext)
|
|
|
|
// State
|
|
const [patterns, setPatterns] = useState([])
|
|
const [selected, setSelected] = useState({})
|
|
const [refresh, setRefresh] = useState(0)
|
|
|
|
// Helper var to see how many are selected
|
|
const selCount = Object.keys(selected).length
|
|
|
|
// Effects
|
|
useEffect(() => {
|
|
const getPatterns = async () => {
|
|
const result = await backend.getPatterns()
|
|
if (result.success) setPatterns(result.data.patterns)
|
|
}
|
|
getPatterns()
|
|
}, [refresh])
|
|
|
|
// Helper method to toggle single selection
|
|
const toggleSelect = (id) => {
|
|
const newSelected = { ...selected }
|
|
if (newSelected[id]) delete newSelected[id]
|
|
else newSelected[id] = 1
|
|
setSelected(newSelected)
|
|
}
|
|
|
|
// Helper method to toggle select all
|
|
const toggleSelectAll = () => {
|
|
if (selCount === patterns.length) setSelected({})
|
|
else {
|
|
const newSelected = {}
|
|
for (const pattern of patterns) newSelected[pattern.id] = 1
|
|
setSelected(newSelected)
|
|
}
|
|
}
|
|
|
|
// Helper to delete one or more patterns
|
|
const removeSelectedPatterns = async () => {
|
|
let i = 0
|
|
for (const pattern in selected) {
|
|
i++
|
|
await backend.removePattern(pattern)
|
|
setLoadingStatus([
|
|
true,
|
|
<LoadingProgress val={i} max={selCount} msg={t('removingPatterns')} key="linter" />,
|
|
])
|
|
}
|
|
setSelected({})
|
|
setRefresh(refresh + 1)
|
|
setLoadingStatus([true, 'nailedIt', true, true])
|
|
}
|
|
|
|
return (
|
|
<div className="max-w-4xl xl:pl-4">
|
|
<p className="text-center md:text-right">
|
|
<Link className="btn btn-primary capitalize w-full md:w-auto" href="/new/pattern">
|
|
<PlusIcon />
|
|
{t('patternNew')}
|
|
</Link>
|
|
</p>
|
|
{selCount ? (
|
|
<button className="btn btn-error" onClick={removeSelectedPatterns}>
|
|
<TrashIcon /> {selCount} {t('patterns')}
|
|
</button>
|
|
) : null}
|
|
<TableWrapper>
|
|
<table className="table table-auto">
|
|
<thead className="border border-base-300 border-b-2 border-t-0 border-x-0">
|
|
<tr className="">
|
|
<th className="">
|
|
<input
|
|
type="checkbox"
|
|
className="checkbox checkbox-secondary"
|
|
onClick={toggleSelectAll}
|
|
checked={patterns.length === selCount}
|
|
/>
|
|
</th>
|
|
<th>{t('account:img')}</th>
|
|
<th>{t('account:name')}</th>
|
|
<th>{t('account:design')}</th>
|
|
<th>{t('account:createdAt')}</th>
|
|
<th>{t('account:public')}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{patterns.map((pattern, i) => (
|
|
<tr key={i}>
|
|
<td className="text-base font-medium">
|
|
<input
|
|
type="checkbox"
|
|
checked={selected[pattern.id] ? true : false}
|
|
className="checkbox checkbox-secondary"
|
|
onClick={() => toggleSelect(pattern.id)}
|
|
/>
|
|
</td>
|
|
<td className="text-base font-medium">
|
|
<PatternCard
|
|
href={`/account/patterns/${pattern.id}`}
|
|
pattern={pattern}
|
|
size="xs"
|
|
/>
|
|
</td>
|
|
<td className="text-base font-medium">
|
|
<PageLink href={`/account/patterns/${pattern.id}`} txt={pattern.name} />
|
|
</td>
|
|
<td className="text-base font-medium">
|
|
<PageLink href={`/designs/${pattern.design}`} txt={capitalize(pattern.design)} />
|
|
</td>
|
|
<td className="text-base font-medium">
|
|
{shortDate(locale, pattern.createdAt, false)}
|
|
</td>
|
|
<td className="text-base font-medium">
|
|
{pattern.public ? <BoolYesIcon /> : <BoolNoIcon />}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</TableWrapper>
|
|
<BackToAccountButton />
|
|
</div>
|
|
)
|
|
}
|