utils#toolTypeArray JavaScript Examples
The following examples show how to use
utils#toolTypeArray.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: controller.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 4 votes |
|
function Controller(props) {
const {
paginationCounter,
search,
// print,
btnText,
btnAction,
importUser,
// jobType,
// SetJobType,
// logType,
// SetLogType,
subTypeState,
filter,
activeRole,
setActiveRole,
setActivePage,
type,
// searchQueryActivities,
// setSearchQueryActivities,
searchQuery,
searchQueryProject,
setSearchQueryProject,
// searchQueryStats,
// setSearchQueryStats,
setSearchQuery,
searchQueryChangeHandler,
searchProjectQueryChangeHandler,
// searchActivitiesQueryHandler,
setSearchQueryTeam,
// searchUserReportQueryHandler,
size,
setSize,
// tableHead,
roles,
// inviteUser,
subType,
setChangeIndexValue,
// selectedActivityType,
libraryReqSelected,
setLibraryReqSelected,
// setSubTypeState,
projectFilterObj,
setProjectFilterObj,
filterSearch,
resetProjectFilter,
filteredItems,
setSearchKey,
} = props;
const importProject = useRef();
const dispatch = useDispatch();
// const [allUsersAdded, setAllUsersAdded] = useState([]);
const adminState = useSelector((state) => state.admin);
const [activeRoleInComponent, setActiveRoleInComponent] = useState('');
const organization = useSelector((state) => state.organization);
const { permission, activeOrganization } = organization;
const { activityTypes } = useSelector((state) => state.admin);
const [selectedIndexValue, setSelectedIndexValue] = useState('ALL');
const [selectedIndexValueid, setSelectedIndexValueid] = useState(0);
const [authorName, setAuthorName] = useState('');
const [authorsArray, setAuthorsArray] = useState([]);
const [loaderImgUser, setLoaderImgUser] = useState(false);
const [selectedFilterItem, setSelectedFilterItem] = useState('');
useMemo(() => {
if (type === 'Users') {
dispatch(getRoles());
}
}, [dispatch, type]);
useEffect(() => {
if (roles?.length > 0 && subTypeState !== 'Manage Roles' && adminState?.activeTab === 'Users') {
// console.log(roles, 'roles');
// if(!activeRoleInComponent) setActiveRoleInComponent(roles[0]?.display_name);
if (!activeRole) {
setActiveRole(roles[0]?.id);
setActiveRoleInComponent(roles[0]?.display_name);
} else if (roles?.length > 0 && activeRole) {
setActiveRoleInComponent(roles?.filter((role) => role.id === activeRole)[0]?.display_name);
}
} else if (roles?.length > 0 && subTypeState === 'Manage Roles') {
setActiveRoleInComponent(roles[0]?.display_name);
}
}, [roles, adminState?.activeTab, subTypeState, activeRole, setActiveRole]);
// sabtype
// const sab = subType;
// console.log(subTypeState);
// console.log(subType);
const searchUserProjectFilter = useCallback(async () => {
if (authorName.length >= 2) {
setLoaderImgUser(true);
const result = await dispatch(searchUserInOrganization(activeOrganization?.id, authorName));
// console.log(result?.data, 'result');
if (result?.data?.length > 0) {
setLoaderImgUser(false);
setAuthorsArray(result?.data);
} else {
setLoaderImgUser(false);
setAuthorsArray([]);
}
} else if (authorName.length < 2) {
setLoaderImgUser(false);
setAuthorsArray([]);
}
}, [activeOrganization?.id, authorName, dispatch]);
const updateIndexAction = (value, id) => {
setSelectedIndexValue(value);
setChangeIndexValue(id);
setSelectedIndexValueid(id);
};
const primaryColor = getGlobalColor('--main-primary-color');
// const secondaryColor = getGlobalColor('--main-secondary-color');
return (
<div className="controller">
{/* {(currentOrganization?.id !== activeOrganization?.id && type !== 'Users' ) && (
<div className="btn-text">
<button
onClick={async () => {
await dispatch(getOrganization(currentOrganization?.id));
dispatch(clearOrganizationState());
dispatch(getRoles());
}}
>
Go to root organization
</button>
</div>
)} */}
{/* {!!filter && (
<div className="filter-dropdown drop-counter ">
Fillter by:
<span>
<Dropdown>
<Dropdown.Toggle id="dropdown-basic">
Select value
</Dropdown.Toggle>
<Dropdown.Menu>
<form className="radio-filter">
{tableHead?.map((head) => (
<div className="group">
<label>{head}</label>
<input type="checkbox" name="filter-table" />
</div>
))}
</form>
</Dropdown.Menu>
</Dropdown>
</span>
</div>
)} */}
{/* LEFT SIDE OF CONTROLLER GOES HERE */}
<div className="controller-left-side">
{!!search && type === 'Users' && (
<>
<div className="search-bar" style={{ display: 'flex', flexDirection: 'column' }}>
<input
className=""
type="text"
// title="Enter at least 2 characters"
placeholder="Search by email"
value={searchQuery}
onChange={searchQueryChangeHandler}
/>
{/* <img src={searchimg} alt="search" /> */}
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58175 3 3.00003 6.58172 3.00003 11C3.00003 15.4183 6.58175 19 11 19Z"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path d="M21 20.9984L16.65 16.6484" stroke={primaryColor} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
{searchQuery.trim().length > 0 && searchQuery.trim().length < 2 && (
<label className="flex" style={{ color: 'red' }}>
Enter at least 2 characters
</label>
)}
</div>
</>
)}
{!!search && type === 'LMS' && subType === 'LMS settings' && (
<div className="search-bar">
<input className="" type="text" placeholder="Search by URL or Email" onChange={searchQueryChangeHandler} />
{/* <img src={searchimg} alt="search" /> */}
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58175 3 3.00003 6.58172 3.00003 11C3.00003 15.4183 6.58175 19 11 19Z"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path d="M21 20.9984L16.65 16.6484" stroke={primaryColor} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</div>
)}
{!!search && type === 'LMS' && subType === 'LTI Tools' && (
<div className="search-bar">
<input className="" type="text" placeholder="Search by URL or User Email" onChange={searchQueryChangeHandler} />
{/* <img src={searchimg} alt="search" /> */}
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58175 3 3.00003 6.58172 3.00003 11C3.00003 15.4183 6.58175 19 11 19Z"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path d="M21 20.9984L16.65 16.6484" stroke={primaryColor} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</div>
)}
{!!search && type === 'LMS' && subType === 'BrightCove' && (
<div className="search-bar">
<input className="" type="text" placeholder="Search by ID or email" onChange={searchQueryChangeHandler} />
{/* <img src={searchimg} alt="search" /> */}
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58175 3 3.00003 6.58172 3.00003 11C3.00003 15.4183 6.58175 19 11 19Z"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path d="M21 20.9984L16.65 16.6484" stroke={primaryColor} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</div>
)}
{!!search && type === 'DefaultSso' && (
<div className="search-bar">
<input className="" type="text" placeholder="Search by Site name,URL or Client id" onChange={searchQueryChangeHandler} />
{/* <img src={searchimg} alt="search" /> */}
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58175 3 3.00003 6.58172 3.00003 11C3.00003 15.4183 6.58175 19 11 19Z"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path d="M21 20.9984L16.65 16.6484" stroke={primaryColor} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</div>
)}
{!!search && type === 'Teams' && (
<div className="search-bar">
<input className="" type="text" placeholder="Search" onChange={({ target }) => setSearchQueryTeam(target.value)} />
{/* <img src={searchimg} alt="search" /> */}
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58175 3 3.00003 6.58172 3.00003 11C3.00003 15.4183 6.58175 19 11 19Z"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path d="M21 20.9984L16.65 16.6484" stroke={primaryColor} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</div>
)}
{/* {!!search && type === 'Stats' && (
<div className="search-bar">
<input
className=""
type="text"
placeholder="Search"
value={searchQueryStats}
onChange={(e) => {
if (e.target.value && alphaNumeric(e.target.value)) {
setSearchQueryStats(e.target.value);
} else if (e.target.value === '') {
setSearchQueryStats('');
searchUserReportQueryHandler('', subTypeState);
}
}}
/>
<img src={searchimg} alt="search" onClick={() => searchUserReportQueryHandler(searchQueryStats, subTypeState)} />
</div>
)} */}
{!!search && type === 'Projects' && (
<div className="search-bar">
<input
className=""
type="text"
placeholder="Search"
value={searchQueryProject}
onChange={(e) => {
if (e.target.value) {
setActivePage(1);
setSearchQueryProject(e.target.value);
// searchProjectQueryChangeHandler(e.target.value, selectedIndexValueid, subType);
} else if (e.target.value === '') {
setActivePage(1);
setSearchQueryProject('');
// searchProjectQueryChangeHandler('', selectedIndexValueid, subType);
}
}}
/>
{/* <img
src={searchimg}
alt="search"
onClick={() =>
searchProjectQueryChangeHandler(
searchQueryProject,
selectedIndexValueid,
subType
)
}
/> */}
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
onClick={() => searchProjectQueryChangeHandler(searchQueryProject, selectedIndexValueid, subType)}
>
<path
d="M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58175 3 3.00003 6.58172 3.00003 11C3.00003 15.4183 6.58175 19 11 19Z"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path d="M21 20.9984L16.65 16.6484" stroke={primaryColor} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</div>
)}
{!!search && type === 'Organization' && (
<div className="search-bar">
<input type="text" placeholder="Search Organization" onChange={searchQueryChangeHandler} />
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58175 3 3.00003 6.58172 3.00003 11C3.00003 15.4183 6.58175 19 11 19Z"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path d="M21 20.9984L16.65 16.6484" stroke={primaryColor} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</div>
)}
{!!search && type === 'Activities' && subType === 'Activity Types' && (
<div className="search-bar">
<input type="text" placeholder="Search by activity name" onChange={searchQueryChangeHandler} value={setSearchKey} />
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58175 3 3.00003 6.58172 3.00003 11C3.00003 15.4183 6.58175 19 11 19Z"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path d="M21 20.9984L16.65 16.6484" stroke={primaryColor} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</div>
)}
{!!search && type === 'Activities' && subType === 'Activity Items' && (
<div className="search-bar">
<input type="text" placeholder="Search by activity name" onChange={searchQueryChangeHandler} value={setSearchKey} />
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58175 3 3.00003 6.58172 3.00003 11C3.00003 15.4183 6.58175 19 11 19Z"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path d="M21 20.9984L16.65 16.6484" stroke={primaryColor} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</div>
)}
{!!search && type === 'Activities' && subType === 'Subjects' && (
<div className="search-bar">
<input className="" type="text" placeholder="Search by name" onChange={searchQueryChangeHandler} value={setSearchKey} />
{/* <img src={searchimg} alt="search" /> */}
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58175 3 3.00003 6.58172 3.00003 11C3.00003 15.4183 6.58175 19 11 19Z"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path d="M21 20.9984L16.65 16.6484" stroke={primaryColor} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</div>
)}
{!!search && type === 'Activities' && subType === 'Education Level' && (
<div className="search-bar">
<input className="" type="text" placeholder="Search by name" onChange={searchQueryChangeHandler} value={setSearchKey} />
{/* <img src={searchimg} alt="search" /> */}
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58175 3 3.00003 6.58172 3.00003 11C3.00003 15.4183 6.58175 19 11 19Z"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path d="M21 20.9984L16.65 16.6484" stroke={primaryColor} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</div>
)}
{!!search && type === 'Activities' && subType === 'Author Tags' && (
<div className="search-bar">
<input className="" type="text" placeholder="Search by name" onChange={searchQueryChangeHandler} value={setSearchKey} />
{/* <img src={searchimg} alt="search" /> */}
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58175 3 3.00003 6.58172 3.00003 11C3.00003 15.4183 6.58175 19 11 19Z"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path d="M21 20.9984L16.65 16.6484" stroke={primaryColor} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</div>
)}
{!!search && type === 'Activities' && subType === 'Activity Layouts' && (
<div className="search-bar">
<input type="text" placeholder="Search by activity layout name" onChange={searchQueryChangeHandler} value={setSearchKey} />
{/* <img src={searchimg} alt="search" /> */}
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58175 3 3.00003 6.58172 3.00003 11C3.00003 15.4183 6.58175 19 11 19Z"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path d="M21 20.9984L16.65 16.6484" stroke={primaryColor} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</div>
)}
{paginationCounter && (
<div className="pagination-counter drop-counter ">
Rows per page
<span>
<Dropdown>
<Dropdown.Toggle id="dropdown-basic">{size}</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item
onClick={() => {
setSize(10);
setActivePage(1);
}}
>
10
</Dropdown.Item>
<Dropdown.Item
onClick={() => {
setSize(25);
setActivePage(1);
}}
>
25
</Dropdown.Item>
<Dropdown.Item
onClick={() => {
setSize(50);
setActivePage(1);
}}
>
50
</Dropdown.Item>
<Dropdown.Item
onClick={() => {
setSize(100);
setActivePage(1);
}}
>
100
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</span>
</div>
)}
{/* FILTER FOR PROJECT TABS */}
{type === 'Projects' && subType === 'All Projects' && (
<div className="filter-dropdown-project">
<Dropdown>
<Dropdown.Toggle id="dropdown-basic">
{/* <img src={filterImg} alt="filter" /> */}
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M13.8334 3H2.16669L6.83335 8.25556V11.8889L9.16669 13V8.25556L13.8334 3Z"
stroke={primaryColor}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
Filter
</Dropdown.Toggle>
<Dropdown.Menu>
<div className="authorName-project">
<label>Author</label>
<input type="text" value={authorName} onChange={(e) => setAuthorName(e.target.value)} />
<img src={filterSearchIcon} alt="filterSearchIcon" className={authorName && authorsArray.length === 0 && 'close-circle'} onClick={searchUserProjectFilter} />
{authorName && authorName.length >= 2 && authorsArray.length > 0 && (
<div className="author-list">
{authorsArray?.length > 0
? authorsArray?.map((author) => (
<div
className="single-author"
onClick={() => {
setProjectFilterObj({
...projectFilterObj,
author_id: author.id,
});
setAuthorName(`${author.first_name} ${author.last_name}`);
setAuthorsArray([]);
}}
>
<div className="initial">{author.first_name[0] + author.last_name[0]}</div>
<div>
<div className="username-filter-project">{author.first_name}</div>
<div className="email-filter-project">{author.email}</div>
</div>
</div>
))
: 'No user found.'}
</div>
)}
</div>
{loaderImgUser && <img src={loader} alt="loader" className="loader-img" />}
{authorName && authorName.length < 2 && <div className="error">Enter at least 2 characters.</div>}
<div className="createdFrom-project">
<label>Created</label>
<div className="row-project-filter">
<div className="from-project">
<span>From</span>
<input
type="text"
placeholder="MM/DD/YYYY"
onFocus={(e) => {
e.target.type = 'date';
}}
value={projectFilterObj.created_from}
onChange={(e) => {
setProjectFilterObj({
...projectFilterObj,
created_from: e.target.value,
});
}}
/>
</div>
<div className="to-project">
<span>To</span>
<input
type="text"
placeholder="MM/DD/YYYY"
onFocus={(e) => {
e.target.type = 'date';
}}
value={projectFilterObj.created_to}
onChange={(e) => {
setProjectFilterObj({
...projectFilterObj,
created_to: e.target.value,
});
}}
/>
</div>
</div>
{projectFilterObj.created_from > projectFilterObj.created_to && <div className="error">From date should be less than To date.</div>}
</div>
<div className="updatedOn-project">
<label>Updated</label>
<div className="row-project-filter">
<div className="from-project">
<span>From</span>
<input
type="text"
placeholder="MM/DD/YYYY"
onFocus={(e) => {
e.target.type = 'date';
}}
value={projectFilterObj.updated_from}
onChange={(e) => {
setProjectFilterObj({
...projectFilterObj,
updated_from: e.target.value,
});
}}
/>
</div>
<div className="to-project">
<span>To</span>
<input
type="text"
placeholder="MM/DD/YYYY"
onFocus={(e) => {
e.target.type = 'date';
}}
value={projectFilterObj.updated_to}
onChange={(e) => {
setProjectFilterObj({
...projectFilterObj,
updated_to: e.target.value,
});
}}
/>
</div>
</div>
{projectFilterObj.updated_from > projectFilterObj.updated_to && <div className="error">From date should be less than To date.</div>}
</div>
<div className="status-project">
<div className="library-status">
<label>Library status</label>
<span>
<input
type="radio"
checked={projectFilterObj.indexing === 1 && true}
onChange={() => {
setLibraryReqSelected(true);
setProjectFilterObj({
...projectFilterObj,
indexing: 1,
});
}}
/>
Requested
</span>
<span>
<input
type="radio"
checked={projectFilterObj.indexing === 0 && true}
onChange={() => {
setLibraryReqSelected(false);
setProjectFilterObj({
...projectFilterObj,
indexing: 0,
});
}}
/>
Not Requested
</span>
<span>
<input
type="radio"
checked={projectFilterObj.indexing === 3 && true}
onChange={() => {
setLibraryReqSelected(false);
setProjectFilterObj({
...projectFilterObj,
indexing: 3,
});
}}
/>
Approved
</span>
<span>
<input
type="radio"
checked={projectFilterObj.indexing === 2 && true}
onChange={() => {
setLibraryReqSelected(false);
setProjectFilterObj({
...projectFilterObj,
indexing: 2,
});
}}
/>
Rejected
</span>
</div>
<div className="shared-status">
<label>Shared status</label>
<span>
<input
type="radio"
checked={projectFilterObj.shared === 1 && true}
onChange={() =>
setProjectFilterObj({
...projectFilterObj,
shared: 1,
})
}
/>
Enabled
</span>
<span>
<input
type="radio"
checked={projectFilterObj.shared === 0 && true}
onChange={() =>
setProjectFilterObj({
...projectFilterObj,
shared: 0,
})
}
/>
Disabled
</span>
</div>
</div>
<div className="filter-btn-project" onClick={() => filterSearch()}>
{/* <img src={filterImg} alt="filter" /> */}
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M13.8334 3H2.16669L6.83335 8.25556V11.8889L9.16669 13V8.25556L13.8334 3Z"
stroke={primaryColor}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
Apply Filters
</div>
<div
className="filter-btn-project"
onClick={() => {
setAuthorName('');
resetProjectFilter();
}}
>
<FontAwesomeIcon icon="sync" />
Reset All
</div>
</Dropdown.Menu>
</Dropdown>
</div>
)}
{type === 'Projects' && subType === 'All Projects' && permission?.Organization?.includes('organization:edit-project') && (
<button
className="switch-libreq"
type="button"
style={{ border: libraryReqSelected ? '1px solid #F8AF2C' : '0' }}
onClick={() => {
// setSubTypeState(libraryReqSelected ? 'All Projects' : 'Library requests');
setLibraryReqSelected(!libraryReqSelected);
}}
>
{/* <img src={eye} alt="eye" /> */}
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ marginRight: '8px' }}>
<path
d="M1.125 8C1.125 8 3.625 3 8 3C12.375 3 14.875 8 14.875 8C14.875 8 12.375 13 8 13C3.625 13 1.125 8 1.125 8Z"
stroke={primaryColor}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M8 9.875C9.03553 9.875 9.875 9.03553 9.875 8C9.875 6.96447 9.03553 6.125 8 6.125C6.96447 6.125 6.125 6.96447 6.125 8C6.125 9.03553 6.96447 9.875 8 9.875Z"
stroke={primaryColor}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
Library request to review
</button>
)}
{/* FILTER FOR ACTIVITY ITEMS */}
{subType === 'Activity Items' && (
<div className="filter-dropdown-activityItems">
Filter by activity type
<span>
<Dropdown>
<Dropdown.Toggle id="dropdown-basic">{selectedFilterItem?.title ? selectedFilterItem?.title : 'Select'}</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item
onClick={() => {
filteredItems(null);
setSelectedFilterItem(null);
}}
>
Select
</Dropdown.Item>
{activityTypes?.data.map((item) => (
<Dropdown.Item
onClick={() => {
filteredItems(item.id);
setSelectedFilterItem(item);
}}
>
{item.title}
</Dropdown.Item>
))}
</Dropdown.Menu>
</Dropdown>
</span>
</div>
)}
{!!filter && subType === 'index' && (
<div className="filter-dropdown drop-counter ">
Index Value:
<span>
<Dropdown>
<Dropdown.Toggle id="dropdown-basic">{selectedIndexValue}</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item
onClick={() => {
updateIndexAction('ALL', 0);
setActivePage(1);
}}
>
ALL
</Dropdown.Item>
<Dropdown.Item
onClick={() => {
updateIndexAction('REQUESTED', 1);
setActivePage(1);
}}
>
REQUESTED
</Dropdown.Item>
<Dropdown.Item
onClick={() => {
updateIndexAction('REJECTED', 2);
setActivePage(1);
}}
>
REJECTED
</Dropdown.Item>
<Dropdown.Item
onClick={() => {
updateIndexAction('APPROVED', 3);
setActivePage(1);
}}
>
APPROVED
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</span>
</div>
)}
{roles?.length > 0 && type === 'Users' ? (
<div className="filter-dropdown role-dropdown">
{subTypeState === 'Manage Roles' ? 'Select role:' : 'Filter by role'}
<span>
<Dropdown>
<Dropdown.Toggle id="dropdown-basic">{activeRoleInComponent}</Dropdown.Toggle>
<Dropdown.Menu>
{roles?.map((head) => (
<div key={head} className="group">
<Dropdown.Item
onClick={() => {
setActiveRoleInComponent(head.display_name);
if (subTypeState === 'Manage Roles') dispatch(roleDetail(activeOrganization.id, head.id));
if (subTypeState === 'All Users' && activeRole !== head.id) {
setSearchQuery('');
setActiveRole(head.id);
setActivePage(1);
}
}}
>
{head.display_name}
</Dropdown.Item>
</div>
))}
</Dropdown.Menu>
</Dropdown>
</span>
</div>
) : null}
{/* FILTER FOR ACTIVITY ITEMS */}
{subType === 'LTI Tools' && (
<div className="filter-dropdown-activityItems">
Filter by type
<span>
<Dropdown>
<Dropdown.Toggle id="dropdown-basic">{selectedFilterItem?.value ? selectedFilterItem?.value : 'Select'}</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item
onClick={() => {
filteredItems(null);
setSelectedFilterItem(null);
}}
>
Select
</Dropdown.Item>
{toolTypeArray?.map((t) => (
<Dropdown.Item
onClick={() => {
filteredItems(t.key);
setSelectedFilterItem(t);
}}
>
{t.value}
</Dropdown.Item>
))}
</Dropdown.Menu>
</Dropdown>
</span>
</div>
)}
{(type === 'DefaultSso' || subType === 'LMS settings') && (
<div className="filter-dropdown-activityItems">
Filter by type
<span>
<Dropdown>
<Dropdown.Toggle id="dropdown-basic">{selectedFilterItem?.value ? selectedFilterItem?.value : 'All'}</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item
onClick={() => {
filteredItems('');
setSelectedFilterItem(null);
}}
>
All
</Dropdown.Item>
{integratedLMS?.map((data) => (
<Dropdown.Item
onClick={() => {
filteredItems(data.value);
setSelectedFilterItem(data);
}}
>
{data.name}
</Dropdown.Item>
))}
</Dropdown.Menu>
</Dropdown>
</span>
</div>
)}
{/* {type === 'Stats' && subTypeState === 'Queues: Jobs' && (
<Dropdown name="jobType" id="jobType">
<Dropdown.Toggle id="dropdown-basic">{jobType.display_name}</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item value="1" name="Pending" onClick={() => SetJobType({ value: 1, display_name: 'Pending' })}>
Pending
</Dropdown.Item>
<Dropdown.Item value="2" name="Failed" onClick={() => SetJobType({ value: 2, display_name: 'Failed' })}>
Failed
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
)} */}
{/* {type === 'Stats' && subTypeState === 'Queues: Logs' && (
<Dropdown name="logType" id="logType">
<Dropdown.Toggle id="dropdown-basic">{logType.display_name}</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item value="all" name="All" onClick={() => SetLogType({ value: 'all', display_name: 'All' })}>
All
</Dropdown.Item>
<Dropdown.Item value="1" name="Running" onClick={() => SetLogType({ value: 1, display_name: 'Running' })}>
Running
</Dropdown.Item>
<Dropdown.Item value="2" name="Failed" onClick={() => SetLogType({ value: 2, display_name: 'Failed' })}>
Failed
</Dropdown.Item>
<Dropdown.Item value="3" name="Completed" onClick={() => SetLogType({ value: 3, display_name: 'Completed' })}>
Completed
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
)} */}
{/* {type === 'Stats' && subTypeState === 'Queues: Jobs' && jobType.value === 2 && (
<div className="retryandforget">
<button
type="button"
className="retry"
onClick={() => {
dispatch(retryAllFailedJobs());
}}
>
Retry All
</button>
<button
type="button"
className="forget"
onClick={() => {
dispatch(forgetAllFailedJobs());
}}
>
Forget All
</button>
</div>
)} */}
{/* ROW PER PAGE */}
</div>
{/* RIGHT SIDE OF CONTROLLER GOES HERE */}
<div className="controller-right-side">
{!!importUser && type === 'Projects' && subType === 'All Projects' && permission?.Organization?.includes('organization:edit-project') && (
<div
className="import-user"
style={{ cursor: 'pointer' }}
onClick={() => {
importProject.current.click();
}}
>
<FontAwesomeIcon icon="sign-in-alt" />
<div>Import Project</div>
<input
type="file"
ref={importProject}
style={{ display: 'none' }}
onChange={(e) => {
if (e.target.files.length === 0) {
return true;
}
if (!e.target.files[0].type.includes('zip')) {
Swal.fire({
title: 'Invalid File',
icon: 'error',
text: 'please select zip file',
});
} else {
Swal.fire({
title: 'Importing Project',
icon: 'info',
text: 'please wait...',
allowOutsideClick: false,
onBeforeOpen: () => {
Swal.showLoading();
},
button: false,
});
const formData = new FormData();
formData.append('project', e.target.files[0]);
const response = adminService.importProject(activeOrganization.id, formData);
response.then((res) => {
Swal.fire({
icon: 'success',
html: res?.message,
});
});
}
}}
/>
</div>
)}
{/* {!!print && (
<div className="print-info">
<div>print</div>
<div className="img-section">
<img src={csv} alt="csv" />
<img src={pdf} alt="pdf" />
</div>
</div>
)} */}
{!!btnText && subType === 'Activity Types' && permission?.Organization.includes('organization:create-activity-type') && (
<div className="btn-text">
<button
type="button"
onClick={() => {
if (btnAction === 'add_activity_type') {
dispatch(setActiveAdminForm('add_activity_type'));
}
}}
>
<FontAwesomeIcon icon="plus" />
{btnText}
</button>
</div>
)}
{!!btnText && subType === 'Activity Items' && permission?.Organization.includes('organization:create-activity-item') && (
<div className="btn-text">
<button
type="button"
onClick={() => {
if (btnAction === 'add_activity_item') {
dispatch(setActiveAdminForm('add_activity_item'));
}
}}
>
<FontAwesomeIcon icon="plus" />
{btnText}
</button>
</div>
)}
{!!btnText && subType === 'Subjects' /* && permission?.Organization.includes('organization:create-activity-subject') */ && (
<div className="btn-text">
<button
type="button"
onClick={() => {
if (btnAction === 'add_subject') {
dispatch(setActiveAdminForm('add_subject'));
}
}}
>
<FontAwesomeIcon icon="plus" />
{btnText}
</button>
</div>
)}
{!!btnText && subType === 'Education Level' /* && permission?.Organization.includes('organization:create-activity-subject') */ && (
<div className="btn-text">
<button
type="button"
onClick={() => {
if (btnAction === 'add_education_level') {
dispatch(setActiveAdminForm('add_education_level'));
}
}}
>
<FontAwesomeIcon icon="plus" />
{btnText}
</button>
</div>
)}
{!!btnText && subType === 'Author Tags' /* && permission?.Organization.includes('organization:create-activity-subject') */ && (
<div className="btn-text">
<button
type="button"
onClick={() => {
if (btnAction === 'add_author_tag') {
dispatch(setActiveAdminForm('add_author_tag'));
}
}}
>
<FontAwesomeIcon icon="plus" />
{btnText}
</button>
</div>
)}
{!!btnText && subType === 'Activity Layouts' /* && permission?.Organization.includes('organization:create-activity-subject') */ && (
<div className="btn-text">
<button
type="button"
onClick={() => {
if (btnAction === 'add_activity_layout') {
dispatch(setActiveAdminForm('add_activity_layout'));
}
}}
>
<FontAwesomeIcon icon="plus" />
{btnText}
</button>
</div>
)}
{!!btnText && subType === 'Manage Roles' && permission?.Organization.includes('organization:add-role') && (
<div className="btn-text">
<button
type="button"
onClick={() => {
if (btnAction === 'add_role') {
dispatch(setActiveAdminForm('add_role'));
}
}}
>
<FontAwesomeIcon icon="plus" />
{btnText}
</button>
</div>
)}
{!!btnText && subType === 'All Users' && permission?.Organization.includes('organization:add-user') && (
<div className="btn-text">
<button
type="button"
onClick={() => {
if (btnAction === 'create_user') {
dispatch(setActiveAdminForm('create_user'));
}
}}
>
<FontAwesomeIcon icon="plus" />
{btnText}
</button>
</div>
)}
{!!btnText && type === 'Organization' && permission?.Organization.includes('organization:create') && (
<div className="btn-text">
<button
type="button"
onClick={() => {
if (btnAction === 'add_org') {
dispatch(setActiveAdminForm('add_org'));
}
}}
>
<FontAwesomeIcon icon="plus" />
{btnText}
</button>
</div>
)}
{!!btnText && type === 'LMS' && subType === 'LMS settings' && permission?.Organization.includes('organization:create-lms-setting') && (
<div className="btn-text">
<button
type="button"
onClick={() => {
if (btnAction === 'add_lms') {
dispatch(setActiveAdminForm('add_lms'));
}
}}
>
<FontAwesomeIcon icon="plus" />
{btnText}
</button>
</div>
)}
{!!btnText && type === 'LMS' && subType === 'LTI Tools' && permission?.Organization.includes('organization:create-all-setting') && (
<div className="btn-text">
<button
type="button"
onClick={() => {
if (btnAction === 'add_lti_tool') {
dispatch(setActiveAdminForm('add_lti_tool'));
}
}}
>
<FontAwesomeIcon icon="plus" />
{btnText}
</button>
</div>
)}
{!!btnText && type === 'LMS' && subType === 'BrightCove' && permission?.Organization.includes('organization:create-brightcove-setting') && (
<div className="btn-text">
<button
type="button"
onClick={() => {
if (btnAction === 'add_brightcove') {
dispatch(setActiveAdminForm('add_brightcove'));
}
}}
>
<FontAwesomeIcon icon="plus" />
{btnText}
</button>
</div>
)}
{!!btnText && type === 'DefaultSso' && (
<div className="btn-text">
<button
type="button"
onClick={() => {
if (btnAction === 'add_default_sso') {
dispatch(setActiveAdminForm('add_default_sso'));
}
}}
>
<FontAwesomeIcon icon="plus" />
{btnText}
</button>
</div>
)}
{/* {inviteUser && permission?.Organization?.includes('organization:invite-members') && (
<div className="btn-text">
<div className="add-user-btn">
<Dropdown drop="down" id="dropdown-button-drop-down">
<Dropdown.Toggle variant="success" id="dropdown-basic">
Invite external user
</Dropdown.Toggle>
<Dropdown.Menu>
<InviteUser />
</Dropdown.Menu>
</Dropdown>
</div>
</div>
)} */}
{/* {permission?.Organization?.includes('organization:view-user') && type === 'Users' && subTypeState === 'All Users' && (
<div className="btn-text">
<div className="add-user-btn">
<Dropdown drop="down" id="dropdown-button-drop-down">
<Dropdown.Toggle variant="success" id="dropdown-basic">
Add internal user
</Dropdown.Toggle>
<Dropdown.Menu>
<AddUser setAllUsersAdded={setAllUsersAdded} allUsersAdded={allUsersAdded} method="create" />
</Dropdown.Menu>
</Dropdown>
</div>
</div>
)} */}
</div>
{/* {(currentOrganization?.id !== activeOrganization?.id && type !== 'Users' ) && (
<div className="btn-text">
<button
onClick={async () => {
await dispatch(getOrganization(currentOrganization?.id));
dispatch(clearOrganizationState());
dispatch(getRoles());
}}
>
Go to root organization
</button>
</div>
)} */}
</div>
);
}
Example #2
| Source File: createLtiTool.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 4 votes |
|
export default function CreateLtiTool(prop) {
const { editMode, clone } = prop;
const dispatch = useDispatch();
const organization = useSelector((state) => state.organization);
const { activeEdit } = organization;
const [loaderlmsImgUser, setLoaderlmsImgUser] = useState(false);
const [stateOrgUsers, setStateOrgUsers] = useState([]);
return (
<div className="create-form lms-admin-form">
<Formik
initialValues={{
tool_name: editMode ? activeEdit?.tool_name : '',
tool_custom_parameter: editMode ? activeEdit?.tool_custom_parameter : '',
tool_url: editMode ? activeEdit?.tool_url : '',
tool_content_selection_url: editMode ? activeEdit?.tool_content_selection_url : '',
lti_version: editMode ? activeEdit?.lti_version || 'LTI-1p0' : 'LTI-1p0',
tool_consumer_key: editMode ? activeEdit?.tool_consumer_key : '',
tool_description: editMode ? activeEdit?.tool_description : '',
tool_type: editMode ? activeEdit?.tool_type : '',
tool_secret_key: editMode ? activeEdit?.tool_secret_key : '',
organization_id: organization?.activeOrganization?.id,
user_id: editMode ? (clone ? '' : activeEdit?.user?.id) : '',
name: editMode ? (clone ? '' : activeEdit?.user?.name) : '',
}}
validate={(values) => {
const errors = {};
if (!values.tool_name) {
errors.tool_name = 'required';
}
if (!values.tool_url) {
errors.tool_url = 'required';
}
if (!values.lti_version) {
errors.lti_version = 'required';
}
if (!values.user_id) {
errors.user_id = 'Required';
}
return errors;
}}
onSubmit={async (values) => {
if (editMode && !clone) {
Swal.fire({
title: 'Lti tool',
icon: 'info',
text: 'Updating LTI Tool ...',
allowOutsideClick: false,
onBeforeOpen: () => {
Swal.showLoading();
},
button: false,
});
const result = adminapi.updateLtiTool(organization?.activeOrganization?.id, activeEdit?.id, values);
result.then((res) => {
Swal.fire({
icon: 'success',
text: 'LTI tool edited successfully',
confirmButtonText: 'Close',
customClass: {
confirmButton: 'confirmation-close-btn',
},
});
// dispatch(getLtiTools(organization?.activeOrganization?.id));
dispatch(removeActiveAdminForm());
dispatch({
type: actionTypes.NEWLY_EDIT_RESOURCE,
payload: res?.data,
});
});
} else {
Swal.fire({
title: 'Lti tool',
icon: 'info',
text: 'Creating new LTI Tool...',
allowOutsideClick: false,
onBeforeOpen: () => {
Swal.showLoading();
},
button: false,
});
const result = adminapi.createLtiTool(organization?.activeOrganization?.id, values);
result.then((res) => {
Swal.fire({
icon: 'success',
text: 'LTI tool added successfully',
confirmButtonText: 'Close',
customClass: {
confirmButton: 'confirmation-close-btn',
},
});
// dispatch(getLtiTools(organization?.activeOrganization?.id));
dispatch(removeActiveAdminForm());
dispatch({
type: actionTypes.NEWLY_CREATED_RESOURCE,
payload: res?.data,
});
});
}
}}
>
{({
values,
errors,
touched,
handleChange,
handleBlur,
handleSubmit,
setFieldValue,
/* and other goodies */
}) => (
<form onSubmit={handleSubmit}>
<div className="lms-form">
<h2>
{editMode ? (clone ? 'Add ' : 'Edit ') : 'Add '}
LTI tool
</h2>
<div className="create-form-inputs-group">
{/* Left container */}
<div>
<div className="form-group-create">
<h3>Tool name</h3>
<input type="text" name="tool_name" onChange={handleChange} onBlur={handleBlur} value={values.tool_name} />
<div className="error">{errors.tool_name && touched.tool_name && errors.tool_name}</div>
</div>
<div className="form-group-create">
<h3>Tool URL</h3>
<input type="text" name="tool_url" onChange={handleChange} onBlur={handleBlur} value={values.tool_url} />
<div className="error">{errors.tool_url && touched.tool_url && errors.tool_url}</div>
</div>
<div className="form-group-create">
<h3>Tool Description</h3>
<textarea type="text" name="tool_description" onChange={handleChange} onBlur={handleBlur} value={values.tool_description} />
<div className="error">{errors.tool_description && touched.tool_description && errors.tool_description}</div>
</div>
<div className="form-group-create">
<h3>Tool type</h3>
<div className="filter-dropdown-tooltype">
<Dropdown>
<Dropdown.Toggle id="dropdown-basic">{toolTypeArray.filter((type) => type.key === values.tool_type)[0]?.value}</Dropdown.Toggle>
<Dropdown.Menu>
{toolTypeArray.map((type) => (
<Dropdown.Item
key={type.key}
onClick={() => {
setFieldValue('tool_type', type.key);
}}
>
{type.value}
</Dropdown.Item>
))}
</Dropdown.Menu>
</Dropdown>
</div>
</div>
<div className="form-group-create">
<h3>LTI version</h3>
<select name="lti_version" onChange={handleChange} onBlur={handleBlur} value={values.lti_version}>
<option defaultValue="LTI-1p0" value="LTI-1p0">
LTI-1p0
</option>
<option value="LTI-1p3">LTI-1p3</option>
</select>
<div className="error">{errors.lti_version && touched.lti_version && errors.lti_version}</div>
</div>
<div className="form-group-create">
<h3>Consumer Key</h3>
<input type="text" name="tool_consumer_key" onChange={handleChange} onBlur={handleBlur} value={values.tool_consumer_key} />
<div className="error">{errors.tool_consumer_key && touched.tool_consumer_key && errors.tool_consumer_key}</div>
</div>
<div className="form-group-create">
<h3>Access Key</h3>
<input type="text" name="tool_secret_key" onChange={handleChange} onBlur={handleBlur} value={values.tool_secret_key} />
<div className="error">{errors.tool_secret_key && touched.tool_secret_key && errors.tool_secret_key}</div>
</div>
<div className="form-group-create">
<h3>Custom parameters</h3>
<input type="text" name="tool_custom_parameter" onChange={handleChange} onBlur={handleBlur} value={values.tool_custom_parameter} />
<div className="error">{errors.tool_custom_parameter && touched.tool_custom_parameter && errors.tool_custom_parameter}</div>
</div>
<div className="form-group-create">
<h3>Content selection URL</h3>
<input type="text" name="tool_content_selection_url" onChange={handleChange} onBlur={handleBlur} value={values.tool_content_selection_url} />
<div className="error">{errors.tool_content_selection_url && touched.tool_content_selection_url && errors.tool_content_selection_url}</div>
</div>
<div className="form-group-create">
<h3>User (search users from dropdown list only)</h3>
<input
type="text"
name="name"
autoComplete="off"
onChange={async (e) => {
setFieldValue('name', e.target.value);
// eslint-disable-next-line eqeqeq
if (e.target.value == '') {
setStateOrgUsers([]);
return;
}
setLoaderlmsImgUser(true);
const lmsApi = authapi.searchUsers(e.target.value);
lmsApi.then((data) => {
setLoaderlmsImgUser(false);
setStateOrgUsers(data?.users);
});
}}
onBlur={handleBlur}
value={values.name}
/>
{loaderlmsImgUser && <img src={loader} alt="" style={{ width: '25px' }} className="loader" />}
{stateOrgUsers?.length > 0 && (
<ul className="all-users-list">
{stateOrgUsers?.map((user) => (
<li
value={user}
onClick={() => {
setFieldValue('user_id', user.id);
setFieldValue('name', user.name);
setStateOrgUsers([]);
}}
>
{user.name}
<p>
Email:
{user.email}
</p>
</li>
))}
</ul>
)}
<div className="error">{errors.user_id && touched.user_id && errors.user_id}</div>
</div>
</div>
</div>
<div className="button-group">
<button type="submit">Save</button>
<button
type="button"
className="cancel"
onClick={() => {
dispatch(removeActiveAdminForm());
}}
>
Cancel
</button>
</div>
</div>
</form>
)}
</Formik>
</div>
);
}
Example #3
| Source File: table.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 4 votes |
|
function Table(props) {
const {
tableHead,
sortCol,
handleSort,
history,
data,
type,
jobType,
subTypeState,
activePage,
setActivePage,
searchAlertToggler,
searchAlertTogglerStats,
subType,
setCurrentTab,
setChangeIndexValue,
changeIndexValue,
setAllProjectIndexTab,
changeProjectFromorg,
setAllProjectTab,
setModalShow,
setModalShowTeam,
setrowData,
setActivePageNumber,
} = props;
const organization = useSelector((state) => state.organization);
const auth = useSelector((state) => state.auth);
const [visibilityTypeArray, setVisibilityTypeArray] = useState([]);
const { newlyCreated, newlyEdit } = useSelector((state) => state.admin);
const project = useSelector((state) => state.project);
const { paginations } = useSelector((state) => state.ui);
const { activeOrganization, allSuborgList, permission } = organization;
const allState = useSelector((state) => state);
const dispatch = useDispatch();
const [localStateData, setLocalStateData] = useState([]);
const [localOrganizationList, setLocalOrganizationList] = useState(null);
const [localstatePagination, setLocalStatePagination] = useState();
const indexingArray = [
{ indexing: 0, indexing_text: 'NOT REQUESTED' },
{ indexing: 1, indexing_text: 'REQUESTED' },
{ indexing: 3, indexing_text: 'APPROVED' },
{ indexing: 2, indexing_text: 'REJECTED' },
];
useEffect(() => {
(async () => {
if (project?.visibilityTypes.length === 0) {
const { data } = await dispatch(visibilityTypes());
setVisibilityTypeArray(data.data);
} else {
setVisibilityTypeArray(project?.visibilityTypes?.data);
}
})();
}, [project?.visibilityTypes]);
useEffect(() => {
if (allSuborgList?.data) {
setLocalOrganizationList(allSuborgList);
}
}, [allSuborgList]);
//update table after crud
useEffect(() => {
if (type === 'LMS') {
if (newlyCreated) {
setLocalStateData([newlyCreated, ...data?.data]);
} else if (newlyEdit) {
setLocalStateData(
data?.data.map((lms) => {
if (lms.id === newlyEdit?.id) {
return newlyEdit;
} else {
return lms;
}
})
);
}
}
dispatch({
type: actionTypes.NEWLY_EDIT_RESOURCE,
payload: null,
});
dispatch({
type: actionTypes.NEWLY_CREATED_RESOURCE,
payload: null,
});
}, [newlyCreated, newlyEdit]);
//update table after search and first time
useEffect(() => {
if (type === 'LMS' || type === 'Projects' || type === 'DefaultSso' || 'Activities') {
if (data?.data) {
setLocalStateData(data?.data);
} else {
setLocalStateData(data);
}
setLocalStatePagination(data);
}
}, [data]);
const handleDeleteUser = (user) => {
Swal.fire({
title: 'Are you sure you want to delete this User?',
text: 'This action is Irreversible',
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#084892',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!',
}).then((result) => {
if (result.isConfirmed) {
Swal.fire({
title: 'Do you want to preserve user data?',
showCancelButton: true,
confirmButtonColor: '#084892',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes',
}).then((result) => {
const response = dispatch(deleteUserFromOrganization(user?.id, result.isConfirmed ? true : false));
response
.then(() => {
// dispatch(getOrgUsers(organization?.activeOrganization?.id, organization?.activePage, organization?.size, organization?.activeRole));
})
.catch((e) => {
console.log(e);
Swal.fire({
icon: 'error',
title: 'Error',
text: 'User Deletion failed, kindly try again.',
});
});
});
}
});
};
const handleRemoveUser = (user) => {
Swal.fire({
title: 'Are you sure you want to remove this User?',
text: 'This action is Irreversible',
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#084892',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, Remove it!',
}).then((result) => {
if (result.isConfirmed) {
Swal.fire({
title: 'Do you want to preserve user data?',
showCancelButton: true,
confirmButtonColor: '#084892',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes',
}).then((result) => {
const response = dispatch(removeUserFromOrganization(user?.id, result.isConfirmed ? true : false));
response
.then(() => {
// dispatch(getOrgUsers(organization?.activeOrganization?.id, organization?.activePage, organization?.size, organization?.activeRole));
})
.catch((e) => {
console.log(e);
Swal.fire({
icon: 'error',
title: 'Error',
text: 'User Remove failed, kindly try again.',
});
});
});
}
});
};
//const history = useHistory();
return (
<div className="table-data">
{((data?.data?.length > 0 && data?.meta) || (localOrganizationList?.data?.length > 0 && localOrganizationList?.meta)) && (
<AdminPagination
setCurrentTab={setCurrentTab}
subType={subType}
subTypeState={subTypeState}
type={type}
data={data}
activePage={activePage}
setActivePage={setActivePage}
updatePageNumber={updatePageNumber}
localstatePagination={localstatePagination}
/>
)}
<div className="responsive-table">
<table>
<thead>
<tr>
{tableHead?.map((head, keyid) => {
let checkSolCol = sortCol !== '' && sortCol?.includes(head) ? true : false;
return head === 'Users' && permission?.Organization?.includes('organization:view-user') ? (
<th key={keyid}> {head} </th>
) : head !== 'Users' ? (
<th onClick={checkSolCol ? () => handleSort(head, typeof subType != 'undefined' ? subType : type) : ''} className={checkSolCol ? 'sorting-icon' : ''}>
{head}
</th>
) : null;
})}
</tr>
</thead>
<tbody>
{type === 'LMS' &&
subType === 'LMS settings' &&
(localStateData ? (
localStateData?.length > 0 ? (
localStateData?.map((row, counter) => (
<tr key={counter} className="admin-panel-rows">
<td>{row.lms_url}</td>
<td>{row.lms_name}</td>
<td>{row.user?.first_name + ' ' + row.user?.last_name}</td>
<td>{row?.user?.email}</td>
<td>{row?.site_name}</td>
<td>
<div className="admin-panel-dropdown">
{row?.description}
<div>
<AdminDropdown
type={type}
subType="LMS settings"
row={row}
activePage={activePage}
localStateData={localStateData}
setLocalStateData={setLocalStateData}
/>
</div>
</div>
</td>
</tr>
))
) : (
<tr>
<td colSpan="11">
<Alert variant="warning">No integration found.</Alert>
</td>
</tr>
)
) : (
<tr>
<td colSpan="11">
<Alert variant="primary">Loading...</Alert>
</td>
</tr>
))}
{type === 'LMS' &&
subType === 'BrightCove' &&
(localStateData ? (
localStateData?.length > 0 ? (
localStateData?.map((row, counter) => (
<tr key={(row, counter)} className="admin-panel-rows">
<td>{row.organization?.id}</td>
<td>{row.account_id}</td>
<td>{row.account_email}</td>
<td>{row.account_name}</td>
<td>{row.description}</td>
<td>{row.client_id}</td>
<td>{row.client_secret}</td>
<td>
<div className="admin-panel-dropdown">
{row.css_path ? (
<a download href={global.config.resourceUrl + row.css_path} target="_blank">
download
</a>
) : (
'Not Available'
)}
<div>
<AdminDropdown type={type} subType="BrightCove" row={row} activePage={activePage} />
</div>
</div>
</td>
</tr>
))
) : (
<tr>
<td colSpan="11">
<Alert variant="warning">No integration found.</Alert>
</td>
</tr>
)
) : (
<tr>
<td colSpan="11">
<Alert variant="primary">Loading...</Alert>
</td>
</tr>
))}
{type === 'Users' &&
(data?.data?.length > 0 ? (
data?.data.map((user, counter) => (
<tr key={(user, counter)} className="admin-panel-rows">
<td>{user.organization_joined_at ? user.organization_joined_at : 'NA'}</td>
<td>{user.first_name ? user.first_name : 'NA'}</td>
<td>{user.last_name ? user.last_name : 'NA'}</td>
<td>{user.email ? user.email : 'NA'}</td>
<td>{activeOrganization?.name ? activeOrganization?.name : 'NA'}</td>
<td>{user.organization_type ? user.organization_type : 'NA'}</td>
<td>
<div className="admin-panel-dropdown">
{user.organization_role ? user.organization_role : 'NA'}
<div>
<AdminDropdown type={type} user={user} />
</div>
</div>
</td>
</tr>
))
) : searchAlertToggler === 0 || data?.data?.length === 0 ? (
<tr>
<td colSpan="8">
<Alert variant="warning">No User Found</Alert>
</td>
</tr>
) : (
<tr>
<td colSpan="8">
<Alert variant="primary">Loading...</Alert>
</td>
</tr>
))}
{type === 'Organization' &&
(localOrganizationList ? (
localOrganizationList?.data?.length > 0 ? (
localOrganizationList?.data?.map((row, counter) => (
<tr key={counter} className="admin-panel-rows">
<td>
<div className="admin-name-img">
<div
style={{
backgroundImage: row.image?.includes('dev.currikistudio') ? `url(${row.image})` : `url(${global.config.resourceUrl}${row.image})`,
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat',
backgroundSize: 'cover',
}}
className="admin-img"
>
{/* <img src={global.config.resourceUrl + row.image} alt="" /> */}
</div>
<Link
className="admin-name"
to="#"
onClick={async () => {
Swal.fire({
title: 'Please Wait !',
html: 'Updating View ...',
allowOutsideClick: false,
onBeforeOpen: () => {
Swal.showLoading();
},
});
if (permission?.Organization?.includes('organization:view')) await dispatch(getOrganization(row.id));
Swal.close();
dispatch({
type: actionTypes.UPDATE_PAGINATION,
payload: [...paginations, row],
});
if (row.projects_count > 0) {
if (permission?.Organization?.includes('organization:view')) await dispatch(getOrganization(row.id));
dispatch(clearOrganizationState());
dispatch(getRoles());
}
}}
>
{row.name}
</Link>
</div>
</td>
<td>{row.domain}</td>
<td>
{row.projects_count > 0 ? (
<div
className="view-all"
onClick={async () => {
Swal.fire({
title: 'Please Wait !',
html: 'Updating View ...',
allowOutsideClick: false,
onBeforeOpen: () => {
Swal.showLoading();
},
});
if (permission?.Organization?.includes('organization:view')) await dispatch(getOrganization(row.id));
Swal.close();
dispatch({
type: actionTypes.UPDATE_PAGINATION,
payload: [...paginations, row],
});
if (row.projects_count > 0) {
if (permission?.Organization?.includes('organization:view')) await dispatch(getOrganization(row.id));
dispatch(clearOrganizationState());
dispatch(getRoles());
dispatch(setActiveTab('Projects'));
}
}}
>
{row.projects_count}
</div>
) : (
'N/A'
)}
</td>
<td>
{row.suborganization_count > 0 ? (
<Link
className="view-all"
onClick={async () => {
if (row.suborganization_count > 0) {
Swal.fire({
title: 'Please Wait !',
html: 'Updating View ...',
allowOutsideClick: false,
onBeforeOpen: () => {
Swal.showLoading();
},
});
if (permission?.Organization?.includes('organization:view')) await dispatch(getOrganization(row.id));
Swal.close();
dispatch({
type: actionTypes.UPDATE_PAGINATION,
payload: [...paginations, row],
});
dispatch(clearOrganizationState());
dispatch(getRoles());
}
}}
>
{row.suborganization_count || 0}
</Link>
) : (
'N/A'
)}
</td>
{permission?.Organization?.includes('organization:view-user') && (
<td>
{row.users_count > 0 ? (
<Link
className="view-all"
onClick={async () => {
if (row.users_count > 0) {
Swal.fire({
title: 'Please Wait !',
html: 'Updating View ...',
allowOutsideClick: false,
onBeforeOpen: () => {
Swal.showLoading();
},
});
if (permission?.Organization?.includes('organization:view')) await dispatch(getOrganization(row.id));
Swal.close();
dispatch({
type: actionTypes.UPDATE_PAGINATION,
payload: [...paginations, row],
});
dispatch(clearOrganizationState());
dispatch(getRoles());
dispatch(setActiveTab('Users'));
}
}}
>
{row.users_count}
</Link>
) : (
'N/A'
)}
</td>
)}
<td>
<div className="admin-panel-dropdown">
{row.teams_count > 0 ? (
<Link
to={`/org/${allState?.organization?.currentOrganization?.domain}/teams`}
className="view-all"
onClick={async () => {
if (permission?.Organization?.includes('organization:view')) await dispatch(getOrganization(row.id));
dispatch(clearOrganizationState());
dispatch(getRoles());
}}
>
{row.teams_count}
</Link>
) : (
'N/A'
)}
<div>
<AdminDropdown type={type} row={row} />
</div>
</div>
</td>
</tr>
))
) : (
<tr>
<td colSpan="9" style={{ textAlign: 'center' }}>
<Alert variant="warning"> No sub-organization available</Alert>
</td>
</tr>
)
) : (
<tr>
<td colSpan="9">
<Alert variant="primary">Loading...</Alert>
</td>
</tr>
))}
{type === 'Projects' &&
subType === 'All Projects' &&
(localStateData ? (
localStateData?.length > 0 ? (
localStateData.map((row, counter) => {
const createNew = new Date(row.created_at);
const updateNew = new Date(row.updated_at);
return (
<tr key={counter} className="admin-panel-rows">
<td>
<div className="admin-name-img">
<div
style={{
backgroundImage: row.thumb_url.includes('pexels.com') ? `url(${row.thumb_url})` : `url(${global.config.resourceUrl}${row.thumb_url})`,
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
}}
className="admin-img"
></div>
<Link className="admin-name" to={`/org/${organization?.currentOrganization?.domain}/project/${row.id}/preview`}>
{row.name}
</Link>
</div>
</td>
<td>{new Date(createNew.toDateString()).toLocaleDateString('en-US')}</td>
<td>
<div className="admin-description">{row.description}</div>
</td>
<td>{row.id}</td>
<td>{row.team?.name ? `(T)${row.team?.name}` : row.users?.[0]?.name}</td>
<td>
{permission?.Organization.includes('organization:edit-project') ? (
<div className="filter-dropdown-table">
<Dropdown>
<Dropdown.Toggle id="dropdown-basic">
{row.indexing_text === 'NOT REQUESTED' ? '' : row.indexing_text}
<FontAwesomeIcon icon="chevron-down" />
</Dropdown.Toggle>
<Dropdown.Menu>
{indexingArray.map(
(element) =>
element.indexing_text !== 'NOT REQUESTED' && (
<Dropdown.Item
onClick={async () => {
const result = await adminService.updateIndex(row.id, element.indexing);
if (result?.message) {
const editRow = {
...row,
indexing: element.indexing,
indexing_text: element.indexing_text,
};
setLocalStateData(localStateData.map((indexing) => (indexing.id === row.id ? editRow : indexing)));
Swal.fire({
icon: 'success',
text: result.message,
});
} else {
Swal.fire({
icon: 'error',
text: 'Error',
});
}
}}
>
{element.indexing_text}
</Dropdown.Item>
)
)}
</Dropdown.Menu>
</Dropdown>
</div>
) : (
row.indexing_text
)}
</td>
<td>
{permission?.Organization.includes('organization:edit-project') ? (
<div className="filter-dropdown-table">
<Dropdown>
<Dropdown.Toggle id="dropdown-basic">
{visibilityTypeArray?.filter((element) => element.id === row.organization_visibility_type_id)[0]?.display_name}
<FontAwesomeIcon icon="chevron-down" />
</Dropdown.Toggle>
<Dropdown.Menu>
{visibilityTypeArray?.map((element) => (
<Dropdown.Item
onClick={async () => {
Swal.showLoading();
const result = await dispatch(updateProjectAction(row.id, { ...row, organization_visibility_type_id: element.id }));
if (result) {
setLocalStateData(localStateData.map((element1) => (element1.id === row.id ? result : element1)));
}
Swal.close();
}}
>
{element.display_name}
</Dropdown.Item>
))}
</Dropdown.Menu>
</Dropdown>
</div>
) : (
visibilityTypeArray?.filter((element) => element.id === row.organization_visibility_type_id)[0]?.display_name
)}
</td>
<td>
{permission?.Organization.includes('organization:edit-project') ? (
<div className="filter-dropdown-table">
<Dropdown>
<Dropdown.Toggle id="dropdown-basic">
{row.shared ? 'Enabled' : 'Disabled'}
<FontAwesomeIcon icon="chevron-down" />
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item
onClick={async () => {
if (!row.shared) {
const result = await dispatch(toggleProjectShareAction(row.id, row.name, true));
if (result) {
setLocalStateData(localStateData.map((element) => (element.id === row.id ? result : element)));
}
}
}}
>
Enable
</Dropdown.Item>
<Dropdown.Item
onClick={async () => {
if (row.shared) {
const result = await dispatch(toggleProjectShareRemovedAction(row.id, row.name, true));
if (result) {
setLocalStateData(localStateData.map((element) => (element.id === row.id ? result : element)));
}
}
}}
>
Disable
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</div>
) : row.shared ? (
'Enabled'
) : (
'Disabled'
)}
</td>
{/* <td>{String(row.starter_project)}</td> */}
{/* <td>{row.status_text}</td> */}
<td>
<div className="admin-panel-dropdown">
{new Date(updateNew.toDateString()).toLocaleDateString('en-US')}
<div>
<AdminDropdown
activePage={activePage}
setAllProjectTab={setAllProjectTab}
setLocalStateData={setLocalStateData}
localStateData={localStateData}
type={type}
row={row}
setModalShow={setModalShow}
setrowData={setrowData}
setActivePageNumber={setActivePageNumber}
/>
</div>
</div>
</td>
</tr>
);
})
) : (
<tr>
<td colSpan="11">
<Alert variant="warning">No result found.</Alert>
</td>
</tr>
)
) : (
<tr>
<td colSpan="13">
<Alert variant="primary">Loading data...</Alert>
</td>
</tr>
))}
{type === 'Projects' &&
subType === 'Exported Projects' &&
(localStateData ? (
localStateData?.length > 0 ? (
localStateData?.map((row, counter) => {
// console.log(row);
return (
<tr key={counter} className="org-rows">
<td>{row.project}</td>
<td>{row.created_at}</td>
<td>{row.will_expire_on}</td>
{permission?.Organization?.includes('organization:download-project') ? (
<td>
<a href={row.link} target="_blank">
Download
</a>
</td>
) : (
<td>Not Authorized</td>
)}
</tr>
);
})
) : (
<tr>
<td colSpan="11">
<Alert variant="warning">No result found.</Alert>
</td>
</tr>
)
) : (
<tr>
<td colSpan="13">
<Alert variant="primary">Loading data...</Alert>
</td>
</tr>
))}
{type === 'Activities' &&
subType === 'Activity Types' &&
(localStateData ? (
localStateData?.length > 0 ? (
localStateData?.map((row) => (
<tr key={'act-type-' + row.id} className="admin-panel-rows">
<td>
<div className="admin-name-img">
<div
style={{
backgroundImage: `url(${global.config.resourceUrl + row.image})`,
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat',
backgroundSize: 'contain',
}}
className="image-size"
></div>
<Link className="admin-name">{row.title}</Link>
</div>
</td>
<td>{row.order}</td>
<td>
<div className="admin-panel-dropdown">
<div className="admin-description-main">
<div className="admin-description2">
{row.activityItems.map((item, i) => (
<div>{row.activityItems.length === i + 1 ? item.title : item.title + ','}</div>
))}
</div>
<div className="admin-description2-hover">
{row.activityItems.map((item, i) => (
<>{row.activityItems.length === i + 1 ? item.title : item.title + ','}</>
))}
</div>
</div>
<div>
<AdminDropdown type={type} subType={subType} row={row} activePage={activePage} />
</div>
</div>
</td>
</tr>
))
) : (
<tr>
<td colSpan="11">
<Alert variant="warning">No activity type found.</Alert>
</td>
</tr>
)
) : (
<tr>
<td colSpan="11">
<Alert variant="primary">Loading...</Alert>
</td>
</tr>
))}
{type === 'Activities' &&
subType === 'Activity Items' &&
(data?.data ? (
data?.data?.length > 0 ? (
data?.data.map((item, counter) => (
<tr key={counter} className="admin-panel-rows">
<td>
<div className="admin-name-img">
<div
style={{
backgroundImage: `url(${global.config.resourceUrl + item.image})`,
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat',
backgroundSize: 'contain',
}}
className="image-size"
></div>
<Link className="admin-name"> {item.title}</Link>
</div>
</td>
<td>{item.order}</td>
<td>
<div className="admin-panel-dropdown">
<div className="">
<div className="d-flex">
<h6 className="m-0 admin-mata-heading">Activity Type:</h6>
<span>{item?.activityType?.title}</span>
</div>
<div className="d-flex">
<h6 className="m-0 admin-mata-heading">Item Type:</h6>
<span>{item.type}</span>
</div>
<div className="d-flex">
<h6 className="m-0 admin-mata-heading">Activity Item Value:</h6>
<span>{item.h5pLib}</span>
</div>
</div>
<div>
<AdminDropdown type1={item} type={type} subType={subType} />
</div>
</div>
</td>
{/* <td>
<div className="links">
<Link
onClick={() => {
dispatch(selectActivityItem(item));
dispatch(setActiveAdminForm('edit_activity_item'));
}}
>
Edit
</Link>
<Link
onClick={() => {
Swal.fire({
title: 'Are you sure?',
text: "You won't be able to revert this!",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#084892',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!',
}).then(async (result) => {
if (result.isConfirmed) {
Swal.showLoading();
const resultDel = await dispatch(deleteActivityItem(item.id));
if (resultDel) {
Swal.fire({
text: 'You have successfully deleted the activity item',
icon: 'success',
showCancelButton: false,
confirmButtonColor: '#084892',
cancelButtonColor: '#d33',
confirmButtonText: 'OK',
}).then((result) => {
if (result.isConfirmed) {
dispatch(getActivityItems('', 1));
}
});
}
}
});
}}
>
Delete
</Link>
</div>
</td> */}
</tr>
))
) : (
<tr>
<td colSpan="5">
<Alert variant="warning"> No activity item found</Alert>
</td>
</tr>
)
) : (
<tr>
<td colSpan="5">
<Alert variant="primary">Loading...</Alert>
</td>
</tr>
))}
{type === 'Activities' &&
subType === 'Subjects' &&
(localStateData ? (
localStateData?.length > 0 ? (
localStateData?.map((row) => (
<tr key={'subject-' + row.id} className="admin-panel-rows">
<td>{row.name}</td>
<td>{row.order}</td>
<td>
<div className="admin-panel-dropdown">
<div>
<AdminDropdown type={type} subType="Subjects" row={row} activePage={activePage} />
</div>
</div>
</td>
</tr>
))
) : (
<tr>
<td colSpan="11">
<Alert variant="warning">No subject found.</Alert>
</td>
</tr>
)
) : (
<tr>
<td colSpan="11">
<Alert variant="primary">Loading...</Alert>
</td>
</tr>
))}
{type === 'Activities' &&
subType === 'Education Level' &&
(localStateData ? (
localStateData?.length > 0 ? (
localStateData?.map((row) => (
<tr key={'edu-lvl-' + row.id} className="admin-panel-rows">
<td>{row.name}</td>
<td>{row.order}</td>
<td>
<div className="admin-panel-dropdown">
<div>
<AdminDropdown type={type} subType="Education Level" row={row} activePage={activePage} />
</div>
</div>
</td>
</tr>
))
) : (
<tr>
<td colSpan="11">
<Alert variant="warning">No Education level found.</Alert>
</td>
</tr>
)
) : (
<tr>
<td colSpan="11">
<Alert variant="primary">Loading...</Alert>
</td>
</tr>
))}
{type === 'Activities' &&
subType === 'Author Tags' &&
(localStateData ? (
localStateData?.length > 0 ? (
localStateData?.map((row) => (
<tr key={'auth-tag-' + row.id} className="admin-panel-rows">
<td>{row.name}</td>
<td>{row.order}</td>
<td>
<div className="admin-panel-dropdown">
<div>
<AdminDropdown type={type} subType="Author Tags" row={row} activePage={activePage} />
</div>
</div>
</td>
</tr>
))
) : (
<tr>
<td colSpan="11">
<Alert variant="warning">No Author tag found.</Alert>
</td>
</tr>
)
) : (
<tr>
<td colSpan="11">
<Alert variant="primary">Loading...</Alert>
</td>
</tr>
))}
{type === 'Activities' &&
subType === 'Activity Layouts' &&
(localStateData ? (
localStateData?.length > 0 ? (
localStateData?.map((row) => (
<tr key={'act-lay-' + row.id} className="admin-panel-rows">
<td>{row.title}</td>
<td>{row.order}</td>
<td>
<div className="admin-panel-dropdown">
--
<div>
<AdminDropdown type={type} subType="Activity Layouts" row={row} activePage={activePage} />
</div>
</div>
</td>
</tr>
))
) : (
<tr>
<td colSpan="11">
<Alert variant="warning">No Activity layout found.</Alert>
</td>
</tr>
)
) : (
<tr>
<td colSpan="11">
<Alert variant="primary">Loading...</Alert>
</td>
</tr>
))}
{type === 'DefaultSso' &&
(localStateData ? (
localStateData?.length > 0 ? (
localStateData?.map((row, counter) => (
<tr key={counter} className="admin-panel-rows">
<td>{row?.site_name}</td>
<td>{row.lms_url}</td>
<td>{row.lms_name}</td>
<td>{row.lti_client_id}</td>
<td>
<div className="admin-panel-dropdown">
<div>{row?.description}</div>
<div>
<AdminDropdown type={type} row={row} activePage={activePage} />
</div>
</div>
</td>
</tr>
))
) : (
<tr>
<td colSpan="11">
<Alert variant="warning">No Default SSO integration found.</Alert>
</td>
</tr>
)
) : (
<tr>
<td colSpan="11">
<Alert variant="primary">Loading...</Alert>
</td>
</tr>
))}
{type === 'LMS' &&
subType === 'LTI Tools' &&
(localStateData ? (
localStateData?.length > 0 ? (
localStateData?.map((row, counter) => (
<tr key={counter} className="admin-panel-rows">
<td>{row.tool_name}</td>
<td>{row.tool_url}</td>
<td>{toolTypeArray.filter((type) => type.key === row.tool_type)[0]?.value}</td>
<td>{`${row.user.first_name} ${row.user.last_name}`}</td>
<td>{row.tool_description}</td>
<td>
<div className="admin-panel-dropdown">
{row.lti_version}
<div>
<AdminDropdown
type={type}
subType="LTI Tools"
row={row}
activePage={activePage}
localStateData={localStateData}
setLocalStateData={setLocalStateData}
/>
</div>
</div>
</td>
</tr>
))
) : (
<tr>
<td colSpan="11">
<Alert variant="warning">No LTI Tool found.</Alert>
</td>
</tr>
)
) : (
<tr>
<td colSpan="11">
<Alert variant="primary">Loading...</Alert>
</td>
</tr>
))}
{type === 'Teams' &&
(Object.keys(data).length > 0 ? (
data?.data?.length > 0 ? (
data?.data.map((row, counter) => (
<tr key={counter} className="admin-panel-rows">
<td>{row.name.length > 30 ? row.name.substring(0, 30).concat('...') : row.name}</td>
<td>{row.created_at?.split('T')[0]}</td>
<td>{row.description.length > 30 ? row.description.substring(0, 30).concat('...') : row.description}</td>
<td>{row?.users?.length}</td>
<td>{row?.projects?.length}</td>
<td>
<div className="admin-panel-dropdown">
{row?.updated_at?.split('T')[0]}
<div>
<AdminDropdown type={type} row={row} setModalShowTeam={setModalShowTeam} />
</div>
</div>
</td>
</tr>
))
) : (
<tr>
<td colSpan="11">
<Alert variant="warning">No team found.</Alert>
</td>
</tr>
)
) : (
<tr>
<td colSpan="11">
<Alert variant="primary">Loading...</Alert>
</td>
</tr>
))}
</tbody>
</table>
</div>
{((data?.data?.length > 0 && data?.meta) || (localOrganizationList?.data?.length > 0 && localOrganizationList?.meta)) && (
<AdminPagination
setCurrentTab={setCurrentTab}
subType={subType}
subTypeState={subTypeState}
type={type}
data={data}
activePage={activePage}
setActivePage={setActivePage}
updatePageNumber={updatePageNumber}
localstatePagination={localstatePagination}
/>
)}
</div>
);
}
