added third
This commit was merged in pull request #549.
This commit is contained in:
@@ -1,69 +1,93 @@
|
||||
import React, { useState } from 'react'
|
||||
import React, { useState } from "react";
|
||||
|
||||
import ModalCom from '../Helpers/ModalCom'
|
||||
import LoadingSpinner from '../Spinners/LoadingSpinner'
|
||||
import InputCom from '../Helpers/Inputs/InputCom/index'
|
||||
import ModalCom from "../Helpers/ModalCom";
|
||||
import LoadingSpinner from "../Spinners/LoadingSpinner";
|
||||
import InputCom from "../Helpers/Inputs/InputCom/index";
|
||||
|
||||
import usersService from '../../services/UsersService'
|
||||
import usersService from "../../services/UsersService";
|
||||
import { apiConst } from "../../lib/apiConst";
|
||||
|
||||
export default function AddGroup({action, situation , setUpdateList}) {
|
||||
export default function AddGroup({ action, situation, setUpdateList }) {
|
||||
const api = new usersService();
|
||||
|
||||
const api = new usersService()
|
||||
const [name, setName] = useState("");
|
||||
|
||||
const [name, setName] = useState('')
|
||||
const handleChange = ({ target: { name, value } }) => {
|
||||
setName(value);
|
||||
};
|
||||
|
||||
const handleChange = ({target:{name, value}}) =>{
|
||||
setName(value)
|
||||
}
|
||||
let [requestStatus, setRequestStatus] = useState({
|
||||
loading: false,
|
||||
status: false,
|
||||
message: "",
|
||||
}); // STATE FOR KNOWING WHEN A REQUEST IS MADE TO THE SERVER
|
||||
|
||||
let [requestStatus, setRequestStatus] = useState({
|
||||
const addGroup = () => {
|
||||
setRequestStatus({ loading: true, status: false, message: "" });
|
||||
if (name == "") {
|
||||
setRequestStatus({
|
||||
loading: false,
|
||||
status: false,
|
||||
message: "",
|
||||
}); // STATE FOR KNOWING WHEN A REQUEST IS MADE TO THE SERVER
|
||||
|
||||
const addGroup = () => {
|
||||
setRequestStatus({loading:true, status:false, message:''})
|
||||
if(name == ''){
|
||||
setRequestStatus({loading:false, status:false, message:'Please enter a group name'})
|
||||
return setTimeout(()=>{
|
||||
setRequestStatus({loading:false, status:false, message:''})
|
||||
},3000)
|
||||
}
|
||||
if(name.length < 6){
|
||||
setRequestStatus({loading:false, status:false, message:'Group name must be up to six characters'})
|
||||
return setTimeout(()=>{
|
||||
setRequestStatus({loading:false, status:false, message:''})
|
||||
},3000)
|
||||
}
|
||||
api.jobGroupAdd({group_name:name, action:13025}).then(response => {
|
||||
let {status, data} = response
|
||||
if(status != 200 || data.internal_return < 0){
|
||||
setRequestStatus({loading:false, status:false, message:'Unable to add Group'})
|
||||
return
|
||||
}
|
||||
setRequestStatus({loading:false, status:true, message:'Group Added'})
|
||||
setTimeout(()=>{
|
||||
setRequestStatus({loading:false, status:false, message:''})
|
||||
// close modal
|
||||
action()
|
||||
// reload group page
|
||||
setUpdateList(prev => !prev)
|
||||
},3000)
|
||||
}).catch(error => {
|
||||
setRequestStatus({loading:false, status:false, message:'Unable to add Group, try again later'})
|
||||
}).finally(()=>{
|
||||
setTimeout(()=>{
|
||||
setRequestStatus({loading:false, status:false, message:''})
|
||||
},3000)
|
||||
})
|
||||
message: "Please enter a group name",
|
||||
});
|
||||
return setTimeout(() => {
|
||||
setRequestStatus({ loading: false, status: false, message: "" });
|
||||
}, 3000);
|
||||
}
|
||||
if (name.length < 6) {
|
||||
setRequestStatus({
|
||||
loading: false,
|
||||
status: false,
|
||||
message: "Group name must be up to six characters",
|
||||
});
|
||||
return setTimeout(() => {
|
||||
setRequestStatus({ loading: false, status: false, message: "" });
|
||||
}, 3000);
|
||||
}
|
||||
api
|
||||
.jobGroupAdd({
|
||||
group_name: name,
|
||||
action: apiConst.WRENCHBOARD_JOB_OFFER_SYSTEM,
|
||||
})
|
||||
.then((response) => {
|
||||
let { status, data } = response;
|
||||
if (status != 200 || data.internal_return < 0) {
|
||||
setRequestStatus({
|
||||
loading: false,
|
||||
status: false,
|
||||
message: "Unable to add Group",
|
||||
});
|
||||
return;
|
||||
}
|
||||
setRequestStatus({
|
||||
loading: false,
|
||||
status: true,
|
||||
message: "Group Added",
|
||||
});
|
||||
setTimeout(() => {
|
||||
setRequestStatus({ loading: false, status: false, message: "" });
|
||||
// close modal
|
||||
action();
|
||||
// reload group page
|
||||
setUpdateList((prev) => !prev);
|
||||
}, 3000);
|
||||
})
|
||||
.catch((error) => {
|
||||
setRequestStatus({
|
||||
loading: false,
|
||||
status: false,
|
||||
message: "Unable to add Group, try again later",
|
||||
});
|
||||
})
|
||||
.finally(() => {
|
||||
setTimeout(() => {
|
||||
setRequestStatus({ loading: false, status: false, message: "" });
|
||||
}, 3000);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<ModalCom
|
||||
action={action}
|
||||
situation={situation}
|
||||
>
|
||||
<ModalCom action={action} situation={situation}>
|
||||
<div className="logout-modal-wrapper lg:w-[500px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
|
||||
<div className="logout-modal-header w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] border-b border-light-purple dark:border-[#5356fb29] ">
|
||||
<h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
|
||||
@@ -98,7 +122,7 @@ export default function AddGroup({action, situation , setUpdateList}) {
|
||||
<div className="logout-modal-body w-full flex flex-col items-center px-10 py-8">
|
||||
<div className="mb-6 w-full">
|
||||
<div className="input-item">
|
||||
<InputCom
|
||||
<InputCom
|
||||
labelClass="tracking-wider"
|
||||
fieldClass="sm:px-6 px-2"
|
||||
value={name}
|
||||
@@ -108,7 +132,7 @@ export default function AddGroup({action, situation , setUpdateList}) {
|
||||
type="text"
|
||||
inputHandler={handleChange}
|
||||
// iconName="message"
|
||||
/>
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full flex justify-between items-center gap-4">
|
||||
@@ -117,7 +141,9 @@ export default function AddGroup({action, situation , setUpdateList}) {
|
||||
type="button"
|
||||
className="text-base text-light-red tracking-wide "
|
||||
>
|
||||
<span className="border-b dark:border-[#5356fb29] border-light-red">Cancel</span>
|
||||
<span className="border-b dark:border-[#5356fb29] border-light-red">
|
||||
Cancel
|
||||
</span>
|
||||
</button>
|
||||
{requestStatus.loading ? (
|
||||
<LoadingSpinner size="8" color="sky-blue" />
|
||||
@@ -153,5 +179,5 @@ export default function AddGroup({action, situation , setUpdateList}) {
|
||||
</div>
|
||||
</div>
|
||||
</ModalCom>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,262 +1,295 @@
|
||||
import React, { useState } from 'react'
|
||||
import React, { useState } from "react";
|
||||
|
||||
import InputCom from '../../components/Helpers/Inputs/InputCom/index'
|
||||
import LoadingSpinner from '../Spinners/LoadingSpinner'
|
||||
import GroupMemberTable from './GroupMemberTable'
|
||||
import InputCom from "../../components/Helpers/Inputs/InputCom/index";
|
||||
import LoadingSpinner from "../Spinners/LoadingSpinner";
|
||||
import GroupMemberTable from "./GroupMemberTable";
|
||||
|
||||
import EmailValidator from '../../lib/EmailValidator'
|
||||
import EmailValidator from "../../lib/EmailValidator";
|
||||
|
||||
import usersService from '../../services/UsersService'
|
||||
import usersService from "../../services/UsersService";
|
||||
import { apiConst } from "../../lib/apiConst";
|
||||
|
||||
export default function MemberList({groupList, selectedGroup, setUpdateList}) {
|
||||
export default function MemberList({
|
||||
groupList,
|
||||
selectedGroup,
|
||||
setUpdateList,
|
||||
}) {
|
||||
const api = new usersService();
|
||||
|
||||
const api = new usersService()
|
||||
const [fields, setFields] = useState({
|
||||
firstname: "",
|
||||
lastname: "",
|
||||
email: "",
|
||||
});
|
||||
|
||||
const [fields, setFields] = useState({
|
||||
firstname: '',
|
||||
lastname: '',
|
||||
email: ''
|
||||
})
|
||||
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}))
|
||||
// }
|
||||
|
||||
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}))
|
||||
// }
|
||||
|
||||
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']
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const [requestState, setRequestState] = useState({
|
||||
if (value == "") {
|
||||
setRequestState({
|
||||
loading: false,
|
||||
status: false,
|
||||
message: '',
|
||||
message: "",
|
||||
data: [],
|
||||
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
|
||||
// }
|
||||
// })
|
||||
|
||||
// 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]+)+$/;
|
||||
if (!EmailValidator(fields.email)) {
|
||||
setRequestState({
|
||||
loading: false,
|
||||
status: false,
|
||||
message: 'Email is invalid',
|
||||
data: [],
|
||||
errors: []
|
||||
})
|
||||
return setTimeout(()=>{
|
||||
setRequestState({
|
||||
loading: false,
|
||||
status: false,
|
||||
message: '',
|
||||
data: [],
|
||||
errors: []
|
||||
})
|
||||
},3000)
|
||||
}
|
||||
|
||||
setRequestState({
|
||||
loading: true,
|
||||
status: false,
|
||||
message: '',
|
||||
data: [],
|
||||
errors: []
|
||||
})
|
||||
const requestData = {
|
||||
firstname:fields.firstname,lastname:fields.lastname, email:fields.email, group_id: selectedGroup?.id, action:13015
|
||||
}
|
||||
|
||||
api.groupMemberAdd(requestData).then(response => {
|
||||
let {status, data} = response
|
||||
if(status != 200 || data?.internal_return < 0){
|
||||
setRequestState({
|
||||
loading: false,
|
||||
status: false,
|
||||
message: 'Unable to add member',
|
||||
data: [],
|
||||
errors: []
|
||||
})
|
||||
return
|
||||
}
|
||||
setRequestState({
|
||||
loading: false,
|
||||
status: true,
|
||||
message: 'Member added',
|
||||
data: [],
|
||||
errors: []
|
||||
})
|
||||
|
||||
setTimeout(()=>{
|
||||
// trigger group page reload
|
||||
setUpdateList(prev => !prev)
|
||||
setRequestState({
|
||||
loading: false,
|
||||
status: false,
|
||||
message: '',
|
||||
data: [],
|
||||
errors: []
|
||||
})
|
||||
}, 3000)
|
||||
|
||||
}).catch(error=>{
|
||||
setRequestState({
|
||||
loading: false,
|
||||
status: false,
|
||||
message: 'Something went wrong, try again',
|
||||
data: [],
|
||||
errors: []
|
||||
})
|
||||
}).finally(()=>{
|
||||
setTimeout(()=>{
|
||||
setRequestState({
|
||||
loading: false,
|
||||
status: false,
|
||||
message: '',
|
||||
data: [],
|
||||
errors: []
|
||||
})
|
||||
setFields({
|
||||
firstname: '',
|
||||
lastname: '',
|
||||
email: ''
|
||||
})
|
||||
}, 3000)
|
||||
})
|
||||
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"],
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const [requestState, setRequestState] = useState({
|
||||
loading: false,
|
||||
status: false,
|
||||
message: "",
|
||||
data: [],
|
||||
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
|
||||
// }
|
||||
// })
|
||||
|
||||
// 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]+)+$/;
|
||||
if (!EmailValidator(fields.email)) {
|
||||
setRequestState({
|
||||
loading: false,
|
||||
status: false,
|
||||
message: "Email is invalid",
|
||||
data: [],
|
||||
errors: [],
|
||||
});
|
||||
return setTimeout(() => {
|
||||
setRequestState({
|
||||
loading: false,
|
||||
status: false,
|
||||
message: "",
|
||||
data: [],
|
||||
errors: [],
|
||||
});
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
setRequestState({
|
||||
loading: true,
|
||||
status: false,
|
||||
message: "",
|
||||
data: [],
|
||||
errors: [],
|
||||
});
|
||||
const requestData = {
|
||||
firstname: fields.firstname,
|
||||
lastname: fields.lastname,
|
||||
email: fields.email,
|
||||
group_id: selectedGroup?.id,
|
||||
action: apiConst.WRENCHBOARD_JOB_GROUP_MEMBER,
|
||||
};
|
||||
|
||||
api
|
||||
.groupMemberAdd(requestData)
|
||||
.then((response) => {
|
||||
let { status, data } = response;
|
||||
if (status != 200 || data?.internal_return < 0) {
|
||||
setRequestState({
|
||||
loading: false,
|
||||
status: false,
|
||||
message: "Unable to add member",
|
||||
data: [],
|
||||
errors: [],
|
||||
});
|
||||
return;
|
||||
}
|
||||
setRequestState({
|
||||
loading: false,
|
||||
status: true,
|
||||
message: "Member added",
|
||||
data: [],
|
||||
errors: [],
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
// trigger group page reload
|
||||
setUpdateList((prev) => !prev);
|
||||
setRequestState({
|
||||
loading: false,
|
||||
status: false,
|
||||
message: "",
|
||||
data: [],
|
||||
errors: [],
|
||||
});
|
||||
}, 3000);
|
||||
})
|
||||
.catch((error) => {
|
||||
setRequestState({
|
||||
loading: false,
|
||||
status: false,
|
||||
message: "Something went wrong, try again",
|
||||
data: [],
|
||||
errors: [],
|
||||
});
|
||||
})
|
||||
.finally(() => {
|
||||
setTimeout(() => {
|
||||
setRequestState({
|
||||
loading: false,
|
||||
status: false,
|
||||
message: "",
|
||||
data: [],
|
||||
errors: [],
|
||||
});
|
||||
setFields({
|
||||
firstname: "",
|
||||
lastname: "",
|
||||
email: "",
|
||||
});
|
||||
}, 3000);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className='p-5 w-full min-h-[600px] overflow-y-auto'>
|
||||
{groupList && groupList.length < 1 ?
|
||||
<>
|
||||
<h1 className='my-5 text-lg lg:text-xl tracking-wide text-slate-900 dark:text-slate-100'>You Currently Do not have any Group, Please Add Group</h1>
|
||||
</>
|
||||
:
|
||||
<>
|
||||
<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'>
|
||||
<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="First Name"
|
||||
// label="Firstname"
|
||||
name="firstname"
|
||||
type="text"
|
||||
// iconName="message"
|
||||
/>
|
||||
</div>
|
||||
<div className="input-item">
|
||||
<InputCom
|
||||
labelClass="tracking-wider"
|
||||
fieldClass="sm:px-6 px-2"
|
||||
value={fields.lastname}
|
||||
inputHandler={handleFieldsChange}
|
||||
placeholder="Last Name"
|
||||
// label="Lastname"
|
||||
name="lastname"
|
||||
type="text"
|
||||
// iconName="message"
|
||||
/>
|
||||
</div>
|
||||
<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="Email"
|
||||
// label="Email"
|
||||
name="email"
|
||||
type="email"
|
||||
// iconName="message"
|
||||
/>
|
||||
</div>
|
||||
<div className='flex justify-end items-end'>
|
||||
{requestState.loading ?
|
||||
<LoadingSpinner size='8' color='sky-blue' />
|
||||
:
|
||||
<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>
|
||||
<div className="p-5 w-full min-h-[600px] overflow-y-auto">
|
||||
{groupList && groupList.length < 1 ? (
|
||||
<>
|
||||
<h1 className="my-5 text-lg lg:text-xl tracking-wide text-slate-900 dark:text-slate-100">
|
||||
You Currently Do not have any Group, Please Add Group
|
||||
</h1>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<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">
|
||||
<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="First Name"
|
||||
// label="Firstname"
|
||||
name="firstname"
|
||||
type="text"
|
||||
// iconName="message"
|
||||
/>
|
||||
</div>
|
||||
<div className="input-item">
|
||||
<InputCom
|
||||
labelClass="tracking-wider"
|
||||
fieldClass="sm:px-6 px-2"
|
||||
value={fields.lastname}
|
||||
inputHandler={handleFieldsChange}
|
||||
placeholder="Last Name"
|
||||
// label="Lastname"
|
||||
name="lastname"
|
||||
type="text"
|
||||
// iconName="message"
|
||||
/>
|
||||
</div>
|
||||
<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="Email"
|
||||
// label="Email"
|
||||
name="email"
|
||||
type="email"
|
||||
// iconName="message"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-end items-end">
|
||||
{requestState.loading ? (
|
||||
<LoadingSpinner size="8" color="sky-blue" />
|
||||
) : (
|
||||
<button
|
||||
onClick={addMember}
|
||||
disabled={
|
||||
requestState.loading ||
|
||||
requestState.status ||
|
||||
requestState.errors.length
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div className='my-2 flex flex-col min-h-[300px]'>
|
||||
{selectedGroup?.data?.length < 1 ?
|
||||
<h1 className='my-5 text-lg lg:text-xl tracking-wide text-slate-900 dark:text-slate-100'>No Member Found, Please Add</h1>
|
||||
:
|
||||
<GroupMemberTable selectedList={selectedGroup?.data} />
|
||||
}
|
||||
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>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="my-2 flex flex-col min-h-[300px]">
|
||||
{selectedGroup?.data?.length < 1 ? (
|
||||
<h1 className="my-5 text-lg lg:text-xl tracking-wide text-slate-900 dark:text-slate-100">
|
||||
No Member Found, Please Add
|
||||
</h1>
|
||||
) : (
|
||||
<GroupMemberTable selectedList={selectedGroup?.data} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user