feat: podpora více odkazů na podnik při objednávání
This commit is contained in:
@@ -2,8 +2,9 @@ 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 { faUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
|
||||
import { faPlus, faUpRightFromSquare, faXmark } from "@fortawesome/free-solid-svg-icons";
|
||||
import { addStore, deleteStore, Store } from "../../../../types";
|
||||
import { getStoreUrls, storeUrlLabel } from "../../utils/storeUrls";
|
||||
|
||||
type Props = {
|
||||
isOpen: boolean;
|
||||
@@ -14,23 +15,33 @@ type Props = {
|
||||
|
||||
export default function StoreAdminModal({ isOpen, onClose, stores, onStoresChanged }: Readonly<Props>) {
|
||||
const [newName, setNewName] = useState('');
|
||||
const [newUrl, setNewUrl] = 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 [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 = () => setNewUrls(prev => [...prev, '']);
|
||||
|
||||
const removeUrlRow = (index: number) =>
|
||||
setNewUrls(prev => (prev.length === 1 ? [''] : prev.filter((_, i) => i !== index)));
|
||||
|
||||
const handleAdd = async () => {
|
||||
if (!newName.trim()) return;
|
||||
setError(null);
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await addStore({ body: { name: newName.trim(), url: newUrl.trim() || undefined, heslo } });
|
||||
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[]);
|
||||
setNewName('');
|
||||
setNewUrl('');
|
||||
setNewUrls(['']);
|
||||
}
|
||||
} catch (e: any) {
|
||||
setError(e.message || 'Nastala chyba');
|
||||
@@ -89,14 +100,32 @@ export default function StoreAdminModal({ isOpen, onClose, stores, onStoresChang
|
||||
onChange={e => setNewName(e.target.value)}
|
||||
onKeyDown={e => { e.stopPropagation(); if (e.key === 'Enter') handleAdd(); }}
|
||||
/>
|
||||
<div className="d-flex gap-2 mb-3">
|
||||
<Form.Control
|
||||
type="url"
|
||||
placeholder="URL na nabídku (volitelné, např. Bolt Food/Wolt)"
|
||||
value={newUrl}
|
||||
onChange={e => setNewUrl(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>
|
||||
<Button variant="primary" onClick={handleAdd} disabled={loading || !newName.trim() || !heslo}>
|
||||
Přidat
|
||||
</Button>
|
||||
@@ -107,25 +136,39 @@ export default function StoreAdminModal({ isOpen, onClose, stores, onStoresChang
|
||||
<p className="text-muted">Žádné obchody v seznamu</p>
|
||||
) : (
|
||||
<ListGroup>
|
||||
{stores.map(s => (
|
||||
<ListGroup.Item key={s.name} className="d-flex justify-content-between align-items-center">
|
||||
<span>
|
||||
{s.name}
|
||||
{s.url && /^https?:\/\//i.test(s.url) && (
|
||||
<a href={s.url} target="_blank" rel="noopener noreferrer" className="ms-2" title="Otevřít nabídku v nové záložce">
|
||||
<FontAwesomeIcon icon={faUpRightFromSquare} />
|
||||
</a>
|
||||
)}
|
||||
</span>
|
||||
<FontAwesomeIcon
|
||||
icon={faTrashCan}
|
||||
className="action-icon"
|
||||
title="Odebrat"
|
||||
onClick={() => handleRemove(s.name)}
|
||||
style={{ cursor: 'pointer' }}
|
||||
/>
|
||||
</ListGroup.Item>
|
||||
))}
|
||||
{stores.map(s => {
|
||||
const urls = getStoreUrls(s);
|
||||
return (
|
||||
<ListGroup.Item key={s.name} className="d-flex justify-content-between align-items-start">
|
||||
<div>
|
||||
<div>{s.name}</div>
|
||||
{urls.length > 0 && (
|
||||
<small className="text-muted d-flex flex-wrap gap-2">
|
||||
{urls.map(url => (
|
||||
<a
|
||||
key={url}
|
||||
href={url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
title={url}
|
||||
>
|
||||
{storeUrlLabel(url)}
|
||||
<FontAwesomeIcon icon={faUpRightFromSquare} className="ms-1" />
|
||||
</a>
|
||||
))}
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
<FontAwesomeIcon
|
||||
icon={faTrashCan}
|
||||
className="action-icon"
|
||||
title="Odebrat"
|
||||
onClick={() => handleRemove(s.name)}
|
||||
style={{ cursor: 'pointer' }}
|
||||
/>
|
||||
</ListGroup.Item>
|
||||
);
|
||||
})}
|
||||
</ListGroup>
|
||||
)}
|
||||
</Modal.Body>
|
||||
|
||||
Reference in New Issue
Block a user