Customer Page is finished

Two other extensions of this page need to be worked on. Add Customer, and Add Customer Address

kgOrdersClient/View.Customers.dfm

+object FViewCustomers: TFViewCustomers
+  Width = 640
+  Height = 480
+  OnCreate = WebFormCreate
+  object lblEntries: TWebLabel
+    Left = 59
+    Top = 117
+    Width = 81
+    Height = 15
+    Caption = 'Showing 0 of ...'
+    ElementID = 'lblentries'
+    ElementFont = efCSS
+    HeightStyle = ssAuto
+    HeightPercent = 100.000000000000000000
+    WidthPercent = 100.000000000000000000
+  end
+  object btnAddCustomer: TWebButton
+    Left = 59
+    Top = 79
+    Width = 96
+    Height = 25
+    Caption = 'Add Customer'
+    ChildOrder = 5
+    ElementID = 'btnaddcustomer'
+    ElementFont = efCSS
+    HeightStyle = ssAuto
+    HeightPercent = 100.000000000000000000
+    TabOrder = 6
+    TabStop = False
+    WidthPercent = 100.000000000000000000
+  end
+  object wdbtcCustomers: TWebDBTableControl
+    Left = 9
+    Top = 138
+    Width = 631
+    Height = 200
+    ElementClassName = 'table'
+    ElementId = 'tblPhoneGrid'
+    BorderColor = clSilver
+    ChildOrder = 11
+    ElementFont = efCSS
+    ElementHeaderClassName = 'thead-light sticky-top bg-light'
+    ElementPosition = epRelative
+    ElementTableClassName = 'table table-striped table-hover table-bordered text-sm'
+    Footer.ButtonActiveElementClassName = 'btn btn-primary'
+    Footer.ButtonElementClassName = 'btn btn-light'
+    Footer.DropDownElementClassName = 'form-control'
+    Footer.InputElementClassName = 'form-control'
+    Footer.LinkActiveElementClassName = 'link-primary'
+    Footer.LinkElementClassName = 'link-secondary'
+    Footer.ListElementClassName = 'pagination'
+    Footer.ListItemElementClassName = 'page-item'
+    Footer.ListLinkElementClassName = 'page-link'
+    Header.ButtonActiveElementClassName = 'btn btn-primary'
+    Header.ButtonElementClassName = 'btn btn-light'
+    Header.DropDownElementClassName = 'form-control'
+    Header.InputElementClassName = 'form-control'
+    Header.LinkActiveElementClassName = 'link-primary'
+    Header.LinkElementClassName = 'link-secondary'
+    Header.ListElementClassName = 'pagination'
+    Header.ListItemElementClassName = 'page-item'
+    Header.ListLinkElementClassName = 'page-link'
+    WordWrap = True
+    Columns = <
+      item
+        DataField = 'START_DATE'
+        Title = 'Start Date'
+      end
+      item
+        DataField = 'NAME'
+        Title = 'Name'
+      end>
+    DataSource = wdsCustomers
+  end
+  object wcbPageSize: TWebComboBox
+    Left = 22
+    Top = 52
+    Width = 145
+    Height = 23
+    ElementClassName = 'custom-select'
+    ElementID = 'wcbpagesize'
+    ElementFont = efCSS
+    HeightStyle = ssAuto
+    HeightPercent = 100.000000000000000000
+    Text = '500'
+    WidthPercent = 100.000000000000000000
+    ItemIndex = -1
+    Items.Strings = (
+      '100'
+      '250'
+      '500'
+      '1000')
+  end
+  object pnlMessage: TWebPanel
+    Left = 12
+    Top = 16
+    Width = 121
+    Height = 33
+    ElementID = 'view.login.message'
+    ChildOrder = 17
+    TabOrder = 3
+    object lblMessage: TWebLabel
+      Left = 16
+      Top = 11
+      Width = 46
+      Height = 15
+      Caption = 'Message'
+      ElementID = 'view.login.message.label'
+      HeightPercent = 100.000000000000000000
+      WidthPercent = 100.000000000000000000
+    end
+    object btnCloseNotification: TWebButton
+      Left = 96
+      Top = 3
+      Width = 22
+      Height = 25
+      ChildOrder = 1
+      ElementID = 'view.login.message.button'
+      HeightPercent = 100.000000000000000000
+      WidthPercent = 100.000000000000000000
+    end
+  end
+  object XDataWebClient1: TXDataWebClient
+    Connection = DMConnection.ApiConnection
+    Left = 28
+    Top = 410
+  end
+  object wdsCustomers: TWebDataSource
+    DataSet = xdwdsCustomers
+    Left = 224
+    Top = 414
+  end
+  object xdwdsCustomers: TXDataWebDataSet
+    Connection = DMConnection.ApiConnection
+    Left = 130
+    Top = 410
+    object xdwdsCustomersNAME: TStringField
+      FieldName = 'NAME'
+    end
+    object xdwdsCustomersSTART_DATE: TStringField
+      FieldName = 'START_DATE'
+    end
+  end
+end

kgOrdersClient/View.Customers.html

+<div class="container h-100 d-flex flex-column mt-0" style="max-width: 100%; padding-bottom: 0;">
+    <!-- Alert Section -->
+    <div class="row">
+        <div class=col-sm>
+            <div id="view.login.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>
+
+    <!-- Actions Row -->
+    <div class="row mt-3 justify-content-center">
+        <div class="col-auto d-flex align-items-center">
+            <label class="mt-3" style="font-weight: 700;font-size: 1.10rem;">Show <select class="custom-select" id="wcbpagesize" style="font-size: 1.00rem;"></select> entries</label>
+        </div>
+        <div class="col-auto">
+            <button id="btnaddcustomer" class="btn btn-secondary mt-3">Add Customer</button>
+        </div>
+    </div>
+
+    <!-- Entries Label Section d-flex justify-content-between w-100 mt-2-->
+    <div class="row">
+        <div class="col-auto">
+            <label id="lblentries" style="font-size: 1.10rem;"></label>
+        </div>
+    </div>
+
+    <!-- Table Section -->
+    <div id="order_table_section" class="overflow-auto mt-2"
+         style="max-height: calc(100vh - 250px); padding-bottom: 0; width: 100%;">
+        <table id="tblPhoneGrid" class="table table-striped table-bordered" style="width: 100%;">
+            <thead class="sticky-top thead-light">
+                <tr style="font-size: 0.875rem;">
+                    <!-- Table headers are dynamically generated -->
+                </tr>
+            </thead>
+            <tbody id="orderTableBody" class="align-middle">
+                <!-- Table rows are dynamically generated -->
+            </tbody>
+        </table>
+    </div>
+
+    <!-- Pagination Section -->
+    <div class="d-flex justify-content-center w-100 mt-4">
+        <nav aria-label="Page navigation">
+            <ul id="pagination" class="pagination">
+                <!-- Pagination items added dynamically -->
+            </ul>
+        </nav>
+    </div>
+</div>
+

kgOrdersClient/View.Main.pas

@@ -74,7 +74,8 @@ uses
   View.Orders,
   View.OrderEntryCorrugated,
   View.OrderEntryCuttingDie,
-  View.OrderEntryWeb;
+  View.OrderEntryWeb,
+  View.Customers;
 
 {$R *.dfm}
 
@@ -101,7 +102,7 @@ end;
 
 procedure TFViewMain.lblCustomersClick(Sender: TObject);
 begin
-  //ShowForm(TFViewCustomers);
+  ShowForm(TFViewCustomers);
   lblAppTitle.Caption := 'Koehler-Gibson Customers';
   setActive('Customers');
 end;

kgOrdersClient/View.Orders.dfm

@@ -89,8 +89,8 @@ object FViewOrders: TFViewOrders
     OnClick = btnPDFClick
   end
   object wdbtcOrders: TWebDBTableControl
-    Left = 26
-    Top = 132
+    Left = 12
+    Top = 138
     Width = 631
     Height = 200
     ElementClassName = 'table'

kgOrdersClient/webKGOrders.dpr

@@ -22,7 +22,8 @@ uses
   View.Search in 'View.Search.pas' {FSearch: TWebForm} {*.html},
   View.SetStatus in 'View.SetStatus.pas' {FSetStatus: TWebForm} {*.html},
   View.OrderEntryCuttingDie in 'View.OrderEntryCuttingDie.pas' {FOrderEntryCuttingDie: TWebForm} {*.html},
-  View.OrderEntryWeb in 'View.OrderEntryWeb.pas' {FOrderEntryWeb: TWebForm} {*.html};
+  View.OrderEntryWeb in 'View.OrderEntryWeb.pas' {FOrderEntryWeb: TWebForm} {*.html},
+  View.Customers in 'View.Customers.pas' {FViewCustomers: TWebForm} {*.html};
 
 {$R *.res}
 

kgOrdersClient/webKGOrders.dproj

@@ -195,6 +195,11 @@
             <FormType>dfm</FormType>
             <DesignClass>TWebForm</DesignClass>
         </DCCReference>
+        <DCCReference Include="View.Customers.pas">
+            <Form>FViewCustomers</Form>
+            <FormType>dfm</FormType>
+            <DesignClass>TWebForm</DesignClass>
+        </DCCReference>
         <None Include="index.html"/>
         <None Include="css\app.css"/>
         <None Include="config\config.json"/>
@@ -228,10 +233,33 @@
             <Deployment Version="5">
                 <DeployFile LocalName="Win32\Debug\webCharms.exe" Configuration="Debug" Class="ProjectOutput"/>
                 <DeployFile LocalName="Win32\Debug\webKGOrders.exe" Configuration="Debug" Class="ProjectOutput"/>
+                <DeployFile LocalName="Win32\Debug\webKGOrders.exe" Configuration="Debug" Class="ProjectOutput">
+                    <Platform Name="Win32">
+                        <RemoteName>webKGOrders.exe</RemoteName>
+                        <Overwrite>true</Overwrite>
+                    </Platform>
+                </DeployFile>
                 <DeployFile LocalName="config\config.json" Configuration="Debug" Class="ProjectFile"/>
+                <DeployFile LocalName="config\config.json" Configuration="Debug" Class="ProjectFile">
+                    <Platform Name="Win32">
+                        <RemoteDir>.\</RemoteDir>
+                        <Overwrite>true</Overwrite>
+                    </Platform>
+                </DeployFile>
                 <DeployFile LocalName="css\app.css" Configuration="Debug" Class="ProjectFile"/>
+                <DeployFile LocalName="css\app.css" Configuration="Debug" Class="ProjectFile">
+                    <Platform Name="Win32">
+                        <RemoteDir>.\</RemoteDir>
+                        <Overwrite>true</Overwrite>
+                    </Platform>
+                </DeployFile>
                 <DeployFile LocalName="index.html" Configuration="Debug" Class="ProjectFile"/>
-                <DeployFile LocalName="index.html" Configuration="Debug" Class="ProjectFile"/>
+                <DeployFile LocalName="index.html" Configuration="Debug" Class="ProjectFile">
+                    <Platform Name="Win32">
+                        <RemoteDir>.\</RemoteDir>
+                        <Overwrite>true</Overwrite>
+                    </Platform>
+                </DeployFile>
                 <DeployFile LocalName="template\bootstrap\bootstrap.min.css" Configuration="Debug" Class="ProjectFile"/>
                 <DeployFile LocalName="template\bootstrap\bootstrap.min.js" Configuration="Debug" Class="ProjectFile"/>
                 <DeployFile LocalName="template\bootstrap\dataTables.bootstrap.css" Configuration="Debug" Class="ProjectFile"/>

kgOrdersServer/Source/Lookup.Service.pas

@@ -114,6 +114,7 @@ type
   Public
     NAME: string;
     ID: integer;
+    START_DATE: string;
     SHORT_NAME: string;
     staff_fields_invoice_to: string;
     ADDRESS_LIST: TList<TAddressItem>;

kgOrdersServer/Source/Lookup.ServiceImpl.pas

@@ -91,7 +91,7 @@ var
   SQL: string;
   customer: TCustomerItem;
 begin
-  SQL := 'select NAME, CUSTOMER_ID, SHORT_NAME, BILL_ADDRESS, BILL_CITY, BILL_STATE, BILL_ZIP from customers';
+  SQL := 'select NAME, CUSTOMER_ID, SHORT_NAME, BILL_ADDRESS, BILL_CITY, BILL_STATE, BILL_ZIP, START_DATE from customers';
   doQuery(ordersDB.UniQuery1, SQL);
 
   result := TCustomerList.Create;
@@ -109,6 +109,7 @@ begin
     customer.staff_fields_invoice_to := ordersDB.UniQuery1.FieldByName('BILL_ADDRESS').AsString +
                         ', ' + ordersDB.UniQuery1.FieldByName('BILL_CITY').AsString +
                         ' ' + ordersDB.UniQuery1.FieldByName('BILL_ZIP').AsString;
+    customer.START_DATE := ordersDB.UniQuery1.FieldByName('START_DATE').AsString;
     result.data.Add(customer);
     result.count := result.count + 1;
     ordersDB.UniQuery1.Next;

kgOrdersServer/kgOrdersServer.ini

 [Settings]
 MemoLogLevel=4
 FileLogLevel=5
-LogFileNum=303
+LogFileNum=304
 webClientVersion=1.0.0
 
 [Database]