fix: update custom fields in DocumentGenerator and DOCX_TEMPLATES_README for better usability

This commit is contained in:
2025-12-16 11:23:50 +01:00
parent 1fb435eb87
commit 75b8bfd84f
2 changed files with 97 additions and 25 deletions

View File

@@ -9,7 +9,17 @@ export default function DocumentGenerator({ projectId }) {
const [selectedTemplate, setSelectedTemplate] = useState("");
const [generating, setGenerating] = useState(false);
const [loading, setLoading] = useState(true);
const [customFields, setCustomFields] = useState([{ key: "", value: "" }]);
const [customFields, setCustomFields] = useState([
{ key: "zk", value: "" },
{ key: "nr_zk", value: "" },
{ key: "kabel", value: "" },
{ key: "dlugosc", value: "" },
{ key: "data_wykonania", value: "" },
{ key: "st_nr", value: "" },
{ key: "obw", value: "" },
{ key: "wp_short", value: "" },
{ key: "plomba", value: "" }
]);
const [showCustomFields, setShowCustomFields] = useState(false);
useEffect(() => {
@@ -41,6 +51,7 @@ export default function DocumentGenerator({ projectId }) {
};
const removeCustomField = (index) => {
// Allow removing any field, but keep at least one empty field
if (customFields.length > 1) {
setCustomFields(customFields.filter((_, i) => i !== index));
}
@@ -183,11 +194,14 @@ export default function DocumentGenerator({ projectId }) {
{showCustomFields && (
<div className="space-y-2 border border-gray-200 rounded-md p-3 bg-gray-50">
{customFields.map((field, index) => (
<div className="text-xs text-gray-600 font-medium mb-2">
Standardowe pola (można edytować i usuwać):
</div>
{customFields.slice(0, 9).map((field, index) => (
<div key={index} className="flex gap-2 items-center">
<input
type="text"
placeholder="Nazwa pola (np. custom_note)"
placeholder="Nazwa pola"
value={field.key}
onChange={(e) => handleCustomFieldChange(index, 'key', e.target.value)}
className="flex-1 px-2 py-1 text-sm border border-gray-300 rounded focus:ring-1 focus:ring-blue-500 focus:border-transparent"
@@ -199,32 +213,68 @@ export default function DocumentGenerator({ projectId }) {
onChange={(e) => handleCustomFieldChange(index, 'value', e.target.value)}
className="flex-1 px-2 py-1 text-sm border border-gray-300 rounded focus:ring-1 focus:ring-blue-500 focus:border-transparent"
/>
{customFields.length > 1 && (
<Button
type="button"
variant="ghost"
size="sm"
onClick={() => removeCustomField(index)}
className="text-red-600 hover:text-red-800 p-1"
>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
</svg>
</Button>
)}
<Button
type="button"
variant="ghost"
size="sm"
onClick={() => removeCustomField(index)}
className="text-red-600 hover:text-red-800 p-1"
>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
</svg>
</Button>
</div>
))}
{customFields.length > 9 && (
<>
<div className="text-xs text-gray-600 font-medium mt-4 mb-2">
Dodatkowe pola:
</div>
{customFields.slice(9).map((field, index) => (
<div key={index + 9} className="flex gap-2 items-center">
<input
type="text"
placeholder="Nazwa pola"
value={field.key}
onChange={(e) => handleCustomFieldChange(index + 9, 'key', e.target.value)}
className="flex-1 px-2 py-1 text-sm border border-gray-300 rounded focus:ring-1 focus:ring-blue-500 focus:border-transparent"
/>
<input
type="text"
placeholder="Wartość"
value={field.value}
onChange={(e) => handleCustomFieldChange(index + 9, 'value', e.target.value)}
className="flex-1 px-2 py-1 text-sm border border-gray-300 rounded focus:ring-1 focus:ring-blue-500 focus:border-transparent"
/>
<Button
type="button"
variant="ghost"
size="sm"
onClick={() => removeCustomField(index + 9)}
className="text-red-600 hover:text-red-800 p-1"
>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
</svg>
</Button>
</div>
))}
</>
)}
<Button
type="button"
variant="outline"
size="sm"
onClick={addCustomField}
className="w-full text-xs"
className="w-full text-xs mt-2"
>
+ Dodaj pole
+ Dodaj dodatkowe pole
</Button>
<div className="text-xs text-gray-500 mt-2">
Wprowadź dodatkowe dane, które będą dostępne w szablonie jako {"{custom_note}"}, {"{additional_info}"} itp.
Standardowe pola wstępnie wypełnione, ale można je edytować lub usuwać. Wszystkie pola będą dostępne w szablonie jako {"{nazwa_pola}"}.
</div>
</div>
)}