Skip to content

K
kgOrders
Commit 56284871 by Mac Stephens
Options

Added login version label, removed green validation, button color updates, and… 

Added login version label, removed green validation, button color updates, and added notification modal helper
parent dc71971e
Showing with 175 additions and 74 deletions
kgOrdersClient/ConnectionModule.pas
...@@ -19,7 +19,7 @@ type ...@@ -19,7 +19,7 @@ type
FUnauthorizedAccessProc: TUnauthorizedAccessProc; FUnauthorizedAccessProc: TUnauthorizedAccessProc;
public public
const clientVersion = '1.0.0'; const clientVersion = '0.9.11';
procedure InitApp(SuccessProc: TSuccessProc; procedure InitApp(SuccessProc: TSuccessProc;
UnauthorizedAccessProc: TUnauthorizedAccessProc); UnauthorizedAccessProc: TUnauthorizedAccessProc);
procedure SetClientConfig(Callback: TVersionCheckCallback); procedure SetClientConfig(Callback: TVersionCheckCallback);
......
kgOrdersClient/Utils.pas
...@@ -15,6 +15,7 @@ function FormatPhoneNumber(PhoneNumber: string): string; ...@@ -15,6 +15,7 @@ function FormatPhoneNumber(PhoneNumber: string): string;
procedure ApplyReportTitle(CurrentReportType: string); procedure ApplyReportTitle(CurrentReportType: string);
procedure ShowToast(const MessageText: string; const ToastType: string = 'success'); procedure ShowToast(const MessageText: string; const ToastType: string = 'success');
procedure ShowConfirmationModal(msg, leftLabel, rightLabel: string; ConfirmProc: TProc<Boolean>); procedure ShowConfirmationModal(msg, leftLabel, rightLabel: string; ConfirmProc: TProc<Boolean>);
procedure ShowNotificationModal(msg: string);
// function FormatDollarValue(ValueStr: string): string; // function FormatDollarValue(ValueStr: string): string;
...@@ -121,6 +122,37 @@ begin ...@@ -121,6 +122,37 @@ begin
end; end;
procedure ShowNotificationModal(msg: string);
begin
asm
var modal = document.getElementById('main_notification_modal');
var label = document.getElementById('main_notification_modal_body');
var closeBtn = document.getElementById('btn_modal_close');
if (label) label.innerText = msg;
// Ensure modal is a direct child of <body>
if (modal && modal.parentNode !== document.body) {
document.body.appendChild(modal);
}
// Button simply closes the modal
if (closeBtn) {
closeBtn.onclick = function () {
var existing = bootstrap.Modal.getInstance(modal);
if (existing) {
existing.hide();
}
};
}
// Show the Bootstrap modal
var bsModal = new bootstrap.Modal(modal, { keyboard: false });
bsModal.show();
end;
end;
// ShowConfirmationModal displays a two-button modal with custom labels. // ShowConfirmationModal displays a two-button modal with custom labels.
// Params: // Params:
// - messageText: text shown in the modal body // - messageText: text shown in the modal body
...@@ -255,7 +287,7 @@ begin ...@@ -255,7 +287,7 @@ begin
toastBody.innerText = ParsedText; toastBody.innerText = ParsedText;
toastEl.classList.remove('bg-success', 'bg-danger', 'bg-warning', 'bg-info'); toastEl.classList.remove('bg-success', 'bg-danger', 'bg-warning', 'bg-primary');
toastEl.classList.remove('slide-in'); toastEl.classList.remove('slide-in');
switch (ToastKind) { switch (ToastKind) {
...@@ -266,7 +298,7 @@ begin ...@@ -266,7 +298,7 @@ begin
toastEl.classList.add('bg-warning'); toastEl.classList.add('bg-warning');
break; break;
case 'info': case 'info':
toastEl.classList.add('bg-info'); toastEl.classList.add('bg-primary');
break; break;
default: default:
toastEl.classList.add('bg-success'); toastEl.classList.add('bg-success');
......
kgOrdersClient/View.Customers.pas
...@@ -184,7 +184,7 @@ begin ...@@ -184,7 +184,7 @@ begin
if AuthService.TokenPayload.Properties['qb_enabled'] then if AuthService.TokenPayload.Properties['qb_enabled'] then
ShowSelectCustomerForm() ShowSelectCustomerForm()
else else
ShowToast('QB interface not currently active', 'info'); ShowNotificationModal('Quickbooks interface not currently active');
end; end;
procedure TFViewCustomers.edtFilterChange(Sender: TObject); procedure TFViewCustomers.edtFilterChange(Sender: TObject);
......
kgOrdersClient/View.EditUser.dfm
...@@ -115,7 +115,6 @@ object FViewEditUser: TFViewEditUser ...@@ -115,7 +115,6 @@ object FViewEditUser: TFViewEditUser
Height = 25 Height = 25
Caption = 'Save' Caption = 'Save'
ChildOrder = 9 ChildOrder = 9
ElementClassName = 'btn btn-light'
ElementID = 'btnconfirm' ElementID = 'btnconfirm'
Font.Charset = DEFAULT_CHARSET Font.Charset = DEFAULT_CHARSET
Font.Color = clWindowText Font.Color = clWindowText
...@@ -154,7 +153,6 @@ object FViewEditUser: TFViewEditUser ...@@ -154,7 +153,6 @@ object FViewEditUser: TFViewEditUser
Height = 25 Height = 25
Caption = 'Cancel' Caption = 'Cancel'
ChildOrder = 9 ChildOrder = 9
ElementClassName = 'btn btn-light'
ElementID = 'btncancel' ElementID = 'btncancel'
Font.Charset = DEFAULT_CHARSET Font.Charset = DEFAULT_CHARSET
Font.Color = clWindowText Font.Color = clWindowText
......
kgOrdersClient/View.EditUser.html
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<!-- Edit-User form --> <!-- Edit-User form -->
<div class="row"> <div class="row">
<div class="col-lg-10 col-xl-8 mx-auto"> <div class="col-lg-10 col-xl-8 mx-auto">
<form id="edituserform" class="row g-3 needs-validation" novalidate> <form id="edituserform" class="row g-3" novalidate>
<div class="col-md-6"> <div class="col-md-6">
<label id="lblusername" for="edtusername" class="form-label">Username</label> <label id="lblusername" for="edtusername" class="form-label">Username</label>
...@@ -52,11 +52,11 @@ ...@@ -52,11 +52,11 @@
</select> </select>
</div> </div>
<div class="d-flex gap-2 mt-4"> <div class="gap-2 mt-4">
<button id="btnconfirm" type="button" class="btn btn-primary flex-grow-1"> <button id="btnconfirm" type="button" class="btn btn-primary">
Confirm Confirm
</button> </button>
<button id="btncancel" type="button" class="btn btn-outline-secondary flex-grow-1"> <button id="btncancel" type="button" class="btn btn-danger">
Cancel Cancel
</button> </button>
</div> </div>
......
kgOrdersClient/View.EditUser.pas
...@@ -191,23 +191,51 @@ end; ...@@ -191,23 +191,51 @@ end;
procedure TFViewEditUser.btnConfirmClick(Sender: TObject); procedure TFViewEditUser.btnConfirmClick(Sender: TObject);
var var
FormEl: TJSHTMLFormElement; FormEl: TJSHTMLFormElement;
AllValid: Boolean;
begin begin
FormEl := TJSHTMLFormElement(document.getElementById('edituserform')); FormEl := TJSHTMLFormElement(document.getElementById('userprofileform'));
if not FormEl.checkValidity then // Clear previous invalid state
edtUsername.ElementHandle.classList.remove('is-invalid');
edtFullName.ElementHandle.classList.remove('is-invalid');
edtEmail.ElementHandle.classList.remove('is-invalid');
if Assigned(FormEl) then
FormEl.classList.remove('was-validated');
AllValid := True;
if edtUsername.Text.Trim = '' then
begin begin
FormEl.classList.add('was-validated'); edtUsername.ElementHandle.classList.add('is-invalid');
Exit; AllValid := False;
end; end;
Utils.ShowSpinner('spinner'); if edtFullName.Text.Trim = '' then
begin
edtFullName.ElementHandle.classList.add('is-invalid');
AllValid := False;
end;
if Mode = 'Edit' then if not TJSHTMLInputElement(edtEmail.ElementHandle).checkValidity then
EditUser begin
else edtEmail.ElementHandle.classList.add('is-invalid');
AddUser; AllValid := False;
end;
WebTimer1.Enabled := True; if not AllValid then
Exit;
ShowConfirmationModal(
'Are you sure you want to save changes to your profile?',
'Save',
'Cancel',
procedure(confirmed: Boolean)
begin
if confirmed then
EditUser;
end
);
end; end;
end. end.
kgOrdersClient/View.Items.pas
...@@ -477,7 +477,7 @@ begin ...@@ -477,7 +477,7 @@ begin
); );
end end
else else
ShowToast('QB interface not currently active', 'info'); ShowNotificationModal('Quickbooks interface not currently active.');
end; end;
procedure TFViewItems.btnCancelClick(Sender: TObject); procedure TFViewItems.btnCancelClick(Sender: TObject);
...@@ -503,7 +503,7 @@ end; ...@@ -503,7 +503,7 @@ end;
procedure TFViewItems.btnDeleteClick(Sender: TObject); procedure TFViewItems.btnDeleteClick(Sender: TObject);
begin begin
ShowToast('Deleting items is not yet implemented.', 'info'); ShowNotificationModal('Deleting items is not yet implemented.');
end; end;
procedure TFViewItems.btnEditClick(Sender: TObject); procedure TFViewItems.btnEditClick(Sender: TObject);
......
kgOrdersClient/View.Login.dfm
object FViewLogin: TFViewLogin object FViewLogin: TFViewLogin
Width = 1322 Width = 1322
Height = 764 Height = 764
CSSLibrary = cssBootstrap
ElementFont = efCSS
Font.Charset = DEFAULT_CHARSET Font.Charset = DEFAULT_CHARSET
Font.Color = clWindowText Font.Color = clWindowText
Font.Height = -11 Font.Height = -11
Font.Name = 'Tahoma' Font.Name = 'Tahoma'
Font.Style = [] Font.Style = []
ParentFont = False ParentFont = False
OnShow = WebFormShow
object WebLabel1: TWebLabel object WebLabel1: TWebLabel
Left = 240 Left = 240
Top = 112 Top = 112
...@@ -46524,6 +46527,19 @@ object FViewLogin: TFViewLogin ...@@ -46524,6 +46527,19 @@ object FViewLogin: TFViewLogin
15BCA2C7441041288CDA38EF006C6D7669C7FF01B763F67F594E0DF800000000 15BCA2C7441041288CDA38EF006C6D7669C7FF01B763F67F594E0DF800000000
49454E44AE426082} 49454E44AE426082}
end end
object lblClientVersion: TWebLabel
Left = 272
Top = 229
Width = 72
Height = 13
Caption = 'lblClientVersion'
ElementID = 'lbl_client_version'
ElementFont = efCSS
ElementPosition = epRelative
HeightStyle = ssAuto
HeightPercent = 100.000000000000000000
WidthPercent = 100.000000000000000000
end
object edtUsername: TWebEdit object edtUsername: TWebEdit
Left = 240 Left = 240
Top = 136 Top = 136
kgOrdersClient/View.Login.html
<nav class="navbar navbar-light bg-light login-navbar"> <nav class="navbar navbar-light bg-light login-navbar">
<div class="container-fluid"> <div class="container-fluid">
<a class="navbar-brand" href="#">Koehler-Gibson Orders</a> <a class="navbar-brand" href="#">Koehler-Gibson Orders</a>
</div>
</nav>
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-auto">
<img id="kgpicture" style="width: 250px; height: 250px;">
</div> </div>
</nav> <div class="col-md-6 col-lg-4">
<div class="container mt-5"> <div class="card login-card">
<div class="row justify-content-center"> <div class="card-header">
<div class="col-auto"> <h3 id="view.login.title" class="fs-6 card-title">Please Sign In</h3>
<img id="kgpicture"style="width: 250px; height: 250px;"> </div>
</div> <div class="card-body">
<div class="col-md-6 col-lg-4"> <div role="form">
<div class="card login-card"> <div id="view.login.message" class="alert alert-danger">
<div class="card-header"> <button id="view.login.message.button" type="button" class="btn-close" aria-label="Close"></button>
<h3 id="view.login.title" class="fs-6 card-title">Please Sign In</h3> <span id="view.login.message.label"></span>
</div>
<div class="card-body">
<div role="form">
<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>
<fieldset>
<div class="mb-3">
<input id="view.login.edtusername" class="form-control" type="text" autofocus placeholder="Username">
</div>
<div class="mb-3">
<input id="view.login.edtpassword" class="form-control" type="password" placeholder="Password">
</div>
<div class="mb-3">
<button id="view.login.btnlogin" class="btn btn-primary w-100">Login</button>
</div>
</fieldset>
</div> </div>
<fieldset>
<div class="mb-3">
<input id="view.login.edtusername" class="form-control" type="text" autofocus placeholder="Username">
</div>
<div class="mb-3">
<input id="view.login.edtpassword" class="form-control" type="password" placeholder="Password">
</div>
<div class="mb-3">
<button id="view.login.btnlogin" class="btn btn-primary w-100">Login</button>
</div>
<div class="text-end text-muted small mt-1">
<span id="lbl_client_version"></span>
</div>
</fieldset>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
kgOrdersClient/View.Login.pas
...@@ -19,9 +19,10 @@ type ...@@ -19,9 +19,10 @@ type
btnCloseNotification: TWebButton; btnCloseNotification: TWebButton;
XDataWebClient: TXDataWebClient; XDataWebClient: TXDataWebClient;
WebImageControl1: TWebImageControl; WebImageControl1: TWebImageControl;
lblClientVersion: TWebLabel;
procedure btnLoginClick(Sender: TObject); procedure btnLoginClick(Sender: TObject);
procedure btnCloseNotificationClick(Sender: TObject); procedure btnCloseNotificationClick(Sender: TObject);
procedure WebFormCreate(Sender: TObject); procedure WebFormShow(Sender: TObject);
private private
FLoginProc: TSuccessProc; FLoginProc: TSuccessProc;
FMessage: string; FMessage: string;
...@@ -98,18 +99,20 @@ begin ...@@ -98,18 +99,20 @@ begin
end; end;
end; end;
procedure TFViewLogin.WebFormCreate(Sender: TObject); procedure TFViewLogin.btnCloseNotificationClick(Sender: TObject);
begin
HideNotification;
end;
procedure TFViewLogin.WebFormShow(Sender: TObject);
begin begin
console.log(DMConnection.clientVersion);
FViewLogin.lblClientVersion.Caption := 'v' + DMConnection.clientVersion;
if FMessage <> '' then if FMessage <> '' then
ShowNotification(FMessage) ShowNotification(FMessage)
else else
HideNotification; HideNotification;
end; end;
procedure TFViewLogin.btnCloseNotificationClick(Sender: TObject);
begin
HideNotification;
end;
end. end.
kgOrdersClient/View.Main.html
...@@ -116,6 +116,23 @@ ...@@ -116,6 +116,23 @@
</div> </div>
</div> </div>
<div class="modal fade" id="main_notification_modal" tabindex="-1" aria-labelledby="main_lblmodal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content shadow-lg">
<div class="modal-header">
<h5 class="modal-title" id="main_notification_modal">Error</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body fs-6 fw-bold" id="main_notification_modal_body">
Please contact EMSystems to solve the issue.
</div>
<div class="modal-footer justify-content-center">
<button type="button" id="btn_modal_close" class="btn btn-primary">Close</button>
</div>
</div>
</div>
</div>
......
kgOrdersClient/View.Main.pas
...@@ -98,6 +98,7 @@ begin ...@@ -98,6 +98,7 @@ begin
if (not (JS.toString(AuthService.TokenPayload.Properties['user_access_type']) = 'ADMIN')) then if (not (JS.toString(AuthService.TokenPayload.Properties['user_access_type']) = 'ADMIN')) then
begin begin
lblUsers.enabled := false; lblUsers.enabled := false;
lblCustomers.Enabled := false; lblCustomers.Enabled := false;
end; end;
...@@ -333,5 +334,4 @@ begin ...@@ -333,5 +334,4 @@ begin
FChildForm := TFViewUsers.CreateForm(WebPanel1.ElementID, Info); FChildForm := TFViewUsers.CreateForm(WebPanel1.ElementID, Info);
end; end;
end. end.
kgOrdersClient/View.UserProfile.dfm
object FViewUserProfile: TFViewUserProfile object FViewUserProfile: TFViewUserProfile
Width = 604 Width = 604
Height = 434 Height = 434
CSSLibrary = cssBootstrap
ElementFont = efCSS
Font.Charset = DEFAULT_CHARSET Font.Charset = DEFAULT_CHARSET
Font.Color = clWindowText Font.Color = clWindowText
Font.Height = -11 Font.Height = -11
...@@ -206,7 +208,7 @@ object FViewUserProfile: TFViewUserProfile ...@@ -206,7 +208,7 @@ object FViewUserProfile: TFViewUserProfile
end end
object btnConfirm: TWebButton object btnConfirm: TWebButton
Left = 85 Left = 85
Top = 210 Top = 207
Width = 96 Width = 96
Height = 25 Height = 25
Caption = 'Confirm Changes' Caption = 'Confirm Changes'
......
kgOrdersClient/View.UserProfile.html
...@@ -61,7 +61,7 @@ ...@@ -61,7 +61,7 @@
Confirm&nbsp;Changes Confirm&nbsp;Changes
</button> </button>
<button id="view.userprofile.form.btncancel" <button id="view.userprofile.form.btncancel"
class="btn btn-outline-secondary flex-grow-1" class="btn btn-danger flex-grow-1"
type="button"> type="button">
Cancel&nbsp;Changes Cancel&nbsp;Changes
</button> </button>
......
kgOrdersClient/View.UserProfile.pas
...@@ -51,11 +51,6 @@ var ...@@ -51,11 +51,6 @@ var
FormEl: TJSHTMLFormElement; FormEl: TJSHTMLFormElement;
begin begin
FormEl := TJSHTMLFormElement(document.querySelector('form')); FormEl := TJSHTMLFormElement(document.querySelector('form'));
if not FormEl.checkValidity then
begin
FormEl.classList.add('was-validated');
Exit;
end;
ShowConfirmationModal( ShowConfirmationModal(
'Are you sure you want to save changes to your profile?', 'Are you sure you want to save changes to your profile?',
......
kgOrdersClient/View.Users.dfm
object FViewUsers: TFViewUsers object FViewUsers: TFViewUsers
Width = 640 Width = 640
Height = 480 Height = 480
CSSLibrary = cssBootstrap
ElementFont = efCSS
OnShow = WebFormCreate OnShow = WebFormCreate
object lblEntries: TWebLabel object lblEntries: TWebLabel
Left = 8 Left = 8
...@@ -21,7 +23,6 @@ object FViewUsers: TFViewUsers ...@@ -21,7 +23,6 @@ object FViewUsers: TFViewUsers
Height = 25 Height = 25
Caption = 'Add User' Caption = 'Add User'
ChildOrder = 9 ChildOrder = 9
ElementClassName = 'btn btn-light'
ElementID = 'btnadduser' ElementID = 'btnadduser'
Font.Charset = DEFAULT_CHARSET Font.Charset = DEFAULT_CHARSET
Font.Color = clWindowText Font.Color = clWindowText
...@@ -30,6 +31,7 @@ object FViewUsers: TFViewUsers ...@@ -30,6 +31,7 @@ object FViewUsers: TFViewUsers
Font.Style = [] Font.Style = []
HeightPercent = 100.000000000000000000 HeightPercent = 100.000000000000000000
ParentFont = False ParentFont = False
TabStop = False
WidthPercent = 100.000000000000000000 WidthPercent = 100.000000000000000000
OnClick = btnAddUserClick OnClick = btnAddUserClick
end end
......
kgOrdersClient/css/app.css
...@@ -402,3 +402,5 @@ is-invalid .form-check-input { ...@@ -402,3 +402,5 @@ is-invalid .form-check-input {
kgOrdersServer/Source/Main.dfm
...@@ -78,7 +78,7 @@ object FMain: TFMain ...@@ -78,7 +78,7 @@ object FMain: TFMain
end end
object initTimer: TTimer object initTimer: TTimer
OnTimer = initTimerTimer OnTimer = initTimerTimer
Left = 58 Left = 60
Top = 398 Top = 398
end end
object ExeInfo1: TExeInfo object ExeInfo1: TExeInfo
......
kgOrdersServer/bin/kgOrdersServer.ini
[Settings] [Settings]
MemoLogLevel=4 MemoLogLevel=4
FileLogLevel=4 FileLogLevel=4
webClientVersion=1.0.0 webClientVersion=0.9.11
LogFileNum=158 LogFileNum=160
[Database] [Database]
--Server=192.168.116.138 --Server=192.168.116.138
--Server=192.168.102.130 Server=192.168.102.129
--Server=192.168.75.133 --Server=192.168.75.133
Server=192.168.159.10 --Server=192.168.159.10
Database=kg_order_entry Database=kg_order_entry
Username=root Username=root
Password=emsys01 Password=emsys01
......
kgOrdersServer/kgOrdersServer.dproj
...@@ -114,7 +114,10 @@ ...@@ -114,7 +114,10 @@
<VerInfo_Locale>1033</VerInfo_Locale> <VerInfo_Locale>1033</VerInfo_Locale>
<DCC_ExeOutput>.\bin</DCC_ExeOutput> <DCC_ExeOutput>.\bin</DCC_ExeOutput>
<DCC_UnitSearchPath>C:\RADTOOLS\FastMM4;$(DCC_UnitSearchPath)</DCC_UnitSearchPath> <DCC_UnitSearchPath>C:\RADTOOLS\FastMM4;$(DCC_UnitSearchPath)</DCC_UnitSearchPath>
<VerInfo_Keys>CompanyName=EM Systems;FileDescription=$(MSBuildProjectName);FileVersion=1.0.0.0;InternalName=;LegalCopyright=;LegalTrademarks=;OriginalFilename=;ProgramID=com.embarcadero.$(MSBuildProjectName);ProductName=$(MSBuildProjectName);ProductVersion=1.0.0.0;Comments=</VerInfo_Keys> <VerInfo_Keys>CompanyName=EM Systems;FileDescription=$(MSBuildProjectName);FileVersion=0.9.11.0;InternalName=;LegalCopyright=;LegalTrademarks=;OriginalFilename=;ProgramID=com.embarcadero.$(MSBuildProjectName);ProductName=$(MSBuildProjectName);ProductVersion=0.9.11;Comments=</VerInfo_Keys>
<VerInfo_MajorVer>0</VerInfo_MajorVer>
<VerInfo_MinorVer>9</VerInfo_MinorVer>
<VerInfo_Release>11</VerInfo_Release>
</PropertyGroup> </PropertyGroup>
<PropertyGroup Condition="'$(Cfg_1_Win64)'!=''"> <PropertyGroup Condition="'$(Cfg_1_Win64)'!=''">
<AppDPIAwarenessMode>PerMonitorV2</AppDPIAwarenessMode> <AppDPIAwarenessMode>PerMonitorV2</AppDPIAwarenessMode>
......
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