diff --git a/client/src/components/manageProjects/editProject.js b/client/src/components/manageProjects/editProject.js index ec576decb..561bcfa43 100644 --- a/client/src/components/manageProjects/editProject.js +++ b/client/src/components/manageProjects/editProject.js @@ -1,207 +1,237 @@ -import React, { useState } from 'react'; +import React from 'react'; import '../../sass/ManageProjects.scss'; import EditableField from './editableField'; -import { REACT_APP_CUSTOM_REQUEST_HEADER } from "../../utils/globalSettings"; +import { REACT_APP_CUSTOM_REQUEST_HEADER } from '../../utils/globalSettings'; +// Need to hold user state to check which type of user they are and conditionally render editing fields in this component +//for user level block access to all except for the ones checked -const EditProjectInfo = ( props ) => { - +const EditProject = (props) => { const headerToSend = REACT_APP_CUSTOM_REQUEST_HEADER; //const [currentProjectData, setCurrentProjectData] = useState(props.projectToEdit); const updateProject = async (projectId, fieldName, fieldValue) => { - // These field are arrays, but the form makes them comma separated strings, so this adds it back to db as an arrray. - if (fieldName === 'partners' || fieldName === 'recruitingCategories') { + if (fieldName === 'partners' || fieldName === 'recruitingCategories') { if (!Array.isArray(fieldValue)) { fieldValue = fieldValue - .split(',') - .filter(x => x !== "") - .map(y => y.trim()); + .split(',') + .filter((x) => x !== '') + .map((y) => y.trim()); } } - + // Update database const url = `/api/projects/${projectId}`; const requestOptions = { - method: 'PATCH', - headers: { - "Content-Type": "application/json", - "x-customrequired-header": headerToSend - }, - body: JSON.stringify({ [fieldName]: fieldValue }) + method: 'PATCH', + headers: { + 'Content-Type': 'application/json', + 'x-customrequired-header': headerToSend, + }, + body: JSON.stringify({ [fieldName]: fieldValue }), }; try { - const response = await fetch(url, requestOptions); - const resJson = await response.json(); + const response = await fetch(url, requestOptions); + const resJson = await response.json(); - return resJson; + return resJson; } catch (error) { - console.log(`update user error: `, error); - alert("Server not responding. Please try again."); + console.log(`update user error: `, error); + alert('Server not responding. Please try again.'); } }; - // Add commas to arrays for display - const partnerDataFormatted = props.projectToEdit.partners.join(", "); - const recrutingDataFormatted = props.projectToEdit.recruitingCategories.join(", "); - + const partnerDataFormatted = props.projectToEdit.partners.join(', '); + const recrutingDataFormatted = + props.projectToEdit.recruitingCategories.join(', '); return (
-
Project: {props.projectToEdit.name}
+
+ Project: {props.projectToEdit.name} +
-
-
-
- -
+
-
-
-
-
-
-
-
- -
+
- -
- - -
+ + +
+ +
); }; -export default EditProjectInfo; +export default EditProject; diff --git a/client/src/components/manageProjects/editableField.js b/client/src/components/manageProjects/editableField.js index 9bcd051e5..2395169b8 100644 --- a/client/src/components/manageProjects/editableField.js +++ b/client/src/components/manageProjects/editableField.js @@ -1,72 +1,117 @@ import React, { useState, useRef, useEffect } from 'react'; import '../../sass/ManageProjects.scss'; - - -const EditableField = ( - { projId, fieldData, fieldName, updateProject, renderUpdatedProj, fieldType, fieldTitle } -) => { +const EditableField = ({ + projId, + fieldData, + fieldName, + updateProject, + renderUpdatedProj, + fieldType, + fieldTitle, + accessLevel, + canEdit, +}) => { const [fieldValue, setFieldValue] = useState(fieldData); const [editable, setEditable] = useState(false); - const ref = useRef(); + const [notRestricted, setNotRestricted] = useState(false); + const ref = useRef(); + + // create function that checks the user has access to edit all fields + + const checkUser = () => { + const permitted = canEdit.includes(accessLevel); + setNotRestricted(permitted); + }; // Update the displayed results to match the change just made to the db - useEffect(() => { + useEffect(() => { + checkUser(); if (editable) { ref.current.focus(); setFieldValue(fieldData); - } - },[editable]); + } + }, [editable]); return ( + // here goes the conditional rendering + // this button will be disabled if user !admin
-
{fieldTitle} setEditable(true)} > [edit]
- {editable ? - - (fieldType === "textarea") ? +
+ {fieldTitle} + {notRestricted ? ( + { + setEditable(true); + }} + > + {' '} + [edit] + + ) : ( + + {' '} + + [Contact your team lead to make changes to this field] + + + )} +
+ + {editable ? ( + fieldType === 'textarea' ? ( + ) : ( + { + updateProject(projId, fieldName, fieldValue).then((proj) => { + renderUpdatedProj(proj); + setEditable(false); + }); }} - onChange={e=>{ - setFieldValue(e.target.value) + onChange={(e) => { + setFieldValue(e.target.value); const input = e.target; const onEnterKey = (e) => { if (e.keyCode === 13) { - input.removeEventListener('keydown', onEnterKey) + input.removeEventListener('keydown', onEnterKey); input.blur(); } - } - input.addEventListener('keydown', onEnterKey) + }; + input.addEventListener('keydown', onEnterKey); }} - >{fieldValue} - : - { - updateProject(projId, fieldName, fieldValue) - .then(proj => {renderUpdatedProj(proj); setEditable(false)}) - }} - onChange={e=>{ - setFieldValue(e.target.value) - const input = e.target; - const onEnterKey = (e) => { - if (e.keyCode === 13) { - input.removeEventListener('keydown', onEnterKey) - input.blur(); - } - } - input.addEventListener('keydown', onEnterKey) - }} - /> - :
{fieldData}
- } + /> + ) + ) : ( +
{fieldData}
+ )}
); }; diff --git a/client/src/pages/ManageProjects.js b/client/src/pages/ManageProjects.js index 0e9f636a7..88a874b96 100644 --- a/client/src/pages/ManageProjects.js +++ b/client/src/pages/ManageProjects.js @@ -2,19 +2,18 @@ import React, { useState, useEffect } from 'react'; import { Redirect } from 'react-router-dom'; import '../sass/ManageProjects.scss'; import useAuth from '../hooks/useAuth'; -import { REACT_APP_CUSTOM_REQUEST_HEADER } from "../utils/globalSettings"; +import { REACT_APP_CUSTOM_REQUEST_HEADER } from '../utils/globalSettings'; import SelectProject from '../components/manageProjects/selectProject.js'; -import EditProjectInfo from '../components/manageProjects/editProject.js'; +import EditProject from '../components/manageProjects/editProject.js'; const ManageProjects = () => { - const headerToSend = REACT_APP_CUSTOM_REQUEST_HEADER; const [auth] = useAuth(); const [projects, setProjects] = useState([]); const [projectToEdit, setProjectToEdit] = useState([]); const [recurringEvents, setRecurringEvents] = useState([]); - const [componentToDisplay, setComponentToDisplay] = useState (''); // displayProjectInfo, editMeetingTime or editProjectInfor + const [componentToDisplay, setComponentToDisplay] = useState(''); // displayProjectInfo, editMeetingTime or editProjectInfor const user = auth?.user; // Fetch projects from db @@ -33,21 +32,21 @@ const ManageProjects = () => { } } - // Fetch recurringEvents - async function fetchRecurringEvents() { - try { - const res = await fetch('/api/recurringEvents/', { - headers: { - 'x-customrequired-header': headerToSend, - }, - }); - const resJson = await res.json(); - setRecurringEvents(resJson); - } catch (error) { - console.log(`fetchProjects error: ${error}`); - alert('Server not responding. Please refresh the page.'); - } + // Fetch recurringEvents + async function fetchRecurringEvents() { + try { + const res = await fetch('/api/recurringEvents/', { + headers: { + 'x-customrequired-header': headerToSend, + }, + }); + const resJson = await res.json(); + setRecurringEvents(resJson); + } catch (error) { + console.log(`fetchProjects error: ${error}`); + alert('Server not responding. Please refresh the page.'); } + } useEffect(() => { fetchProjects(); @@ -70,15 +69,14 @@ const ManageProjects = () => { return ; } - const projectSelectClickHandler = project => event => { + const projectSelectClickHandler = (project) => (event) => { setProjectToEdit(project); setComponentToDisplay('editProjectInfo'); }; const goSelectProject = () => { setComponentToDisplay('selectProject'); -} - + }; switch (componentToDisplay) { case 'editMeetingTime': @@ -86,21 +84,22 @@ const ManageProjects = () => { break; case 'editProjectInfo': return ( - ); break; default: return ( - ); } diff --git a/team-lead-contact-info.md b/team-lead-contact-info.md new file mode 100644 index 000000000..cef9148f0 --- /dev/null +++ b/team-lead-contact-info.md @@ -0,0 +1,11 @@ +## Team Lead Contact Sheet + +### Please find your team lead's email from the table below to request the desired changes. + +| Team Lead | Email | +| :-------: | :---: | +| | | +| | | +| | | +| | | +| | |