Quick update to fix button colors on view.items and add hover and highlight to the items table

kgOrdersClient/View.Items.dfm

@@ -48,7 +48,6 @@ object FViewItems: TFViewItems
     Height = 25
     Caption = 'Add'
     ChildOrder = 7
-    ElementClassName = 'btn btn-light'
     ElementID = 'btnadd'
     ElementFont = efCSS
     HeightStyle = ssAuto
@@ -110,6 +109,7 @@ object FViewItems: TFViewItems
     ElementPosition = epRelative
     Role = 'null'
     TabOrder = 5
+    Visible = False
     object lblMessage: TWebLabel
       Left = 28
       Top = 9
@@ -148,7 +148,6 @@ object FViewItems: TFViewItems
     Height = 25
     Caption = 'Save'
     ChildOrder = 79
-    ElementClassName = 'btn btn-light'
     ElementID = 'btnconfirm'
     ElementFont = efCSS
     ElementPosition = epRelative
@@ -160,12 +159,11 @@ object FViewItems: TFViewItems
   end
   object btnCancel: TWebButton
     Left = 565
-    Top = 259
+    Top = 256
     Width = 96
     Height = 25
     Caption = 'Cancel'
     ChildOrder = 79
-    ElementClassName = 'btn btn-light'
     ElementID = 'btncancel'
     ElementFont = efCSS
     ElementPosition = epRelative
@@ -182,7 +180,6 @@ object FViewItems: TFViewItems
     Height = 25
     Caption = 'Delete'
     ChildOrder = 79
-    ElementClassName = 'btn btn-light'
     ElementID = 'btndelete'
     ElementFont = efCSS
     HeightStyle = ssAuto
@@ -197,7 +194,6 @@ object FViewItems: TFViewItems
     Height = 25
     Caption = 'Edit'
     ChildOrder = 83
-    ElementClassName = 'btn btn-light'
     ElementID = 'btnedit'
     ElementFont = efCSS
     HeightStyle = ssAuto

kgOrdersClient/View.Items.html

@@ -62,7 +62,7 @@
                         </div>
                     </form>
 
-                    <table class="table table-responsive table-striped table-bordered" id="tblPhoneGrid">
+                    <table class="table table-responsive table-striped table-hover table-bordered" id="tblPhoneGrid">
                         <thead class="thead-dark">
                             <tr>
                                 <th scope="col">ID</th>

kgOrdersClient/View.Items.pas

@@ -2,7 +2,7 @@
 // to sort the entries, filter their search, and search for a specific person.
 // Authors:
 // Cameron Hayes
-// Mac ...
+// Mac Stephens
 
 unit View.Items;
 
@@ -115,46 +115,74 @@ begin
   cbStatus.enabled := true;
 end;
 
+
 procedure TFViewItems.AddRowToTable(ID, Name, Description, Status: string);
-// Adds rows to the table
-// ID: item ID
-// Name: item name
-// Description: item description
-// Status: inactive or active
+// Adds one row to #tblPhoneGrid and lets Bootstrap 5.3 highlight the row
+// with its built-in `table-active` class when the user clicks it.
 var
-  NewRow, Cell, P, Button, Audio: TJSHTMLElement;
+  NewRow, Cell: TJSHTMLElement;
 begin
   NewRow := TJSHTMLElement(document.createElement('tr'));
 
-  // Item ID Cell
+  // Row-select click handler
+  NewRow.addEventListener('click',
+    procedure(Event: TJSMouseEvent)
+    var
+      TBody    : TJSHTMLElement;
+      Rows     : TJSHTMLCollection;
+      I        : Integer;
+      RowElem  : TJSHTMLElement;
+    begin
+      // Grab the <tbody> once and cast it
+      TBody := TJSHTMLElement(
+                 (document.getElementById('tblPhoneGrid') as TJSHTMLElement)
+                   .getElementsByTagName('tbody')[0]
+               );
+
+      // Remove 'table-active' from every existing row
+      Rows := TBody.children;
+      for I := 0 to Rows.length - 1 do
+      begin
+        RowElem := TJSHTMLElement(Rows.item(I));   // ? cast Node ? HTMLElement
+        RowElem.classList.remove('table-primary');
+      end;
+
+      // Add highlight to the clicked row
+      TJSHTMLElement(Event.currentTarget).classList.add('table-primary');
+    end
+  );
+
   Cell := TJSHTMLElement(document.createElement('td'));
   Cell.setAttribute('data-label', 'Item ID');
   Cell.innerText := ID;
   NewRow.appendChild(Cell);
 
-  // Name Cell
   Cell := TJSHTMLElement(document.createElement('td'));
   Cell.setAttribute('data-label', 'Name');
   Cell.innerText := Name;
   NewRow.appendChild(Cell);
 
-  // Description Cell
   Cell := TJSHTMLElement(document.createElement('td'));
   Cell.setAttribute('data-label', 'Description');
   Cell.innerText := Description;
   NewRow.appendChild(Cell);
 
-  // Status Cell
   Cell := TJSHTMLElement(document.createElement('td'));
   Cell.setAttribute('data-label', 'Status');
   Cell.innerText := Status;
   NewRow.appendChild(Cell);
 
-  // Appends new rows to the table body
-  TJSHTMLElement(document.getElementById('tblPhoneGrid').getElementsByTagName('tbody')[0]).appendChild(NewRow);
+  TJSHTMLElement(
+    (document.getElementById('tblPhoneGrid') as TJSHTMLElement)
+      .getElementsByTagName('tbody')[0]
+  ).appendChild(NewRow);
+
   Utils.HideSpinner('spinner');
 end;
 
+
+
+
 procedure TFViewItems.GeneratePagination(TotalPages: Integer);
 // Generates pagination for the table.
 // TotalPages: Total amount of pages generated by the search

kgOrdersClient/webKGOrders.dproj

@@ -208,7 +208,6 @@
         <DCCReference Include="Utils.pas"/>
         <DCCReference Include="View.AddItem.pas">
             <Form>fViewAddItem</Form>
-            <FormType>dfm</FormType>
             <DesignClass>TWebForm</DesignClass>
         </DCCReference>
         <None Include="index.html"/>

kgOrdersServer/kgOrdersServer.ini

@@ -2,7 +2,7 @@
 MemoLogLevel=3
 FileLogLevel=5
 webClientVersion=0.9.4
-LogFileNum=719
+LogFileNum=721
 
 [Database]
 --Server=192.168.159.131