inboxlookup_screen 1.0.18 → 1.0.19
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/dist/index.js +1 -1
- package/package.json +1 -1
- package/src/components/Service/OrdersMasterDetail.js +157 -156
package/package.json
CHANGED
|
@@ -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,177 @@ 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
|
+
<div className="empty-icon">🚫</div>
|
|
623
|
+
<h3>No services available</h3>
|
|
624
|
+
<p>
|
|
625
|
+
There are no services configured for this project.
|
|
626
|
+
<br />
|
|
627
|
+
Please contact the administrator or add a new service.
|
|
628
|
+
</p>
|
|
629
|
+
</div>
|
|
630
|
+
)
|
|
631
|
+
|
|
632
|
+
/* 2️⃣ Services exist, but none selected */
|
|
633
|
+
: !selectedOrder ? (
|
|
634
|
+
<div className="lookupscreen-empty-state">
|
|
635
|
+
<div className="empty-icon">📄</div>
|
|
636
|
+
<h3>No service selected</h3>
|
|
637
|
+
<p>Please select a service from the left panel to view sheet details.</p>
|
|
645
638
|
</div>
|
|
639
|
+
)
|
|
646
640
|
|
|
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
|
-
/>
|
|
641
|
+
/* 3️⃣ Service selected */
|
|
642
|
+
: (<div className="lookupscreenexcel-card">
|
|
643
|
+
{/* Header */}
|
|
644
|
+
<div className="lookupscreenexcel-header">
|
|
645
|
+
<h2>Sheet Name: {selectedOrder.sheetName}</h2>
|
|
646
|
+
</div>
|
|
663
647
|
|
|
664
|
-
|
|
648
|
+
<div className="lookupscreensearchbox">
|
|
649
|
+
<div className="lookupscreensearch">
|
|
665
650
|
|
|
651
|
+
{/* SEARCH TEXT */}
|
|
652
|
+
<div className="lookupscreenlevellist first">
|
|
653
|
+
<label>What are you looking for?</label>
|
|
654
|
+
<input
|
|
655
|
+
type="text"
|
|
656
|
+
className="lookupscreen-searchcontrol"
|
|
657
|
+
placeholder="Search here..."
|
|
658
|
+
value={searchText}
|
|
659
|
+
onChange={(e) => {
|
|
660
|
+
setSearchText(e.target.value)
|
|
661
|
+
handleSearchChange(e.target.value)
|
|
662
|
+
}}
|
|
663
|
+
/>
|
|
666
664
|
|
|
665
|
+
</div>
|
|
667
666
|
|
|
668
|
-
{/* SEARCH BUTTON */}
|
|
669
|
-
<div className="lookupscreenlevellist action" onClick={applySearch}>
|
|
670
|
-
<button className="lookupscreenbutton">SEARCH</button>
|
|
671
667
|
|
|
672
|
-
</div>
|
|
673
668
|
|
|
669
|
+
{/* SEARCH BUTTON */}
|
|
670
|
+
<div className="lookupscreenlevellist action" onClick={applySearch}>
|
|
671
|
+
<button className="lookupscreenbutton">SEARCH</button>
|
|
672
|
+
|
|
673
|
+
</div>
|
|
674
|
+
|
|
675
|
+
</div>
|
|
674
676
|
</div>
|
|
675
|
-
</div>
|
|
676
677
|
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
678
|
+
<DataGrid
|
|
679
|
+
ref={gridRef}
|
|
680
|
+
dataSource={gridStore}
|
|
681
|
+
keyExpr={keyExpr}
|
|
682
|
+
onInitialized={(e) => setGridInstance(e.component)}
|
|
683
|
+
remoteOperations={true} // KEEP TRUE for remote paging, etc.
|
|
684
|
+
height="80%"
|
|
685
|
+
width="100%" // ✅ Set width to allow layout
|
|
686
|
+
columnAutoWidth={true} // ✅ Adjust columns automatically
|
|
687
|
+
showBorders={true}
|
|
688
|
+
allowColumnReordering={true}
|
|
689
|
+
onColumnReordered={(e) => {
|
|
690
|
+
|
|
691
|
+
}}
|
|
692
|
+
// onColumnReordered={handleColumnReorder}
|
|
693
|
+
columnHidingEnabled={false}
|
|
694
|
+
onSelectionChanged={onSelectionChanged}
|
|
695
|
+
repaintChangesOnly={true}
|
|
696
|
+
columns={columns}
|
|
697
|
+
onOptionChanged={(e) => {
|
|
698
|
+
if (e.name === "grouping" && e.fullName === "grouping.groupedColumns") {
|
|
699
|
+
setAutoExpandAll(false);
|
|
700
|
+
if (gridInstance) {
|
|
701
|
+
gridInstance.collapseAll(-1); // 👈 collapses all groups
|
|
702
|
+
}
|
|
701
703
|
}
|
|
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
704
|
}}
|
|
772
|
-
|
|
705
|
+
onRowClick={(e) => {
|
|
706
|
+
setSelectedRow(e.data); // 🔥 full row object
|
|
707
|
+
setRowDetailsVisible(true); // 🔥 open popup
|
|
708
|
+
}}
|
|
709
|
+
onContentReady={(e) => {
|
|
710
|
+
onContentReady(e.component)
|
|
711
|
+
// setGridInstance(e.component); // ensure grid instance is always updated
|
|
712
|
+
|
|
713
|
+
if (!readOnlyFilters) return;
|
|
714
|
+
const rootElement = e.component.element();
|
|
715
|
+
|
|
716
|
+
// Disable filter row inputs
|
|
717
|
+
const filterRowInputs = rootElement.querySelectorAll(".dx-datagrid-filter-row input");
|
|
718
|
+
filterRowInputs.forEach((input) => {
|
|
719
|
+
input.readOnly = true;
|
|
720
|
+
input.style.backgroundColor = "#f5f5f5";
|
|
721
|
+
|
|
722
|
+
});
|
|
723
|
+
const headerIcons = rootElement.querySelectorAll(".dx-header-filter");
|
|
724
|
+
headerIcons.forEach((icon) => {
|
|
725
|
+
icon.style.pointerEvents = "none";
|
|
726
|
+
icon.style.opacity = "0.5";
|
|
727
|
+
icon.setAttribute("aria-disabled", "true");
|
|
728
|
+
icon.setAttribute("tabindex", "-1");
|
|
729
|
+
|
|
730
|
+
});
|
|
731
|
+
}}
|
|
773
732
|
>
|
|
774
|
-
<
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
|
|
733
|
+
<Selection
|
|
734
|
+
mode="multiple"
|
|
735
|
+
showCheckBoxesMode={showCheckboxes ? 'always' : 'none'} // toggle here
|
|
736
|
+
selectAllMode="page" // This shows the checkbox in header
|
|
737
|
+
/>
|
|
738
|
+
<GroupPanel visible={true}
|
|
739
|
+
emptyPanelText="Use the context menu of header columns to group data"
|
|
740
|
+
/>
|
|
741
|
+
{/* <SearchPanel visible={true} highlightCaseSensitive={false} /> */}
|
|
742
|
+
|
|
743
|
+
<Grouping autoExpandAll={false} contextMenuEnabled={true} expandMode="rowClick"
|
|
744
|
+
/>
|
|
745
|
+
<FilterRow visible={true} />
|
|
746
|
+
<HeaderFilter visible={true} />
|
|
747
|
+
|
|
748
|
+
<Scrolling mode="virtual" useNative={false} />
|
|
749
|
+
<Summary>
|
|
750
|
+
<TotalItem column="sheetId" summaryType="count" displayFormat="Total: {0}" />
|
|
751
|
+
<GroupItem column="sheetId" summaryType="count" displayFormat="Count: {0}" />
|
|
752
|
+
</Summary>
|
|
753
|
+
|
|
754
|
+
</DataGrid>
|
|
755
|
+
|
|
756
|
+
|
|
757
|
+
{selectedRow && (
|
|
758
|
+
<Popup
|
|
759
|
+
visible={rowDetailsVisible}
|
|
760
|
+
onHiding={() => setRowDetailsVisible(false)}
|
|
761
|
+
showTitle
|
|
762
|
+
title={`Row Details`}
|
|
763
|
+
dragEnabled={false}
|
|
764
|
+
closeOnOutsideClick
|
|
765
|
+
showCloseButton
|
|
766
|
+
width={420}
|
|
767
|
+
height="100%"
|
|
768
|
+
position={{
|
|
769
|
+
my: "right top",
|
|
770
|
+
at: "right top",
|
|
771
|
+
of: window,
|
|
772
|
+
}}
|
|
773
|
+
wrapperAttr={{ class: "lookupscreenright-side-popup" }}
|
|
774
|
+
>
|
|
775
|
+
<div className="lookupscreenpopup-content">
|
|
776
|
+
{Object.entries(selectedRow).map(([key, value]) => (
|
|
777
|
+
<div className="form-group" key={key}>
|
|
778
|
+
<label>{formatLabel(key)}</label>
|
|
779
|
+
<input
|
|
780
|
+
type="text"
|
|
781
|
+
value={value ?? ""}
|
|
782
|
+
readOnly
|
|
783
|
+
/>
|
|
784
|
+
</div>
|
|
785
|
+
))}
|
|
786
|
+
</div>
|
|
787
|
+
</Popup>
|
|
788
|
+
)}
|
|
789
|
+
</div>
|
|
787
790
|
)}
|
|
788
|
-
</div>
|
|
789
|
-
)}
|
|
790
791
|
</div>
|
|
791
792
|
</div>
|
|
792
793
|
</div>
|