updated add order form, which is now responsive using fnc grid

kgOrdersClient/View.AddOrder.dfm

 object FAddOrder: TFAddOrder
   Width = 982
   Height = 633
+  CSSLibrary = cssBootstrap
+  ElementFont = efCSS
   Font.Charset = ANSI_CHARSET
   Font.Color = clBlack
   Font.Height = -11
   Font.Name = 'Arial'
   Font.Style = []
   ParentFont = False
-  object lblEntries: TWebLabel
-    Left = 61
-    Top = 79
-    Width = 77
-    Height = 14
-    Caption = 'Showing 0 of ...'
-    ElementID = 'lblentries'
-    ElementFont = efCSS
-    HeightStyle = ssAuto
-    HeightPercent = 100.000000000000000000
-    WidthPercent = 100.000000000000000000
-  end
-  object lblEntries2: TWebLabel
-    Left = 177
-    Top = 79
-    Width = 49
-    Height = 14
-    Caption = 'lblEntries2'
-    ElementID = 'lblentries2'
-    ElementFont = efCSS
-    HeightStyle = ssAuto
-    HeightPercent = 100.000000000000000000
-    WidthPercent = 100.000000000000000000
-  end
+  OnShow = WebFormShow
   object WebLabel2: TWebLabel
     Left = 296
     Top = 41
@@ -62,6 +41,7 @@ object FAddOrder: TFAddOrder
     Height = 22
     Caption = 'Web Plate'
     ChildOrder = 5
+    ElementID = 'cbwebplate'
     ElementFont = efCSS
     ElementPosition = epIgnore
     HeightStyle = ssAuto
@@ -78,6 +58,7 @@ object FAddOrder: TFAddOrder
     Caption = 'Corrugated Plate'
     Checked = True
     ChildOrder = 5
+    ElementID = 'cbcorrugatedplate'
     ElementFont = efCSS
     ElementPosition = epIgnore
     HeightStyle = ssAuto
@@ -93,8 +74,9 @@ object FAddOrder: TFAddOrder
     Width = 146
     Height = 22
     ChildOrder = 8
+    ElementID = 'edtTEST'
     ElementFont = efCSS
-    ElementPosition = epIgnore
+    ElementPosition = epRelative
     HeightStyle = ssAuto
     HeightPercent = 100.000000000000000000
     WidthStyle = ssAuto
@@ -107,6 +89,7 @@ object FAddOrder: TFAddOrder
     Width = 121
     Height = 22
     ChildOrder = 8
+    ElementID = 'edtid'
     ElementFont = efCSS
     ElementPosition = epIgnore
     HeightStyle = ssAuto
@@ -121,6 +104,7 @@ object FAddOrder: TFAddOrder
     Height = 25
     Caption = 'Confirm'
     ChildOrder = 9
+    ElementID = 'btnconfirm'
     ElementFont = efCSS
     ElementPosition = epIgnore
     HeightStyle = ssAuto
@@ -130,12 +114,13 @@ object FAddOrder: TFAddOrder
     OnClick = btnConfirmClick
   end
   object btnCancel: TWebButton
-    Left = 768
+    Left = 720
     Top = 52
     Width = 96
     Height = 25
     Caption = 'Cancel'
     ChildOrder = 9
+    ElementID = 'btncancel'
     ElementFont = efCSS
     ElementPosition = epIgnore
     HeightStyle = ssAuto
@@ -149,12 +134,11 @@ object FAddOrder: TFAddOrder
     Top = 124
     Width = 982
     Height = 509
+    ElementID = 'pnlfncgrid'
     Align = alBottom
     ChildOrder = 10
     ElementPosition = epRelative
     TabOrder = 6
-    ExplicitTop = 128
-    ExplicitWidth = 1016
     object TMSFNCGrid1: TTMSFNCGrid
       Left = 0
       Top = 0
@@ -227,22 +211,7 @@ object FAddOrder: TFAddOrder
           Font.Name = 'Tahoma'
           Font.Style = []
           ID = ''
-          Width = 68.000000000000000000
-        end
-        item
-          BorderWidth = 1
-          FixedFont.Charset = DEFAULT_CHARSET
-          FixedFont.Color = clWindowText
-          FixedFont.Height = -11
-          FixedFont.Name = 'Tahoma'
-          FixedFont.Style = []
-          Font.Charset = DEFAULT_CHARSET
-          Font.Color = clWindowText
-          Font.Height = -11
-          Font.Name = 'Tahoma'
-          Font.Style = []
-          ID = ''
-          Width = 68.000000000000000000
+          Width = 845.000000000000000000
         end>
       DefaultFont.Charset = DEFAULT_CHARSET
       DefaultFont.Color = clBlack
@@ -311,7 +280,6 @@ object FAddOrder: TFAddOrder
       LeftCol = 0
       ScrollMode = scmItemScrolling
       DesignTimeSampleData = True
-      ExplicitWidth = 1016
     end
   end
   object XDataWebClient1: TXDataWebClient

kgOrdersClient/View.AddOrder.html

-<div>
+<div class="container-fluid">
+    <!-- Row 1: Checkboxes, Search/ID input, and Buttons -->
+    <div class="row mt-3 g-2 justify-content-center align-items-center">
+        <!-- Checkbox 1: Web Plate -->
+        <div class="col-auto d-flex align-items-center">
+            <div class="form-check form-check-lg mt-4 me-2">
+                <input class="form-check-input" type="checkbox" id="cbwebplate" style="transform: scale(1.5);">
+                <label class="form-check-label ms-2" for="cbwebplate">Web Plate</label>
+            </div>
+        </div>
+        <!-- Checkbox 2: Corrugated Plate -->
+        <div class="col-auto d-flex align-items-center">
+            <div class="form-check form-check-lg mt-4 me-2">
+                <input class="form-check-input" type="checkbox" id="cbcorrugatedplate" checked style="transform: scale(1.5);">
+                <label class="form-check-label ms-2" for="cbcorrugatedplate">Corrugated Plate</label>
+            </div>
+        </div>
+        <!-- Search Input -->
+        <div class="col-auto">
+            <label for="edtsearch" class="form-label mb-0">Enter Customer Info</label>
+            <input  id="edtTEST" type="text" class="form-control">
+        </div>
+        <!-- Selected ID -->
+        <div class="col-auto">
+            <label for="edtid" class="form-label mb-0">Selected ID</label>
+            <input type="text" class="form-control" id="edtid" readonly>
+        </div>
+        <!-- Buttons -->
+        <div class="col-auto d-flex justify-content-end">
+            <button id="btnconfirm" class="btn btn-primary mt-3 me-2">Confirm</button>
+            <button id="btncancel" class="btn btn-secondary mt-3">Cancel</button>
+        </div>
+    </div>
+
+    <!-- Row 2: FNC Grid -->
+    <div class="row mt-3">
+        <div class="col-12">
+            <div id="pnlfncgrid" class="grid-container border border-1">
+                <!-- TMS FNC Grid will be rendered here -->
+            </div>
+        </div>
+    </div>
 </div>
+

kgOrdersClient/View.AddOrder.pas

@@ -22,9 +22,7 @@ type
     xdwdsCustomersSHORT_NAME: TStringField;
     xdwdsCustomersADDRESS: TStringField;
     cbWebPlate: TWebCheckBox;
-    lblEntries: TWebLabel;
     cbCorrugatedPlate: TWebCheckBox;
-    lblEntries2: TWebLabel;
     edtSearch: TWebEdit;
     WebLabel2: TWebLabel;
     WebLabel1: TWebLabel;
@@ -36,9 +34,10 @@ type
     procedure cbCorrugatedPlateClick(Sender: TObject);
     procedure cbWebPlateClick(Sender: TObject);
     procedure btnConfirmClick(Sender: TObject);
-    procedure edtSearchChange(Sender: TObject);
     procedure btnCancelClick(Sender: TObject);
     procedure TMSFNCGrid1SelectedCell(Sender: TObject; ACol, ARow: Integer);
+    procedure edtSearchChange(Sender: TObject);
+    procedure WebFormShow(Sender: TObject);
   private
     [async] procedure getCustomers();
     procedure PopulateGridManually;
@@ -64,12 +63,20 @@ begin
       with TFAddOrder(AForm) do
       begin
         GetCustomers();
+        Console.Log('edtSearch Element:', document.getElementById('edtsearch'));
       end;
     end
   );
 end;
 
 
+procedure TFAddOrder.edtSearchChange(Sender: TObject);
+begin
+  Console.Log('edtSearchChange triggered, Text: ' + edtSearch.Text);
+  ApplyFilter;
+end;
+
+
 [async] procedure TFAddOrder.getCustomers();
 var
   xdcResponse: TXDataClientResponse;
@@ -135,6 +142,15 @@ begin
   edtID.Text := TMSFNCGrid1.Cells[0, ARow];
 end;
 
+
+procedure TFAddOrder.WebFormShow(Sender: TObject);
+begin
+  // Set the Delphi OnChange event for edtSearch
+  edtSearch.OnChange := edtSearchChange;
+  Console.Log('edtSearch OnChange is set to edtSearchChange');
+end;
+
+
 procedure TFAddOrder.ApplyFilter;
 var
   fd: TTMSFNCGridFilterData;
@@ -142,30 +158,29 @@ var
   SearchText: string;
 begin
   SearchText := Trim(edtSearch.Text);
+  Console.Log('Filter Applied: ' + SearchText);
 
   TMSFNCGrid1.RemoveFilter;
   TMSFNCGrid1.Filter.Clear;
 
-  // match on first 3 columns
   for i := 0 to 2 do
   begin
     fd := TMSFNCGrid1.Filter.Add;
     fd.Column := i;
     fd.Condition := '*' + SearchText + '*'; // Match text anywhere in the cell
-    fd.CaseSensitive := False; // Make the filter case-insensitive
+    fd.CaseSensitive := False;
 
-    // Use foOR for "match any column" logic
     if i > 0 then
       fd.Operation := foOR
     else
-      fd.Operation := foNONE; // First filter has no logical operation
+      fd.Operation := foNONE;
   end;
 
-  // Apply the filters to the grid
   TMSFNCGrid1.ApplyFilter;
 end;
 
 
+
 procedure TFAddOrder.cbCorrugatedPlateClick(Sender: TObject);
 begin
   cbWebPlate.Checked := False;
@@ -178,7 +193,7 @@ end;
 
 procedure TFAddOrder.btnConfirmClick(Sender: TObject);
 begin
-  Close;
+  ApplyFilter;
 end;
 
 procedure TFAddOrder.btnCancelClick(Sender: TObject);
@@ -187,10 +202,7 @@ begin
   Close;
 end;
 
-procedure TFAddOrder.edtSearchChange(Sender: TObject);
-begin
-  ApplyFilter;
-end;
+
 
 end.
 

kgOrdersClient/View.Orders.dfm

@@ -12,8 +12,8 @@ object FViewOrders: TFViewOrders
   OnCreate = WebFormCreate
   OnShow = WebFormShow
   object lblEntries: TWebLabel
-    Left = 0
-    Top = 336
+    Left = 66
+    Top = 333
     Width = 77
     Height = 13
     Caption = 'Showing 0 of ...'
@@ -24,8 +24,8 @@ object FViewOrders: TFViewOrders
     WidthPercent = 100.000000000000000000
   end
   object lblEntries2: TWebLabel
-    Left = 8
-    Top = 358
+    Left = 66
+    Top = 317
     Width = 49
     Height = 13
     Caption = 'lblEntries2'
@@ -36,14 +36,16 @@ object FViewOrders: TFViewOrders
     WidthPercent = 100.000000000000000000
   end
   object wcbSortBy: TWebComboBox
-    Left = 0
-    Top = 18
+    Left = 368
+    Top = 16
     Width = 145
     Height = 21
     ElementID = 'wcbsortby'
     ElementFont = efCSS
     HeightStyle = ssAuto
     HeightPercent = 100.000000000000000000
+    TabOrder = 4
+    TabStop = False
     Text = 'PROOF DONE'
     WidthPercent = 100.000000000000000000
     ItemIndex = -1
@@ -70,15 +72,18 @@ object FViewOrders: TFViewOrders
     ElementFont = efCSS
     HeightStyle = ssAuto
     HeightPercent = 100.000000000000000000
+    TabOrder = 5
+    TabStop = False
     WidthPercent = 100.000000000000000000
     OnClick = btnApplyClick
   end
   object edtSearch: TWebEdit
-    Left = 162
-    Top = 44
+    Left = 35
+    Top = 16
     Width = 121
     Height = 22
     HelpType = htKeyword
+    TabStop = False
     ChildOrder = 8
     ElementClassName = 'form-control'
     ElementID = 'edtsearch'
@@ -86,10 +91,11 @@ object FViewOrders: TFViewOrders
     HeightStyle = ssAuto
     HeightPercent = 100.000000000000000000
     HideSelection = False
+    TabOrder = 1
     WidthPercent = 100.000000000000000000
   end
   object btnaddOrder: TWebButton
-    Left = 0
+    Left = 59
     Top = 79
     Width = 96
     Height = 25
@@ -99,12 +105,14 @@ object FViewOrders: TFViewOrders
     ElementFont = efCSS
     HeightStyle = ssAuto
     HeightPercent = 100.000000000000000000
+    TabOrder = 6
+    TabStop = False
     WidthPercent = 100.000000000000000000
     OnClick = btnaddOrderClick
   end
   object btnFilters: TWebButton
-    Left = 542
-    Top = 50
+    Left = 462
+    Top = 79
     Width = 96
     Height = 25
     Caption = 'Show Filters'
@@ -113,13 +121,15 @@ object FViewOrders: TFViewOrders
     ElementFont = efCSS
     HeightStyle = ssAuto
     HeightPercent = 100.000000000000000000
+    TabOrder = 9
+    TabStop = False
     WidthPercent = 100.000000000000000000
     OnClick = btnFiltersClick
   end
   object dtpStartDate: TWebDateTimePicker
     Left = 168
     Top = 16
-    Width = 170
+    Width = 85
     Height = 22
     ElementID = 'dtpstartdate'
     HeightStyle = ssAuto
@@ -129,12 +139,14 @@ object FViewOrders: TFViewOrders
     Date = 45553.505972858790000000
     ElementFont = efCSS
     Role = ''
+    TabOrder = 2
+    TabStop = False
     Text = ''
   end
   object dtpEndDate: TWebDateTimePicker
-    Left = 356
+    Left = 266
     Top = 16
-    Width = 170
+    Width = 87
     Height = 22
     ElementID = 'dtpenddate'
     HeightStyle = ssAuto
@@ -144,12 +156,14 @@ object FViewOrders: TFViewOrders
     Date = 45553.505972858790000000
     ElementFont = efCSS
     Role = ''
+    TabOrder = 3
+    TabStop = False
     Text = ''
   end
   object pnlMessage: TWebPanel
-    Left = 220
-    Top = 429
-    Width = 121
+    Left = 82
+    Top = 352
+    Width = 125
     Height = 33
     ElementClassName = 'card'
     ElementID = 'pnl_message'
@@ -160,8 +174,8 @@ object FViewOrders: TFViewOrders
     Role = 'alert'
     TabOrder = 7
     object lblMessage: TWebLabel
-      Left = 28
-      Top = 9
+      Left = 32
+      Top = 11
       Width = 42
       Height = 13
       Caption = 'Message'
@@ -191,7 +205,7 @@ object FViewOrders: TFViewOrders
     end
   end
   object WebButton1: TWebButton
-    Left = 174
+    Left = 188
     Top = 79
     Width = 96
     Height = 25
@@ -201,10 +215,12 @@ object FViewOrders: TFViewOrders
     ElementFont = efCSS
     HeightStyle = ssAuto
     HeightPercent = 100.000000000000000000
+    TabOrder = 7
+    TabStop = False
     WidthPercent = 100.000000000000000000
   end
   object WebButton2: TWebButton
-    Left = 346
+    Left = 328
     Top = 79
     Width = 96
     Height = 25
@@ -214,46 +230,33 @@ object FViewOrders: TFViewOrders
     ElementFont = efCSS
     HeightStyle = ssAuto
     HeightPercent = 100.000000000000000000
+    TabOrder = 8
+    TabStop = False
     WidthPercent = 100.000000000000000000
   end
-  object btnConfirm: TWebButton
-    Left = 566
-    Top = 317
-    Width = 96
-    Height = 25
-    Caption = 'Confirm'
-    ChildOrder = 13
-    ElementClassName = 'btn btn-light'
-    ElementID = 'btn_confirm_order'
-    ElementFont = efCSS
-    HeightStyle = ssAuto
-    HeightPercent = 100.000000000000000000
-    WidthPercent = 100.000000000000000000
-    OnClick = btnConfirmClick
-  end
   object pnlOrders: TWebPanel
-    Left = 128
-    Top = 160
-    Width = 343
-    Height = 187
+    Left = 34
+    Top = 114
+    Width = 619
+    Height = 197
     ElementClassName = 'card'
     ElementID = 'pnl_orders'
     Caption = 'pnlOrders'
     ChildOrder = 15
     ElementBodyClassName = 'card-body'
     ElementFont = efCSS
-    TabOrder = 11
+    TabOrder = 10
     Visible = False
   end
   object XDataWebClient1: TXDataWebClient
     Connection = DMConnection.ApiConnection
-    Left = 8
-    Top = 430
+    Left = 28
+    Top = 410
   end
   object XDataWebDataSet1: TXDataWebDataSet
     Connection = DMConnection.ApiConnection
-    Left = 58
-    Top = 432
+    Left = 70
+    Top = 410
     object XDataWebDataSet1ID: TStringField
       FieldName = 'ID'
     end
@@ -311,18 +314,18 @@ object FViewOrders: TFViewOrders
   end
   object WebDataSource1: TWebDataSource
     DataSet = XDataWebDataSet1
-    Left = 94
-    Top = 430
+    Left = 120
+    Top = 410
   end
   object wdsCustomers: TWebDataSource
     DataSet = xdwdsCustomers
-    Left = 598
-    Top = 406
+    Left = 518
+    Top = 414
   end
   object xdwdsCustomers: TXDataWebDataSet
     Connection = DMConnection.ApiConnection
-    Left = 596
-    Top = 354
+    Left = 422
+    Top = 412
     object xdwdsCustomersNAME: TStringField
       FieldName = 'NAME'
     end
@@ -335,15 +338,15 @@ object FViewOrders: TFViewOrders
   end
   object xdwdsSave: TXDataWebDataSet
     Connection = DMConnection.ApiConnection
-    Left = 498
-    Top = 352
+    Left = 188
+    Top = 408
     object xdwdsSaveCURR_ID: TIntegerField
       FieldName = 'CURR_ID'
     end
   end
   object wdsSave: TWebDataSource
     DataSet = xdwdsSave
-    Left = 490
-    Top = 408
+    Left = 346
+    Top = 412
   end
 end

kgOrdersClient/View.Orders.html

@@ -40,16 +40,16 @@
         <!-- Actions Row -->
         <div class="row mt-3 justify-content-center">
             <div class="col-auto">
-                <button id="btnaddorder" class="btn btn-secondary">Add Order</button>
+                <button id="btnaddorder" class="btn btn-secondary mt-3">Add Order</button>
             </div>
             <div class="col-auto">
-                <button id="btnsetstatus" class="btn btn-secondary">Set Status</button>
+                <button id="btnsetstatus" class="btn btn-secondary mt-3">Set Status</button>
             </div>
             <div class="col-auto">
-                <button id="btngeneratepdf" class="btn btn-secondary">Generate PDF</button>
+                <button id="btngeneratepdf" class="btn btn-secondary mt-3">Generate PDF</button>
             </div>
             <div class="col-auto">
-                <button id="btnfilters" class="btn btn-secondary">Filters</button>
+                <button id="btnfilters" class="btn btn-secondary mt-3">Filters</button>
             </div>
         </div>
     </div>
@@ -58,7 +58,7 @@
 
 
     <!-- Entries Label Section -->
-    <div class="container mt-3">
+    <div class="container mt-2">
         <div class="row">
             <div class="col">
                 <label id="lblentries"></label>
@@ -67,7 +67,7 @@
     </div>
 
     <!-- Table Section -->
-    <div id="order_table_section" class="overflow-auto mt-3 flex-grow-1">
+    <div id="order_table_section" class="overflow-auto mt-2 flex-grow-1">
         <table id="tblPhoneGrid" class="table table-striped table-bordered">
             <thead style="position: sticky; top: 0; z-index: 1; background-color: white; border-bottom: 2px solid #dee2e6;">
                 <tr>
@@ -117,9 +117,20 @@
     </div>
 </div>
 
-<!-- Floating Panel -->
-<div id="pnl_orders" class="position-fixed top-50 start-50 translate-middle bg-white shadow rounded-sm p-4 d-none" style="z-index: 1050; width: 75%;">
-    <!-- Content dynamically added -->
+<!-- pnl_orders Div -->
+<div id="pnl_orders"
+     style="display: none;
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            z-index: 1050;
+            padding: 20px;
+            border-radius: 10px;
+            width: 65%; /* Reduced width for a tighter panel */
+            height: auto; /* Panel height adjusts automatically */
+            background-color: white;
+            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);">
 </div>
 
 <!-- Confirmation Modal -->

kgOrdersClient/View.Orders.pas

@@ -52,7 +52,6 @@ type
     btnCloseNotification: TWebButton;
     WebButton1: TWebButton;
     WebButton2: TWebButton;
-    btnConfirm: TWebButton;
     wdsCustomers: TWebDataSource;
     xdwdsCustomers: TXDataWebDataSet;
     xdwdsCustomersNAME: TStringField;

kgOrdersClient/template/css/app.css

@@ -280,6 +280,42 @@ input[type="text"] {
 }
 
 
+.grid-container {
+    position: relative; /* Ensure the container is the reference for child positioning */
+    height: 400px; /* Set the height for the grid */
+    width: 100%; /* Full width of the parent container */
+    overflow: hidden; /* Prevent unintended overflow */
+}
+
+#TFAddOrder_TMSFNCGrid2 {
+    top: 0px !important; /* Reset the top offset */
+    left: 0px !important; /* Reset the left offset */
+    position: absolute !important; /* Use relative positioning to align with the grid container */
+}
+
+#TFAddOrder_TMSFNCGrid2_Canvas {
+    position: relative !important; /* Ensure absolute positioning within the parent */
+    width: 100% !important; /* Make the canvas fill the container width */
+    height: 100% !important; /* Make the canvas fill the container height */
+    left: 0px !important; /* Align canvas to the left */
+}
+
+#TFAddOrder_ScrollBar5 {
+    top: 0px !important; /* Align scrollbar to the top */
+    right: 0px !important; /* Align scrollbar to the right edge */
+    position: absolute !important; /* Position within the grid container */
+    height: 400px !important; /* Match the height of the grid container */
+    box-sizing: border-box !important; /* Prevent borders from affecting dimensions */
+}
+
+
+
+
+
+
+
+
+
 
 
 

kgOrdersServer/Source/Main.dfm

@@ -3,7 +3,7 @@ object FMain: TFMain
   Top = 0
   Caption = 'KG Orders Server'
   ClientHeight = 597
-  ClientWidth = 764
+  ClientWidth = 773
   Color = clBtnFace
   Font.Charset = DEFAULT_CHARSET
   Font.Color = clWindowText
@@ -12,17 +12,18 @@ object FMain: TFMain
   Font.Style = []
   OnClose = FormClose
   DesignSize = (
-    764
+    773
     597)
   TextHeight = 13
   object memoInfo: TMemo
     Left = 20
     Top = 44
-    Width = 744
+    Width = 753
     Height = 549
     Anchors = [akLeft, akTop, akRight, akBottom]
     ReadOnly = True
     TabOrder = 0
+    ExplicitWidth = 744
   end
   object btnApiSwaggerUI: TButton
     Left = 297

kgOrdersServer/kgOrdersServer.ini

 [Options]
-LogFileNum=28
+LogFileNum=30
 
 [Database]
 --Server=192.168.159.132