Initial commit MKD fixes
This commit is contained in:
Arsen
161
components/building/AddCustomFieldModal.tsx
Executable file
161
components/building/AddCustomFieldModal.tsx
Executable file
@@ -0,0 +1,161 @@
|
||||
import React, { useState } from 'react';
|
||||
import { X, Plus } from 'lucide-react';
|
||||
|
||||
interface Props {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onConfirm: (fieldName: string, fieldType: 'text' | 'number' | 'checkbox', forAllBuildings: boolean) => void;
|
||||
section?: 'general' | 'construction' | 'engineering' | 'land' | 'management';
|
||||
}
|
||||
|
||||
export const AddCustomFieldModal: React.FC<Props> = ({ isOpen, onClose, onConfirm, section }) => {
|
||||
const [fieldName, setFieldName] = useState('');
|
||||
const [fieldType, setFieldType] = useState<'text' | 'number' | 'checkbox'>('text');
|
||||
const [forAllBuildings, setForAllBuildings] = useState(false);
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
const handleConfirm = () => {
|
||||
if (!fieldName.trim()) {
|
||||
alert('Введите название поля');
|
||||
return;
|
||||
}
|
||||
onConfirm(fieldName.trim(), fieldType, forAllBuildings);
|
||||
setFieldName('');
|
||||
setFieldType('text');
|
||||
setForAllBuildings(false);
|
||||
onClose();
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setFieldName('');
|
||||
setFieldType('text');
|
||||
setForAllBuildings(false);
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-slate-900/80 backdrop-blur-md animate-fade-in"
|
||||
onClick={handleClose}
|
||||
>
|
||||
<div
|
||||
className="bg-white rounded-2xl w-full max-w-md shadow-2xl animate-slide-up"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="p-6 border-b border-slate-200">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-primary-50 rounded-lg">
|
||||
<Plus className="w-6 h-6 text-primary-500" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-black text-slate-900">Добавить новое поле</h3>
|
||||
<p className="text-sm text-slate-500 mt-1">Укажите название и тип поля</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleClose}
|
||||
className="p-2 hover:bg-slate-100 rounded-full transition-colors"
|
||||
>
|
||||
<X className="w-5 h-5 text-slate-400" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="p-6 space-y-4">
|
||||
<div>
|
||||
<label className="block text-xs font-bold text-slate-500 uppercase mb-2">
|
||||
Название поля
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={fieldName}
|
||||
onChange={(e) => setFieldName(e.target.value)}
|
||||
placeholder="Например: Материал кровли"
|
||||
className="w-full p-3 bg-white border border-slate-300 rounded-xl text-sm font-medium text-slate-800 outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
|
||||
autoFocus
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
handleConfirm();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-xs font-bold text-slate-500 uppercase mb-2">
|
||||
Тип поля
|
||||
</label>
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
<button
|
||||
onClick={() => setFieldType('text')}
|
||||
className={`p-3 rounded-xl border-2 transition-all font-bold text-sm ${
|
||||
fieldType === 'text'
|
||||
? 'border-primary-500 bg-primary-50 text-primary-700'
|
||||
: 'border-slate-200 bg-white text-slate-600 hover:border-slate-300'
|
||||
}`}
|
||||
>
|
||||
Текст
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setFieldType('number')}
|
||||
className={`p-3 rounded-xl border-2 transition-all font-bold text-sm ${
|
||||
fieldType === 'number'
|
||||
? 'border-primary-500 bg-primary-50 text-primary-700'
|
||||
: 'border-slate-200 bg-white text-slate-600 hover:border-slate-300'
|
||||
}`}
|
||||
>
|
||||
Число
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setFieldType('checkbox')}
|
||||
className={`p-3 rounded-xl border-2 transition-all font-bold text-sm ${
|
||||
fieldType === 'checkbox'
|
||||
? 'border-primary-500 bg-primary-50 text-primary-700'
|
||||
: 'border-slate-200 bg-white text-slate-600 hover:border-slate-300'
|
||||
}`}
|
||||
>
|
||||
Галочка
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-4 border-t border-slate-200">
|
||||
<label className="flex items-center gap-3 cursor-pointer group">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={forAllBuildings}
|
||||
onChange={(e) => setForAllBuildings(e.target.checked)}
|
||||
className="w-5 h-5 accent-primary-600 cursor-pointer"
|
||||
/>
|
||||
<div>
|
||||
<span className="text-sm font-bold text-slate-800 block">Для всех домов</span>
|
||||
<span className="text-xs text-slate-500">Поле будет отображаться в паспортах всех домов</span>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="p-6 border-t border-slate-200 flex gap-3">
|
||||
<button
|
||||
onClick={handleClose}
|
||||
className="flex-1 px-4 py-3 rounded-xl border border-slate-200 text-slate-700 font-bold hover:bg-slate-50 transition-colors"
|
||||
>
|
||||
Отмена
|
||||
</button>
|
||||
<button
|
||||
onClick={handleConfirm}
|
||||
className="flex-1 px-4 py-3 rounded-xl bg-primary-600 text-white font-bold hover:bg-primary-700 transition-colors flex items-center justify-center gap-2"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
Создать поле
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user