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 <mulumbamoses94gmail.com> Co-authored-by: Rhodin Emmanuel Nagwere <63339234+rhodinemma@users.noreply.github.com>
crane-cloud · Jul 17, 2024 · a234e8d · a234e8d
1 parent 085ea82
commit a234e8d
Show file tree

Hide file tree

Showing 5 changed files with 131 additions and 69 deletions.
diff --git 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
@@ -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
@@ -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,14 +249,15 @@
   display: flex;
   flex-direction: column;
   gap: 0.3rem;
+  padding: 0.5rem;
 }
 
 .MemberDescription {
   width: 30rem;
 }
 
 .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
@@ -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,17 +506,17 @@ 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(() => {
             window.location.reload();
           })
           .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 {
       <DashboardLayout name={name} header="Project Settings" short>
         {isUpdated || isDeleted ? this.renderRedirect() : null}
         <div className="SectionTitle">Project Details</div>
-        <div className={styles.ProjectInstructions}>
-          <div>
-            <div className="SectionSubTitle">Project ID</div>
-            <div className={styles.ProjectButtonRow}>
-              <div className={styles.SettingsSectionInfo}>
-                <div>{projectID}</div>
+        <div className={`${styles.ProjectInstructions}`}>
+          <div className={`${styles.ProjectsDetailsInnerSection}`}>
+            <div className={styles.InnerContentGrid}>
+              <div className={`${styles.SectionSubTitle}`}>Project Name</div>
+              <div className={styles.ProjectButtonRow}>
+                <div className={`${styles.SettingsSectionInfo}`}>
+                  <div>{projectName}</div>
+                </div>
+                <div className={styles.CopyIcon}>
+                  <CopyText onClick={this.nameOnClick} />
+                  {nameChecked ? <Checked /> : null}
+                </div>
               </div>
-              <div className={styles.CopyIcon}>
-                <CopyText onClick={this.projectIDOnClick} />
-                {idChecked ? <Checked /> : null}
+              <div>
+                <div className={`${styles.SectionSubTitle}`}>Project Description</div>
+                <div className={styles.ProjectButtonRow}>
+                  <div className={styles.SettingsSectionInfo}>
+                    <div>{projectDescription}</div>
+                  </div>
+                </div>
               </div>
             </div>
-          </div>
-          <div>
-            <div className="SectionSubTitle">Project Name</div>
-            <div className={styles.ProjectButtonRow}>
-              <div className={styles.SettingsSectionInfo}>
-                <div>{projectName}</div>
+            <div className={styles.InnerContentGrid}>
+              <div>
+
+              <div className={`${styles.SectionSubTitle}`}>Organization</div>
+                <div className={styles.ProjectButtonRow}>
+                  <div className={styles.SettingsSectionInfo}>
+                    <div>{projectOrganisation}</div>
+                  </div>
+                </div>
               </div>
-              <div className={styles.CopyIcon}>
-                <CopyText onClick={this.nameOnClick} />
-                {nameChecked ? <Checked /> : null}
+              <div>
+                <div className={`${styles.SectionSubTitle}`}>Age</div>
+                  <div className={styles.ProjectButtonRow}>
+                    <div className={styles.SettingsSectionInfo}>
+                      <div>{projectAge}</div>
+                    </div>
+                  </div>
               </div>
             </div>
-          </div>
-          <div>
-            <div className="SectionSubTitle">Project Description</div>
-            <div className={styles.ProjectButtonRow}>
-              <div className={styles.SettingsSectionInfo}>
-                <div>{projectDescription}</div>
-              </div>
-              <div className={styles.CopyIcon}>
-                <CopyText onClick={this.projectDescriptionOnClick} />
-                {descriptionChecked ? <Checked /> : null}
+            <div className={styles.InnerContentGrid}>
+              <div>
+                <div className={`${styles.SectionSubTitle}`}>Project Type</div>
+                <div className={styles.ProjectButtonRow}>
+                  <div className={styles.SettingsSectionInfo}>
+                    <div>{projectType}</div>
+                  </div>
+                </div>
               </div>
-            </div>
-          </div>
-          <div>
-            <div className="SectionSubTitle">Project Status</div>
-            <div className={styles.ProjectButtonRow}>
-              <div className={styles.SettingsSectionInfo}>
-                <div>
-                  {this.state.projectDetails?.disabled === true ? (
-                    <span style={{ color: "red" }}>Disabled</span>
-                  ) : (
-                    "Enabled"
-                  )}
+              <div>
+                <div className={`${styles.SectionSubTitle}`}>Status</div>
+                <div className={styles.ProjectButtonRow}>
+                  <div className={styles.SettingsSectionInfo}>
+                    <div>
+                      {this.state.projectDetails?.disabled === true ? (
+                        <span style={{ color: "red" }}>Disabled</span>
+                      ) : (
+                        "Enabled"
+                      )}
+                    </div>
+                  </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
-        <div className="SectionTitle">Membership</div>
+        <div className={`${styles.SectionSubTitle}`}>Membership</div>
         <div className={styles.ProjectInstructions}>
           {fetchingProjectMembers ? (
             <Spinner />
@@ -1293,7 +1312,6 @@ class ProjectSettingsPage extends React.Component {
             </Modal>
           </div>
         )}
-
 
         <Modal
           showModal={removeMemberModal}
@@ -1348,7 +1366,7 @@ class ProjectSettingsPage extends React.Component {
               item={{
                 name: projectName,
                 type: "project",
-                disabled: this.state.projectDetails?.disabled
+                disabled: this.state.projectDetails?.disabled,
               }}
               disableProgress={disableProjectProgress}
               handleDisableButtonClick={() => {

diff --git 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"