changed group member form style
This commit is contained in:
victorAnumudu
@@ -20,11 +20,42 @@ export default function MemberList({groupList, selectedGroup, setUpdateList}) {
|
||||
|
||||
const handleFieldsChange = ({target:{name, value}}) => {
|
||||
setFields(prev => ({...prev, [name]:value}))
|
||||
let error = requestState?.errors?.indexOf(name) //// checks if the input field was in error array and removes it when the input changes
|
||||
if(error >= 0){
|
||||
let oldErrorArr = requestState.errors
|
||||
let newErrorArr = oldErrorArr.splice(error, 1)
|
||||
setRequestState(prev => ({...prev, errors:oldErrorArr}))
|
||||
// let error = requestState?.errors?.indexOf(name) //// checks if the input field was in error array and removes it when the input changes
|
||||
// if(error >= 0){
|
||||
// let oldErrorArr = requestState.errors
|
||||
// let newErrorArr = oldErrorArr.splice(error, 1)
|
||||
// setRequestState(prev => ({...prev, errors:oldErrorArr}))
|
||||
// }
|
||||
|
||||
if(value == ''){
|
||||
setRequestState({
|
||||
loading: false,
|
||||
status: false,
|
||||
message: '',
|
||||
data: [],
|
||||
errors: [name]
|
||||
})
|
||||
}else{
|
||||
let error = requestState?.errors?.indexOf(name) //// checks if the input field was in error array and removes it when the input changes
|
||||
if(error >= 0){
|
||||
let oldErrorArr = requestState.errors
|
||||
let newErrorArr = oldErrorArr.splice(error, 1)
|
||||
setRequestState(prev => ({...prev, errors:oldErrorArr}))
|
||||
}
|
||||
}
|
||||
|
||||
if(name == 'email'){
|
||||
//checks if email is a valid email address
|
||||
let regEx = /^[^0-9][a-zA-Z0-9._%+-]+@[a-zA-Z]+(\.[a-zA-Z]+)+$/;
|
||||
if (!EmailValidator(value)) {
|
||||
setRequestState({
|
||||
loading: false,
|
||||
status: false,
|
||||
message: '',
|
||||
data: [],
|
||||
errors: ['email']
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -33,26 +64,26 @@ export default function MemberList({groupList, selectedGroup, setUpdateList}) {
|
||||
status: false,
|
||||
message: '',
|
||||
data: [],
|
||||
errors: []
|
||||
errors: ['email', 'firstname', 'lastname']
|
||||
})
|
||||
|
||||
const addMember = () => {
|
||||
let errors = Object.keys(fields).filter((item) => { // CHECKS FOR EMPTY STRINGS
|
||||
if(typeof item == 'string' && fields[item] === ''){
|
||||
return item
|
||||
}
|
||||
})
|
||||
// let errors = Object.keys(fields).filter((item) => { // CHECKS FOR EMPTY STRINGS
|
||||
// if(typeof item == 'string' && fields[item] === ''){
|
||||
// return item
|
||||
// }
|
||||
// })
|
||||
|
||||
if(errors.length){
|
||||
setRequestState({
|
||||
loading: false,
|
||||
status: false,
|
||||
message: '',
|
||||
data: [],
|
||||
errors: [...errors]
|
||||
})
|
||||
return
|
||||
}
|
||||
// if(errors.length){
|
||||
// setRequestState({
|
||||
// loading: false,
|
||||
// status: false,
|
||||
// message: '',
|
||||
// data: [],
|
||||
// errors: [...errors]
|
||||
// })
|
||||
// return
|
||||
// }
|
||||
|
||||
//checks if email is a valid email address
|
||||
let regEx = /^[^0-9][a-zA-Z0-9._%+-]+@[a-zA-Z]+(\.[a-zA-Z]+)+$/;
|
||||
@@ -155,54 +186,61 @@ export default function MemberList({groupList, selectedGroup, setUpdateList}) {
|
||||
<>
|
||||
<h1 className='mb-5 text-lg lg:text-2xl tracking-wide font-bold text-slate-900 dark:text-slate-100'>{selectedGroup?.name}</h1>
|
||||
<div className='w-full flex flex-col-reverse lg:flex-col'>
|
||||
<div className='py-3 w-full sm:w-[500px] xl:w-full xxl:w-[500px]'>
|
||||
<div className='relative grid grid-cols-1 sm:grid-cols-2 gap-2'>
|
||||
<div className='h-10 relative'>
|
||||
<input
|
||||
id='firstname'
|
||||
name='firstname'
|
||||
// className={`peer px-5 w-full h-full rounded-full outline-none placeholder:text-transparent transition-all duration-500 text-black dark:text-black bg-gradient-to-br from-slate-50/80 via-slate-200/80 to-slate-100/80 focus:from-slate-100/80 focus:to-slate-50/80`}
|
||||
className={`peer px-5 w-full h-full rounded-full outline-none border placeholder:text-slate-600 transition-all duration-500 text-black dark:text-black bg-gradient-to-br from-slate-50/80 via-slate-200/80 to-slate-100/80 focus:from-slate-100/80 focus:to-slate-50/80 ${requestState.errors.includes('firstname') ? 'border-red-500' : 'border-transparent'}`}
|
||||
type='text'
|
||||
placeholder='First Name'
|
||||
value={fields.firstname}
|
||||
onChange={handleFieldsChange}
|
||||
<div className='py-3 w-full'>
|
||||
<div className='relative grid grid-cols-1 sm:grid-cols-2 gap-2 place-content-center'>
|
||||
<div className="input-item">
|
||||
<InputCom
|
||||
labelClass="tracking-wider"
|
||||
fieldClass="sm:px-6 px-2"
|
||||
value={fields.firstname}
|
||||
inputHandler={handleFieldsChange}
|
||||
placeholder="Your First Name"
|
||||
// label="Email"
|
||||
name="firstname"
|
||||
type="text"
|
||||
// iconName="message"
|
||||
/>
|
||||
{/* <label htmlFor='firstname' className={`text-sm text-black dark:text-slate-500 absolute left-5 -top-4 translate-y-0 peer-focus:-top-3 peer-focus:translate-y-0 peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 transition-all duration-500 ${requestState.errors.includes('firstname') ? 'text-red-500' : ''}`}>First Name</label> */}
|
||||
</div>
|
||||
<div className='h-10 relative'>
|
||||
<input
|
||||
id='lastname'
|
||||
name='lastname'
|
||||
// className={`peer px-5 w-full h-full rounded-full outline-none placeholder:text-transparent transition-all duration-500 text-black dark:text-black bg-gradient-to-br from-slate-50/80 via-slate-200/80 to-slate-100/80 focus:from-slate-100/80 focus:to-slate-50/80`}
|
||||
className={`peer px-5 w-full h-full rounded-full outline-none border placeholder:text-slate-600 transition-all duration-500 text-black dark:text-black bg-gradient-to-br from-slate-50/80 via-slate-200/80 to-slate-100/80 focus:from-slate-100/80 focus:to-slate-50/80 ${requestState.errors.includes('lastname') ? 'border-red-500' : 'border-transparent'}`}
|
||||
type='text'
|
||||
placeholder='Last Name'
|
||||
value={fields.lastname}
|
||||
onChange={handleFieldsChange}
|
||||
<div className="input-item">
|
||||
<InputCom
|
||||
labelClass="tracking-wider"
|
||||
fieldClass="sm:px-6 px-2"
|
||||
value={fields.lastname}
|
||||
inputHandler={handleFieldsChange}
|
||||
placeholder="Your Last Name"
|
||||
// label="Email"
|
||||
name="lastname"
|
||||
type="text"
|
||||
// iconName="message"
|
||||
/>
|
||||
{/* <label htmlFor='lastname' className={`text-sm text-black dark:text-slate-500 absolute left-5 -top-4 translate-y-0 peer-focus:-top-3 peer-focus:translate-y-0 peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 transition-all duration-500 ${requestState.errors.includes('lastname') ? 'text-red-500' : ''}`}>LastName</label> */}
|
||||
</div>
|
||||
<div className='h-10 relative'>
|
||||
<input
|
||||
id='email'
|
||||
name='email'
|
||||
// className={`peer px-5 w-full h-full rounded-full outline-none placeholder:text-transparent transition-all duration-500 text-black dark:text-black bg-gradient-to-br from-slate-50/80 via-slate-200/80 to-slate-100/80 focus:from-slate-100/80 focus:to-slate-50/80`}
|
||||
className={`peer px-5 w-full h-full rounded-full outline-none border placeholder:text-slate-600 transition-all duration-500 text-black dark:text-black bg-gradient-to-br from-slate-50/80 via-slate-200/80 to-slate-100/80 focus:from-slate-100/80 focus:to-slate-50/80 ${requestState.errors.includes('email') ? 'border-red-500' : 'border-transparent'}`}
|
||||
type='email'
|
||||
placeholder='Email'
|
||||
value={fields.email}
|
||||
onChange={handleFieldsChange}
|
||||
<div className="input-item w-full sm:w-[150%]">
|
||||
<InputCom
|
||||
labelClass="tracking-wider"
|
||||
fieldClass="sm:px-6 px-2"
|
||||
value={fields.email}
|
||||
inputHandler={handleFieldsChange}
|
||||
placeholder="Your Email"
|
||||
// label="Email"
|
||||
name="email"
|
||||
type="email"
|
||||
// iconName="message"
|
||||
/>
|
||||
{/* <label htmlFor='email' className={`text-sm text-black dark:text-slate-500 absolute left-5 -top-4 translate-y-0 peer-focus:-top-3 peer-focus:translate-y-0 peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 transition-all duration-500 ${requestState.errors.includes('email') ? 'text-red-500' : ''}`}>Email</label> */}
|
||||
</div>
|
||||
<div className='flex justify-end items-center'>
|
||||
<div className='flex justify-end items-end'>
|
||||
{requestState.loading ?
|
||||
<LoadingSpinner size='8' color='sky-blue' />
|
||||
:
|
||||
<button onClick={addMember} disabled={requestState.loading || requestState.status} className='py-2 px-4 flex justify-center items-center bg-sky-blue hover:bg-sky-600 text-base rounded-full text-white font-bold'>Add Member</button>
|
||||
<button
|
||||
onClick={addMember}
|
||||
disabled={requestState.loading || requestState.status || requestState.errors.length}
|
||||
className={`py-2 px-4 h-[42px] flex justify-center items-center text-base rounded-full text-white font-bold transition-all duration-500 ${requestState.loading || requestState.status || requestState.errors.length ? 'bg-sky-blue/50' : 'bg-sky-blue hover:bg-sky-600'} `}
|
||||
>
|
||||
Add Member
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
|
||||
{!requestState.loading && requestState.message &&
|
||||
<p className={`text-lg absolute -bottom-7 left-0 ${requestState.status ? 'text-green-500' : 'text-red-500'}`}>{requestState.message}</p>
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user