Added Linkfield.tsx
This commit is contained in:
Duradundi Hadimani
parent
b60096686b
commit
225d63e384
201
src/components/LinkField.tsx
Normal file
201
src/components/LinkField.tsx
Normal file
@ -0,0 +1,201 @@
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import apiService from '../services/apiService'; // ✅ your ApiService
|
||||
|
||||
interface LinkFieldProps {
|
||||
label: string;
|
||||
doctype: string;
|
||||
value: string;
|
||||
onChange: (value: string) => void;
|
||||
placeholder?: string;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
const LinkField: React.FC<LinkFieldProps> = ({
|
||||
label,
|
||||
doctype,
|
||||
value,
|
||||
onChange,
|
||||
placeholder,
|
||||
disabled = false,
|
||||
}) => {
|
||||
const [searchResults, setSearchResults] = useState<{ value: string; description?: string }[]>([]);
|
||||
const [searchText, setSearchText] = useState('');
|
||||
const [isDropdownOpen, setDropdownOpen] = useState(false);
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Fetch link options from ERPNext
|
||||
const searchLink = async (text: string = '') => {
|
||||
try {
|
||||
const params = new URLSearchParams({ doctype, txt: text });
|
||||
const response = await apiService.apiCall<{ value: string; description?: string }[]>(
|
||||
`/api/method/frappe.desk.search.search_link?${params.toString()}`
|
||||
);
|
||||
setSearchResults(response || []);
|
||||
} catch (error) {
|
||||
console.error(`Error fetching ${doctype} links:`, error);
|
||||
}
|
||||
};
|
||||
|
||||
// Fetch default options when dropdown opens
|
||||
useEffect(() => {
|
||||
if (isDropdownOpen) searchLink('');
|
||||
}, [isDropdownOpen]);
|
||||
|
||||
// Close dropdown when clicking outside
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
|
||||
setDropdownOpen(false);
|
||||
}
|
||||
};
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
return () => document.removeEventListener('mousedown', handleClickOutside);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div ref={containerRef} className="relative w-full mb-4">
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{label}</label>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
value={value}
|
||||
placeholder={placeholder || `Select ${label}`}
|
||||
disabled={disabled}
|
||||
onFocus={() => !disabled && setDropdownOpen(true)}
|
||||
onChange={(e) => {
|
||||
const text = e.target.value;
|
||||
setSearchText(text);
|
||||
searchLink(text);
|
||||
onChange(text);
|
||||
}}
|
||||
className={`w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500
|
||||
disabled:bg-gray-100 dark:disabled:bg-gray-700
|
||||
border-gray-300 dark:border-gray-600
|
||||
bg-white dark:bg-gray-700 text-gray-900 dark:text-white`}
|
||||
/>
|
||||
|
||||
{isDropdownOpen && searchResults.length > 0 && (
|
||||
<ul
|
||||
className="absolute z-50 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600
|
||||
rounded-md mt-1 max-h-48 overflow-auto w-full shadow-lg"
|
||||
>
|
||||
{searchResults.map((item, idx) => (
|
||||
<li
|
||||
key={idx}
|
||||
onClick={() => {
|
||||
onChange(item.value);
|
||||
setDropdownOpen(false);
|
||||
}}
|
||||
className={`px-3 py-2 hover:bg-blue-100 dark:hover:bg-gray-700 cursor-pointer
|
||||
${value === item.value ? 'bg-blue-50 dark:bg-gray-600 font-semibold' : ''}`}
|
||||
>
|
||||
<div>{item.value}</div>
|
||||
{item.description && (
|
||||
<div className="text-gray-500 dark:text-gray-400 text-xs">{item.description}</div>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default LinkField;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// import React, { useState, useEffect, useRef } from 'react';
|
||||
// import apiService from '../services/apiService';// ✅ uses your existing ApiService
|
||||
|
||||
// interface LinkFieldProps {
|
||||
// label: string;
|
||||
// doctype: string;
|
||||
// value: string;
|
||||
// onChange: (value: string) => void;
|
||||
// placeholder?: string;
|
||||
// }
|
||||
|
||||
// const LinkField: React.FC<LinkFieldProps> = ({ label, doctype, value, onChange, placeholder }) => {
|
||||
// const [searchResults, setSearchResults] = useState<{ value: string; description?: string }[]>([]);
|
||||
// const [searchText, setSearchText] = useState('');
|
||||
// const [isDropdownOpen, setDropdownOpen] = useState(false);
|
||||
// const containerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// // Function to call ERPNext link search API
|
||||
// const searchLink = async (text: string = '') => {
|
||||
// try {
|
||||
// const params = new URLSearchParams({
|
||||
// doctype,
|
||||
// txt: text,
|
||||
// });
|
||||
// const response = await apiService.apiCall<{ value: string; description?: string }[]>(
|
||||
// `/api/method/frappe.desk.search.search_link?${params.toString()}`
|
||||
// );
|
||||
// setSearchResults(response || []);
|
||||
// } catch (error) {
|
||||
// console.error(`Error fetching ${doctype} links:`, error);
|
||||
// }
|
||||
// };
|
||||
|
||||
// // Load default results when dropdown opens
|
||||
// useEffect(() => {
|
||||
// if (isDropdownOpen) {
|
||||
// searchLink('');
|
||||
// }
|
||||
// }, [isDropdownOpen]);
|
||||
|
||||
// // Close dropdown when clicking outside
|
||||
// useEffect(() => {
|
||||
// const handleClickOutside = (event: MouseEvent) => {
|
||||
// if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
|
||||
// setDropdownOpen(false);
|
||||
// }
|
||||
// };
|
||||
// document.addEventListener('mousedown', handleClickOutside);
|
||||
// return () => document.removeEventListener('mousedown', handleClickOutside);
|
||||
// }, []);
|
||||
|
||||
// return (
|
||||
// <div ref={containerRef} className="relative w-full mb-4">
|
||||
// {/* <label className="block text-gray-700 text-sm font-medium mb-1">{label}</label> */}
|
||||
// <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{label}</label>
|
||||
// <input
|
||||
// type="text"
|
||||
// value={value}
|
||||
// placeholder={placeholder || `Select ${label}`}
|
||||
// className="border border-gray-300 rounded-md p-2 w-full focus:ring focus:ring-blue-200"
|
||||
// onFocus={() => setDropdownOpen(true)}
|
||||
// onChange={(e) => {
|
||||
// const text = e.target.value;
|
||||
// setSearchText(text);
|
||||
// searchLink(text);
|
||||
// onChange(text);
|
||||
// }}
|
||||
// />
|
||||
// {isDropdownOpen && searchResults.length > 0 && (
|
||||
// <ul className="absolute z-50 bg-white border border-gray-300 rounded-md mt-1 max-h-48 overflow-auto w-full shadow-lg">
|
||||
// {searchResults.map((item, idx) => (
|
||||
// <li
|
||||
// key={idx}
|
||||
// onClick={() => {
|
||||
// onChange(item.value);
|
||||
// setDropdownOpen(false);
|
||||
// }}
|
||||
// className={`p-2 hover:bg-blue-100 cursor-pointer ${
|
||||
// value === item.value ? 'bg-blue-50 font-semibold' : ''
|
||||
// }`}
|
||||
// >
|
||||
// {item.value}
|
||||
// {item.description && <span className="text-gray-500 text-xs ml-2">{item.description}</span>}
|
||||
// </li>
|
||||
// ))}
|
||||
// </ul>
|
||||
// )}
|
||||
// </div>
|
||||
// );
|
||||
// };
|
||||
|
||||
// export default LinkField;
|
||||
@ -4,6 +4,9 @@ import { useAssetDetails, useAssetMutations } from '../hooks/useAsset';
|
||||
import { FaArrowLeft, FaSave, FaEdit, FaQrcode } from 'react-icons/fa';
|
||||
import type { CreateAssetData } from '../services/assetService';
|
||||
|
||||
import LinkField from '../components/LinkField';
|
||||
|
||||
|
||||
const AssetDetail: React.FC = () => {
|
||||
const { assetName } = useParams<{ assetName: string }>();
|
||||
const navigate = useNavigate();
|
||||
@ -264,7 +267,7 @@ const AssetDetail: React.FC = () => {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{/* <div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Category <span className="text-red-500">*</span>
|
||||
</label>
|
||||
@ -282,9 +285,17 @@ const AssetDetail: React.FC = () => {
|
||||
<option value="IT Equipment">IT Equipment</option>
|
||||
<option value="Furniture">Furniture</option>
|
||||
</select>
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
<div>
|
||||
<LinkField
|
||||
label="Category"
|
||||
doctype="Asset Type"
|
||||
value={formData.custom_asset_type || ''}
|
||||
onChange={(val) => setFormData({ ...formData, custom_asset_type: val })}
|
||||
/>
|
||||
|
||||
|
||||
{/* <div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Modality <span className="text-red-500">*</span>
|
||||
</label>
|
||||
@ -302,7 +313,14 @@ const AssetDetail: React.FC = () => {
|
||||
<option value="Ultrasound">Ultrasound</option>
|
||||
<option value="Other">Other</option>
|
||||
</select>
|
||||
</div>
|
||||
</div> */}
|
||||
<LinkField
|
||||
label="Modality"
|
||||
doctype="Modality"
|
||||
value={formData.custom_modality || ''}
|
||||
onChange={(val) => setFormData({ ...formData, custom_modality: val })}
|
||||
/>
|
||||
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
@ -384,7 +402,7 @@ const AssetDetail: React.FC = () => {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{/* <div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Manufacturer
|
||||
</label>
|
||||
@ -397,7 +415,14 @@ const AssetDetail: React.FC = () => {
|
||||
disabled={!isEditing}
|
||||
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
|
||||
/>
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
<LinkField
|
||||
label="Manufacturer"
|
||||
doctype="Manufacturer"
|
||||
value={formData.manufacturer || ''}
|
||||
onChange={(val) => setFormData({ ...formData, manufacturer: val })}
|
||||
/>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
@ -432,7 +457,7 @@ const AssetDetail: React.FC = () => {
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
|
||||
<h2 className="text-lg font-semibold text-gray-800 dark:text-white mb-4">Location</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
{/* <div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Company
|
||||
</label>
|
||||
@ -447,9 +472,16 @@ const AssetDetail: React.FC = () => {
|
||||
<option value="ABC Hospital">ABC Hospital</option>
|
||||
<option value="XYZ Clinic">XYZ Clinic</option>
|
||||
</select>
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
<div>
|
||||
<LinkField
|
||||
label="Hospital"
|
||||
doctype="Company"
|
||||
value={formData.company || ''}
|
||||
onChange={(val) => setFormData({ ...formData, company: val })}
|
||||
/>
|
||||
|
||||
{/* <div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Department
|
||||
</label>
|
||||
@ -465,7 +497,14 @@ const AssetDetail: React.FC = () => {
|
||||
<option value="Cardiology">Cardiology</option>
|
||||
<option value="IT">IT</option>
|
||||
</select>
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
<LinkField
|
||||
label="Department"
|
||||
doctype="Department"
|
||||
value={formData.department || ''}
|
||||
onChange={(val) => setFormData({ ...formData, department: val })}
|
||||
/>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user