725 lines
24 KiB
JavaScript
725 lines
24 KiB
JavaScript
// Dependencies
|
|
import { useState, useEffect, useContext } from 'react'
|
|
import { useTranslation } from 'next-i18next'
|
|
import {
|
|
capitalize,
|
|
shortDate,
|
|
cloudflareImageUrl,
|
|
horFlexClasses,
|
|
newPatternUrl,
|
|
} from 'shared/utils.mjs'
|
|
import orderBy from 'lodash.orderby'
|
|
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 { Popout } from 'shared/components/popout/index.mjs'
|
|
import {
|
|
StringInput,
|
|
MarkdownInput,
|
|
PassiveImageInput,
|
|
ListInput,
|
|
} from 'shared/components/inputs.mjs'
|
|
import {
|
|
OkIcon,
|
|
NoIcon,
|
|
TrashIcon,
|
|
PlusIcon,
|
|
CameraIcon,
|
|
EditIcon,
|
|
ResetIcon,
|
|
RightIcon,
|
|
UploadIcon,
|
|
FreeSewingIcon,
|
|
CloneIcon,
|
|
BoolYesIcon,
|
|
BoolNoIcon,
|
|
LockIcon,
|
|
PatternIcon,
|
|
BookmarkIcon,
|
|
} from 'shared/components/icons.mjs'
|
|
import { DisplayRow } from './shared.mjs'
|
|
import { ModalWrapper } from 'shared/components/wrappers/modal.mjs'
|
|
import { Mdx } from 'shared/components/mdx/dynamic.mjs'
|
|
import Timeago from 'react-timeago'
|
|
import { TableWrapper } from 'shared/components/wrappers/table.mjs'
|
|
import { PatternReactPreview } from 'shared/components/pattern/preview.mjs'
|
|
import { Lightbox } from 'shared/components/lightbox.mjs'
|
|
import { DynamicMdx } from 'shared/components/mdx/dynamic.mjs'
|
|
|
|
export const ns = ['account', 'patterns', 'status']
|
|
|
|
export const ShowPattern = ({ id }) => {
|
|
// Hooks
|
|
const { setLoadingStatus } = useContext(LoadingStatusContext)
|
|
const backend = useBackend()
|
|
const { t, i18n } = useTranslation(ns)
|
|
const { account } = useAccount()
|
|
|
|
// State
|
|
const [pattern, setPattern] = useState()
|
|
const [isOwn, setIsOwn] = useState(false)
|
|
|
|
// Effect
|
|
useEffect(() => {
|
|
const getPattern = async () => {
|
|
setLoadingStatus([true, t('backendLoadingStarted')])
|
|
let result
|
|
try {
|
|
result = await backend.getPattern(id)
|
|
if (result.success) {
|
|
setPattern(result.data.pattern)
|
|
if (result.data.pattern.userId === account.userId) setIsOwn(true)
|
|
setLoadingStatus([true, 'backendLoadingCompleted', true, true])
|
|
} else {
|
|
result = await backend.getPublicPattern(id)
|
|
if (result.success) {
|
|
setPattern({ ...result.data, public: true })
|
|
setLoadingStatus([true, 'backendLoadingCompleted', true, true])
|
|
} else setLoadingStatus([true, 'backendError', true, false])
|
|
}
|
|
} catch (err) {
|
|
console.log(err)
|
|
setLoadingStatus([true, 'backendError', true, false])
|
|
}
|
|
}
|
|
if (id) getPattern()
|
|
}, [id])
|
|
|
|
const bookmarkPattern = async () => {
|
|
setLoadingStatus([true, 'creatingBookmark'])
|
|
const result = await backend.createBookmark({
|
|
type: 'pattern',
|
|
title: pattern.name,
|
|
url: `/patterns?id=${pattern.id}`,
|
|
})
|
|
if (result.success) {
|
|
const id = result.data.bookmark.id
|
|
setLoadingStatus([
|
|
true,
|
|
<>
|
|
{t('status:bookmarkCreated')} <small>[#{id}]</small>
|
|
</>,
|
|
true,
|
|
true,
|
|
])
|
|
} else setLoadingStatus([true, 'backendError', true, false])
|
|
}
|
|
|
|
if (!pattern) return <p>loading</p>
|
|
|
|
return (
|
|
<>
|
|
<div className="flex flex-row flex-wrap gap-4 max-w-7xl w-full">
|
|
<div className="max-w-lg grow w-full">
|
|
<Lightbox buttonClasses="w-full" boxClasses="" modalProps={{ fullWidth: 1 }}>
|
|
<PatternReactPreview {...pattern} />
|
|
</Lightbox>
|
|
</div>
|
|
<div className="w-full md:max-w-lg">
|
|
<DisplayRow title={t('name')}>{pattern.name}</DisplayRow>
|
|
<DisplayRow title="#">{pattern.id}</DisplayRow>
|
|
<DisplayRow title={t('account:publicView')}>
|
|
<PageLink href={`/pattern?id=${pattern.id}`} txt={`/pattern?id=${pattern.id}`} />
|
|
</DisplayRow>
|
|
<DisplayRow title={t('account:privateView')}>
|
|
<PageLink
|
|
href={`/account/pattern?id=${pattern.id}`}
|
|
txt={`/account/pattern?id=${pattern.id}`}
|
|
/>
|
|
</DisplayRow>
|
|
<DisplayRow title={t('created')}>
|
|
<Timeago date={pattern.createdAt} />
|
|
<span className="px-2 opacity-50">|</span>
|
|
{shortDate(i18n.language, pattern.createdAt, false)}
|
|
</DisplayRow>
|
|
<DisplayRow title={t('updated')}>
|
|
<Timeago date={pattern.createdAt} />
|
|
<span className="px-2 opacity-50">|</span>
|
|
{shortDate(i18n.language, pattern.updatedAt, false)}
|
|
</DisplayRow>
|
|
<DisplayRow title={t('public')}>
|
|
{pattern.public ? <BoolYesIcon /> : <BoolNoIcon />}
|
|
</DisplayRow>
|
|
<DisplayRow title={t('img')}>
|
|
<Lightbox buttonClasses="mask mask-squircle w-36 h-35">
|
|
<img src={cloudflareImageUrl({ id: pattern.img, variant: 'sq500' })} />
|
|
</Lightbox>
|
|
</DisplayRow>
|
|
{account.id ? (
|
|
<button className="btn btn-primary btn-outline mb-2 w-full" onClick={bookmarkPattern}>
|
|
<div className="flex flex-row items-center justify-between w-full">
|
|
<BookmarkIcon /> {t('bookmark')}
|
|
</div>
|
|
</button>
|
|
) : null}
|
|
<Link
|
|
href={newPatternUrl({ design: pattern.design, settings: pattern.settings })}
|
|
className={`btn btn-primary ${horFlexClasses}`}
|
|
>
|
|
<CloneIcon /> {t('clonePattern')}
|
|
</Link>
|
|
{isOwn ? (
|
|
<>
|
|
<Popout tip noP>
|
|
<p>{t('account:ownPublicPattern')}</p>
|
|
<Link
|
|
href={`/account/pattern?id=${pattern.id}/`}
|
|
className={`btn btn-secondary ${horFlexClasses} mt-2`}
|
|
>
|
|
<LockIcon /> {t('account:privateView')}
|
|
</Link>
|
|
</Popout>
|
|
</>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
<h2>{t('account:notes')}</h2>
|
|
{isOwn ? 'is own' : 'is not own'}
|
|
<Mdx md={pattern.notes} />
|
|
</>
|
|
)
|
|
}
|
|
|
|
export const Pattern = ({ id }) => {
|
|
// Hooks
|
|
const { account, control } = useAccount()
|
|
const { setLoadingStatus } = useContext(LoadingStatusContext)
|
|
const backend = useBackend()
|
|
const { t, i18n } = useTranslation(ns)
|
|
|
|
// 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])
|
|
}
|
|
if (id) getPattern()
|
|
}, [id])
|
|
|
|
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 (notes || notes !== pattern.notes) data.notes = notes
|
|
if ([true, false].includes(isPublic) && isPublic !== pattern.public) data.public = isPublic
|
|
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 && (
|
|
<>
|
|
{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={`/account/patterns/${pattern.design}/edit?id=${pattern.id}`}
|
|
className={`btn btn-primary btn-outline ${horFlexClasses}`}
|
|
>
|
|
<FreeSewingIcon /> {t('updatePattern')}
|
|
</Link>
|
|
<Link
|
|
href={newPatternUrl({ design: pattern.design, settings: pattern.settings })}
|
|
className={`btn btn-primary btn-outline ${horFlexClasses}`}
|
|
>
|
|
<CloneIcon /> {t('clonePattern')}
|
|
</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')}>
|
|
<Mdx md={pattern.notes} />
|
|
</DisplayRow>
|
|
)}
|
|
{control >= controlLevels.patterns.public && (
|
|
<>
|
|
<DisplayRow title={t('public')}>
|
|
{pattern.public ? <BoolYesIcon /> : <BoolNoIcon />}
|
|
</DisplayRow>
|
|
{pattern.public && (
|
|
<DisplayRow title={t('permalink')}>
|
|
<PageLink href={`/pattern?id=${pattern.id}`} txt={`/patternid=?${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>
|
|
)}
|
|
<Popout tip noP>
|
|
<p>{t('account:ownPrivatePattern')}</p>
|
|
<Link
|
|
className={`btn btn-secondary ${horFlexClasses}`}
|
|
href={`/pattern?id=${pattern.id}`}
|
|
>
|
|
<PatternIcon />
|
|
{t('account:publicView')}
|
|
</Link>
|
|
</Popout>
|
|
</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}
|
|
placeholder="Maurits Cornelis Escher"
|
|
valid={(val) => val && val.length > 0}
|
|
docs={<DynamicMdx language={i18n.language} slug="docs/about/site/patterns/name" />}
|
|
/>
|
|
|
|
{/* 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}
|
|
valid={(val) => val.length > 0}
|
|
docs={<DynamicMdx language={i18n.language} slug="docs/about/site/patterns/image" />}
|
|
/>
|
|
) : 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}
|
|
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}
|
|
docs={<DynamicMdx language={i18n.language} slug="docs/about/site/patterns/public" />}
|
|
/>
|
|
) : 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}
|
|
current={notes}
|
|
placeholder={t('mdSupport')}
|
|
docs={<DynamicMdx language={i18n.language} slug="docs/about/site/patterns/notes" />}
|
|
/>
|
|
) : 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 to show the sort header in the pattern table
|
|
const SortButton = ({ field, label, order, orderAsc, updateOrder }) => (
|
|
<button
|
|
onClick={() => updateOrder(field)}
|
|
className="btn-link text-secondary flex flex-row gap-2 items-center decoration-0 no-underline"
|
|
>
|
|
{label}
|
|
{order === field ? (
|
|
<RightIcon className={`w-5 h-5 ${orderAsc ? '-rotate-90' : 'rotate-90'}`} stroke={3} />
|
|
) : null}
|
|
</button>
|
|
)
|
|
|
|
// 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)
|
|
const [order, setOrder] = useState('id')
|
|
const [orderAsc, setOrderAsc] = useState(true)
|
|
|
|
// 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])
|
|
}
|
|
|
|
// Helper method to update the order state
|
|
const updateOrder = (field) => {
|
|
if (order !== field) {
|
|
setOrder(field)
|
|
setOrderAsc(true)
|
|
} else setOrderAsc(!orderAsc)
|
|
}
|
|
|
|
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>
|
|
<button className="btn btn-error" onClick={removeSelectedPatterns} disabled={selCount < 1}>
|
|
<TrashIcon /> {selCount} {t('patterns')}
|
|
</button>
|
|
<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>
|
|
<SortButton field="id" label="#" {...{ order, orderAsc, updateOrder }} />
|
|
</th>
|
|
<th>{t('account:img')}</th>
|
|
<th>
|
|
<SortButton
|
|
field="name"
|
|
label={t('account:name')}
|
|
{...{ order, orderAsc, updateOrder }}
|
|
/>
|
|
</th>
|
|
<th>
|
|
<SortButton
|
|
field="design"
|
|
label={t('account:design')}
|
|
{...{ order, orderAsc, updateOrder }}
|
|
/>
|
|
</th>
|
|
<th>
|
|
<SortButton
|
|
field="createdAt"
|
|
label={t('account:createdAt')}
|
|
{...{ order, orderAsc, updateOrder }}
|
|
/>
|
|
</th>
|
|
<th>
|
|
<SortButton
|
|
field="public"
|
|
label={t('account:public')}
|
|
{...{ order, orderAsc, updateOrder }}
|
|
/>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{orderBy(patterns, order, orderAsc ? 'asc' : 'desc').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">{pattern.id}</td>
|
|
<td className="text-base font-medium">
|
|
<PatternCard
|
|
href={`/account/pattern?id=${pattern.id}`}
|
|
pattern={pattern}
|
|
size="xs"
|
|
/>
|
|
</td>
|
|
<td className="text-base font-medium">
|
|
<PageLink href={`/account/pattern?id=${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>
|
|
)
|
|
}
|