inboxlookup_screen 1.0.17 → 1.0.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "inboxlookup_screen",
-  "version": "1.0.17",
+  "version": "1.0.19",
   "description": "A React component using DevExtreme",
   "main": "dist/index.js",
   "homepage": "./",

package/src/components/Service/OrdersMasterDetail.js

@@ -17,7 +17,6 @@ import 'devextreme/dist/css/dx.light.css';
 const OrdersMasterDetail = ({ dataSource, keyExpr, token, BaseUrl, ProjectId }) => {
     const [orders, setOrders] = useState([]);
     const [selectedOrder, setSelectedOrder] = useState(null);
-    const saveButtonRef = useRef(null);
     const [rowDetailsVisible, setRowDetailsVisible] = useState(false);
     const [selectedRow, setSelectedRow] = useState(null);
     const [searchText, setSearchText] = useState("");
@@ -51,8 +50,6 @@ const OrdersMasterDetail = ({ dataSource, keyExpr, token, BaseUrl, ProjectId })
 
     // RIGHT SIDE SEARCH
     const [gridSearchText, setGridSearchText] = useState("");
-    const [searchHistory, setSearchHistory] = useState([]);
-    const searchHistoryRef = useRef([]);
 
 
     useEffect(() => {
@@ -92,7 +89,6 @@ const OrdersMasterDetail = ({ dataSource, keyExpr, token, BaseUrl, ProjectId })
         setFilteredOrders([]);
 
         setSelectedOrder(null);
-        setSelectedService(null);
 
         setGridStore(null);
         setColumns([]);
@@ -540,26 +536,6 @@ const OrdersMasterDetail = ({ dataSource, keyExpr, token, BaseUrl, ProjectId })
     };
 
 
-    useEffect(() => {
-        const handleVisibilityChange = () => {
-            if (document.visibilityState === "hidden") {
-                updateSearchHistoryAPI();
-            }
-        };
-
-        const handleBeforeUnload = () => {
-            updateSearchHistoryAPI();
-        };
-
-        document.addEventListener("visibilitychange", handleVisibilityChange);
-        window.addEventListener("beforeunload", handleBeforeUnload);
-
-        return () => {
-            document.removeEventListener("visibilitychange", handleVisibilityChange);
-            window.removeEventListener("beforeunload", handleBeforeUnload);
-        };
-    }, []);
-
     const applySearch = () => {
         if (!gridInstance) return;
 
@@ -641,156 +617,177 @@ const OrdersMasterDetail = ({ dataSource, keyExpr, token, BaseUrl, ProjectId })
 
                 {/* RIGHT PANEL (SEARCH + HISTORY) */}
                 <div className="lookupscreen-right">
-                    {selectedOrder && (
-                        <div className="lookupscreenexcel-card">
-                            {/* Header */}
-                            <div className="lookupscreenexcel-header">
-                                <h2>Sheet Name: {selectedOrder.sheetName}</h2>
+                    {orders.length === 0 ? (
+                        <div className="lookupscreen-empty-state">
+                            <div className="empty-icon">🚫</div>
+                            <h3>No services available</h3>
+                            <p>
+                                There are no services configured for this project.
+                                <br />
+                                Please contact the administrator or add a new service.
+                            </p>
+                        </div>
+                    )
+
+                        /* 2️⃣ Services exist, but none selected */
+                        : !selectedOrder ? (
+                            <div className="lookupscreen-empty-state">
+                                <div className="empty-icon">📄</div>
+                                <h3>No service selected</h3>
+                                <p>Please select a service from the left panel to view sheet details.</p>
                             </div>
+                        )
 
-                            <div className="lookupscreensearchbox">
-                                <div className="lookupscreensearch">
-
-                                    {/* SEARCH TEXT */}
-                                    <div className="lookupscreenlevellist first">
-                                        <label>What are you looking for?</label>
-                                        <input
-                                            type="text"
-                                            className="lookupscreen-searchcontrol"
-                                            placeholder="Search here..."
-                                            value={searchText}
-                                            onChange={(e) => {
-                                                setSearchText(e.target.value)
-                                                handleSearchChange(e.target.value)
-                                            }}
-                                        />
+                            /* 3️⃣ Service selected */
+                            : (<div className="lookupscreenexcel-card">
+                                {/* Header */}
+                                <div className="lookupscreenexcel-header">
+                                    <h2>Sheet Name: {selectedOrder.sheetName}</h2>
+                                </div>
 
-                                    </div>
+                                <div className="lookupscreensearchbox">
+                                    <div className="lookupscreensearch">
 
+                                        {/* SEARCH TEXT */}
+                                        <div className="lookupscreenlevellist first">
+                                            <label>What are you looking for?</label>
+                                            <input
+                                                type="text"
+                                                className="lookupscreen-searchcontrol"
+                                                placeholder="Search here..."
+                                                value={searchText}
+                                                onChange={(e) => {
+                                                    setSearchText(e.target.value)
+                                                    handleSearchChange(e.target.value)
+                                                }}
+                                            />
 
+                                        </div>
 
-                                    {/* SEARCH BUTTON */}
-                                    <div className="lookupscreenlevellist action" onClick={applySearch}>
-                                        <button className="lookupscreenbutton">SEARCH</button>
 
-                                    </div>
 
+                                        {/* SEARCH BUTTON */}
+                                        <div className="lookupscreenlevellist action" onClick={applySearch}>
+                                            <button className="lookupscreenbutton">SEARCH</button>
+
+                                        </div>
+
+                                    </div>
                                 </div>
-                            </div>
 
-                            <DataGrid
-                                ref={gridRef}
-                                dataSource={gridStore}
-                                keyExpr={keyExpr}
-                                onInitialized={(e) => setGridInstance(e.component)}
-                                remoteOperations={true} // KEEP TRUE for remote paging, etc.
-                                height="80%"
-                                width="100%"                  // ✅ Set width to allow layout
-                                columnAutoWidth={true}        // ✅ Adjust columns automatically
-                                showBorders={true}
-                                allowColumnReordering={true}
-                                onColumnReordered={(e) => {
-
-                                }}
-                                // onColumnReordered={handleColumnReorder}
-                                columnHidingEnabled={false}
-                                onSelectionChanged={onSelectionChanged}
-                                repaintChangesOnly={true}
-                                columns={columns}
-                                onOptionChanged={(e) => {
-                                    if (e.name === "grouping" && e.fullName === "grouping.groupedColumns") {
-                                        setAutoExpandAll(false);
-                                        if (gridInstance) {
-                                            gridInstance.collapseAll(-1); // 👈 collapses all groups
+                                <DataGrid
+                                    ref={gridRef}
+                                    dataSource={gridStore}
+                                    keyExpr={keyExpr}
+                                    onInitialized={(e) => setGridInstance(e.component)}
+                                    remoteOperations={true} // KEEP TRUE for remote paging, etc.
+                                    height="80%"
+                                    width="100%"                  // ✅ Set width to allow layout
+                                    columnAutoWidth={true}        // ✅ Adjust columns automatically
+                                    showBorders={true}
+                                    allowColumnReordering={true}
+                                    onColumnReordered={(e) => {
+
+                                    }}
+                                    // onColumnReordered={handleColumnReorder}
+                                    columnHidingEnabled={false}
+                                    onSelectionChanged={onSelectionChanged}
+                                    repaintChangesOnly={true}
+                                    columns={columns}
+                                    onOptionChanged={(e) => {
+                                        if (e.name === "grouping" && e.fullName === "grouping.groupedColumns") {
+                                            setAutoExpandAll(false);
+                                            if (gridInstance) {
+                                                gridInstance.collapseAll(-1); // 👈 collapses all groups
+                                            }
                                         }
-                                    }
-                                }}
-                                onRowClick={(e) => {
-                                    setSelectedRow(e.data);      // 🔥 full row object
-                                    setRowDetailsVisible(true);  // 🔥 open popup
-                                }}
-                                onContentReady={(e) => {
-                                    onContentReady(e.component)
-                                    // setGridInstance(e.component); // ensure grid instance is always updated
-
-                                    if (!readOnlyFilters) return;
-                                    const rootElement = e.component.element();
-
-                                    // Disable filter row inputs
-                                    const filterRowInputs = rootElement.querySelectorAll(".dx-datagrid-filter-row input");
-                                    filterRowInputs.forEach((input) => {
-                                        input.readOnly = true;
-                                        input.style.backgroundColor = "#f5f5f5";
-
-                                    });
-                                    const headerIcons = rootElement.querySelectorAll(".dx-header-filter");
-                                    headerIcons.forEach((icon) => {
-                                        icon.style.pointerEvents = "none";
-                                        icon.style.opacity = "0.5";
-                                        icon.setAttribute("aria-disabled", "true");
-                                        icon.setAttribute("tabindex", "-1");
-
-                                    });
-                                }}
-                            >
-                                <Selection
-                                    mode="multiple"
-                                    showCheckBoxesMode={showCheckboxes ? 'always' : 'none'}  // toggle here
-                                    selectAllMode="page" // This shows the checkbox in header
-                                />
-                                <GroupPanel visible={true}
-                                    emptyPanelText="Use the context menu of header columns to group data"
-                                />
-                                {/* <SearchPanel visible={true} highlightCaseSensitive={false} /> */}
-
-                                <Grouping autoExpandAll={false} contextMenuEnabled={true} expandMode="rowClick"
-                                />
-                                <FilterRow visible={true} />
-                                <HeaderFilter visible={true} />
-
-                                <Scrolling mode="virtual" useNative={false} />
-                                <Summary>
-                                    <TotalItem column="sheetId" summaryType="count" displayFormat="Total: {0}" />
-                                    <GroupItem column="sheetId" summaryType="count" displayFormat="Count: {0}" />
-                                </Summary>
-
-                            </DataGrid>
-
-
-                            {selectedRow && (
-                                <Popup
-                                    visible={rowDetailsVisible}
-                                    onHiding={() => setRowDetailsVisible(false)}
-                                    showTitle
-                                    title={`Row Details`}
-                                    dragEnabled={false}
-                                    closeOnOutsideClick
-                                    showCloseButton
-                                    width={420}
-                                    height="100%"
-                                    position={{
-                                        my: "right top",
-                                        at: "right top",
-                                        of: window,
                                     }}
-                                    wrapperAttr={{ class: "lookupscreenright-side-popup" }}
+                                    onRowClick={(e) => {
+                                        setSelectedRow(e.data);      // 🔥 full row object
+                                        setRowDetailsVisible(true);  // 🔥 open popup
+                                    }}
+                                    onContentReady={(e) => {
+                                        onContentReady(e.component)
+                                        // setGridInstance(e.component); // ensure grid instance is always updated
+
+                                        if (!readOnlyFilters) return;
+                                        const rootElement = e.component.element();
+
+                                        // Disable filter row inputs
+                                        const filterRowInputs = rootElement.querySelectorAll(".dx-datagrid-filter-row input");
+                                        filterRowInputs.forEach((input) => {
+                                            input.readOnly = true;
+                                            input.style.backgroundColor = "#f5f5f5";
+
+                                        });
+                                        const headerIcons = rootElement.querySelectorAll(".dx-header-filter");
+                                        headerIcons.forEach((icon) => {
+                                            icon.style.pointerEvents = "none";
+                                            icon.style.opacity = "0.5";
+                                            icon.setAttribute("aria-disabled", "true");
+                                            icon.setAttribute("tabindex", "-1");
+
+                                        });
+                                    }}
                                 >
-                                    <div className="lookupscreenpopup-content">
-                                        {Object.entries(selectedRow).map(([key, value]) => (
-                                            <div className="form-group" key={key}>
-                                                <label>{formatLabel(key)}</label>
-                                                <input
-                                                    type="text"
-                                                    value={value ?? ""}
-                                                    readOnly
-                                                />
-                                            </div>
-                                        ))}
-                                    </div>
-                                </Popup>
+                                    <Selection
+                                        mode="multiple"
+                                        showCheckBoxesMode={showCheckboxes ? 'always' : 'none'}  // toggle here
+                                        selectAllMode="page" // This shows the checkbox in header
+                                    />
+                                    <GroupPanel visible={true}
+                                        emptyPanelText="Use the context menu of header columns to group data"
+                                    />
+                                    {/* <SearchPanel visible={true} highlightCaseSensitive={false} /> */}
+
+                                    <Grouping autoExpandAll={false} contextMenuEnabled={true} expandMode="rowClick"
+                                    />
+                                    <FilterRow visible={true} />
+                                    <HeaderFilter visible={true} />
+
+                                    <Scrolling mode="virtual" useNative={false} />
+                                    <Summary>
+                                        <TotalItem column="sheetId" summaryType="count" displayFormat="Total: {0}" />
+                                        <GroupItem column="sheetId" summaryType="count" displayFormat="Count: {0}" />
+                                    </Summary>
+
+                                </DataGrid>
+
+
+                                {selectedRow && (
+                                    <Popup
+                                        visible={rowDetailsVisible}
+                                        onHiding={() => setRowDetailsVisible(false)}
+                                        showTitle
+                                        title={`Row Details`}
+                                        dragEnabled={false}
+                                        closeOnOutsideClick
+                                        showCloseButton
+                                        width={420}
+                                        height="100%"
+                                        position={{
+                                            my: "right top",
+                                            at: "right top",
+                                            of: window,
+                                        }}
+                                        wrapperAttr={{ class: "lookupscreenright-side-popup" }}
+                                    >
+                                        <div className="lookupscreenpopup-content">
+                                            {Object.entries(selectedRow).map(([key, value]) => (
+                                                <div className="form-group" key={key}>
+                                                    <label>{formatLabel(key)}</label>
+                                                    <input
+                                                        type="text"
+                                                        value={value ?? ""}
+                                                        readOnly
+                                                    />
+                                                </div>
+                                            ))}
+                                        </div>
+                                    </Popup>
+                                )}
+                            </div>
                             )}
-                        </div>
-                    )}
                 </div>
             </div>
         </div>