Lalith Create way to save a team code filter set frontend

src/App.css

@@ -18,6 +18,16 @@ button {
   background-color: #ffffff;
 }
 
+.Filter_Container .selected{
+  color: black;
+  border: 2px solid black;
+}
+.Filter_Container .btn-link{
+  height: 30px;
+  padding: 2px;
+  text-decoration: none;
+}
+
 .App {
   text-align: center;
 }

src/actions/weeklySummariesReport.js

@@ -104,4 +104,58 @@ export const toggleUserBio = (userId, bioPosted) => {
       throw error;
     }
   };
+}
+ /* Get Weekly summary reports filters api only visible for admin and owner
+ */
+
+export const postWeeklySummaryFilters = (req) => {
+  return async (dispatch) => {
+    const postWeeklySummaryApi = ENDPOINTS.POST_WEEKLY_SUMMARIES_REPORT_FILTERS();
+    console.log(postWeeklySummaryApi)
+    try {
+      const resp = await axios.post(postWeeklySummaryApi, req);
+      if (resp.status === 200) {
+        dispatch({
+          type: actions.POST_WEEKLY_SUMMARY_FILTERS,
+          data: resp.data,
+        });
+        dispatch(getUserWeeklySummaryFilters());
+
+      } else {
+        dispatch({
+          type: actions.POST_WEEKLY_SUMMARY_FILTERS, // Use a separate error type
+          data: "Unexpected response status",
+        });
+      }
+    } catch (error) {
+      dispatch({
+        type: actions.POST_WEEKLY_SUMMARY_FILTERS,
+        data: error.message || "Something went wrong",
+      });
+    }
+  };
+};
+
+export const getUserWeeklySummaryFilters = () => {
+  const url = ENDPOINTS.GET_USER_WEEKLY_SUMMARY_FILTER();
+  return async dispatch => {
+    try {
+      const resp = await axios.get(url);
+
+      if (resp.status === 200) {
+        dispatch({
+          type: actions.GET_USER_WEEKLY_SUMMARY_FILTER,
+          data: resp.data,
+        });
+        console.log("repeeeeee", resp)
+      } else {
+        throw new Error(`An error occurred while attempting to save the changes to the profile.`)
+      }
+    } catch (err) {
+      dispatch({
+        type: actions.GET_USER_WEEKLY_SUMMARY_FILTER,
+        data: [],
+      });
+    }
+  }
 };

src/components/PermissionsManagement/PermissionsConst.js

@@ -91,7 +91,7 @@ export const permissionLabels = [
           'Makes ONLY the "Reports" -> "Volunteer Summary Reports" option appear/accessible.',
       },
       {
-        label: 'Edit Team 4-Digit Codes',
+        label: 'Edit Team 4-Digit Codes & Save Filters',
         key: 'editTeamCode',
         description:
           'Gives the user permission to edit 4-digit team codes on profile page and weekly summaries report page.',

src/components/WeeklySummariesReport/WeeklySummariesReport.jsx

@@ -32,7 +32,11 @@ import EditableInfoModal from 'components/UserProfile/EditableModal/EditableInfo
 import { getAllUserTeams, getAllTeamCode } from '../../actions/allTeamsAction';
 import TeamChart from './TeamChart';
 import SkeletonLoading from '../common/SkeletonLoading';
-import { getWeeklySummariesReport } from '../../actions/weeklySummariesReport';
+import {
+  getWeeklySummariesReport,
+  postWeeklySummaryFilters,
+  getUserWeeklySummaryFilters,
+} from '../../actions/weeklySummariesReport';
 import FormattedReport from './FormattedReport';
 import GeneratePdfReport from './GeneratePdfReport';
 import hasPermission from '../../utils/permissions';
@@ -42,6 +46,11 @@ import PasswordInputModal from './PasswordInputModal';
 import WeeklySummaryRecipientsPopup from './WeeklySummaryRecepientsPopup';
 import SelectTeamPieChart from './SelectTeamPieChart';
 import { setTeamCodes } from '../../actions/teamCodes';
+import {
+  WeeklySummaryFilterActionButtons,
+  WeeklySummaryFilterModal,
+  WeeklySummaryFilterLinksList,
+} from './WeeklySummaryFiltersComp';
 
 import styles from './WeeklySummariesReport.module.scss';
 import { SlideToggle } from './components';
@@ -121,6 +130,7 @@ export class WeeklySummariesReport extends Component {
     // eslint-disable-next-line react/destructuring-assignment
     const summaries = res?.data ?? this.props.summaries;
     const badgeStatusCode = await fetchAllBadges();
+    this.props.getUserWeeklySummaryFilters();
     this.canPutUserProfileImportantInfo = hasPermission('putUserProfileImportantInfo');
     this.canRequestBio = hasPermission('requestBio');
     this.canEditSummaryCount = this.canPutUserProfileImportantInfo;
@@ -734,6 +744,28 @@ export class WeeklySummariesReport extends Component {
     }
   };
 
+  onClickFilterHandler = (index, data) => {
+    const savedFilters = this.props.savedWeeklySummaryFilters?.getFilters?.records || [];
+    for (let i = 0; i < savedFilters.length; i += 1) {
+      if (index === i) {
+        document.querySelector(`.filter-link_${index}`).classList.add('selected');
+      } else {
+        document.querySelector(`.filter-link_${i}`).classList.remove('selected');
+      }
+    }
+    this.setState(
+      {
+        selectedCodes: data.codes,
+        selectedColors: data.colors,
+        selectedBioStatus: data.filterByBioStatus,
+        selectedOverTime: data.filterByOverHours,
+        selectedFilterId: data._id,
+        filterNameForSummary: data.filterName,
+      },
+      () => this.filterWeeklySummaries(),
+    );
+  };
+
   render() {
     const { role, darkMode } = this.props;
     const {
@@ -758,8 +790,8 @@ export class WeeklySummariesReport extends Component {
       replaceCodeError,
       replaceCodeLoading,
     } = this.state;
-    const { error } = this.props;
-    const hasPermissionToFilter = role === 'Owner' || role === 'Administrator';
+    const { error, savedWeeklySummaryFilters } = this.props;
+    const hasPermissionToFilter = hasPermission('editTeamCode');
     const { authEmailWeeklySummaryRecipient } = this.props;
     const authorizedUser1 = '[email protected]';
     const authorizedUser2 = '[email protected]'; // To test please include your email here
@@ -834,6 +866,16 @@ export class WeeklySummariesReport extends Component {
             </Button>
           </Row>
         )}
+        <Row>
+          <Col lg={{ size: 10, offset: 1 }}>
+            <WeeklySummaryFilterLinksList
+              availableFilters={savedWeeklySummaryFilters?.getFilters?.records || []}
+              onClickHandler={(index, data) => {
+                this.onClickFilterHandler(index, data);
+              }}
+            />
+          </Col>
+        </Row>
         <Row>
           <Col lg={{ size: 5, offset: 1 }} md={{ size: 6 }} xs={{ size: 6 }}>
             <div className={styles.filterContainerTeamcode}>
@@ -893,7 +935,41 @@ export class WeeklySummariesReport extends Component {
           <Col lg={{ size: 10, offset: 1 }} xs={{ size: 8, offset: 4 }}>
             <div className={styles.filterContainer}>
               {hasPermissionToFilter && (
-                <div className={cn(styles.filterStyle, styles.filterMarginRight)}>
+                <WeeklySummaryFilterActionButtons
+                  selectedFilterId={this.state.selectedFilterId}
+                  selectedCodes={selectedCodes}
+                  onClickActionHandler={flow => {
+                    if (flow === 'update') {
+                      const obj = {
+                        codes: this.state.selectedCodes,
+                        colors: this.state.selectedColors,
+                        filterName: this.state.filterNameForSummary,
+                        filterByBioStatus: this.state.selectedBioStatus,
+                        filterByOverHours: this.state.selectedOverTime,
+                      };
+                      const req = {
+                        flow: 'Update',
+                        recordId: this.state.selectedFilterId,
+                        filters: obj,
+                      };
+                      this.props.postWeeklySummaryFilters(req);
+                    } else if (flow === 'Save') {
+                      this.setState({ showFilterModal: true });
+                    } else {
+                      const req = {
+                        flow: 'Delete',
+                        recordId: this.state.selectedFilterId,
+                        filters: {},
+                      };
+                      this.setState({ selectedCodes: [] }, () => {
+                        this.props.postWeeklySummaryFilters(req);
+                      });
+                    }
+                  }}
+                />
+              )}
+              {hasPermissionToFilter && (
+                <div className="filter-style margin-right">
                   <span>Filter by Special</span>
                   {['purple', 'green', 'navy'].map(color => (
                     <SlideToggle
@@ -1047,6 +1123,27 @@ export class WeeklySummariesReport extends Component {
                   </Row>
                 </WeeklySummariesReportTab>
               ))}
+              <WeeklySummaryFilterModal
+                showFilterModal={this.state.showFilterModal}
+                darkMode={darkMode}
+                inputChange={val => this.setState({ filterNameForSummary: val })}
+                modalClose={() => this.setState({ showFilterModal: false })}
+                boxStyleDark={boxStyleDark}
+                boxStyle={boxStyle}
+                onSaveFilter={() => {
+                  const obj = {
+                    codes: this.state.selectedCodes,
+                    colors: this.state.selectedColors,
+                    filterName: this.state.filterNameForSummary,
+                    filterByBioStatus: this.state.selectedBioStatus,
+                    filterByOverHours: this.state.selectedOverTime,
+                  };
+                  const req = { flow: 'Save', recordId: null, filters: obj };
+                  this.setState({ showFilterModal: false }, () => {
+                    this.props.postWeeklySummaryFilters(req);
+                  });
+                }}
+              />
             </TabContent>
           </Col>
         </Row>
@@ -1074,6 +1171,8 @@ const mapStateToProps = state => ({
   darkMode: state.theme.darkMode,
   teamCodes: state.teamCodes.teamCodes,
   authEmailWeeklySummaryRecipient: state.auth.user.email, // capturing the user email through Redux store - Sucheta
+  weeklySummaryFiltersSaved: state.weeklySummaries.weeklySummaryFiltersSaved,
+  savedWeeklySummaryFilters: state.weeklySummaries.savedWeeklySummaryFilters, // capturing the user email through Redux store - Sucheta
 });
 
 const mapDispatchToProps = dispatch => ({
@@ -1084,6 +1183,8 @@ const mapDispatchToProps = dispatch => ({
   getAllUserTeams: () => dispatch(getAllUserTeams()),
   getAllTeamCode: () => dispatch(getAllTeamCode()),
   setTeamCodes: teamCodes => dispatch(setTeamCodes(teamCodes)),
+  postWeeklySummaryFilters: request => dispatch(postWeeklySummaryFilters(request)),
+  getUserWeeklySummaryFilters: () => dispatch(getUserWeeklySummaryFilters()),
 });
 
 function WeeklySummariesReportTab({ tabId, hidden, children }) {

src/components/WeeklySummariesReport/WeeklySummaryFiltersComp.jsx

@@ -0,0 +1,98 @@
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+
+export function WeeklySummaryFilterModal(props) {
+  return (
+    <Modal isOpen={props.showFilterModal} className={props.darkMode ? 'text-light' : ''}>
+      <ModalHeader className={props.darkMode ? 'bg-space-cadet' : ''}>Add Filter Name</ModalHeader>
+      <ModalBody className={props.darkMode ? 'bg-yinmn-blue' : ''}>
+        <input
+          type="text"
+          className="filter-input"
+          id="filter-name-input"
+          placeholder="Enter filter name"
+          onChange={e => {
+            props.inputChange(e.target.value);
+          }}
+        />
+      </ModalBody>
+      <ModalFooter className={props.darkMode ? 'bg-space-cadet' : ''}>
+        <Button
+          onClick={() => {
+            props.modalClose();
+          }}
+          color="primary"
+          style={props.darkMode ? props.boxStyleDark : props.boxStyle}
+        >
+          Close
+        </Button>
+        <Button
+          onClick={() => {
+            props.onSaveFilter();
+          }}
+          color="secondary"
+        >
+          Save
+        </Button>
+      </ModalFooter>
+    </Modal>
+  );
+}
+
+export function WeeklySummaryFilterActionButtons(props) {
+  return (
+    <>
+      {props.selectedFilterId && props.selectedFilterId !== '' && props.selectedCodes.length > 0 && (
+        <button
+          type="button"
+          className="mr-2 btn btn-link"
+          onClick={() => {
+            props.onClickActionHandler('delete');
+          }}
+        >
+          Delete Filter
+        </button>
+      )}
+      {props.selectedFilterId && props.selectedFilterId !== '' && props.selectedCodes.length > 0 && (
+        <button
+          type="button"
+          className="mr-2 btn btn-link"
+          onClick={() => {
+            props.onClickActionHandler('update');
+          }}
+        >
+          Update Filter
+        </button>
+      )}
+      {props.selectedCodes && props.selectedCodes.length > 0 && (
+        <button
+          type="button"
+          className="mr-2 btn btn-link"
+          onClick={() => {
+            props.onClickActionHandler('Save');
+          }}
+        >
+          Save Filter
+        </button>
+      )}
+    </>
+  );
+}
+
+export function WeeklySummaryFilterLinksList(props) {
+  return (
+    <div className="Filter_Container">
+      {props.availableFilters?.length > 0 &&
+        props.availableFilters.map((data, index) => {
+          return (
+            <button
+              type="button"
+              className={`filter-link_${index} mb-2 mr-2 btn btn-link`}
+              onClick={() => props.onClickHandler(index, data)}
+            >
+              {data.filterName} &nbsp;
+            </button>
+          );
+        })}
+    </div>
+  );
+}

src/constants/weeklySummaries.js

@@ -1,3 +1,5 @@
 export const FETCH_WEEKLY_SUMMARIES_BEGIN = 'FETCH_WEEKLY_SUMMARIES_BEGIN';
 export const FETCH_WEEKLY_SUMMARIES_SUCCESS = 'FETCH_WEEKLY_SUMMARIES_SUCCESS';
 export const FETCH_WEEKLY_SUMMARIES_ERROR = 'FETCH_WEEKLY_SUMMARIES_ERROR';
+export const POST_WEEKLY_SUMMARY_FILTERS = 'POST_WEEKLY_SUMMARY_FILTERS';
+export const GET_USER_WEEKLY_SUMMARY_FILTER = 'GET_USER_WEEKLY_SUMMARY_FILTER';

src/constants/weeklySummariesReport.js

@@ -8,3 +8,5 @@ export const SAVE_WEEKLY_SUMMARIES_RECIPIENTS = 'SAVE_WEEKLY_SUMMARIES_RECIPIENT
 export const DELETE_WEEKLY_SUMMARIES_RECIPIENTS = 'DELETE_WEEKLY_SUMMARIES_RECIPIENTS';
 export const GET_SUMMARY_RECIPIENTS = 'GET_SUMMARY_RECIPIENTS';
 export const GET_SUMMARY_RECIPIENTS_ERROR = 'GET_SUMMARY_RECIPIENTS_ERROR';
+export const POST_WEEKLY_SUMMARY_FILTERS = 'POST_WEEKLY_SUMMARY_FILTERS';
+export const GET_USER_WEEKLY_SUMMARY_FILTER = 'GET_USER_WEEKLY_SUMMARY_FILTER';

src/reducers/weeklySummariesReducer.js

@@ -30,6 +30,20 @@ export const weeklySummariesReducer = (state = initialState, action) => {
         fetchError: action.payload.error,
       };
 
+    case actions.POST_WEEKLY_SUMMARY_FILTERS:
+      return {
+        ...state,
+        loading: false,
+        weeklySummaryFiltersSaved: action.data,
+      };
+
+    case actions.GET_USER_WEEKLY_SUMMARY_FILTER:
+      return {
+        ...state,
+        loading: false,
+        savedWeeklySummaryFilters: action.data,
+      };
+
     default:
       return state;
   }