VSinerva/freesewing
1
0
Fork 0
Code Activity

feat(shared): More work on sets

Browse source
This commit is contained in:
joostdecock 2023-08-23 17:41:34 +02:00
parent dad2fa0e99
commit 62f76b32f7
19 changed files with 368 additions and 216 deletions
Download patch file Download diff file Expand all files Collapse all files

7
sites/backend/src/models/set.mjs
View file

@ -206,6 +206,13 @@ SetModel.prototype.revealSet = function (mset) {
//console.log(err)
}
}
for (const field of this.jsonFields) {
try {
clear[field] = JSON.parse(clear[field])
} catch (err) {
//console.log(err)
}
}
return { ...mset, ...clear }
}

5
sites/org/components/header/en.yaml
View file

@ -8,6 +8,5 @@ account: Account
theme: Theme
language: Language
search: Search
sets: Measurements
patterns: Patterns
new: New
new: New...
support: Support

24
sites/org/components/header/index.mjs
View file

@ -14,8 +14,8 @@ import {
UserIcon,
ThemeIcon,
I18nIcon,
MeasieIcon,
PageIcon,
HeartIcon,
PlusIcon,
RssIcon,
} from 'shared/components/icons.mjs'
import { HeaderWrapper } from 'shared/components/wrappers/header.mjs'
@ -71,23 +71,23 @@ const NavIcons = ({ setModal, setSearch }) => {
</NavButton>
<NavSpacer />
<NavButton
href="/patterns"
label={t('header:patterns')}
href="/new"
label={t('header:new')}
color={spectrum[5]}
extraClasses="hidden lg:flex"
>
<PageIcon className={iconSize} />
<PlusIcon className={iconSize} />
</NavButton>
<NavButton href="/account" label={t('header:account')} color={spectrum[6]}>
<UserIcon className={iconSize} />
</NavButton>
<NavButton
href="/sets"
label={t('header:sets')}
color={spectrum[6]}
href="/support"
label={t('header:support')}
color={spectrum[7]}
extraClasses="hidden lg:flex"
>
<MeasieIcon className={iconSize} />
</NavButton>
<NavButton href="/account" label={t('header:account')} color={spectrum[7]}>
<UserIcon className={iconSize} />
<HeartIcon className={iconSize} />
</NavButton>
<NavSpacer />
<NavButton

1
sites/org/pages/account/sets/[id].mjs
View file

@ -11,6 +11,7 @@ import { ns as setsNs } from 'shared/components/account/sets.mjs'
// Translation namespaces used on this page
const ns = nsMerge(setsNs, authNs, pageNs)
console.log(ns)
/*
* Some things should never generated as SSR

1
sites/org/pages/index.mjs
View file

@ -8,7 +8,6 @@ import { useEffect, useState } from 'react'
// Components
import Head from 'next/head'
import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
//import { PageLink } from 'shared/components/page-link.mjs'
import { BareLayout } from 'site/components/layouts/bare.mjs'
import { ForceAccountCheck } from 'shared/components/account/force-account-check.mjs'
import {

2
sites/org/pages/newsletter/subscribe/[...tokens].mjs
View file

@ -10,7 +10,7 @@ import { LoadingContext } from 'shared/context/loading-context.mjs'
// Components
import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
import { Popout } from 'shared/components/popout/index.mjs'
import { PageLink } from 'shared/components/page-link.mjs'
import { PageLink } from 'shared/components/link.mjs'
// Translation namespaces used on this page
const namespaces = nsMerge(pageNs, 'newsletter')

2
sites/org/pages/newsletter/unsubscribe/[...tokens].mjs
View file

@ -10,7 +10,7 @@ import { LoadingContext } from 'shared/context/loading-context.mjs'
// Components
import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
import { Popout } from 'shared/components/popout/index.mjs'
import { PageLink } from 'shared/components/page-link.mjs'
import { PageLink } from 'shared/components/link.mjs'
// Translation namespaces used on this page
const namespaces = nsMerge(pageNs, 'newsletter')

2
sites/org/pages/patrons/index.mjs
View file

@ -8,7 +8,7 @@ import { useAccount } from 'shared/hooks/use-account.mjs'
import { useEffect, useState } from 'react'
// Components
import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
import { PageLink } from 'shared/components/page-link.mjs'
import { PageLink } from 'shared/components/link.mjs'
// Translation namespaces used on this page
const namespaces = nsMerge(pageNs, 'patrons')

2
sites/org/pages/profile.mjs
View file

@ -7,7 +7,7 @@ import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
import { ns as authNs } from 'shared/components/wrappers/auth/index.mjs'
import { Popout } from 'shared/components/popout/index.mjs'
import { PageLink } from 'shared/components/page-link.mjs'
import { PageLink } from 'shared/components/link.mjs'
import { BackToAccountButton } from 'shared/components/account/shared.mjs'
// Translation namespaces used on this page

3
sites/org/pages/support.mjs
View file

@ -5,10 +5,9 @@ import { nsMerge } from 'shared/utils.mjs'
import { useTranslation } from 'next-i18next'
// Components
import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
import { WebLink } from 'shared/components/web-link.mjs'
import { WebLink, Link } from 'shared/components/link.mjs'
import { Popout } from 'shared/components/popout/index.mjs'
import { DiscordIcon, GitHubIcon } from 'shared/components/icons.mjs'
import Link from 'next/link'
import { Joost } from 'shared/components/joost.mjs'
// Translation namespaces used on this page

3
sites/shared/components/account/en.yaml
View file

@ -211,6 +211,9 @@ privateSetDesc: These measurments cannot be used by other users or visitors
permalink: Permalink
editThing: Edit {thing}
saveThing: Save {thing}
filterByDesign: Filter by design
noFilter: Do not filter
filterByDesignDocs: If you have a specific design in mind, you can <b>filter by design</b> to only list those measurements that are required for this design.
patternNew: Generate a new pattern
patternNewInfo: Pick a design, add your measurements set, and we'll generate a made-to-measure sewing pattern for you.

191
sites/shared/components/account/links.mjs
View file

@ -3,7 +3,7 @@ import { useAccount } from 'shared/hooks/use-account.mjs'
import { useBackend } from 'shared/hooks/use-backend.mjs'
import { useTranslation } from 'next-i18next'
import Link from 'next/link'
import { freeSewingConfig as conf } from 'shared/config/freesewing.config.mjs'
import { freeSewingConfig as conf, controlLevels } from 'shared/config/freesewing.config.mjs'
import {
DesignIcon,
MeasieIcon,
@ -90,7 +90,7 @@ const YesNo = ({ check }) =>
)
export const AccountLinks = () => {
const { account, signOut } = useAccount()
const { account, signOut, control } = useAccount()
const { t } = useTranslation(ns)
const backend = useBackend()
@ -145,7 +145,6 @@ export const AccountLinks = () => {
),
mfa: <YesNo check={false} />,
}
for (const social of Object.keys(conf.account.fields.identities).filter((i) => i !== 'github'))
itemPreviews[social] = account.data[social] || (
<NoIcon className="text-base-content w-6 h-6" stroke={2} />
@ -156,102 +155,128 @@ export const AccountLinks = () => {
<div className="grid grid-cols-1 xl:grid-cols-2 gap-4 mb-8">
<div className="">
<h4 className="my-2">{t('data')}</h4>
{Object.keys(conf.account.fields.data).map((item) => (
<AccountLink href={`/account/${item}`} title={t(item)} key={item}>
<div className="flex flex-row items-center gap-3 font-medium">
{itemIcons[item]}
{t(`your${capitalize(item)}`)}
</div>
<div className="">{itemPreviews[item]}</div>
</AccountLink>
))}
{Object.keys(conf.account.fields.data).map((item) =>
controlLevels[item] > control ? null : (
<AccountLink href={`/account/${item}`} title={t(item)} key={item}>
<div className="flex flex-row items-center gap-3 font-medium">
{itemIcons[item]}
{t(`your${capitalize(item)}`)}
</div>
<div className="">{itemPreviews[item]}</div>
</AccountLink>
)
)}
</div>
<div className="">
<h4 className="my-2">{t('info')}</h4>
{Object.keys(conf.account.fields.info).map((item) => (
<AccountLink href={`/account/${item}`} title={t(item)} key={item}>
{control > 1 && (
<div className="">
<h4 className="my-2">{t('info')}</h4>
{Object.keys(conf.account.fields.info).map((item) =>
controlLevels[item] > control ? null : (
<AccountLink href={`/account/${item}`} title={t(item)} key={item}>
<div className="flex flex-row items-center gap-3 font-medium">
{itemIcons[item]}
{t(item)}
</div>
<div className="">{itemPreviews[item]}</div>
</AccountLink>
)
)}
<div className={`${itemClasses} bg-neutral`}>
<div className="flex flex-row items-center gap-3 font-medium">
{itemIcons[item]}
{t(item)}
<FingerprintIcon />
<span>{t('userId')}</span>
</div>
<div className="">{itemPreviews[item]}</div>
</AccountLink>
))}
<div className={`${itemClasses} bg-neutral`}>
<div className="flex flex-row items-center gap-3 font-medium">
<FingerprintIcon />
<span>{t('userId')}</span>
<div className="">{account.id}</div>
</div>
<div className="">{account.id}</div>
</div>
</div>
)}
<div className="">
<h4 className="my-2">{t('settings')}</h4>
{Object.keys(conf.account.fields.settings).map((item) => (
<AccountLink href={`/account/${item}`} title={t(item)} key={item}>
<div className="flex flex-row items-center gap-3 font-medium">
{itemIcons[item]}
{t(item)}
</div>
<div className="">{itemPreviews[item]}</div>
</AccountLink>
))}
{Object.keys(conf.account.fields.settings).map((item) =>
controlLevels[item] > control ? null : (
<AccountLink href={`/account/${item}`} title={t(item)} key={item}>
<div className="flex flex-row items-center gap-3 font-medium">
{itemIcons[item]}
{t(item)}
</div>
<div className="">{itemPreviews[item]}</div>
</AccountLink>
)
)}
</div>
<div className="">
<h4 className="my-2">{t('linkedIdentities')}</h4>
{Object.keys(conf.account.fields.identities).map((item) => (
<AccountLink href={`/account/${item}`} title={t(item)} key={item}>
<div className="flex flex-row items-center gap-3 font-medium">
{itemIcons[item]}
{t(item)}
</div>
<div className="">{itemPreviews[item]}</div>
</AccountLink>
))}
</div>
{control > 2 && (
<div className="">
<h4 className="my-2">{t('linkedIdentities')}</h4>
{Object.keys(conf.account.fields.identities).map((item) =>
controlLevels[item] > control ? null : (
<AccountLink href={`/account/${item}`} title={t(item)} key={item}>
<div className="flex flex-row items-center gap-3 font-medium">
{itemIcons[item]}
{t(item)}
</div>
<div className="">{itemPreviews[item]}</div>
</AccountLink>
)
)}
</div>
)}
<div className="">
<h4 className="my-2">{t('security')}</h4>
{Object.keys(conf.account.fields.security).map((item) => (
<AccountLink href={`/account/${item}`} title={t(item)} key={item}>
<div className="flex flex-row items-center gap-3 font-medium">
{itemIcons[item]}
{t(item)}
</div>
<div className="">{itemPreviews[item]}</div>
</AccountLink>
))}
</div>
{control > 1 && (
<div className="">
<h4 className="my-2">{t('security')}</h4>
{Object.keys(conf.account.fields.security).map((item) =>
controlLevels[item] > control ? null : (
<AccountLink href={`/account/${item}`} title={t(item)} key={item}>
<div className="flex flex-row items-center gap-3 font-medium">
{itemIcons[item]}
{t(item)}
</div>
<div className="">{itemPreviews[item]}</div>
</AccountLink>
)
)}
</div>
)}
<div className="">
<h4 className="my-2">{t('actions')}</h4>
<AccountLink href={`/account/reload`} title={t('reload')}>
<ReloadIcon />
{t('reload')}
</AccountLink>
<AccountLink href={`/account/export`} title={t('export')}>
<ExportIcon />
{t('export')}
</AccountLink>
<AccountLink href={`/account/restrict`} title={t('restrict')} color="warning">
<CloseIcon />
{t('restrict')}
</AccountLink>
<AccountLink href={`/account/remove`} title={t('remove')} color="error">
<TrashIcon />
{t('remove')}
</AccountLink>
</div>
{control > 1 && (
<div className="">
<h4 className="my-2">{t('actions')}</h4>
{control > 2 && (
<AccountLink href={`/account/reload`} title={t('reload')}>
<ReloadIcon />
{t('reload')}
</AccountLink>
)}
{control > 2 && (
<AccountLink href={`/account/export`} title={t('export')}>
<ExportIcon />
{t('export')}
</AccountLink>
)}
{control > 3 && (
<AccountLink href={`/account/restrict`} title={t('restrict')} color="warning">
<CloseIcon />
{t('restrict')}
</AccountLink>
)}
<AccountLink href={`/account/remove`} title={t('remove')} color="error">
<TrashIcon />
{t('remove')}
</AccountLink>
</div>
)}
</div>
<div className="flex flex-row flex-wrap gap-2 md:gap-4 justify-end">
<Link className={`${btnClasses} btn-primary md:w-64 w-full`} href="/profile">
<UserIcon />
{t('yourProfile')}
</Link>
{control > 1 && (
<Link className={`${btnClasses} btn-primary md:w-64 w-full`} href="/profile">
<UserIcon />
{t('yourProfile')}
</Link>
)}
<button className={`${btnClasses} btn-warning md:w-64 w-full`} onClick={() => signOut()}>
<SignoutIcon />
{t('signOut')}

241
sites/shared/components/account/sets.mjs
View file

@ -4,7 +4,7 @@ import { useTranslation } from 'next-i18next'
import orderBy from 'lodash.orderby'
import { measurements } from 'config/measurements.mjs'
import { measurements as designMeasurements } from 'shared/prebuild/data/design-measurements.mjs'
import { freeSewingConfig as conf } from 'shared/config/freesewing.config.mjs'
import { freeSewingConfig as conf, controlLevels } from 'shared/config/freesewing.config.mjs'
// Hooks
import { useDropzone } from 'react-dropzone'
import { useAccount } from 'shared/hooks/use-account.mjs'
@ -30,6 +30,8 @@ import {
UploadIcon,
CancelIcon,
ResetIcon,
MeasieIcon,
CalendarIcon,
} from 'shared/components/icons.mjs'
import { ModalWrapper } from 'shared/components/wrappers/modal.mjs'
import Markdown from 'react-markdown'
@ -43,6 +45,7 @@ import { useSetDocs } from 'shared/hooks/use-set-docs.mjs'
import { useMeasurementDocs } from 'shared/hooks/use-measurement-docs.mjs'
import { Lightbox } from 'shared/components/lightbox.mjs'
import { isDegreeMeasurement } from 'config/measurements.mjs'
import { TextOnBg } from 'shared/components/text-on-bg.mjs'
import {
StringInput,
@ -50,9 +53,11 @@ import {
ListInput,
MarkdownInput,
MeasieInput,
DesignDropdown,
ns as inputNs,
} from 'shared/components/inputs.mjs'
export const ns = ['account', 'patterns', 'status', 'measurements']
export const ns = [inputNs, 'account', 'patterns', 'status', 'measurements']
export const NewSet = () => {
// Hooks
@ -107,9 +112,71 @@ export const NewSet = () => {
export const MeasieVal = ({ val, m, imperial }) =>
isDegreeMeasurement(m) ? <span>{val}°</span> : <span>{formatMm(val, imperial)}</span>
export const MsetBanner = ({ set, control, onClick = false, href = false }) => {
const { t, i18n } = useTranslation(ns)
const info = []
if (control > 1)
info.push([
<CalendarIcon />,
<b>
<TextOnBg txt={shortDate(i18n.language, set.createdAt, false)} />
</b>,
])
info.push([
<MeasieIcon />,
<b>
<TextOnBg txt={(set.measies ? Object.keys(set.measies).length : 0) + ' ' + t('measies')} />
</b>,
])
if (control > 2)
info.push([
set.public ? (
<OkIcon className="w-6 h-6 text-success" stroke={4} />
) : (
<NoIcon className="w-6 h-6 text-error" stroke={3} />
),
<b>
<TextOnBg txt={t(set.public ? 'publicSet' : 'privateSet')} />
</b>,
])
const inner = (
<>
<h2 className="bg-base-100 px-4 rounded-lg bg-opacity-50 py-2 rounded-l-none">
<TextOnBg txt={set.name} />
</h2>
{info.map((item) => (
<div className="flex flex-row flex-wrap gap-2 bg-base-100 p-4 rounded bg-opacity-50 py-1 mt-2 rounded-l-none">
{item[0]}
{item[1]}
</div>
))}
</>
)
const props = {
className:
'bg-base-100 w-full mb-2 mx-auto flex flex-col items-start text-center justify-center rounded shadow py-4',
style: {
backgroundImage: `url(${cloudflareImageUrl({ type: 'w1000', id: set.img })})`,
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',
backgroundPosition: '50%',
},
}
return onClick ? (
<button {...props} onClick={onClick}>
{inner}
</button>
) : (
<Link {...props} href={href}>
{inner}
</Link>
)
}
export const Mset = ({ id, publicOnly = false }) => {
// Hooks
const { account } = useAccount()
const { account, control } = useAccount()
const { setLoadingStatus, LoadingStatus } = useLoadingStatus()
const backend = useBackend()
const { t } = useTranslation(ns)
@ -212,14 +279,9 @@ export const Mset = ({ id, publicOnly = false }) => {
const heading = (
<div className="flex flex-row flex-wrap gap-4 text-sm items-center justify-between mb-2">
<LoadingStatus />
<button
className="bg-base-100 w-full h-36 mb-2 mx-auto flex flex-col items-center text-center justify-center rounded shadow"
style={{
backgroundImage: `url(${cloudflareImageUrl({ type: 'w1000', id: mset.img })})`,
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',
backgroundPosition: '50%',
}}
<MsetBanner
set={mset}
control={control}
onClick={() =>
setModal(
<ModalWrapper flex="col" justify="top lg:justify-center" slideFrom="right">
@ -227,9 +289,7 @@ export const Mset = ({ id, publicOnly = false }) => {
</ModalWrapper>
)
}
>
<h2 className="bg-base-100 px-4 rounded-lg bg-opacity-70 py-2">{mset.name}</h2>
</button>
/>
{account.control > 3 && mset.public ? (
<div className="flex flex-row gap-2 items-center">
<a
@ -291,39 +351,43 @@ export const Mset = ({ id, publicOnly = false }) => {
<h2>{t('data')}</h2>
<Row title={t('name')}>{mset.name}</Row>
<Row title={t('image')}>
<img
src={cloudflareImageUrl({ type: 'sq100', id: mset.img })}
className="w-8 h-8 aspect-square rounded-full shadow"
/>
</Row>
<Row title={t('units')}>{mset.imperial ? t('imerialUnits') : t('metricUnits')}</Row>
<Row title={t('notes')}>
<Markdown>{mset.notes}</Markdown>
</Row>
<Row title={t('public')}>
{mset.public ? (
<OkIcon className="w-6 h-6 text-success" stroke={4} />
) : (
<NoIcon className="w-6 h-6 text-error" stroke={3} />
)}
</Row>
{mset.public && (
<Row title={t('permalink')}>
<PageLink href={`/sets/${mset.id}`} txt={`/sets/${mset.id}`} />
{control >= controlLevels.sets.notes && (
<Row title={t('notes')}>
<Markdown>{mset.notes}</Markdown>
</Row>
)}
<Row title={t('created')}>
<Timeago date={mset.createdAt} />
<span className="px-2 opacity-50">|</span>
{shortDate(locale, mset.createdAt, false)}
</Row>
<Row title={t('updated')}>
<Timeago date={mset.updatedAt} />
<span className="px-2 opacity-50">|</span>
{shortDate(locale, mset.createdAt, false)}
</Row>
<Row title={t('id')}>{mset.id}</Row>
{control >= controlLevels.sets.public && (
<>
<Row title={t('public')}>
{mset.public ? (
<OkIcon className="w-6 h-6 text-success" stroke={4} />
) : (
<NoIcon className="w-6 h-6 text-error" stroke={3} />
)}
</Row>
{mset.public && (
<Row title={t('permalink')}>
<PageLink href={`/sets/${mset.id}`} txt={`/sets/${mset.id}`} />
</Row>
)}
</>
)}
{control >= controlLevels.sets.createdAt && (
<Row title={t('created')}>
<Timeago date={mset.createdAt} />
<span className="px-2 opacity-50">|</span>
{shortDate(locale, mset.createdAt, false)}
</Row>
)}
{control >= controlLevels.sets.createdAt && (
<Row title={t('updated')}>
<Timeago date={mset.updatedAt} />
<span className="px-2 opacity-50">|</span>
{shortDate(locale, mset.createdAt, false)}
</Row>
)}
{control >= controlLevels.sets.id && <Row title={t('id')}>{mset.id}</Row>}
</div>
)
@ -337,37 +401,43 @@ export const Mset = ({ id, publicOnly = false }) => {
</li>
))}
<ul className="list list-disc list-inside ml-4">
{['name', 'image', 'public', 'units', 'notes'].map((id) => (
<li>
<AnchorLink id="name" txt={t('name')} />
</li>
{account.control >= conf.account.sets.img ? (
<li>
<AnchorLink id={id} txt={t(id)} />
<AnchorLink id="image" txt={t('image')} />
</li>
))}
) : null}
{['public', 'units', 'notes'].map((id) =>
account.control >= conf.account.sets[id] ? (
<li>
<AnchorLink id="units" txt={t(id)} />
</li>
) : null
)}
</ul>
</ul>
<h2 id="measies">{t('measies')}</h2>
<div className="flex flex-row items-center justify-center">
<button
className="btn btn-secondary btn-outline flex flex-row gap-4 rounded-r-none"
onClick={() =>
setModal(
<ModalDesignPicker
designs={Object.keys(designMeasurements)}
setModal={setModal}
setter={setFilter}
/>
)
<div className="bg-secondary px-4 pt-1 pb-4 rounded-lg shadow bg-opacity-10">
<DesignDropdown
update={setFilter}
label={t('filterByDesign')}
current={filter}
firstOption={<option value="">{t('noFilter')}</option>}
docs={
<div className="max-w-prose">
<h2>
{t('measies')}: {t('filterByDesign')}
</h2>
<p>
If you have a specific design in mind, you can <b>filter by design</b> to only list
those measurements that are required for this design.
</p>
</div>
}
>
<FilterIcon />
{filter ? t(`designs:${filter}.t`) : t(`designs:allDesigns`)}
</button>
<button
className="btn btn-secondary btn-outline rounded-l-none border-l-0"
onClick={() => setFilter(false)}
>
<ClearIcon />
</button>
/>
</div>
{filterMeasurements().map((mplus) => {
const [translated, m] = mplus.split('|')
@ -506,9 +576,12 @@ export const Mset = ({ id, publicOnly = false }) => {
// Component for the account/sets page
export const Sets = ({ title = true }) => {
// Hooks
const { control } = useAccount()
const backend = useBackend()
const { t } = useTranslation(ns)
const { t, i18n } = useTranslation(ns)
const { setLoadingStatus, LoadingStatus, LoadingProgress } = useLoadingStatus()
const router = useRouter()
const { locale } = router
// State
const [sets, setSets] = useState([])
@ -561,8 +634,13 @@ export const Sets = ({ title = true }) => {
return (
<div className="max-w-4xl xl:pl-4">
<LoadingStatus />
<p className="text-right">
<Link className="btn btn-primary capitalize btn-lg" bottom primary href="/new/set">
<p className="text-center md:text-right">
<Link
className="btn btn-primary capitalize w-full md:w-auto"
bottom
primary
href="/new/set"
>
{t('newSet')}
</Link>
</p>
@ -574,7 +652,7 @@ export const Sets = ({ title = true }) => {
<table className="table table-auto">
<thead className="border border-base-300 border-b-2 border-t-0 border-x-0">
<tr className="b">
<th className="text-base-300 text-base">
<th className="text-base-300 text-base w-4 px-1">
<input
type="checkbox"
className="checkbox checkbox-secondary"
@ -582,21 +660,13 @@ export const Sets = ({ title = true }) => {
checked={sets.length === selCount}
/>
</th>
<th className="text-base-300 text-base">{t('keyName')}</th>
<th className="text-base-300 text-base">
<span className="hidden md:inline">{t('keyLevel')}</span>
<span role="img" className="inline md:hidden">
🔐
</span>
</th>
<th className="text-base-300 text-base">{t('keyExpires')}</th>
<th className="text-base-300 text-base hidden md:block">{t('apiCalls')}</th>
<th className="text-base-300 text-base">{t('set')}</th>
</tr>
</thead>
<tbody>
{sets.map((set, i) => (
<tr key={i}>
<td className="text-base font-medium">
<td className="text-base font-medium px-0">
<input
type="checkbox"
checked={selected[set.id] ? true : false}
@ -604,12 +674,9 @@ export const Sets = ({ title = true }) => {
onClick={() => toggleSelect(set.id)}
/>
</td>
<td className="text-base font-medium">
<PageLink href={`/account/sets/${set.id}`} txt={set.name} />
<td className="text-base font-medium px-0">
<MsetBanner control={control} href={`/account/sets/${set.id}`} set={set} />
</td>
<td className="text-base font-medium"></td>
<td className="text-base font-medium"></td>
<td className="text-base font-medium hidden md:block"></td>
</tr>
))}
</tbody>

14
sites/shared/components/icons.mjs
View file

@ -60,12 +60,16 @@ export const BulletIcon = (props) => (
</IconWrapper>
)
export const Camera = (props) => (
export const CalendarIcon = (props) => (
<IconWrapper {...props}>
<>
<path d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
<path d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
</>
<path d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5" />
</IconWrapper>
)
export const CameraIcon = (props) => (
<IconWrapper {...props}>
<path d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
<path d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
</IconWrapper>
)

37
sites/shared/components/inputs.mjs
View file

@ -1,5 +1,6 @@
// Dependencies
import { cloudflareImageUrl } from 'shared/utils.mjs'
import { collection } from 'shared/hooks/use-design.mjs'
// Context
import { ModalContext } from 'shared/context/modal-context.mjs'
// Hooks
@ -19,7 +20,7 @@ import { measurementAsMm, formatMm, measurementAsUnits, parseDistanceInput } fro
//import { NumberInput } from 'shared/components/workbench/menus/shared/inputs.mjs'
//import { useState, useCallback } from 'react'
export const ns = ['account', 'measurements']
export const ns = ['account', 'measurements', 'designs']
/*
* Helper component to display a tab heading
@ -53,12 +54,12 @@ export const FormControl = ({
return (
<div className="form-control w-full mt-2">
<label className="label pb-0">
<label className={`label pb-0 ${docs ? 'hover:cursor-help' : ''}`}>
<span className="label-text text-lg font-bold mb-0">{label}</span>
{docs ? (
<span className="label-text-alt">
<button
className="btn btn-ghost btn-sm btn-circle"
className="btn btn-ghost btn-sm btn-circle hover:btn-secondary"
onClick={() =>
setModal(
<ModalWrapper flex="col" justify="top lg:justify-center" slideFrom="right">
@ -155,6 +156,36 @@ export const StringInput = ({
)
}
/*
* Dropdown for designs
*/
export const DesignDropdown = ({
label, // Label to use
update, // onChange handler
current, // The current value
docs = false, // Docs to load, if any
firstOption = null, // Any first option to add in addition to designs
}) => {
const { t, i18n } = useTranslation(['designs'])
console.log(i18n)
return (
<FormControl label={label} docs={docs}>
<select
className="select select-bordered w-full"
onChange={(evt) => update(evt.target.value)}
>
{firstOption}
{collection.map((design) => (
<option key={design} value={design}>
{t(`${design}.t`)}
</option>
))}
</select>
</FormControl>
)
}
/*
* Input for an image that is passive (it does not upload the image)
*/

10
sites/shared/components/text-on-bg.mjs Normal file
View file

@ -0,0 +1,10 @@
export const TextOnBg = ({ txt }) => (
<span
style={{
textShadow:
'1px 1px 1px hsl(var(--b1)), -1px -1px 1px hsl(var(--b1)), -1px 1px 1px hsl(var(--b1)), 1px -1px 1px hsl(var(--b1))',
}}
>
{txt}
</span>
)

23
sites/shared/config/freesewing.config.mjs
View file

@ -11,14 +11,14 @@ export const freeSewingConfig = {
account: {
fields: {
data: {
bookmarks: 1,
bookmarks: 2,
sets: 1,
patterns: 1,
apikeys: 4,
},
info: {
username: 2,
bio: 1,
bio: 2,
img: 2,
email: 3,
},
@ -32,7 +32,7 @@ export const freeSewingConfig = {
},
security: {
password: 2,
mfa: 4,
mfa: 3,
apikeys: 4,
},
identities: {
@ -48,10 +48,13 @@ export const freeSewingConfig = {
},
sets: {
name: 1,
img: 2,
img: 1,
public: 3,
units: 2,
units: 1,
notes: 2,
createdAt: 2,
updatedAt: 2,
id: 4,
},
patterns: {
name: 1,
@ -80,3 +83,13 @@ export const freeSewingConfig = {
},
},
}
export const controlLevels = {
...freeSewingConfig.account.fields.data,
...freeSewingConfig.account.fields.info,
...freeSewingConfig.account.fields.settings,
...freeSewingConfig.account.fields.security,
...freeSewingConfig.account.fields.identities,
sets: freeSewingConfig.account.sets,
patterns: freeSewingConfig.account.patterns,
}

1
sites/shared/hooks/use-account.mjs
View file

@ -61,5 +61,6 @@ export function useAccount() {
clearAdmin,
impersonate,
stopImpersonating,
control: account.control || 2,
}
}

15
sites/shared/prebuild/sitenav-org.mjs
View file

@ -89,10 +89,6 @@ export const extendSiteNav = async (siteNav, lang) => {
}
}
for (const key of ['patterns', 'sets', 'community']) {
siteNav[key] = { m: 1, s: key, t: t(`sections:${key}`) }
}
// Configure properties of blog and showcase sections
for (const key of ['blog', 'showcase']) {
siteNav[key].m = 1
@ -216,9 +212,8 @@ export const extendSiteNav = async (siteNav, lang) => {
// Add support
siteNav.support = {
_: 1,
m: 1,
s: 'support',
h: 1,
t: t('sections:support'),
}
@ -241,11 +236,9 @@ export const extendSiteNav = async (siteNav, lang) => {
siteNav.docs.o = 20
siteNav.blog.o = 30
siteNav.showcase.o = 40
siteNav.community.o = 50
siteNav.patterns.o = 60
siteNav.sets.o = 70
siteNav.account.o = 80
siteNav.new.o = 90
siteNav.new.o = 50
siteNav.account.o = 60
siteNav.support.o = 70
return siteNav
}