| | | 1 | | @model OzonOrdersWeb.Areas.Studio2.ViewModels.MultipleTransactionPagesViewModel |
| | | 2 | | |
| | | 3 | | @{ |
| | 0 | 4 | | ViewData["Title"] = "Страницы по складам"; |
| | 0 | 5 | | var initialOneCOperationDate = Model.OneCOperationDate.ToString("yyyy-MM-ddTHH:mm"); |
| | 0 | 6 | | var displayOneCOperationDate = Model.OneCOperationDate.ToString("dd.MM.yyyy HH:mm"); |
| | | 7 | | } |
| | | 8 | | |
| | | 9 | | <style> |
| | | 10 | | .transaction-date-panel { |
| | | 11 | | border: 1px solid #dee2e6; |
| | | 12 | | border-radius: 0.9rem; |
| | | 13 | | padding: 1rem 1.1rem; |
| | | 14 | | background: #fff; |
| | | 15 | | box-shadow: 0 0.125rem 0.35rem rgba(0, 0, 0, 0.05); |
| | | 16 | | } |
| | | 17 | | |
| | | 18 | | .transaction-date-panel-label { |
| | | 19 | | font-size: 0.82rem; |
| | | 20 | | font-weight: 600; |
| | | 21 | | color: #495057; |
| | | 22 | | margin-bottom: 0.35rem; |
| | | 23 | | } |
| | | 24 | | |
| | | 25 | | .transaction-date-panel-value { |
| | | 26 | | font-size: 0.95rem; |
| | | 27 | | font-weight: 600; |
| | | 28 | | color: #212529; |
| | | 29 | | } |
| | | 30 | | |
| | | 31 | | .transaction-date-panel-note { |
| | | 32 | | color: #6c757d; |
| | | 33 | | } |
| | | 34 | | |
| | | 35 | | .warehouse-groups-grid { |
| | | 36 | | display: grid; |
| | | 37 | | grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); |
| | | 38 | | gap: 1rem; |
| | | 39 | | } |
| | | 40 | | |
| | | 41 | | .warehouse-group-card { |
| | | 42 | | border: 1px solid #dee2e6; |
| | | 43 | | border-radius: 1rem; |
| | | 44 | | padding: 1rem; |
| | | 45 | | background: linear-gradient(180deg, #fff, #f8f9fa); |
| | | 46 | | box-shadow: 0 0.45rem 1.1rem rgba(0, 0, 0, 0.06); |
| | | 47 | | transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; |
| | | 48 | | color: #212529; |
| | | 49 | | } |
| | | 50 | | |
| | | 51 | | .warehouse-group-card * { |
| | | 52 | | color: inherit; |
| | | 53 | | } |
| | | 54 | | |
| | | 55 | | .warehouse-group-card:hover { |
| | | 56 | | transform: translateY(-2px); |
| | | 57 | | box-shadow: 0 0.7rem 1.4rem rgba(0, 0, 0, 0.08); |
| | | 58 | | } |
| | | 59 | | |
| | | 60 | | .warehouse-group-card.is-warning { |
| | | 61 | | border-color: #f0ad4e; |
| | | 62 | | background: linear-gradient(180deg, #fff8e8, #fffdf7); |
| | | 63 | | } |
| | | 64 | | |
| | | 65 | | .warehouse-group-card.is-processed { |
| | | 66 | | border-color: #198754; |
| | | 67 | | background: linear-gradient(180deg, #edf9f0, #ffffff); |
| | | 68 | | } |
| | | 69 | | |
| | | 70 | | .warehouse-group-card.is-disabled { |
| | | 71 | | border-color: #dc3545; |
| | | 72 | | background: linear-gradient(180deg, #fff5f5, #fff); |
| | | 73 | | } |
| | | 74 | | |
| | | 75 | | .warehouse-card-title { |
| | | 76 | | font-size: 1.05rem; |
| | | 77 | | font-weight: 700; |
| | | 78 | | margin: 0; |
| | | 79 | | color: #212529; |
| | | 80 | | } |
| | | 81 | | |
| | | 82 | | .warehouse-card-subtitle { |
| | | 83 | | color: #6c757d; |
| | | 84 | | } |
| | | 85 | | |
| | | 86 | | .warehouse-card-meta { |
| | | 87 | | display: flex; |
| | | 88 | | gap: 0.5rem; |
| | | 89 | | flex-wrap: wrap; |
| | | 90 | | margin-top: 0.75rem; |
| | | 91 | | margin-bottom: 0.75rem; |
| | | 92 | | } |
| | | 93 | | |
| | | 94 | | .warehouse-card-action { |
| | | 95 | | display: inline-flex; |
| | | 96 | | align-items: center; |
| | | 97 | | gap: 0.45rem; |
| | | 98 | | text-decoration: none; |
| | | 99 | | color: #0d6efd; |
| | | 100 | | } |
| | | 101 | | |
| | | 102 | | .warehouse-card-action:hover { |
| | | 103 | | color: #0a58ca; |
| | | 104 | | } |
| | | 105 | | |
| | | 106 | | .warehouse-group-card .badge.text-bg-secondary, |
| | | 107 | | .warehouse-group-card .badge.text-bg-light, |
| | | 108 | | .warehouse-group-card .badge.text-bg-success, |
| | | 109 | | .warehouse-group-card .badge.text-bg-warning { |
| | | 110 | | color: #212529 !important; |
| | | 111 | | } |
| | | 112 | | </style> |
| | | 113 | | |
| | | 114 | | <div class="container mt-4"> |
| | | 115 | | <div class="transaction-date-panel mb-4"> |
| | | 116 | | <div class="row g-3 align-items-end"> |
| | | 117 | | <div class="col-lg-4 col-md-5"> |
| | | 118 | | <label for="oneCOperationDate" class="transaction-date-panel-label">Единая дата проведения в 1С</label> |
| | | 119 | | <input id="oneCOperationDate" |
| | | 120 | | type="datetime-local" |
| | | 121 | | class="form-control" |
| | | 122 | | value="@initialOneCOperationDate" /> |
| | | 123 | | </div> |
| | | 124 | | <div class="col-lg-8 col-md-7"> |
| | 0 | 125 | | <div class="transaction-date-panel-value" id="oneCOperationDatePreview">@displayOneCOperationDate МСК</d |
| | | 126 | | <div class="transaction-date-panel-note small mt-1">Эта дата будет передана во все открываемые страницы |
| | | 127 | | </div> |
| | | 128 | | </div> |
| | | 129 | | </div> |
| | | 130 | | |
| | | 131 | | <div class="d-flex justify-content-between align-items-start flex-wrap gap-3 mb-4"> |
| | | 132 | | <div> |
| | | 133 | | <h2 class="mb-1">Создано несколько страниц по складам</h2> |
| | | 134 | | <p class="text-muted mb-0">Откройте каждую группу отдельно. После перехода карточка будет отмечена как обраб |
| | | 135 | | </div> |
| | 0 | 136 | | <span class="badge rounded-pill text-bg-primary fs-6">Групп: @Model.WarehousePages.Count</span> |
| | | 137 | | </div> |
| | | 138 | | |
| | | 139 | | <div class="warehouse-groups-grid"> |
| | 0 | 140 | | @foreach (var transactionPage in Model.WarehousePages) |
| | | 141 | | { |
| | 0 | 142 | | var cardClasses = "warehouse-group-card"; |
| | 0 | 143 | | if (transactionPage.HasWarnings) |
| | | 144 | | { |
| | 0 | 145 | | cardClasses += " is-warning"; |
| | | 146 | | } |
| | 0 | 147 | | if (!transactionPage.CanOpen) |
| | | 148 | | { |
| | 0 | 149 | | cardClasses += " is-disabled"; |
| | | 150 | | } |
| | | 151 | | |
| | 0 | 152 | | <article class="@cardClasses" data-group-card data-group-key="@transactionPage.GroupKey"> |
| | | 153 | | <div class="d-flex justify-content-between gap-3 align-items-start"> |
| | | 154 | | <div> |
| | 0 | 155 | | <h3 class="warehouse-card-title">@transactionPage.WarehouseName</h3> |
| | | 156 | | <div class="warehouse-card-subtitle small">Промежуточная группа для отдельного проведения</div> |
| | | 157 | | </div> |
| | | 158 | | <span class="badge rounded-pill @(transactionPage.CanOpen ? "text-bg-secondary" : "text-bg-danger")" |
| | 0 | 159 | | @(transactionPage.CanOpen ? "Готово" : "Нужно проверить") |
| | | 160 | | </span> |
| | | 161 | | </div> |
| | | 162 | | |
| | | 163 | | <div class="warehouse-card-meta"> |
| | 0 | 164 | | <span class="badge text-bg-light border">Заказов: @transactionPage.OrdersCount</span> |
| | 0 | 165 | | @if (transactionPage.HasWarnings) |
| | | 166 | | { |
| | | 167 | | <span class="badge text-bg-warning">Есть предупреждение</span> |
| | | 168 | | } |
| | | 169 | | <span class="badge text-bg-success d-none" data-processed-badge>Обработано</span> |
| | | 170 | | </div> |
| | | 171 | | |
| | 0 | 172 | | @if (transactionPage.HasWarnings) |
| | | 173 | | { |
| | | 174 | | <div class="alert alert-warning small py-2 px-3 mb-3" role="alert"> |
| | 0 | 175 | | @transactionPage.WarningText |
| | | 176 | | </div> |
| | | 177 | | } |
| | | 178 | | |
| | 0 | 179 | | @if (transactionPage.CanOpen) |
| | | 180 | | { |
| | | 181 | | <a href="@transactionPage.Url" |
| | | 182 | | target="_blank" |
| | | 183 | | class="btn btn-outline-primary warehouse-card-action transaction-link" |
| | 0 | 184 | | data-group-key="@transactionPage.GroupKey"> |
| | | 185 | | <span>Открыть страницу</span> |
| | | 186 | | </a> |
| | | 187 | | } |
| | | 188 | | else |
| | | 189 | | { |
| | | 190 | | <div class="text-danger small fw-semibold">Группа не может быть открыта автоматически, пока не будут |
| | | 191 | | } |
| | | 192 | | </article> |
| | | 193 | | } |
| | | 194 | | </div> |
| | | 195 | | </div> |
| | | 196 | | |
| | | 197 | | <script> |
| | | 198 | | const processedGroupsStorageKey = 'shipped-to-client-processed-groups'; |
| | | 199 | | |
| | | 200 | | function formatOneCOperationDate(value) { |
| | | 201 | | if (!value) { |
| | | 202 | | return 'Дата не выбрана'; |
| | | 203 | | } |
| | | 204 | | |
| | | 205 | | const date = new Date(value); |
| | | 206 | | if (Number.isNaN(date.getTime())) { |
| | | 207 | | return value; |
| | | 208 | | } |
| | | 209 | | |
| | | 210 | | return new Intl.DateTimeFormat('ru-RU', { |
| | | 211 | | day: '2-digit', |
| | | 212 | | month: '2-digit', |
| | | 213 | | year: 'numeric', |
| | | 214 | | hour: '2-digit', |
| | | 215 | | minute: '2-digit' |
| | | 216 | | }).format(date) + ' МСК'; |
| | | 217 | | } |
| | | 218 | | |
| | | 219 | | function updateTransactionLinks(dateValue) { |
| | | 220 | | document.querySelectorAll('.transaction-link').forEach(function (link) { |
| | | 221 | | const url = new URL(link.href, window.location.origin); |
| | | 222 | | if (dateValue) { |
| | | 223 | | url.searchParams.set('oneCOperationDate', dateValue); |
| | | 224 | | } else { |
| | | 225 | | url.searchParams.delete('oneCOperationDate'); |
| | | 226 | | } |
| | | 227 | | |
| | | 228 | | link.href = url.pathname + url.search; |
| | | 229 | | }); |
| | | 230 | | |
| | | 231 | | const preview = document.getElementById('oneCOperationDatePreview'); |
| | | 232 | | if (preview) { |
| | | 233 | | preview.textContent = formatOneCOperationDate(dateValue); |
| | | 234 | | } |
| | | 235 | | } |
| | | 236 | | |
| | | 237 | | function getProcessedGroups() { |
| | | 238 | | try { |
| | | 239 | | return JSON.parse(localStorage.getItem(processedGroupsStorageKey) || '[]'); |
| | | 240 | | } catch { |
| | | 241 | | return []; |
| | | 242 | | } |
| | | 243 | | } |
| | | 244 | | |
| | | 245 | | function setProcessedGroups(groups) { |
| | | 246 | | localStorage.setItem(processedGroupsStorageKey, JSON.stringify(groups)); |
| | | 247 | | } |
| | | 248 | | |
| | | 249 | | function markGroupCardProcessed(groupKey) { |
| | | 250 | | if (!groupKey) { |
| | | 251 | | return; |
| | | 252 | | } |
| | | 253 | | |
| | | 254 | | document.querySelectorAll('[data-group-card]').forEach(function (card) { |
| | | 255 | | if (card.getAttribute('data-group-key') !== groupKey) { |
| | | 256 | | return; |
| | | 257 | | } |
| | | 258 | | |
| | | 259 | | card.classList.add('is-processed'); |
| | | 260 | | const badge = card.querySelector('[data-processed-badge]'); |
| | | 261 | | if (badge) { |
| | | 262 | | badge.classList.remove('d-none'); |
| | | 263 | | } |
| | | 264 | | }); |
| | | 265 | | } |
| | | 266 | | |
| | | 267 | | const processedGroups = getProcessedGroups(); |
| | | 268 | | processedGroups.forEach(markGroupCardProcessed); |
| | | 269 | | |
| | | 270 | | document.querySelectorAll('.transaction-link').forEach(function (link) { |
| | | 271 | | link.addEventListener('click', function () { |
| | | 272 | | const groupKey = this.getAttribute('data-group-key'); |
| | | 273 | | const groups = getProcessedGroups(); |
| | | 274 | | if (groupKey && !groups.includes(groupKey)) { |
| | | 275 | | groups.push(groupKey); |
| | | 276 | | setProcessedGroups(groups); |
| | | 277 | | } |
| | | 278 | | markGroupCardProcessed(groupKey); |
| | | 279 | | }); |
| | | 280 | | }); |
| | | 281 | | |
| | | 282 | | const oneCOperationDateInput = document.getElementById('oneCOperationDate'); |
| | | 283 | | if (oneCOperationDateInput) { |
| | | 284 | | updateTransactionLinks(oneCOperationDateInput.value); |
| | | 285 | | oneCOperationDateInput.addEventListener('input', function () { |
| | | 286 | | updateTransactionLinks(this.value); |
| | | 287 | | }); |
| | | 288 | | oneCOperationDateInput.addEventListener('change', function () { |
| | | 289 | | updateTransactionLinks(this.value); |
| | | 290 | | }); |
| | | 291 | | } |
| | | 292 | | </script> |