feat: možnost editace existujících podniků u objednávání
This commit is contained in:
@@ -2,8 +2,8 @@ import { useState } from "react";
|
||||
import { Modal, Button, Form, ListGroup, Alert } from "react-bootstrap";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { faTrashCan } from "@fortawesome/free-regular-svg-icons";
|
||||
import { faPlus, faUpRightFromSquare, faXmark } from "@fortawesome/free-solid-svg-icons";
|
||||
import { addStore, deleteStore, Store } from "../../../../types";
|
||||
import { faPen, faPlus, faUpRightFromSquare, faXmark } from "@fortawesome/free-solid-svg-icons";
|
||||
import { addStore, deleteStore, updateStore, Store } from "../../../../types";
|
||||
import { getStoreUrls, storeUrlLabel } from "../../utils/storeUrls";
|
||||
|
||||
type Props = {
|
||||
@@ -13,21 +13,47 @@ type Props = {
|
||||
onStoresChanged: (stores: Store[]) => void;
|
||||
};
|
||||
|
||||
/** Rozpracovaná editace obchodu — původní název slouží k jeho identifikaci na serveru. */
|
||||
type EditState = {
|
||||
originalName: string;
|
||||
name: string;
|
||||
urls: string[];
|
||||
};
|
||||
|
||||
/** Vstupní pole pro URL nabídek — vždy alespoň jedno prázdné, aby bylo kam psát. */
|
||||
function toUrlInputs(urls: string[]): string[] {
|
||||
return urls.length > 0 ? urls : [''];
|
||||
}
|
||||
|
||||
export default function StoreAdminModal({ isOpen, onClose, stores, onStoresChanged }: Readonly<Props>) {
|
||||
const [newName, setNewName] = useState('');
|
||||
// Jeden podnik může být dostupný přes více dovozových služeb — proto seznam URL
|
||||
const [newUrls, setNewUrls] = useState<string[]>(['']);
|
||||
const [edit, setEdit] = useState<EditState | null>(null);
|
||||
const [heslo, setHeslo] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const setUrlAt = (index: number, value: string) =>
|
||||
setNewUrls(prev => prev.map((u, i) => (i === index ? value : u)));
|
||||
const addUrlRow = (urls: string[]) => [...urls, ''];
|
||||
|
||||
const addUrlRow = () => setNewUrls(prev => [...prev, '']);
|
||||
const removeUrlRow = (urls: string[], index: number) =>
|
||||
urls.length === 1 ? [''] : urls.filter((_, i) => i !== index);
|
||||
|
||||
const removeUrlRow = (index: number) =>
|
||||
setNewUrls(prev => (prev.length === 1 ? [''] : prev.filter((_, i) => i !== index)));
|
||||
const setUrlAt = (urls: string[], index: number, value: string) =>
|
||||
urls.map((u, i) => (i === index ? value : u));
|
||||
|
||||
/** Zpracuje odpověď API — vrací true při úspěchu. */
|
||||
const applyResult = (res: { data?: unknown; error?: unknown }): boolean => {
|
||||
if (res.error) {
|
||||
setError((res.error as any).error || 'Nastala chyba');
|
||||
return false;
|
||||
}
|
||||
if (res.data) {
|
||||
onStoresChanged(res.data as Store[]);
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
const handleAdd = async () => {
|
||||
if (!newName.trim()) return;
|
||||
@@ -36,10 +62,7 @@ export default function StoreAdminModal({ isOpen, onClose, stores, onStoresChang
|
||||
try {
|
||||
const urls = newUrls.map(u => u.trim()).filter(Boolean);
|
||||
const res = await addStore({ body: { name: newName.trim(), urls: urls.length > 0 ? urls : undefined, heslo } });
|
||||
if (res.error) {
|
||||
setError((res.error as any).error || 'Nastala chyba');
|
||||
} else if (res.data) {
|
||||
onStoresChanged(res.data as Store[]);
|
||||
if (applyResult(res)) {
|
||||
setNewName('');
|
||||
setNewUrls(['']);
|
||||
}
|
||||
@@ -50,15 +73,41 @@ export default function StoreAdminModal({ isOpen, onClose, stores, onStoresChang
|
||||
}
|
||||
};
|
||||
|
||||
const startEdit = (store: Store) => {
|
||||
setError(null);
|
||||
setEdit({ originalName: store.name, name: store.name, urls: toUrlInputs(store.urls ?? []) });
|
||||
};
|
||||
|
||||
const handleSaveEdit = async () => {
|
||||
if (!edit || !edit.name.trim()) return;
|
||||
setError(null);
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await updateStore({
|
||||
body: {
|
||||
name: edit.originalName,
|
||||
newName: edit.name.trim(),
|
||||
urls: edit.urls.map(u => u.trim()).filter(Boolean),
|
||||
heslo,
|
||||
},
|
||||
});
|
||||
if (applyResult(res)) {
|
||||
setEdit(null);
|
||||
}
|
||||
} catch (e: any) {
|
||||
setError(e.message || 'Nastala chyba');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemove = async (name: string) => {
|
||||
setError(null);
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await deleteStore({ body: { name, heslo } });
|
||||
if (res.error) {
|
||||
setError((res.error as any).error || 'Nastala chyba');
|
||||
} else if (res.data) {
|
||||
onStoresChanged(res.data as Store[]);
|
||||
if (applyResult(res) && edit?.originalName === name) {
|
||||
setEdit(null);
|
||||
}
|
||||
} catch (e: any) {
|
||||
setError(e.message || 'Nastala chyba');
|
||||
@@ -67,6 +116,37 @@ export default function StoreAdminModal({ isOpen, onClose, stores, onStoresChang
|
||||
}
|
||||
};
|
||||
|
||||
/** Řádky se vstupy pro URL — používá se pro přidání i pro editaci obchodu. */
|
||||
const renderUrlInputs = (urls: string[], onChange: (urls: string[]) => void, onSubmit: () => void) => (
|
||||
<>
|
||||
{urls.map((url, index) => (
|
||||
<div key={index} className="d-flex gap-2 mb-2 align-items-center">
|
||||
<Form.Control
|
||||
type="url"
|
||||
placeholder={index === 0
|
||||
? 'URL na nabídku (volitelné, např. Bolt Food/Wolt)'
|
||||
: 'Další URL na nabídku (jiná dovozová služba)'}
|
||||
value={url}
|
||||
onChange={e => onChange(setUrlAt(urls, index, e.target.value))}
|
||||
onKeyDown={e => { e.stopPropagation(); if (e.key === 'Enter') onSubmit(); }}
|
||||
/>
|
||||
<Button
|
||||
variant="outline-secondary"
|
||||
onClick={() => onChange(removeUrlRow(urls, index))}
|
||||
disabled={urls.length === 1 && !url}
|
||||
title="Odebrat tuto URL"
|
||||
>
|
||||
<FontAwesomeIcon icon={faXmark} />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
<Button variant="link" size="sm" className="p-0" onClick={() => onChange(addUrlRow(urls))}>
|
||||
<FontAwesomeIcon icon={faPlus} className="me-1" />
|
||||
Přidat další URL
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
|
||||
return (
|
||||
<Modal show={isOpen} onHide={onClose}>
|
||||
<Modal.Header closeButton>
|
||||
@@ -100,32 +180,8 @@ export default function StoreAdminModal({ isOpen, onClose, stores, onStoresChang
|
||||
onChange={e => setNewName(e.target.value)}
|
||||
onKeyDown={e => { e.stopPropagation(); if (e.key === 'Enter') handleAdd(); }}
|
||||
/>
|
||||
{newUrls.map((url, index) => (
|
||||
<div key={index} className="d-flex gap-2 mb-2 align-items-center">
|
||||
<Form.Control
|
||||
type="url"
|
||||
placeholder={index === 0
|
||||
? 'URL na nabídku (volitelné, např. Bolt Food/Wolt)'
|
||||
: 'Další URL na nabídku (jiná dovozová služba)'}
|
||||
value={url}
|
||||
onChange={e => setUrlAt(index, e.target.value)}
|
||||
onKeyDown={e => { e.stopPropagation(); if (e.key === 'Enter') handleAdd(); }}
|
||||
/>
|
||||
<Button
|
||||
variant="outline-secondary"
|
||||
onClick={() => removeUrlRow(index)}
|
||||
disabled={newUrls.length === 1 && !url}
|
||||
title="Odebrat tuto URL"
|
||||
>
|
||||
<FontAwesomeIcon icon={faXmark} />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
<div className="d-flex justify-content-between align-items-center mb-3">
|
||||
<Button variant="link" size="sm" className="p-0" onClick={addUrlRow}>
|
||||
<FontAwesomeIcon icon={faPlus} className="me-1" />
|
||||
Přidat další URL
|
||||
</Button>
|
||||
{renderUrlInputs(newUrls, setNewUrls, handleAdd)}
|
||||
<div className="d-flex justify-content-end mb-3">
|
||||
<Button variant="primary" onClick={handleAdd} disabled={loading || !newName.trim() || !heslo}>
|
||||
Přidat
|
||||
</Button>
|
||||
@@ -138,6 +194,37 @@ export default function StoreAdminModal({ isOpen, onClose, stores, onStoresChang
|
||||
<ListGroup>
|
||||
{stores.map(s => {
|
||||
const urls = getStoreUrls(s);
|
||||
const isEditing = edit?.originalName === s.name;
|
||||
|
||||
if (isEditing) {
|
||||
return (
|
||||
<ListGroup.Item key={s.name}>
|
||||
<Form.Control
|
||||
className="mb-2"
|
||||
type="text"
|
||||
placeholder="Název obchodu"
|
||||
value={edit.name}
|
||||
onChange={e => setEdit({ ...edit, name: e.target.value })}
|
||||
onKeyDown={e => { e.stopPropagation(); if (e.key === 'Enter') handleSaveEdit(); }}
|
||||
/>
|
||||
{renderUrlInputs(edit.urls, next => setEdit({ ...edit, urls: next }), handleSaveEdit)}
|
||||
<div className="d-flex justify-content-end gap-2 mt-2">
|
||||
<Button variant="secondary" size="sm" onClick={() => setEdit(null)}>
|
||||
Zrušit
|
||||
</Button>
|
||||
<Button
|
||||
variant="primary"
|
||||
size="sm"
|
||||
onClick={handleSaveEdit}
|
||||
disabled={loading || !edit.name.trim() || !heslo}
|
||||
>
|
||||
Uložit
|
||||
</Button>
|
||||
</div>
|
||||
</ListGroup.Item>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<ListGroup.Item key={s.name} className="d-flex justify-content-between align-items-start">
|
||||
<div>
|
||||
@@ -159,13 +246,22 @@ export default function StoreAdminModal({ isOpen, onClose, stores, onStoresChang
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
<FontAwesomeIcon
|
||||
icon={faTrashCan}
|
||||
className="action-icon"
|
||||
title="Odebrat"
|
||||
onClick={() => handleRemove(s.name)}
|
||||
style={{ cursor: 'pointer' }}
|
||||
/>
|
||||
<div className="d-flex gap-3">
|
||||
<FontAwesomeIcon
|
||||
icon={faPen}
|
||||
className="action-icon"
|
||||
title="Upravit"
|
||||
onClick={() => startEdit(s)}
|
||||
style={{ cursor: 'pointer' }}
|
||||
/>
|
||||
<FontAwesomeIcon
|
||||
icon={faTrashCan}
|
||||
className="action-icon"
|
||||
title="Odebrat"
|
||||
onClick={() => handleRemove(s.name)}
|
||||
style={{ cursor: 'pointer' }}
|
||||
/>
|
||||
</div>
|
||||
</ListGroup.Item>
|
||||
);
|
||||
})}
|
||||
|
||||
Reference in New Issue
Block a user