impact-ui 3.7.32-alpha.1 → 3.7.32-alpha.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "impact-ui",
-  "version": "3.7.32-alpha.1",
+  "version": "3.7.32-alpha.2",
   "description": "Impact Analytics UI library",
   "main": "dist/index.js",
   "files": [

package/src/components/TableOld/index.js

@@ -92,6 +92,14 @@ export const OldTable = forwardRef(
       closeTableSettingOnOutsideClick = false,
       onTableSettingClick = () => {},
       deleteViewPromptText,
+      saveViewCustomFilter = {
+        options: [
+          { label: "Global", value: "global" },
+          { label: "Personal", value: "personal" },
+        ],
+        selectedOption: "global",
+      },
+      customRenderSaveViewContent = null,
       enableHeaderTextWrap = true,
       numericFormatDefault = "full_no",
       defaultFontSize = "medium",
@@ -526,6 +534,8 @@ export const OldTable = forwardRef(
             closeTableSettingOnOutsideClick={closeTableSettingOnOutsideClick}
             onTableSettingClick={onTableSettingClick}
             deleteViewPromptText={deleteViewPromptText}
+            saveViewCustomFilter={saveViewCustomFilter}
+            customRenderSaveViewContent={customRenderSaveViewContent}
             numericFormatDefault={numericFormatDefault}
           />
           <BulkActionBar

package/src/components/TableOld/tableFunctions.js

@@ -256,7 +256,9 @@ export const Columns = forwardRef((props, ref) => {
   const [collapsedFrozenColumns, setCollapsedFrozenColumns] = useState({});
   const [openSaveViewModal, setOpenSaveViewModal] = useState(false);
   const [isDefaultView, setIsDefaultView] = useState(false);
-  const [selectedViewType, setSelectedViewType] = useState("global");
+  const [selectedViewType, setSelectedViewType] = useState(
+    props?.saveViewCustomFilter?.selectedOption
+  );
   const [savedViewsOptions, setSavedViewsOptions] = useState(
     props?.savedViewsOptions || []
   );
@@ -282,12 +284,13 @@ export const Columns = forwardRef((props, ref) => {
     const options = views.map((view) => ({
       label: view.viewName,
       value: view.viewName,
-      isDisabled: view?.isDisabled,
+      disabled: view?.isDisabled,
     }));
 
     setCurrentSaveViewOptions(options);
     setSavedViewsOptions(views);
     setFilteredSavedViewsOptions(views);
+    setSelectedView(views.filter((view) => view.isActive));
 
     if (views.length === 0) {
       setOpenSaveViewMenu(false);
@@ -1190,7 +1193,7 @@ export const Columns = forwardRef((props, ref) => {
         setEditedView(null);
         setOpenSaveViewModal(false);
         setInputValue("");
-        setSelectedViewType("global");
+        setSelectedViewType(props?.saveViewCustomFilter?.selectedOption);
         setIsDefaultView(false);
       }
       return;
@@ -1217,7 +1220,7 @@ export const Columns = forwardRef((props, ref) => {
       setOpenSaveViewModal(false);
       setSelectedSavedView(null);
       setInputValue("");
-      setSelectedViewType("global");
+      setSelectedViewType(props?.saveViewCustomFilter?.selectedOption);
       setIsDefaultView(false);
       setOpenDeletePrompt(false);
       setDeleteView(null);
@@ -1240,8 +1243,9 @@ export const Columns = forwardRef((props, ref) => {
     setOpenSaveViewModal(false);
     setSelectedSavedView(null);
     setInputValue("");
-    setSelectedViewType("global");
+    setSelectedViewType(props?.saveViewCustomFilter?.selectedOption);
     setIsDefaultView(false);
+    setIsEditView(false);
   };
 
   const handleSaveViewSearchChange = (e) => {
@@ -1265,6 +1269,16 @@ export const Columns = forwardRef((props, ref) => {
     }
   }, [props?.isDeleteViewLoading]);
 
+  useEffect(() => {
+    if (selectedBadge === "All") {
+      setFilteredSavedViewsOptions([...savedViewsOptions]);
+    } else {
+      setFilteredSavedViewsOptions(
+        savedViewsOptions.filter((view) => view.viewType === selectedBadge)
+      );
+    }
+  }, [selectedBadge, savedViewsOptions]);
+
   const handleSaveViewClick = (view) => {
     setFilteredSavedViewsOptions((prev) =>
       prev.map((item) => {
@@ -1312,7 +1326,10 @@ export const Columns = forwardRef((props, ref) => {
                 }
                 variant="tertiary"
                 size="small"
-                onClick={() => setOpenSaveViewMenu(!openSaveViewMenu)}
+                onClick={() => {
+                  setOpenSaveViewMenu(!openSaveViewMenu);
+                  setFilteredSavedViewsOptions([...savedViewsOptions]);
+                }}
               />
             </div>
           )}
@@ -1345,32 +1362,23 @@ export const Columns = forwardRef((props, ref) => {
               }}
               size="small"
             />
-            <Badge
-              label={"Global"}
-              variant="stroke"
-              color={selectedBadge === "Global" ? "info" : "default"}
-              onClick={() => {
-                setSelectedBadge("Global");
-                setFilteredSavedViewsOptions(
-                  savedViewsOptions.filter((view) => view.viewType === "global")
-                );
-              }}
-              size="small"
-            />
-            <Badge
-              label={"Personal"}
-              variant="stroke"
-              color={selectedBadge === "Personal" ? "info" : "default"}
-              onClick={() => {
-                setSelectedBadge("Personal");
-                setFilteredSavedViewsOptions(
-                  savedViewsOptions.filter(
-                    (view) => view.viewType === "personal"
-                  )
-                );
-              }}
-              size="small"
-            />
+            {props?.saveViewCustomFilter?.options?.map((option) => (
+              <Badge
+                key={option.value}
+                label={option.label}
+                variant="stroke"
+                color={selectedBadge === option.value ? "info" : "default"}
+                onClick={() => {
+                  setSelectedBadge(option.value);
+                  setFilteredSavedViewsOptions(
+                    savedViewsOptions.filter(
+                      (view) => view.viewType === option.value
+                    )
+                  );
+                }}
+                size="small"
+              />
+            ))}
           </div>
           <div className="save-view-menu-search-container">
             <Input
@@ -1381,88 +1389,96 @@ export const Columns = forwardRef((props, ref) => {
             />
           </div>
           <div className="save-view-menu-view-list-container">
-            {filteredSavedViewsOptions.length > 0 &&
-              filteredSavedViewsOptions.map((view, idx) => (
-                <div
-                  key={view.viewName + idx}
-                  className={`save-view-menu-view-list-item ${
-                    view.isActive ? "active" : ""
-                  }`}
-                  onClick={() => handleSaveViewClick(view)}
-                  tabIndex={idx === 0 ? 0 : -1}
-                  role="button"
-                  aria-label={`Saved view ${view.viewName}`}
-                  onKeyDown={(e) => {
-                    const current = e.currentTarget;
-                    switch (e.key) {
-                      case "Enter":
-                        e.preventDefault();
-                        handleSaveViewClick(view);
-                        break;
-                      case "ArrowDown": {
-                        e.preventDefault();
-                        const next = current.nextElementSibling;
-                        if (next) {
-                          next.focus();
+            {props?.customRenderSaveViewContent
+              ? props?.customRenderSaveViewContent
+              : filteredSavedViewsOptions.length > 0 &&
+                filteredSavedViewsOptions.map((view, idx) => (
+                  <div
+                    key={view.viewName + idx}
+                    className={`save-view-menu-view-list-item ${
+                      view.isActive ? "active" : ""
+                    }`}
+                    onClick={() => handleSaveViewClick(view)}
+                    tabIndex={idx === 0 ? 0 : -1}
+                    role="button"
+                    aria-label={`Saved view ${view.viewName}`}
+                    onKeyDown={(e) => {
+                      const current = e.currentTarget;
+
+                      switch (e.key) {
+                        case "Enter":
+                        case " ":
+                          e.preventDefault();
+                          handleSaveViewClick(view);
+                          break;
+
+                        case "ArrowDown": {
+                          e.preventDefault();
+                          const next = current.nextElementSibling;
+                          if (next) {
+                            next.focus();
+                          }
+                          break;
                         }
-                        break;
-                      }
-                      case "ArrowUp": {
-                        e.preventDefault();
-                        const prev = current.previousElementSibling;
-                        if (prev) {
-                          prev.focus();
+
+                        case "ArrowUp": {
+                          e.preventDefault();
+                          const prev = current.previousElementSibling;
+                          if (prev) {
+                            prev.focus();
+                          }
+                          break;
                         }
-                        break;
+
+                        default:
+                          break;
                       }
-                      default:
-                        break;
-                    }
-                  }}
-                >
-                  <span className="save-view-menu-view-list-item-name">
-                    {view.viewName}
-                  </span>
-                  <div className="save-view-menu-view-list-item-actions">
-                    {view?.isEditable && (
-                      <img
-                        src={saveViewEditIcon}
-                        alt="save-view-edit-icon"
-                        onClick={(e) => handleEditView(view, e)}
-                      />
-                    )}
-                    {view?.isDeletable && (
-                      <img
-                        src={saveViewDeleteIcon}
-                        alt="save-view-delete-icon"
-                        onClick={(e) => handleDeleteView(view, e)}
-                      />
-                    )}
-                    {view.isDefaultView ? (
-                      <img
-                        src={defaultViewActiveIcon}
-                        alt="default-view-icon"
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          e.preventDefault();
-                          props?.handleSetDefaultView(view);
-                        }}
-                        className="default-view-active-icon"
-                      />
-                    ) : (
-                      <img
-                        src={defaultViewIcon}
-                        alt="default-view-icon"
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          e.preventDefault();
-                          props?.handleSetDefaultView(view);
-                        }}
-                      />
-                    )}
+                    }}
+                  >
+                    <span className="save-view-menu-view-list-item-name">
+                      {view.viewName}
+                    </span>
+                    <div className="save-view-menu-view-list-item-actions">
+                      {view?.isEditable && (
+                        <img
+                          src={saveViewEditIcon}
+                          alt="save-view-edit-icon"
+                          onClick={(e) => handleEditView(view, e)}
+                        />
+                      )}
+                      {view?.isDeletable && (
+                        <img
+                          src={saveViewDeleteIcon}
+                          alt="save-view-delete-icon"
+                          onClick={(e) => handleDeleteView(view, e)}
+                        />
+                      )}
+                      {!view?.notReqDefaultView &&
+                        (view?.isDefaultView ? (
+                          <img
+                            src={defaultViewActiveIcon}
+                            alt="default-view-icon"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              e.preventDefault();
+                              props?.handleSetDefaultView(view);
+                            }}
+                            className="default-view-active-icon"
+                          />
+                        ) : (
+                          <img
+                            src={defaultViewIcon}
+                            alt="default-view-icon"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              e.preventDefault();
+                              props?.handleSetDefaultView(view);
+                            }}
+                          />
+                        ))}
+                    </div>
                   </div>
-                </div>
-              ))}
+                ))}
           </div>
           <hr className="save-view-menu-view-list-item-divider" />
           <div className="save-view-menu-footer">
@@ -1484,12 +1500,14 @@ export const Columns = forwardRef((props, ref) => {
                 updateColumnState();
                 setOpenSaveViewMenu(false);
               }}
+              disabled={props?.customRenderSaveViewContent}
             >
               Apply
             </Button>
           </div>
         </div>
       )}
+      {console.log("isSavingViewLoading", props?.isSavingViewLoading)}
       <Modal
         open={openSaveViewModal}
         title={isEditView ? "Edit view" : "Save view"}
@@ -1550,11 +1568,10 @@ export const Columns = forwardRef((props, ref) => {
                   View type
                 </span>
                 <RadioButtonGroup
-                  options={[
-                    { label: "Global", value: "global" },
-                    { label: "Personal", value: "personal" },
-                  ]}
-                  onChange={(event) => setSelectedViewType(event.target.value)}
+                  options={props?.saveViewCustomFilter?.options?.filter(
+                    (option) => !option?.notReqInSaveView
+                  )}
+                  onChange={(event) => setSelectedViewType(event?.target?.value)}
                   orientation={"row"}
                   selectedOption={selectedViewType}
                 />
@@ -1579,7 +1596,11 @@ export const Columns = forwardRef((props, ref) => {
                 selectedOptions={selectedSavedView}
                 setSelectedOptions={setSelectedSavedView}
                 withPortal
-                isDisabled={savedViewsOptions.length === 0 || inputValue !== ""}
+                isDisabled={
+                  savedViewsOptions.length === 0 ||
+                  inputValue !== "" ||
+                  isEditView
+                }
                 isOpen={isOpen}
                 setIsOpen={setIsOpen}
                 initialOptions={currentSaveViewOptions}
@@ -1589,9 +1610,18 @@ export const Columns = forwardRef((props, ref) => {
         </div>
       </Modal>
       <Prompt
-        handleClose={() => setOpenDeletePrompt(false)}
-        onPrimaryButtonClick={() => props?.handleDeleteViewClick?.(deleteView)}
-        onSecondaryButtonClick={() => setOpenDeletePrompt(false)}
+        handleClose={(e) => {
+          e.stopPropagation();
+          setOpenDeletePrompt(false);
+        }}
+        onPrimaryButtonClick={(e) => {
+          e.stopPropagation();
+          props?.handleDeleteViewClick?.(deleteView);
+        }}
+        onSecondaryButtonClick={(e) => {
+          e.stopPropagation();
+          setOpenDeletePrompt(false);
+        }}
         primaryButtonLabel="Yes,Delete"
         secondaryButtonLabel="Cancel"
         title="Delete, Are you sure?"

package/src/components/TableOld/tableHeader.js

@@ -41,13 +41,15 @@ export default function TableHeader({
   handleSavedViewClick,
   handleEditSaveView,
   isSaveViewEnabled,
-  isSaveViewLoading,
+  isSavingViewLoading,
   handleDeleteViewClick,
   isDeleteViewLoading,
   handleSetDefaultView,
   closeTableSettingOnOutsideClick,
   onTableSettingClick,
   deleteViewPromptText,
+  saveViewCustomFilter,
+  customRenderSaveViewContent,
   numericFormatDefault,
 }) {
   // manages displaying table setting
@@ -238,12 +240,14 @@ export default function TableHeader({
         handleSavedViewClick={handleSavedViewClick}
         handleEditSaveView={handleEditSaveView}
         isSaveViewEnabled={isSaveViewEnabled}
-        isSaveViewLoading={isSaveViewLoading}
+        isSavingViewLoading={isSavingViewLoading}
         handleDeleteViewClick={handleDeleteViewClick}
         isDeleteViewLoading={isDeleteViewLoading}
         handleSetDefaultView={handleSetDefaultView}
         onTableSettingClick={onTableSettingClick}
         deleteViewPromptText={deleteViewPromptText}
+        saveViewCustomFilter={saveViewCustomFilter}
+        customRenderSaveViewContent={customRenderSaveViewContent}
         numericFormatDefault={numericFormatDefault}
       />
     </div>