wip: Work on account/patterns pages
This commit is contained in:
joostdecock
parent
dbe1a04552
commit
196bf6decf
16 changed files with 874 additions and 1020 deletions
|
|
@ -129,6 +129,7 @@ react:
|
|||
axios: *axios
|
||||
highlight.js: "^11.11.0"
|
||||
html-react-parser: "^5.0.7"
|
||||
luxon: "^3.5.0"
|
||||
nuqs: "^1.17.6"
|
||||
react-markdown: "^9.0.1"
|
||||
use-local-storage-state: "19.1.0"
|
||||
|
|
|
|||
|
|
@ -84,6 +84,7 @@ packageJson:
|
|||
"./components/Icon": "./components/Icon/index.mjs"
|
||||
"./components/Input": "./components/Input/index.mjs"
|
||||
"./components/Json": "./components/Json/index.mjs"
|
||||
"./components/KeyVal": "./components/KeyVal/index.mjs"
|
||||
"./components/Layout": "./components/Layout/index.mjs"
|
||||
"./components/LineDrawing": "./components/LineDrawing/index.mjs"
|
||||
"./components/Link": "./components/Link/index.mjs"
|
||||
|
|
@ -96,6 +97,8 @@ packageJson:
|
|||
"./components/SignIn": "./components/SignIn/index.mjs"
|
||||
"./components/Spinner": "./components/Spinner/index.mjs"
|
||||
"./components/Tab": "./components/Tab/index.mjs"
|
||||
"./components/Table": "./components/Table/index.mjs"
|
||||
"./components/Time": "./components/Time/index.mjs"
|
||||
"./components/Yaml": "./components/Yaml/index.mjs"
|
||||
"./components/Xray": "./components/Xray/index.mjs"
|
||||
# Context
|
||||
|
|
@ -104,6 +107,7 @@ packageJson:
|
|||
# Hooks
|
||||
"./hooks/useAccount": "./hooks/useAccount/index.mjs"
|
||||
"./hooks/useBackend": "./hooks/useBackend/index.mjs"
|
||||
"./hooks/useSelection": "./hooks/useSelection/index.mjs"
|
||||
# Lib
|
||||
"./lib/RestClient": "./lib/RestClient/index.mjs"
|
||||
"./lib/logoPath": "./components/Logo/path.mjs"
|
||||
|
|
|
|||
25
package-lock.json
generated
25
package-lock.json
generated
|
|
@ -28341,6 +28341,10 @@
|
|||
"resolved": "designs/hugo",
|
||||
"link": true
|
||||
},
|
||||
"node_modules/@freesewing/i18n": {
|
||||
"resolved": "packages/i18n",
|
||||
"link": true
|
||||
},
|
||||
"node_modules/@freesewing/jaeger": {
|
||||
"resolved": "designs/jaeger",
|
||||
"link": true
|
||||
|
|
@ -47212,6 +47216,14 @@
|
|||
"node": "14 || >=16.14"
|
||||
}
|
||||
},
|
||||
"node_modules/luxon": {
|
||||
"version": "3.5.0",
|
||||
"resolved": "https://registry.npmjs.org/luxon/-/luxon-3.5.0.tgz",
|
||||
"integrity": "sha512-rh+Zjr6DNfUYR3bPwJEnuwDdqMbxZW7LOQfUN4B54+Cl+0o5zaU9RJ6bcidfDtC1cWCZXQ+nvX8bf6bAji37QQ==",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/magic-string": {
|
||||
"version": "0.25.9",
|
||||
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
|
||||
|
|
@ -61552,6 +61564,18 @@
|
|||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"packages/i18n": {
|
||||
"version": "3.3.0-rc.1",
|
||||
"license": "MIT",
|
||||
"devDependencies": {},
|
||||
"engines": {
|
||||
"node": ">= 20"
|
||||
},
|
||||
"funding": {
|
||||
"type": "individual",
|
||||
"url": "https://freesewing.org/patrons/join"
|
||||
}
|
||||
},
|
||||
"packages/models": {
|
||||
"name": "@freesewing/models",
|
||||
"version": "3.3.0-rc.1",
|
||||
|
|
@ -61925,6 +61949,7 @@
|
|||
"axios": "1.7.2",
|
||||
"highlight.js": "^11.11.0",
|
||||
"html-react-parser": "^5.0.7",
|
||||
"luxon": "^3.5.0",
|
||||
"nuqs": "^1.17.6",
|
||||
"react-markdown": "^9.0.1",
|
||||
"use-local-storage-state": "19.1.0",
|
||||
|
|
|
|||
401
packages/react/components/Account/Pattern.mjs
Normal file
401
packages/react/components/Account/Pattern.mjs
Normal file
|
|
@ -0,0 +1,401 @@
|
|||
// Dependencies
|
||||
import orderBy from 'lodash/orderBy.js'
|
||||
import {
|
||||
cloudflareImageUrl,
|
||||
capitalize,
|
||||
shortDate,
|
||||
horFlexClasses,
|
||||
newPatternUrl,
|
||||
} from '@freesewing/utils'
|
||||
import { urls, control as controlConfig } from '@freesewing/config'
|
||||
|
||||
// Context
|
||||
import { LoadingStatusContext } from '@freesewing/react/context/LoadingStatus'
|
||||
import { ModalContext } from '@freesewing/react/context/Modal'
|
||||
|
||||
// Hooks
|
||||
import React, { useState, useEffect, useContext } from 'react'
|
||||
import { useAccount } from '@freesewing/react/hooks/useAccount'
|
||||
import { useBackend } from '@freesewing/react/hooks/useBackend'
|
||||
import { useSelection } from '@freesewing/react/hooks/useSelection'
|
||||
|
||||
// Components
|
||||
import Markdown from 'react-markdown'
|
||||
import {
|
||||
StringInput,
|
||||
MarkdownInput,
|
||||
PassiveImageInput,
|
||||
ListInput,
|
||||
} from '@freesewing/react/components/Input'
|
||||
import { Link as WebLink, AnchorLink } from '@freesewing/react/components/Link'
|
||||
import {
|
||||
BoolNoIcon,
|
||||
BoolYesIcon,
|
||||
CloneIcon,
|
||||
EditIcon,
|
||||
FreeSewingIcon,
|
||||
OkIcon,
|
||||
NoIcon,
|
||||
PatternIcon,
|
||||
ShowcaseIcon,
|
||||
ResetIcon,
|
||||
UploadIcon,
|
||||
} from '@freesewing/react/components/Icon'
|
||||
import { DisplayRow } from './shared.mjs'
|
||||
import { TimeAgo } from '@freesewing/react/components/Time'
|
||||
import { Popout } from '@freesewing/react/components/Popout'
|
||||
import { ModalWrapper } from '@freesewing/react/components/Modal'
|
||||
import { KeyVal } from '@freesewing/react/components/KeyVal'
|
||||
|
||||
export const Pattern = ({ id, Link }) => {
|
||||
if (!Link) Link = WebLink
|
||||
// Hooks
|
||||
const { account, control } = useAccount()
|
||||
const { setLoadingStatus } = useContext(LoadingStatusContext)
|
||||
const backend = useBackend()
|
||||
|
||||
// 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, 'Loading pattern from backend'])
|
||||
const [status, body] = await backend.getPattern(id)
|
||||
if (status === 200) {
|
||||
setPattern(body.pattern)
|
||||
setName(body.pattern.name)
|
||||
setImage(body.pattern.image)
|
||||
setIsPublic(body.pattern.public ? true : false)
|
||||
setNotes(body.pattern.notes)
|
||||
setLoadingStatus([true, 'Loaded pattern', true, true])
|
||||
} else setLoadingStatus([true, 'An error occured. Please report this', true, false])
|
||||
}
|
||||
if (id) getPattern()
|
||||
}, [id])
|
||||
|
||||
const save = async () => {
|
||||
setLoadingStatus([true, 'Gathering info'])
|
||||
// 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, 'Saving pattern'])
|
||||
const [status, body] = await backend.updatePattern(pattern.id, data)
|
||||
if (status === 200 && body.result === 'success') {
|
||||
setPattern(body.pattern)
|
||||
setEdit(false)
|
||||
setLoadingStatus([true, 'Nailed it', true, true])
|
||||
} else setLoadingStatus([true, 'An error occured. Please report this.', true, false])
|
||||
}
|
||||
|
||||
const clone = async () => {
|
||||
setLoadingStatus([true, 'Cloning pattern'])
|
||||
// Compile data
|
||||
const data = { ...pattern }
|
||||
delete data.id
|
||||
delete data.createdAt
|
||||
delete data.data
|
||||
delete data.userId
|
||||
delete data.img
|
||||
data.settings = JSON.parse(data.settings)
|
||||
const [status, body] = await backend.createPattern(data)
|
||||
if (status === 201 && body.result === 'created') {
|
||||
setLoadingStatus([true, 'Loading newly created pattern', true, true])
|
||||
window.location = `/account/pattern/?id=${body.pattern.id}`
|
||||
} else setLoadingStatus([true, 'We failed to create this pattern', true, false])
|
||||
}
|
||||
|
||||
const togglePublic = async () => {
|
||||
setLoadingStatus([true, 'Updating pattern'])
|
||||
// Compile data
|
||||
const data = { public: !pattern.public }
|
||||
const [status, body] = await backend.updatePattern(pattern.id, data)
|
||||
if (status === 200 && body.result === 'success') {
|
||||
setPattern(body.pattern)
|
||||
setLoadingStatus([true, 'Nailed it', true, true])
|
||||
} else setLoadingStatus([true, 'An error occured. Please report this.', true, false])
|
||||
}
|
||||
if (!pattern) return null
|
||||
|
||||
const header = (
|
||||
<PatternHeader {...{ pattern, Link, account, setModal, setEdit, togglePublic, save, clone }} />
|
||||
)
|
||||
|
||||
if (!edit)
|
||||
return (
|
||||
<div className="max-w-2xl">
|
||||
{pattern.public ? (
|
||||
<Popout note>
|
||||
<h5>This is the private view of your pattern</h5>
|
||||
<p>
|
||||
Everyone can access the public view since this is a public pattern.
|
||||
<br />
|
||||
But only you can access this private view.
|
||||
</p>
|
||||
<p className="text-right">
|
||||
<Link
|
||||
className={`daisy-btn daisy-btn-secondary hover:text-secondary-content hover:no-underline`}
|
||||
href={`/pattern?id=${pattern.id}`}
|
||||
>
|
||||
<PatternIcon />
|
||||
Public View
|
||||
</Link>
|
||||
</p>
|
||||
</Popout>
|
||||
) : null}
|
||||
{header}
|
||||
{control >= controlConfig.account.patterns.notes && (
|
||||
<>
|
||||
<h3>Notes</h3>
|
||||
<Markdown>{pattern.notes}</Markdown>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
|
||||
return (
|
||||
<div className="max-w-2xl">
|
||||
<h2>Edit pattern {pattern.name}</h2>
|
||||
|
||||
{/* Name is always shown */}
|
||||
<span id="name"></span>
|
||||
<StringInput
|
||||
id="pattern-name"
|
||||
label="Name"
|
||||
update={setName}
|
||||
current={name}
|
||||
original={pattern.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 >= controlConfig.account.sets.img ? (
|
||||
<PassiveImageInput
|
||||
id="pattern-img"
|
||||
label="Image"
|
||||
update={setImage}
|
||||
current={image}
|
||||
valid={(val) => val.length > 0}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
{/* public: Control level determines whether or not to show this */}
|
||||
<span id="public"></span>
|
||||
{account.control >= controlConfig.account.patterns.public ? (
|
||||
<ListInput
|
||||
id="pattern-public"
|
||||
label="Public"
|
||||
update={setIsPublic}
|
||||
list={[
|
||||
{
|
||||
val: true,
|
||||
label: (
|
||||
<div className="flex flex-row items-center flex-wrap justify-between w-full">
|
||||
<span>Public Pattern</span>
|
||||
<OkIcon
|
||||
className="w-8 h-8 text-success bg-base-100 rounded-full p-1"
|
||||
stroke={4}
|
||||
/>
|
||||
</div>
|
||||
),
|
||||
desc: 'Public patterns can be shared with other FreeSewing users',
|
||||
},
|
||||
{
|
||||
val: false,
|
||||
label: (
|
||||
<div className="flex flex-row items-center flex-wrap justify-between w-full">
|
||||
<span>Private Pattern</span>
|
||||
<NoIcon className="w-8 h-8 text-error bg-base-100 rounded-full p-1" stroke={3} />
|
||||
</div>
|
||||
),
|
||||
desc: 'Private patterns are yours and yours alone',
|
||||
},
|
||||
]}
|
||||
current={isPublic}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
{/* notes: Control level determines whether or not to show this */}
|
||||
<span id="notes"></span>
|
||||
{account.control >= controlConfig.account.patterns.notes ? (
|
||||
<MarkdownInput id="pattern-notes" label="Notes" update={setNotes} current={notes} />
|
||||
) : null}
|
||||
<div className="flex flex-row items-center align-end gap-2 mt-8">
|
||||
<button
|
||||
onClick={() => setEdit(false)}
|
||||
className={`daisy-btn daisy-btn-primary daisy-btn-outline`}
|
||||
>
|
||||
<ResetIcon />
|
||||
Cancel
|
||||
</button>
|
||||
<button onClick={save} className="daisy-btn daisy-btn-primary grow">
|
||||
<UploadIcon />
|
||||
Save Pattern
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export const PatternCard = ({
|
||||
pattern,
|
||||
href = false,
|
||||
onClick = false,
|
||||
useA = false,
|
||||
size = 'md',
|
||||
Link = false,
|
||||
}) => {
|
||||
if (!Link) Link = WebLink
|
||||
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 w-${s} aspect-square`,
|
||||
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>
|
||||
}
|
||||
|
||||
const BadgeLink = ({ label, href }) => (
|
||||
<a
|
||||
href={href}
|
||||
className="daisy-badge daisy-badge-secondary font-bold daisy-badge-lg hover:text-secondary-content hover:no-underline"
|
||||
>
|
||||
{label}
|
||||
</a>
|
||||
)
|
||||
|
||||
/**
|
||||
* Helper component to show the pattern title, image, and various buttons
|
||||
*/
|
||||
const PatternHeader = ({
|
||||
pattern,
|
||||
Link,
|
||||
account,
|
||||
setModal,
|
||||
setEdit,
|
||||
togglePublic,
|
||||
save,
|
||||
clone,
|
||||
}) => (
|
||||
<>
|
||||
<h2>{pattern.name}</h2>
|
||||
<div className="flex flex-row flex-wrap gap-2 text-sm items-center mb-2">
|
||||
<KeyVal k="ID" val={pattern.id} color="secondary" />
|
||||
<KeyVal k="Created" val={<TimeAgo iso={pattern.createdAt} />} color="secondary" />
|
||||
<KeyVal k="Updated" val={<TimeAgo iso={pattern.updatedAt} />} color="secondary" />
|
||||
<KeyVal k="Public" val={pattern.public ? 'yes' : 'no'} color="secondary" />
|
||||
</div>
|
||||
<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" Link={Link} />
|
||||
</div>
|
||||
<div className="flex flex-col justify-end gap-2 mb-2 grow">
|
||||
{account.control > 3 && (pattern?.public || pattern.userId === account.id) ? (
|
||||
<div className="flex flex-row gap-2 items-center">
|
||||
<BadgeLink label="JSON" href={`${urls.backend}/patterns/${pattern.id}.json`} />
|
||||
<BadgeLink label="YAML" href={`${urls.backend}/patterns/${pattern.id}.yaml`} />
|
||||
</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={`daisy-btn daisy-btn-secondary daisy-btn-outline ${horFlexClasses}`}
|
||||
>
|
||||
<ShowcaseIcon />
|
||||
Show Image
|
||||
</button>
|
||||
{account.control > 3 ? (
|
||||
<button
|
||||
onClick={() => togglePublic()}
|
||||
className={`daisy-btn daisy-btn-${pattern.public ? 'error' : 'success'} daisy-btn-outline ${horFlexClasses} hover:text-${pattern.public ? 'error' : 'success'}-content`}
|
||||
>
|
||||
{pattern.public ? <BoolNoIcon /> : <BoolYesIcon />}
|
||||
Make pattern {pattern.public ? 'private' : 'public'}
|
||||
</button>
|
||||
) : null}
|
||||
{pattern.userId === account.id && (
|
||||
<>
|
||||
<Link
|
||||
href={`/account/patterns/${pattern.design}/edit?id=${pattern.id}`}
|
||||
className={`daisy-btn daisy-btn-primary daisy-btn-outline ${horFlexClasses}`}
|
||||
>
|
||||
<FreeSewingIcon /> Update Pattern
|
||||
</Link>
|
||||
<button
|
||||
className={`daisy-btn daisy-btn-primary daisy-btn-outline ${horFlexClasses}`}
|
||||
onClick={clone}
|
||||
>
|
||||
<CloneIcon /> Clone Pattern
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setEdit(true)}
|
||||
className={`daisy-btn daisy-btn-primary ${horFlexClasses}`}
|
||||
>
|
||||
<EditIcon /> Edit Pattern Metadata
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
236
packages/react/components/Account/Patterns.mjs
Normal file
236
packages/react/components/Account/Patterns.mjs
Normal file
|
|
@ -0,0 +1,236 @@
|
|||
// Dependencies
|
||||
import orderBy from 'lodash/orderBy.js'
|
||||
import { capitalize, shortDate } from '@freesewing/utils'
|
||||
|
||||
// Context
|
||||
import { LoadingStatusContext } from '@freesewing/react/context/LoadingStatus'
|
||||
//import { ModalContext } from '@freesewing/react/context/Modal'
|
||||
|
||||
// Hooks
|
||||
import React, { useState, useEffect, useContext } from 'react'
|
||||
import { useAccount } from '@freesewing/react/hooks/useAccount'
|
||||
import { useBackend } from '@freesewing/react/hooks/useBackend'
|
||||
import { useSelection } from '@freesewing/react/hooks/useSelection'
|
||||
|
||||
//import {
|
||||
// measurements,
|
||||
// isDegreeMeasurement,
|
||||
// control as controlConfig,
|
||||
// urls,
|
||||
//} from '@freesewing/config'
|
||||
//import { measurements as measurementTranslations } from '@freesewing/i18n'
|
||||
//import { measurements as designMeasurements } from '@freesewing/collection'
|
||||
//import {
|
||||
// cloudflareImageUrl,
|
||||
// capitalize,
|
||||
// formatMm,
|
||||
// horFlexClasses,
|
||||
// linkClasses,
|
||||
// notEmpty,
|
||||
// roundDistance,
|
||||
// shortDate,
|
||||
// timeAgo,
|
||||
//} from '@freesewing/utils'
|
||||
|
||||
//// Hooks
|
||||
//import React, { useState, useEffect, Fragment, useContext } from 'react'
|
||||
//import { useAccount } from '@freesewing/react/hooks/useAccount'
|
||||
//import { useBackend } from '@freesewing/react/hooks/useBackend'
|
||||
// Components
|
||||
import { TableWrapper } from '@freesewing/react/components/Table'
|
||||
import { PatternCard } from '@freesewing/react/components/Account'
|
||||
import { Link as WebLink } from '@freesewing/react/components/Link'
|
||||
import {
|
||||
BoolNoIcon,
|
||||
BoolYesIcon,
|
||||
// CloneIcon,
|
||||
// CuratedMeasurementsSetIcon,
|
||||
// EditIcon,
|
||||
// ShowcaseIcon,
|
||||
// NewMeasurementsSetIcon,
|
||||
// NoIcon,
|
||||
// OkIcon,
|
||||
PlusIcon,
|
||||
RightIcon,
|
||||
// ResetIcon,
|
||||
TrashIcon,
|
||||
// UploadIcon,
|
||||
// // WarningIcon,
|
||||
// // BoolYesIcon,
|
||||
// // BoolNoIcon,
|
||||
} from '@freesewing/react/components/Icon'
|
||||
//import { BookmarkButton, MsetCard } from '@freesewing/react/components/Account'
|
||||
//import {
|
||||
// DesignInput,
|
||||
// MarkdownInput,
|
||||
// ListInput,
|
||||
// MeasieInput,
|
||||
// PassiveImageInput,
|
||||
// StringInput,
|
||||
// ToggleInput,
|
||||
//} from '@freesewing/react/components/Input'
|
||||
//import { DisplayRow } from './shared.mjs'
|
||||
//import Markdown from 'react-markdown'
|
||||
//import { ModalWrapper } from '@freesewing/react/components/Modal'
|
||||
//import { Json } from '@freesewing/react/components/Json'
|
||||
//import { Yaml } from '@freesewing/react/components/Yaml'
|
||||
//import { Popout } from '@freesewing/react/components/Popout'
|
||||
|
||||
const t = (input) => {
|
||||
console.log('t called', input)
|
||||
return input
|
||||
}
|
||||
|
||||
/*
|
||||
* Component for the account/patterns page
|
||||
*
|
||||
* @params {object} props - All React props
|
||||
* @params {function} Link - A framework specific Link component for client-side routing
|
||||
*/
|
||||
export const Patterns = ({ Link = false }) => {
|
||||
if (!Link) Link = WebLink
|
||||
|
||||
// State
|
||||
const [patterns, setPatterns] = useState([])
|
||||
const [refresh, setRefresh] = useState(0)
|
||||
const [order, setOrder] = useState('id')
|
||||
const [desc, setDesc] = useState(false)
|
||||
|
||||
// Hooks
|
||||
const backend = useBackend()
|
||||
const { setLoadingStatus, LoadingProgress } = useContext(LoadingStatusContext)
|
||||
const { count, selection, setSelection, toggle, toggleAll } = useSelection(patterns)
|
||||
|
||||
// Effects
|
||||
useEffect(() => {
|
||||
const getPatterns = async () => {
|
||||
setLoadingStatus([true, 'Loading patterns from backend'])
|
||||
const [status, body] = await backend.getPatterns()
|
||||
console.log({ status, body })
|
||||
if (status === 200) {
|
||||
setPatterns(body.patterns)
|
||||
setLoadingStatus([true, 'Patterns loaded', true, true])
|
||||
} else setLoadingStatus([false, 'Failed to load patterns from backend', true, true])
|
||||
}
|
||||
getPatterns()
|
||||
}, [refresh])
|
||||
|
||||
// Helper to delete one or more patterns
|
||||
const removeSelectedPatterns = async () => {
|
||||
let i = 0
|
||||
for (const pattern in selection) {
|
||||
i++
|
||||
await backend.removePattern(pattern)
|
||||
setLoadingStatus([
|
||||
true,
|
||||
<LoadingProgress val={i} max={count} msg="Removing patterns" key="linter" />,
|
||||
])
|
||||
}
|
||||
setSelection({})
|
||||
setRefresh(refresh + 1)
|
||||
setLoadingStatus([true, 'Nailed it', true, true])
|
||||
}
|
||||
|
||||
const fields = {
|
||||
id: '#',
|
||||
img: 'Image',
|
||||
name: 'Name',
|
||||
design: 'Design',
|
||||
createdAt: 'Date',
|
||||
public: 'Public',
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-row flex-wrap gap-2 items-center justify-between mb-4">
|
||||
<button
|
||||
className="daisy-btn daisy-btn-error"
|
||||
onClick={removeSelectedPatterns}
|
||||
disabled={count < 1}
|
||||
>
|
||||
<TrashIcon /> {count} {t('patterns')}
|
||||
</button>
|
||||
<Link
|
||||
className="daisy-btn daisy-btn-primary capitalize w-full md:w-auto hover:text-primary-content"
|
||||
href="/-/"
|
||||
>
|
||||
<PlusIcon />
|
||||
Create a new pattern
|
||||
</Link>
|
||||
</div>
|
||||
<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="daisy-checkbox daisy-checkbox-secondary"
|
||||
onClick={toggleAll}
|
||||
checked={patterns.length === count}
|
||||
/>
|
||||
</th>
|
||||
{Object.keys(fields).map((field) => (
|
||||
<th key={field}>
|
||||
<button
|
||||
className="daisy-btn daisy-btn-link capitalize px-0 underline hover:decoration-4 decoration-2 text-secondary"
|
||||
onClick={() => (order === field ? setDesc(!desc) : setOrder(field))}
|
||||
>
|
||||
{fields[field]}{' '}
|
||||
<RightIcon
|
||||
stroke={3}
|
||||
className={`w-4 h-4 ${desc ? '-' : ''}rotate-90 ${order === field ? '' : 'opacity-0'}`}
|
||||
/>
|
||||
</button>
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{orderBy(patterns, order, desc ? 'desc' : 'asc').map((pattern, i) => (
|
||||
<tr key={i}>
|
||||
<td className="text-base font-medium">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selection[pattern.id] ? true : false}
|
||||
className="daisy-checkbox daisy-checkbox-secondary"
|
||||
onClick={() => toggle(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"
|
||||
Link={Link}
|
||||
/>
|
||||
</td>
|
||||
<td className="text-base font-medium">
|
||||
<Link
|
||||
href={`/account/pattern?id=${pattern.id}`}
|
||||
className="text-secondary underline decoration-2 hover:decoration-4"
|
||||
>
|
||||
{pattern.name}
|
||||
</Link>
|
||||
</td>
|
||||
<td className="text-base font-medium">
|
||||
<Link
|
||||
href={`/designs/${pattern.design}`}
|
||||
className="text-secondary underline decoration-2 hover:decoration-4"
|
||||
>
|
||||
{capitalize(pattern.design)}
|
||||
</Link>
|
||||
</td>
|
||||
<td className="text-base font-medium">{shortDate(pattern.createdAt)}</td>
|
||||
<td className="text-base font-medium">
|
||||
{pattern.public ? <BoolYesIcon /> : <BoolNoIcon />}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</TableWrapper>
|
||||
</>
|
||||
)
|
||||
}
|
||||
File diff suppressed because it is too large
Load diff
|
|
@ -4,5 +4,18 @@ import { Bookmarks, BookmarkButton } from './Bookmarks.mjs'
|
|||
import { Links } from './Links.mjs'
|
||||
import { Set, NewSet } from './Set.mjs'
|
||||
import { Sets, MsetCard } from './Sets.mjs'
|
||||
import { Patterns } from './Patterns.mjs'
|
||||
import { Pattern, PatternCard } from './Pattern.mjs'
|
||||
|
||||
export { Bookmarks, BookmarkButton, Links, Set, NewSet, Sets, MsetCard }
|
||||
export {
|
||||
Bookmarks,
|
||||
BookmarkButton,
|
||||
Links,
|
||||
Set,
|
||||
NewSet,
|
||||
Sets,
|
||||
MsetCard,
|
||||
Patterns,
|
||||
Pattern,
|
||||
PatternCard,
|
||||
}
|
||||
|
|
|
|||
38
packages/react/components/KeyVal/index.mjs
Normal file
38
packages/react/components/KeyVal/index.mjs
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
import React, { useState, useContext } from 'react'
|
||||
import { CopyToClipboard as Copy } from 'react-copy-to-clipboard'
|
||||
import { LoadingStatusContext } from '@freesewing/react/context/LoadingStatus'
|
||||
|
||||
export const KeyVal = ({ k, val, color = 'primary', small = false }) => {
|
||||
const [copied, setCopied] = useState(false)
|
||||
const { setLoadingStatus } = useContext(LoadingStatusContext)
|
||||
|
||||
return (
|
||||
<Copy text={val} onCopy={() => handleCopied(setCopied, setLoadingStatus, k)}>
|
||||
<button>
|
||||
<span
|
||||
className={`${sharedClasses} rounded-l${small ? '' : '-lg'} text-${color}-content bg-${color} border-${color} ${small ? 'text-xs' : ''}`}
|
||||
>
|
||||
{k}
|
||||
</span>
|
||||
<span
|
||||
className={`${sharedClasses} rounded-r${small ? '' : '-lg'} text-${color} bg-base-100 border-${color} ${small ? 'text-xs' : ''}`}
|
||||
>
|
||||
{val}
|
||||
</span>
|
||||
</button>
|
||||
</Copy>
|
||||
)
|
||||
}
|
||||
|
||||
const sharedClasses = `px-1 text-sm font-medium whitespace-nowrap border-2`
|
||||
|
||||
const handleCopied = (setCopied, setLoadingStatus, label) => {
|
||||
setCopied(true)
|
||||
setLoadingStatus([
|
||||
true,
|
||||
label ? `${label} copied to clipboard` : 'Copied to clipboard',
|
||||
true,
|
||||
true,
|
||||
])
|
||||
setTimeout(() => setCopied(false), 1000)
|
||||
}
|
||||
|
|
@ -1,3 +1,6 @@
|
|||
// Dependencies
|
||||
import { cloudflareImageUrl } from '@freesewing/utils'
|
||||
// Components
|
||||
import React, { forwardRef } from 'react'
|
||||
import { Svg as DefaultSvg } from './svg.mjs'
|
||||
import { Defs as DefaultDefs } from './defs.mjs'
|
||||
|
|
@ -11,6 +14,7 @@ import { Grid as DefaultGrid } from './grid.mjs'
|
|||
import { Text as DefaultText, TextOnPath as DefaultTextOnPath } from './text.mjs'
|
||||
import { Circle as DefaultCircle } from './circle.mjs'
|
||||
import { getId, getProps, withinPartBounds, translateStrings } from './utils.mjs'
|
||||
import { Link as WebLink } from '@freesewing/react/components/Link'
|
||||
|
||||
/*
|
||||
* Allow people to override these components
|
||||
|
|
|
|||
9
packages/react/components/Table/index.mjs
Normal file
9
packages/react/components/Table/index.mjs
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
import React from 'react'
|
||||
|
||||
/*
|
||||
* Tables on mobile will almost always break the layout
|
||||
* unless we set the overflow behaviour explicitly
|
||||
*/
|
||||
export const TableWrapper = ({ children }) => (
|
||||
<div className="max-w-full overflow-x-auto">{children}</div>
|
||||
)
|
||||
58
packages/react/components/Time/index.mjs
Normal file
58
packages/react/components/Time/index.mjs
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
import React from 'react'
|
||||
import { DateTime, Interval } from 'luxon'
|
||||
|
||||
const day = 86400000
|
||||
const hour = 3600000
|
||||
const minute = 60000
|
||||
const second = 1000
|
||||
|
||||
export const DateAndTime = ({ iso }) => {
|
||||
const dt = DateTime.fromISO(iso)
|
||||
return dt.toLocaleString(DateTime.DATETIME_MED)
|
||||
}
|
||||
|
||||
export const TimeForHumans = ({ iso, future = false }) => {
|
||||
const suffix = future ? 'from now' : 'ago'
|
||||
const dates = [DateTime.fromISO(iso), DateTime.now()]
|
||||
if (future) dates.reverse()
|
||||
const i = Interval.fromDateTimes(...dates)
|
||||
.toDuration(['minutes', 'hours', 'days', 'months', 'years'])
|
||||
.toObject()
|
||||
const years = Math.floor(i.years)
|
||||
const months = Math.floor(i.months)
|
||||
const days = Math.floor(i.days)
|
||||
const hours = Math.floor(i.hours)
|
||||
const minutes = Math.floor(i.minutes)
|
||||
if (years < 1 && months < 1 && days < 1 && hours < 1 && minutes < 1) return `seconds ${suffix}`
|
||||
else if (years < 1 && months < 1 && days < 1 && hours < 1)
|
||||
return minutes < 2 ? `one minute ${suffix}` : `${minutes} minutes ${suffix}`
|
||||
else if (i.years < 1 && i.months < 1 && i.days < 1)
|
||||
return hours < 2 ? `${hours * 60 + minutes} minutes ${suffix}` : `${hours} hours ${suffix}`
|
||||
else if (years < 1 && months < 1)
|
||||
return days < 2 ? `${days * 24 + hours} hours ${suffix}` : `${days} days ${suffix}`
|
||||
else if (years < 1)
|
||||
return months < 4 ? `${months} months and ${days} days ${suffix}` : `${months} months ${suffix}`
|
||||
if (years < 3) return `${years * 12 + i.months} months ${suffix}`
|
||||
return `${years} years ${suffix}`
|
||||
}
|
||||
|
||||
export const TimeAgo = (props) => <TimeForHumans {...props} />
|
||||
export const TimeToGo = (props) => <TimeForHumans {...props} future />
|
||||
|
||||
export const TimeAgoBrief = ({ time }) => {
|
||||
const d = Math.floor(Date.now() - time)
|
||||
if (d > day) return `${Math.floor(d / day)}d ago`
|
||||
if (d > hour) return `${Math.floor(d / hour)}h ago`
|
||||
if (d > minute * 2) return `${Math.floor(d / minute)}m ago`
|
||||
if (d > second) return `${Math.floor(d / second)}s ago`
|
||||
return `${d}ms ago`
|
||||
}
|
||||
|
||||
export const TimeToGoBrief = ({ time }) => {
|
||||
const d = Math.floor(time * 1000 - Date.now())
|
||||
if (d > day) return `${Math.floor(d / day)}d`
|
||||
if (d > hour) return `${Math.floor(d / hour)}h`
|
||||
if (d > minute * 2) return `${Math.floor(d / minute)}m`
|
||||
if (d > second) return `${Math.floor(d / second)}s`
|
||||
return `${d}s`
|
||||
}
|
||||
40
packages/react/hooks/useSelection/index.mjs
Normal file
40
packages/react/hooks/useSelection/index.mjs
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
import React, { useState } from 'react'
|
||||
|
||||
export const useSelection = (items) => {
|
||||
const [selection, setSelection] = useState({})
|
||||
|
||||
/*
|
||||
* This variable keeps track of how many are selected
|
||||
*/
|
||||
const count = Object.keys(selection).length
|
||||
|
||||
/*
|
||||
* This method toggles a single item in the selection
|
||||
*/
|
||||
const toggle = (id) => {
|
||||
const newSelection = { ...selection }
|
||||
if (newSelection[id]) delete newSelection[id]
|
||||
else newSelection[id] = 1
|
||||
setSelection(newSelection)
|
||||
}
|
||||
|
||||
/*
|
||||
* This method toggles all on or off
|
||||
*/
|
||||
const toggleAll = () => {
|
||||
if (count === items.length) setSelection({})
|
||||
else {
|
||||
const newSelection = {}
|
||||
for (const item of items) newSelection[item.id] = 1
|
||||
setSelection(newSelection)
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
count,
|
||||
selection,
|
||||
setSelection,
|
||||
toggle,
|
||||
toggleAll,
|
||||
}
|
||||
}
|
||||
|
|
@ -37,6 +37,7 @@
|
|||
"./components/Icon": "./components/Icon/index.mjs",
|
||||
"./components/Input": "./components/Input/index.mjs",
|
||||
"./components/Json": "./components/Json/index.mjs",
|
||||
"./components/KeyVal": "./components/KeyVal/index.mjs",
|
||||
"./components/Layout": "./components/Layout/index.mjs",
|
||||
"./components/LineDrawing": "./components/LineDrawing/index.mjs",
|
||||
"./components/Link": "./components/Link/index.mjs",
|
||||
|
|
@ -49,12 +50,15 @@
|
|||
"./components/SignIn": "./components/SignIn/index.mjs",
|
||||
"./components/Spinner": "./components/Spinner/index.mjs",
|
||||
"./components/Tab": "./components/Tab/index.mjs",
|
||||
"./components/Table": "./components/Table/index.mjs",
|
||||
"./components/Time": "./components/Time/index.mjs",
|
||||
"./components/Yaml": "./components/Yaml/index.mjs",
|
||||
"./components/Xray": "./components/Xray/index.mjs",
|
||||
"./context/LoadingStatus": "./context/LoadingStatus/index.mjs",
|
||||
"./context/Modal": "./context/Modal/index.mjs",
|
||||
"./hooks/useAccount": "./hooks/useAccount/index.mjs",
|
||||
"./hooks/useBackend": "./hooks/useBackend/index.mjs",
|
||||
"./hooks/useSelection": "./hooks/useSelection/index.mjs",
|
||||
"./lib/RestClient": "./lib/RestClient/index.mjs",
|
||||
"./lib/logoPath": "./components/Logo/path.mjs"
|
||||
},
|
||||
|
|
@ -69,6 +73,7 @@
|
|||
"axios": "1.7.2",
|
||||
"highlight.js": "^11.11.0",
|
||||
"html-react-parser": "^5.0.7",
|
||||
"luxon": "^3.5.0",
|
||||
"nuqs": "^1.17.6",
|
||||
"react-markdown": "^9.0.1",
|
||||
"use-local-storage-state": "19.1.0",
|
||||
|
|
|
|||
|
|
@ -244,6 +244,12 @@ export function measurementAsUnits(mmValue, units = 'metric') {
|
|||
return round(mmValue / (units === 'imperial' ? 25.4 : 10), 3)
|
||||
}
|
||||
|
||||
/** Generate a URL to create a new pattern with a given design, settings, and view */
|
||||
export const newPatternUrl = ({ design, settings = {}, view = 'draft' }) =>
|
||||
`/-/#settings=${encodeURIComponent(
|
||||
JSON.stringify(settings)
|
||||
)}&view=${encodeURIComponent('"' + view + '"')}`
|
||||
|
||||
/*
|
||||
* A method to ensure input is not empty
|
||||
*
|
||||
|
|
|
|||
17
sites/org/docs/account/pattern/index.mdx
Normal file
17
sites/org/docs/account/pattern/index.mdx
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
---
|
||||
title: Pattern
|
||||
sidebar_label: ' '
|
||||
sidebar_position: 99
|
||||
---
|
||||
|
||||
import { getSearchParam } from '@freesewing/utils'
|
||||
import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus'
|
||||
import { RoleBlock } from '@freesewing/react/components/Role'
|
||||
import { Pattern } from '@freesewing/react/components/Account'
|
||||
import Link from '@docusaurus/Link'
|
||||
|
||||
<DocusaurusDoc>
|
||||
<RoleBlock user>
|
||||
<Pattern Link={Link} id={getSearchParam('id')} />
|
||||
</RoleBlock>
|
||||
</DocusaurusDoc>
|
||||
15
sites/org/docs/account/patterns/index.mdx
Normal file
15
sites/org/docs/account/patterns/index.mdx
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
---
|
||||
title: Your Patterns
|
||||
sidebar_position: 3
|
||||
---
|
||||
|
||||
import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus'
|
||||
import { RoleBlock } from '@freesewing/react/components/Role'
|
||||
import { Patterns as AccountPatterns } from '@freesewing/react/components/Account'
|
||||
import Link from '@docusaurus/Link'
|
||||
|
||||
<DocusaurusDoc>
|
||||
<RoleBlock user>
|
||||
<AccountPatterns Link={Link} />
|
||||
</RoleBlock>
|
||||
</DocusaurusDoc>
|
||||
Loading…
Add table
Add a link
Reference in a new issue