204 lines
7.1 KiB
TypeScript
204 lines
7.1 KiB
TypeScript
import { CurrentUserMark } from '../../types/mark.ts'
|
|
import {
|
|
findNextIncompleteCurrentUserMark,
|
|
getToolboxLabelByMarkType,
|
|
isCurrentUserMarksComplete,
|
|
isCurrentValueLast
|
|
} from '../../utils'
|
|
import React, { useState } from 'react'
|
|
import { MarkInput } from '../MarkTypeStrategy/MarkInput.tsx'
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
|
import { faCheck, faDownload } from '@fortawesome/free-solid-svg-icons'
|
|
import { Button } from '@mui/material'
|
|
import styles from './style.module.scss'
|
|
import { ButtonUnderline } from '../ButtonUnderline/index.tsx'
|
|
|
|
interface MarkFormFieldProps {
|
|
currentUserMarks: CurrentUserMark[]
|
|
handleCurrentUserMarkChange: (mark: CurrentUserMark) => void
|
|
handleSelectedMarkValueChange: (value: string) => void
|
|
handleSubmit: (
|
|
event: React.MouseEvent<HTMLButtonElement>,
|
|
type: 'online' | 'offline'
|
|
) => void
|
|
selectedMark: CurrentUserMark | null
|
|
selectedMarkValue: string
|
|
}
|
|
|
|
/**
|
|
* Responsible for rendering a form field connected to a mark and keeping track of its value.
|
|
*/
|
|
const MarkFormField = ({
|
|
handleSubmit,
|
|
handleSelectedMarkValueChange,
|
|
selectedMark,
|
|
selectedMarkValue,
|
|
currentUserMarks,
|
|
handleCurrentUserMarkChange
|
|
}: MarkFormFieldProps) => {
|
|
const [displayActions, setDisplayActions] = useState(true)
|
|
const [complete, setComplete] = useState(false)
|
|
const isReadyToSign = () =>
|
|
isCurrentUserMarksComplete(currentUserMarks) ||
|
|
isCurrentValueLast(currentUserMarks, selectedMark, selectedMarkValue)
|
|
const isCurrent = (currentMark: CurrentUserMark) =>
|
|
currentMark.id === selectedMark?.id && !complete
|
|
const isDone = (currentMark: CurrentUserMark) =>
|
|
isCurrent(currentMark) ? !!selectedMarkValue : currentMark.isCompleted
|
|
const findNext = () => {
|
|
return (
|
|
currentUserMarks[selectedMark!.id] ||
|
|
findNextIncompleteCurrentUserMark(currentUserMarks)
|
|
)
|
|
}
|
|
const handleFormSubmit = (event: React.FormEvent<HTMLFormElement>) => {
|
|
event.preventDefault()
|
|
// Without this line, we lose mark values when switching
|
|
handleCurrentUserMarkChange(selectedMark!)
|
|
|
|
if (!complete) {
|
|
isReadyToSign()
|
|
? setComplete(true)
|
|
: handleCurrentUserMarkChange(findNext()!)
|
|
}
|
|
}
|
|
|
|
const toggleActions = () => setDisplayActions(!displayActions)
|
|
const markLabel = selectedMark
|
|
? getToolboxLabelByMarkType(selectedMark.mark.type)
|
|
: ''
|
|
const handleCurrentUserMarkClick = (mark: CurrentUserMark) => {
|
|
setComplete(false)
|
|
handleCurrentUserMarkChange(mark)
|
|
}
|
|
|
|
const handleSelectCompleteMark = () => {
|
|
if (currentUserMarks.length) handleCurrentUserMarkChange(selectedMark!)
|
|
setComplete(true)
|
|
}
|
|
|
|
const handleSignAndComplete =
|
|
(type: 'online' | 'offline') =>
|
|
(event: React.MouseEvent<HTMLButtonElement>) => {
|
|
handleSubmit(event, type)
|
|
}
|
|
|
|
return (
|
|
<div className={styles.container}>
|
|
<div className={styles.trigger}>
|
|
<button
|
|
onClick={toggleActions}
|
|
className={styles.triggerBtn}
|
|
type="button"
|
|
title="Toggle"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="-64 0 512 512"
|
|
width="1em"
|
|
height="1em"
|
|
fill="currentColor"
|
|
transform={displayActions ? 'rotate(180)' : 'rotate(0)'}
|
|
>
|
|
<path d="M352 352c-8.188 0-16.38-3.125-22.62-9.375L192 205.3l-137.4 137.4c-12.5 12.5-32.75 12.5-45.25 0s-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0l160 160c12.5 12.5 12.5 32.75 0 45.25C368.4 348.9 360.2 352 352 352z"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div className={`${styles.actions} ${displayActions && styles.expanded}`}>
|
|
<div className={styles.actionsWrapper}>
|
|
<div className={styles.actionsTop}>
|
|
<div className={styles.actionsTopInfo}>
|
|
{!complete && selectedMark ? (
|
|
<p className={styles.actionsTopInfoText}>Add {markLabel}</p>
|
|
) : (
|
|
<p className={styles.actionsTopInfoText}>Finish</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className={styles.inputWrapper}>
|
|
{!complete && selectedMark ? (
|
|
<form onSubmit={(e) => handleFormSubmit(e)}>
|
|
<MarkInput
|
|
markType={selectedMark.mark.type}
|
|
key={selectedMark.id}
|
|
value={selectedMarkValue}
|
|
placeholder={markLabel}
|
|
handler={handleSelectedMarkValueChange}
|
|
userMark={selectedMark}
|
|
/>
|
|
<div className={styles.actionsBottom}>
|
|
<Button type="submit" className={styles.submitButton}>
|
|
NEXT
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
) : (
|
|
<>
|
|
<div className={styles.actionsBottom}>
|
|
<Button
|
|
onClick={handleSignAndComplete('online')}
|
|
className={[
|
|
styles.submitButton,
|
|
styles.completeButton
|
|
].join(' ')}
|
|
disabled={!isReadyToSign()}
|
|
autoFocus
|
|
>
|
|
SIGN AND BROADCAST
|
|
</Button>
|
|
</div>
|
|
<ButtonUnderline
|
|
onClick={handleSignAndComplete('offline')}
|
|
disabled={!isReadyToSign()}
|
|
>
|
|
<FontAwesomeIcon icon={faDownload} />
|
|
Sign and export locally instead
|
|
</ButtonUnderline>
|
|
</>
|
|
)}
|
|
|
|
<div className={styles.footerContainer}>
|
|
<div className={styles.footer}>
|
|
{currentUserMarks.map((mark, index) => {
|
|
return (
|
|
<div className={styles.pagination} key={index}>
|
|
<button
|
|
type="button"
|
|
className={`${styles.paginationButton} ${isDone(mark) ? styles.paginationButtonDone : ''}`}
|
|
onClick={() => handleCurrentUserMarkClick(mark)}
|
|
>
|
|
{mark.id}
|
|
</button>
|
|
{isCurrent(mark) && (
|
|
<div className={styles.paginationButtonCurrent}></div>
|
|
)}
|
|
</div>
|
|
)
|
|
})}
|
|
<div className={styles.pagination}>
|
|
<button
|
|
type="button"
|
|
className={`${styles.paginationButton} ${isReadyToSign() ? styles.paginationButtonDone : ''}`}
|
|
onClick={handleSelectCompleteMark}
|
|
title="Complete"
|
|
>
|
|
<FontAwesomeIcon
|
|
className={styles.finishPage}
|
|
icon={faCheck}
|
|
/>
|
|
</button>
|
|
{complete && (
|
|
<div className={styles.paginationButtonCurrent}></div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default MarkFormField
|