@visns-studio/visns-components 4.0.6 → 4.0.8

package/components/crm/Form.jsx

@@ -255,6 +255,14 @@ function Form({
         }
     };
 
+    const handleChangeSignature = (e) => {
+        if (e) {
+            e.preventDefault();
+        }
+
+        console.info(userProfile, 'aaa');
+    };
+
     const handleChangeToggle = (e) => {
         if (!e) {
             return;
@@ -1197,6 +1205,9 @@ function Form({
                                             handleChangeRicheditor
                                         }
                                         onChangeSelect={handleChangeSelect}
+                                        onChangeSignature={
+                                            handleChangeSignature
+                                        }
                                         onChangeToggle={handleChangeToggle}
                                         settings={item}
                                         setFormData={setFormData}
@@ -1318,6 +1329,9 @@ function Form({
                                             onChangeRicheditor={
                                                 handleChangeRicheditor
                                             }
+                                            onChangeSignature={
+                                                handleChangeSignature
+                                            }
                                             onChangeSelect={handleChangeSelect}
                                             onChangeToggle={handleChangeToggle}
                                             onFileDownload={handleFileDownload}

package/components/crm/TableFilter.jsx

@@ -138,7 +138,6 @@ function TableFilter({
                 </li>
             );
         } else {
-            console.info(d.class);
             return (
                 <li>
                     <a
@@ -161,7 +160,6 @@ function TableFilter({
                         >
                             {d.children.map((child, key) => (
                                 <li key={`table-filter-child-${d.id}-${key}`}>
-                                    {console.info(child.class)}
                                     <a
                                         className={childClass(child)}
                                         data-id={child.id}

package/components/crm/auth/Profile.jsx

@@ -1,19 +1,27 @@
-import React, { useState, useEffect } from 'react';
+// src/components/Profile.jsx
+
+import React, { useState, useEffect, useRef } from 'react';
 import PasswordStrengthBar from 'react-password-strength-bar';
 import { toast } from 'react-toastify';
+import SignaturePad from 'react-signature-pad-wrapper';
 import CustomFetch from '../Fetch';
 import TableFilter from '../TableFilter';
+import styles from './styles/Profile.module.css';
 
 const Profile = ({ userProfile, setUserProfile }) => {
+    const signatureRef = useRef(null);
     const [profile, setProfile] = useState({
         name: '',
         email: '',
         password: '',
+        password_confirmation: '',
     });
 
     const [inputClasses, setInputClasses] = useState({
         name: '',
         email: '',
+        password: '',
+        password_confirmation: '',
     });
 
     const [filters, setFilters] = useState([
@@ -25,13 +33,12 @@ const Profile = ({ userProfile, setUserProfile }) => {
         },
     ]);
 
-    useEffect(() => {
-        setProfile({
-            name: userProfile.name,
-            email: userProfile.email,
-            password: '',
-        });
-    }, [userProfile]);
+    const handleClearSignature = (e) => {
+        if (e) {
+            e.preventDefault();
+            signatureRef.current.clear();
+        }
+    };
 
     const handleChangeProfile = (e) => {
         const { name, value } = e.target;
@@ -50,32 +57,54 @@ const Profile = ({ userProfile, setUserProfile }) => {
             // Validate required fields
             if (profile.name.trim() === '' || profile.email.trim() === '') {
                 setInputClasses({
-                    name: profile.name.trim() === '' ? 'inputError' : '',
-                    email: profile.email.trim() === '' ? 'inputError' : '',
+                    name: profile.name.trim() === '' ? styles.inputError : '',
+                    email: profile.email.trim() === '' ? styles.inputError : '',
                 });
 
                 toast.error('Please fill in all the required fields.');
-            } else {
-                // Create a new payload object
-                let payload = {
-                    name: profile.name,
-                    email: profile.email,
-                };
-
-                // Conditionally add password to payload if it has a value
-                if (profile.password.trim() !== '') {
-                    payload.password = profile.password;
-                }
-
-                const res = await CustomFetch(
-                    `/ajax/users/${userProfile.id}`,
-                    'PUT',
-                    payload
-                );
-
-                setUserProfile(res.data.data);
-                toast.success('Your profile has been successfully updated.');
+                return;
+            }
+
+            // Validate password and confirmation
+            if (
+                profile.password &&
+                profile.password !== profile.password_confirmation
+            ) {
+                setInputClasses({
+                    ...inputClasses,
+                    password: styles.inputError,
+                    password_confirmation: styles.inputError,
+                });
+
+                toast.error('Passwords do not match.');
+                return;
+            }
+
+            // Create a new payload object
+            let payload = {
+                name: profile.name,
+                email: profile.email,
+            };
+
+            // Conditionally add password to payload if it has a value
+            if (profile.password.trim() !== '') {
+                payload.password = profile.password;
             }
+
+            payload.signature = signatureRef.current.toDataURL();
+
+            const res = await CustomFetch(
+                `/ajax/users/${userProfile.id}`,
+                'PUT',
+                payload
+            );
+
+            setUserProfile((prevState) => ({
+                ...prevState,
+                name: res.data.name,
+                signature: res.data.signature,
+            }));
+            toast.success('Your profile has been successfully updated.');
         } catch (err) {
             console.log(err);
         }
@@ -84,17 +113,17 @@ const Profile = ({ userProfile, setUserProfile }) => {
     const renderContent = (filter) => {
         if (filter.show && filter.id === 'overview') {
             return (
-                <div className="gridtxt" key={filter.id}>
-                    <div className="gridtxt__header">
+                <div className={styles.gridtxt} key={filter.id}>
+                    <div className={styles.gridtxt__header}>
                         <span>Overview</span>
                     </div>
-                    <div className="formcontainer">
+                    <div className={styles.formcontainer}>
                         <form
-                            className="modalForm"
+                            className={styles.modalForm}
                             onSubmit={handleSubmitProfile}
                         >
-                            <div className="formItem">
-                                <label className="fi__label">
+                            <div className={styles.formItem}>
+                                <label className={styles.fi__label}>
                                     <input
                                         type="text"
                                         name="name"
@@ -102,67 +131,140 @@ const Profile = ({ userProfile, setUserProfile }) => {
                                         className={inputClasses.name}
                                         value={profile.name}
                                     />
-                                    <span className="fi__span">Name *</span>
+                                    <span className={styles.fi__span}>
+                                        Name *
+                                    </span>
                                 </label>
                             </div>
-                            <div className="formItem">
-                                <label className="fi__label">
+                            <div className={styles.formItem}>
+                                <label className={styles.fi__label}>
                                     <input
                                         type="text"
                                         name="email"
-                                        onChange={handleChangeProfile}
+                                        readOnly
                                         className={inputClasses.email}
                                         value={profile.email}
                                     />
-                                    <span className="fi__span">Email *</span>
+                                    <span className={styles.fi__span}>
+                                        Email *
+                                    </span>
                                 </label>
                             </div>
-                            <div className="formItem">
-                                <label className="fi__label">
-                                    <span className="fi__span prefocus">
+                            <div className={styles.formItem}>
+                                <label className={styles.fi__label}>
+                                    <span
+                                        className={`${styles.fi__span} ${styles.prefocus}`}
+                                    >
                                         Password
                                     </span>
                                     <input
                                         type="password"
                                         name="password"
                                         onChange={handleChangeProfile}
+                                        value={profile.password}
+                                        className={inputClasses.password}
                                     />
                                     <PasswordStrengthBar
                                         password={profile.password}
                                     />
                                 </label>
                             </div>
-                            <div className="formItem fwItem lastItem">
-                                <button className="btn modalsave" type="submit">
-                                    Update
-                                </button>
+                            <div className={styles.formItem}>
+                                <label className={styles.fi__label}>
+                                    <span
+                                        className={`${styles.fi__span} ${styles.prefocus}`}
+                                    >
+                                        Password Confirmation
+                                    </span>
+                                    <input
+                                        type="password"
+                                        name="password_confirmation"
+                                        onChange={handleChangeProfile}
+                                        value={profile.password_confirmation}
+                                        className={
+                                            inputClasses.password_confirmation
+                                        }
+                                    />
+                                </label>
+                            </div>
+                            <div className={styles.formItem}>
+                                <label className={styles.fi__label}>
+                                    <SignaturePad
+                                        ref={signatureRef}
+                                        height={200}
+                                        options={{
+                                            penColor: 'black',
+                                        }}
+                                        redrawOnResize
+                                        canvasProps={{
+                                            style: {
+                                                border: '2px solid #ccc',
+                                                borderRadius: '10px',
+                                                padding: '10px',
+                                            },
+                                            className: styles.sigcanvas,
+                                        }}
+                                    />
+                                    <span className={styles.fi__span}>
+                                        Signature
+                                    </span>
+                                </label>
                             </div>
                         </form>
                     </div>
+
+                    <div className={styles.polActions}>
+                        <button
+                            className={styles.btn}
+                            onClick={handleSubmitProfile}
+                        >
+                            Save
+                        </button>
+                        <button
+                            className={styles.btn}
+                            onClick={handleClearSignature}
+                        >
+                            Clear
+                        </button>
+                    </div>
                 </div>
             );
         }
         return null;
     };
 
+    useEffect(() => {
+        setProfile((prevState) => ({
+            ...prevState,
+            name: userProfile.name,
+            email: userProfile.email,
+            password: '',
+            password_confirmation: '',
+        }));
+
+        if (userProfile.signature) {
+            signatureRef.current.fromDataURL(userProfile.signature);
+        }
+    }, [userProfile]);
+
     return (
         <div>
-            <div className="grid">
-                <div className="grid__row">
-                    <div className="grid__full crmtitle">
+            <div className={styles.grid}>
+                <div className={styles.grid__row}>
+                    <div className={`${styles.grid__full} ${styles.crmtitle}`}>
                         <h1>My Profile</h1>
                     </div>
                 </div>
             </div>
-            <div className="grid">
-                <div className="grid__subrow">
-                    <div className="grid__subnav">
+            <div className={styles.grid}>
+                <div className={styles.grid__subrow}>
+                    <div className={styles.grid__subnav}>
                         <TableFilter
                             filters={filters}
                             setFilters={setFilters}
                         />
                     </div>
-                    <div className="grid__subcontent">
+                    <div className={styles.grid__subcontent}>
                         {filters.map((filter) => (
                             <React.Fragment key={`filter-${filter.id}`}>
                                 {renderContent(filter)}

package/components/crm/auth/styles/Profile.module.css

@@ -0,0 +1,219 @@
+/* Profile.module.css */
+
+.grid {
+    width: 100%;
+    display: flex;
+    align-items: flex-start;
+    flex-wrap: nowrap;
+    height: auto;
+}
+
+.grid__row {
+    width: 100%;
+    display: flex;
+    align-items: flex-start;
+    flex-wrap: nowrap;
+    height: auto;
+}
+
+.grid__full {
+    width: 100%;
+    background: white;
+    border-radius: var(--br);
+    border: 1px solid var(--border-color);
+    box-sizing: border-box;
+    overflow: visible;
+    position: relative;
+    padding: 0;
+    margin: 5px;
+}
+
+.crmtitle {
+    border: none;
+    min-height: auto;
+    padding: 10px 20px;
+    margin: 5px;
+    background: var(--item-color);
+    border-radius: var(--br);
+    border: 1px solid var(--border-color);
+    position: relative;
+}
+
+.crmtitle h1 {
+    font-weight: 700;
+    font-size: 1.25em;
+    margin: 0;
+    padding: 0.25rem 0;
+    color: var(--paragraph-color);
+    text-transform: capitalize;
+}
+
+.grid__subrow {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    height: auto;
+}
+
+.grid__subnav {
+    flex: 1;
+    background: white;
+    border-radius: var(--br);
+    border: 1px solid var(--border-color);
+    box-sizing: border-box;
+    padding: 5px;
+    margin: 5px;
+    height: auto;
+}
+
+.grid__subcontent {
+    flex: 0 1 85%;
+    background: white;
+    border-radius: var(--br);
+    border: 1px solid var(--border-color);
+    box-sizing: border-box;
+    padding: 0;
+    margin: 5px;
+    height: auto;
+    position: relative;
+}
+
+.gridtxt__header {
+    width: 100%;
+    display: block;
+    background: var(--border-color);
+    box-sizing: border-box;
+    padding: 10px 20px;
+    border-top-left-radius: var(--br);
+    border-top-right-radius: var(--br);
+    margin-bottom: 0;
+    font-weight: 700;
+    text-align: center;
+    color: var(--paragraph-color);
+    position: relative;
+}
+
+.formcontainer {
+    width: 100%;
+}
+
+.modalForm {
+    width: 100%;
+    display: flex;
+    align-items: flex-start;
+    flex-wrap: wrap;
+}
+
+.formItem {
+    width: 50%;
+    padding: 0.35em;
+    position: relative;
+    box-sizing: border-box;
+}
+
+.fi__label {
+    position: relative;
+    display: block;
+}
+
+.fi__span {
+    position: absolute;
+    transition: all 200ms;
+    opacity: 0.8;
+    left: 0;
+    padding: 19px 20px;
+    transform-origin: top left;
+    cursor: text;
+}
+
+.prefocus {
+    transform: translateY(-40%) translateX(10px) scale(0.75);
+    opacity: 1;
+    padding: 0 4px;
+    background: var(--tertiary-color);
+    font-weight: 300;
+    border-radius: var(--br);
+    z-index: 500;
+}
+
+input[type='text'],
+input[type='password'] {
+    background: var(--item-color);
+    border-radius: var(--br);
+    border: 1px solid transparent;
+    padding: 1rem;
+    outline: none;
+    width: 100%;
+    box-sizing: border-box;
+    color: var(--paragraph-color);
+    transition: box-shadow 0.15s linear;
+}
+
+input[type='text']:hover,
+input[type='password']:hover {
+    border: 1px solid rgba(var(--highlight-color), 0.85);
+    transition: border 0.15s linear;
+}
+
+input[type='text']:focus,
+input[type='password']:focus {
+    border: 1px solid rgba(var(--highlight-color), 0.85);
+}
+
+input:not(:placeholder-shown) + .fi__span,
+textarea:not(:placeholder-shown) + .fi__span,
+select:not(:placeholder-shown) + .fi__span {
+    transform: translateY(-40%) translateX(10px) scale(0.75);
+    opacity: 1;
+    padding: 0 4px;
+    background: var(--tertiary-color);
+    font-weight: 300;
+    border-radius: var(--br);
+}
+
+.sigcanvas {
+    border: 2px solid #ccc;
+    border-radius: 10px;
+    padding: 10px;
+}
+
+.polActions {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    width: auto;
+}
+
+.polActions button {
+    display: block;
+    float: left;
+    padding: 0.65em 1em;
+    margin: 0 0.25em;
+}
+
+.btn {
+    width: max-content;
+    display: inline-block;
+    position: relative;
+    padding: 0.65rem 1rem;
+    cursor: pointer;
+    font-size: 1rem;
+    color: var(--secondary-color);
+    text-decoration: none;
+    overflow: hidden;
+    background: var(--primary-color);
+    border: 1px solid darken(var(--primary-color), 10%);
+    border-radius: var(--br);
+    outline: none;
+    transition: all 0.2s cubic-bezier(0.85, 0, 0.15, 1) 0s;
+}
+
+.btn:hover {
+    color: var(--tertiary-color);
+    background: var(--secondary-color);
+    border: 1px solid darken(var(--secondary-color), 10%);
+}
+
+.inputError {
+    border-color: red !important;
+}