New marks and settings refactor #323

Merged
enes merged 10 commits from fixes-7-3-25 into staging 2025-03-11 11:11:02 +00:00
6 changed files with 66 additions and 5 deletions
Showing only changes of commit c8f0d135f1 - Show all commits

View File

@ -0,0 +1,25 @@
import { MarkInputProps } from '../MarkStrategy'
import styles from '../../MarkFormField/style.module.scss'
import { useEffect, useRef } from 'react'
export const MarkInputDateTime = ({ handler, placeholder }: MarkInputProps) => {
const ref = useRef<HTMLInputElement>(null)
useEffect(() => {
if (ref.current) {
ref.current.value = new Date().toISOString().slice(0, 16)
if (ref.current.valueAsDate) {
handler(ref.current.valueAsDate.toUTCString())
}
}
}, [handler])
return (
<input
type="datetime-local"
ref={ref}
className={styles.input}
placeholder={placeholder}
readOnly={true}
disabled={true}
/>
)
}

View File

@ -0,0 +1,7 @@
import { MarkStrategy } from '../MarkStrategy'
import { MarkInputDateTime } from './Input'
export const DateTimeStrategy: MarkStrategy = {
input: MarkInputDateTime,
render: ({ value }) => <>{value}</>
}

View File

@ -0,0 +1,20 @@
import { useDidMount } from '../../../hooks'
import { useLocalStorage } from '../../../hooks/useLocalStorage'
import { MarkInputProps } from '../MarkStrategy'
import { MarkInputText } from '../Text/Input'
export const MarkInputJobTitle = (props: MarkInputProps) => {
const [jobTitle, setjobTitle] = useLocalStorage('mark-jobtitle', '')
useDidMount(() => {
props.handler(jobTitle)
})
return MarkInputText({
...props,
placeholder: 'Job Title',
value: jobTitle,
handler: (value) => {
setjobTitle(value)
props.handler(value)
}
})
}

View File

@ -0,0 +1,7 @@
import { MarkStrategy } from '../MarkStrategy'
import { MarkInputJobTitle } from './Input'
export const JobTitleStrategy: MarkStrategy = {
input: MarkInputJobTitle,
render: ({ value }) => <>{value}</>
}

View File

@ -3,6 +3,8 @@ import { CurrentUserMark, Mark } from '../../types/mark'
import { TextStrategy } from './Text' import { TextStrategy } from './Text'
import { SignatureStrategy } from './Signature' import { SignatureStrategy } from './Signature'
import { FullNameStrategy } from './FullName' import { FullNameStrategy } from './FullName'
import { JobTitleStrategy } from './JobTitle'
import { DateTimeStrategy } from './DateTime'
export interface MarkInputProps { export interface MarkInputProps {
value: string value: string
@ -30,5 +32,7 @@ export type MarkStrategies = {
export const MARK_TYPE_CONFIG: MarkStrategies = { export const MARK_TYPE_CONFIG: MarkStrategies = {
[MarkType.TEXT]: TextStrategy, [MarkType.TEXT]: TextStrategy,
[MarkType.SIGNATURE]: SignatureStrategy, [MarkType.SIGNATURE]: SignatureStrategy,
[MarkType.FULLNAME]: FullNameStrategy [MarkType.FULLNAME]: FullNameStrategy,
[MarkType.JOBTITLE]: JobTitleStrategy,
[MarkType.DATETIME]: DateTimeStrategy
} }

View File

@ -176,14 +176,12 @@ export const DEFAULT_TOOLBOX: DrawTool[] = [
{ {
identifier: MarkType.JOBTITLE, identifier: MarkType.JOBTITLE,
icon: faBriefcase, icon: faBriefcase,
label: 'Job Title', label: 'Job Title'
isComingSoon: true
}, },
{ {
identifier: MarkType.DATETIME, identifier: MarkType.DATETIME,
icon: faClock, icon: faClock,
label: 'Date Time', label: 'Date Time'
isComingSoon: true
}, },
{ {
identifier: MarkType.NUMBER, identifier: MarkType.NUMBER,