mirror of
https://git.meshkee.com/Meshkee/dashboards.git
synced 2026-08-11 22:30:58 +04:30
Add customer and business user-product flows across dashboards.
Ship my-products / customer-products UI with gallery uploads, status controls, module gating, and related shared UI polish. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Alireza Hassani
co-authored by
Cursor
Cursor
parent
c5bdaad16b
commit
1271d96539
@@ -1,8 +1,12 @@
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
import { createPortal } from 'react-dom'
|
||||
import { Plus, Sparkles, Trash2, X } from 'lucide-react'
|
||||
import { useLocale } from '@meshkee/dashboard-ui'
|
||||
import type { TechnicalFieldType, TechnicalFormFieldDraft } from '../types/technicalForm'
|
||||
import { useT } from '../i18n/useT'
|
||||
import type { BusinessMessageKey } from '../i18n/messages'
|
||||
import { createId } from '../utils/id'
|
||||
import { Tooltip } from './Tooltip'
|
||||
import styles from './VariationsModal.module.css'
|
||||
import fieldStyles from './TechnicalFormModal.module.css'
|
||||
import aiStyles from '../styles/ai.module.css'
|
||||
@@ -14,6 +18,7 @@ interface TechnicalFormModalProps {
|
||||
isLoading?: boolean
|
||||
isSaving?: boolean
|
||||
isGenerating?: boolean
|
||||
escapeDisabled?: boolean
|
||||
error?: string
|
||||
onClose: () => void
|
||||
onChange: (fields: TechnicalFormFieldDraft[]) => void
|
||||
@@ -24,11 +29,11 @@ interface TechnicalFormModalProps {
|
||||
|
||||
const ANIMATION_MS = 220
|
||||
|
||||
const FIELD_TYPE_LABELS: Record<TechnicalFieldType, string> = {
|
||||
text: 'Text',
|
||||
textarea: 'Textarea',
|
||||
select: 'Select',
|
||||
multi_select: 'Multi',
|
||||
const FIELD_TYPE_KEYS: Record<TechnicalFieldType, BusinessMessageKey> = {
|
||||
text: 'categories.technical.type.text',
|
||||
textarea: 'categories.technical.type.textarea',
|
||||
select: 'categories.technical.type.select',
|
||||
multi_select: 'categories.technical.type.multi_select',
|
||||
}
|
||||
|
||||
function createEmptyField(): TechnicalFormFieldDraft {
|
||||
@@ -48,6 +53,7 @@ export function TechnicalFormModal({
|
||||
isLoading = false,
|
||||
isSaving = false,
|
||||
isGenerating = false,
|
||||
escapeDisabled = false,
|
||||
error = '',
|
||||
onClose,
|
||||
onChange,
|
||||
@@ -55,6 +61,9 @@ export function TechnicalFormModal({
|
||||
onGenerate,
|
||||
onGenerateClick,
|
||||
}: TechnicalFormModalProps) {
|
||||
const t = useT()
|
||||
const { locale } = useLocale()
|
||||
const isFa = locale === 'fa'
|
||||
const [mounted, setMounted] = useState(open)
|
||||
const [closing, setClosing] = useState(false)
|
||||
const optionInputRefs = useRef<Record<string, (HTMLInputElement | null)[]>>({})
|
||||
@@ -82,13 +91,13 @@ export function TechnicalFormModal({
|
||||
}, [fields])
|
||||
|
||||
useEffect(() => {
|
||||
if (!mounted || closing) return
|
||||
if (!mounted || closing || escapeDisabled) return
|
||||
const onKey = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') onClose()
|
||||
}
|
||||
document.addEventListener('keydown', onKey)
|
||||
return () => document.removeEventListener('keydown', onKey)
|
||||
}, [mounted, closing, onClose])
|
||||
}, [mounted, closing, escapeDisabled, onClose])
|
||||
|
||||
if (!mounted) return null
|
||||
|
||||
@@ -180,22 +189,29 @@ export function TechnicalFormModal({
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="technical-form-title"
|
||||
lang={isFa ? 'fa' : 'en'}
|
||||
dir={isFa ? 'rtl' : 'ltr'}
|
||||
>
|
||||
<div className={styles.header}>
|
||||
<div>
|
||||
<h3 id="technical-form-title" className={styles.title}>
|
||||
Technical Data Form
|
||||
{t('categories.technical.title')}
|
||||
</h3>
|
||||
{categoryName && <p className={styles.subtitle}>{categoryName}</p>}
|
||||
{categoryName ? <p className={styles.subtitle}>{categoryName}</p> : null}
|
||||
</div>
|
||||
<button className={styles.closeBtn} onClick={onClose} aria-label="Close">
|
||||
<button
|
||||
className={styles.closeBtn}
|
||||
onClick={onClose}
|
||||
aria-label={t('common.close')}
|
||||
type="button"
|
||||
>
|
||||
<X size={20} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className={styles.body}>
|
||||
{isLoading ? (
|
||||
<p className={styles.emptyText}>Loading form...</p>
|
||||
<p className={styles.emptyText}>{t('categories.technical.loading')}</p>
|
||||
) : (
|
||||
<>
|
||||
<div className={fieldStyles.fieldList}>
|
||||
@@ -206,16 +222,16 @@ export function TechnicalFormModal({
|
||||
id={`label-${field.id}`}
|
||||
type="text"
|
||||
className={fieldStyles.compactInput}
|
||||
placeholder="Field label"
|
||||
placeholder={t('categories.technical.fieldLabel')}
|
||||
value={field.label}
|
||||
onChange={(e) => updateField(field.id, { label: e.target.value })}
|
||||
aria-label="Field label"
|
||||
aria-label={t('categories.technical.fieldLabel')}
|
||||
/>
|
||||
<select
|
||||
id={`type-${field.id}`}
|
||||
className={fieldStyles.compactInput}
|
||||
value={field.type}
|
||||
aria-label="Input type"
|
||||
aria-label={t('categories.technical.inputType')}
|
||||
onChange={(e) => {
|
||||
const type = e.target.value as TechnicalFieldType
|
||||
updateField(field.id, {
|
||||
@@ -229,13 +245,16 @@ export function TechnicalFormModal({
|
||||
})
|
||||
}}
|
||||
>
|
||||
{Object.entries(FIELD_TYPE_LABELS).map(([value, label]) => (
|
||||
{(Object.keys(FIELD_TYPE_KEYS) as TechnicalFieldType[]).map((value) => (
|
||||
<option key={value} value={value}>
|
||||
{label}
|
||||
{t(FIELD_TYPE_KEYS[value])}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<label className={fieldStyles.requiredCell} title="Required">
|
||||
<label
|
||||
className={fieldStyles.requiredCell}
|
||||
title={t('categories.technical.required')}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={field.isRequired}
|
||||
@@ -243,23 +262,27 @@ export function TechnicalFormModal({
|
||||
updateField(field.id, { isRequired: e.target.checked })
|
||||
}
|
||||
/>
|
||||
<span>Required</span>
|
||||
<span>{t('categories.technical.required')}</span>
|
||||
</label>
|
||||
<div className={fieldStyles.removeCell}>
|
||||
<button
|
||||
type="button"
|
||||
className={styles.removeRowBtn}
|
||||
onClick={() => removeField(field.id)}
|
||||
aria-label="Remove field"
|
||||
>
|
||||
<Trash2 size={15} />
|
||||
</button>
|
||||
<Tooltip label={t('categories.technical.removeField')}>
|
||||
<button
|
||||
type="button"
|
||||
className={styles.removeRowBtn}
|
||||
onClick={() => removeField(field.id)}
|
||||
aria-label={t('categories.technical.removeField')}
|
||||
>
|
||||
<Trash2 size={15} />
|
||||
</button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{(field.type === 'select' || field.type === 'multi_select') && (
|
||||
<div className={fieldStyles.optionsBlock}>
|
||||
<span className={fieldStyles.optionsLabel}>Options</span>
|
||||
<span className={fieldStyles.optionsLabel}>
|
||||
{t('categories.technical.options')}
|
||||
</span>
|
||||
<div className={fieldStyles.customValues}>
|
||||
{field.options.map((option, optionIndex) => (
|
||||
<div key={optionIndex} className={fieldStyles.customRow}>
|
||||
@@ -271,7 +294,9 @@ export function TechnicalFormModal({
|
||||
optionInputRefs.current[field.id][optionIndex] = el
|
||||
}}
|
||||
type="text"
|
||||
placeholder={`Option ${optionIndex + 1}`}
|
||||
placeholder={t('categories.technical.optionN', {
|
||||
n: optionIndex + 1,
|
||||
})}
|
||||
value={option}
|
||||
onChange={(e) =>
|
||||
updateOption(field.id, optionIndex, e.target.value)
|
||||
@@ -282,14 +307,16 @@ export function TechnicalFormModal({
|
||||
/>
|
||||
{field.options.length > 1 && (
|
||||
<div className={fieldStyles.removeCell}>
|
||||
<button
|
||||
type="button"
|
||||
className={styles.removeRowBtn}
|
||||
onClick={() => removeOption(field.id, optionIndex)}
|
||||
aria-label="Remove option"
|
||||
>
|
||||
<X size={16} />
|
||||
</button>
|
||||
<Tooltip label={t('categories.technical.removeOption')}>
|
||||
<button
|
||||
type="button"
|
||||
className={styles.removeRowBtn}
|
||||
onClick={() => removeOption(field.id, optionIndex)}
|
||||
aria-label={t('categories.technical.removeOption')}
|
||||
>
|
||||
<X size={16} />
|
||||
</button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
)}
|
||||
{field.options.length <= 1 && <div />}
|
||||
@@ -301,7 +328,7 @@ export function TechnicalFormModal({
|
||||
onClick={() => addOption(field.id)}
|
||||
>
|
||||
<Plus size={14} />
|
||||
Add option
|
||||
{t('categories.technical.addOption')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -310,56 +337,59 @@ export function TechnicalFormModal({
|
||||
))}
|
||||
|
||||
{!fields.length && (
|
||||
<p className={styles.emptyText}>
|
||||
No fields yet. Add text, textarea, select, or multi-select inputs.
|
||||
</p>
|
||||
<p className={styles.emptyText}>{t('categories.technical.empty')}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className={fieldStyles.toolbar}>
|
||||
{(onGenerateClick ?? onGenerate) && (
|
||||
<button
|
||||
type="button"
|
||||
className={aiStyles.aiBtn}
|
||||
onClick={onGenerateClick ?? onGenerate}
|
||||
disabled={isLoading || isSaving || isGenerating}
|
||||
>
|
||||
<Sparkles size={16} />
|
||||
{isGenerating ? 'Generating…' : 'Generate with AI'}
|
||||
</button>
|
||||
)}
|
||||
<button type="button" className={styles.addBtn} onClick={addField}>
|
||||
<Plus size={18} />
|
||||
Add field
|
||||
{t('categories.technical.addField')}
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{error && <p className={styles.errorText}>{error}</p>}
|
||||
{error ? <p className={styles.errorText}>{error}</p> : null}
|
||||
|
||||
<div className={styles.actions}>
|
||||
<button
|
||||
type="button"
|
||||
className={styles.cancelBtn}
|
||||
onClick={onClose}
|
||||
disabled={isSaving || isGenerating}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={styles.submitBtn}
|
||||
onClick={onSave}
|
||||
disabled={!canSave}
|
||||
>
|
||||
{isSaving ? 'Saving…' : 'Save form'}
|
||||
</button>
|
||||
<div className={`${styles.actions} ${fieldStyles.actionsRow}`}>
|
||||
<div className={fieldStyles.actionsMain}>
|
||||
<button
|
||||
type="button"
|
||||
className={styles.submitBtn}
|
||||
onClick={onSave}
|
||||
disabled={!canSave}
|
||||
>
|
||||
{isSaving
|
||||
? t('categories.technical.saving')
|
||||
: t('categories.technical.save')}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={styles.cancelBtn}
|
||||
onClick={onClose}
|
||||
disabled={isSaving || isGenerating}
|
||||
>
|
||||
{t('categories.modal.cancel')}
|
||||
</button>
|
||||
</div>
|
||||
{(onGenerateClick ?? onGenerate) ? (
|
||||
<button
|
||||
type="button"
|
||||
className={`${aiStyles.aiBtn} ${fieldStyles.actionsAi}`}
|
||||
onClick={onGenerateClick ?? onGenerate}
|
||||
disabled={isLoading || isSaving || isGenerating}
|
||||
>
|
||||
<Sparkles size={16} />
|
||||
{isGenerating
|
||||
? t('products.form.aiGenerating')
|
||||
: t('categories.technical.generateAi')}
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
,
|
||||
document.body,
|
||||
</div>,
|
||||
document.body,
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user