276 lines
8.9 KiB
JavaScript
276 lines
8.9 KiB
JavaScript
// Dependencies
|
|
import { measurements as measurementsTranslations } from '@freesewing/i18n'
|
|
import { requiredMeasurements as designMeasurements } from '@freesewing/collection'
|
|
import { cloudflareImageUrl, hasRequiredMeasurements } from '@freesewing/utils'
|
|
// Context
|
|
import { LoadingStatusContext } from '@freesewing/react/context/LoadingStatus'
|
|
import { ModalContext } from '@freesewing/react/context/Modal'
|
|
// 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 { Link as WebLink } from '@freesewing/react/components/Link'
|
|
import { NoIcon, OkIcon, PlusIcon, TrashIcon, UploadIcon } from '@freesewing/react/components/Icon'
|
|
import { ModalWrapper } from '@freesewing/react/components/Modal'
|
|
import { NewSet } from './Set.mjs'
|
|
|
|
/**
|
|
* The component for the measurements sets in the user's account.
|
|
*
|
|
* @component
|
|
* @param {object} props - All component props
|
|
* @param {React.Component} props.Link - A framework specific Link component for client-side routing
|
|
* @returns {JSX.Element}
|
|
*/
|
|
export const Sets = ({ Link = false }) => {
|
|
if (!Link) Link = WebLink
|
|
|
|
// Hooks
|
|
const { control } = useAccount()
|
|
const backend = useBackend()
|
|
|
|
// State
|
|
const [sets, setSets] = useState([])
|
|
const [selected, setSelected] = useState({})
|
|
const [refresh, setRefresh] = useState(0)
|
|
|
|
// Context
|
|
const { setLoadingStatus, LoadingProgress } = useContext(LoadingStatusContext)
|
|
const { setModal } = useContext(ModalContext)
|
|
|
|
// Effects
|
|
useEffect(() => {
|
|
const getSets = async () => {
|
|
const [status, body] = await backend.getSets()
|
|
if (status === 200 && body.result === 'success') setSets(body.sets)
|
|
}
|
|
getSets()
|
|
}, [refresh])
|
|
|
|
// Helper var to see how many are selected
|
|
const selCount = Object.keys(selected).length
|
|
|
|
// 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 === sets.length) setSelected({})
|
|
else {
|
|
const newSelected = {}
|
|
for (const set of sets) newSelected[set.id] = 1
|
|
setSelected(newSelected)
|
|
}
|
|
}
|
|
|
|
// Helper to delete one or more measurements sets
|
|
const removeSelectedSets = async () => {
|
|
let i = 0
|
|
for (const id in selected) {
|
|
i++
|
|
await backend.removeSet(id)
|
|
setLoadingStatus([
|
|
true,
|
|
<LoadingProgress val={i} max={selCount} msg="Removing measurements sets" key="linter" />,
|
|
])
|
|
}
|
|
setSelected({})
|
|
setRefresh(refresh + 1)
|
|
setLoadingStatus([true, 'Nailed it', true, true])
|
|
}
|
|
|
|
return (
|
|
<div className="tw:max-w-7xl tw:xl:pl-4">
|
|
<p className="tw:text-center tw:md:text-right">
|
|
<Link
|
|
className="tw:daisy-btn tw:daisy-btn-secondary tw:capitalize tw:w-full tw:md:w-auto tw:mr-2 tw:hover:no-underline tw:hover:text-primary-content no-hover-decoration"
|
|
bottom
|
|
primary
|
|
href="/account/import"
|
|
>
|
|
<UploadIcon className="tw:w-6 tw:h-6 tw:text-secondary-content" />
|
|
<span className="tw:text-secondary-content">Import Measurements Sets</span>
|
|
</Link>
|
|
<button
|
|
className="tw:daisy-btn tw:daisy-btn-primary tw:capitalize tw:w-full tw:md:w-auto tw:hover:no-underline tw:hover:text-primary-content"
|
|
onClick={() =>
|
|
setModal(
|
|
<ModalWrapper keepOpenOnClick>
|
|
<NewSet />
|
|
</ModalWrapper>
|
|
)
|
|
}
|
|
>
|
|
<PlusIcon />
|
|
Create a new Measurements Set
|
|
</button>
|
|
</p>
|
|
<div className="tw:flex tw:flex-row tw:gap-2 tw:border-b-2 tw:mb-4 tw:pb-4 tw:mt-8 tw:h-14 tw:items-center">
|
|
<input
|
|
type="checkbox"
|
|
className="tw:daisy-checkbox tw:daisy-checkbox-secondary"
|
|
onClick={toggleSelectAll}
|
|
checked={sets.length === selCount}
|
|
/>
|
|
<button
|
|
className="tw:daisy-btn tw:daisy-btn-error"
|
|
onClick={removeSelectedSets}
|
|
disabled={selCount < 1}
|
|
>
|
|
<TrashIcon /> {selCount} Measurements Sets
|
|
</button>
|
|
</div>
|
|
<div className="tw:grid tw:grid-cols-2 tw:lg:grid-cols-4 tw:gap-2">
|
|
{sets.map((set, i) => (
|
|
<div
|
|
key={i}
|
|
className={`tw:flex tw:flex-row tw:items-start tw:gap-1 tw:border-2
|
|
${
|
|
selected[set.id]
|
|
? 'tw:border-solid tw:border-secondary'
|
|
: 'tw:border-dotted tw:border-base-300'
|
|
} tw:rounded-lg p-2`}
|
|
>
|
|
<label className="tw:w-8 tw:h-full tw:shrink-0">
|
|
<input
|
|
type="checkbox"
|
|
checked={selected[set.id] ? true : false}
|
|
className="tw:daisy-checkbox tw:daisy-checkbox-secondary"
|
|
onClick={() => toggleSelect(set.id)}
|
|
/>
|
|
</label>
|
|
<div className="tw:w-full">
|
|
<MsetCard
|
|
control={control}
|
|
href={`/account/data/sets/set?id=${set.id}`}
|
|
set={set}
|
|
size="md"
|
|
/>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
/**
|
|
* A component to render a card of a single measurements set.
|
|
*
|
|
* This is a pure render component, you need to pass in the data.
|
|
*
|
|
* @component
|
|
* @param {object} props - All component props
|
|
* @param {React.Component} [props.Link = false] - An optional framework-specific Link component
|
|
* @param {string} [props.design = false] - An optional design name to check for required measurements in this set
|
|
* @param {string} [props.href = false] - On optional href for the card to link to
|
|
* @param {function} [props.onClick = false] - On optional onClick handler method
|
|
* @param {object} props.set - The data of the measurements set
|
|
* @param {string} [props.size = 'lg'] - Size of the card, one of lg, md, or sm
|
|
* @param {bool} [props.useA = false] - Whether to use an A tag or a Link component for href
|
|
* @returns {JSX.Element}
|
|
*/
|
|
export const MsetCard = ({
|
|
Link = false,
|
|
design = false,
|
|
href = false,
|
|
onClick = false,
|
|
set,
|
|
size = 'lg',
|
|
useA = false,
|
|
}) => {
|
|
if (!Link) Link = WebLink
|
|
const sizes = {
|
|
lg: 96,
|
|
md: 48,
|
|
sm: 36,
|
|
}
|
|
const s = sizes[size]
|
|
|
|
const wrapperProps = {
|
|
className: `tw:bg-base-300 tw:aspect-square tw:h-${s} tw:w-${s} tw:mb-2 tw:grow tw:w-full
|
|
tw:hover:cursor-pointer tw:border-0 tw:opacity-80 tw:hover:opacity-100
|
|
tw:mx-auto tw:flex tw:flex-col tw:items-start tw:text-center tw:justify-between tw:rounded-none tw:md:rounded shadow`,
|
|
style: {
|
|
backgroundImage: `url(${cloudflareImageUrl({ type: 'w500', id: set.img })})`,
|
|
backgroundSize: 'cover',
|
|
backgroundRepeat: 'no-repeat',
|
|
backgroundPosition: '50%',
|
|
},
|
|
}
|
|
if (!set.img || set.img === 'default-avatar')
|
|
wrapperProps.style.backgroundPosition = 'bottom right'
|
|
|
|
let icon = <span></span>
|
|
let missingMeasies = ''
|
|
let linebreak = ''
|
|
const maxLength = 75
|
|
if (design) {
|
|
const [hasMeasies, missing] = hasRequiredMeasurements(
|
|
designMeasurements[design],
|
|
set.measies,
|
|
true
|
|
)
|
|
const iconClasses = 'tw:w-8 tw:h-8 tw:p-1 tw:rounded-full tw:-mt-2 tw:-ml-2 tw:shadow'
|
|
icon = hasMeasies ? (
|
|
<OkIcon className={`${iconClasses} tw:bg-success tw:text-success-content`} stroke={4} />
|
|
) : (
|
|
<NoIcon className={`${iconClasses} tw:bg-error tw:text-error-content`} stroke={3} />
|
|
)
|
|
if (missing.length > 0) {
|
|
const translated = missing.map((m) => measurementsTranslations[m])
|
|
let missingString = 'Missing:' + translated.join(', ')
|
|
if (missingString.length > maxLength) {
|
|
const lastSpace = missingString.lastIndexOf(', ', maxLength)
|
|
missingString = missingString.substring(0, lastSpace) + ', and more...'
|
|
}
|
|
const measieClasses = 'tw:font-normal tw:text-xs'
|
|
missingMeasies = <span className={`${measieClasses}`}>{missingString}</span>
|
|
linebreak = <br />
|
|
}
|
|
}
|
|
|
|
const inner = (
|
|
<>
|
|
{icon}
|
|
<span className="tw:bg-neutral/50 tw:text-neutral-content tw:px-4 tw:w-full tw:py-2 tw:rounded tw:rounded-t-none tw:font-bold tw:leading-5">
|
|
{set.name}
|
|
{linebreak}
|
|
{missingMeasies}
|
|
</span>
|
|
</>
|
|
)
|
|
|
|
// Is it a button with an onClick handler?
|
|
if (onClick)
|
|
return (
|
|
<button {...wrapperProps} onClick={() => onClick(set)}>
|
|
{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>
|
|
}
|