inboxlookup_screen 1.0.2 → 1.0.4

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.
Files changed (4) hide show
  1. package/dist/index.js +1 -1
  2. package/package.json +1 -1
  3. package/src/components/Service/OrdersMasterDetail.css +47 -161
  4. package/src/components/Service/OrdersMasterDetail.js +288 -295
package/src/components/Service/OrdersMasterDetail.js CHANGED
@@ -785,336 +785,329 @@ const OrdersMasterDetail = ({ dataSource, keyExpr }) => {
785
785
 
786
786
 
787
787
  return (
788
- <div className="orders-container">
789
- {/* LEFT PANEL (NO SEARCH) */}
790
- <div className="orders-left">
791
- <h3 className="panel-title">Service List</h3>
792
- <List
793
- dataSource={orders}
794
- keyExpr="id"
795
- selectionMode="single"
796
- selectedItem={selectedOrder}
797
- onItemClick={async (e) => {
798
- const sheet = e.itemData;
799
- saveLastViewedSheet(sheet);
800
-
801
- // ✅ Update selected service
802
- setSelectedOrder(sheet);
803
- setSelectedService(sheet);
804
- await loadColumns(sheet.id);
805
-
806
- // ✅ Reset grid state BEFORE assigning new store
807
- if (gridInstance) {
808
- gridInstance.pageIndex(0); // 🔥 reset pagination
809
- gridInstance.clearSelection(); // optional but recommended
810
- gridInstance.searchByText(""); // reset server search
811
- }
812
-
813
- // ✅ Create & assign new datasource
814
- const newStore = createStore(sheet.id);
815
- setGridStore(newStore);
816
-
817
- // ✅ Reset search textbox
818
- setSearchText("");
819
- }}
820
- itemRender={(item) => (
821
- <div
822
- className={`order-item ${item.id === selectedOrder?.id ? "active" : ""
823
- }`}
824
- >
825
- <div className="order-id">
826
- {truncate(item.sheetName, 25)}
788
+ <div className="arcflow-lookupscreen">
789
+ <div className="lookupscreen-container">
790
+ {/* LEFT PANEL (NO SEARCH) */}
791
+ <div className="lookupscreen-left">
792
+ <h3 className="lookupscreenpanel-title">Service List</h3>
793
+ <List
794
+ dataSource={orders}
795
+ keyExpr="id"
796
+ selectionMode="single"
797
+ selectedItem={selectedOrder}
798
+ onItemClick={async (e) => {
799
+ const sheet = e.itemData;
800
+ saveLastViewedSheet(sheet);
801
+
802
+ // ✅ Update selected service
803
+ setSelectedOrder(sheet);
804
+ setSelectedService(sheet);
805
+ await loadColumns(sheet.id);
806
+
807
+ // ✅ Reset grid state BEFORE assigning new store
808
+ if (gridInstance) {
809
+ gridInstance.pageIndex(0); // 🔥 reset pagination
810
+ gridInstance.clearSelection(); // optional but recommended
811
+ gridInstance.searchByText(""); // reset server search
812
+ }
813
+
814
+ // ✅ Create & assign new datasource
815
+ const newStore = createStore(sheet.id);
816
+ setGridStore(newStore);
817
+
818
+ // ✅ Reset search textbox
819
+ setSearchText("");
820
+ }}
821
+ itemRender={(item) => (
822
+ <div
823
+ className={`lookupscreen-item ${item.id === selectedOrder?.id ? "active" : ""
824
+ }`}
825
+ >
826
+ <div className="lookupscreen-id">
827
+ {truncate(item.sheetName, 25)}
828
+ </div>
827
829
  </div>
828
- </div>
829
- )}
830
- />
830
+ )}
831
+ />
831
832
 
832
833
 
833
- </div>
834
+ </div>
834
835
 
835
- {/* RIGHT PANEL (SEARCH + HISTORY) */}
836
- <div className="orders-right">
837
- {selectedOrder && (
838
- <div className="excel-card">
839
- {/* Header */}
840
- <div className="excel-header">
841
- <h2>Sheet Name: {selectedOrder.sheetName}</h2>
842
- </div>
843
-
844
- <div className="ordermasterbox">
845
- <div className="Ordermaster">
846
-
847
- {/* SEARCH TEXT */}
848
- <div className="levellist first">
849
- <label>What are you looking for?</label>
850
- <input
851
- type="text"
852
- className="form-control"
853
- placeholder="Search here..."
854
- value={searchText}
855
- onChange={(e) => {
856
- setSearchText(e.target.value)
857
- handleSearchChange(e.target.value)
858
- }}
859
- />
836
+ {/* RIGHT PANEL (SEARCH + HISTORY) */}
837
+ <div className="lookupscreen-right">
838
+ {selectedOrder && (
839
+ <div className="lookupscreenexcel-card">
840
+ {/* Header */}
841
+ <div className="lookupscreenexcel-header">
842
+ <h2>Sheet Name: {selectedOrder.sheetName}</h2>
843
+ </div>
860
844
 
861
- </div>
845
+ <div className="lookupscreensearchbox">
846
+ <div className="lookupscreensearch">
847
+
848
+ {/* SEARCH TEXT */}
849
+ <div className="lookupscreenlevellist first">
850
+ <label>What are you looking for?</label>
851
+ <input
852
+ type="text"
853
+ className="lookupscreen-searchcontrol"
854
+ placeholder="Search here..."
855
+ value={searchText}
856
+ onChange={(e) => {
857
+ setSearchText(e.target.value)
858
+ handleSearchChange(e.target.value)
859
+ }}
860
+ />
862
861
 
862
+ </div>
863
863
 
864
864
 
865
- {/* SEARCH BUTTON */}
866
- <div className="levellist action" onClick={applySearch}>
867
- <button className="orderbutton">SEARCH</button>
868
865
 
869
- </div>
870
- {/* <div ref={saveButtonRef} >
866
+ {/* SEARCH BUTTON */}
867
+ <div className="lookupscreenlevellist action" onClick={applySearch}>
868
+ <button className="lookupscreenbutton">SEARCH</button>
871
869
 
872
- <Button
873
- icon="clock"
874
- stylingMode="text"
875
- hint="Search history"
876
- onClick={() => setSearchPopupVisible(true)}
877
- />
870
+ </div>
878
871
 
879
- </div> */}
872
+ </div>
880
873
  </div>
881
- </div>
882
874
 
883
- <DataGrid
884
- ref={gridRef}
885
- dataSource={gridStore}
886
- keyExpr={keyExpr}
887
- onInitialized={(e) => setGridInstance(e.component)}
888
- remoteOperations={true} // KEEP TRUE for remote paging, etc.
889
- height="80%"
890
- width="100%" // ✅ Set width to allow layout
891
- columnAutoWidth={true} // ✅ Adjust columns automatically
892
- showBorders={true}
893
- allowColumnReordering={true}
894
- onColumnReordered={(e) => {
895
- console.log("REORDER TRIGGERED");
896
- console.log("From:", e.fromIndex);
897
- console.log("To:", e.toIndex);
898
- console.log("Field:", e.column.dataField);
899
- }}
900
- // onColumnReordered={handleColumnReorder}
901
- columnHidingEnabled={false}
902
- onSelectionChanged={onSelectionChanged}
903
- repaintChangesOnly={true}
904
- columns={columns}
905
- onOptionChanged={(e) => {
906
- if (e.name === "grouping" && e.fullName === "grouping.groupedColumns") {
907
- setAutoExpandAll(false);
908
- if (gridInstance) {
909
- gridInstance.collapseAll(-1); // 👈 collapses all groups
875
+ <DataGrid
876
+ ref={gridRef}
877
+ dataSource={gridStore}
878
+ keyExpr={keyExpr}
879
+ onInitialized={(e) => setGridInstance(e.component)}
880
+ remoteOperations={true} // KEEP TRUE for remote paging, etc.
881
+ height="80%"
882
+ width="100%" // ✅ Set width to allow layout
883
+ columnAutoWidth={true} // ✅ Adjust columns automatically
884
+ showBorders={true}
885
+ allowColumnReordering={true}
886
+ onColumnReordered={(e) => {
887
+ console.log("REORDER TRIGGERED");
888
+ console.log("From:", e.fromIndex);
889
+ console.log("To:", e.toIndex);
890
+ console.log("Field:", e.column.dataField);
891
+ }}
892
+ // onColumnReordered={handleColumnReorder}
893
+ columnHidingEnabled={false}
894
+ onSelectionChanged={onSelectionChanged}
895
+ repaintChangesOnly={true}
896
+ columns={columns}
897
+ onOptionChanged={(e) => {
898
+ if (e.name === "grouping" && e.fullName === "grouping.groupedColumns") {
899
+ setAutoExpandAll(false);
900
+ if (gridInstance) {
901
+ gridInstance.collapseAll(-1); // 👈 collapses all groups
902
+ }
910
903
  }
911
- }
912
- }}
913
- onRowClick={(e) => {
914
- setSelectedRow(e.data); // 🔥 full row object
915
- setRowDetailsVisible(true); // 🔥 open popup
916
- }}
917
- onContentReady={(e) => {
918
- onContentReady(e.component)
919
- // setGridInstance(e.component); // ensure grid instance is always updated
920
-
921
- if (!readOnlyFilters) return;
922
- const rootElement = e.component.element();
923
-
924
- // Disable filter row inputs
925
- const filterRowInputs = rootElement.querySelectorAll(".dx-datagrid-filter-row input");
926
- filterRowInputs.forEach((input) => {
927
- input.readOnly = true;
928
- input.style.backgroundColor = "#f5f5f5";
929
-
930
- });
931
- const headerIcons = rootElement.querySelectorAll(".dx-header-filter");
932
- headerIcons.forEach((icon) => {
933
- icon.style.pointerEvents = "none";
934
- icon.style.opacity = "0.5";
935
- icon.setAttribute("aria-disabled", "true");
936
- icon.setAttribute("tabindex", "-1");
937
-
938
- });
939
- }}
940
- >
941
- <Selection
942
- mode="multiple"
943
- showCheckBoxesMode={showCheckboxes ? 'always' : 'none'} // toggle here
944
- selectAllMode="page" // This shows the checkbox in header
945
- />
946
- <GroupPanel visible={true}
947
- emptyPanelText="Use the context menu of header columns to group data"
948
- />
949
- {/* <SearchPanel visible={true} highlightCaseSensitive={false} /> */}
950
-
951
- <Grouping autoExpandAll={false} contextMenuEnabled={true} expandMode="rowClick"
952
- />
953
- <FilterRow visible={true} />
954
- <HeaderFilter visible={true} />
955
-
956
- <Scrolling mode="virtual" useNative={false} />
957
- <Summary>
958
- <TotalItem column="sheetId" summaryType="count" displayFormat="Total: {0}" />
959
- <GroupItem column="sheetId" summaryType="count" displayFormat="Count: {0}" />
960
- </Summary>
961
-
962
- <Toolbar>
963
- <Item name="groupPanel" location="before" />
964
-
965
- <Item
966
- location="after"
967
- render={() => (
968
- <Button
969
- icon="arrowright"
970
- text={`(${finalCount})`}
971
- onClick={() => {
972
- if (actionValue === "Assigned") {
973
- setAssignPopupVisible(true);
974
- } else {
975
- getFinalSelectedIds();
976
- setPopupVisible(true);
977
- }
978
- }}
979
- disabled={!proceedEnabled}
980
- />
981
- )}
904
+ }}
905
+ onRowClick={(e) => {
906
+ setSelectedRow(e.data); // 🔥 full row object
907
+ setRowDetailsVisible(true); // 🔥 open popup
908
+ }}
909
+ onContentReady={(e) => {
910
+ onContentReady(e.component)
911
+ // setGridInstance(e.component); // ensure grid instance is always updated
912
+
913
+ if (!readOnlyFilters) return;
914
+ const rootElement = e.component.element();
915
+
916
+ // Disable filter row inputs
917
+ const filterRowInputs = rootElement.querySelectorAll(".dx-datagrid-filter-row input");
918
+ filterRowInputs.forEach((input) => {
919
+ input.readOnly = true;
920
+ input.style.backgroundColor = "#f5f5f5";
921
+
922
+ });
923
+ const headerIcons = rootElement.querySelectorAll(".dx-header-filter");
924
+ headerIcons.forEach((icon) => {
925
+ icon.style.pointerEvents = "none";
926
+ icon.style.opacity = "0.5";
927
+ icon.setAttribute("aria-disabled", "true");
928
+ icon.setAttribute("tabindex", "-1");
929
+
930
+ });
931
+ }}
932
+ >
933
+ <Selection
934
+ mode="multiple"
935
+ showCheckBoxesMode={showCheckboxes ? 'always' : 'none'} // toggle here
936
+ selectAllMode="page" // This shows the checkbox in header
982
937
  />
938
+ <GroupPanel visible={true}
939
+ emptyPanelText="Use the context menu of header columns to group data"
940
+ />
941
+ {/* <SearchPanel visible={true} highlightCaseSensitive={false} /> */}
983
942
 
984
- <Item
985
- location="after"
986
- render={() => (
987
- <Button
988
- icon="clearformat"
989
- text="Clear"
990
- onClick={getClearSelected}
991
- />
992
- )}
943
+ <Grouping autoExpandAll={false} contextMenuEnabled={true} expandMode="rowClick"
993
944
  />
994
- </Toolbar>
995
- </DataGrid>
945
+ <FilterRow visible={true} />
946
+ <HeaderFilter visible={true} />
947
+
948
+ <Scrolling mode="virtual" useNative={false} />
949
+ <Summary>
950
+ <TotalItem column="sheetId" summaryType="count" displayFormat="Total: {0}" />
951
+ <GroupItem column="sheetId" summaryType="count" displayFormat="Count: {0}" />
952
+ </Summary>
953
+
954
+ {/* <Toolbar>
955
+ <Item name="groupPanel" location="before" />
956
+
957
+ <Item
958
+ location="after"
959
+ render={() => (
960
+ <Button
961
+ icon="arrowright"
962
+ text={`(${finalCount})`}
963
+ onClick={() => {
964
+ if (actionValue === "Assigned") {
965
+ setAssignPopupVisible(true);
966
+ } else {
967
+ getFinalSelectedIds();
968
+ setPopupVisible(true);
969
+ }
970
+ }}
971
+ disabled={!proceedEnabled}
972
+ />
973
+ )}
974
+ />
975
+
976
+ <Item
977
+ location="after"
978
+ render={() => (
979
+ <Button
980
+ icon="clearformat"
981
+ text="Clear"
982
+ onClick={getClearSelected}
983
+ />
984
+ )}
985
+ />
986
+ </Toolbar> */}
987
+ </DataGrid>
988
+
989
+
990
+ {selectedRow && (
991
+ <Popup
992
+ visible={rowDetailsVisible}
993
+ onHiding={() => setRowDetailsVisible(false)}
994
+ showTitle
995
+ title={`Row Details`}
996
+ dragEnabled={false}
997
+ closeOnOutsideClick
998
+ showCloseButton
999
+ width={420}
1000
+ height="100%"
1001
+ position={{
1002
+ my: "right top",
1003
+ at: "right top",
1004
+ of: window,
1005
+ }}
1006
+ wrapperAttr={{ class: "lookupscreenright-side-popup" }}
1007
+ >
1008
+ <div className="lookupscreenpopup-content">
1009
+ {Object.entries(selectedRow).map(([key, value]) => (
1010
+ <div className="form-group" key={key}>
1011
+ <label>{formatLabel(key)}</label>
1012
+ <input
1013
+ type="text"
1014
+ value={value ?? ""}
1015
+ readOnly
1016
+ />
1017
+ </div>
1018
+ ))}
1019
+ </div>
1020
+ </Popup>
1021
+ )}
996
1022
 
997
1023
 
998
- {selectedRow && (
999
1024
  <Popup
1000
- visible={rowDetailsVisible}
1001
- onHiding={() => setRowDetailsVisible(false)}
1025
+ visible={searchPopupVisible}
1026
+ onHiding={() => setSearchPopupVisible(false)}
1002
1027
  showTitle
1003
- title={`Row Details`}
1028
+ title="Search History"
1029
+ width={360}
1030
+ height="100%"
1004
1031
  dragEnabled={false}
1005
1032
  closeOnOutsideClick
1006
1033
  showCloseButton
1007
- width={420}
1008
- height="100%"
1009
1034
  position={{
1010
1035
  my: "right top",
1011
1036
  at: "right top",
1012
- of: window,
1037
+ of: window
1013
1038
  }}
1014
- wrapperAttr={{ class: "right-side-popup" }}
1039
+ wrapperAttr={{ class: "right-search-popup" }}
1015
1040
  >
1016
- <div className="popup-content">
1017
- {Object.entries(selectedRow).map(([key, value]) => (
1018
- <div className="form-group" key={key}>
1019
- <label>{formatLabel(key)}</label>
1020
- <input
1021
- type="text"
1022
- value={value ?? ""}
1023
- readOnly
1024
- />
1025
- </div>
1026
- ))}
1027
- </div>
1028
- </Popup>
1029
- )}
1030
-
1031
-
1032
- <Popup
1033
- visible={searchPopupVisible}
1034
- onHiding={() => setSearchPopupVisible(false)}
1035
- showTitle
1036
- title="Search History"
1037
- width={360}
1038
- height="100%"
1039
- dragEnabled={false}
1040
- closeOnOutsideClick
1041
- showCloseButton
1042
- position={{
1043
- my: "right top",
1044
- at: "right top",
1045
- of: window
1046
- }}
1047
- wrapperAttr={{ class: "right-search-popup" }}
1048
- >
1049
- <div style={{ padding: 16, height: "100%" }}>
1050
- {searchHistory.length > 0 ? (
1051
- <ul
1052
- style={{
1053
- listStyle: "none",
1054
- padding: 0,
1055
- margin: 0,
1056
- height: "100%",
1057
- overflowY: "auto"
1058
- }}
1059
- >
1060
- {searchHistory.map((s, i) => (
1061
- <li
1062
- key={i}
1063
- onClick={() => {
1064
- setGridSearchText(s);
1065
- setSearchPopupVisible(false);
1066
- }}
1067
- style={{
1068
- display: "flex",
1069
- alignItems: "center",
1070
- gap: 10,
1071
- padding: "10px 12px",
1072
- marginBottom: 8,
1073
- borderRadius: 8,
1074
- cursor: "pointer",
1075
- backgroundColor: "#f5f7fa",
1076
- transition: "all 0.2s ease"
1077
- }}
1078
- onMouseEnter={e => e.currentTarget.style.background = "#e6f0ff"}
1079
- onMouseLeave={e => e.currentTarget.style.background = "#f5f7fa"}
1080
- >
1081
- <span style={{ fontSize: 16, color: "#1976d2" }}>🔍</span>
1082
- <span
1041
+ <div style={{ padding: 16, height: "100%" }}>
1042
+ {searchHistory.length > 0 ? (
1043
+ <ul
1044
+ style={{
1045
+ listStyle: "none",
1046
+ padding: 0,
1047
+ margin: 0,
1048
+ height: "100%",
1049
+ overflowY: "auto"
1050
+ }}
1051
+ >
1052
+ {searchHistory.map((s, i) => (
1053
+ <li
1054
+ key={i}
1055
+ onClick={() => {
1056
+ setGridSearchText(s);
1057
+ setSearchPopupVisible(false);
1058
+ }}
1083
1059
  style={{
1084
- fontSize: 14,
1085
- color: "#333",
1086
- overflow: "hidden",
1087
- textOverflow: "ellipsis",
1088
- whiteSpace: "nowrap"
1060
+ display: "flex",
1061
+ alignItems: "center",
1062
+ gap: 10,
1063
+ padding: "10px 12px",
1064
+ marginBottom: 8,
1065
+ borderRadius: 8,
1066
+ cursor: "pointer",
1067
+ backgroundColor: "#f5f7fa",
1068
+ transition: "all 0.2s ease"
1089
1069
  }}
1090
- title={s}
1070
+ onMouseEnter={e => e.currentTarget.style.background = "#e6f0ff"}
1071
+ onMouseLeave={e => e.currentTarget.style.background = "#f5f7fa"}
1091
1072
  >
1092
- {s}
1093
- </span>
1094
- </li>
1095
- ))}
1096
- </ul>
1097
- ) : (
1098
- <div
1099
- style={{
1100
- height: "100%",
1101
- display: "flex",
1102
- alignItems: "center",
1103
- justifyContent: "center",
1104
- color: "#999",
1105
- fontSize: 14
1106
- }}
1107
- >
1108
- 🔍 No search history available
1109
- </div>
1110
- )}
1111
- </div>
1112
- </Popup>
1073
+ <span style={{ fontSize: 16, color: "#1976d2" }}>🔍</span>
1074
+ <span
1075
+ style={{
1076
+ fontSize: 14,
1077
+ color: "#333",
1078
+ overflow: "hidden",
1079
+ textOverflow: "ellipsis",
1080
+ whiteSpace: "nowrap"
1081
+ }}
1082
+ title={s}
1083
+ >
1084
+ {s}
1085
+ </span>
1086
+ </li>
1087
+ ))}
1088
+ </ul>
1089
+ ) : (
1090
+ <div
1091
+ style={{
1092
+ height: "100%",
1093
+ display: "flex",
1094
+ alignItems: "center",
1095
+ justifyContent: "center",
1096
+ color: "#999",
1097
+ fontSize: 14
1098
+ }}
1099
+ >
1100
+ 🔍 No search history available
1101
+ </div>
1102
+ )}
1103
+ </div>
1104
+ </Popup>
1113
1105
 
1114
1106
 
1115
1107
 
1116
- </div>
1117
- )}
1108
+ </div>
1109
+ )}
1110
+ </div>
1118
1111
  </div>
1119
1112
  </div>
1120
1113
  );