Skip to content

Commit d47dc6c

Browse files
MUTHUSELVISF3942MUTHUSELVISF3942
authored
932529: Need to change the UI design in super market use case sample
1 parent d9f4c00 commit d47dc6c

File tree

2 files changed

+392
-422
lines changed
  • Inventory Management and Invoice Generating/Inventory Application/src

2 files changed

+392
-422
lines changed

‎Inventory Management and Invoice Generating/Inventory Application/src/App.tsx

Lines changed: 63 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -247,8 +247,8 @@ import { isNullOrUndefined } from '@syncfusion/ej2-base';
247247
}, [refresh]);
248248

249249
//function to handle customer id input element changes - change event.
250-
const handleCustomerIDChange = (event): void => {
251-
const enteredID: number = parseInt(event.value);
250+
const handleCustomerIDChange = (event: ChangeEventArgs): void => {
251+
const enteredID: number = parseInt(event.value as string);
252252
const foundCustomer: any = customerDatabase.find(
253253
(customer) => (customer as any).id === enteredID
254254
);
@@ -336,7 +336,7 @@ import { isNullOrUndefined } from '@syncfusion/ej2-base';
336336
//Function to Calculate total savings of the bill amount
337337
function computeSavings(dataSource: any): number {
338338
let savings = 0;
339-
dataSource.forEach((item) => {
339+
dataSource.forEach((item: any) => {
340340
const MRP = item.MRP;
341341
const Price = item.Price;
342342
const Qty = parseFloat(item.Quantity) || 0;
@@ -364,7 +364,7 @@ import { isNullOrUndefined } from '@syncfusion/ej2-base';
364364
}
365365

366366
//Grid action begin event
367-
const actionBegin = (args): void => {
367+
const actionBegin = (args: any): void => {
368368
if (args.requestType === 'save') {
369369
args.index = (gridInstance.current.pageSettings.currentPage * gridInstance.current.pageSettings.pageSize) - 1;
370370
productSearchGridInstance.current.clearSelection();
@@ -390,16 +390,16 @@ import { isNullOrUndefined } from '@syncfusion/ej2-base';
390390
? true
391391
: false;
392392
function printTable(
393-
gridInstance,
394-
shopName,
395-
billNo,
396-
customerName,
397-
phoneNumber,
398-
address,
399-
formattedDateTime,
400-
totalAmount,
401-
savings,
402-
isDoorDelivery,
393+
gridInstance: any,
394+
shopName: any,
395+
billNo: any,
396+
customerName: any,
397+
phoneNumber: any,
398+
address: any,
399+
formattedDateTime: any,
400+
totalAmount: any,
401+
savings: any,
402+
isDoorDelivery: any,
403403
) {
404404
let data = gridInstance.dataSource;
405405
let columnConfig = gridInstance.columns;
@@ -513,9 +513,9 @@ import { isNullOrUndefined } from '@syncfusion/ej2-base';
513513

514514
// Data rows
515515
printWindow.document.write("<tbody>");
516-
data.forEach((item) => {
516+
data.forEach((item: any) => {
517517
let row = "<tr>";
518-
columnConfig.forEach((column) => {
518+
columnConfig.forEach((column: any) => {
519519
if (
520520
column.headerText !== "" &&
521521
column.headerText !== "Product ID" &&
@@ -662,7 +662,7 @@ import { isNullOrUndefined } from '@syncfusion/ej2-base';
662662
};
663663

664664
//Grid command column delete button - Click event.
665-
const commandClick = (arg): void => {
665+
const commandClick = (args: any): void => {
666666
const rowIndex = parseInt(
667667
args.target.closest("tr").getAttribute("data-rowindex"),
668668
10
@@ -694,7 +694,7 @@ import { isNullOrUndefined } from '@syncfusion/ej2-base';
694694
);
695695
if (product) {
696696
const isProductExists = (gridInstance.current.dataSource as any).some(
697-
(item) => (item as any).ProductID === (product as any).ProductID
697+
(item: any) => (item as any).ProductID === (product as any).ProductID
698698
);
699699
if (isProductExists) {
700700
alert("Product has already been added.");
@@ -750,7 +750,7 @@ import { isNullOrUndefined } from '@syncfusion/ej2-base';
750750

751751
const destroyProductIDFn = () => {
752752
if (autocompleteIns && productIDInput) {
753-
// textBoxIns.destroy();
753+
autocompleteIns.destroy();
754754
productIDInput.removeEventListener("keyup", handleKeyUp); // Remove event listener
755755
}
756756
};
@@ -759,7 +759,7 @@ import { isNullOrUndefined } from '@syncfusion/ej2-base';
759759
return args.value;
760760
};
761761

762-
const writeProductIDFn = (args) => {
762+
const writeProductIDFn = (args: any) => {
763763
autocompleteIns = new AutoComplete({
764764
dataSource: productData.map(product => ({ ProductID: (product as any).ProductID, ProductName: (product as any).ProductName })), // Provide your data source
765765
fields: { value: 'ProductID' },
@@ -818,7 +818,7 @@ import { isNullOrUndefined } from '@syncfusion/ej2-base';
818818
return args.value;
819819
};
820820

821-
const writeProductNameFn = (args) => {
821+
const writeProductNameFn = (args: any) => {
822822
productNameTextBoxIns = new TextBox({
823823
value: args.rowData[args.column.field],
824824
placeholder: "Enter product name",
@@ -888,7 +888,7 @@ import { isNullOrUndefined } from '@syncfusion/ej2-base';
888888
return "";
889889
};
890890

891-
const writeQuantityFn = (args) => {
891+
const writeQuantityFn = (args: any) => {
892892
quantityTextBoxIns = new TextBox({
893893
value: args.rowData[args.column.field],
894894
placeholder: "Enter quantity",
@@ -1018,10 +1018,11 @@ import { isNullOrUndefined } from '@syncfusion/ej2-base';
10181018
() => (
10191019
<GridComponent
10201020
ref={gridInstance}
1021-
emptyRecordTemplate={() => null}
1021+
emptyRecordTemplate={(): any => null}
10221022
gridLines="Both"
1023-
height="435px"
1023+
height="250px"
10241024
width='100%'
1025+
rowHeight={15}
10251026
textWrapSettings={wrapSettings}
10261027
dataSource={[]}
10271028
actionComplete={actionComplete}
@@ -1139,27 +1140,24 @@ import { isNullOrUndefined } from '@syncfusion/ej2-base';
11391140

11401141
return (
11411142
<div>
1142-
<div className="input-container-title">
1143-
ABC Supermarket Point of Sale (POS)
1144-
</div>
1145-
1143+
<div className="input-container-title">ABC SUPERMARKET POINT OF SALE (POS)</div>
11461144
{/* Customer details Header element */}
1147-
<div className="header" style={{marginTop: "30px"}}>
1148-
<div className="input-container billno">
1149-
<label>Bill No:</label>
1145+
<div className="header" style={{marginTop: "15px", height: '20%'}}>
1146+
<table className="header-table" style={{marginLeft: '40px'}}>
1147+
<tr className="input-container billno"><td>
1148+
<label>Bill Number:</label></td><td>
11501149
<TextBoxComponent
11511150
id="billNoInput"
11521151
type="text"
11531152
readOnly
11541153
/>
1155-
</div>
1156-
<div className="input-container custid">
1157-
<label>Customer ID:</label>
1154+
</td></tr>
1155+
<tr className="input-container custid"><td>
1156+
<label>Customer ID:</label></td><td>
11581157
<AutoCompleteComponent
11591158
id="customerID"
1160-
placeholder="Enter id"
1159+
placeholder="Enter customer id"
11611160
dataSource={customerDatabase.map(customer => (customer as any).id)}
1162-
width={150}
11631161
ref={customerIDRef}
11641162
/>
11651163
<ButtonComponent
@@ -1170,51 +1168,52 @@ import { isNullOrUndefined } from '@syncfusion/ej2-base';
11701168
>
11711169
+
11721170
</ButtonComponent>
1173-
</div>
1174-
<div className="input-container custname">
1175-
<label>Customer Name:</label>
1171+
</td></tr></table>
1172+
<table className="header-table">
1173+
<tr className="input-container custname"><td>
1174+
<label>Customer Name:</label></td><td>
11761175
<TextBoxComponent
11771176
type="text"
11781177
id="customerName"
11791178
ref={customerNameRef}
1180-
placeholder="Customer name"
1179+
placeholder="Customer Name"
11811180
readOnly
11821181
/>
1183-
</div>
1184-
<div className="input-container phone">
1185-
<label>Phone No:</label>
1182+
</td></tr>
1183+
<tr className="input-container phone"><td>
1184+
<label>Phone Number:</label></td><td>
11861185
<MaskedTextBoxComponent
11871186
id="phone-input"
11881187
ref={customerPhoneRef}
11891188
mask="(999) 999-9999"
11901189
placeholder="(999) 999-9999"
11911190
readOnly
11921191
/>
1193-
</div>
1194-
<div className="input-container custaddress">
1195-
<label>Address:</label>
1192+
</td></tr></table>
1193+
<table className="header-table">
1194+
<tr className="input-container custaddress"><td>
1195+
<label>Customer Address:</label></td><td>
11961196
<TextAreaComponent
11971197
id="customerAddress"
11981198
value={""}
11991199
ref={customerAddressRef}
1200-
placeholder="Customer address"
1200+
placeholder="Customer Address"
12011201
readOnly
12021202
/>
1203-
</div>
1204-
<div className="input-container datepicker">
1205-
<label>Date:</label>
1203+
</td></tr>
1204+
<tr className="input-container datepicker"><td>
1205+
<label>Date:</label></td><td>
12061206
<DateTimePickerComponent
12071207
id="date-picker"
12081208
ref={datePicker}
12091209
value={currentDateTime}
1210-
width={300}
12111210
format="MM/dd/yyyy hh:mm:ss a"
12121211
readOnly
12131212
/>
1214-
</div>
1213+
</td></tr></table>
12151214
</div>
12161215
{/* Main Content of the Body - Primary Grid and Vertical Amount details Card components */}
1217-
<div className="primary-container" style={{marginTop: "30px"}}>
1216+
<div className="primary-container" style={{marginTop: "15px", height: '50%'}}>
12181217
{MemorizedGridComponent}
12191218

12201219
{/* Product search by its name - Dialog popup */}
@@ -1269,7 +1268,7 @@ import { isNullOrUndefined } from '@syncfusion/ej2-base';
12691268
<div className="control-section card-control-section vertical_card_layout">
12701269
<div className="e-card-resize-container">
12711270
<div className="row">
1272-
<div className="row card-layout" style={{height: '485px'}}>
1271+
<div className="row card-layout" style={{height: '330px'}}>
12731272
<div className="col-xs-6 col-sm-6 col-sm-4 ">
12741273
<div className="e-card" id="poscards">
12751274
<div className="e-card-header">
@@ -1324,7 +1323,7 @@ import { isNullOrUndefined } from '@syncfusion/ej2-base';
13241323
</div>
13251324

13261325
{/* Horizontal Card components - Delivery type, Payment type Buttons*/}
1327-
<div className="control-pane payment" style={{marginTop: "37px"}}>
1326+
<div className="control-pane payment" style={{marginTop: "15px", height: '20%'}}>
13281327
<div className="control-section card-control-section vertical_card_layout">
13291328
<div className="e-card-resize-container">
13301329
<div className="row">
@@ -1333,15 +1332,15 @@ import { isNullOrUndefined } from '@syncfusion/ej2-base';
13331332
<div className="col-xs-3 col-sm-3 ">
13341333
<div className="e-card" id="poscards">
13351334
<div className="e-card-actions">
1336-
<div className="e-card-btn-txt" id="deliverOptionDiv">
1335+
<div className="e-card-btn-txt" id="deliverOptionDiv" style={{ background: 'linear-gradient(to right, rgb(251, 146, 60), rgb(224 212 55) 50%, rgb(251, 146, 60))'}}>
13371336
<ButtonComponent
13381337
ref={buttonRef}
13391338
onClick={onClickToggle}
13401339
isToggle={true}
13411340
title="Toggle Delivery type"
13421341
>
1343-
<span>Delivery type:</span> &nbsp;
1344-
<span ref={deliverytypeRef} style={{ color: deliveryType === "Take Away" ? "rgb(50,234, 50)" : "red" }}>
1342+
<span>Delivery Type:</span> &nbsp;
1343+
<span ref={deliverytypeRef} style={{ color: deliveryType === "Take Away" ? "rgb(8 168 67)" : "red" }}>
13451344
{deliveryType}
13461345
</span>
13471346
</ButtonComponent>
@@ -1353,7 +1352,7 @@ import { isNullOrUndefined } from '@syncfusion/ej2-base';
13531352
<div className="col-xs-3 col-sm-3 ">
13541353
<div className="e-card" id="poscards">
13551354
<div className="e-card-actions">
1356-
<div className="e-card-btn-txt" id="cardPayButtonDiv">
1355+
<div className="e-card-btn-txt" id="cardPayButtonDiv" style={{ background: 'linear-gradient(to right, rgb(16, 18, 240), rgb(141 149 232) 50%, rgb(16, 18, 240))'}}>
13571356
<ButtonComponent
13581357
id="cardPayButton"
13591358
title="Click to enter card payment"
@@ -1374,7 +1373,7 @@ import { isNullOrUndefined } from '@syncfusion/ej2-base';
13741373
<div className="col-xs-3 col-sm-3 ">
13751374
<div className="e-card" id="poscards">
13761375
<div className="e-card-actions">
1377-
<div className="e-card-btn-txt" id="UPIPayButtondiv">
1376+
<div className="e-card-btn-txt" id="UPIPayButtondiv" style={{ background: 'linear-gradient(to right, #15803d, #55e189 50%, #15803d)'}}>
13781377
<ButtonComponent
13791378
id="UPIPayButton"
13801379
title="Click to enter UPI payment"
@@ -1395,7 +1394,7 @@ import { isNullOrUndefined } from '@syncfusion/ej2-base';
13951394
<div className="col-xs-3 col-sm-3 ">
13961395
<div className="e-card" id="poscards">
13971396
<div className="e-card-actions">
1398-
<div className="e-card-btn-txt" id="totalNetAmount">
1397+
<div className="e-card-btn-txt" id="totalNetAmount" style={{ background: 'linear-gradient(to right, rgb(251 60 60), rgb(239 179 87) 50%, rgb(251 60 60))'}}>
13991398
<ButtonComponent
14001399
id="cashPayButton"
14011400
title="Click to enter cash payment"
@@ -1441,15 +1440,15 @@ import { isNullOrUndefined } from '@syncfusion/ej2-base';
14411440
>
14421441
<form>
14431442
<div className="input-container" style={{ marginBottom: "5px" }}>
1444-
<label htmlFor="customerName" style={{ marginBottom: "10px", fontWeight: "bold" }}>Customer Name:</label>
1443+
<label htmlFor="customerName">Customer Name</label>
14451444
<TextBoxComponent
14461445
id="customerName"
14471446
ref={newCustomerNameRef}
14481447
placeholder="Enter customer name"
14491448
/>
14501449
</div>
14511450
<div className="input-container" style={{ marginBottom: "5px" }}>
1452-
<label htmlFor="phone-input" style={{ marginBottom: "10px", fontWeight: "bold" }}>Phone No:</label>
1451+
<label htmlFor="phone-input">Phone No</label>
14531452
<MaskedTextBoxComponent
14541453
id="phone-input"
14551454
ref={newCustomerPhoneRef}
@@ -1458,7 +1457,7 @@ import { isNullOrUndefined } from '@syncfusion/ej2-base';
14581457
/>
14591458
</div>
14601459
<div className="input-container" style={{ marginBottom: "5px" }}>
1461-
<label htmlFor="customerAddress" style={{ marginBottom: "10px", fontWeight: "bold" }}>Address:</label>
1460+
<label htmlFor="customerAddress">Address</label>
14621461
<TextAreaComponent
14631462
id="customerAddress"
14641463
width='100%'

0 commit comments

Comments
 (0)