Merge pull request #548 from ita-social-projects/#476-update-the-way-…

…how-fields-are-shown-on-UI #476 update the way how fields are shown on UI
ita-social-projects · May 9, 2024 · 7bfc09d · 7bfc09d
2 parents ac5ea62 + 2e2c101
commit 7bfc09d
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 17 deletions.
diff --git a/FrontEnd/src/components/ProfileDetail/DetailedInfo/PhoneEmail.jsx b/FrontEnd/src/components/ProfileDetail/DetailedInfo/PhoneEmail.jsx
@@ -6,6 +6,9 @@ import { PropTypes } from 'prop-types';
 import classes from './PhoneEmail.module.css';
 import { CheckOutlined, CopyOutlined } from '@ant-design/icons';
 import { toast } from 'react-toastify';
+import { Tooltip } from 'antd';
+
+const LENGTH_EMAIL = 14;
 
 function PhoneEmail({ profileId, personId }) {
   const [isContactsShown, setContactsShown] = useState(false);
@@ -79,7 +82,13 @@ function PhoneEmail({ profileId, personId }) {
                }
               </p>
               <p className={classes['contact-container']}>
-                <span>{profileData.email}</span>
+               {profileData.email.length > LENGTH_EMAIL ? (
+                  <Tooltip title={profileData.email} placement="bottom">
+                    <span>{`${profileData.email.slice(0, LENGTH_EMAIL)}...`}</span>
+                  </Tooltip>
+                ) : (
+                  <span>{profileData.email}</span>
+                )}
                {
                 profileData.email ? <span onClick={() => copyContent('email')}>
                   {renderIcons(isEmailCopied)}

diff --git a/FrontEnd/src/components/ProfilePage/FormComponents/FormFields/HalfFormField.js b/FrontEnd/src/components/ProfilePage/FormComponents/FormFields/HalfFormField.js
@@ -1,8 +1,14 @@
 import { PropTypes } from 'prop-types';
 import preventEnterSubmit from '../../../../utils/preventEnterSubmit';
 import css from './HalfFormField.module.css';
+import { Tooltip } from 'antd';
+
+const LENGTH_EMAIL = 19;
 
 const HalfFormField = (props) => {
+    const shouldShowTooltip = props.name === 'email' && props.value.length > LENGTH_EMAIL;
+
+    const fieldValue = shouldShowTooltip ? `${props.value.slice(0, LENGTH_EMAIL)}...` : props.value;
 
     return (
         <div className={css['fields__column']}>
@@ -15,21 +21,23 @@ const HalfFormField = (props) => {
                 </label>
             </div>
             <div className={css['fields__field']}>
-                <input
-                    type={props.inputType ? props.inputType : 'text'}
-                    className={`${css['fields__field--input']} ${props.name === 'email' && css['disabled__field']}`}
-                    name={props.name}
-                    value={props.value}
-                    placeholder={props.fieldPlaceholder ? props.fieldPlaceholder : 'Введіть текст'}
-                    onBlur={props.onBlur}
-                    onKeyDown={preventEnterSubmit}
-                    onChange={props.updateHandler}
-                    required={(props.requredField) ? 'required' : ''}
-                    disabled={(props.name === 'email') ? 'disabled' : ''}
-                    maxLength={props.maxLength}
-                />
+                    <Tooltip title={shouldShowTooltip ? props.value : ''} placement="bottom">
+                        <input
+                            type={props.inputType || 'text'}
+                            className={`${css['fields__field--input']} ${props.name === 'email' && css['disabled__field']}`}
+                            name={props.name}
+                            value={fieldValue}
+                            placeholder={props.fieldPlaceholder || 'Введіть текст'}
+                            onBlur={props.onBlur}
+                            onKeyDown={preventEnterSubmit}
+                            onChange={props.updateHandler}
+                            required={props.requredField ? 'required' : ''}
+                            disabled={props.name === 'email' ? 'disabled' : ''}
+                            maxLength={props.maxLength}
+                        />
+                    </Tooltip>
             </div>
-            {(props.requiredField || props.error) && (
+            {(props.requredField || props.error) && (
                 <div className={css['error-message']}>
                     {Array.isArray(props.error) ? (
                         props.error.map((error, index) =>
@@ -62,4 +70,4 @@ HalfFormField.propTypes = {
         PropTypes.string,
         PropTypes.arrayOf(PropTypes.string),
       ]),
-  };
+  };
diff --git a/FrontEnd/src/components/ProfilePage/FormComponents/UserInfo.js b/FrontEnd/src/components/ProfilePage/FormComponents/UserInfo.js
@@ -216,4 +216,4 @@ const UserInfo = (props) => {
     );
 };
 
-export default UserInfo;
+export default UserInfo;
-Original file line number
+Diff line change
@@ Expand Up / @@ -216,4 +216,4 @@ const UserInfo = (props) => { @@
         );
     };
-    export default UserInfo;
+    export default UserInfo;