Share Mark Complete modal as partial view; hide install button after PWA install
- Extract _CompleteJobModal.cshtml partial; Details.cshtml uses PartialAsync - Job board COMPLETED drop fetches partial via AJAX and shows modal in-place - Add GET Jobs/CompleteJobModal action to load job data for the board modal - install-app.js: persist installed state in localStorage; clears automatically when browser re-fires beforeinstallprompt after uninstall Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -404,6 +404,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Container for the dynamically loaded Mark Complete modal -->
|
||||
<div id="completeJobModalContainer"></div>
|
||||
|
||||
@section Scripts {
|
||||
<script src="~/lib/sortablejs/Sortable.min.js"></script>
|
||||
<script>
|
||||
@@ -582,14 +585,13 @@
|
||||
if (newColEl === oldColEl && evt.newIndex === evt.oldIndex) return;
|
||||
|
||||
// Completing a job requires the full completion flow (time, powder, email/SMS).
|
||||
// Revert the visual move and send the user to the Details page where the
|
||||
// Mark Complete modal captures all of that.
|
||||
// Fetch the Mark Complete modal partial and show it inline so the user
|
||||
// never leaves the board.
|
||||
if (newStatusCode === 'COMPLETED') {
|
||||
oldColEl.insertBefore(card, oldColEl.children[evt.oldIndex] ?? null);
|
||||
updateCount(oldColEl);
|
||||
updateCount(newColEl);
|
||||
showToast('Opening job to complete with full details…', true);
|
||||
setTimeout(() => { window.location.href = card.href + '#completeModal'; }, 600);
|
||||
openCompleteModal(jobId);
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -668,6 +670,26 @@
|
||||
const badge = col.querySelector('.col-count');
|
||||
if (badge) badge.textContent = colEl.querySelectorAll('.board-card').length;
|
||||
}
|
||||
|
||||
function openCompleteModal(jobId) {
|
||||
const container = document.getElementById('completeJobModalContainer');
|
||||
fetch('@Url.Action("CompleteJobModal", "Jobs")' + '?id=' + jobId, {
|
||||
headers: { 'RequestVerificationToken': token }
|
||||
})
|
||||
.then(r => {
|
||||
if (!r.ok) throw new Error('Failed to load modal');
|
||||
return r.text();
|
||||
})
|
||||
.then(html => {
|
||||
container.innerHTML = html;
|
||||
const modalEl = container.querySelector('.modal');
|
||||
if (!modalEl) return;
|
||||
const modal = new bootstrap.Modal(modalEl);
|
||||
modalEl.addEventListener('hidden.bs.modal', () => { container.innerHTML = ''; }, { once: true });
|
||||
modal.show();
|
||||
})
|
||||
.catch(() => showToast('Could not load completion form. Open the job to complete it.', false));
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
}
|
||||
|
||||
@@ -1726,154 +1726,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Complete Job Modal -->
|
||||
<div class="modal fade" id="completeJobModal" tabindex="-1">
|
||||
<div class="modal-dialog modal-dialog-centered modal-lg">
|
||||
<div class="modal-content">
|
||||
<form asp-action="CompleteJob" method="post">
|
||||
<input type="hidden" name="JobId" value="@Model.Id" />
|
||||
<div class="modal-header bg-success bg-opacity-10">
|
||||
<h5 class="modal-title">
|
||||
<i class="bi bi-check-circle me-2 text-success"></i>Complete Job: @Model.JobNumber
|
||||
</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<!-- Actual Time Spent -->
|
||||
<div class="mb-4">
|
||||
<label for="actualTimeSpent" class="form-label fw-semibold">
|
||||
<i class="bi bi-clock me-1 text-primary"></i>Actual Time Spent (hours)
|
||||
</label>
|
||||
<input type="number" class="form-control" id="actualTimeSpent" name="ActualTimeSpentHours"
|
||||
step="0.25" min="0" placeholder="Enter total hours spent on this job">
|
||||
<div class="form-text">Enter the total time in hours (e.g., 2.5 for 2 hours 30 minutes)</div>
|
||||
</div>
|
||||
|
||||
<!-- Actual Powder Usage -->
|
||||
@if (Model.Items != null && Model.Items.Any())
|
||||
{
|
||||
<div class="mb-3">
|
||||
<h6 class="fw-semibold mb-3">
|
||||
<i class="bi bi-palette me-1 text-primary"></i>Actual Powder Usage
|
||||
</h6>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-sm table-hover">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th>Item</th>
|
||||
<th>Coat</th>
|
||||
<th>Color</th>
|
||||
<th class="text-end">Estimated (lbs)</th>
|
||||
<th>Actual (lbs)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@{
|
||||
var coatIndex = 0;
|
||||
}
|
||||
@foreach (var item in Model.Items)
|
||||
{
|
||||
@if (item.Coats != null && item.Coats.Any())
|
||||
{
|
||||
@foreach (var coat in item.Coats.OrderBy(c => c.Sequence))
|
||||
{
|
||||
<tr>
|
||||
<td>
|
||||
<small>@item.Description</small>
|
||||
@if (item.Quantity > 1)
|
||||
{
|
||||
<span class="badge bg-secondary ms-1">×@item.Quantity</span>
|
||||
}
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge bg-secondary">@coat.CoatName</span>
|
||||
</td>
|
||||
<td>
|
||||
@if (!string.IsNullOrEmpty(coat.ColorName))
|
||||
{
|
||||
<small>
|
||||
@coat.ColorName
|
||||
@if (!string.IsNullOrEmpty(coat.ColorCode))
|
||||
{
|
||||
<span class="text-muted">(@coat.ColorCode)</span>
|
||||
}
|
||||
</small>
|
||||
}
|
||||
</td>
|
||||
<td class="text-end">
|
||||
<small class="text-muted">@((coat.PowderToOrder ?? 0).ToString("0.##"))</small>
|
||||
</td>
|
||||
<td>
|
||||
<input type="hidden" name="CoatUsages[@coatIndex].JobItemCoatId" value="@coat.Id" />
|
||||
<input type="number"
|
||||
class="form-control form-control-sm"
|
||||
name="CoatUsages[@coatIndex].ActualPowderUsedLbs"
|
||||
step="0.01"
|
||||
min="0"
|
||||
placeholder="0.00"
|
||||
style="max-width: 120px;">
|
||||
</td>
|
||||
</tr>
|
||||
coatIndex++;
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
<!-- Legacy job item without coats - just show item info -->
|
||||
<tr class="table-secondary">
|
||||
<td colspan="5">
|
||||
<small class="text-muted fst-italic">
|
||||
<i class="bi bi-info-circle me-1"></i>
|
||||
@item.Description - No coat information available (legacy job item)
|
||||
</small>
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="alert alert-info mb-0">
|
||||
<i class="bi bi-info-circle me-2"></i>
|
||||
<small>Enter the actual amount of powder used for each coat. Leave blank if not tracked.</small>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<div class="modal-footer justify-content-between">
|
||||
<div class="d-flex align-items-center gap-2 flex-wrap">
|
||||
@if (!string.IsNullOrWhiteSpace(Model.CustomerEmail))
|
||||
{
|
||||
<div class="form-check form-switch mb-0">
|
||||
<input class="form-check-input" type="checkbox" role="switch"
|
||||
id="completeJobSendEmail" name="SendEmailToCustomer" value="true"
|
||||
@(ViewBag.EmailDefaultOnComplete == true ? "checked" : "") />
|
||||
<label class="form-check-label small" for="completeJobSendEmail">
|
||||
<i class="bi bi-envelope me-1"></i>Notify customer via email
|
||||
</label>
|
||||
</div>
|
||||
}
|
||||
@if (Model.CustomerNotifyBySms && !string.IsNullOrWhiteSpace(Model.CustomerMobilePhone))
|
||||
{
|
||||
<span class="badge bg-info text-white">
|
||||
<i class="bi bi-phone me-1"></i>SMS notification will be sent
|
||||
</span>
|
||||
}
|
||||
else if (!string.IsNullOrWhiteSpace(Model.CustomerMobilePhone) && !Model.CustomerNotifyBySms)
|
||||
{
|
||||
<span class="text-muted small"><i class="bi bi-phone-slash me-1"></i>SMS consent required</span>
|
||||
}
|
||||
</div>
|
||||
<div>
|
||||
<button type="button" class="btn btn-secondary me-2" data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="submit" class="btn btn-success">
|
||||
<i class="bi bi-check-circle me-1"></i>Mark as Completed
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@await Html.PartialAsync("_CompleteJobModal", Model)
|
||||
|
||||
<!-- SMS Compose Modal (Admin/Manager only) -->
|
||||
@if ((bool)(ViewBag.IsAdminOrManager ?? false) && (bool)(ViewBag.SmsEnabled ?? false))
|
||||
@@ -2440,12 +2293,6 @@
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
jobPhotoModule.init(@Model.Id, @Html.Raw(ViewBag.PhotoTagSuggestions ?? "[]"));
|
||||
|
||||
// Auto-open the Mark Complete modal when arriving from the job board
|
||||
if (window.location.hash === '#completeModal') {
|
||||
const modal = document.getElementById('completeJobModal');
|
||||
if (modal) new bootstrap.Modal(modal).show();
|
||||
history.replaceState(null, '', window.location.pathname + window.location.search);
|
||||
}
|
||||
|
||||
// ── Auto-submit after wizard saves an item ────────────────────────
|
||||
let itemsModified = false;
|
||||
|
||||
@@ -0,0 +1,146 @@
|
||||
@model PowderCoating.Application.DTOs.Job.JobDto
|
||||
@{
|
||||
var emailDefault = ViewBag.EmailDefaultOnComplete == true;
|
||||
}
|
||||
<div class="modal fade" id="completeJobModal" tabindex="-1">
|
||||
<div class="modal-dialog modal-dialog-centered modal-lg">
|
||||
<div class="modal-content">
|
||||
<form asp-action="CompleteJob" method="post">
|
||||
@Html.AntiForgeryToken()
|
||||
<input type="hidden" name="JobId" value="@Model.Id" />
|
||||
<div class="modal-header bg-success bg-opacity-10">
|
||||
<h5 class="modal-title">
|
||||
<i class="bi bi-check-circle me-2 text-success"></i>Complete Job: @Model.JobNumber
|
||||
</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="mb-4">
|
||||
<label for="actualTimeSpent" class="form-label fw-semibold">
|
||||
<i class="bi bi-clock me-1 text-primary"></i>Actual Time Spent (hours)
|
||||
</label>
|
||||
<input type="number" class="form-control" id="actualTimeSpent" name="ActualTimeSpentHours"
|
||||
step="0.25" min="0" placeholder="Enter total hours spent on this job">
|
||||
<div class="form-text">Enter the total time in hours (e.g., 2.5 for 2 hours 30 minutes)</div>
|
||||
</div>
|
||||
|
||||
@if (Model.Items != null && Model.Items.Any())
|
||||
{
|
||||
<div class="mb-3">
|
||||
<h6 class="fw-semibold mb-3">
|
||||
<i class="bi bi-palette me-1 text-primary"></i>Actual Powder Usage
|
||||
</h6>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-sm table-hover">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th>Item</th>
|
||||
<th>Coat</th>
|
||||
<th>Color</th>
|
||||
<th class="text-end">Estimated (lbs)</th>
|
||||
<th>Actual (lbs)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@{
|
||||
var coatIndex = 0;
|
||||
}
|
||||
@foreach (var item in Model.Items)
|
||||
{
|
||||
if (item.Coats != null && item.Coats.Any())
|
||||
{
|
||||
foreach (var coat in item.Coats.OrderBy(c => c.Sequence))
|
||||
{
|
||||
<tr>
|
||||
<td>
|
||||
<small>@item.Description</small>
|
||||
@if (item.Quantity > 1)
|
||||
{
|
||||
<span class="badge bg-secondary ms-1">×@item.Quantity</span>
|
||||
}
|
||||
</td>
|
||||
<td><span class="badge bg-secondary">@coat.CoatName</span></td>
|
||||
<td>
|
||||
@if (!string.IsNullOrEmpty(coat.ColorName))
|
||||
{
|
||||
<small>
|
||||
@coat.ColorName
|
||||
@if (!string.IsNullOrEmpty(coat.ColorCode))
|
||||
{
|
||||
<span class="text-muted">(@coat.ColorCode)</span>
|
||||
}
|
||||
</small>
|
||||
}
|
||||
</td>
|
||||
<td class="text-end">
|
||||
<small class="text-muted">@((coat.PowderToOrder ?? 0).ToString("0.##"))</small>
|
||||
</td>
|
||||
<td>
|
||||
<input type="hidden" name="CoatUsages[@coatIndex].JobItemCoatId" value="@coat.Id" />
|
||||
<input type="number"
|
||||
class="form-control form-control-sm"
|
||||
name="CoatUsages[@coatIndex].ActualPowderUsedLbs"
|
||||
step="0.01" min="0" placeholder="0.00"
|
||||
style="max-width: 120px;">
|
||||
</td>
|
||||
</tr>
|
||||
coatIndex++;
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
<tr class="table-secondary">
|
||||
<td colspan="5">
|
||||
<small class="text-muted fst-italic">
|
||||
<i class="bi bi-info-circle me-1"></i>
|
||||
@item.Description — No coat information available (legacy job item)
|
||||
</small>
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="alert alert-info mb-0">
|
||||
<i class="bi bi-info-circle me-2"></i>
|
||||
<small>Enter the actual amount of powder used for each coat. Leave blank if not tracked.</small>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<div class="modal-footer justify-content-between">
|
||||
<div class="d-flex align-items-center gap-2 flex-wrap">
|
||||
@if (!string.IsNullOrWhiteSpace(Model.CustomerEmail))
|
||||
{
|
||||
<div class="form-check form-switch mb-0">
|
||||
<input class="form-check-input" type="checkbox" role="switch"
|
||||
id="completeJobSendEmail" name="SendEmailToCustomer" value="true"
|
||||
@(emailDefault ? "checked" : "") />
|
||||
<label class="form-check-label small" for="completeJobSendEmail">
|
||||
<i class="bi bi-envelope me-1"></i>Notify customer via email
|
||||
</label>
|
||||
</div>
|
||||
}
|
||||
@if (Model.CustomerNotifyBySms && !string.IsNullOrWhiteSpace(Model.CustomerMobilePhone))
|
||||
{
|
||||
<span class="badge bg-info text-white">
|
||||
<i class="bi bi-phone me-1"></i>SMS notification will be sent
|
||||
</span>
|
||||
}
|
||||
else if (!string.IsNullOrWhiteSpace(Model.CustomerMobilePhone) && !Model.CustomerNotifyBySms)
|
||||
{
|
||||
<span class="text-muted small"><i class="bi bi-phone-slash me-1"></i>SMS consent required</span>
|
||||
}
|
||||
</div>
|
||||
<div>
|
||||
<button type="button" class="btn btn-secondary me-2" data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="submit" class="btn btn-success">
|
||||
<i class="bi bi-check-circle me-1"></i>Mark as Completed
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user