6.7.0: Описание товаров и редизайн выполнения
All checks were successful
Build and Push Docker Image / build-and-push (push) Successful in 1m24s
All checks were successful
Build and Push Docker Image / build-and-push (push) Successful in 1m24s
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
poignatov
@@ -127,8 +127,44 @@ function ShoppingItemDetail({ itemId, onClose, onRefresh, onItemCompleted, onNav
|
||||
|
||||
{!loading && !error && item && (
|
||||
<>
|
||||
<div className="progression-section">
|
||||
<label className="progression-label">Объём</label>
|
||||
{item.description && (
|
||||
<div className="shopping-item-description-card">
|
||||
<div className="shopping-item-description">
|
||||
{item.description.split(/(https?:\/\/[^\s<>"'`,;!)\]]+)/gi).map((part, i) => {
|
||||
if (/^https?:\/\//i.test(part)) {
|
||||
let host
|
||||
try {
|
||||
host = new URL(part).host.replace(/^www\./, '')
|
||||
} catch {
|
||||
host = 'Открыть ссылку'
|
||||
}
|
||||
return (
|
||||
<a key={i} href={part} target="_blank" rel="noopener noreferrer" className="shopping-item-description-link">
|
||||
{host}
|
||||
</a>
|
||||
)
|
||||
}
|
||||
return <span key={i}>{part}</span>
|
||||
})}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="shopping-item-history-button"
|
||||
onClick={() => {}}
|
||||
title="История"
|
||||
>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
|
||||
<polyline points="14 2 14 8 20 8"></polyline>
|
||||
<line x1="16" y1="13" x2="8" y2="13"></line>
|
||||
<line x1="16" y1="17" x2="8" y2="17"></line>
|
||||
<polyline points="10 9 9 9 8 9"></polyline>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="shopping-item-complete-row">
|
||||
<div className="progression-input-wrapper">
|
||||
<input
|
||||
type="number"
|
||||
@@ -163,22 +199,19 @@ function ShoppingItemDetail({ itemId, onClose, onRefresh, onItemCompleted, onNav
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="task-detail-divider"></div>
|
||||
|
||||
<div className="task-actions-section">
|
||||
<div className="task-actions-buttons">
|
||||
<div className="task-action-left">
|
||||
<button
|
||||
onClick={handleComplete}
|
||||
disabled={isCompleting}
|
||||
className="action-button action-button-check"
|
||||
>
|
||||
{isCompleting ? 'Выполнение...' : 'Выполнить'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleComplete}
|
||||
disabled={isCompleting}
|
||||
className="shopping-item-complete-button"
|
||||
>
|
||||
{isCompleting ? (
|
||||
<div className="shopping-item-complete-spinner"></div>
|
||||
) : (
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
|
||||
<polyline points="20 6 9 17 4 12"></polyline>
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
@@ -8,6 +8,7 @@ import './ShoppingItemForm.css'
|
||||
function ShoppingItemForm({ onNavigate, itemId, boardId, onSaved }) {
|
||||
const { authFetch } = useAuth()
|
||||
const [name, setName] = useState('')
|
||||
const [description, setDescription] = useState('')
|
||||
const [groupName, setGroupName] = useState('')
|
||||
const [groupSuggestions, setGroupSuggestions] = useState([])
|
||||
const [volumeBase, setVolumeBase] = useState('')
|
||||
@@ -49,6 +50,7 @@ function ShoppingItemForm({ onNavigate, itemId, boardId, onSaved }) {
|
||||
if (res.ok) {
|
||||
const data = await res.json()
|
||||
setName(data.name)
|
||||
setDescription(data.description || '')
|
||||
setGroupName(data.group_name || '')
|
||||
if (data.volume_base && data.volume_base !== 1) {
|
||||
setVolumeBase(data.volume_base.toString())
|
||||
@@ -107,6 +109,7 @@ function ShoppingItemForm({ onNavigate, itemId, boardId, onSaved }) {
|
||||
const vb = volumeBase.trim() ? parseFloat(volumeBase.trim()) : null
|
||||
const payload = {
|
||||
name: name.trim(),
|
||||
description: description.trim() || null,
|
||||
group_name: groupName.trim() || null,
|
||||
volume_base: vb && vb > 0 ? vb : null,
|
||||
repetition_period: repetitionPeriod,
|
||||
@@ -200,6 +203,18 @@ function ShoppingItemForm({ onNavigate, itemId, boardId, onSaved }) {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="item-description">Описание</label>
|
||||
<textarea
|
||||
id="item-description"
|
||||
className="form-input"
|
||||
value={description}
|
||||
onChange={e => setDescription(e.target.value)}
|
||||
placeholder="Описание товара"
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="item-group">Группа</label>
|
||||
<input
|
||||
|
||||
@@ -389,8 +389,8 @@ function ShoppingList({ onNavigate, refreshTrigger = 0, isActive = false, initia
|
||||
if (selectedBoardId) fetchItems(selectedBoardId)
|
||||
}
|
||||
|
||||
const handleCloseDetail = () => {
|
||||
if (historyPushedForDetailRef.current) {
|
||||
const handleCloseDetail = (skipHistoryBack = false) => {
|
||||
if (!skipHistoryBack && historyPushedForDetailRef.current) {
|
||||
window.history.back()
|
||||
} else {
|
||||
historyPushedForDetailRef.current = false
|
||||
|
||||
@@ -157,6 +157,103 @@
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.shopping-item-description-card {
|
||||
background: #f3f4f6;
|
||||
border-radius: 10px;
|
||||
padding: 0.75rem 1rem;
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.shopping-item-description {
|
||||
flex: 1;
|
||||
font-size: 0.95rem;
|
||||
color: #374151;
|
||||
line-height: 1.5;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.shopping-item-history-button {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 4px;
|
||||
cursor: pointer;
|
||||
color: #9ca3af;
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.shopping-item-history-button:hover {
|
||||
color: #4f46e5;
|
||||
background-color: rgba(79, 70, 229, 0.1);
|
||||
}
|
||||
|
||||
.shopping-item-description-link {
|
||||
color: #3498db;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.shopping-item-description-link:hover {
|
||||
color: #2980b9;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.shopping-item-complete-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
}
|
||||
|
||||
.shopping-item-complete-row .progression-input-wrapper {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.shopping-item-complete-button {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 0.375rem;
|
||||
border: none;
|
||||
background: linear-gradient(135deg, #10b981, #059669);
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
transition: all 0.2s;
|
||||
box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
|
||||
}
|
||||
|
||||
.shopping-item-complete-button:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
|
||||
}
|
||||
|
||||
.shopping-item-complete-button:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.shopping-item-complete-spinner {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2.5px solid rgba(255, 255, 255, 0.3);
|
||||
border-top-color: white;
|
||||
border-radius: 50%;
|
||||
animation: spin 0.6s linear infinite;
|
||||
}
|
||||
|
||||
.progression-section {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user