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:
@@ -2643,6 +2643,22 @@ public class JobsController : Controller
|
||||
|
||||
#region Job Completion
|
||||
|
||||
/// <summary>
|
||||
/// Returns the Mark Complete modal partial view populated with full job data.
|
||||
/// Called via AJAX from the Job Board when a card is dragged to the Completed column.
|
||||
/// </summary>
|
||||
[HttpGet]
|
||||
public async Task<IActionResult> CompleteJobModal(int id)
|
||||
{
|
||||
var job = await _unitOfWork.Jobs.LoadForDetailsAsync(id);
|
||||
if (job == null) return NotFound();
|
||||
var currentUser = await _userManager.GetUserAsync(User);
|
||||
if (currentUser != null)
|
||||
await PopulateEmailNotificationDefaultsAsync(currentUser.CompanyId);
|
||||
var dto = _mapper.Map<JobDto>(job);
|
||||
return PartialView("_CompleteJobModal", dto);
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// Marks a job as completed, recording actual time spent and final price adjustments.
|
||||
/// Updates the CompletedDate, ActualTimeSpentHours, and FinalPrice fields, transitions to
|
||||
|
||||
@@ -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>
|
||||
@@ -1,12 +1,15 @@
|
||||
// Browser-aware install UX for supported PWAs.
|
||||
// Shows a real install button only when the browser exposes the install prompt,
|
||||
// and falls back to platform-specific instructions for iOS Safari.
|
||||
// After install the button is hidden; if the user later uninstalls, the browser
|
||||
// re-fires beforeinstallprompt which clears the flag and shows the button again.
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
const installBtn = document.getElementById('installAppBtn');
|
||||
if (!installBtn) return;
|
||||
|
||||
const INSTALLED_KEY = 'pclAppInstalled';
|
||||
const ua = navigator.userAgent || '';
|
||||
const isIos = /iphone|ipad|ipod/i.test(ua);
|
||||
const isIosSafari = isIos && /safari/i.test(ua) && !/crios|fxios|edgios/i.test(ua);
|
||||
@@ -51,6 +54,13 @@
|
||||
return;
|
||||
}
|
||||
|
||||
// Hide if already installed and browser hasn't re-offered the prompt
|
||||
// (flag is cleared automatically when beforeinstallprompt fires again after uninstall)
|
||||
if (localStorage.getItem(INSTALLED_KEY) === '1') {
|
||||
hideInstallButton();
|
||||
return;
|
||||
}
|
||||
|
||||
if (deferredPrompt) {
|
||||
showInstallButton('prompt', 'Install App', 'bi-download');
|
||||
return;
|
||||
@@ -64,14 +74,18 @@
|
||||
hideInstallButton();
|
||||
}
|
||||
|
||||
// Browser fires this when the app becomes installable (including after an uninstall).
|
||||
// Clearing the flag here ensures the button reappears if the user previously uninstalled.
|
||||
window.addEventListener('beforeinstallprompt', function (event) {
|
||||
event.preventDefault();
|
||||
deferredPrompt = event;
|
||||
localStorage.removeItem(INSTALLED_KEY);
|
||||
refreshInstallUi();
|
||||
});
|
||||
|
||||
window.addEventListener('appinstalled', function () {
|
||||
deferredPrompt = null;
|
||||
localStorage.setItem(INSTALLED_KEY, '1');
|
||||
hideInstallButton();
|
||||
});
|
||||
|
||||
@@ -84,7 +98,10 @@
|
||||
deferredPrompt.prompt();
|
||||
|
||||
try {
|
||||
await deferredPrompt.userChoice;
|
||||
const choice = await deferredPrompt.userChoice;
|
||||
if (choice.outcome === 'accepted') {
|
||||
localStorage.setItem(INSTALLED_KEY, '1');
|
||||
}
|
||||
} catch {
|
||||
// Ignore prompt result errors; the browser owns the final install flow.
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user