inboxlookup_screen 1.0.18 → 1.0.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -305,6 +305,38 @@
|
|
|
305
305
|
background: #125aa3;
|
|
306
306
|
}
|
|
307
307
|
|
|
308
|
+
.lookupscreen-right {
|
|
309
|
+
position: relative;
|
|
310
|
+
height: 100%;
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
.lookupscreen-center-wrapper {
|
|
314
|
+
display: flex;
|
|
315
|
+
align-items: center;
|
|
316
|
+
/* vertical center */
|
|
317
|
+
justify-content: center;
|
|
318
|
+
/* horizontal center */
|
|
319
|
+
height: 100%;
|
|
320
|
+
width: 100%;
|
|
321
|
+
text-align: center;
|
|
322
|
+
}
|
|
323
|
+
|
|
324
|
+
.lookupscreen-empty-state {
|
|
325
|
+
max-width: 420px;
|
|
326
|
+
padding: 24px;
|
|
327
|
+
color: #555;
|
|
328
|
+
}
|
|
329
|
+
|
|
330
|
+
.lookupscreen-empty-state h3 {
|
|
331
|
+
margin-bottom: 8px;
|
|
332
|
+
font-weight: 600;
|
|
333
|
+
}
|
|
334
|
+
|
|
335
|
+
.lookupscreen-empty-state p {
|
|
336
|
+
color: #777;
|
|
337
|
+
line-height: 1.5;
|
|
338
|
+
}
|
|
339
|
+
|
|
308
340
|
/* Responsive */
|
|
309
341
|
@media (max-width: 900px) {
|
|
310
342
|
.lookupscreensearch {
|
|
@@ -536,26 +536,6 @@ const OrdersMasterDetail = ({ dataSource, keyExpr, token, BaseUrl, ProjectId })
|
|
|
536
536
|
};
|
|
537
537
|
|
|
538
538
|
|
|
539
|
-
useEffect(() => {
|
|
540
|
-
const handleVisibilityChange = () => {
|
|
541
|
-
if (document.visibilityState === "hidden") {
|
|
542
|
-
updateSearchHistoryAPI();
|
|
543
|
-
}
|
|
544
|
-
};
|
|
545
|
-
|
|
546
|
-
const handleBeforeUnload = () => {
|
|
547
|
-
updateSearchHistoryAPI();
|
|
548
|
-
};
|
|
549
|
-
|
|
550
|
-
document.addEventListener("visibilitychange", handleVisibilityChange);
|
|
551
|
-
window.addEventListener("beforeunload", handleBeforeUnload);
|
|
552
|
-
|
|
553
|
-
return () => {
|
|
554
|
-
document.removeEventListener("visibilitychange", handleVisibilityChange);
|
|
555
|
-
window.removeEventListener("beforeunload", handleBeforeUnload);
|
|
556
|
-
};
|
|
557
|
-
}, []);
|
|
558
|
-
|
|
559
539
|
const applySearch = () => {
|
|
560
540
|
if (!gridInstance) return;
|
|
561
541
|
|
|
@@ -637,156 +617,176 @@ const OrdersMasterDetail = ({ dataSource, keyExpr, token, BaseUrl, ProjectId })
|
|
|
637
617
|
|
|
638
618
|
{/* RIGHT PANEL (SEARCH + HISTORY) */}
|
|
639
619
|
<div className="lookupscreen-right">
|
|
640
|
-
{
|
|
641
|
-
<div className="
|
|
642
|
-
|
|
643
|
-
<
|
|
644
|
-
|
|
620
|
+
{orders.length === 0 ? (
|
|
621
|
+
<div className="lookupscreen-empty-state">
|
|
622
|
+
<h3>No services available</h3>
|
|
623
|
+
<p>
|
|
624
|
+
There are no services configured for this project.
|
|
625
|
+
<br />
|
|
626
|
+
Please contact the administrator or add a new service.
|
|
627
|
+
</p>
|
|
628
|
+
</div>
|
|
629
|
+
)
|
|
630
|
+
|
|
631
|
+
/* 2️⃣ Services exist, but none selected */
|
|
632
|
+
: !selectedOrder ? (
|
|
633
|
+
<div className="lookupscreen-empty-state">
|
|
634
|
+
<div className="empty-icon">📄</div>
|
|
635
|
+
<h3>No service selected</h3>
|
|
636
|
+
<p>Please select a service from the left panel to view sheet details.</p>
|
|
645
637
|
</div>
|
|
638
|
+
)
|
|
646
639
|
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
<
|
|
652
|
-
|
|
653
|
-
<input
|
|
654
|
-
type="text"
|
|
655
|
-
className="lookupscreen-searchcontrol"
|
|
656
|
-
placeholder="Search here..."
|
|
657
|
-
value={searchText}
|
|
658
|
-
onChange={(e) => {
|
|
659
|
-
setSearchText(e.target.value)
|
|
660
|
-
handleSearchChange(e.target.value)
|
|
661
|
-
}}
|
|
662
|
-
/>
|
|
640
|
+
/* 3️⃣ Service selected */
|
|
641
|
+
: (<div className="lookupscreenexcel-card">
|
|
642
|
+
{/* Header */}
|
|
643
|
+
<div className="lookupscreenexcel-header">
|
|
644
|
+
<h2>Sheet Name: {selectedOrder.sheetName}</h2>
|
|
645
|
+
</div>
|
|
663
646
|
|
|
664
|
-
|
|
647
|
+
<div className="lookupscreensearchbox">
|
|
648
|
+
<div className="lookupscreensearch">
|
|
665
649
|
|
|
650
|
+
{/* SEARCH TEXT */}
|
|
651
|
+
<div className="lookupscreenlevellist first">
|
|
652
|
+
<label>What are you looking for?</label>
|
|
653
|
+
<input
|
|
654
|
+
type="text"
|
|
655
|
+
className="lookupscreen-searchcontrol"
|
|
656
|
+
placeholder="Search here..."
|
|
657
|
+
value={searchText}
|
|
658
|
+
onChange={(e) => {
|
|
659
|
+
setSearchText(e.target.value)
|
|
660
|
+
handleSearchChange(e.target.value)
|
|
661
|
+
}}
|
|
662
|
+
/>
|
|
666
663
|
|
|
664
|
+
</div>
|
|
667
665
|
|
|
668
|
-
{/* SEARCH BUTTON */}
|
|
669
|
-
<div className="lookupscreenlevellist action" onClick={applySearch}>
|
|
670
|
-
<button className="lookupscreenbutton">SEARCH</button>
|
|
671
666
|
|
|
672
|
-
</div>
|
|
673
667
|
|
|
668
|
+
{/* SEARCH BUTTON */}
|
|
669
|
+
<div className="lookupscreenlevellist action" onClick={applySearch}>
|
|
670
|
+
<button className="lookupscreenbutton">SEARCH</button>
|
|
671
|
+
|
|
672
|
+
</div>
|
|
673
|
+
|
|
674
|
+
</div>
|
|
674
675
|
</div>
|
|
675
|
-
</div>
|
|
676
676
|
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
677
|
+
<DataGrid
|
|
678
|
+
ref={gridRef}
|
|
679
|
+
dataSource={gridStore}
|
|
680
|
+
keyExpr={keyExpr}
|
|
681
|
+
onInitialized={(e) => setGridInstance(e.component)}
|
|
682
|
+
remoteOperations={true} // KEEP TRUE for remote paging, etc.
|
|
683
|
+
height="80%"
|
|
684
|
+
width="100%" // ✅ Set width to allow layout
|
|
685
|
+
columnAutoWidth={true} // ✅ Adjust columns automatically
|
|
686
|
+
showBorders={true}
|
|
687
|
+
allowColumnReordering={true}
|
|
688
|
+
onColumnReordered={(e) => {
|
|
689
|
+
|
|
690
|
+
}}
|
|
691
|
+
// onColumnReordered={handleColumnReorder}
|
|
692
|
+
columnHidingEnabled={false}
|
|
693
|
+
onSelectionChanged={onSelectionChanged}
|
|
694
|
+
repaintChangesOnly={true}
|
|
695
|
+
columns={columns}
|
|
696
|
+
onOptionChanged={(e) => {
|
|
697
|
+
if (e.name === "grouping" && e.fullName === "grouping.groupedColumns") {
|
|
698
|
+
setAutoExpandAll(false);
|
|
699
|
+
if (gridInstance) {
|
|
700
|
+
gridInstance.collapseAll(-1); // 👈 collapses all groups
|
|
701
|
+
}
|
|
701
702
|
}
|
|
702
|
-
}
|
|
703
|
-
}}
|
|
704
|
-
onRowClick={(e) => {
|
|
705
|
-
setSelectedRow(e.data); // 🔥 full row object
|
|
706
|
-
setRowDetailsVisible(true); // 🔥 open popup
|
|
707
|
-
}}
|
|
708
|
-
onContentReady={(e) => {
|
|
709
|
-
onContentReady(e.component)
|
|
710
|
-
// setGridInstance(e.component); // ensure grid instance is always updated
|
|
711
|
-
|
|
712
|
-
if (!readOnlyFilters) return;
|
|
713
|
-
const rootElement = e.component.element();
|
|
714
|
-
|
|
715
|
-
// Disable filter row inputs
|
|
716
|
-
const filterRowInputs = rootElement.querySelectorAll(".dx-datagrid-filter-row input");
|
|
717
|
-
filterRowInputs.forEach((input) => {
|
|
718
|
-
input.readOnly = true;
|
|
719
|
-
input.style.backgroundColor = "#f5f5f5";
|
|
720
|
-
|
|
721
|
-
});
|
|
722
|
-
const headerIcons = rootElement.querySelectorAll(".dx-header-filter");
|
|
723
|
-
headerIcons.forEach((icon) => {
|
|
724
|
-
icon.style.pointerEvents = "none";
|
|
725
|
-
icon.style.opacity = "0.5";
|
|
726
|
-
icon.setAttribute("aria-disabled", "true");
|
|
727
|
-
icon.setAttribute("tabindex", "-1");
|
|
728
|
-
|
|
729
|
-
});
|
|
730
|
-
}}
|
|
731
|
-
>
|
|
732
|
-
<Selection
|
|
733
|
-
mode="multiple"
|
|
734
|
-
showCheckBoxesMode={showCheckboxes ? 'always' : 'none'} // toggle here
|
|
735
|
-
selectAllMode="page" // This shows the checkbox in header
|
|
736
|
-
/>
|
|
737
|
-
<GroupPanel visible={true}
|
|
738
|
-
emptyPanelText="Use the context menu of header columns to group data"
|
|
739
|
-
/>
|
|
740
|
-
{/* <SearchPanel visible={true} highlightCaseSensitive={false} /> */}
|
|
741
|
-
|
|
742
|
-
<Grouping autoExpandAll={false} contextMenuEnabled={true} expandMode="rowClick"
|
|
743
|
-
/>
|
|
744
|
-
<FilterRow visible={true} />
|
|
745
|
-
<HeaderFilter visible={true} />
|
|
746
|
-
|
|
747
|
-
<Scrolling mode="virtual" useNative={false} />
|
|
748
|
-
<Summary>
|
|
749
|
-
<TotalItem column="sheetId" summaryType="count" displayFormat="Total: {0}" />
|
|
750
|
-
<GroupItem column="sheetId" summaryType="count" displayFormat="Count: {0}" />
|
|
751
|
-
</Summary>
|
|
752
|
-
|
|
753
|
-
</DataGrid>
|
|
754
|
-
|
|
755
|
-
|
|
756
|
-
{selectedRow && (
|
|
757
|
-
<Popup
|
|
758
|
-
visible={rowDetailsVisible}
|
|
759
|
-
onHiding={() => setRowDetailsVisible(false)}
|
|
760
|
-
showTitle
|
|
761
|
-
title={`Row Details`}
|
|
762
|
-
dragEnabled={false}
|
|
763
|
-
closeOnOutsideClick
|
|
764
|
-
showCloseButton
|
|
765
|
-
width={420}
|
|
766
|
-
height="100%"
|
|
767
|
-
position={{
|
|
768
|
-
my: "right top",
|
|
769
|
-
at: "right top",
|
|
770
|
-
of: window,
|
|
771
703
|
}}
|
|
772
|
-
|
|
704
|
+
onRowClick={(e) => {
|
|
705
|
+
setSelectedRow(e.data); // 🔥 full row object
|
|
706
|
+
setRowDetailsVisible(true); // 🔥 open popup
|
|
707
|
+
}}
|
|
708
|
+
onContentReady={(e) => {
|
|
709
|
+
onContentReady(e.component)
|
|
710
|
+
// setGridInstance(e.component); // ensure grid instance is always updated
|
|
711
|
+
|
|
712
|
+
if (!readOnlyFilters) return;
|
|
713
|
+
const rootElement = e.component.element();
|
|
714
|
+
|
|
715
|
+
// Disable filter row inputs
|
|
716
|
+
const filterRowInputs = rootElement.querySelectorAll(".dx-datagrid-filter-row input");
|
|
717
|
+
filterRowInputs.forEach((input) => {
|
|
718
|
+
input.readOnly = true;
|
|
719
|
+
input.style.backgroundColor = "#f5f5f5";
|
|
720
|
+
|
|
721
|
+
});
|
|
722
|
+
const headerIcons = rootElement.querySelectorAll(".dx-header-filter");
|
|
723
|
+
headerIcons.forEach((icon) => {
|
|
724
|
+
icon.style.pointerEvents = "none";
|
|
725
|
+
icon.style.opacity = "0.5";
|
|
726
|
+
icon.setAttribute("aria-disabled", "true");
|
|
727
|
+
icon.setAttribute("tabindex", "-1");
|
|
728
|
+
|
|
729
|
+
});
|
|
730
|
+
}}
|
|
773
731
|
>
|
|
774
|
-
<
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
|
|
732
|
+
<Selection
|
|
733
|
+
mode="multiple"
|
|
734
|
+
showCheckBoxesMode={showCheckboxes ? 'always' : 'none'} // toggle here
|
|
735
|
+
selectAllMode="page" // This shows the checkbox in header
|
|
736
|
+
/>
|
|
737
|
+
<GroupPanel visible={true}
|
|
738
|
+
emptyPanelText="Use the context menu of header columns to group data"
|
|
739
|
+
/>
|
|
740
|
+
{/* <SearchPanel visible={true} highlightCaseSensitive={false} /> */}
|
|
741
|
+
|
|
742
|
+
<Grouping autoExpandAll={false} contextMenuEnabled={true} expandMode="rowClick"
|
|
743
|
+
/>
|
|
744
|
+
<FilterRow visible={true} />
|
|
745
|
+
<HeaderFilter visible={true} />
|
|
746
|
+
|
|
747
|
+
<Scrolling mode="virtual" useNative={false} />
|
|
748
|
+
<Summary>
|
|
749
|
+
<TotalItem column="sheetId" summaryType="count" displayFormat="Total: {0}" />
|
|
750
|
+
<GroupItem column="sheetId" summaryType="count" displayFormat="Count: {0}" />
|
|
751
|
+
</Summary>
|
|
752
|
+
|
|
753
|
+
</DataGrid>
|
|
754
|
+
|
|
755
|
+
|
|
756
|
+
{selectedRow && (
|
|
757
|
+
<Popup
|
|
758
|
+
visible={rowDetailsVisible}
|
|
759
|
+
onHiding={() => setRowDetailsVisible(false)}
|
|
760
|
+
showTitle
|
|
761
|
+
title={`Row Details`}
|
|
762
|
+
dragEnabled={false}
|
|
763
|
+
closeOnOutsideClick
|
|
764
|
+
showCloseButton
|
|
765
|
+
width={420}
|
|
766
|
+
height="100%"
|
|
767
|
+
position={{
|
|
768
|
+
my: "right top",
|
|
769
|
+
at: "right top",
|
|
770
|
+
of: window,
|
|
771
|
+
}}
|
|
772
|
+
wrapperAttr={{ class: "lookupscreenright-side-popup" }}
|
|
773
|
+
>
|
|
774
|
+
<div className="lookupscreenpopup-content">
|
|
775
|
+
{Object.entries(selectedRow).map(([key, value]) => (
|
|
776
|
+
<div className="form-group" key={key}>
|
|
777
|
+
<label>{formatLabel(key)}</label>
|
|
778
|
+
<input
|
|
779
|
+
type="text"
|
|
780
|
+
value={value ?? ""}
|
|
781
|
+
readOnly
|
|
782
|
+
/>
|
|
783
|
+
</div>
|
|
784
|
+
))}
|
|
785
|
+
</div>
|
|
786
|
+
</Popup>
|
|
787
|
+
)}
|
|
788
|
+
</div>
|
|
787
789
|
)}
|
|
788
|
-
</div>
|
|
789
|
-
)}
|
|
790
790
|
</div>
|
|
791
791
|
</div>
|
|
792
792
|
</div>
|