109 lines
4.1 KiB
TypeScript
109 lines
4.1 KiB
TypeScript
import { useT } from '../i18n'
|
|
import { Dispatch, SetStateAction } from 'react'
|
|
import { ProcessStatus, User, Page } from '../types'
|
|
import { inp, lbl, chk, FormCard, DeletedBanner } from '../components/common'
|
|
import DateInput from '../components/DateInput'
|
|
import FormPageLayout from '../components/FormPageLayout'
|
|
|
|
interface Props {
|
|
form: ProcessStatus
|
|
setForm: Dispatch<SetStateAction<ProcessStatus>>
|
|
formStatus: string
|
|
viewMode?: boolean
|
|
onEdit?: () => void
|
|
onRestore?: (name: string) => void
|
|
onPermanentDelete?: (name: string) => void
|
|
darkMode: boolean
|
|
notifCount: number
|
|
onToggleDark: () => void
|
|
onCountChange: (n: number) => void
|
|
onViewProfile: () => void
|
|
onSubmit: () => void
|
|
onBack: () => void
|
|
onNavigate: (page: Page) => void
|
|
onLogout: () => void
|
|
user: User
|
|
}
|
|
|
|
export default function ProcessStatusFormPage({ form, setForm, formStatus, viewMode, onEdit, onRestore, onPermanentDelete, darkMode, notifCount, onToggleDark, onCountChange, onViewProfile, onSubmit, onBack, onNavigate, onLogout, user }: Props) {
|
|
const t = useT()
|
|
const set = (patch: Partial<ProcessStatus>) => setForm(f => ({ ...f, ...patch }))
|
|
const di: React.CSSProperties = viewMode ? { background: '#f8fafc' } : {}
|
|
|
|
const title = form.name
|
|
? (viewMode ? `Process Status: ${form.name1 || form.name}` : 'Edit Process Status')
|
|
: 'New Process Status'
|
|
|
|
return (
|
|
<FormPageLayout
|
|
title={title} activePage="process-statuses"
|
|
user={user} formStatus={formStatus}
|
|
buttonText={t.saveName} buttonColor="#16a34a"
|
|
viewMode={viewMode} onEdit={onEdit} darkMode={darkMode} notifCount={notifCount} onToggleDark={onToggleDark} onCountChange={onCountChange} onViewProfile={onViewProfile}
|
|
onSubmit={onSubmit} onBack={onBack} onNavigate={onNavigate} onLogout={onLogout}
|
|
>
|
|
{(form as any).custom_is_deleted === 1 && (
|
|
<DeletedBanner
|
|
deletedBy={(form as any).custom_deleted_by}
|
|
deletedOn={(form as any).custom_deleted_on}
|
|
reason={(form as any).custom_deleted_reason}
|
|
onRestore={onRestore && form.name ? () => onRestore(form.name) : undefined}
|
|
onPermanentDelete={onPermanentDelete && form.name ? () => onPermanentDelete(form.name) : undefined}
|
|
/>
|
|
)}
|
|
<FormCard title="Process Status Details">
|
|
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 16, marginBottom: 14 }}>
|
|
<div>
|
|
<label style={lbl}>{t.field.name1} <span style={{ color: '#e74c3c' }}>*</span></label>
|
|
<input
|
|
style={{ ...inp, ...di }}
|
|
value={form.name1}
|
|
disabled={viewMode || !!form.name}
|
|
onChange={e => set({ name1: e.target.value })}
|
|
placeholder="Process status name"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label style={lbl}>{t.field.creationDate}</label>
|
|
<DateInput
|
|
value={form.creation_date || ''}
|
|
onChange={v => set({ creation_date: v })}
|
|
disabled={viewMode}
|
|
style={{ ...inp, ...di }}
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label style={lbl}>{t.field.status}</label>
|
|
<select
|
|
style={{ ...inp, ...di }}
|
|
value={form.status || 'Active'}
|
|
disabled={viewMode}
|
|
onChange={e => set({ status: e.target.value })}
|
|
>
|
|
<option value="Active">{t.field.statusActive}</option>
|
|
<option value="Inactive">{t.field.statusInactive}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
|
<input
|
|
type="checkbox"
|
|
id="notify_manager"
|
|
checked={!!form.notify_manager}
|
|
disabled={viewMode}
|
|
onChange={e => set({ notify_manager: e.target.checked ? 1 : 0 })}
|
|
style={chk}
|
|
/>
|
|
<label htmlFor="notify_manager" style={{ fontSize: 13, cursor: viewMode ? 'default' : 'pointer' }}>
|
|
{t.field.notifyManager}
|
|
</label>
|
|
</div>
|
|
</FormCard>
|
|
</FormPageLayout>
|
|
)
|
|
}
|