From a234e8de592bd2504a85fa41854f4392d4670bbc Mon Sep 17 00:00:00 2001 From: Twinemukama Innocent <90179491+Twinemukama@users.noreply.github.com> Date: Wed, 17 Jul 2024 12:58:36 +0300 Subject: [PATCH] Fx model (#833) * Adding project details to the project summary section * Adding a little padding to the top section * fixing the padding of the project details' section * modified: package.json modified: src/components/Modal/Modal.css modified: yarn.lock * modified: src/components/Modal/Modal.css * modified: src/components/Modal/Modal.css * modified: src/components/Modal/Modal.css * modified: src/components/Modal/Modal.css * modified: src/components/Modal/Modal.css * modified: src/components/Modal/Modal.css * modified: src/components/Modal/Modal.css --------- Co-authored-by: mosesmulumba Co-authored-by: Rhodin Emmanuel Nagwere <63339234+rhodinemma@users.noreply.github.com> --- package.json | 2 +- src/components/Modal/Modal.css | 3 + .../ProjectSettingsPage.module.css | 55 ++++++- src/pages/ProjectSettingsPage/index.jsx | 136 ++++++++++-------- yarn.lock | 4 +- 5 files changed, 131 insertions(+), 69 deletions(-) diff --git a/package.json b/package.json index 8b384bfc1..f056c8e1e 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,7 @@ "react-dropzone": "^14.2.2", "react-redux": "^7.1.3", "react-router-dom": "^5.1.2", - "react-scripts": "^5.0.0", + "react-scripts": "^5.0.1", "react-test-renderer": "^16.2.0", "react-to-pdf": "^0.0.14", "recharts": "^1.8.5", diff --git a/src/components/Modal/Modal.css b/src/components/Modal/Modal.css index 51ec4e9a7..0717dea14 100644 --- a/src/components/Modal/Modal.css +++ b/src/components/Modal/Modal.css @@ -16,6 +16,9 @@ width: auto; min-height: 100px; height: auto; + max-height: 80%; + align-items: center; + justify-content: center; padding: 2rem; background: #fff; display: flex; diff --git a/src/pages/ProjectSettingsPage/ProjectSettingsPage.module.css b/src/pages/ProjectSettingsPage/ProjectSettingsPage.module.css index c164c7cbe..3b78b6939 100644 --- a/src/pages/ProjectSettingsPage/ProjectSettingsPage.module.css +++ b/src/pages/ProjectSettingsPage/ProjectSettingsPage.module.css @@ -165,6 +165,44 @@ flex-direction: column; gap: 0.4rem; } +.ProjectsDetailsInnerSection{ + display: grid; + grid-template-columns: 2fr 2fr 2fr ; + grid-template-rows: auto; + overflow-x: auto; + width: -webkit-fill-available; + padding-top: 1rem; +} + +.ProjectsDetailsInnerSection > :nth-child(1) { + display: grid; + justify-content: flex-start; + align-items: center; + padding-left: 1rem; +} + +.ProjectsDetailsInnerSection > :nth-child(2) { + display: grid; + justify-content: center; + align-items: center; +} + +.ProjectsDetailsInnerSection > :nth-child(3) { + display: grid; + justify-content: flex-end; + align-items: center; + /* text-align: end; */ + padding-right: 1rem; +} + +.ProjectsDetailsInnerSection > *:not(:last-child) { + border-right: 1px solid #979595; +} + +.InnerContentGrid div { + padding: 0 0 0.3rem 0; +} + .DeleteWarning { color: #f00; @@ -211,6 +249,7 @@ display: flex; flex-direction: column; gap: 0.3rem; + padding: 0.5rem; } .MemberDescription { @@ -218,7 +257,7 @@ } .ProjectInstructions { - padding: 1rem; + padding: 0.5rem; background: #ffffff; border-radius: 15px; border: 1px solid var(--gray-light-color); @@ -252,13 +291,9 @@ visibility: visible; } - - .SettingsSectionInfo { - display: flex; - flex-direction: column; - gap: 0.3rem; - font-size: 0.95rem; + font-size: 17px; + font-weight:400; } .SectionButtons { @@ -584,6 +619,12 @@ display: flex; gap: 1rem; } +.SectionSubTitle{ + font-size: 17px; + font-weight: 550; +} + + .SendButton, .BinButton { diff --git a/src/pages/ProjectSettingsPage/index.jsx b/src/pages/ProjectSettingsPage/index.jsx index 455637bf2..c52204669 100644 --- a/src/pages/ProjectSettingsPage/index.jsx +++ b/src/pages/ProjectSettingsPage/index.jsx @@ -17,7 +17,7 @@ import Feedback from "../../components/Feedback"; import DeleteWarning from "../../components/DeleteWarning"; import BlackInputText from "../../components/BlackInputText"; import styles from "./ProjectSettingsPage.module.css"; -import "./ProjectSettingsPage.module.css"; +// import "./ProjectSettingsPage.module.css"; import Select from "../../components/Select"; import { retrieveProjectTypes } from "../../helpers/projecttypes"; import { validateName } from "../../helpers/validation"; @@ -37,7 +37,7 @@ class ProjectSettingsPage extends React.Component { constructor(props) { super(props); const projectInfo = { ...JSON.parse(localStorage.getItem("project")) }; - const { name, description, organisation, project_type } = projectInfo; + const { name, description, organisation, project_type, age } = projectInfo; this.state = { openUpdateAlert: false, openRoleUpdateAlert: false, @@ -46,6 +46,7 @@ class ProjectSettingsPage extends React.Component { projectName: name ? name : "", projectID: this.props.match.params.projectID, projectDescription: description ? description : "", + projectAge: age ? age : "", error: "", updatingProjectDetails: false, nameChecked: false, @@ -124,7 +125,6 @@ class ProjectSettingsPage extends React.Component { this.handleEnableButtonClick = this.handleEnableButtonClick.bind(this); this.getProjectDetails = this.getProjectDetails.bind(this); this.disableProjectAlertFunc = this.disableProjectAlertFunc.bind(this); - } componentDidMount() { @@ -133,8 +133,9 @@ class ProjectSettingsPage extends React.Component { } disableProjectAlertFunc(disableBool) { - this.setState({ disableProjectAlert: disableBool, - disableProjectError: '' + this.setState({ + disableProjectAlert: disableBool, + disableProjectError: "", }); } @@ -505,9 +506,8 @@ class ProjectSettingsPage extends React.Component { handleEnableButtonClick = () => { let { projectDetails } = this.state; const { projectID } = this.props.match.params; - this.setState({disableProjectProgress:true}) + this.setState({ disableProjectProgress: true }); try { - if (projectDetails.disabled) { handlePostRequestWithOutDataObject({}, `/projects/${projectID}/enable`) .then(() => { @@ -515,7 +515,8 @@ class ProjectSettingsPage extends React.Component { }) .catch((error) => { this.setState({ - disableProjectError: 'Failed to complete this action. Please try again later', + disableProjectError: + "Failed to complete this action. Please try again later", }); }); } else { @@ -525,18 +526,20 @@ class ProjectSettingsPage extends React.Component { }) .catch((error) => { this.setState({ - disableProjectError: 'Failed to complete this action. Please try again later', - disableProjectProgress:false + disableProjectError: + "Failed to complete this action. Please try again later", + disableProjectProgress: false, }); }); } } catch (error) { //console.error("API call error:", error); this.setState({ - disableProjectError: 'Failed to complete this action. Please try again later', - disableProjectProgress:false + disableProjectError: + "Failed to complete this action. Please try again later", + disableProjectProgress: false, }); - } + } }; showUpdateAlert() { @@ -683,6 +686,7 @@ class ProjectSettingsPage extends React.Component { openRoleUpdateAlert, projectName, projectDescription, + projectAge, error, Confirmprojectname, disableDelete, @@ -691,8 +695,8 @@ class ProjectSettingsPage extends React.Component { othersBool, otherType, nameChecked, - idChecked, - descriptionChecked, + // idChecked, + // descriptionChecked, showInviteModel, email, role, @@ -714,7 +718,7 @@ class ProjectSettingsPage extends React.Component { deleteProjectError, disableProjectError, disableProjectAlert, - disableProjectProgress + disableProjectProgress, } = this.state; const types = retrieveProjectTypes(); const roles = retrieveMembershipRoles(); @@ -738,59 +742,74 @@ class ProjectSettingsPage extends React.Component { {isUpdated || isDeleted ? this.renderRedirect() : null}
Project Details
-
-
-
Project ID
-
-
-
{projectID}
+
+
+
+
Project Name
+
+
+
{projectName}
+
+
+ + {nameChecked ? : null} +
-
- - {idChecked ? : null} +
+
Project Description
+
+
+
{projectDescription}
+
+
-
-
-
Project Name
-
-
-
{projectName}
+
+
+ +
Organization
+
+
+
{projectOrganisation}
+
+
-
- - {nameChecked ? : null} +
+
Age
+
+
+
{projectAge}
+
+
-
-
-
Project Description
-
-
-
{projectDescription}
-
-
- - {descriptionChecked ? : null} +
+
+
Project Type
+
+
+
{projectType}
+
+
-
-
-
-
Project Status
-
-
-
- {this.state.projectDetails?.disabled === true ? ( - Disabled - ) : ( - "Enabled" - )} +
+
Status
+
+
+
+ {this.state.projectDetails?.disabled === true ? ( + Disabled + ) : ( + "Enabled" + )} +
+
-
Membership
+
Membership
{fetchingProjectMembers ? ( @@ -1293,7 +1312,6 @@ class ProjectSettingsPage extends React.Component {
)} - { diff --git a/yarn.lock b/yarn.lock index 6c3e3fb5e..4fffa748e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7952,9 +7952,9 @@ react-router@5.3.3: tiny-invariant "^1.0.2" tiny-warning "^1.0.0" -react-scripts@^5.0.0: +react-scripts@^5.0.1: version "5.0.1" - resolved "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz#6285dbd65a8ba6e49ca8d651ce30645a6d980003" + resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-5.0.1.tgz#6285dbd65a8ba6e49ca8d651ce30645a6d980003" integrity sha512-8VAmEm/ZAwQzJ+GOMLbBsTdDKOpuZh7RPs0UymvBR2vRk4iZWCskjbFnxqjrzoIvlNNRZ3QJFx6/qDSi6zSnaQ== dependencies: "@babel/core" "^7.16.0"