Skip to content

K
KGOrders
Commit f2d52452 by Mac Stephens
Options

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

parent 1511d5c1
Showing with 200 additions and 128 deletions
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
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment