915 add button on substance page to see chemical list in a new tab priority 12

FMS/Pages/Event/Edit.cshtml

@@ -116,14 +116,14 @@
                 <label asp-for="EditEvent.StartDate" class="form-label">
                     Event Start Date <span class="text-danger"> @(Model.AllowedActionTakenSpec.StartDateRequired ? "*" : "")</span>
                 </label>
-                <input asp-for="EditEvent.StartDate" class="form-control datepicker" type="date" placeholder="" />
+                <input asp-for="EditEvent.StartDate" class="form-control datepicker flashOutline is-valid" type="date" placeholder="" />
                 <span asp-validation-for="EditEvent.StartDate" class="text-danger"></span>
             </div>
             <div class="col">
                 <label asp-for="EditEvent.DueDate" class="form-label">
                     Event Due Date <span class="text-danger"> @(Model.AllowedActionTakenSpec.DueDateRequired ? "*" : "")</span>
                 </label>
-                <input asp-for="EditEvent.DueDate" class="form-control datepicker" type="date" placeholder="" />
+                <input asp-for="EditEvent.DueDate" class="form-control datepicker flashOutline is-valid" type="date" placeholder="" />
                 <span asp-validation-for="EditEvent.DueDate" class="text-danger"></span>
             </div>
         </div>
@@ -132,12 +132,12 @@
                 <label asp-for="EditEvent.CompletionDate" class="form-label">
                     Event Completion Date <span class="text-danger"> @(Model.AllowedActionTakenSpec.CompletionDateRequired ? "*" : "")</span>
                 </label>
-                <input asp-for="EditEvent.CompletionDate" class="form-control datepicker" type="date" placeholder="" />
+                <input asp-for="EditEvent.CompletionDate" class="form-control datepicker flashOutline is-valid" type="date" placeholder="" />
                 <span asp-validation-for="EditEvent.CompletionDate" class="text-danger"></span>
             </div>
             <div class="col">
                 <label asp-for="EditEvent.ComplianceOfficerId">Done By (CO) <span class="text-danger">*</span></label>
-                <select asp-for="EditEvent.ComplianceOfficerId" asp-items="Model.ComplianceOfficers" class="form-select">
+                <select asp-for="EditEvent.ComplianceOfficerId" asp-items="Model.ComplianceOfficers" class="form-select flashOutline is-valid">
                     <option value=""></option>
                 </select>
                 <span asp-validation-for="EditEvent.ComplianceOfficerId" class="text-danger"></span>

FMS/Pages/Facilities/Details.cshtml

@@ -1169,6 +1169,9 @@
                                     }
                                 </tbody>
                             </table>
+                            <div>
+                                <a asp-page="/Maintenance/Chemical/Detail" asp-route-id="@Model.FacilityDetail.Id" class="btn btn-sm btn-primary" target="_blank">See Chemicals</a>
+                            </div>
                         </div>
                     </div>
 

FMS/Pages/Maintenance/Chemical/Detail.cshtml

@@ -0,0 +1,89 @@
+@page
+@using FMS.Pages.Maintenance
+@model FMS.Pages.Maintenance.Chemical.DetailModel
+@{
+}
+@section Scripts {
+    <script src="~/js/formIndex.js"></script>
+    <script asp-add-content-to-csp>
+        document.addEventListener('DOMContentLoaded', () => {
+            const filterInput = document.getElementById('chemical-list-filter');
+            const countOutput = document.getElementById('filtered-chemical-list-count');
+            const originalList = document.getElementById('chemical-list');
+            const originalListItems = originalList.getElementsByTagName('li');
+            const filteredList = document.getElementById('filtered-chemical-list');
+
+            filterInput.addEventListener('input', () => {
+                const filter = filterInput.value.toLowerCase();
+                const fragment = document.createDocumentFragment();
+                let count = 0;
+
+                for (let i = 0; i < originalListItems.length; i++) {
+                    const a = originalListItems[i].getElementsByTagName('a')[0];
+                    const textValue = a.textContent || a.innerText;
+                    if (textValue.toLowerCase().indexOf(filter) > -1) {
+                        fragment.appendChild(originalListItems[i].cloneNode(true));
+                        count++;
+                    }
+                }
+
+                originalList.style.display = 'none';
+                filteredList.innerHTML = '';
+                filteredList.appendChild(fragment);
+                countOutput.textContent = count > 0 ? ` (${count} found)` : ' (none found)';
+            });
+        });
+    </script>
+}
+
+@{
+    ViewData["Title"] = $"Site Maintenance: {MaintenanceOptions.Chemical}";
+}
+
+<h1>
+    @MaintenanceOptions.Chemical List <a asp-page="Add" class="btn btn-outline-primary btn-sm">Create New</a>
+</h1>
+<partial name="_AlertPartial" for="DisplayMessage" id="alert" />
+
+<div class="container-fluid">
+    <div class="container bg-light-subtle p-3 m-1 rounded-3">
+        <form class="container my-3">
+            <label class="visually-hidden" for="chemical-list-filter">Filter Chemical list</label>
+            <div class="row row-cols-sm-auto align-items-center">
+                <input id="chemical-list-filter" class="form-control col-md-12 w-auto" placeholder="Filter chemical list" />
+                <span id="filtered-chemical-list-count" class="col-12 text-body-secondary">
+                    (@(Model.Chemicals.Count > 0 ? Model.Chemicals.Count.ToString() : "none") found)
+                </span>
+            </div>
+        </form>
+    </div>
+</div>
+<div class="container-fluid">
+    <div class="container bg-light-subtle p-3 m-1 rounded-3">
+        <ul id="chemical-list">
+            @for (var i = 0; i < Model.Chemicals.Count; i++)
+            {
+                var item = Model.Chemicals[i];
+                <li class="d-flex align-items-center gap-2">
+                    @if (item.Active)
+                    {
+                        <form method="post" class="d-inline">
+                            <button type="submit" name="itemId" value="@item.Id" class="btn btn-outline-info btn-sm">Remove from list</button>
+                        </form>
+                    }
+                    else
+                    {
+                        <form method="post" class="d-inline">
+                            <button type="submit" name="itemId" value="@item.Id" class="btn btn-outline-warning btn-sm">Restore to list</button>
+                        </form>
+                    }
+                    <a asp-page="Edit" asp-route-id="@item.Id"
+                       class="link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover @(!item.Active ? "link-warning" : "link-primary ")">
+                        @item.CasNo <span class="link-body-emphasis">–</span> @item.ChemicalName
+                    </a>
+                </li>
+            }
+        </ul>
+        <ul id="filtered-chemical-list"></ul>
+    </div>
+</div>

FMS/Pages/Maintenance/Chemical/Detail.cshtml.cs

@@ -0,0 +1,68 @@
+using FMS.Domain.Dto;
+using FMS.Domain.Repositories;
+using FMS.Platform.Extensions;
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.Mvc.RazorPages;
+using Microsoft.EntityFrameworkCore;
+
+namespace FMS.Pages.Maintenance.Chemical
+{
+    public class DetailModel : PageModel
+    {
+        private readonly IChemicalRepository _repository;
+        public DetailModel(IChemicalRepository repository) => _repository = repository;
+
+        public IReadOnlyList<ChemicalSummaryDto> Chemicals { get; private set; }
+        public DisplayMessage DisplayMessage { get; private set; }
+
+        public async Task<IActionResult> OnGetAsync()
+        {
+            Chemicals = await _repository.GetChemicalListAsync();
+            DisplayMessage = TempData?.GetDisplayMessage();
+            return Page();
+        }
+
+        public async Task<IActionResult> OnPostAsync(Guid? itemId)
+        {
+            if (itemId == null)
+            {
+                return BadRequest();
+            }
+
+            if (!ModelState.IsValid)
+            {
+                return Page();
+            }
+
+            var chemical = await _repository.GetChemicalByIdAsync(itemId.Value);
+
+            if (chemical == null)
+            {
+                return NotFound();
+            }
+
+            try
+            {
+                await _repository.UpdateChemicalStatusAsync(itemId.Value, !chemical.Active);
+            }
+            catch (DbUpdateConcurrencyException)
+            {
+                if (!await _repository.ChemicalExistsAsync(itemId.Value))
+                {
+                    return NotFound();
+                }
+
+                throw;
+            }
+
+            Chemicals = await _repository.GetChemicalListAsync();
+
+            TempData?.SetDisplayMessage(Context.Success,
+                chemical.Active
+                    ? $"{MaintenanceOptions.Chemical} \"{chemical.ChemicalName}\" successfully removed from list."
+                    : $"{MaintenanceOptions.Chemical} \"{chemical.ChemicalName}\" successfully restored.");
+
+            return RedirectToPage("./Index");
+        }
+    }
+}

FMS/wwwroot/css/site.css

@@ -93,9 +93,9 @@
     text-decoration: underline;
 }
 
-a:focus:not(.btn) {
-    text-decoration: none;
-}
+    a:focus:not(.btn) {
+        text-decoration: none;
+    }
 
 .btn-primary:focus {
     color: #fff;
@@ -159,7 +159,7 @@
 
 .btn-outline-info {
     color: #fff;
-    background-color:  #17a2b8; /*#5BAFD1;*/ /*#507033;*/
+    background-color: #17a2b8; /*#5BAFD1;*/ /*#507033;*/
 }
 
 .btn-outline-warning:focus {
@@ -208,17 +208,17 @@
     color: #008000;
 }
 
-.footer a:hover, .footer a:focus {
-    color: #106717;
-}
+    .footer a:hover, .footer a:focus {
+        color: #106717;
+    }
 
 .footer .bg-brand a {
     color: #ffff00;
 }
 
-.footer .bg-brand a:hover, .footer .bg-brand a:focus {
-    color: #d9d900;
-}
+    .footer .bg-brand a:hover, .footer .bg-brand a:focus {
+        color: #d9d900;
+    }
 
 /* Skip to content link
 -------------------------------------------------- */
@@ -234,25 +234,25 @@
     z-index: 100;
 }
 
-.skipnav:focus {
-    background: #fff;
-    left: 0;
-    outline: 0;
-    box-shadow: 0 0 3px #1B98CA, 0 0 7px #1B98CA;
-    position: absolute;
-    top: 0;
-    transition: all 0.2s ease-in-out;
-}
+    .skipnav:focus {
+        background: #fff;
+        left: 0;
+        outline: 0;
+        box-shadow: 0 0 3px #1B98CA, 0 0 7px #1B98CA;
+        position: absolute;
+        top: 0;
+        transition: all 0.2s ease-in-out;
+    }
 
 /* Button with image 
 -------------------------------------------------- */
 .btn-img {
     line-height: 1;
 }
 
-.btn-img img {
-    height: 35px;
-}
+    .btn-img img {
+        height: 35px;
+    }
 
 .btn-img-bg {
     background: white;
@@ -344,17 +344,17 @@
     border-left: 0.25rem solid var(--callout-border, var(--bs-gray-400));
 }
 
-.callout > :last-child {
-    margin-bottom: 0;
-}
+    .callout > :last-child {
+        margin-bottom: 0;
+    }
 
-.callout + .callout {
-    margin-top: -.25rem;
-}
+    .callout + .callout {
+        margin-top: -.25rem;
+    }
 
-.callout .highlight {
-    background-color: rgba(0, 0, 0, 0.05);
-}
+    .callout .highlight {
+        background-color: rgba(0, 0, 0, 0.05);
+    }
 
 .callout-info {
     --callout-color: var(--bs-info-text-emphasis);
@@ -384,9 +384,9 @@
         border: 1px solid;
     }
 
-    .banner-test-site::after {
-        content: "—Not for public distribution";
-    }
+        .banner-test-site::after {
+            content: "—Not for public distribution";
+        }
 }
 /* Chemical select box
 -------------------------------------------------- */
@@ -412,28 +412,47 @@
 /* Apply directly to your custom accordion or override globally */
 .accordion {
     --bs-accordion-bg: #c8f8d5; /* Body background */
-    /*--bs-accordion-color: #0d5f06;*/ /* Body text color */
+    /*--bs-accordion-color: #013901;*/ /* Body text color */
+    --bs-accordion-btn-bg: #c8f8d5; /* Collapsed button background */
+    --bs-accordion-btn-color: #212529; /* Collapsed button text */
+    --bs-accordion-active-bg: #013901; /* Expanded button background */
+    --bs-accordion-active-color: #fff; /* Expanded button text */
+    --bs-accordion-border-color: #09601d; /* Border color */
+}
+
+[data-bs-theme="dark"] .accordion {
+    --bs-accordion-bg: #c8f8d5; /* Body background */
+    --bs-accordion-color: #c8f8d5; /* Body text color */
     --bs-accordion-btn-bg: #c8f8d5; /* Collapsed button background */
     --bs-accordion-btn-color: #212529; /* Collapsed button text */
     --bs-accordion-active-bg: #013901; /* Expanded button background */
     --bs-accordion-active-color: #c8f8d5; /* Expanded button text */
     --bs-accordion-border-color: #09601d; /* Border color */
 }
 
- /*1. Header Button when EXPANDED (Active)*/ 
+/*1. Header Button when EXPANDED (Active)*/
 .accordion-button:not(.collapsed) {
-    background-color: #013901;  /*Custom active background */
-    color: #c8f8d5;  /*Custom active text color */
+    background-color: #013901; /*Custom active background */
+    color: #c8f8d5; /*Custom active text color */
 }
 
- /*2. Remove or change the blue focus halo outline*/ 
+/*2. Remove or change the blue focus halo outline*/
 .accordion-button:focus {
     box-shadow: initial;
     border-color: #09601d;
 }
 
- /*3. The inner body background */
+/*3. The inner body background */
 .accordion-body {
     background-color: #013901;
 }
 
+/* Valid form control styles for flashing boxes*/
+.form-control.is-valid, .was-validated .form-control:valid {
+    border-color: var(--bs-form-valid-border-color);
+    padding-right: calc(1.5em + .75rem);
+    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1'/></svg>");
+    background-repeat: no-repeat;
+    background-position: right calc(.375em + .1875rem) center;
+    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
+}