inboxlookup_screen 1.0.2 → 1.0.3

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 -159
  4. package/src/components/Service/OrdersMasterDetail.js +289 -287
package/src/components/Service/OrdersMasterDetail.js CHANGED
@@ -785,89 +785,90 @@ 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>
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>
843
844
 
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
- />
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
+ />
860
861
 
861
- </div>
862
+ </div>
862
863
 
863
864
 
864
865
 
865
- {/* SEARCH BUTTON */}
866
- <div className="levellist action" onClick={applySearch}>
867
- <button className="orderbutton">SEARCH</button>
866
+ {/* SEARCH BUTTON */}
867
+ <div className="lookupscreenlevellist action" onClick={applySearch}>
868
+ <button className="lookupscreenbutton">SEARCH</button>
868
869
 
869
- </div>
870
- {/* <div ref={saveButtonRef} >
870
+ </div>
871
+ {/* <div ref={saveButtonRef} >
871
872
 
872
873
  <Button
873
874
  icon="clock"
@@ -877,244 +878,245 @@ const OrdersMasterDetail = ({ dataSource, keyExpr }) => {
877
878
  />
878
879
 
879
880
  </div> */}
881
+ </div>
880
882
  </div>
881
- </div>
882
883
 
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
884
+ <DataGrid
885
+ ref={gridRef}
886
+ dataSource={gridStore}
887
+ keyExpr={keyExpr}
888
+ onInitialized={(e) => setGridInstance(e.component)}
889
+ remoteOperations={true} // KEEP TRUE for remote paging, etc.
890
+ height="80%"
891
+ width="100%" // ✅ Set width to allow layout
892
+ columnAutoWidth={true} // ✅ Adjust columns automatically
893
+ showBorders={true}
894
+ allowColumnReordering={true}
895
+ onColumnReordered={(e) => {
896
+ console.log("REORDER TRIGGERED");
897
+ console.log("From:", e.fromIndex);
898
+ console.log("To:", e.toIndex);
899
+ console.log("Field:", e.column.dataField);
900
+ }}
901
+ // onColumnReordered={handleColumnReorder}
902
+ columnHidingEnabled={false}
903
+ onSelectionChanged={onSelectionChanged}
904
+ repaintChangesOnly={true}
905
+ columns={columns}
906
+ onOptionChanged={(e) => {
907
+ if (e.name === "grouping" && e.fullName === "grouping.groupedColumns") {
908
+ setAutoExpandAll(false);
909
+ if (gridInstance) {
910
+ gridInstance.collapseAll(-1); // 👈 collapses all groups
911
+ }
910
912
  }
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
- )}
913
+ }}
914
+ onRowClick={(e) => {
915
+ setSelectedRow(e.data); // 🔥 full row object
916
+ setRowDetailsVisible(true); // 🔥 open popup
917
+ }}
918
+ onContentReady={(e) => {
919
+ onContentReady(e.component)
920
+ // setGridInstance(e.component); // ensure grid instance is always updated
921
+
922
+ if (!readOnlyFilters) return;
923
+ const rootElement = e.component.element();
924
+
925
+ // Disable filter row inputs
926
+ const filterRowInputs = rootElement.querySelectorAll(".dx-datagrid-filter-row input");
927
+ filterRowInputs.forEach((input) => {
928
+ input.readOnly = true;
929
+ input.style.backgroundColor = "#f5f5f5";
930
+
931
+ });
932
+ const headerIcons = rootElement.querySelectorAll(".dx-header-filter");
933
+ headerIcons.forEach((icon) => {
934
+ icon.style.pointerEvents = "none";
935
+ icon.style.opacity = "0.5";
936
+ icon.setAttribute("aria-disabled", "true");
937
+ icon.setAttribute("tabindex", "-1");
938
+
939
+ });
940
+ }}
941
+ >
942
+ <Selection
943
+ mode="multiple"
944
+ showCheckBoxesMode={showCheckboxes ? 'always' : 'none'} // toggle here
945
+ selectAllMode="page" // This shows the checkbox in header
946
+ />
947
+ <GroupPanel visible={true}
948
+ emptyPanelText="Use the context menu of header columns to group data"
982
949
  />
950
+ {/* <SearchPanel visible={true} highlightCaseSensitive={false} /> */}
983
951
 
984
- <Item
985
- location="after"
986
- render={() => (
987
- <Button
988
- icon="clearformat"
989
- text="Clear"
990
- onClick={getClearSelected}
991
- />
992
- )}
952
+ <Grouping autoExpandAll={false} contextMenuEnabled={true} expandMode="rowClick"
993
953
  />
994
- </Toolbar>
995
- </DataGrid>
954
+ <FilterRow visible={true} />
955
+ <HeaderFilter visible={true} />
956
+
957
+ <Scrolling mode="virtual" useNative={false} />
958
+ <Summary>
959
+ <TotalItem column="sheetId" summaryType="count" displayFormat="Total: {0}" />
960
+ <GroupItem column="sheetId" summaryType="count" displayFormat="Count: {0}" />
961
+ </Summary>
962
+
963
+ <Toolbar>
964
+ <Item name="groupPanel" location="before" />
965
+
966
+ <Item
967
+ location="after"
968
+ render={() => (
969
+ <Button
970
+ icon="arrowright"
971
+ text={`(${finalCount})`}
972
+ onClick={() => {
973
+ if (actionValue === "Assigned") {
974
+ setAssignPopupVisible(true);
975
+ } else {
976
+ getFinalSelectedIds();
977
+ setPopupVisible(true);
978
+ }
979
+ }}
980
+ disabled={!proceedEnabled}
981
+ />
982
+ )}
983
+ />
984
+
985
+ <Item
986
+ location="after"
987
+ render={() => (
988
+ <Button
989
+ icon="clearformat"
990
+ text="Clear"
991
+ onClick={getClearSelected}
992
+ />
993
+ )}
994
+ />
995
+ </Toolbar>
996
+ </DataGrid>
997
+
998
+
999
+ {selectedRow && (
1000
+ <Popup
1001
+ visible={rowDetailsVisible}
1002
+ onHiding={() => setRowDetailsVisible(false)}
1003
+ showTitle
1004
+ title={`Row Details`}
1005
+ dragEnabled={false}
1006
+ closeOnOutsideClick
1007
+ showCloseButton
1008
+ width={420}
1009
+ height="100%"
1010
+ position={{
1011
+ my: "right top",
1012
+ at: "right top",
1013
+ of: window,
1014
+ }}
1015
+ wrapperAttr={{ class: "lookupscreenright-side-popup" }}
1016
+ >
1017
+ <div className="lookupscreenpopup-content">
1018
+ {Object.entries(selectedRow).map(([key, value]) => (
1019
+ <div className="form-group" key={key}>
1020
+ <label>{formatLabel(key)}</label>
1021
+ <input
1022
+ type="text"
1023
+ value={value ?? ""}
1024
+ readOnly
1025
+ />
1026
+ </div>
1027
+ ))}
1028
+ </div>
1029
+ </Popup>
1030
+ )}
996
1031
 
997
1032
 
998
- {selectedRow && (
999
1033
  <Popup
1000
- visible={rowDetailsVisible}
1001
- onHiding={() => setRowDetailsVisible(false)}
1034
+ visible={searchPopupVisible}
1035
+ onHiding={() => setSearchPopupVisible(false)}
1002
1036
  showTitle
1003
- title={`Row Details`}
1037
+ title="Search History"
1038
+ width={360}
1039
+ height="100%"
1004
1040
  dragEnabled={false}
1005
1041
  closeOnOutsideClick
1006
1042
  showCloseButton
1007
- width={420}
1008
- height="100%"
1009
1043
  position={{
1010
1044
  my: "right top",
1011
1045
  at: "right top",
1012
- of: window,
1046
+ of: window
1013
1047
  }}
1014
- wrapperAttr={{ class: "right-side-popup" }}
1048
+ wrapperAttr={{ class: "right-search-popup" }}
1015
1049
  >
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
1050
+ <div style={{ padding: 16, height: "100%" }}>
1051
+ {searchHistory.length > 0 ? (
1052
+ <ul
1053
+ style={{
1054
+ listStyle: "none",
1055
+ padding: 0,
1056
+ margin: 0,
1057
+ height: "100%",
1058
+ overflowY: "auto"
1059
+ }}
1060
+ >
1061
+ {searchHistory.map((s, i) => (
1062
+ <li
1063
+ key={i}
1064
+ onClick={() => {
1065
+ setGridSearchText(s);
1066
+ setSearchPopupVisible(false);
1067
+ }}
1083
1068
  style={{
1084
- fontSize: 14,
1085
- color: "#333",
1086
- overflow: "hidden",
1087
- textOverflow: "ellipsis",
1088
- whiteSpace: "nowrap"
1069
+ display: "flex",
1070
+ alignItems: "center",
1071
+ gap: 10,
1072
+ padding: "10px 12px",
1073
+ marginBottom: 8,
1074
+ borderRadius: 8,
1075
+ cursor: "pointer",
1076
+ backgroundColor: "#f5f7fa",
1077
+ transition: "all 0.2s ease"
1089
1078
  }}
1090
- title={s}
1079
+ onMouseEnter={e => e.currentTarget.style.background = "#e6f0ff"}
1080
+ onMouseLeave={e => e.currentTarget.style.background = "#f5f7fa"}
1091
1081
  >
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>
1082
+ <span style={{ fontSize: 16, color: "#1976d2" }}>🔍</span>
1083
+ <span
1084
+ style={{
1085
+ fontSize: 14,
1086
+ color: "#333",
1087
+ overflow: "hidden",
1088
+ textOverflow: "ellipsis",
1089
+ whiteSpace: "nowrap"
1090
+ }}
1091
+ title={s}
1092
+ >
1093
+ {s}
1094
+ </span>
1095
+ </li>
1096
+ ))}
1097
+ </ul>
1098
+ ) : (
1099
+ <div
1100
+ style={{
1101
+ height: "100%",
1102
+ display: "flex",
1103
+ alignItems: "center",
1104
+ justifyContent: "center",
1105
+ color: "#999",
1106
+ fontSize: 14
1107
+ }}
1108
+ >
1109
+ 🔍 No search history available
1110
+ </div>
1111
+ )}
1112
+ </div>
1113
+ </Popup>
1113
1114
 
1114
1115
 
1115
1116
 
1116
- </div>
1117
- )}
1117
+ </div>
1118
+ )}
1119
+ </div>
1118
1120
  </div>
1119
1121
  </div>
1120
1122
  );