Skip to content

K
KGOrders
Commit 1511d5c1 by Mac Stephens
Options

changed styling for orders form

parent af90a3ab
Showing with 165 additions and 199 deletions
kgOrdersClient/View.AddOrder.html
<div class="row">
<div class="col-12">
<div class="container mt-4">
<div class="row justify-content-center">
<div class="col-12 col-md-8">
<div class="row">
<div class="col-sm">
<div id="pnl_message" class="alert alert-danger">
<button id="view.login.message.button" type="button" class="btn-close" aria-label="Close"></button>
<span id="view.login.message.label"></span>
</div>
</div>
</div>
<div class="row">
<label id="lblentries"></label>
</div>
<label id="lblentries2"></label>
<nav aria-label="Page navigation">
<ul class="pagination justify-content-center" id="pagination">
<!-- Pagination items will be added dynamically via Delphi code -->
</ul>
</nav>
</div>
</div>
</div>
</div>
<div>
</div>
kgOrdersClient/View.AddOrder.pas
......@@ -10,18 +10,10 @@ uses
VCL.TMSFNCGridCell, VCL.TMSFNCGridOptions, VCL.TMSFNCCustomComponent,
VCL.TMSFNCCustomGrid, VCL.TMSFNCGridDatabaseAdapter, VCL.TMSFNCCustomControl,
VCL.TMSFNCCustomScrollControl, WEBLib.DB, XData.Web.JsonDataset, Vcl.StdCtrls,
Vcl.Controls, ConnectionModule;
Vcl.Controls, ConnectionModule, WEBLib.WebCtrls;
type
TFAddOrder = class(TWebForm)
lblEntries: TWebLabel;
lblEntries2: TWebLabel;
edtSearch: TWebEdit;
edtID: TWebEdit;
pnlMessage: TWebPanel;
lblMessage: TWebLabel;
btnCloseNotification: TWebButton;
btnCancel: TWebButton;
XDataWebClient1: TXDataWebClient;
wdsCustomers: TWebDataSource;
xdwdsCustomers: TXDataWebDataSet;
......@@ -29,13 +21,18 @@ type
xdwdsCustomersNAME: TStringField;
xdwdsCustomersSHORT_NAME: TStringField;
xdwdsCustomersADDRESS: TStringField;
TMSFNCGrid1: TTMSFNCGrid;
btnConfirm: TWebButton;
cbCorrugatedPlate: TWebCheckBox;
cbWebPlate: TWebCheckBox;
WebLabel1: TWebLabel;
lblEntries: TWebLabel;
cbCorrugatedPlate: TWebCheckBox;
lblEntries2: TWebLabel;
edtSearch: TWebEdit;
WebLabel2: TWebLabel;
procedure WebFormShow(Sender: TObject);
WebLabel1: TWebLabel;
edtID: TWebEdit;
btnConfirm: TWebButton;
btnCancel: TWebButton;
pnlFNCGrid: TWebPanel;
TMSFNCGrid1: TTMSFNCGrid;
procedure cbCorrugatedPlateClick(Sender: TObject);
procedure cbWebPlateClick(Sender: TObject);
procedure btnConfirmClick(Sender: TObject);
......@@ -47,6 +44,7 @@ type
procedure PopulateGridManually;
procedure ApplyFilter;
public
class function CreateForm(AElementID: string): TWebForm;
end;
var
......@@ -56,13 +54,23 @@ implementation
{$R *.dfm}
procedure TFAddOrder.WebFormShow(Sender: TObject);
class function TFAddOrder.CreateForm(AElementID: string): TWebForm;
begin
getCustomers(); // Fetch and populate the grid with customer data
Application.CreateForm(TFAddOrder, AElementID, Result,
procedure(AForm: TObject)
begin
with TFAddOrder(AForm) do
begin
GetCustomers();
end;
end
);
end;
[async]
procedure TFAddOrder.getCustomers();
[async] procedure TFAddOrder.getCustomers();
var
xdcResponse: TXDataClientResponse;
customerList: TJSObject;
......@@ -80,6 +88,7 @@ begin
PopulateGridManually;
end;
procedure TFAddOrder.PopulateGridManually;
var
RowIndex: Integer;
......@@ -89,17 +98,15 @@ begin
TMSFNCGrid1.Clear; // Clear any existing data
// Set up column headers
TMSFNCGrid1.ColumnCount := 4;
TMSFNCGrid1.ColumnCount := 3;
TMSFNCGrid1.RowCount := 1;
TMSFNCGrid1.Cells[0, 0] := 'ID';
TMSFNCGrid1.Cells[1, 0] := 'Short Name';
TMSFNCGrid1.Cells[2, 0] := 'Name';
TMSFNCGrid1.Cells[3, 0] := 'Address';
TMSFNCGrid1.ColumnWidths[0] := 40;
TMSFNCGrid1.ColumnWidths[1] := 80;
TMSFNCGrid1.ColumnWidths[2] := 250;
TMSFNCGrid1.ColumnWidths[3] := 400;
// TMSFNCGrid1.ColumnWidths[0] := 40;
// TMSFNCGrid1.ColumnWidths[1] := 80;
// TMSFNCGrid1.ColumnWidths[2] := 250;
// Populate the grid with data from the dataset
xdwdsCustomers.First;
......@@ -112,7 +119,6 @@ begin
TMSFNCGrid1.Cells[0, RowIndex] := xdwdsCustomers.FieldByName('ID').AsString;
TMSFNCGrid1.Cells[1, RowIndex] := xdwdsCustomers.FieldByName('SHORT_NAME').AsString;
TMSFNCGrid1.Cells[2, RowIndex] := xdwdsCustomers.FieldByName('NAME').AsString;
TMSFNCGrid1.Cells[3, RowIndex] := xdwdsCustomers.FieldByName('ADDRESS').AsString;
Inc(RowIndex);
xdwdsCustomers.Next;
......
kgOrdersClient/View.Main.dfm
......@@ -128,7 +128,11 @@ object FViewMain: TFViewMain
Width = 471
Height = 369
ElementID = 'main.webpanel'
HeightStyle = ssAuto
WidthStyle = ssAuto
ChildOrder = 3
ElementFont = efCSS
ElementPosition = epIgnore
TabOrder = 0
end
object WebMessageDlg1: TWebMessageDlg
......
kgOrdersClient/View.Main.html
......@@ -45,13 +45,13 @@
</div>
</nav>
<div id="page-wrapper" class="container-fluid">
<div class="container-fluid">
<div class="row">
<div id="main.webpanel" class="col-12"></div>
</div>
<div class="row">
<div class="col-12">
<div class="form-outline mb-4">
<div class="form-outline">
<textarea class="form-control" id="main.debugmemo" rows="4"></textarea>
</div>
</div>
......
kgOrdersClient/View.Orders.dfm
......@@ -35,30 +35,11 @@ object FViewOrders: TFViewOrders
HeightPercent = 100.000000000000000000
WidthPercent = 100.000000000000000000
end
object wcbPageSize: TWebComboBox
Left = -4
Top = 52
Width = 145
Height = 21
ElementClassName = 'custom-select'
ElementID = 'wcbpagesize'
ElementFont = efCSS
HeightStyle = ssAuto
HeightPercent = 100.000000000000000000
Text = '10'
WidthPercent = 100.000000000000000000
ItemIndex = -1
Items.Strings = (
'10'
'25'
'50')
end
object wcbSortBy: TWebComboBox
Left = 0
Top = 18
Width = 145
Height = 21
ElementClassName = 'custom-select'
ElementID = 'wcbsortby'
ElementFont = efCSS
HeightStyle = ssAuto
......@@ -85,7 +66,6 @@ object FViewOrders: TFViewOrders
Height = 25
Caption = 'Apply'
ChildOrder = 7
ElementClassName = 'btn btn-light'
ElementID = 'btnapply'
ElementFont = efCSS
HeightStyle = ssAuto
......@@ -94,8 +74,8 @@ object FViewOrders: TFViewOrders
OnClick = btnApplyClick
end
object edtSearch: TWebEdit
Left = 48
Top = 382
Left = 162
Top = 44
Width = 121
Height = 22
HelpType = htKeyword
......@@ -115,7 +95,6 @@ object FViewOrders: TFViewOrders
Height = 25
Caption = 'Add Order'
ChildOrder = 5
ElementClassName = 'btn btn-light'
ElementID = 'btnaddorder'
ElementFont = efCSS
HeightStyle = ssAuto
......@@ -130,7 +109,6 @@ object FViewOrders: TFViewOrders
Height = 25
Caption = 'Show Filters'
ChildOrder = 6
ElementClassName = 'btn btn-light'
ElementID = 'btnfilters'
ElementFont = efCSS
HeightStyle = ssAuto
......@@ -143,7 +121,6 @@ object FViewOrders: TFViewOrders
Top = 16
Width = 170
Height = 22
ElementClassName = 'form-control'
ElementID = 'dtpstartdate'
HeightStyle = ssAuto
BorderStyle = bsSingle
......@@ -159,7 +136,6 @@ object FViewOrders: TFViewOrders
Top = 16
Width = 170
Height = 22
ElementClassName = 'form-control'
ElementID = 'dtpenddate'
HeightStyle = ssAuto
BorderStyle = bsSingle
......@@ -182,7 +158,7 @@ object FViewOrders: TFViewOrders
ElementFont = efCSS
ElementPosition = epRelative
Role = 'alert'
TabOrder = 8
TabOrder = 7
object lblMessage: TWebLabel
Left = 28
Top = 9
......@@ -221,7 +197,6 @@ object FViewOrders: TFViewOrders
Height = 25
Caption = 'Set Status'
ChildOrder = 11
ElementClassName = 'btn btn-light'
ElementID = 'btnsetstatus'
ElementFont = efCSS
HeightStyle = ssAuto
......@@ -229,13 +204,12 @@ object FViewOrders: TFViewOrders
WidthPercent = 100.000000000000000000
end
object WebButton2: TWebButton
Left = 344
Left = 346
Top = 79
Width = 96
Height = 25
Caption = 'PDF'
ChildOrder = 12
ElementClassName = 'btn btn-light'
ElementID = 'btngeneratepdf'
ElementFont = efCSS
HeightStyle = ssAuto
......@@ -257,22 +231,19 @@ object FViewOrders: TFViewOrders
WidthPercent = 100.000000000000000000
OnClick = btnConfirmClick
end
object wcbCustomers: TWebDBLookupComboBox
Left = 550
Top = 286
Width = 145
Height = 22
ElementClassName = 'custom-select'
ElementID = 'wcbcustomer'
object pnlOrders: TWebPanel
Left = 128
Top = 160
Width = 343
Height = 187
ElementClassName = 'card'
ElementID = 'pnl_orders'
Caption = 'pnlOrders'
ChildOrder = 15
ElementBodyClassName = 'card-body'
ElementFont = efCSS
HeightPercent = 100.000000000000000000
WidthPercent = 100.000000000000000000
OnChange = wcbCustomersChange
DataField = 'CURR_ID'
DataSource = wdsSave
KeyField = 'ID'
ListField = 'NAME'
ListSource = wdsCustomers
TabOrder = 11
Visible = False
end
object XDataWebClient1: TXDataWebClient
Connection = DMConnection.ApiConnection
......
kgOrdersClient/View.Orders.html
<div class="row">
<div class="col-12">
<div class="container mt-4">
<div class="row justify-content-center">
<div class="col-12 col-md-8">
<div class="container vh-100 d-flex flex-column pb-5" style="max-width: 80%;">
<!-- Alert Section -->
<div class="row">
<div class="col-sm">
<div id="pnl_message" class="alert alert-danger">
......@@ -11,107 +9,129 @@
</div>
</div>
</div>
<div class="mb-3" id="filter_info" style="display: none;">
<div class="row">
<!-- Search Input Field -->
<!-- Filters Section -->
<div class="container mb-3">
<!-- Filters Row (Hidden Initially) -->
<div id="filter_info" style="display: none;">
<div class="row justify-content-center">
<div class="col-auto">
<label class='pe-2' style="font-weight: 700;">Search:</label>
<input class="form-control input-sm" id="edtsearch">
<label for="edtsearch" class="fw-bold">Search:</label>
<input type="text" id="edtsearch" class="form-control">
</div>
<!-- Start Date Input Field -->
<div class="col-auto">
<label class='pe-2' style="font-weight: 700;">Start Date:</label>
<input class="form-control input-sm" id="dtpstartdate" type="date">
<label for="dtpstartdate" class="fw-bold">Start Date:</label>
<input type="date" id="dtpstartdate" class="form-control">
</div>
<!-- End Date Input Field -->
<div class="col-auto">
<label class='pe-2' style="font-weight: 700;">End Date:</label>
<input class="form-control input-sm" id="dtpenddate" type="date">
<label for="dtpenddate" class="fw-bold">End Date:</label>
<input type="date" id="dtpenddate" class="form-control">
</div>
<!-- Status Type Dropdown -->
<div class="col-auto">
<label style="font-weight: 700;">Status Type:</label>
<div>
<select class="form-control input-sm" id="wcbsortby" style="font-size: 1.00rem; height: calc(2.25rem + 2px); padding-top: 0.375rem; padding-bottom: 0.375rem;"></select>
</div>
<label for="wcbsortby" class="fw-bold">Property Type*</label>
<select class="form-select" id="wcbsortby"></select>
</div>
<!-- Button (Align this with the inputs) -->
<div class="col-auto d-flex align-items-end">
<label style="font-weight: 700;"> </label>
<button class="btn btn-primary btn-sm" id="btnapply">Apply</button>
<button id="btnapply" class="btn btn-primary">Apply</button>
</div>
</div>
</div>
<form class="form-inline">
<div class= "row">
<div class="col-sm-3">
<label class="py-2" style="font-weight: 700;">Show <select class="custom-select" id="wcbpagesize" style="font-size: 1.00rem;"></select> entries</label>
</div>
<div class="col-sm-2">
<button class= "ps-3" id="btnaddorder"></button>
<!-- Actions Row -->
<div class="row mt-3 justify-content-center">
<div class="col-auto">
<button id="btnaddorder" class="btn btn-secondary">Add Order</button>
</div>
<div class="col-sm-2">
<button class= "ps-3" id="btnsetstatus"></button>
<div class="col-auto">
<button id="btnsetstatus" class="btn btn-secondary">Set Status</button>
</div>
<div class="col-sm-2">
<button class= "ps-3" id="btngeneratepdf"></button>
<div class="col-auto">
<button id="btngeneratepdf" class="btn btn-secondary">Generate PDF</button>
</div>
<div class="col-sm-2">
<button class= "ps-3" id="btnfilters"></button>
<div class="col-auto">
<button id="btnfilters" class="btn btn-secondary">Filters</button>
</div>
</div>
</form>
</div>
<!-- Entries Label Section -->
<div class="container mt-3">
<div class="row">
<div class="col">
<label id="lblentries"></label>
</div>
<table class="table table-responsive table-striped table-bordered" id="tblPhoneGrid">
<thead class="thead-dark">
</div>
</div>
<!-- Table Section -->
<div id="order_table_section" class="overflow-auto mt-3 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>
<th scope="col">Order ID</th>
<th scope="col">Company Name</th>
<th scope="col">Job Name</th>
<th scope="col">Order Date</th>
<th scope="col">Proof Due</th>
<th scope="col">Proof Date</th>
<th scope="col">Art Due</th>
<th scope="col">Art Done</th>
<th scope="col">Plate Due</th>
<th scope="col">Plate Done</th>
<th scope="col">Mount Due</th>
<th scope="col">Mount Done</th>
<th scope="col">Ship Due</th>
<th scope="col">Ship Done</th>
<th scope="col">Price</th>
<th scope="col">Quickbooks Reference Number</th>
<th scope="col">Colors</th>
<th>Order ID</th>
<th>Company Name</th>
<th>Job Name</th>
<th>Order Date</th>
<th>Proof Due</th>
<th>Proof Date</th>
<th>Art Due</th>
<th>Art Done</th>
<th>Plate Due</th>
<th>Plate Done</th>
<th>Mount Due</th>
<th>Mount Done</th>
<th>Ship Due</th>
<th>Ship Done</th>
<th>Price</th>
<th>QuickBooks Ref Number</th>
<th>Colors</th>
</tr>
</thead>
<tbody>
<!-- Rows will be added dynamically via Delphi code -->
<!-- Rows will be dynamically added -->
</tbody>
</table>
</div>
<!-- Entries Label Section (Below Table) -->
<div class="container mt-3">
<div class="row">
<div class="col">
<label id="lblentries2"></label>
</div>
</div>
</div>
<!-- Pagination Section -->
<div class="container mt-4">
<div class="row justify-content-center">
<nav aria-label="Page navigation">
<ul class="pagination justify-content-center" id="pagination">
<!-- Pagination items will be added dynamically via Delphi code -->
<ul id="pagination" class="pagination">
<!-- Pagination items added dynamically -->
</ul>
</nav>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="confirmation_modal" tabindex="-1" aria-labelledby="confirmation_modal_label" aria-hidden="true">
</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 -->
</div>
<!-- Confirmation Modal -->
<div id="confirmation_modal" class="modal fade" tabindex="-1" aria-labelledby="confirmation_modal_label" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="confirmation_modal_label">Select Customer</h5>
<h5 id="confirmation_modal_label" class="modal-title">Select Customer</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<select class="form-control input-sm" id="wcbcustomer"></select>
<select id="wcbcustomer" class="form-control input-sm"></select>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
......@@ -120,3 +140,4 @@
</div>
</div>
</div>
kgOrdersClient/View.Orders.pas
......@@ -13,14 +13,13 @@ uses
WEBLib.Forms, WEBLib.Dialogs, WEBLib.Menus, WEBLib.ExtCtrls, WEBLib.StdCtrls,
WEBLib.JSON, Auth.Service, XData.Web.Client, WebLib.Storage,
ConnectionModule, App.Types, Vcl.StdCtrls, Vcl.Controls, WEBLib.DBCtrls,
Data.DB, XData.Web.JsonDataset, XData.Web.Dataset, WEBLib.DB;
XData.Web.JsonDataset, WEBLib.DB, Data.DB, XData.Web.Dataset, View.AddOrder;
type
TFViewOrders = class(TWebForm)
XDataWebClient1: TXDataWebClient;
XDataWebDataSet1: TXDataWebDataSet;
lblEntries: TWebLabel;
wcbPageSize: TWebComboBox;
wcbSortBy: TWebComboBox;
btnApply: TWebButton;
edtSearch: TWebEdit;
......@@ -55,7 +54,6 @@ type
WebButton2: TWebButton;
btnConfirm: TWebButton;
wdsCustomers: TWebDataSource;
wcbCustomers: TWebDBLookupComboBox;
xdwdsCustomers: TXDataWebDataSet;
xdwdsCustomersNAME: TStringField;
xdwdsCustomersID: TIntegerField;
......@@ -63,6 +61,7 @@ type
xdwdsSave: TXDataWebDataSet;
wdsSave: TWebDataSource;
xdwdsSaveCURR_ID: TIntegerField;
pnlOrders: TWebPanel;
procedure WebFormCreate(Sender: TObject);
procedure btnApplyClick(Sender: TObject);
procedure btnSearchClick(Sender: TObject);
......@@ -71,7 +70,6 @@ type
procedure btnCloseNotificationClick(Sender: TObject);
procedure WebFormShow(Sender: TObject);
procedure btnConfirmClick(Sender: TObject);
procedure wcbCustomersChange(Sender: TObject);
private
FChildForm: TWebForm;
procedure AddRowToTable(temp: string);
......@@ -106,7 +104,7 @@ var
implementation
uses
XData.Model.Classes, View.Main, View.AddOrder;
XData.Model.Classes, View.Main;
{$R *.dfm}
......@@ -121,7 +119,6 @@ begin
DMConnection.ApiConnection.Connected := True;
PageNumber := 1;
TotalPages := 1; // Initial total pages
wcbPageSize.Text := '10';
wcbSortBy.Text := 'PROOF';
//today := TDateTime.Today;
dtpStartDate.Date := 0;
......@@ -169,25 +166,21 @@ end;
procedure TFViewOrders.ShowOrderListForm();
var
newform: TFAddOrder;
OrdersPanel: TJSHTMLElement;
begin
newform := TFAddOrder.CreateNew;
// Get the panel element for orders
OrdersPanel := TJSHTMLElement(document.getElementById('pnl_orders'));
newform.Caption := 'Select Customer and Order Type';
newForm.Popup := True;
newForm.Border := fbDialog;
console.log(newForm.GetElementHandle);
// Hide the panel before loading the form
if Assigned(OrdersPanel) then
OrdersPanel.style.setProperty('display', 'none');
// used to manage Back button handling to close subform
window.location.hash := 'subform';
// Create the order list form, passing the ElementID
TFAddOrder.CreateForm(pnlOrders.ElementID);
newform.ShowModal(
procedure(AValue: TModalResult)
begin
if newform.edtID.Text <> '' then
orderEntry('', newForm.edtID.Text, 'ADD');
end
);
// Show the panel after the form is created
if Assigned(OrdersPanel) then
OrdersPanel.style.setProperty('display', 'block');
end;
procedure TFViewOrders.AddRowToTable(temp: string);
......@@ -657,7 +650,7 @@ var
searchOptions: string;
begin
PageNumber := 1;
PageSize := StrToInt(wcbPageSize.Text);
PageSize := 50;
OrderBy := wcbSortBy.Text;
searchOptions := '&pagenumber=' + IntToStr(PageNumber) +
'&pagesize=' + IntToStr(PageSize) +
......@@ -749,7 +742,7 @@ var
searchOptions: string;
begin
//PageNumber := 1;
PageSize := StrToInt(wcbPageSize.Text);
PageSize := 50;
OrderBy := wcbSortBy.Text;
searchOptions := '&pagenumber=' + IntToStr(PageNumber) +
'&pagesize=' + IntToStr(PageSize) +
......@@ -780,10 +773,5 @@ begin
end;
end;
procedure TFViewOrders.wcbCustomersChange(Sender: TObject);
begin
console.log(wcbCustomers.Value);
end;
end.
kgOrdersClient/template/css/app.css
......@@ -282,3 +282,4 @@ input[type="text"] {
kgOrdersServer/Source/Main.dfm
......@@ -16,8 +16,8 @@ object FMain: TFMain
597)
TextHeight = 13
object memoInfo: TMemo
Left = 8
Top = 40
Left = 20
Top = 44
Width = 744
Height = 549
Anchors = [akLeft, akTop, akRight, akBottom]
......
kgOrdersServer/kgOrdersServer.ini
[Options]
LogFileNum=22
LogFileNum=28
[Database]
--Server=192.168.159.132
Server=192.168.198.129
--Server=192.168.75.133
--Server=192.168.198.129
Server=192.168.102.130
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