react-bootstrap#Tabs JavaScript Examples
The following examples show how to use
react-bootstrap#Tabs.
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: index.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 6 votes |
|
function SharePreviewPopup(url, projectName, playlistName = null) {
confirmAlert({
// eslint-disable-next-line react/prop-types
customUI: ({ onClose }) => (
<div className="share-project-preview-url project-share-check">
<Tabs defaultActiveKey="profile" id="uncontrolled-tab-example">
<Tab eventKey="profile" title="Share">
{playlistName ? (
<ShareProject
url={url}
playlistName={playlistName}
onClose={onClose}
/>
) : (<ShareProject url={url} projectName={projectName} onClose={onClose} />)}
</Tab>
<Tab eventKey="home" title="Embed">
{playlistName ? (
<Embed
url={url}
playlistName={playlistName}
onClose={onClose}
/>
) : (
<Embed
url={url}
projectName={projectName}
onClose={onClose}
/>
)}
</Tab>
</Tabs>
</div>
),
});
return <div />;
}
Example #2
| Source File: TabsMenu.js From gatsby-ipfs-web-wallet with MIT License | 6 votes |
|
function TabsMenu (props) {
const menuComponents = MenuComponents(props)
return (
<>
{menuComponents.length > 0 && (
<Tabs
defaultActiveKey='Configure'
id='configure-tabs'
onSelect={props.onSelect}
>
<Tab title='General' eventKey='Configure' />
{menuComponents.map((menuItem, i) => (
<Tab
key={`${menuItem.id}-${i}`}
eventKey={menuItem.key}
title={menuItem.key}
{...props}
/>
))}
</Tabs>
)}
</>
)
}
Example #3
| Source File: userCategoriesTopicsContainer.js From community-forum-frontend with GNU General Public License v3.0 | 6 votes |
|
function UserCategoriesTopicsContainer(props) {
return (
<Tabs variant="pills" defaultActiveKey="categories">
<Tab
eventKey="categories"
title={`Categories (${props.categoriesCreated.length})`}
>
<Row className="user-categories-topics-list">
{props.categoriesCreated.map((category) => (
<Col key={category._id} md={props.columnValue}>
<CategoryTopicCard entityType="category" category={category} />
</Col>
))}
</Row>
</Tab>
<Tab
eventKey="topics"
title={`Topics (${props.topicsCreated.length})`}
>
<Row className="user-categories-topics-list">
{props.topicsCreated.map((topic) => (
<Col key={topic._id} md={props.columnValue}>
<CategoryTopicCard
entityType="topic"
category={{ _id: topic.parentCategory }}
topic={topic}
/>
</Col>
))}
</Row>
</Tab>
</Tabs>
);
}
Example #4
| Source File: InformationContent.jsx From mapstore2-cadastrapp with GNU General Public License v3.0 | 6 votes |
|
export default function InformationContent({
parcelle,
owners = [],
letters = [],
fiuc = {},
fiucHistoryMutation = [],
fiscalSubDiv = [],
authLevel = {},
additionalData = {}
}) {
const { isCNIL1, isCNIL2 } = authLevel; // TODO: get from state/props
return (
<Tabs defaultActiveKey={1} id="uncontrolled-tab-example" onSelect={() => /* refresh table column sizes */ setTimeout(() => {window.dispatchEvent(new Event('resize'));}, 500)}>
<Tab eventKey={1} title={<Message msgId="cadastrapp.duc.parcelle"/>}>
<Plot isCNIL1={isCNIL1} isCNIL2={isCNIL2} parcelle={parcelle} fiuc={fiuc} {...additionalData}/>
</Tab>
{isCNIL1 || isCNIL2 ? <Tab eventKey={2} title={<Message msgId="cadastrapp.duc.propietaire" />}>
<Owners owners={owners} parcelle={parcelle} />
</Tab> : undefined}
{isCNIL1 || isCNIL2 ? <Tab eventKey={3} title={<Message msgId="cadastrapp.duc.copropietaire" />}>
<CoOwners parcelle={parcelle}/>
</Tab> : undefined}
{isCNIL2 ? <Tab eventKey={4} title={<Message msgId="cadastrapp.duc.batiments" />}>
<Buildings parcelle={parcelle} letters={letters}/>
</Tab> : undefined}
{isCNIL2 ? <Tab eventKey={5} title={<Message msgId="cadastrapp.duc.subdiv" />}>
<FiscalSubDivisions parcelle={parcelle} fiscalSubDiv={fiscalSubDiv} />
</Tab> : undefined}
<Tab eventKey={6} title={<Message msgId="cadastrapp.duc.histomut" />}>
<HistoryMutation parcelle={parcelle} fiucHistoryMutation={fiucHistoryMutation} />
</Tab>
</Tabs>
);
}
Example #5
| Source File: OwnersSearch.jsx From mapstore2-cadastrapp with GNU General Public License v3.0 | 6 votes |
|
export default function OwnersSearch({ loading, onOwnersSearch = () => {}}) {
const [currentTab, setCurrentTab] = useState(SEARCH_TYPES.USER);
const [searchState, setFormState, resetFormState] = useFormState();
return (
<div className="owners-search">
<h3><Message msgId={'cadastrapp.proprietaire.title'}/></h3>
<Tabs
onSelect={k => setCurrentTab(k)}
className="not-scrolled-tab"
activeKey={currentTab}
defaultActiveKey={SEARCH_TYPES.USER}>
<Tab
eventKey={SEARCH_TYPES.USER} title={<Message msgId={'cadastrapp.proprietaire.tab1'}/>}>
<User
values={searchState?.[SEARCH_TYPES.USER] ?? {}}
setValue={(key, value) => setFormState(SEARCH_TYPES.USER, key, value)} />
</Tab>
<Tab eventKey={SEARCH_TYPES.OWNER_ID} title={<Message msgId={'cadastrapp.proprietaire.tab2'}/>}>
<OwnerId
values={searchState?.[SEARCH_TYPES.OWNER_ID] ?? {}}
setValue={(key, value) => setFormState(SEARCH_TYPES.OWNER_ID, key, value)} />
</Tab>
<Tab eventKey={SEARCH_TYPES.OWNER_LOT} title={<Message msgId={'cadastrapp.proprietaire.tab3'}/>}>
<Lot
values={searchState?.[SEARCH_TYPES.OWNER_LOT] ?? {}}
setValue={(key, value) => setFormState(SEARCH_TYPES.OWNER_LOT, key, value)} />
</Tab>
</Tabs>
<SearchButtons
loading={loading}
valid={isSearchValid(currentTab, searchState[currentTab])}
onClear={() => resetFormState(currentTab)}
onSearch={() => {
onOwnersSearch(SEARCH_TYPES.USER, searchState[currentTab]);
}} />
</div>
);
}
Example #6
| Source File: hardwareWallets.js From xpub-tool with MIT License | 6 votes |
|
HardwareWallets = ({ purpose, accountNumber, network }) => {
const path = accountDerivationPath({ purpose, accountNumber, network })
return (
<Tabs id="hardware-wallet-selector">
{[LEDGER, TREZOR].map(type => (
<Tab key={type} eventKey={type} title={type.toUpperCase()}>
<ExtPubKeyImporter
key={path}
network={network}
bip32Path={path}
keystore={type}
/>
</Tab>
))}
</Tabs>
)
}
Example #7
| Source File: Participation.js From Website2020 with MIT License | 5 votes |
|
function Posts() {
return (
<>
<div className="section landing-section">
<Container className="text-center">
<Tabs defaultActiveKey="studentcompetitions" id="uncontrolled-tab-example" className="">
<Tab eventKey="studentcompetitions" title="Competitions" className="tab-body">
<Row>
<Col md="6" className="my-auto">
<h2 className="mt-0 mb-3 tab-heading">Student Competitions</h2>
<p className="tab-content">
We aim to participate in National and International
student-level AUV compeititions - Robosub (organised by AUVSI),
Singapore AUV Challenge, and the NIOT-Student AUV Challenge.
</p>
</Col>
<Col md="6" className="text-center">
<img src={combinedimage} className="tab-image" />
</Col>
</Row>
</Tab>
<Tab eventKey="researchpotential" title="Research" className="tab-body">
<Row>
<Col md="6" className="my-auto">
<h2 className="mt-0 mb-3 tab-heading">Research Potential</h2>
<p className="tab-content">
Contribute to the development in the fields of marine
technology, and implement cutting-edge research ideas to our
vehicles
</p>
</Col>
<Col md="6" className="text-center">
<img src={resimage} className="tab-image" />
</Col>
</Row>
</Tab>
<Tab eventKey="training" title="Training" className="tab-body">
<Row>
<Col md="6" className="my-auto">
<h2 className="mt-0 mb-3 tab-heading">Training</h2>
<p className="tab-content">
Team AUV-IITK provides training to all its new recruits in the
various field of Robotics. It is because of this training that
many of the past members of team AUV-IITK are pursuing their
careers in robotics and doing exceptionally well owing to their
strong foundation.
</p>
</Col>
<Col md="6" className="text-center">
<img src={trainimage} className="mt-3 mb-3 tab-image" />
</Col>
</Row>
</Tab>
<Tab eventKey="socialprojects" title="Community" className="tab-body">
<Row>
<Col md="6" className="my-auto">
<h2 className="mt-0 mb-3 tab-heading">Social Projects</h2>
<p className="tab-content">
Apart from Robotics competitions, team AUV-IITK also actively
participates various hackathon and undertakes projects owing its
responsibility to the society.
</p>
</Col>
<Col md="6" className="text-center">
<img src={csrimage} className="tab-image" />
</Col>
</Row>
</Tab>
</Tabs>
</Container>
</div>
</>
)
}
Example #8
| Source File: KeyFeatures.js From Website2020 with MIT License | 5 votes |
|
function Posts() {
useEffect(() => {
window.scrollTo(0, 0);
});
return (
<>
<div className="mt-5">
<Container>
<div className="title-block">
<Row className="mt-5 justify-content-center heading-component">
<div style={{ textAlign: 'center', marginBottom:'20px' }}>
<h2 style={{ fontSize: "4.5rem", margin:'0' }}>ANAHITA</h2>
{/* <h3 style={{ fontSize: "3rem" }}>The Goddess of Water</h3> */}
</div>
</Row>
</div>
<Row className="d-flex col-main justify-content-center">
<Col sm="12" lg="8" className="my-auto text-center mt-5">
<div className="iframe-container">
<iframe style={{ boxShadow: 'none' }} title="A 3D model" className="cad-model sketchfab-responsive" src="https://sketchfab.com/models/21c78ab51dda4c7a9445b4fb0b877e22/embed?autospin=1&autostart=1&preload=1" frameborder="0" allow="autoplay; fullscreen; vr" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
</div>
</Col>
<Col sm="12" lg="4" className="featureCol my-auto">
<div className="briefspec">
<Tabs defaultActiveKey="home" id="uncontrolled-tab">
<Tab className="tab-content" eventKey="home" title="Overview">
<div className="my-1">
{specs.brief}
</div>
<div>
<a className="tdr-button" href="https://drive.google.com/file/d/1AN2uvKzoERqeampDUTVilUPUmSCickFL/view?usp=sharing" target="_blank" rel="noopener noreferrer">
Report
</a>
</div>
</Tab>
<Tab className="tab-content" eventKey="specs" title="Specifications">
<Table bordered className="my-1">
<tbody>
{
specs.specsTable.map(
(data) => (
<tr>
<td style={{ width: '30%', fontWeight: 'bold' }}>{data.name}</td>
<td>{data.spec}</td>
</tr>
)
)
}
</tbody>
</Table>
</Tab>
</Tabs>
</div>
</Col>
</Row>
</Container>
</div>
</>
);
}
Example #9
| Source File: KeyFeatures.js From Website2020 with MIT License | 5 votes |
|
function Posts() {
useEffect(() => {
window.scrollTo(0, 0);
});
return (
<>
<div className="mt-5">
<Container>
<div className="title-block">
<Row className="mt-5 justify-content-center heading-component">
<div style={{ textAlign: 'center', marginBottom:'20px' }}>
<h2 style={{ fontSize: "4.5rem", margin:'0' }}>TARANG</h2>
{/* <h3 style={{ fontSize: "3rem" }}>The Goddess of Water</h3> */}
</div>
</Row>
</div>
<Row className="d-flex col-main justify-content-center">
<Col sm="12" lg="8" className="my-auto text-center mt-5">
<div className="iframe-container">
<iframe style={{ boxShadow: 'none' }} title="A 3D model" className="cad-model sketchfab-responsive" src="https://sketchfab.com/models/de442321b07d49c09620569fa592889f/embed?autospin=1&autostart=1&preload=1" frameborder="0" allow="autoplay; fullscreen; vr" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
</div>
</Col>
<Col sm="12" lg="4" className="featureCol my-auto">
<div className="briefspec">
<Tabs defaultActiveKey="home" id="uncontrolled-tab">
<Tab className="tab-content" eventKey="home" title="Overview">
<div className="my-1 brief">
{specs.brief}
</div>
<div>
<a className="tdr-button" href="https://drive.google.com/file/d/16TP7bU2MGEFecJbKzfMHkA8Lb3V4XeNi/view?usp=sharing" target="_blank" rel="noopener noreferrer">
Report
</a>
</div>
</Tab>
<Tab className="tab-content" eventKey="specs" title="Specifications">
<Table bordered className="my-1">
<tbody>
{
specs.specsTable.map(
(data) => (
<tr>
<td style={{ width: '30%', fontWeight: 'bold' }}>{data.name}</td>
<td>{data.spec}</td>
</tr>
)
)
}
</tbody>
</Table>
</Tab>
</Tabs>
</div>
</Col>
</Row>
</Container>
</div>
</>
);
}
Example #10
| Source File: KeyFeatures.js From Website2020 with MIT License | 5 votes |
|
function Posts() {
useEffect(() => {
window.scrollTo(0, 0);
});
return (
<>
<div className="mt-5">
<Container>
<div className="title-block">
<Row className="mt-5 justify-content-center heading-component">
<div style={{ textAlign: 'center', marginBottom:'20px' }}>
<h2 style={{ fontSize: "4.5rem", margin:'0' }}>VARUN</h2>
{/* <h3 style={{ fontSize: "3rem" }}>The First of them</h3> */}
</div>
</Row>
</div>
<Row className="d-flex col-main justify-content-center">
<Col sm="12" lg="8" className="my-auto text-center mt-5">
<div className="iframe-container">
<iframe style={{ boxShadow: 'none' }} title="A 3D model" className="cad-model sketchfab-responsive" src="https://sketchfab.com/models/6e1274e10d9e4b6a922a5ed0baf9445f/embed?autospin=1&autostart=1&preload=1" frameborder="0" allow="autoplay; fullscreen; vr" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
</div>
</Col>
<Col sm="12" lg="4" className="featureCol my-auto">
<div className="briefspec">
<Tabs defaultActiveKey="home" id="uncontrolled-tab">
<Tab className="tab-content" eventKey="home" title="Overview">
<div className="my-1">
{specs.brief}
</div>
<div>
<a className="tdr-button" href="https://drive.google.com/file/d/0B952Pi5TJ8RGcWJRUWF5YllsM2M/view?resourcekey=0-YEob3LFfYmo5QhRv_96zdA" target="_blank" rel="noopener noreferrer">
Report
</a>
</div>
</Tab>
<Tab className="tab-content" eventKey="specs" title="Specifications">
<Table bordered className="my-1">
<tbody>
{
specs.specsTable.map(
(data) => (
<tr>
<td style={{ width: '30%', fontWeight: 'bold' }}>{data.name}</td>
<td>{data.spec}</td>
</tr>
)
)
}
</tbody>
</Table>
</Tab>
</Tabs>
</div>
</Col>
</Row>
</Container>
</div>
</>
);
}
Example #11
| Source File: activityOptions.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 5 votes |
|
function MyVerticallyCenteredModal(props) {
const { activity, activeType } = props;
return (
<Modal
{...props}
size="lg"
className="video_activity"
aria-labelledby="contained-modal-title-vcenter"
centered
>
<Modal.Header closeButton>
<Modal.Title id="contained-modal-title-vcenter">
<img src={logo} alt="" />
</Modal.Title>
</Modal.Header>
<Modal.Body>
<Tabs defaultActiveKey={activeType} id="uncontrolled-tab-example">
<Tab eventKey="demo" title="Demo">
{!!activity && activity.demo_activity_id ? (
<Suspense fallback={<div>Loading</div>}>
<H5PPreview
activityId={activity.demo_activity_id.trim()}
tokenrequire={false}
showltipreview
/>
</Suspense>
) : (
<div className="stayTuned">
<h1>Stay Tuned!</h1>
<h5>Demo will be available Soon</h5>
</div>
)}
</Tab>
<Tab eventKey="video" title="Video">
{!!activity && !!activity.demo_video_id ? (
<iframe
width="100%"
height="400"
src={
`https://www.youtube.com/embed/${activity.demo_video_id.split('/').length > 0
&& activity.demo_video_id.split('/')[activity.demo_video_id.split('/').length - 1]}`
}
title={activity.demo_video_id}
/>
) : (
<div className="stayTuned">
<h1>Stay Tuned!</h1>
<h5>Video will be available Soon</h5>
</div>
)}
</Tab>
</Tabs>
</Modal.Body>
</Modal>
);
}
Example #12
| Source File: ipfs-tabs.js From gatsby-ipfs-web-wallet with MIT License | 5 votes |
|
render () {
const { commandOutput } = _this.state
const { statusOutput, appStatusOutput } = _this.props
return (
<Row>
<Col md={12}>
<Tabs
defaultActiveKey='status'
id='ipfs-coord-tabs'
className='mb-3 nav-tabs-custom'
>
<Tab eventKey='status' title='Status'>
<Text
id='statusLog'
name='statusLog'
inputType='textarea'
labelPosition='none'
rows={20}
readOnly
value={appStatusOutput}
onChange={() => {
// Prevents DOM error
}}
/>
</Tab>
<Tab eventKey='ipfs-coord' title='IPFS Coord'>
<Text
id='ipfsCoordLog'
name='ipfsCoordLog'
inputType='textarea'
labelPosition='none'
rows={20}
readOnly
value={statusOutput}
onChange={() => {
// Prevents DOM error
}}
/>
</Tab>
<Tab eventKey='command' title='Command'>
<Text
id='commandLog'
name='commandLog'
inputType='textarea'
labelPosition='none'
rows={20}
readOnly
value={`${commandOutput ? `${commandOutput}>` : '>'}`}
onChange={() => {
// Prevents DOM error
}}
/>
<Text
id='commandInput'
name='commandInput'
inputType='tex'
labelPosition='none'
value={this.state.commandInput}
onChange={this.handleTextInput}
onKeyDown={_this.handleCommandKeyDown}
/>
</Tab>
</Tabs>
</Col>
</Row>
)
}
Example #13
| Source File: Edit.jsx From maps with MIT License | 5 votes |
|
Edit = (props) => {
const { id } = useParams();
const [key, setKey] = useState("home");
const [coop, setCoop] = useState(null);
useEffect(() => {
if (coop == null) {
CoopService.getById(id, function (data) {
//data.addresses.map((address) => {
// address.locality.state = address.locality.state.id;
//});
setCoop(data);
});
}
}, [props]);
if (coop == null) {
return <></>;
}
return (
<Route path="/edit/:id/:tab">
{({ match, history }) => {
const { tab } = match ? match.params : {};
return (
<>
<h5>{coop.name}</h5>
<Tabs
activeKey={tab}
onSelect={(nextTab) => history.push(`/edit/${id}/${nextTab}`)}
>
<Tab eventKey="home" title="Home">
<FormContainer coop={coop} />
</Tab>
<Tab eventKey="people" title="People">
<ListPeople coop={coop} />
</Tab>
</Tabs>
</>
);
}}
</Route>
);
}
Example #14
| Source File: App.js From stake-nucypher with GNU Affero General Public License v3.0 | 5 votes |
|
render() {
return <>
<StoreProvider>
<Router>
<Navbar expand="lg">
<Navbar.Brand href="#" className="mr-auto">
<div className="logo">
</div>
</Navbar.Brand>
<Nav className="mr-auto">
<Nav.Link href="/">Staking</Nav.Link>
<Nav.Link href="/worklock">Worklock</Nav.Link>
</Nav>
<div className="float-right h4 m-5">
<a href="https://github.com/cryptoseal86/stake-nucypher" target="_blank" rel="noopener noreferrer">
<FaGithub></FaGithub>
</a>
</div>
</Navbar>
<div className="App">
<Switch>
<Route exact path="/">
<div className="staker-container">
<Container>
<Tabs defaultActiveKey="stake" activeKey={this.state.key} className="tab-controls d-flex mx-auto" onSelect={this.handleSelectTab.bind(this)}>
<Tab eventKey="stake" title="Stake">
<StakerDashboard onTabChange={this.handleSelectTab.bind(this)}></StakerDashboard>
</Tab>
<Tab eventKey="withdraw" title="Withdraw">
<WithdrawDashboard></WithdrawDashboard>
</Tab>
<Tab eventKey="history" title="History">
<HistoryDashboard></HistoryDashboard>
</Tab>
</Tabs>
</Container>
</div>
</Route>
<Route path="/worklock">
<div className="staker-container">
<Container>
<WorkLockDashboard></WorkLockDashboard>
</Container>
</div>
</Route>
</Switch>
</div>
</Router>
</StoreProvider>
</>;
}
Example #15
| Source File: Preferences.jsx From mapstore2-cadastrapp with GNU General Public License v3.0 | 5 votes |
|
export default function PreferencesDialog({
isShown,
onClose,
setLayerStyles = () => {},
updateLayerStyle = () => {},
styles = {
selected: {},
"default": {}
},
configStyles = {}
}) {
const setDefaultStyles = () => {
setLayerStyles(isEmpty(configStyles) ? LAYER_STYLES : configStyles);
};
useEffect(()=>{
const isStateStylesEmpty = isEmpty(styles) || (isEmpty(styles.selected) && isEmpty(styles.default));
isStateStylesEmpty && setDefaultStyles(); // Retain state styles (if any)
}, [setLayerStyles]);
if (!isShown) {
return null;
}
return (
<Portal container={document.querySelector('#container #viewer') || document.body}><Dialog
className="cadastrapp-preferences-dialog"
show={isShown} >
<span role="header"><span><Message msgId={'cadastrapp.preferences.title'}/></span><button style={{ background: 'transparent', border: 'none', "float": "right" }}><Glyphicon glyph="1-close" onClick={() => onClose()} style={{ }} /></button></span>
<div role="body" style={{height: 200}}>
<Tabs defaultActiveKey={1} >
<Tab eventKey={1} title={<Message msgId={'cadastrapp.preferences.default'}/>}>
<StyleEditor
style={styles.default}
updateLayerStyle={( ...args ) => updateLayerStyle('default', ...args)} />
</Tab>
<Tab eventKey={2} title={<Message msgId={'cadastrapp.preferences.selected'}/>}>
<StyleEditor
style={styles.selected}
updateLayerStyle={(...args) => updateLayerStyle('selected', ...args)} />
</Tab>
</Tabs>
</div>
<div role="footer">
<Button onClick={setDefaultStyles}><Message msgId={'cadastrapp.preferences.defaultStyle'}/></Button>
<Button onClick={() => { onClose(); }}><Message msgId={'cadastrapp.preferences.close'}/></Button>
</div>
</Dialog></Portal>
);
}
Example #16
| Source File: PlotSearch.jsx From mapstore2-cadastrapp with GNU General Public License v3.0 | 5 votes |
|
export default function PlotsSearch({onSearch = () => {}, loading}) {
const [currentTab, setCurrentTab] = useState('reference');
const [searchState, setFormState, resetFormState] = useFormState();
return (
<div className="plots-search">
<h3><Message msgId={'cadastrapp.parcelle.title'}/></h3>
<Tabs
className="not-scrolled-tab"
onSelect={k => setCurrentTab(k)}
activeKey={currentTab}
defaultActiveKey={currentTab}>
<Tab eventKey={SEARCH_TYPES.REFERENCE} title={<Message msgId={'cadastrapp.parcelle.tab1'}/>}>
<Reference
values={searchState?.[SEARCH_TYPES.REFERENCE] ?? {}}
setValue={(key, value) => setFormState(SEARCH_TYPES.REFERENCE, key, value) }/>
</Tab>
<Tab eventKey={SEARCH_TYPES.ADDRESS} title={<Message msgId={'cadastrapp.parcelle.tab2'}/>}
style={{ height: 220 }}>
<Address
values={searchState?.[SEARCH_TYPES.ADDRESS] ?? {}}
setValue={(key, value) => setFormState(SEARCH_TYPES.ADDRESS, key, value)} />
</Tab>
<Tab eventKey={SEARCH_TYPES.ID} title={<Message msgId={'cadastrapp.parcelle.tab3'}/>}>
<Identifier
values={searchState?.[SEARCH_TYPES.ID] ?? {}}
setValue={(key, value) => setFormState(SEARCH_TYPES.ID, key, value)} />
</Tab>
<Tab eventKey={SEARCH_TYPES.LOT} title={<Message msgId={'cadastrapp.parcelle.tab4'}/>}>
<Lot
values={searchState?.[SEARCH_TYPES.LOT] ?? {}}
setValue={(key, value) => setFormState(SEARCH_TYPES.LOT, key, value)} />
</Tab>
</Tabs>
<SearchButtons
loading={loading}
valid={isSearchValid(currentTab, searchState[currentTab])}
onClear={() => resetFormState(currentTab)}
onSearch={() => onSearch(currentTab, searchState[currentTab])}
/>
</div>
);
}
Example #17
| Source File: App.js From LinkedIn-Scraper with Apache License 2.0 | 5 votes |
|
function App() {
return (
<div>
<Navbar bg="dark" variant="dark" expand="lg">
<Navbar.Brand href="#home">
<span role="img" aria-label="logo">
?
</span>
</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="https://github.com/xtstc131/LinkedIn-Scraper">
About
</Nav.Link>
<Nav.Link href="#home">Contact</Nav.Link>
<Nav.Link href="https://github.com/xtstc131/LinkedIn-Scraper">
Contribute
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
<Jumbotron className="text-center jumbotron">
<Container>
<Row>
<Col></Col>
<Col xs={6}>
<h1 className="my-head">
{/* <span
className="typer"
id="main"
data-words=""
data-delay="100"
data-colors="#FFFFFF,#9ac4f8"
data-delete-delay="1000"
></span>
<span className="cursor" data-owner="main"></span> */}
MalloCat, A LinkedIn Scraper
</h1>
<p className="lead ">
MalloCat is a platform for displaying the latest Software
Engineer job information to the new graduates. Supported by
automatic running crawlers targeting on LinkedIn.
</p>
<p>
<Button
className="rounded-pill"
variant="outline-light"
href="https://github.com/xtstc131/LinkedIn-Scraper"
>
Github
<img className="btn_logo" src={github_logo} alt="" />
</Button>
</p>
</Col>
<Col></Col>
</Row>
</Container>
</Jumbotron>
<hr className="my-4"></hr>
<div className="content">
<Container>
<Tabs>
<Tab eventKey="linkedin_fulltime" title="Full-time">
<Table source="linkedin_fulltime"></Table>
</Tab>
<Tab eventKey="linkedin_intern" title="Intern">
<Table source="linkedin_intern"></Table>
</Tab>
</Tabs>
<p>© 2020. All rights reserved.</p>
<img
src="https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Flinkedin-spider.netlify.app"
alt=""
/>
</Container>
</div>
</div>
);
}
Example #18
| Source File: index.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 4 votes |
|
function ExistingActivitySearch(props) {
const { fromTeam, addActivity, libraries } = props;
const [toggleStates, setToggleStates] = useState({
searchLibrary: true,
subject: true,
education: false,
type: false,
});
const allState = useSelector((state) => state.search);
const activityTypesState = useSelector((state) => state.resource.types);
const { currentOrganization, permission } = useSelector((state) => state.organization);
const dispatch = useDispatch();
const [activityTypes, setActivityTypes] = useState([]);
const [search, setSearch] = useState([]);
const [searchQueries, SetSearchQuery] = useState('');
const [searchInput, setSearchInput] = useState('');
const [meta, setMeta] = useState({});
const [activePage, setActivePage] = useState(1);
const [totalCount, setTotalCount] = useState(0);
const [activeModel, setActiveModel] = useState('activities');
const [activeType, setActiveType] = useState([]);
const [activeSubject, setActiveSubject] = useState([]);
const [activeEducation, setActiveEducation] = useState([]);
const [searchType, setSearchType] = useState(null);
const [authorName, SetAuthor] = useState('');
const [activetab, setActiveTab] = useState('activities');
const [todate, Settodate] = useState(undefined);
const [fromdate, Setfromdate] = useState(undefined);
useEffect(() => {
if (localStorage.getItem('refreshPage') === 'true' && currentOrganization && searchType) {
let dataSend;
if (searchType === 'orgSearch') {
dataSend = {
phrase: searchInput.trim(),
subjectArray: activeSubject,
gradeArray: activeEducation,
standardArray: activeType,
author: authorName || undefined,
type: searchType,
from: 0,
size: 20,
model: 'activities',
standardArray: libraries,
};
} else {
dataSend = {
phrase: searchInput.trim(),
subjectArray: activeSubject,
gradeArray: activeEducation,
standardArray: activeType,
author: authorName || undefined,
type: searchType,
from: 0,
size: 20,
model: 'activities',
standardArray: libraries,
};
}
let result;
(async () => {
result = await dispatch(simpleSearchAction(dataSend));
})();
setTotalCount(result?.meta?.total);
const tempEducation = [];
const tempSubject = [];
if (activeEducation) {
activeEducation.forEach((edu) => {
if (String(edu).includes('&')) {
const temp = String(edu).replace('&', 'and');
tempEducation.push(temp);
} else {
tempEducation.push(edu);
}
});
setActiveEducation(tempEducation);
}
if (activeSubject) {
activeSubject.forEach((sub) => {
if (String(sub).includes('&')) {
const temp = String(sub).replace('&', 'and');
tempSubject.push(temp);
} else {
tempSubject.push(sub);
}
});
setActiveSubject(tempSubject);
}
}
}, [currentOrganization]);
useEffect(() => {
if (allState.searchResult) {
if (allState.searchResult.length > 0) {
setSearch(allState.searchResult);
SetSearchQuery(allState.searchQuery);
setSearchInput(allState.searchQuery);
setMeta(allState.searchMeta);
localStorage.setItem('loading', 'false');
Swal.close();
} else if (allState.searchMeta.total === 0) {
setSearch([]);
SetSearchQuery(allState.searchQuery);
setSearchInput(allState.searchQuery);
setMeta({});
localStorage.setItem('loading', 'false');
Swal.close();
}
}
}, [allState.searchMeta, allState.searchQuery, allState.searchResult]);
useEffect(() => {
if (allState.searchResult) {
if (allState.searchResult.length > 0 && paginationStarter) {
paginationStarter = false;
setTotalCount(allState.searchMeta.total);
}
}
}, [allState.searchMeta, allState.searchResult, totalCount]);
useEffect(() => {
if (localStorage.getItem('loading') === 'true') {
Swal.fire({
html: 'Searching...', // add html attribute if you want or remove
allowOutsideClick: false,
onBeforeOpen: () => {
Swal.showLoading();
},
});
}
});
useEffect(() => {
if (activityTypesState.length === 0) {
dispatch(loadResourceTypesAction());
}
}, []);
const compare = (a, b) => {
// Use toUpperCase() to ignore character casing
const bandA = a.title.toUpperCase();
const bandB = b.title.toUpperCase();
let comparison = 0;
if (bandA > bandB) {
comparison = 1;
} else if (bandA < bandB) {
comparison = -1;
}
return comparison;
};
useEffect(() => {
const allItems = [];
activityTypesState?.data?.map((data) => data.activityItems.map((itm) => allItems.push(itm)));
setActivityTypes(allItems.sort(compare));
}, [activityTypesState]);
return (
<>
<div>
<div className={!fromTeam && 'search-wrapper'}>
<div className="content-search">
{true ? (
<div className="search-result-main">
{!fromTeam && <div className="current-org-search">{currentOrganization?.name}</div>}
{!fromTeam && <div className="exp-lib-cnt">Explore library content</div>}
<div
className="total-count"
style={{
display: totalCount > 1000 || !!searchQueries ? 'block' : 'none',
}}
>
{totalCount > 10000 ? (
<div>
Your search returned more than <span>10,000</span> results. Please refine your search criteria.
</div>
) : null}
{!!searchQueries && (
<div>
Showing {search ? meta.total : '0'} results For <span>{searchQueries}</span>
</div>
)}
</div>
<div className="main-content-search">
<div className="left-search">
<div className="search-library">
<Accordion defaultActiveKey="0">
<Card>
<Accordion.Toggle
as={Card.Header}
eventKey="0"
onClick={() =>
setToggleStates({
...toggleStates,
searchLibrary: !toggleStates.searchLibrary,
})
}
>
Search Library
<FontAwesomeIcon className="ml-2" icon={toggleStates.searchLibrary ? 'chevron-up' : 'chevron-down'} />
</Accordion.Toggle>
<Accordion.Collapse eventKey="0">
<Card.Body>
<div className="body-search">
<input
// style={{ display: searchType === 'orgSearch' ? 'none' : 'block' }}
value={searchInput}
onChange={(e) => {
setSearchInput(e.target.value);
}}
onKeyPress={async (e) => {
if (e.key === 'Enter') {
if (!searchInput.trim() && searchType !== 'orgSearch') {
Swal.fire('Search field is required.');
} else if (searchInput.length > 255) {
Swal.fire('Character limit should be less than 255.');
} else {
Swal.fire({
title: 'Searching...', // add html attribute if you want or remove
html: 'We are fetching results for you!',
allowOutsideClick: false,
onBeforeOpen: () => {
Swal.showLoading();
},
});
let dataSend;
if (searchType === 'orgSearch') {
dataSend = {
phrase: searchInput.trim(),
subjectArray: activeSubject,
gradeArray: activeEducation,
authors: authorName || undefined,
standardArray: activeType,
type: searchType,
from: 0,
size: 20,
model: 'activities',
standardArray: libraries,
};
} else {
dataSend = {
phrase: searchInput.trim(),
subjectArray: activeSubject,
gradeArray: activeEducation,
authors: authorName || undefined,
standardArray: activeType,
type: searchType,
from: 0,
size: 20,
model: 'activities',
standardArray: libraries,
};
}
const result = await dispatch(simpleSearchAction(dataSend));
setTotalCount(result.meta?.total);
const tempEducation = [];
const tempSubject = [];
if (activeEducation) {
activeEducation.forEach((edu) => {
if (String(edu).includes('&')) {
const temp = String(edu).replace('&', 'and');
tempEducation.push(temp);
} else {
tempEducation.push(edu);
}
});
setActiveEducation(tempEducation);
}
if (activeSubject) {
activeSubject.forEach((sub) => {
if (String(sub).includes('&')) {
const temp = String(sub).replace('&', 'and');
tempSubject.push(temp);
} else {
tempSubject.push(sub);
}
});
setActiveSubject(tempSubject);
}
}
}
}}
type="search"
placeholder="Search"
/>
<div className="form-group">
<div className="radio-btns">
{true && (
<label>
<input
name="type"
onChange={(e) => {
setSearchType(e.target.value);
}}
value="private"
checked={searchType === 'private'}
type="radio"
/>
<span>My Projects</span>
</label>
)}
{true && (
<label>
<input
name="type"
onChange={(e) => {
setSearchType(e.target.value);
}}
value="public"
checked={searchType === 'public'}
type="radio"
/>
<span>All Shared Projects</span>
</label>
)}
{true && (
<label>
<input
name="type"
onChange={(e) => {
setSearchType(e.target.value);
}}
value="orgSearch"
checked={searchType === 'orgSearch'}
type="radio"
/>
<span>All Shared Projects In My Org</span>
</label>
)}
</div>
</div>
{permission?.Organization?.includes('organization:view-user') && searchType !== 'private' && <div className="author-label">Author</div>}
<div
className="form-group"
style={{
display: permission?.Organization?.includes('organization:view-user') && searchType !== 'private' ? 'block' : 'none',
}}
>
<input
placeholder="Enter author name"
className="authorName"
value={authorName}
onChange={({ target }) => {
if (target.value) {
SetAuthor(target.value);
} else {
SetAuthor('');
}
}}
/>
</div>
<div
className="src-btn"
onClick={async () => {
Setfromdate(undefined);
Settodate(undefined);
setActiveTab('activities');
if (!searchInput.trim() && searchType !== 'orgSearch') {
Swal.fire('Search field is required.');
} else if (searchInput.length > 255) {
Swal.fire('Character limit should be less than 255.');
} else if (!searchType) {
Swal.fire('Search type is required. Click one of the radio buttons.');
} else {
Swal.fire({
title: 'Searching...', // add html attribute if you want or remove
html: 'We are fetching results for you!',
allowOutsideClick: false,
onBeforeOpen: () => {
Swal.showLoading();
},
});
let dataSend;
if (searchType === 'orgSearch') {
dataSend = {
phrase: searchInput.trim(),
subjectArray: activeSubject,
gradeArray: activeEducation,
standardArray: activeType,
author: authorName || undefined,
fromDate: fromdate || undefined,
toDate: todate || undefined,
type: searchType,
from: 0,
size: 20,
model: 'activities',
standardArray: libraries,
};
} else {
dataSend = {
phrase: searchInput.trim(),
subjectArray: activeSubject,
author: authorName || undefined,
fromDate: fromdate || undefined,
toDate: todate || undefined,
gradeArray: activeEducation,
standardArray: activeType,
type: searchType,
from: 0,
size: 20,
model: 'activities',
standardArray: libraries,
};
}
const result = await dispatch(simpleSearchAction(dataSend));
setTotalCount(result.meta?.total);
const tempEducation = [];
const tempSubject = [];
if (activeEducation) {
activeEducation.forEach((edu) => {
if (String(edu).includes('&')) {
const temp = String(edu).replace('&', 'and');
tempEducation.push(temp);
} else {
tempEducation.push(edu);
}
});
setActiveEducation(tempEducation);
}
if (activeSubject) {
activeSubject.forEach((sub) => {
if (String(sub).includes('&')) {
const temp = String(sub).replace('&', 'and');
tempSubject.push(temp);
} else {
tempSubject.push(sub);
}
});
setActiveSubject(tempSubject);
}
}
}}
>
<FontAwesomeIcon icon="search" />
Search
</div>
</div>
</Card.Body>
</Accordion.Collapse>
</Card>
</Accordion>
</div>
<div className="refine-search">
<div className="headline">Refine your search</div>
<Accordion defaultActiveKey="0">
<Card>
<Accordion.Toggle
as={Card.Header}
eventKey="0"
onClick={() =>
setToggleStates({
...toggleStates,
type: false,
education: false,
subject: !toggleStates.subject,
})
}
>
Subject
<FontAwesomeIcon className="ml-2" icon={toggleStates.subject ? 'chevron-up' : 'chevron-down'} />
</Accordion.Toggle>
<Accordion.Collapse eventKey="0">
<Card.Body>
{subjects.map((data) => (
<div
className="list-item-keys"
key={data.value}
value={data.subject}
onClick={() => {
if (activeSubject.includes(data.subject)) {
if (data.subject === 'Career & Technical Education') {
setActiveSubject(
activeSubject.filter((index) => {
if (index === 'Career & Technical Education' || index === 'Career and Technical Education') {
return false;
}
return true;
})
);
} else {
setActiveSubject(activeSubject.filter((index) => index !== data.subject));
}
} else {
setActiveSubject([...activeSubject, data.subject]);
}
}}
>
{data.subject === 'Career & Technical Education' ? (
activeSubject.includes('Career & Technical Education') || activeSubject.includes('Career and Technical Education') ? (
<FontAwesomeIcon icon="check-square" />
) : (
<FontAwesomeIcon icon="square" />
)
) : activeSubject.includes(data.subject) ? (
<FontAwesomeIcon icon="check-square" />
) : (
<FontAwesomeIcon icon="square" />
)}
<span>{data.subject}</span>
</div>
))}
</Card.Body>
</Accordion.Collapse>
</Card>
<Card>
<Accordion.Toggle
as={Card.Header}
eventKey="1"
onClick={() =>
setToggleStates({
...toggleStates,
type: false,
subject: false,
education: !toggleStates.education,
})
}
>
Education Level
<FontAwesomeIcon className="ml-2" icon={toggleStates.education ? 'chevron-up' : 'chevron-down'} />
</Accordion.Toggle>
<Accordion.Collapse eventKey="1">
<Card.Body>
{educationLevels.map((data) => (
<div
className="list-item-keys"
key={data.value}
value={data.name}
onClick={() => {
if (activeEducation.includes(data.name)) {
if (data.name === 'College & Beyond') {
setActiveEducation(
activeEducation.filter((index) => {
if (index === 'College & Beyond' || index === 'College and Beyond') {
return false;
}
return true;
})
);
} else {
setActiveEducation(activeEducation.filter((index) => index !== data.name));
}
} else {
setActiveEducation([...activeEducation, data.name]);
}
}}
>
{data.name === 'College & Beyond' ? (
activeEducation.includes('College & Beyond') || activeEducation.includes('College and Beyond') ? (
<FontAwesomeIcon icon="check-square" />
) : (
<FontAwesomeIcon icon="square" />
)
) : activeEducation.includes(data.name) ? (
<FontAwesomeIcon icon="check-square" />
) : (
<FontAwesomeIcon icon="square" />
)}
<span>{data.name}</span>
</div>
))}
</Card.Body>
</Accordion.Collapse>
</Card>
<Card>
<Accordion.Toggle
as={Card.Header}
eventKey="3"
onClick={() =>
setToggleStates({
...toggleStates,
subject: false,
education: false,
type: !toggleStates.type,
})
}
>
Type of Activity
<FontAwesomeIcon className="ml-2" icon={toggleStates.type ? 'chevron-up' : 'chevron-down'} />
</Accordion.Toggle>
<Accordion.Collapse eventKey="3">
<Card.Body
style={{
'max-height': '300px',
'overflow-y': 'auto',
}}
>
{activityTypes.map((data) => (
<div
className="list-item-keys"
key={data.id}
value={data.h5pLib}
onClick={() => {
if (activeType.includes(data.h5pLib)) {
// eslint-disable-next-line eqeqeq
setActiveType(activeType.filter((index) => index != data.h5pLib));
} else {
setActiveType([...activeType, data.h5pLib]);
}
}}
>
{activeType.includes(data.h5pLib) ? <FontAwesomeIcon icon="check-square" /> : <FontAwesomeIcon icon="square" />}
<span>{data.title}</span>
</div>
))}
</Card.Body>
</Accordion.Collapse>
</Card>
</Accordion>
</div>
</div>
<div className="right-search" id="right-search-branding-style">
<Tabs
activeKey={activetab}
id="uncontrolled-tab-example"
onSelect={async (e) => {
if (!searchInput && searchType !== 'orgSearch') {
Swal.fire('Search field is required.');
} else {
setActiveTab(e);
if (e === 'total') {
let searchData;
if (searchType === 'orgSearch') {
searchData = {
phrase: searchQueries.trim() || searchInput,
from: 0,
size: 20,
type: searchType,
author: authorName || undefined,
fromDate: fromdate || undefined,
toDate: todate || undefined,
subjectArray: activeSubject,
gradeArray: activeEducation,
standardArray: activeType,
};
} else {
searchData = {
phrase: searchQueries.trim() || searchInput,
from: 0,
size: 20,
author: authorName || undefined,
fromDate: fromdate || undefined,
toDate: todate || undefined,
type: searchType,
subjectArray: activeSubject,
gradeArray: activeEducation,
standardArray: activeType,
};
}
Swal.fire({
title: 'Loading...', // add html attribute if you want or remove
allowOutsideClick: false,
onBeforeOpen: () => {
Swal.showLoading();
},
});
const resultModel = await dispatch(simpleSearchAction(searchData));
Swal.close();
setTotalCount(resultModel.meta[e]);
setActiveModel(e);
setActivePage(1);
} else {
let searchData;
if (searchType === 'orgSearch') {
searchData = {
phrase: searchQueries.trim() || searchInput,
from: 0,
size: 20,
author: authorName || undefined,
fromDate: fromdate || undefined,
toDate: todate || undefined,
model: e,
type: searchType,
subjectArray: activeSubject,
gradeArray: activeEducation,
standardArray: activeType,
standardArray: libraries,
};
} else {
searchData = {
phrase: searchQueries.trim() || searchInput,
from: 0,
size: 20,
model: e,
author: authorName || undefined,
fromDate: fromdate || undefined,
toDate: todate || undefined,
type: searchType,
subjectArray: activeSubject,
gradeArray: activeEducation,
standardArray: activeType,
standardArray: libraries,
};
}
Swal.fire({
title: 'Loading...', // add html attribute if you want or remove
allowOutsideClick: false,
onBeforeOpen: () => {
Swal.showLoading();
},
});
const resultModel = await dispatch(simpleSearchAction(searchData));
Swal.close();
setTotalCount(resultModel.meta[e]);
setActiveModel(e);
setActivePage(1);
}
}
}}
>
{!fromTeam && (
<Tab eventKey="activities" title={!!search && !!meta.activities ? `activity (${meta.activities})` : 'activity (0)'}>
<div className="content">
<div className="results_search">
{!!search && search.length > 0 ? (
search.map((res) => (
<>
{res.model === 'Activity' && (
<div className="box">
<div className="imgbox">
{res.thumb_url ? (
<div
style={{
backgroundImage: res.thumb_url.includes('pexels.com')
? `url(${res.thumb_url})`
: `url(${global.config.resourceUrl}${res.thumb_url})`,
}}
/>
) : (
<div
style={{
// eslint-disable-next-line max-len
backgroundImage:
'https://images.pexels.com/photos/593158/pexels-photo-593158.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&h=200&w=280',
}}
/>
)}
</div>
<div className="contentbox">
<div className="search-content">
<a
href={
res.model === 'Activity'
? `/activity/${res.id}/preview`
: res.model === 'Playlist'
? `/playlist/${res.id}/preview/lti`
: `/project/${res.id}/preview`
}
target="_blank"
rel="noreferrer"
>
<h2>{res.title || res.name}</h2>
</a>
<ul>
{res.user && (
<li>
by <span>{res.user.first_name}</span>
</li>
)}
<li>
Type <span className="type">{res.model}</span>
</li>
</ul>
<p>{res.description}</p>
</div>
<Buttons text="Add" secondary={true} width="153px" height="36px" onClick={() => addActivity(res)} hover={true} />
</div>
</div>
)}
</>
))
) : (
<div className="box">No result found !</div>
)}
</div>
</div>
</Tab>
)}
</Tabs>
{totalCount > 20 && (
<Pagination
activePage={activePage}
itemsCountPerPage={20}
totalItemsCount={totalCount > 10000 ? 10000 : totalCount}
pageRangeDisplayed={8}
onChange={async (e) => {
setActivePage(e);
if (activeModel === 'total') {
const searchData = {
phrase: searchQueries.trim(),
from: e * 20 - 20,
size: 20,
type: searchType,
subjectArray: activeSubject || undefined,
gradeArray: activeEducation || undefined,
standardArray: activeType || undefined,
author: authorName || undefined,
};
Swal.fire({
title: 'Loading...',
allowOutsideClick: false,
onBeforeOpen: () => {
Swal.showLoading();
},
});
await dispatch(simpleSearchAction(searchData));
Swal.close();
} else {
const searchData = {
phrase: searchQueries.trim(),
from: e * 20 - 20,
size: 20,
type: searchType,
model: activeModel,
subjectArray: activeSubject || undefined,
gradeArray: activeEducation || undefined,
standardArray: activeType || undefined,
author: authorName || undefined,
standardArray: libraries,
};
Swal.fire({
title: 'Loading...',
allowOutsideClick: false,
onBeforeOpen: () => {
Swal.showLoading();
},
});
await dispatch(simpleSearchAction(searchData));
Swal.close();
}
}}
itemClass="page-item"
linkClass="page-link"
/>
)}
</div>
</div>
</div>
) : (
<Alert variant="danger">You are not authorized to view this page!</Alert>
)}
</div>
</div>
</div>
</>
);
}
Example #19
| Source File: createOrg.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 4 votes |
|
export default function CreateOrg(prop) {
const { editMode } = prop;
const [imageActive, setImgActive] = useState(null);
const [faviconActive, setFaviconActive] = useState(null);
const imgUpload = useRef();
const faviconUpload = useRef();
const allListState = useSelector((state) => state.organization);
const dispatch = useDispatch();
const [loaderImg, setLoaderImg] = useState(false);
const { activeEdit, activeOrganization, currentOrganization } = allListState;
const [checkedActivity, setCheckedActivty] = useState(false);
const [checkedPlaylist, setCheckedPlaylist] = useState(false);
const [checkedProject, setCheckedProject] = useState(false);
const [checkedTosParent, setCheckedTosParent] = useState(true);
const [checkedTosUrl, setCheckedTosUrl] = useState(false);
const [checkedPpParent, setCheckedPpParent] = useState(true);
const [checkedPpUrl, setCheckedPpUrl] = useState(false);
const [show, setShow] = useState(false);
const [ppShow, setPpShow] = useState(false);
const [tosContentValue, setTosContentValue] = useState(null);
const [ppContentValue, setPpContentValue] = useState(null);
const [checkedTosContent, setCheckedTosContent] = useState(null);
const [checkedPpContent, setCheckedPpContent] = useState(null);
const [checkedColorsParent, setCheckedColorsParent] = useState(false);
const [checkedColorsOwn, setCheckedColorsOwn] = useState(true);
const [checkedFontsParent, setCheckedFontsParent] = useState(false);
const [checkedFontsOwn, setCheckedFontsOwn] = useState(true);
const [saveAddOwnprimaryColor, setSaveAddOwnprimaryColor] = useState('#084892');
const [saveAddOwnsecondaryColor, setSaveAddOwnsecondaryColor] = useState('#F8AF2C');
const [saveAddOwnteritaryColor, setSaveAddOwnteritaryColor] = useState('#515151');
const [saveAddOwnprimaryFont, setSaveAddOwnprimaryFont] = useState('rubic');
const [saveAddOwnsecondaryFont, setSaveAddOwnsecondaryFont] = useState('Open Sans');
useEffect(() => {
if (editMode) {
console.log('Edit Mode', editMode);
console.log('Active Mode', activeEdit);
console.log('activeOrganization', activeOrganization);
setImgActive(activeEdit?.image);
setFaviconActive(activeEdit?.favicon);
setCheckedActivty(activeEdit?.gcr_activity_visibility);
setCheckedPlaylist(activeEdit?.gcr_playlist_visibility);
setCheckedProject(activeEdit?.gcr_project_visibility);
setTosContentValue(activeEdit?.tos_content);
setPpContentValue(activeEdit?.privacy_policy_content);
if (activeEdit.tos_type == 'Parent') {
setCheckedTosUrl(false);
setCheckedTosParent(true);
} else if (activeEdit.tos_type == 'URL') {
setCheckedTosParent(false);
setCheckedTosUrl(true);
} else if (activeEdit.tos_type == 'Content') {
setCheckedTosParent(false);
setCheckedTosUrl(false);
setCheckedTosContent(true);
}
if (activeEdit.privacy_policy_type == 'Parent') {
setCheckedPpUrl(false);
setCheckedPpParent(true);
} else if (activeEdit.privacy_policy_type == 'URL') {
setCheckedPpParent(false);
setCheckedPpUrl(true);
} else if (activeEdit.privacy_policy_type == 'Content') {
setCheckedPpParent(false);
setCheckedPpUrl(false);
setCheckedPpContent(true);
}
} else {
setImgActive(null);
setFaviconActive(null);
}
}, [editMode, activeEdit]);
const handleShow = () => {
setShow(true);
};
const handleClose = () => {
setShow(false);
};
const ppHandleShow = () => {
setPpShow(true);
};
const ppHandleClose = () => {
setPpShow(false);
};
const handleTermsEditorChange = (content) => {
setTosContentValue(content);
};
const handlePolicyEditorChange = (content) => {
setPpContentValue(content);
};
const [selectTab, setSelectTab] = useState('Description');
const [selectPreview, setSelectPreview] = useState(false);
const [editorContent, setEditorContent] = useState('');
const [editorContentPolicy, setEditorContentPolicy] = useState('');
const [editorContentTerms, setEditorContentTerms] = useState('');
const saveChangesPolicy = () => {
handlePolicyEditorChange(editorContentPolicy);
};
const saveChangesTerms = () => {
handleTermsEditorChange(editorContentTerms);
};
const updatePreviewScreen = (primaryColor, secondaryColor, teritaryColor, primaryFont, secondaryFont) => {
document.querySelector(':root').style.setProperty('--main-preview-primary-color', primaryColor);
document.querySelector(':root').style.setProperty('--main-preview-secondary-color', secondaryColor);
document.querySelector(':root').style.setProperty('--main-preview-paragraph-text-color', teritaryColor);
document.querySelector(':root').style.setProperty('--main-preview-heading-font', primaryFont);
document.querySelector(':root').style.setProperty('--main-preview-text-font', secondaryFont);
};
useEffect(() => {
if (editMode) {
updatePreviewScreen(
activeEdit?.branding.primary_color,
activeEdit?.branding.secondary_color,
activeEdit?.branding.tertiary_color,
activeEdit?.branding.primary_font_family,
activeEdit?.branding.secondary_font_family
);
}
}, [activeEdit, editMode]);
const secondaryColorIcon = getGlobalColor('--main-secondary-color');
const primaryColor = getGlobalColor('--main-primary-color');
return (
<div className="create-form">
<Formik
enableReinitialize
initialValues={{
image: editMode ? activeEdit.image : 'https://dev.currikistudio.org/api/storage/organizations/H01h34rZGV6gyMayurX8dwpkXZd4X3c0n8NJiUXu.png',
favicon: editMode ? activeEdit?.favicon : 'https://dev.currikistudio.org/api/storage/organizations/QqwMYyeWq7WxQHzy7LDdI0mRBBA3g2qnLm2wd4Ib.svg',
name: editMode ? activeEdit?.name : '',
description: editMode ? activeEdit?.description : '',
domain: editMode ? activeEdit?.domain : '',
account_id: editMode ? activeEdit?.account_id : undefined,
api_key: editMode ? activeEdit?.api_key : undefined,
unit_path: editMode ? activeEdit?.unit_path : undefined,
self_registration: editMode ? activeEdit?.self_registration : false,
noovo_client_id: editMode ? activeEdit?.noovo_client_id : undefined,
gcr_project_visibility: editMode ? activeEdit?.gcr_project_visibility : false,
gcr_playlist_visibility: editMode ? activeEdit?.gcr_playlist_visibility : false,
gcr_activity_visibility: editMode ? activeEdit?.gcr_activity_visibility : false,
tos_type: editMode ? (!activeEdit?.tos_type ? 'Parent' : activeEdit?.tos_type) : 'Parent',
tos_url: editMode ? activeEdit?.tos_url : '',
tos_content: editMode ? activeEdit?.tos_content : '',
privacy_policy_type: editMode ? (!activeEdit?.privacy_policy_type ? 'Parent' : activeEdit?.privacy_policy_type) : 'Parent',
privacy_policy_url: editMode ? activeEdit?.privacy_policy_url : '',
privacy_policy_content: editMode ? activeEdit?.privacy_policy_content : '',
primary_color: editMode ? (activeEdit?.branding.primary_color ? activeEdit?.branding.primary_color : '#084892') : '#084892',
secondary_color: editMode ? (activeEdit?.branding.secondary_color ? activeEdit?.branding.secondary_color : '#F8AF2C') : '#F8AF2C',
tertiary_color: editMode ? (activeEdit?.branding.tertiary_color ? activeEdit?.branding.tertiary_color : '#515151') : '#515151',
primary_font_family: editMode ? activeEdit?.branding.primary_font_family : 'rubic',
secondary_font_family: editMode ? activeEdit?.branding.secondary_font_family : 'Open Sans',
}}
validate={(values) => {
const errors = {};
if (!values.name || values.name.length > 255) {
errors.name = values.name.length > 255 ? 'Length must be 255 characters or less.' : 'Required';
}
if (!values.description || values.description.length > 255) {
errors.description = values.description.length > 255 ? 'Length must be 255 characters or less.' : 'Required';
}
if (!values.domain) {
errors.domain = 'Required';
} else if (values.domain?.length < 2 || values.domain?.length > 255) {
errors.domain = 'Character limit should be greater than one and less than 255';
}
if (!values.image) {
errors.image = 'Required';
}
// if (!values.image_favicon) {
// errors.image_favicon = "Required";
// }
if (!values.tos_type) {
errors.tos_type = 'Required';
}
if (values.tos_type == 'URL' && !values.tos_url) {
errors.tos_url = 'Terms of service URL required!';
}
if (!values.privacy_policy_type) {
errors.privacy_policy_type = 'Required';
}
if (values.privacy_policy_type == 'URL' && !values.privacy_policy_url) {
errors.privacy_policy_url = 'Privacy policy URL required!';
}
return errors;
}}
onSubmit={async (values) => {
if (values.privacy_policy_type === 'Parent') {
delete values.privacy_policy_url;
delete values.privacy_policy_content;
} else if (values.privacy_policy_type === 'URL') {
delete values.privacy_policy_content;
} else if (values.privacy_policy_type === 'Content') {
delete values.privacy_policy_url;
}
if (values.tos_type === 'Parent') {
delete values.tos_url;
delete values.tos_content;
} else if (values.tos_type === 'URL') {
delete values.tos_content;
} else if (values.tos_type === 'Content') {
delete values.tos_url;
}
Swal.fire({
title: 'Please Wait !',
html: editMode ? 'Updating Organization ... ' : 'Creating Organization ... ',
allowOutsideClick: false,
onBeforeOpen: () => {
Swal.showLoading();
},
});
if (editMode) {
const response = await dispatch(updateOrganization(activeEdit.id, values, activeEdit.parent ? activeEdit.parent.id : undefined));
// if (response?.suborganization.id === currentOrganization.id) {
// DynamicBrandingApply(response?.suborganization);
// }
if (response) {
Swal.fire({
text: 'Organization edited successfully',
icon: 'success',
showCancelButton: false,
confirmButtonText: 'Close',
customClass: {
confirmButton: 'confirmation-close-btn',
},
}).then(async (result) => {
if (result.isConfirmed) {
dispatch(removeActiveAdminForm());
}
});
}
} else {
Swal.fire({
icon: 'info',
text: 'Creating new organization...',
allowOutsideClick: false,
onBeforeOpen: () => {
Swal.showLoading();
},
button: false,
});
const response = await dispatch(createOrganizationNew(activeOrganization.id, values));
if (response) {
Swal.fire({
text: 'Organization added successfully',
icon: 'success',
showCancelButton: false,
confirmButtonText: 'Close',
customClass: {
confirmButton: 'confirmation-close-btn',
},
}).then((result) => {
if (result.isConfirmed) {
dispatch(removeActiveAdminForm());
}
});
}
}
}}
>
{({
values,
errors,
touched,
handleChange,
handleBlur,
handleSubmit,
setFieldValue,
setErrors,
/* and other goodies */
}) => (
<form onSubmit={handleSubmit}>
<h2>{editMode ? 'Edit ' : 'Add '} organization</h2>
<FontAwesomeIcon
icon="times"
className="cross-all-pop"
onClick={() => {
dispatch(removeActiveAdminForm());
}}
/>
{/* -------- */}
<Tabs defaultActiveKey={selectTab} activeKey={selectTab} id="uncontrolled-tab-example" onSelect={(k) => setSelectTab(k)}>
<Tab eventKey="Description" title="Description">
<div className="tab-section">
<div className="tab-inner-section">
<div className="update-Form-style">
<div className="tab-form-section">
<div className="tab-form-section-left">
<div className="form-group-create">
<h3>Organization Name</h3>
<input type="text" name="name" onChange={handleChange} onBlur={handleBlur} value={values.name} />
<div className="error">{errors.name && touched.name && errors.name}</div>
</div>
<div className="form-group-create">
<h3>Description</h3>
<textarea type="text" name="description" onChange={handleChange} onBlur={handleBlur} value={values.description} />
<div className="error">{errors.description && touched.description && errors.description}</div>
</div>
</div>
<div className="tab-form-section-right">
<div className="form-group-create">
<h3>Domain</h3>
<input
type="text"
name="domain"
autoComplete="off"
disabled={editMode ? true : false}
value={values.domain}
onChange={async (e) => {
if (alphabetsOnly(e.target.value) && !e.target.value.includes('@')) {
setFieldValue('domain', e.target?.value);
if (e.target.value.length > 1) {
setLoaderImg(true);
const result = dispatch(checkBranding(e.target.value));
result
.then((res) => {
console.log(res);
if (res.organization) {
setLoaderImg(false);
setErrors({
domain: '*Domian already in use',
});
}
})
.catch((err) => {
if (err.errors) {
setLoaderImg(false);
}
});
}
}
}}
onBlur={handleBlur}
// value={values.admin}
/>
<img
src={loader}
style={{
width: '25px',
marginTop: '5px',
visibility: loaderImg ? 'visible' : 'hidden',
}}
alt=""
className="loader"
/>
<div className="error">{errors.domain && touched.domain && errors.domain}</div>
</div>
</div>
</div>
<div className="tab-middle-optional-title">
<h3>Optional Information</h3>
</div>
<div className="tab-form-section">
<div className="tab-form-section-left">
<div className="form-group-create">
<h3>LearnSafe Account ID</h3>
<input type="text" name="account_id" onChange={handleChange} onBlur={handleBlur} value={values.account_id} />
</div>
<div className="form-group-create">
<h3>LearnSafe Unit Path </h3>
<input type="text" name="unit_path" onChange={handleChange} onBlur={handleBlur} value={values.unit_path} />
</div>
<div className="form-group-create">
<h3>LearnSafe API Key</h3>
<input type="text" name="api_key" onChange={handleChange} onBlur={handleBlur} value={values.api_key} />
</div>
<div className="form-group-create">
<h3>Noovo client ID </h3>
<input type="text" name="noovo_client_id" onChange={handleChange} onBlur={handleBlur} value={values.noovo_client_id} />
</div>
</div>
<div className="tab-form-section-right">
<div className="toggle-group-button">
<div className="form-group-create">
<h3>Google classroom publishing</h3>
<div className="create-form-inputs-toggles">
<div className="custom-toggle-button">
<Switch
checked={values.gcr_activity_visibility}
onChange={() => {
setCheckedActivty(!checkedActivity);
setFieldValue('gcr_activity_visibility', !checkedActivity);
}}
className="react-switch"
handleDiameter={30}
uncheckedIcon={false}
checkedIcon={false}
offColor="#888"
onColor={primaryColor}
onHandleColor={primaryColor}
offHandleColor="#666"
/>
<h3>Activity</h3>
</div>
{/* <Switch
checked={checked}
onChange={() => {
setChecked(!checked);
setFieldValue("published", !checked);
}}
/> */}
<div className="custom-toggle-button">
<Switch
checked={values.gcr_playlist_visibility}
onChange={() => {
setCheckedPlaylist(!checkedPlaylist);
setFieldValue('gcr_playlist_visibility', !checkedPlaylist);
}}
className="react-switch"
handleDiameter={30}
uncheckedIcon={false}
checkedIcon={false}
offColor="#888"
onColor={primaryColor}
onHandleColor={primaryColor}
offHandleColor="#666"
/>
<h3>Playlist</h3>
</div>
<div className="custom-toggle-button">
<Switch
checked={values.gcr_project_visibility}
onChange={() => {
setCheckedProject(!checkedProject);
setFieldValue('gcr_project_visibility', !checkedProject);
}}
className="react-switch"
handleDiameter={30}
uncheckedIcon={false}
checkedIcon={false}
offColor="#888"
onColor={primaryColor}
onHandleColor={primaryColor}
offHandleColor="#666"
/>
<h3>Project</h3>
</div>
</div>
</div>
</div>
<div className="form-group-create">
<h3>Self Registration</h3>
<div className="custom-toggle-button">
<Switch
checked={values.self_registration}
onChange={() => {
setFieldValue('self_registration', !values.self_registration);
}}
className="react-switch"
handleDiameter={30}
offColor="#888"
onColor={primaryColor}
onHandleColor={primaryColor}
offHandleColor="#666"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</Tab>
<Tab eventKey="ToS & PP" title="ToS & PP">
<div className="tab-section">
<div className="tab-tospp-section">
<div className={checkedTosContent ? 'Border-bottom tab-inner-tospp-section mr-16' : 'tab-inner-tospp-section mr-16'}>
{/* Terms of service*/}
<div className="tab_inner-tossp_header">
<h1>Terms of service</h1>
</div>
<div className="tos-pp">
<div className="tos-pss-container">
<div className="form-check" style={{ paddingLeft: '0' }}>
<input
className="form-check-input radio-custom"
onClick={() => {
setCheckedTosUrl(false);
setCheckedTosContent(false);
setCheckedTosParent(true);
setFieldValue('tos_type', 'Parent');
}}
type="radio"
name="tos_type"
id="TosParent"
checked={checkedTosParent}
/>
<label className="form-check-label radio-custom-label" for="TosParent">
Use from the parent organization
</label>
</div>
<div className="form-check" style={{ paddingLeft: '0' }}>
<input
className="form-check-input radio-custom"
onClick={() => {
setCheckedTosParent(false);
setCheckedTosContent(false);
setCheckedTosUrl(true);
setFieldValue('tos_type', 'URL');
}}
type="radio"
name="tos_type"
id="TosURL"
checked={checkedTosUrl}
/>
<label className="form-check-label radio-custom-label" for="TosURL">
Add from a URL
</label>
{checkedTosUrl && (
<div className="form-group-create tos-pp-url">
<h3>Terms of service URL</h3>
<input type="text" name="tos_url" onChange={handleChange} value={values.tos_url} placeholder="https://www.example.com" />
<div className="error">{errors.tos_url && touched.tos_url && errors.tos_url}</div>
</div>
)}
<div className="error">{errors.tos_type && touched.tos_type && errors.tos_type}</div>
</div>
{/* Adding Radion button */}
<div className="form-check" style={{ paddingLeft: '0' }}>
<input
className="form-check-input radio-custom"
onClick={() => {
setCheckedTosContent(true);
setCheckedPpContent(false);
setCheckedTosUrl(false);
setCheckedTosParent(false);
setFieldValue('tos_type', 'Content');
// handleShow();
}}
type="radio"
name="tos_type"
id="TosContent"
checked={checkedTosContent}
/>
<label className="form-check-label radio-custom-label" for="TosContent">
Build my Terms of service
</label>
</div>
</div>
</div>
</div>
{/* privacy_policy_type */}
<div className={checkedPpContent ? 'Border-bottom tab-inner-tospp-section' : 'tab-inner-tospp-section'}>
<div className="tab_inner-tossp_header">
<h1>Privacy policy</h1>
</div>
<div className="tos-pp">
<div className="tos-pss-container">
<div className="form-check" style={{ paddingLeft: '0' }}>
<input
className="form-check-input radio-custom"
onClick={() => {
setCheckedPpUrl(false);
setCheckedPpContent(false);
setCheckedPpParent(true);
setFieldValue('privacy_policy_type', 'Parent');
}}
type="radio"
name="privacy_policy_type"
id="PpParent"
checked={checkedPpParent}
/>
<label className="form-check-label radio-custom-label" for="PpParent">
Use from the parent organization
</label>
</div>
<div className="form-check" style={{ paddingLeft: '0' }}>
<input
className="form-check-input radio-custom"
onClick={() => {
setCheckedPpParent(false);
setCheckedPpContent(false);
setCheckedPpUrl(true);
setFieldValue('privacy_policy_type', 'URL');
}}
type="radio"
name="privacy_policy_type"
id="PpURL"
checked={checkedPpUrl}
/>
<label className="form-check-label radio-custom-label" for="PpURL">
Add from a URL
</label>
<div className="error">{errors.privacy_policy_type && touched.privacy_policy_type && errors.privacy_policy_type}</div>
</div>
{checkedPpUrl && (
<div className="form-group-create tos-pp-url">
<h3>Privacy policy URL</h3>
<input type="text" name="privacy_policy_url" onChange={handleChange} value={values.privacy_policy_url} placeholder="https://www.example.com" />
<div className="error">{errors.privacy_policy_url && touched.privacy_policy_url && errors.privacy_policy_url}</div>
</div>
)}
<div className="form-check" style={{ paddingLeft: '0' }}>
<input
className="form-check-input radio-custom"
onClick={() => {
setCheckedPpContent(true);
setCheckedPpUrl(false);
setCheckedPpParent(false);
setCheckedTosContent(false);
setFieldValue('privacy_policy_type', 'Content');
// ppHandleShow();
}}
type="radio"
name="privacy_policy_type"
id="TosPPContent"
checked={checkedPpContent}
/>
<label className="form-check-label radio-custom-label" for="TosPPContent">
Build my Privacy policy
</label>
</div>
</div>
</div>
</div>
</div>
{checkedPpContent && (
<>
<div className="tab-tossp-detail">
<div className="tab_inner_header">
<h1>Privacy policy</h1>
</div>
<Editor
apiKey="alzppk5y87xyqziy9mfltp1e63bg9jexd40he2sfraajyr1q"
initialValue={ppContentValue ? ppContentValue : ''}
init={{
height: 500,
menubar: false,
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table paste code help wordcount',
],
toolbar:
'undo redo | formatselect | bold italic backcolor alignleft aligncenter alignright alignjustify bullist numlist outdent indent | removeformat | help',
}}
onEditorChange={setEditorContentPolicy}
/>
</div>
<div style={{ marginTop: '16px' }}>
<button
type="button"
class="btn btn-primary edit-org-save-btn"
onClick={() => {
saveChangesPolicy();
}}
>
Save Policy
</button>
</div>
</>
)}
{checkedTosContent && (
<>
<div className="tab-tossp-detail">
<div className="tab_inner_header">
<h1>Terms of service</h1>
</div>
<Editor
apiKey="alzppk5y87xyqziy9mfltp1e63bg9jexd40he2sfraajyr1q"
initialValue={tosContentValue ? tosContentValue : ''}
init={{
height: 500,
menubar: false,
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table paste code help wordcount',
],
toolbar:
'undo redo | formatselect | bold italic backcolor alignleft aligncenter alignright alignjustify bullist numlist outdent indent | removeformat | help',
}}
onEditorChange={setEditorContentTerms}
/>
</div>
<div style={{ marginTop: '16px' }}>
<button
type="button"
class="btn btn-primary edit-org-save-btn"
onClick={() => {
saveChangesTerms();
}}
>
Save Terms
</button>
</div>
</>
)}
<div className="error">{errors.tos_url && touched.tos_url && errors.tos_url}</div>
<div className="error">{errors.privacy_policy_url && touched.privacy_policy_url && errors.privacy_policy_url}</div>
</div>
</Tab>
<Tab eventKey="Theming options" title="Theming options">
<div className="tab-section">
<div className="tab-inner-section mb-16">
<div className="tab_inner_header">
<h1>Logo</h1>
<button
onClick={() => {
setFieldValue('favicon', 'https://dev.currikistudio.org/api/storage/organizations/QqwMYyeWq7WxQHzy7LDdI0mRBBA3g2qnLm2wd4Ib.svg');
setFieldValue('image', 'https://dev.currikistudio.org/api/storage/organizations/H01h34rZGV6gyMayurX8dwpkXZd4X3c0n8NJiUXu.png');
setFaviconActive('https://dev.currikistudio.org/api/storage/organizations/QqwMYyeWq7WxQHzy7LDdI0mRBBA3g2qnLm2wd4Ib.svg');
setImgActive('https://dev.currikistudio.org/api/storage/organizations/H01h34rZGV6gyMayurX8dwpkXZd4X3c0n8NJiUXu.png');
}}
type="button"
>
{/*<img src={ResetImg} alt="" />*/}
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="12" viewBox="0 0 14 12" fill="none" css-inspector-installed="true">
<path d="M13.0001 1.63672V4.90931H9.72754" stroke={primaryColor} stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M1 10.3663V7.09375H4.27259" stroke={primaryColor} stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path
d="M2.36903 4.36505C2.64566 3.58333 3.1158 2.88442 3.73559 2.33354C4.35539 1.78267 5.10463 1.39777 5.9134 1.21478C6.72218 1.03178 7.56413 1.05665 8.3607 1.28706C9.15727 1.51746 9.88249 1.9459 10.4687 2.5324L12.9995 4.91048M1 7.0922L3.5308 9.47029C4.117 10.0568 4.84222 10.4852 5.63879 10.7156C6.43536 10.946 7.27731 10.9709 8.08609 10.7879C8.89487 10.6049 9.64411 10.22 10.2639 9.66914C10.8837 9.11826 11.3538 8.41936 11.6305 7.63764"
stroke={primaryColor}
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
<span>Reset</span>
</button>
</div>
<div className="form-group-create">
<div className="tab-theming-section">
{/* Upload Logo */}
<div className="" onClick={() => imgUpload.current.click()}>
<input
type="file"
name="image"
onChange={(e) => {
if (
!(
e.target.files[0].type.includes('png') ||
e.target.files[0].type.includes('jpg') ||
e.target.files[0].type.includes('gif') ||
e.target.files[0].type.includes('jpeg') ||
e.target.files[0].type.includes('svg')
)
) {
Swal.fire({
icon: 'error',
title: 'Error',
text: 'Invalid file selected.',
});
} else if (e.target.files[0].size > 100000000) {
Swal.fire({
icon: 'error',
title: 'Error',
text: 'Selected file size should be less then 100MB.',
});
} else {
const formData = new FormData();
try {
formData.append('thumb', e.target.files[0]);
const imgurl = dispatch(uploadImage(allListState.currentOrganization?.id, formData));
imgurl.then((img) => {
setImgActive(img.data?.thumbUrl);
setFieldValue('image', img.data?.thumbUrl);
});
} catch (err) {
Swal.fire({
icon: 'error',
title: 'Error',
text: 'Image upload failed, kindly try again.',
});
}
}
}}
onBlur={handleBlur}
ref={imgUpload}
style={{ display: 'none' }}
/>
<div
style={{
display: 'flex',
alignItems: 'center',
}}
>
<div>
<img
src={imageActive ? (imageActive.includes('dev.currikistudio') ? imageActive : `${global.config.resourceUrl}${imageActive}`) : values.image}
style={{
width: '120px',
height: '72px',
borderRadius: '8px',
border: '1px solid #DDDDDD',
}}
/>
</div>
<div>
<div className="button-group tab-theming-btn-icon" style={{ paddingBottom: '0px' }}>
{' '}
<button type="button" className="mr-16">
<FontAwesomeIcon icon="upload" style={{ marginRight: '16px' }} color={secondaryColorIcon} />
Upload logo
</button>
</div>
</div>
</div>
<div className="dimensions-detail">
<p>Max. dimensions: 48px height</p>
</div>
<div className="error">{errors.image && touched.image && errors.image}</div>
</div>
{/* Upload Favicon */}
<div className="mr-100" onClick={() => faviconUpload.current.click()}>
<input
type="file"
name="favicon"
onChange={(e) => {
if (
!(
e.target.files[0].type.includes('png') ||
e.target.files[0].type.includes('jpg') ||
e.target.files[0].type.includes('gif') ||
e.target.files[0].type.includes('jpeg') ||
e.target.files[0].type.includes('svg') ||
e.target.files[0].type.includes('ico')
)
) {
Swal.fire({
icon: 'error',
title: 'Error',
text: 'Invalid file selected.',
});
} else if (e.target.files[0].size > 100000000) {
Swal.fire({
icon: 'error',
title: 'Error',
text: 'Selected file size should be less then 100MB.',
});
} else {
const formData = new FormData();
try {
formData.append('favicon', e.target.files[0]);
const imgurl = dispatch(uploadFaviconIcon(allListState.currentOrganization?.id, formData));
imgurl.then((img) => {
console.log(img.data?.faviconUrl);
setFaviconActive(img.data?.faviconUrl);
setFieldValue('favicon', img.data?.faviconUrl);
});
} catch (err) {
Swal.fire({
icon: 'error',
title: 'Error',
text: 'Image upload failed, kindly try again.',
});
}
}
}}
onBlur={handleBlur}
ref={faviconUpload}
style={{ display: 'none' }}
/>
<div
style={{
display: 'flex',
alignItems: 'center',
}}
>
<div>
<img
src={
faviconActive ? (faviconActive.includes('dev.currikistudio') ? faviconActive : `${global.config.resourceUrl}${faviconActive}`) : values.favicon
}
style={{
width: '72px',
height: '72px',
borderRadius: '8px',
border: '1px solid #DDDDDD',
}}
/>
</div>
<div>
<div className="button-group-favicon tab-theming-btn-icon" style={{ paddingBottom: '0px' }}>
{' '}
<button type="button" className="favicon mr-16">
<FontAwesomeIcon icon="upload" style={{ marginRight: '16px' }} />
Upload favicon
</button>
</div>
</div>
</div>
<div className="dimensions-detail">
<p>Max. dimensions: 16px or 32px height</p>
</div>
<div className="error">{errors.favicon && touched.favicon && errors.favicon}</div>
</div>
</div>
</div>
</div>
<div className="tab-inner-section mb-16 ">
<div className="tab_inner_header">
<h1>Colors</h1>
<button
type="button"
onClick={() => {
setFieldValue('primary_color', '#084892');
setFieldValue('secondary_color', '#F8AF2C');
setFieldValue('tertiary_color', '#515151');
updatePreviewScreen('#084892', '#F8AF2C', '#515151', values.primary_font_family, values.secondary_font_family);
}}
>
{/*<img src={ResetImg} alt="" />*/}
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="12" viewBox="0 0 14 12" fill="none" css-inspector-installed="true">
<path d="M13.0001 1.63672V4.90931H9.72754" stroke={primaryColor} stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M1 10.3663V7.09375H4.27259" stroke={primaryColor} stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path
d="M2.36903 4.36505C2.64566 3.58333 3.1158 2.88442 3.73559 2.33354C4.35539 1.78267 5.10463 1.39777 5.9134 1.21478C6.72218 1.03178 7.56413 1.05665 8.3607 1.28706C9.15727 1.51746 9.88249 1.9459 10.4687 2.5324L12.9995 4.91048M1 7.0922L3.5308 9.47029C4.117 10.0568 4.84222 10.4852 5.63879 10.7156C6.43536 10.946 7.27731 10.9709 8.08609 10.7879C8.89487 10.6049 9.64411 10.22 10.2639 9.66914C10.8837 9.11826 11.3538 8.41936 11.6305 7.63764"
stroke={primaryColor}
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
<span>Reset</span>
</button>
</div>
{/* Radio-For-Color */}
<div className="organization-own-select-radio">
<div className="form-check mr-43">
<input
id="parentColor"
className="form-check-input radio-custom"
onClick={() => {
setCheckedColorsParent(true);
setCheckedColorsOwn(false);
if (editMode) {
activeEdit?.parent?.branding && setFieldValue('primary_color', activeEdit?.parent?.branding.primary_color);
activeEdit?.parent?.branding && setFieldValue('secondary_color', activeEdit?.parent?.branding.secondary_color);
activeEdit?.parent?.branding && setFieldValue('tertiary_color', activeEdit?.parent?.branding.tertiary_color);
activeEdit?.parent?.branding &&
updatePreviewScreen(
activeEdit?.parent?.branding.primary_color,
activeEdit?.parent?.branding.secondary_color,
activeEdit?.parent?.branding.tertiary_color,
values.primary_font_family,
values.secondary_font_family
);
} else {
updatePreviewScreen(
activeOrganization?.branding.primary_color,
activeOrganization?.branding.secondary_color,
activeOrganization?.branding.tertiary_color,
values.primary_font_family,
values.secondary_font_family
);
activeOrganization?.branding && setFieldValue('primary_color', activeOrganization?.branding.primary_color);
activeOrganization?.branding && setFieldValue('secondary_color', activeOrganization?.branding.secondary_color);
activeOrganization?.branding && setFieldValue('tertiary_color', activeOrganization?.branding.tertiary_color);
}
}}
type="radio"
checked={checkedColorsParent}
/>
<label className="form-check-label radio-custom-label" for="parentColor">
Use from the parent organization
</label>
</div>
<div className="form-check">
<input
className="form-check-input radio-custom"
onClick={() => {
setCheckedColorsParent(false);
setCheckedColorsOwn(true);
if (editMode) {
activeEdit?.branding && setFieldValue('primary_color', activeEdit?.branding.primary_color);
activeEdit?.branding && setFieldValue('secondary_color', activeEdit?.branding.secondary_color);
activeEdit?.branding && setFieldValue('tertiary_color', activeEdit?.branding.tertiary_color);
updatePreviewScreen(
activeEdit?.branding.primary_color,
activeEdit?.branding.secondary_color,
activeEdit?.branding.tertiary_color,
values.primary_font_family,
values.secondary_font_family
);
} else {
setFieldValue('primary_color', saveAddOwnprimaryColor);
setFieldValue('secondary_color', saveAddOwnsecondaryColor);
setFieldValue('tertiary_color', saveAddOwnteritaryColor);
updatePreviewScreen(values.primary_color, values.secondary_color, values.tertiary_color, values.primary_font_family, values.secondary_font_family);
}
}}
type="radio"
id="ownColor"
checked={checkedColorsOwn}
/>
<label className="form-check-label radio-custom-label" for="ownColor">
Add my own colors
</label>
</div>
</div>
{checkedColorsOwn && (
<>
<section className="tab_inner_color_section">
<div className="tab_inner_color">
<h4>Primary </h4>
<div>
{/* <input type="color" value="#084892" /> */}
<input
type="color"
name="primary_color"
onChange={(e) => {
handleChange(e);
updatePreviewScreen(e.target.value, values.secondary_color, values.tertiary_color, values.primary_font_family, values.secondary_font_family);
}}
// onMouseLeave={(e) => {
// alert("Mouse Leve");
// checkedColorsOwn &&
// saveAddOwnprimaryColor(e.target.value);
// }}
onBlur={handleBlur}
value={values.primary_color}
/>
<input type="text" value={values.primary_color} />
<div className="error">{errors.name && touched.name && errors.name}</div>
</div>
<p>Use this color for Displays, Headings, Link texts, and some components in a default state if it says so on their own specs.</p>
</div>
<div className="tab_inner_color tab_inner_color_secondry">
<h4>Secondary </h4>
<div>
{/* <input type="color" value="#F8AF2C" /> */}
<input
type="color"
name="secondary_color"
onChange={(e) => {
handleChange(e);
updatePreviewScreen(values.primary_color, e.target.value, values.tertiary_color, values.primary_font_family, values.secondary_font_family);
}}
onBlur={handleBlur}
value={values.secondary_color}
/>
<input type="text" value={values.secondary_color} />
</div>
<p>This color should be use for details that we want to highlitght or that we want to make more visible for users.</p>
</div>
<div className="tab_inner_color tab_inner_color_tertiary">
<h4>Tertiary </h4>
<div>
{/* <input type="color" value="#515151" /> */}
<input
type="color"
name="tertiary_color"
onChange={(e) => {
handleChange(e);
updatePreviewScreen(values.primary_color, values.secondary_color, e.target.value, values.primary_font_family, values.secondary_font_family);
}}
onBlur={handleBlur}
value={values.tertiary_color}
/>
<input type="text" value={values.tertiary_color} />
</div>
<p>This color should be use for most of the body texts and some details that we want to highlitght or that we want to make more visible for users.</p>
</div>
</section>
</>
)}
</div>
<div className="tab-inner-section mb-16 ">
<div className="tab_inner_header">
<h1>Font</h1>
<button
type="button"
onClick={() => {
setFieldValue('primary_font_family', 'rubic');
setFieldValue('secondary_font_family', 'Open Sans');
updatePreviewScreen(values.primary_color, values.secondary_color, values.tertiary_color, 'rubic', 'Open Sans');
}}
>
{/*<img src={ResetImg} alt="" />*/}
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="12" viewBox="0 0 14 12" fill="none" css-inspector-installed="true">
<path d="M13.0001 1.63672V4.90931H9.72754" stroke={primaryColor} stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M1 10.3663V7.09375H4.27259" stroke={primaryColor} stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path
d="M2.36903 4.36505C2.64566 3.58333 3.1158 2.88442 3.73559 2.33354C4.35539 1.78267 5.10463 1.39777 5.9134 1.21478C6.72218 1.03178 7.56413 1.05665 8.3607 1.28706C9.15727 1.51746 9.88249 1.9459 10.4687 2.5324L12.9995 4.91048M1 7.0922L3.5308 9.47029C4.117 10.0568 4.84222 10.4852 5.63879 10.7156C6.43536 10.946 7.27731 10.9709 8.08609 10.7879C8.89487 10.6049 9.64411 10.22 10.2639 9.66914C10.8837 9.11826 11.3538 8.41936 11.6305 7.63764"
stroke={primaryColor}
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
<span>Reset</span>
</button>
</div>
{/* Radio-For-font */}
<div className="organization-own-select-radio">
<div className="form-check mr-43">
<input
id="parentFont"
className="form-check-input radio-custom"
onClick={() => {
setCheckedFontsParent(true);
setCheckedFontsOwn(false);
if (editMode) {
activeEdit?.parent?.branding && setFieldValue('primary_font_family', activeEdit?.parent?.branding.primary_font_family);
activeEdit?.parent?.branding && setFieldValue('secondary_font_family', activeEdit?.parent?.branding.secondary_font_family);
activeEdit?.parent?.branding &&
updatePreviewScreen(
values.primary_color,
values.secondary_color,
values.tertiary_color,
activeEdit?.parent?.branding.primary_font_family,
activeEdit?.parent?.branding.secondary_font_family
);
} else {
updatePreviewScreen(
values.primary_color,
values.secondary_color,
values.tertiary_color,
activeOrganization?.branding.primary_font_family,
activeOrganization?.branding.secondary_font_family
);
activeOrganization?.branding && setFieldValue('primary_font_family', activeOrganization?.branding.primary_font_family);
activeOrganization?.branding && setFieldValue('secondary_font_family', activeOrganization?.branding.secondary_font_family);
}
}}
type="radio"
checked={checkedFontsParent}
/>
<label className="form-check-label radio-custom-label" for="parentFont">
Use from the parent organization
</label>
</div>
<div className="form-check">
<input
className="form-check-input radio-custom"
onClick={() => {
setCheckedFontsParent(false);
setCheckedFontsOwn(true);
if (editMode) {
activeEdit?.branding && setFieldValue('primary_font_family', activeEdit?.branding.primary_font_family);
activeEdit?.branding && setFieldValue('secondary_font_family', activeEdit?.branding.secondary_font_family);
updatePreviewScreen(
values.primary_color,
values.secondary_color,
values.tertiary_color,
activeEdit?.branding.primary_font_family,
activeEdit?.branding.secondary_font_family
);
} else {
updatePreviewScreen(values.primary_color, values.secondary_color, values.tertiary_color, saveAddOwnprimaryFont, saveAddOwnsecondaryFont);
setFieldValue('primary_font_family', saveAddOwnprimaryFont);
setFieldValue('secondary_font_family', saveAddOwnsecondaryFont);
}
}}
type="radio"
id="ownFont"
checked={checkedFontsOwn}
/>
<label className="form-check-label radio-custom-label" for="ownFont">
Add my own fonts
</label>
</div>
</div>
{checkedFontsOwn && (
<>
<section className="tab_inner_font_section">
<div className="tab_inner_font_primary">
<h4>Primary </h4>
<select
name="primary_font_family"
onChange={(e) => {
handleChange(e);
updatePreviewScreen(values.primary_color, values.secondary_color, values.tertiary_color, e.target.value, values.secondary_font_family);
}}
onBlur={handleBlur}
value={values.primary_font_family}
>
<option value="rubic">Rubic</option>
<option value="SmoochSans">SmoochSans</option>
<option value="Open Sans">Open Sans</option>
<option value="Fredoka">Fredoka</option>
{/*<option value="BhuTukaExpandedOne">BhuTukaExpandedOne</option>*/}
</select>
</div>
<div className="tab_inner_font_primary">
<h4>Secondary </h4>
<select
name="secondary_font_family"
onChange={(e) => {
handleChange(e);
updatePreviewScreen(values.primary_color, values.secondary_color, e.target.value, values.primary_font_family, e.target.value);
}}
onBlur={handleBlur}
value={values.secondary_font_family}
>
<option value="rubic">Rubic</option>
<option value="SmoochSans">SmoochSans</option>
<option value="Open Sans">Open Sans</option>
<option value="Fredoka">Fredoka</option>
{/*<option value="BhuTukaExpandedOne">BhuTukaExpandedOne</option>*/}
</select>
</div>
{/* <div className="tab_inner_font_upload">
<div>
<img src={UploadImg} />
</div>
<div className="tab_inner_font_text">
<h6>Upload Custom Fonts</h6>
<p>Drag {"&"} drop or browse</p>
</div>
</div> */}
</section>
</>
)}
</div>
<div className="tab-inner-section tab-inner-section-preview ">
<div className="tab_inner_header">
<h1>Preview</h1>
<div>
<img
src={Angle}
alt=""
onClick={() => {
setSelectPreview(!selectPreview);
}}
/>
</div>
</div>
<div className={selectPreview ? 'tab-inner-preview-hidden' : 'tab-inner-preview'}>
{/* <h1>Preview {selectPreview}</h1> */}
{/* <div width="100%" height="100%">
<ProjectsPage />
</div> */}
<div style={{ width: '100%' }}>
<BrandingPage getShow={true} />
</div>
</div>
</div>
</div>
</Tab>
</Tabs>
<div className="tab-common-btns">
<div className="button-group button-group-tabs">
<button
type="button"
className="cancel mr-16"
onClick={() => {
dispatch(removeActiveAdminForm());
}}
>
Cancel
</button>
<button
type="submit"
onClick={() => {
setFieldValue('tos_content', tosContentValue);
setFieldValue('privacy_policy_content', ppContentValue);
}}
>
{editMode ? 'Save ' : 'Save'} Organization
</button>
</div>
</div>
</form>
)}
</Formik>
<TermsModal
initialVal={tosContentValue}
show={show} // {props.show}
onHide={handleClose}
handleTermsEditorChange={handleTermsEditorChange}
/>
<PolicyModal
initialVal={ppContentValue}
show={ppShow} // {props.show}
onHide={ppHandleClose}
handlePolicyEditorChange={handlePolicyEditorChange}
/>
</div>
);
}
Example #20
| Source File: index.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 4 votes |
|
function AdminPanel({ showSSO }) {
const history = useHistory();
const dispatch = useDispatch();
const [allProjectTab, setAllProjectTab] = useState(null);
const adminState = useSelector((state) => state.admin);
const [users, setUsers] = useState(null);
const { paginations } = useSelector((state) => state.ui);
const organization = useSelector((state) => state.organization);
const { permission, roles, currentOrganization, activeOrganization } = organization;
const { activeForm, activeTab, removeUser } = adminState;
const [modalShow, setModalShow] = useState(false);
const [modalShowTeam, setModalShowTeam] = useState(false);
const [rowData, setrowData] = useState(false);
const [activePageNumber, setActivePageNumber] = useState(false);
useEffect(() => {
if ((roles?.length === 0 && activeOrganization?.id) || activeOrganization?.id !== currentOrganization?.id) {
dispatch(getRoles());
}
}, [activeOrganization]);
useEffect(() => {}, [activeTab]);
useEffect(() => {
const tab = localStorage.getItem('activeTab');
if (tab) {
dispatch(setActiveTab(tab));
}
}, []);
useEffect(() => {
if (paginations?.length <= 1 || !paginations) {
dispatch({
type: actionTypes.UPDATE_PAGINATION,
payload: [currentOrganization || []],
});
}
}, [currentOrganization]);
const paragraphColor = getGlobalColor('--main-paragraph-text-color');
return (
<div className="admin-panel">
{true ? (
<>
<div className="content-wrapper">
<div className="inner-content">
<Breadcrump />
<Heading />
{!showSSO ? (
<Tabs
defaultActiveKey={activeTab}
activeKey={activeTab}
id="uncontrolled-tab-example"
onSelect={(key) => {
dispatch(setActiveTab(key));
localStorage.setItem('activeTab', key);
}}
>
{permission?.Organization?.includes('organization:view') && (
<Tab eventKey="Organization" title="Organizations">
<div className="parent-organization-detail">
<div className="detailer">
<h3>Main organization: {currentOrganization?.name}</h3>
<p>{currentOrganization?.description}</p>
</div>
{permission?.Organization?.includes('organization:edit') && (
<button
onClick={() => {
dispatch(setActiveAdminForm('edit_org'));
dispatch({
type: 'SET_ACTIVE_EDIT',
payload: currentOrganization,
});
}}
>
{/*<img src={editicon} alt="" />*/}
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" className="mr-2" viewBox="0 0 14 14" fill="none" css-inspector-installed="true">
<path
d="M6.36842 2.26562H2.19374C1.8774 2.26563 1.57402 2.39129 1.35033 2.61498C1.12664 2.83867 1.00098 3.14205 1.00098 3.45839V11.8078C1.00098 12.1241 1.12664 12.4275 1.35033 12.6512C1.57402 12.8749 1.8774 13.0005 2.19374 13.0005H10.5431C10.8594 13.0005 11.1628 12.8749 11.3865 12.6512C11.6102 12.4275 11.7359 12.1241 11.7359 11.8078V7.63307"
stroke={paragraphColor}
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M10.8404 1.37054C11.0776 1.13329 11.3994 1 11.735 1C12.0705 1 12.3923 1.13329 12.6295 1.37054C12.8668 1.6078 13.0001 1.92959 13.0001 2.26512C13.0001 2.60065 12.8668 2.92244 12.6295 3.15969L6.9639 8.82533L4.57837 9.42172L5.17475 7.03618L10.8404 1.37054Z"
stroke={paragraphColor}
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
Edit organization
</button>
)}
</div>
<div className="module-content">
<Pills modules={['All Organizations']} type="Organization" subType="All Organizations" />
</div>
</Tab>
)}
{(permission?.Organization?.includes('organization:view-all-project') || permission?.Organization?.includes('organization:view-exported-project')) && (
<Tab eventKey="Projects" title="Projects">
<div className="module-content">
<Pills
setModalShow={setModalShow}
modules={[
permission?.Organization?.includes('organization:view-all-project') && 'All Projects',
permission?.Organization?.includes('organization:view-exported-project') && 'Exported Projects',
]}
allProjectTab={allProjectTab}
setAllProjectTab={setAllProjectTab}
type="Projects"
setrowData={setrowData}
setActivePageNumber={setActivePageNumber}
/>
</div>
</Tab>
)}
{(permission?.Organization?.includes('organization:view-activity-item') ||
permission?.Organization?.includes('organization:view-activity-type') ||
permission?.Organization?.includes('organization:view-activity-type')) && (
<Tab eventKey="Activities" title="Activities">
<div className="module-content">
<Pills
modules={[
'Activity Layouts',
permission?.Organization?.includes('organization:view-activity-type') && 'Activity Types',
permission?.Organization?.includes('organization:view-activity-item') && 'Activity Items',
'Subjects',
'Education Level',
'Author Tags',
]}
type="Activities"
/>
</div>
</Tab>
)}
{(permission?.Organization?.includes('organization:view-user') || permission?.Organization?.includes('organization:view-role')) && (
<Tab eventKey="Users" title="Users">
<div className="module-content">
<Pills
type="Users"
modules={[
permission?.Organization?.includes('organization:view-user') && 'All Users',
permission?.Organization?.includes('organization:view-role') && 'Manage Roles',
]}
subType="All Users"
users={users}
setUsers={setUsers}
/>
</div>
</Tab>
)}
{permission?.Organization?.includes('organization:view-user') && (
<Tab eventKey="Teams" title="Teams">
<div className="module-content">
<Pills type="Teams" modules={['All teams']} subType="All teams" setModalShowTeam={setModalShowTeam} />
</div>
</Tab>
)}
{(permission?.Organization?.includes('organization:view-lms-setting') || permission?.Organization?.includes('organization:view-all-setting')) && (
<Tab eventKey="LMS" title="Integrations">
<div className="module-content">
<Pills
modules={[
permission?.Organization?.includes('organization:view-lms-setting') && 'LMS settings',
permission?.Organization?.includes('organization:view-all-setting') && 'LTI Tools',
permission?.Organization?.includes('organization:view-brightcove-setting') && 'BrightCove',
]}
type="LMS"
/>
{/* <Pills modules={['All settings', 'LTI Tools']} type="LMS" /> */}
</div>
</Tab>
)}
{/* <Tab eventKey="Settings" title="Settings">
<div className="module-content">
<h2>Settings</h2>
<Pills modules={["All settings"]} type="Settings" />
</div>
</Tab> */}
</Tabs>
) : (
<Tabs
defaultActiveKey={'DefaultSso'}
activeKey={'DefaultSso'}
id="uncontrolled-tab-example"
onSelect={(key) => {
dispatch(setActiveTab(key));
localStorage.setItem('activeTab', key);
}}
>
{permission.activeRole?.includes('admin') && !currentOrganization?.parent && (
<Tab eventKey="DefaultSso" title="Default SSO settings">
<div className="module-content">
<Pills modules={['All Default SSO Settings']} type="DefaultSso" />
</div>
</Tab>
)}
</Tabs>
)}
</div>
</div>
{(activeForm === 'add_activity_type' || activeForm === 'edit_activity_type') && (
<div className="form-new-popup-admin">
<div className="inner-form-content">{activeForm === 'add_activity_type' ? <CreateActivityType /> : <CreateActivityType editMode />}</div>
</div>
)}
{(activeForm === 'add_activity_item' || activeForm === 'edit_activity_item') && (
<div className="form-new-popup-admin">
<FontAwesomeIcon
icon="times"
className="cross-all-pop"
onClick={() => {
dispatch(removeActiveAdminForm());
}}
/>
<div className="inner-form-content">{activeForm === 'add_activity_item' ? <CreateActivityItem /> : <CreateActivityItem editMode />}</div>
</div>
)}
{(activeForm === 'add_subject' || activeForm === 'edit_subject') && (
<div className="form-new-popup-admin">
<FontAwesomeIcon
icon="times"
className="cross-all-pop"
onClick={() => {
dispatch(removeActiveAdminForm());
}}
/>
<div className="inner-form-content">{activeForm === 'add_subject' ? <CreateSubject /> : <CreateSubject editMode />}</div>
</div>
)}
{(activeForm === 'add_education_level' || activeForm === 'edit_education_level') && (
<div className="form-new-popup-admin">
<FontAwesomeIcon
icon="times"
className="cross-all-pop"
onClick={() => {
dispatch(removeActiveAdminForm());
}}
/>
<div className="inner-form-content">{activeForm === 'add_education_level' ? <CreateEducationLevel /> : <CreateEducationLevel editMode />}</div>
</div>
)}
{(activeForm === 'add_author_tag' || activeForm === 'edit_author_tag') && (
<div className="form-new-popup-admin">
<FontAwesomeIcon
icon="times"
className="cross-all-pop"
onClick={() => {
dispatch(removeActiveAdminForm());
}}
/>
<div className="inner-form-content">{activeForm === 'add_author_tag' ? <CreateAuthorTag /> : <CreateAuthorTag editMode />}</div>
</div>
)}
{(activeForm === 'add_activity_layout' || activeForm === 'edit_activity_layout') && (
<div className="form-new-popup-admin">
<FontAwesomeIcon
icon="times"
className="cross-all-pop"
onClick={() => {
dispatch(removeActiveAdminForm());
}}
/>
<div className="inner-form-content">{activeForm === 'add_activity_layout' ? <CreateActivityLayout /> : <CreateActivityLayout editMode />}</div>
</div>
)}
{(activeForm === 'add_org' || activeForm === 'edit_org') && (
<div className="form-new-popup-admin">
<div className="inner-form-content" style={{ width: '944px' }}>
{activeForm === 'add_org' ? <CreateOrg /> : <CreateOrg editMode />}
</div>
</div>
)}
{activeForm === 'add_role' && (
<div className="form-new-popup-admin">
<FontAwesomeIcon
icon="times"
className="cross-all-pop"
onClick={() => {
dispatch(removeActiveAdminForm());
}}
/>
<div className="inner-form-content">
<AddRole />
</div>
</div>
)}
{activeForm === 'add_lms' && (
<div className="form-new-popup-admin">
<FontAwesomeIcon
icon="times"
className="cross-all-pop"
onClick={() => {
dispatch(removeActiveAdminForm());
}}
/>
<div className="inner-form-content">
<CreateLms method="create" />
</div>
</div>
)}
{activeForm === 'add_brightcove' && (
<div className="form-new-popup-admin">
<div className="inner-form-content">
<BrightCove mode={activeForm} />
</div>
</div>
)}
{activeForm === 'edit_bright_form' && (
<div className="form-new-popup-admin">
<div className="inner-form-content">
<BrightCove mode={activeForm} editMode />
</div>
</div>
)}
{activeForm === 'edit_lms' && (
<div className="form-new-popup-admin">
<FontAwesomeIcon
icon="times"
className="cross-all-pop"
onClick={() => {
dispatch(removeActiveAdminForm());
}}
/>
<div className="inner-form-content">
<CreateLms editMode />
</div>
</div>
)}
{activeForm === 'clone_lms' && (
<div className="form-new-popup-admin">
<FontAwesomeIcon
icon="times"
className="cross-all-pop"
onClick={() => {
dispatch(removeActiveAdminForm());
}}
/>
<div className="inner-form-content">
<CreateLms editMode clone />
</div>
</div>
)}
{activeForm === 'edit_project' && (
<div className="form-new-popup-admin">
<FontAwesomeIcon
icon="times"
className="cross-all-pop"
onClick={() => {
dispatch(removeActiveAdminForm());
}}
/>
<div className="inner-form-content">
<EditProject editMode allProjectTab={allProjectTab} setAllProjectTab={setAllProjectTab} />
</div>
</div>
)}
{activeForm === 'create_user' && <CreateUser mode={activeForm} />}
{activeForm === 'edit_user' && (
<div className="form-new-popup-admin">
<div className="inner-form-content">
<CreateUserForm mode={activeForm} editMode />
</div>
</div>
)}
{activeForm === 'add_default_sso' && (
<div className="form-new-popup-admin">
<FontAwesomeIcon
icon="times"
className="cross-all-pop"
onClick={() => {
dispatch(removeActiveAdminForm());
}}
/>
<div className="inner-form-content">
<CreateDefaultSso method="create" />
</div>
</div>
)}
{activeForm === 'edit_default_sso' && (
<div className="form-new-popup-admin">
<FontAwesomeIcon
icon="times"
className="cross-all-pop"
onClick={() => {
dispatch(removeActiveAdminForm());
}}
/>
<div className="inner-form-content">
<CreateDefaultSso editMode />
</div>
</div>
)}
{activeForm === 'clone_lti_tool' && (
<div className="form-new-popup-admin">
<FontAwesomeIcon
icon="times"
className="cross-all-pop"
onClick={() => {
dispatch(removeActiveAdminForm());
}}
/>
<div className="inner-form-content">
<CreateLtiTool editMode clone />
</div>
</div>
)}
{(activeForm === 'add_lti_tool' || activeForm === 'edit_lti_tool') && (
<div className="form-new-popup-admin">
<FontAwesomeIcon
icon="times"
className="cross-all-pop"
onClick={() => {
dispatch(removeActiveAdminForm());
}}
/>
<div className="inner-form-content">{activeForm === 'add_lti_tool' ? <CreateLtiTool /> : <CreateLtiTool editMode />}</div>
</div>
)}
{removeUser && <RemoveUser users={users} setUsers={setUsers} />}
<EditProjectModel
show={modalShow}
onHide={() => setModalShow(false)}
row={rowData}
showFooter={true}
activePage={activePageNumber}
setAllProjectTab={setAllProjectTab}
activeOrganization={activeOrganization}
/>
<EditTeamModel show={modalShowTeam} onHide={() => setModalShowTeam(false)} activePage={activePageNumber} activeOrganization={activeOrganization} showFooter={true} />
</>
) : (
<div className="content-wrapper" style={{ padding: '20px' }}>
<Alert variant="danger">You are not authorized to view this page.</Alert>
</div>
)}
</div>
);
}
Example #21
| Source File: pills.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 4 votes |
|
export default function Pills(props) {
const { modules, type, subType, allProjectTab, setAllProjectTab, setModalShow, setModalShowTeam, setrowData, setActivePageNumber, users, setUsers } = props;
const [key, setKey] = useState(modules?.filter((data) => !!data)[0]);
const [subTypeState, setSubTypeState] = useState(subType);
// All User Business Logic Start
const dispatch = useDispatch();
const organization = useSelector((state) => state.organization);
const { activityTypes, activityItems, usersReport, allbrightCove, teams } = useSelector((state) => state.admin);
const [userReportsStats, setUserReportStats] = useState(null);
const admin = useSelector((state) => state.admin);
const [activePage, setActivePage] = useState(1);
const [size, setSize] = useState(10);
const [projectFilterObj, setProjectFilterObj] = useState({
author_id: null,
created_from: null,
created_to: null,
updated_from: null,
updated_to: null,
indexing: null,
shared: null,
});
const { activeOrganization, roles, permission, searchUsers, allSuborgList } = organization;
const [activeRole, setActiveRole] = useState('');
const { activeTab, activityType } = admin;
const [currentTab, setCurrentTab] = useState('All Projects');
const [searchAlertToggler, setSearchAlertToggler] = useState(1);
const [searchAlertTogglerStats, setSearchAlertTogglerStats] = useState(1);
const [searchQuery, setSearchQuery] = useState('');
const [searchQueryProject, setSearchQueryProject] = useState('');
const [searchQueryStats, setSearchQueryStats] = useState('');
const [searchQueryActivities, setSearchQueryActivities] = useState('');
const [searchQueryTeam, setSearchQueryTeam] = useState('');
const [allProjectUserTab, setAllProjectUserTab] = useState(null);
const [allProjectIndexTab, setAllProjectIndexTab] = useState(null);
const [libraryReqSelected, setLibraryReqSelected] = useState(false);
const [lmsProject, setLmsProject] = useState(null);
const [lmsBrightCove, setlmsBrightCove] = useState(null);
const [defaultSso, setDefaultSso] = useState(null);
const [defaultSsoFilterBy, setDefaultSsoFilterBy] = useState('');
const [ltiTool, setLtiTool] = useState(null);
const [ltiToolFilterBy, setLtiToolFilterBy] = useState('');
const [jobs, setJobs] = useState(null);
const [jobType, SetJobType] = useState({ value: 1, display_name: 'Pending' });
const [logs, setLogs] = useState(null);
const [logType, SetLogType] = useState({ value: 'all', display_name: 'All' });
const [changeIndexValue, setChangeIndexValue] = useState('0');
const [orderBy, setOrderBy] = useState('desc');
const [currentOrderBy, setCurrentOrderBy] = useState('');
const [orderByColumn, setOrderByColumn] = useState('');
const dataRedux = useSelector((state) => state);
const [subjects, setSubjects] = useState(null);
const [educationLevel, setEducationLevel] = useState(null);
const [authorTag, setAuthorTag] = useState(null);
const [activityLayout, setActivityLayout] = useState(null);
const [lmsProjectFilterBy, setLmsProjectFilterBy] = useState('');
const [searchLayoutQuery, setSearchLayoutQuery] = useState('');
const [searchSubjectsQuery, setSearchSubjectsQuery] = useState('');
const [searchAuthorTagQuery, setSearchAuthorTagQuery] = useState('');
const [searchEducationLevelQuery, setSearchEducationLevelQuery] = useState('');
const [searchActivityTypesQuery, setSearchActivityTypesQuery] = useState('');
const [searchActivityItemsQuery, setSearchActivityItemsQuery] = useState('');
useEffect(() => {
setKey(modules?.filter((data) => !!data)[0]);
}, [activeTab]);
useEffect(() => {
setlmsBrightCove(allbrightCove);
}, [allbrightCove]);
const searchUsersFromOrganization = async (query, page) => {
if (query.length > 1) {
const result = await dispatch(searchUserInOrganization(activeOrganization?.id, query, searchUsers ? activePage : 1, activeRole, size, orderByColumn, currentOrderBy));
if (result?.data?.length > 0) {
setUsers(result);
setSearchAlertToggler(1);
} else {
setSearchAlertToggler(0);
}
}
};
const searchQueryChangeHandler = async ({ target }) => {
if (target.value.trim().length) {
if (!!alphaNumeric(target.value)) {
setSearchQuery(target.value);
}
searchUsersFromOrganization(target.value, activePage);
setActivePage(searchUsers ? activePage : 1);
if (target.value.trim().length > 1) setUsers(null);
} else {
dispatch(clearSearchUserInOrganization());
setActivePage(1);
setSearchQuery('');
const result = await dispatch(getOrgUsers(activeOrganization?.id, 1, activeRole, size, searchQuery, orderByColumn, currentOrderBy));
setUsers(result);
}
};
const searchProjectQueryChangeHandler = async (query, index, type) => {
// if (type === 'Library requests') {
// if (!!query) {
// setAllProjectIndexTab(null);
// const searchapi = adminService.userSerchIndexs(activeOrganization?.id, activePage, index, query);
// searchapi
// .then((data) => {
// setAllProjectIndexTab(data);
// })
// .catch((e) => setAllProjectIndexTab([]));
// } else {
// setActivePage(1);
// const searchapi = adminService.getAllProjectIndex(activeOrganization?.id, 1, index);
// searchapi.then((data) => {
// setAllProjectIndexTab(data);
// });
// }
// } else
if (type === 'All Projects') {
if (!!query) {
setAllProjectTab(null);
const allproject = adminService.getAllProjectSearch(activeOrganization?.id, 1, query, size, orderByColumn, currentOrderBy);
allproject
.then((data) => {
setAllProjectTab(data);
})
.catch((e) => setAllProjectTab([]));
} else {
setActivePage(1);
const allproject = adminService.getAllProject(activeOrganization?.id, 1, size);
allproject.then((data) => {
setAllProjectTab(data);
});
}
} else if (type === 'user') {
if (!!query) {
setAllProjectUserTab(null);
const userproject = adminService.getUserProjectSearch(activeOrganization?.id, activePage, query);
userproject
.then((data) => {
setAllProjectUserTab(data);
})
.catch((e) => setAllProjectUserTab([]));
} else {
setActivePage(1);
const userproject = adminService.getUserProject(activeOrganization?.id, 1);
userproject.then((data) => {
setAllProjectUserTab(data);
});
}
}
};
useMemo(() => {
if (activeTab !== 'Users') setActiveRole(null);
}, [activeTab]);
useMemo(async () => {
if (activeOrganization && type === 'Users' && subTypeState === 'All Users') {
if (searchQuery.length > 1) {
const result = await dispatch(getOrgUsers(activeOrganization?.id, activePage, activeRole, size, searchQuery, orderByColumn, currentOrderBy));
setSearchQuery(searchQuery);
setUsers(result);
} else if (organization?.users?.data?.length > 0 && activePage === organization?.activePage && !activeRole) {
setUsers(organization?.users);
} else if (activeRole) {
const result = await dispatch(getOrgUsers(activeOrganization?.id, activePage, activeRole, size, searchQuery, orderByColumn, currentOrderBy));
setUsers(result);
}
}
if (type === 'Organization') {
dispatch(getsubOrgList(activeOrganization?.id, size, activePage, searchQuery, orderByColumn, currentOrderBy));
}
}, [activeOrganization, activePage, type, subTypeState, activeTab, activeRole, organization?.users?.length, size]);
// All Users Business Logic End
useMemo(async () => {
setAllProjectTab && setAllProjectTab(null);
setAllProjectUserTab(null);
setAllProjectIndexTab(null);
if (activeOrganization && type === 'Projects' && currentTab == 'All Projects') {
if (libraryReqSelected) {
if (searchQueryProject) {
const allproject = adminService.userSerchIndexs(activeOrganization?.id, activePage, 1, searchQueryProject, size);
allproject
.then((data) => {
setAllProjectTab(data);
})
.catch((e) => setAllProjectTab([]));
} else {
const result = await adminService.getAllProjectIndex(
activeOrganization?.id,
activePage || 1,
1,
size,
projectFilterObj.author_id || undefined,
projectFilterObj.created_from || undefined,
projectFilterObj.created_to || undefined,
projectFilterObj.updated_from || undefined,
projectFilterObj.updated_to || undefined,
projectFilterObj.shared
);
setAllProjectTab(result);
}
} else {
if (searchQueryProject) {
const allproject = adminService.getAllProjectSearch(activeOrganization?.id, activePage, searchQueryProject, size, orderByColumn, currentOrderBy);
allproject
.then((data) => {
setAllProjectTab(data);
})
.catch((e) => setAllProjectTab([]));
} else {
const result = await adminService.getAllProject(
activeOrganization?.id,
activePage || 1,
size,
projectFilterObj.author_id || null,
projectFilterObj.created_from || null,
projectFilterObj.created_to || null,
projectFilterObj.updated_from || null,
projectFilterObj.updated_to || null,
projectFilterObj.shared,
projectFilterObj.indexing,
searchQuery,
orderByColumn,
currentOrderBy
);
setAllProjectTab(result);
}
}
} else if (activeOrganization && type === 'Projects' && currentTab === 'Exported Projects') {
if (searchQueryProject) {
const userproject = adminService.getAllExportedProject(activePage, size, searchQueryProject);
userproject
.then((data) => {
setAllProjectUserTab(data);
})
.catch((e) => setAllProjectUserTab([]));
} else {
const result = await adminService.getAllExportedProject(activePage || 1, size);
setAllProjectUserTab(result);
}
}
// if (activeOrganization && type === 'Projects' && currentTab === 'Library requests') {
// if (searchQueryProject) {
// const searchapi = adminService.userSerchIndexs(activeOrganization?.id, activePage, changeIndexValue, searchQueryProject, size);
// searchapi
// .then((data) => {
// setAllProjectIndexTab(data);
// })
// .catch((e) => setAllProjectIndexTab([]));
// } else {
// const result = await adminService.getAllProjectIndex(
// activeOrganization?.id,
// activePage || 1,
// changeIndexValue,
// size,
// projectFilterObj.author_id || undefined,
// projectFilterObj.created_from || undefined,
// projectFilterObj.created_to || undefined,
// projectFilterObj.updated_from || undefined,
// projectFilterObj.updated_to || undefined,
// projectFilterObj.shared
// );
// setAllProjectIndexTab(result);
// }
// }
}, [activeOrganization?.id, type, activePage, changeIndexValue, currentTab, size, searchQueryProject, libraryReqSelected]);
// Activity Tab Business Logic
useEffect(() => {
if (type === 'Activities' && subTypeState === 'Activity Items') {
//pagination
dispatch(getActivityItems(activeOrganization?.id, searchActivityItemsQuery, activePage, size, orderByColumn, currentOrderBy));
dispatch(updatePageNumber(activePage));
} else if (type === 'Activities' && subTypeState === 'Activity Items' && activePage === 1) {
//on page 1
dispatch(getActivityItems(activeOrganization?.id, searchActivityItemsQuery, activePage, size, orderByColumn, currentOrderBy));
dispatch(updatePageNumber(activePage));
}
}, [type, subTypeState, activePage, size, activeOrganization]);
useEffect(() => {
if (type === 'Activities' && subTypeState === 'Activity Layouts' && activePage) {
//pagination
dispatch(getActivityTypes(activeOrganization?.id, activePage, size, orderByColumn, currentOrderBy, searchActivityTypesQuery));
dispatch(updatePageNumber(activePage));
} else if (type === 'Activities' && subTypeState === 'Activity Types') {
//on page 1
// dispatch(loadResourceTypesAction());
dispatch(getActivityTypes(activeOrganization?.id, activePage, size, orderByColumn, currentOrderBy, searchActivityTypesQuery))
dispatch(updatePageNumber(activePage));
}
}, [activePage, subTypeState, type, size, activeOrganization]);
const searchActivitiesQueryHandler = async (query, subTypeRecieved) => {
if (subTypeRecieved === 'Activity Types') {
if (query) {
await dispatch(loadResourceTypesAction(query, ''));
} else {
await dispatch(loadResourceTypesAction());
}
} else if (subTypeRecieved === 'Activity Items') {
if (query) {
const encodeQuery = encodeURI(searchQueryActivities);
await dispatch(getActivityItems(activeOrganization?.id, encodeQuery, activePage, size));
} else if (query === '') {
await dispatch(getActivityItems(activeOrganization?.id, searchActivityItemsQuery, activePage, size));
}
}
};
// Stats User Report
useEffect(() => {
if (type === 'Stats' && subTypeState === 'Report' && searchQueryStats) {
setUserReportStats(null);
let result = dispatch(getUserReport('all', size, activePage, searchQueryStats));
result.then((data) => {
setUserReportStats(data);
});
} else if (type === 'Stats' && subTypeState === 'Report' && (activePage !== organization?.activePage || size !== organization?.size)) {
//pagination
setUserReportStats(null);
let result = dispatch(getUserReport('all', size, activePage, ''));
result.then((data) => {
setUserReportStats(data);
});
} else if (type === 'Stats' && subTypeState === 'Report' && (activePage === 1 || size === 10)) {
//on page 1
setUserReportStats(null);
let result = dispatch(getUserReport('all'));
result.then((data) => {
setUserReportStats(data);
});
}
if (type === 'Stats' && subTypeState === 'Queues: Jobs' && searchQueryStats) {
let result = dispatch(getJobListing(jobType.value, size, activePage, searchQueryStats));
result.then((data) => setJobs(data.data));
} else if (type === 'Stats' && subTypeState === 'Queues: Jobs' && (activePage !== organization?.activePage || size !== organization?.size) && jobType) {
const result = dispatch(getJobListing(jobType.value, size, activePage));
result.then((data) => {
setJobs(data.data);
});
} else if (type === 'Stats' && subTypeState === 'Queues: Jobs' && (activePage === 1 || size === 10)) {
const result = dispatch(getJobListing(jobType.value));
result.then((data) => {
setJobs(data.data);
});
}
if (type === 'Stats' && subTypeState === 'Queues: Logs' && searchQueryStats) {
let result = dispatch(getLogsListing(logType.value, size, activePage, searchQueryStats));
result.then((data) => setLogs(data.data));
} else if (type === 'Stats' && subTypeState === 'Queues: Logs' && (activePage !== organization?.activePage || size !== organization?.size) && logType) {
const result = dispatch(getLogsListing(logType.value, size, activePage));
result.then((data) => {
setLogs(data.data);
});
} else if (type === 'Stats' && subTypeState === 'Queues: Logs' && (activePage === 1 || size === 10)) {
const result = dispatch(getLogsListing(logType.value));
result.then((data) => {
setLogs(data.data);
});
}
}, [activePage, subTypeState, type, size, jobType, logType]);
const searchUserReportQueryHandler = async (query, subTypeRecieved) => {
if (subTypeRecieved === 'Report') {
if (query) {
setUserReportStats(null);
let result = await dispatch(getUserReport('all', size, undefined, query));
setUserReportStats(result);
if (result?.data?.length > 0) {
setSearchAlertTogglerStats(1);
} else {
setSearchAlertTogglerStats(0);
}
} else {
setUserReportStats(null);
let result = await dispatch(getUserReport('all', size, 1));
setUserReportStats(result);
setActivePage(1);
}
}
if (subTypeRecieved === 'Queues: Jobs') {
if (query) {
let result = dispatch(getJobListing(jobType.value, size, undefined, query));
result.then((data) => {
setJobs(data.data);
if (data?.data?.length > 0) {
setSearchAlertTogglerStats(1);
} else {
setSearchAlertTogglerStats(0);
}
});
} else {
let result = dispatch(getJobListing(jobType.value, size, activePage));
result.then((data) => setJobs(data.data));
}
}
if (subTypeRecieved === 'Queues: Logs') {
if (query) {
let result = dispatch(getLogsListing(logType.value, size, undefined, query));
result.then((data) => {
setLogs(data.data);
if (data?.data?.length > 0) {
setSearchAlertTogglerStats(1);
} else {
setSearchAlertTogglerStats(0);
}
});
} else {
let result = dispatch(getLogsListing(logType.value, size, activePage));
result.then((data) => setLogs(data.data));
}
}
};
//LMS project ***************************************
useMemo(async () => {
if (type === 'LMS') {
dispatch(getLmsProject(activeOrganization?.id, activePage || 1, size, searchQuery, orderByColumn, currentOrderBy, lmsProjectFilterBy));
}
if (type === 'LMS') {
dispatch(getLtiTools(activeOrganization?.id, activePage || 1, size, searchQuery, orderByColumn, currentOrderBy, ltiToolFilterBy));
}
if (type === 'LMS') {
dispatch(allBrightCove(activeOrganization?.id, size, activePage || 1));
}
}, [type, size, activePage, activeOrganization?.id]);
useEffect(() => {
if (dataRedux.admin.ltiTools) {
setLtiTool(dataRedux.admin.ltiTools);
}
}, [dataRedux.admin.ltiTools]);
useEffect(() => {
if (dataRedux.admin.defaultSso) {
setDefaultSso(dataRedux.admin.defaultSso);
}
}, [dataRedux.admin.defaultSso]);
useEffect(() => {
if (dataRedux.admin.lmsIntegration) {
setLmsProject(dataRedux.admin.lmsIntegration);
}
}, [dataRedux.admin.lmsIntegration]);
useMemo(async () => {
if (subTypeState === 'Subjects') {
dispatch(getSubjects(activeOrganization?.id, activePage || 1, size, searchSubjectsQuery, orderByColumn, currentOrderBy));
dispatch(updatePageNumber(activePage));
}
if (subTypeState === 'Education Level') {
dispatch(getEducationLevel(activeOrganization?.id, activePage || 1, size, searchEducationLevelQuery, orderByColumn, currentOrderBy));
dispatch(updatePageNumber(activePage));
}
if (subTypeState === 'Author Tags') {
dispatch(getAuthorTag(activeOrganization?.id, activePage || 1, size, searchAuthorTagQuery, orderByColumn, currentOrderBy));
dispatch(updatePageNumber(activePage));
}
if (type === 'Activities') {
dispatch(getActivityLayout(activeOrganization?.id, activePage || 1, size, searchLayoutQuery, orderByColumn, currentOrderBy));
}
}, [type, subTypeState, activePage, activeOrganization?.id, size, currentOrderBy]);
useEffect(() => {
if (dataRedux.admin.subjects) {
setSubjects(dataRedux.admin.subjects);
}
}, [dataRedux.admin.subjects]);
useEffect(() => {
if (dataRedux.admin.education_level) {
setEducationLevel(dataRedux.admin.education_level);
}
}, [dataRedux.admin.education_level]);
useEffect(() => {
if (dataRedux.admin.author_tags) {
setAuthorTag(dataRedux.admin.author_tags);
}
}, [dataRedux.admin.author_tags]);
useEffect(() => {
if (dataRedux.admin.activity_layouts) {
setActivityLayout(dataRedux.admin.activity_layouts);
}
}, [dataRedux.admin.activity_layouts]);
const searchQueryChangeHandlerLMS = (search) => {
setLmsProject(null);
setActivePage(1);
const encodeQuery = encodeURI(search.target.value);
setSearchQuery(encodeQuery);
const result = adminService.getLmsProject(activeOrganization?.id, 1, size, encodeQuery, orderByColumn, currentOrderBy, lmsProjectFilterBy);
result.then((data) => {
setLmsProject(data);
});
};
const searchQueryChangeHandlerLMSBrightCove = (search) => {
setlmsBrightCove(null);
setActivePage(1);
const encodeQuery = encodeURI(search.target.value);
dispatch(allBrightCoveSearch(activeOrganization?.id, encodeQuery, size, 1));
};
const searchQueryChangeHandlerActivityTypes = (search) => {
// setlmsBrightCove(null);
setActivePage(1);
const encodeQuery = encodeURI(search.target.value);
setSearchActivityTypesQuery(encodeQuery);
dispatch(getActivityTypes(activeOrganization?.id, 1, size, '', '', encodeQuery));
};
const searchQueryChangeHandlerActivityItems = (search) => {
// setlmsBrightCove(null);
setActivePage(1);
const encodeQuery = encodeURI(search.target.value);
setSearchActivityItemsQuery(encodeQuery);
dispatch(getActivityItems(activeOrganization?.id, encodeQuery, activePage, size));
};
const filterActivityItems = (type) => {
setActivePage(1);
dispatch(getActivityItems(activeOrganization?.id, searchActivityItemsQuery, activePage, size, '', '', type));
};
const searchQueryChangeHandlerActivityLayouts = (search) => {
// setlmsBrightCove(null);
setActivePage(1);
const encodeQuery = encodeURI(search.target.value);
setSearchLayoutQuery(encodeQuery);
dispatch(getActivityLayout(activeOrganization?.id, 1, size, encodeQuery, orderByColumn, currentOrderBy));
};
const searchQueryChangeHandlerOrg = (search) => {
setActivePage(1);
const encodeQuery = encodeURI(search.target.value);
setSearchQuery(encodeQuery);
dispatch(getsubOrgList(activeOrganization?.id, size, 1, encodeQuery, orderByColumn, currentOrderBy));
};
//Default SSO ***************************************
useMemo(async () => {
if (type === 'DefaultSso') {
dispatch(getDefaultSso(activeOrganization?.id, activePage, size, searchQuery, orderByColumn, currentOrderBy, defaultSsoFilterBy));
}
}, [type, activePage, activeOrganization?.id, size]);
const searchQueryChangeHandlerDefautSso = (search) => {
setDefaultSso(null);
setActivePage(1);
const encodeQuery = encodeURI(search.target.value);
setSearchQuery(encodeQuery);
const result = adminService.getDefaultSso(activeOrganization?.id, 1, size, encodeQuery, orderByColumn, currentOrderBy, defaultSsoFilterBy);
result.then((data) => {
setDefaultSso(data);
});
};
const searchQueryChangeHandlerLtiTool = (search) => {
setLtiTool(null);
setActivePage(1);
const encodeQuery = encodeURI(search.target.value);
setSearchQuery(encodeQuery);
const result = adminService.getLtiTools(activeOrganization?.id, 1, size, encodeQuery, orderByColumn, currentOrderBy, ltiToolFilterBy);
result.then((data) => {
setLtiTool(data);
});
};
const searchQueryChangeHandlerSubjects = (search) => {
setSubjects(null);
setActivePage(1);
const encodeQuery = encodeURI(search.target.value);
setSearchSubjectsQuery(encodeQuery);
const result = adminService.getSubjects(activeOrganization?.id, 1, size, encodeQuery, orderByColumn, currentOrderBy);
result.then((data) => {
setSubjects(data);
});
};
const searchQueryChangeHandlerEducationLevel = (search) => {
setEducationLevel(null);
setActivePage(1);
const encodeQuery = encodeURI(search.target.value);
setSearchEducationLevelQuery(encodeQuery);
const result = adminService.getEducationLevel(activeOrganization?.id, 1, size, encodeQuery, orderByColumn, currentOrderBy);
result.then((data) => {
setEducationLevel(data);
});
};
const searchQueryChangeHandlerAuthorTag = (search) => {
setAuthorTag(null);
setActivePage(1);
const encodeQuery = encodeURI(search.target.value);
setSearchAuthorTagQuery(encodeQuery);
const result = adminService.getAuthorTag(activeOrganization?.id, 1, size, encodeQuery, orderByColumn, currentOrderBy);
result.then((data) => {
setAuthorTag(data);
});
};
const filterLtiTool = (item) => {
setLtiTool(null);
setActivePage(1);
setLtiToolFilterBy(item);
const result = adminService.getLtiTools(activeOrganization?.id, 1, size, searchQuery, orderByColumn, currentOrderBy, item);
result.then((data) => {
setLtiTool(data);
});
};
const filterDefaultSso = (filterBy) => {
setDefaultSso(null);
setActivePage(1);
setDefaultSsoFilterBy(filterBy);
const result = adminService.getDefaultSso(activeOrganization?.id, 1, size, searchQuery, orderByColumn, currentOrderBy, filterBy);
result.then((data) => {
setDefaultSso(data);
});
};
const filterLmsSetting = (filterBy) => {
setLmsProject(null);
setActivePage(1);
setLmsProjectFilterBy(filterBy);
const result = adminService.getLmsProject(activeOrganization?.id, 1, size, searchQuery, orderByColumn, currentOrderBy, filterBy);
result.then((data) => {
setLmsProject(data);
});
};
useEffect(() => {
// if (subTypeState === 'Library requests') {
// setActivePage(1);
// setCurrentTab('Library requests');
// setChangeIndexValue(0);
// } else
if (subTypeState === 'All Projects') {
setActivePage(1);
setCurrentTab('All Projects');
setKey('All Projects');
}
}, [subTypeState]);
useEffect(() => {
if (activeTab === 'Projects') {
setSubTypeState(key);
setCurrentTab(key);
setLibraryReqSelected(false);
} else {
setSubTypeState(key);
}
}, [activeTab, key]);
useEffect(() => {
if (activeOrganization && type === 'Teams') {
dispatch(teamsActionAdminPanel(activeOrganization?.id, searchQueryTeam, activePage, size, orderByColumn, currentOrderBy))
}
}, [size, activePage, activeOrganization, searchQueryTeam]);
const filterSearch = useCallback(() => {
setAllProjectTab(null);
if (libraryReqSelected) {
const libraryrequest = adminService.getAllProjectIndex(
activeOrganization?.id,
activePage,
1,
size,
projectFilterObj.author_id || undefined,
projectFilterObj.created_from || undefined,
projectFilterObj.created_to || undefined,
projectFilterObj.updated_from || undefined,
projectFilterObj.updated_to || undefined,
projectFilterObj.shared
);
libraryrequest
.then((data) => {
setAllProjectTab(data);
})
.catch((e) => setAllProjectTab([]));
} else {
const allproject = adminService.getAllProject(
activeOrganization?.id,
activePage,
size,
projectFilterObj.author_id || null,
projectFilterObj.created_from || null,
projectFilterObj.created_to || null,
projectFilterObj.updated_from || null,
projectFilterObj.updated_to || null,
projectFilterObj.shared,
projectFilterObj.indexing
);
allproject
.then((data) => {
setAllProjectTab(data);
})
.catch((e) => setAllProjectTab([]));
}
}, [projectFilterObj]);
const handleSort = async (column, subType) => {
if (subType == 'LTI Tools') {
//mapping column with db column for making it dynamic
let col = '';
switch (column) {
case 'Name':
col = 'tool_name';
break;
default:
col = 'tool_name';
}
dispatch(getLtiTools(activeOrganization?.id, activePage || 1, size, searchQuery, col, orderBy, ltiToolFilterBy));
setCurrentOrderBy(orderBy);
let order = orderBy == 'asc' ? 'desc' : 'asc';
setOrderBy(order);
setOrderByColumn(col);
} else if (subType == 'Activity Types') {
//mapping column with db column for making it dynamic
let col = '';
switch (column) {
case 'Order':
col = 'order';
break;
default:
col = 'order';
}
dispatch(getActivityTypes(activeOrganization?.id, activePage || 1, size, col, orderBy, searchActivityTypesQuery));
setCurrentOrderBy(orderBy);
let order = orderBy == 'asc' ? 'desc' : 'asc';
setOrderBy(order);
setOrderByColumn(col);
} else if (subType == 'Activity Items') {
//mapping column with db column for making it dynamic
let col = '';
switch (column) {
case 'Order':
col = 'order';
break;
default:
col = 'order';
}
dispatch(getActivityItems(activeOrganization?.id, searchActivityItemsQuery, activePage || 1, size, col, orderBy,));
setCurrentOrderBy(orderBy);
let order = orderBy == 'asc' ? 'desc' : 'asc';
setOrderBy(order);
setOrderByColumn(col);
} else if (subType == 'Activity Layouts') {
//mapping column with db column for making it dynamic
let col = '';
switch (column) {
case 'Order':
col = 'order';
break;
default:
col = 'order';
}
dispatch(getActivityLayout(activeOrganization?.id, activePage || 1, size, searchLayoutQuery, col, orderBy));
setCurrentOrderBy(orderBy);
let order = orderBy == 'asc' ? 'desc' : 'asc';
setOrderBy(order);
setOrderByColumn(col);
} else if (subType == 'Subjects') {
//mapping column with db column for making it dynamic
let col = '';
switch (column) {
case 'Order':
col = 'order';
break;
default:
col = 'order';
}
dispatch(getSubjects(activeOrganization?.id, activePage || 1, size, searchSubjectsQuery, col, orderBy,));
setCurrentOrderBy(orderBy);
let order = orderBy == 'asc' ? 'desc' : 'asc';
setOrderBy(order);
setOrderByColumn(col);
} else if (subType == 'Education Level') {
//mapping column with db column for making it dynamic
let col = '';
switch (column) {
case 'Order':
col = 'order';
break;
default:
col = 'order';
}
dispatch(getEducationLevel(activeOrganization?.id, activePage || 1, size, searchEducationLevelQuery, col, orderBy));
setCurrentOrderBy(orderBy);
let order = orderBy == 'asc' ? 'desc' : 'asc';
setOrderBy(order);
setOrderByColumn(col);
} else if (subType == 'Author Tags') {
//mapping column with db column for making it dynamic
let col = '';
switch (column) {
case 'Order':
col = 'order';
break;
default:
col = 'order';
}
dispatch(getAuthorTag(activeOrganization?.id, activePage || 1, size, searchAuthorTagQuery, col, orderBy));
setCurrentOrderBy(orderBy);
let order = orderBy == 'asc' ? 'desc' : 'asc';
setOrderBy(order);
setOrderByColumn(col);
} else if (subType == 'Organization') {
//mapping column with db column for making it dynamic
let col = '';
switch (column) {
case 'Name':
col = 'name';
break;
default:
col = 'name';
}
dispatch(getsubOrgList(activeOrganization?.id, size, activePage || 1, searchQuery, col, orderBy));
setCurrentOrderBy(orderBy);
let order = orderBy == 'asc' ? 'desc' : 'asc';
setOrderBy(order);
setOrderByColumn(col);
} else if (subType == 'DefaultSso') {
//mapping column with db column for making it dynamic
let col = '';
switch (column) {
case 'Site Name':
col = 'site_name';
break;
default:
col = 'site_name';
}
dispatch(getDefaultSso(activeOrganization?.id, activePage || 1, size, searchQuery, col, orderBy, defaultSsoFilterBy));
setCurrentOrderBy(orderBy);
let order = orderBy == 'asc' ? 'desc' : 'asc';
setOrderBy(order);
setOrderByColumn(col);
} else if (subType == 'LMS settings') {
//mapping column with db column for making it dynamic
let col = '';
switch (column) {
case 'Type':
col = 'lms_name';
break;
default:
col = 'lms_name';
}
dispatch(getLmsProject(activeOrganization?.id, activePage || 1, size, searchQuery, col, orderBy, lmsProjectFilterBy));
setCurrentOrderBy(orderBy);
let order = orderBy == 'asc' ? 'desc' : 'asc';
setOrderBy(order);
setOrderByColumn(col);
} else if (subType == 'All Users') {
//mapping column with db column for making it dynamic
let col = '';
switch (column) {
case 'First Name':
col = 'first_name';
break;
default:
col = 'first_name';
}
const result = await dispatch(getOrgUsers(activeOrganization?.id, activePage, activeRole, size, searchQuery, col, orderBy));
setUsers(result)
setCurrentOrderBy(orderBy);
let order = orderBy == 'asc' ? 'desc' : 'asc';
setOrderBy(order);
setOrderByColumn(col);
} else if (subType == 'All Projects') {
//mapping column with db column for making it dynamic
let col = '';
switch (column) {
case 'Created':
col = 'created_at';
break;
default:
col = 'created_at';
}
const result = await adminService.getAllProjectSearch(activeOrganization?.id, activePage, searchQueryProject, size, col, orderBy);
setAllProjectTab(result);
setCurrentOrderBy(orderBy);
let order = orderBy == 'asc' ? 'desc' : 'asc';
setOrderBy(order);
setOrderByColumn(col);
} else if (subType == 'Exported Projects') {
//mapping column with db column for making it dynamic
let col = '';
switch (column) {
case 'Created Date':
col = 'created_at';
break;
default:
col = 'created_at';
}
const result = await adminService.getAllExportedProject(activePage || 1, size, '', col, orderBy);
setAllProjectUserTab(result);
setCurrentOrderBy(orderBy);
let order = orderBy == 'asc' ? 'desc' : 'asc';
setOrderBy(order);
setOrderByColumn(col);
} else if (subType == 'All teams') {
let col = '';
switch (column) {
case 'Created':
col = 'created_at';
break;
default:
col = 'created_at';
}
dispatch(teamsActionAdminPanel(activeOrganization?.id, searchQueryTeam, activePage, size, col, orderBy));
setCurrentOrderBy(orderBy);
let order = orderBy == 'ASC' ? 'DESC' : 'ASC';
setOrderBy(order);
setOrderByColumn(col);
}
};
const resetProjectFilter = () => {
setAllProjectTab(null);
setProjectFilterObj({
author_id: null,
created_from: null,
created_to: null,
updated_from: null,
updated_to: null,
shared: null,
indexing: null,
});
if (libraryReqSelected) {
const libraryrequest = adminService.getAllProjectIndex(activeOrganization?.id, activePage, 1, size);
libraryrequest
.then((data) => {
setAllProjectTab(data);
})
.catch((e) => setAllProjectTab([]));
} else {
const allproject = adminService.getAllProject(activeOrganization?.id, activePage, size);
allproject
.then((data) => {
setAllProjectTab(data);
})
.catch((e) => setAllProjectTab([]));
}
};
return (
<Tabs
defaultActiveKey={modules?.filter((data) => !!data)[0]}
id="controlled-tab-example"
activeKey={key}
onSelect={(key) => {
setSubTypeState(key);
setKey(key);
setActivePage(1);
setSearchQueryProject('');
setSearchAlertTogglerStats(1);
dispatch(resetPageNumber());
setSearchQueryStats('');
if (key === 'Exported Projects') {
setCurrentTab('Exported Projects');
setLibraryReqSelected(false);
} else if (key === 'All Projects' || libraryReqSelected) {
setCurrentTab('All Projects');
setLibraryReqSelected(false);
}
}}
>
{modules
?.filter((data) => !!data)
?.map((asset) => (
<Tab key={asset} eventKey={asset} title={asset}>
<div key={asset} className="module-content-inner">
{type === 'Users' && subTypeState === 'All Users' && (
<Starter
paginationCounter={true}
search={true}
print={false}
btnText="Add user"
btnAction="create_user"
importUser={true}
filter={false}
tableHead={columnData.userall}
sortCol={columnData.userallSortCol}
handleSort={handleSort}
data={users}
activePage={activePage}
size={size}
setSize={setSize}
activeRole={activeRole}
setActiveRole={setActiveRole}
subTypeState={'All Users'}
subType={'All Users'}
searchQuery={searchQuery}
setSearchQuery={setSearchQuery}
searchQueryChangeHandler={searchQueryChangeHandler}
searchAlertToggler={searchAlertToggler}
setActivePage={setActivePage}
type={type}
roles={roles}
inviteUser={true}
/>
)}
{type === 'Users' && subTypeState === 'Manage Roles' && (
<Starter
paginationCounter={false}
search={false}
print={false}
btnText="Add Role"
btnAction="add_role"
importUser={false}
filter={false}
subTypeState={subTypeState}
tableHead={[]}
subType="Manage Roles"
sortCol={[]}
handleSort={handleSort}
data={[]}
activeRole={activeRole}
setActiveRole={setActiveRole}
type={type}
roles={roles}
permissionRender={permission?.Organization?.includes('organization:view-role')}
/>
)}
{type === 'Organization' && (
<Starter
search={true}
print={false}
btnText="Add Organization"
btnAction="add_org"
importUser={false}
filter={false}
tableHead={columnData.organization}
sortCol={columnData.organizationSortCol}
handleSort={handleSort}
paginationCounter={true}
size={size}
setSize={setSize}
data={allSuborgList}
type={type}
activePage={activePage}
setActivePage={setActivePage}
searchQueryChangeHandler={searchQueryChangeHandlerOrg}
/>
)}
{type === 'LMS' && subTypeState === 'LMS settings' && (
<Starter
paginationCounter={true}
size={size}
setSize={setSize}
subType={'LMS settings'}
search={true}
print={false}
btnText="Add LMS settings"
btnAction="add_lms"
importUser={false}
filter={false}
tableHead={columnData.lmssettings}
sortCol={columnData.lmssettingsSortCol}
handleSort={handleSort}
data={lmsProject}
type={type}
setActivePage={setActivePage}
activePage={activePage}
searchQueryChangeHandler={searchQueryChangeHandlerLMS}
filteredItems={filterLmsSetting}
/>
)}
{type === 'LMS' && subTypeState === 'BrightCove' && (
<Starter
paginationCounter={true}
size={size}
setSize={setSize}
subType={'BrightCove'}
search={true}
print={false}
btnText="Add New Entry"
btnAction="add_brightcove"
importUser={false}
filter={false}
tableHead={columnData.IntegrationBrightCove}
sortCol={[]}
handleSort={handleSort}
data={lmsBrightCove}
type={type}
searchQuery={searchQuery}
setActivePage={setActivePage}
activePage={activePage}
searchQueryChangeHandler={searchQueryChangeHandlerLMSBrightCove}
/>
)}
{type === 'Projects' && subTypeState === 'All Projects' && (
<Starter
paginationCounter={true}
size={size}
setSize={setSize}
search={true}
tableHead={columnData.projectAll}
sortCol={columnData.projectAllSortCol}
handleSort={handleSort}
data={allProjectTab}
searchProjectQueryChangeHandler={searchProjectQueryChangeHandler}
type={type}
importUser={true}
searchQueryProject={searchQueryProject}
setSearchQueryProject={setSearchQueryProject}
setActivePage={setActivePage}
activePage={activePage}
subType={'All Projects'}
setSubTypeState={setSubTypeState}
projectFilterObj={projectFilterObj}
setProjectFilterObj={setProjectFilterObj}
filterSearch={filterSearch}
libraryReqSelected={libraryReqSelected}
setLibraryReqSelected={setLibraryReqSelected}
setCurrentTab={setCurrentTab}
setAllProjectTab={setAllProjectTab}
resetProjectFilter={resetProjectFilter}
setModalShow={setModalShow}
setrowData={setrowData}
setActivePageNumber={setActivePageNumber}
/>
)}
{type === 'Projects' && subTypeState === 'Exported Projects' && (
<Starter
paginationCounter={true}
size={size}
setSize={setSize}
search={false}
tableHead={columnData.projectUser}
sortCol={columnData.projectUserSortCol}
search={true}
handleSort={handleSort}
data={allProjectUserTab}
type={type}
setActivePage={setActivePage}
activePage={activePage}
subType="Exported Projects"
setCurrentTab={setCurrentTab}
searchQueryProject={searchQueryProject}
setSearchQueryProject={setSearchQueryProject}
searchProjectQueryChangeHandler={searchProjectQueryChangeHandler}
/>
)}
{/* {type === 'Projects' && subTypeState === 'Library requests' && (
<Starter
paginationCounter={true}
size={size}
setSize={setSize}
search={true}
tableHead={columnData.projectIndex}
sortCol={[]}
handleSort={handleSort}
data={allProjectIndexTab}
type={type}
searchQuery={searchQuery}
setSubTypeState={setSubTypeState}
searchProjectQueryChangeHandler={searchProjectQueryChangeHandler}
searchAlertToggler={searchAlertToggler}
setActivePage={setActivePage}
activePage={activePage}
subType="Library requests"
setAllProjectIndexTab={setAllProjectIndexTab}
setCurrentTab={setCurrentTab}
filter={true}
searchQueryProject={searchQueryProject}
setSearchQueryProject={setSearchQueryProject}
changeIndexValue={changeIndexValue}
setChangeIndexValue={setChangeIndexValue}
libraryReqSelected={libraryReqSelected}
setLibraryReqSelected={setLibraryReqSelected}
resetProjectFilter={resetProjectFilter}
projectFilterObj={projectFilterObj}
setProjectFilterObj={setProjectFilterObj}
filterSearch={filterSearch}
/>
)} */}
{type === 'Activities' && subTypeState === 'Activity Types' && (
<Starter
search={true}
tableHead={columnData.ActivityTypes}
sortCol={columnData.ActivityTypesSortCol}
handleSort={handleSort}
subType={'Activity Types'}
searchQueryActivities={searchQueryActivities}
setSearchQueryActivities={setSearchQueryActivities}
searchActivitiesQueryHandler={searchActivitiesQueryHandler}
btnText="Add Activity Type"
btnAction="add_activity_type"
data={activityTypes}
type={type}
setActivePage={setActivePage}
activePage={activePage}
paginationCounter={true}
size={size}
setSize={setSize}
searchQueryChangeHandler={searchQueryChangeHandlerActivityTypes}
setSearchKey={searchActivityTypesQuery}
/>
)}
{type === 'Activities' && subTypeState === 'Activity Items' && (
<Starter
search={true}
tableHead={columnData.ActivityItems}
sortCol={columnData.ActivityItemsSortCol}
handleSort={handleSort}
subType={'Activity Items'}
searchQueryActivities={searchQueryActivities}
setSearchQueryActivities={setSearchQueryActivities}
searchActivitiesQueryHandler={searchActivitiesQueryHandler}
btnText="Add Activity Item"
btnAction="add_activity_item"
data={activityItems}
type={type}
setActivePage={setActivePage}
activePage={activePage}
paginationCounter={true}
size={size}
setSize={setSize}
filteredItems={filterActivityItems}
searchQueryChangeHandler={searchQueryChangeHandlerActivityItems}
setSearchKey={searchActivityItemsQuery}
/>
)}
{type === 'Activities' && subTypeState === 'Subjects' && (
<Starter
search={true}
tableHead={columnData.subjects}
sortCol={columnData.subjectsSortCol}
handleSort={handleSort}
subType={'Subjects'}
searchQueryActivities={searchQueryActivities}
setSearchQueryActivities={setSearchQueryActivities}
searchActivitiesQueryHandler={searchActivitiesQueryHandler}
btnText="Add a new subject"
btnAction="add_subject"
data={subjects}
type={type}
setActivePage={setActivePage}
activePage={activePage}
paginationCounter={true}
size={size}
setSize={setSize}
searchQueryChangeHandler={searchQueryChangeHandlerSubjects}
setSearchKey={searchSubjectsQuery}
/>
)}
{type === 'Activities' && subTypeState === 'Education Level' && (
<Starter
search={true}
tableHead={columnData.educationLevel}
sortCol={columnData.educationLevelSortCol}
handleSort={handleSort}
subType={'Education Level'}
searchQueryActivities={searchQueryActivities}
setSearchQueryActivities={setSearchQueryActivities}
searchActivitiesQueryHandler={searchActivitiesQueryHandler}
btnText="Add a new education level"
btnAction="add_education_level"
data={educationLevel}
type={type}
setActivePage={setActivePage}
activePage={activePage}
paginationCounter={true}
size={size}
setSize={setSize}
searchQueryChangeHandler={searchQueryChangeHandlerEducationLevel}
setSearchKey={searchEducationLevelQuery}
/>
)}
{type === 'Activities' && subTypeState === 'Author Tags' && (
<Starter
search={true}
tableHead={columnData.authorTags}
sortCol={columnData.authorTagsSortCol}
handleSort={handleSort}
subType={'Author Tags'}
searchQueryActivities={searchQueryActivities}
setSearchQueryActivities={setSearchQueryActivities}
searchActivitiesQueryHandler={searchActivitiesQueryHandler}
btnText="Add a new author tag"
btnAction="add_author_tag"
data={authorTag}
type={type}
setActivePage={setActivePage}
activePage={activePage}
paginationCounter={true}
size={size}
setSize={setSize}
searchQueryChangeHandler={searchQueryChangeHandlerAuthorTag}
setSearchKey={searchAuthorTagQuery}
/>
)}
{type === 'Activities' && subTypeState === 'Activity Layouts' && (
<Starter
search={true}
tableHead={columnData.activityLayouts}
sortCol={columnData.activityLayoutsSortCol}
handleSort={handleSort}
subType={'Activity Layouts'}
// searchQueryActivities={searchQueryActivities}
// setSearchQueryActivities={setSearchQueryActivities}
// searchActivitiesQueryHandler={searchActivitiesQueryHandler}
btnText="Add activity layout"
btnAction="add_activity_layout"
data={activityLayout}
type={type}
setActivePage={setActivePage}
activePage={activePage}
paginationCounter={true}
size={size}
setSize={setSize}
searchQueryChangeHandler={searchQueryChangeHandlerActivityLayouts}
setSearchKey={searchLayoutQuery}
/>
)}
{type === 'Settings' && subTypeState === 'LMS settings' && <Starter type={type} subType={'LMS settings'} subTypeState={subTypeState} />}
{type === 'DefaultSso' && (
<Starter
paginationCounter={true}
size={size}
setSize={setSize}
search={true}
print={false}
btnText="Add Default SSO settings"
btnAction="add_default_sso"
importUser={false}
filter={false}
tableHead={columnData.defaultsso}
sortCol={columnData.defaultssoSortCol}
handleSort={handleSort}
data={defaultSso}
type={type}
setActivePage={setActivePage}
activePage={activePage}
searchQueryChangeHandler={searchQueryChangeHandlerDefautSso}
filteredItems={filterDefaultSso}
/>
)}
{type === 'LMS' && subTypeState === 'LTI Tools' && (
<Starter
paginationCounter={true}
size={size}
setSize={setSize}
subType={'LTI Tools'}
search={true}
print={false}
btnText="Create New LTI Tool"
btnAction="add_lti_tool"
importUser={false}
filter={false}
tableHead={columnData.ltitool}
sortCol={columnData.ltitoolSortCol}
handleSort={handleSort}
data={ltiTool}
type={type}
setActivePage={setActivePage}
activePage={activePage}
searchQueryChangeHandler={searchQueryChangeHandlerLtiTool}
filteredItems={filterLtiTool}
/>
)}
{type === 'Teams' && (
<Starter
paginationCounter={true}
size={size}
subType={'All teams'}
setSize={setSize}
search={true}
type={type}
tableHead={columnData.teams}
sortCol={columnData.teamsSortCol}
data={teams}
activePage={activePage}
setActivePage={setActivePage}
handleSort={handleSort}
setSearchQueryTeam={setSearchQueryTeam}
setModalShowTeam={setModalShowTeam}
/>
)}
</div>
</Tab>
))}
</Tabs>
);
}
Example #22
| Source File: LoginPage.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 4 votes |
|
render() {
const { email, password, rememberMe, error, clicked, activeTab, showPassword } = this.state;
const { isLoading, domain } = this.props;
console.log('domain', domain);
return (
<div className="auth-page">
<Logo />
{!clicked ? (
<div className="auth-container">
<div className="d-flex align-items-center justify-content-between">
<h1 className="auth-title ">Welcome to {window.__RUNTIME_CONFIG__.REACT_APP_INSTANT_NAME || 'Curriki'}</h1>
{/* <strong>OR</strong> */}
{/* <button
type="button"
className="btn btn-outline-primary text-uppercase"
onClick={this.goToRegister}
>
Sign Up
</button> */}
</div>
{/* <h2 className="auth-subtitle">Powering the creation of the world’s Most Immersive Learning Experience</h2> */}
<p className="auth-Pdescrip">Sign Up and start making a difference in the way learning experiences are created.</p>
<form onSubmit={this.onSubmit} autoComplete="off" className="auth-form">
<div className="form-group text-center mb-0">
<GoogleLogin
clientId={global.config.gapiClientId}
theme="dark"
render={(renderProps) => (
<button type="button" className="google-button" onClick={renderProps.onClick} disabled={renderProps.disabled}>
<img src={googleIcon} alt="googleIcon" style={{ float: 'left', paddingRight: '19.23px' }} />
Continue with Google
</button>
)}
onSuccess={this.onGoogleLoginSuccess}
onFailure={this.onGoogleLoginFailure}
cookiePolicy="single_host_origin"
/>
</div>
{window.__RUNTIME_CONFIG__.REACT_APP_STEMULI === 'true' && (
<div className="form-group text-center mb-4">
<button
type="button"
className="email-button"
onClick={() => {
window.location.href = `${window.__RUNTIME_CONFIG__.REACT_APP_API_URL}/oauth/stemuli/redirect`;
}}
>
<img src={stemuliIcon} alt="stemuli icon" style={{ float: 'left', paddingRight: '19.23px' }} />
<span>Continue with Stemuli</span>
</button>
</div>
)}
<div className="form-group text-center mb-0">
<button
type="button"
className="email-button"
onClick={() =>
this.setState({
clicked: true,
})
}
>
<img src={emailIcon} alt="email icon" style={{ float: 'left', paddingRight: '19.23px' }} />
<span>Continue with Email</span>
</button>
</div>
</form>
<p className="auth-description">
New to Curriki?
<a onClick={this.goToRegister}>Sign up</a>
</p>
<p className="auth-p2-descrip">
By clicking the Sign Up button, you are creating a CurrikiStudio account, and you agree to Currikis
<a href="/" target="_blank">
Terms of Use
</a>
and
<a href="/" target="_blank">
Privacy Policy.
</a>
</p>
</div>
) : (
<div className="auth-container">
<div className="d-flex align-items-center justify-content-between">
<h1 className="auth-title">Welcome to {window.__RUNTIME_CONFIG__.REACT_APP_INSTANT_NAME || 'Curriki'}</h1>
</div>
<p className="auth-Pdescrip">Start making a difference in the way learning experiences are created.</p>
<div className="content-section">
<Tabs
defaultActiveKey={activeTab}
activeKey={activeTab}
id="uncontrolled-tab-example"
onSelect={(key) => {
this.setState({ activeTab: key });
if (key === 'Sign up') this.goToRegister();
}}
>
<Tab eventKey="Log in" title="Log in">
<div className="module-content">
<form onSubmit={this.onSubmit} autoComplete="off" className="auth-form">
<div className="form-group">
{/* <FontAwesomeIcon icon="envelope" /> */}
<span>Email</span>
<input
autoFocus
className="input-box"
// type="email"
name="email"
required
value={email}
onChange={this.onChangeField}
/>
</div>
<div className="form-group">
{/* <FontAwesomeIcon icon="lock" /> */}
<span style={{ display: 'flex', justifyContent: 'space-between' }}>
Password
<div className="show-password" onClick={() => this.setState({ showPassword: !showPassword })}>
<img src={eye} alt="show-password" />
Show
</div>
</span>
<input
className="password-box"
type={showPassword ? 'text' : 'password'}
name="password"
placeholder="********"
required
value={password}
onChange={this.onChangeField}
/>
</div>
<div className="form-group remember-me">
<label>
<input type="checkbox" name="rememberMe" value={rememberMe} onChange={this.onChangeField} />
Keep me logged in.
</label>
<div className="forgot-password-box">
<Link to="/forgot-password">Forgot Password ?</Link>
</div>
</div>
<div className="form-group">
<Error error={error} />
</div>
<div className="form-button">
<button type="submit" className="btn btn-primary submit" disabled={isLoading || this.isDisabled()}>
{isLoading ? <img src={loader} alt="" /> : 'Log in'}
</button>
</div>
{true ? (
<>
{/* <div className="vertical-line">
<div className="line" />
<p className="line-or">or</p>
<div className="line" />
</div> */}
{/* <p className="auth-description text-center">
New to Curriki?
<a onClick={this.goToRegister}>
Sign up
</a>
</p> */}
<div className="form-group text-center mb-0">
<GoogleLogin
clientId={global.config.gapiClientId}
theme="dark"
render={(renderProps) => (
<button type="button" className="google-button" onClick={renderProps.onClick} disabled={renderProps.disabled}>
<img src={googleIcon} alt="googleIcon" />
<div>Log in with Google</div>
</button>
)}
onSuccess={this.onGoogleLoginSuccess}
onFailure={this.onGoogleLoginFailure}
cookiePolicy="single_host_origin"
/>
</div>
</>
) : null}
<div className="termsandcondition">
By clicking the "Login" button, you agree to Curriki' s{' '}
<a
target="_blank"
href={domain?.tos_type == 'URL' || domain?.tos_url != null ? domain?.tos_url : `/org/${domain?.domain}/terms-policy-content/tos_content`}
>
Terms of Use
</a>{' '}
and{' '}
<a
target="_blank"
href={
domain?.privacy_policy_type == 'URL' || domain?.privacy_policy_url != null
? domain?.privacy_policy_url
: `/org/${domain?.domain}/terms-policy-content/privacy_policy_content`
}
>
Privacy Policy.
</a>
</div>
</form>
</div>
</Tab>
{domain?.self_registration === true && <Tab eventKey="Sign up" title="Sign up" />}
</Tabs>
</div>
</div>
)}
{/* <img src={bg} className="bg1" alt="" /> */}
{/* <img src={bg1} className="bg2" alt="" /> */}
</div>
);
}
Example #23
| Source File: RegisterPage.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 4 votes |
|
render() {
const { firstName, lastName, email, password, organization_name, job_title, error, organization_type, clicked, activeTab, stepper, googleResponse, showPassword } = this.state;
const { isLoading, organizationTypes, domain } = this.props;
return (
<>
{domain?.self_registration === true && (
<div className="auth-page">
<Logo />
<div className="auth-container">
<div className="d-flex align-items-center justify-content-between">
<h1 className="auth-title mb2">
Welcome
{!clicked ? ` to ${window.__RUNTIME_CONFIG__.REACT_APP_INSTANT_NAME || 'Curriki'}` : `, ${firstName}`}
</h1>
{/* <strong>OR</strong> */}
{/* <button
type="button"
className="btn btn-outline-primary text-uppercase"
onClick={this.goToLogin}
>
Login
</button> */}
</div>
<p className="auth-Pdescrip text-left">
{!clicked
? 'Start making a difference in the way learning experiences are created.'
: 'Before start creating awesome content, please let us know the usage your are giving to Curriki. '}
</p>
<div className="content-section">
<Tabs
defaultActiveKey={activeTab}
activeKey={activeTab}
id="uncontrolled-tab-example"
style={{ display: stepper ? 'none' : 'flex' }}
onSelect={(key) => {
this.setState({ activeTab: key });
if (key === 'Log in') this.goToLogin();
}}
>
<Tab eventKey="Log in" title="Log in" />
<Tab eventKey="Sign up" title="Sign up" style={{ display: stepper ? 'none' : 'flex' }}>
<form onSubmit={this.onSubmit} autoComplete="off" className="auth-form">
{!clicked && (
<>
<div className="form-group text-center mb-2">
<GoogleLogin
clientId={global.config.gapiClientId}
theme="dark"
render={(renderProps) => (
<button type="button" className="google-button" onClick={renderProps.onClick} disabled={renderProps.disabled}>
<img src={googleIcon} alt="googleIcon" />
<div>Sign up with Google</div>
</button>
)}
onSuccess={async (response) => {
const emailCheckResponse = await authService.checkEmail(response.profileObj.email);
if (emailCheckResponse?.exists === true) return this.setState({ error: emailCheckResponse.message });
return this.setState({ stepper: true, googleResponse: response });
// this.onGoogleLoginSuccess(response);
}}
onFailure={this.onGoogleLoginFailure}
cookiePolicy="single_host_origin"
/>
</div>
<div className="hr-spacer">
<span>OR</span>
</div>
<div className="form-group d-flex">
<div className="input-wrapper">
<span>Name</span>
<input autoFocus className="input-box" name="firstName" required maxLength="50" value={firstName} onChange={this.onChangeField} />
</div>
<div className="input-wrapper">
<span>Last name</span>
<input className="input-box" name="lastName" required maxLength="50" value={lastName} onChange={this.onChangeField} />
</div>
</div>
<div className="form-group">
<span>Email</span>
<input
className="input-box"
// type="email"
name="email"
required
maxLength="250"
disabled={query?.email && true}
value={email}
onChange={this.onChangeField}
/>
</div>
<div className="form-group">
<span style={{ display: 'flex', justifyContent: 'space-between' }}>
Password
<div className="show-password" onClick={() => this.setState({ showPassword: !showPassword })}>
<img src={eye} alt="show-password" />
Show
</div>
</span>
<input
className="password-box"
type={showPassword ? 'text' : 'password'}
name="password"
required
maxLength="250"
value={password}
onChange={this.onChangeField}
/>
</div>
<div className="form-group">
<Error error={error} />
</div>
<div className="form-group mb-0" style={{ marginTop: '48px' }}>
<button
type="button"
className="signUp-btn submit"
onClick={() => {
const passwordValidator = this.validatePassword(password);
const emailValidator = validator.isEmail(email.trim());
if (passwordValidator && emailValidator) {
this.setState({
clicked: true,
error: null,
stepper: true,
});
} else if (!passwordValidator) {
this.setState({
error: 'Password must be 8 or more characters long,should contain at least 1 Uppercase, 1 Lowercase and 1 Numeric character.',
});
} else if (!emailValidator) {
this.setState({
error: 'Please input valid email.',
});
}
}}
disabled={isLoading || this.isDisabledSignUp()}
>
{isLoading ? <img src={loader} alt="" /> : 'Sign up with Email'}
</button>
</div>
{/* <div className="vertical-line">
<div className="line" />
<p className="line-or">or</p>
<div className="line" />
</div> */}
{/* <p className="auth-description text-center">
Back to Curriki?
<a onClick={this.goToLogin}>
Login
</a>
</p> */}
<div className="termsandcondition">
By clicking the "Sign Up" button, you are creating a CurrikiStudio account, and you agree to Curriki's{' '}
<a
target="_blank"
href={domain?.tos_type == 'URL' || domain?.tos_url != null ? domain?.tos_url : `/org/${domain?.domain}/terms-policy-content/tos_content`}
>
Terms of Use
</a>{' '}
and{' '}
<a
target="_blank"
href={
domain?.privacy_policy_type == 'URL' || domain?.privacy_policy_url != null
? domain?.privacy_policy_url
: `/org/${domain?.domain}/terms-policy-content/privacy_policy_content`
}
>
Privacy Policy.
</a>
</div>
</>
)}
</form>
</Tab>
</Tabs>
</div>
{stepper && (
<>
<div className="form-group">
<div className="bkbtn">
{/* <button type="button" onClick={() => this.setState({ clicked: false, stepper: false })}> */}
<img src={leftArrow} alt="arrow-left" />
<a onClick={() => this.setState({ clicked: false, stepper: false })}> Back </a>
{/* </button> */}
</div>
</div>
<div className="form-group">
<div className="using-curriki">
<div className="curriki-line">You are using Curriki for:</div>
<div className="line-horizontal" />
</div>
</div>
<div className="form-group ">
<select
className="input-box organization-type"
name="organization_type"
placeholder="Organization Type*"
value={organization_type}
onChange={this.onChangeField}
>
<option selected value="">
Select an Organization Type
</option>
{organizationTypes.map((type) => (
<option value={type.label}>{type.label}</option>
))}
</select>
</div>
<div className="form-group">
<span>Organization name</span>
<input className="input-box" name="organization_name" maxLength="50" value={organization_name} onChange={this.onChangeField} />
</div>
<div className="form-group">
<span>Job title</span>
<input className="input-box" name="job_title" maxLength="50" value={job_title} onChange={this.onChangeField} />
</div>
<div className="form-group">
<Error error={error} />
</div>
<div className="form-group mb-0" style={{ marginTop: '50px' }}>
<button
type="submit"
className="btn-primary submit get-started-btn"
onClick={(e) => {
this.setState({ clicked: true });
this.onSubmit(e);
}}
disabled={isLoading || (googleResponse ? this.isDisabledGoogle() : this.isDisabled())}
>
{isLoading ? <img src={loader} alt="" /> : 'Complete Registration'}
</button>
</div>
</>
)}
</div>
<img src={bg} className="bg1" alt="" />
<img src={bg1} className="bg2" alt="" />
</div>
)}
</>
);
}
Example #24
| Source File: index.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 4 votes |
|
BrandingPage = ({ getShow }) => {
const primaryColor = getGlobalColor('--main-preview-primary-color');
const secondaryColorIcon = getGlobalColor('--main-preview-secondary-color');
const [selectTab, setSelectTab] = useState('My Projects');
const [show, setShow] = useState(true);
useEffect(() => {
setShow(getShow);
}, [getShow]);
return (
<div className="branding-preview">
<div className="disablelayer"></div>
<header>
<div className="top-header-preview flex-div align-items-center">
<div className="group-search-logo">
<div className="tophd_left">
<Link to="#" className="top_logo">
<div
className="nav-logo"
style={{
backgroundImage: `url(${logo})`,
backgroundPosition: 'left',
backgroundSize: 'contain',
backgroundRepeat: 'no-repeat',
}}
/>
</Link>
</div>
</div>
<div className="tophd_right flexdiv search-div d-flex">
<div className="navbar-link">
<ul className="top-info flex-div">
<li>
{' '}
<div style={{ cursor: 'pointer', textAlign: 'center' }}>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M9.28366 3H4.31782C3.59167 3 3.00098 3.59076 3.00098 4.31699V9.28336C3.00098 10.0096 3.59167 10.6003 4.31782 10.6003H9.28366C10.0098 10.6003 10.6005 10.0096 10.6005 9.28336V4.31699C10.6004 3.59076 10.0098 3 9.28366 3Z"
stroke={primaryColor}
strokeWidth="2"
/>
<path
d="M19.6831 3H14.7172C13.9911 3 13.4004 3.59076 13.4004 4.31699V9.28336C13.4004 10.0096 13.9911 10.6003 14.7172 10.6003H19.6831C20.4092 10.6003 20.9999 10.0096 20.9999 9.28336V4.31699C20.9999 3.59076 20.4092 3 19.6831 3Z"
stroke={primaryColor}
strokeWidth="2"
/>
<path
d="M9.28269 13.3994H4.31685C3.59069 13.3994 3 13.9901 3 14.7163V19.6827C3 20.4089 3.59069 20.9997 4.31685 20.9997H9.28269C10.0088 20.9997 10.5995 20.4089 10.5995 19.6827V14.7163C10.5994 13.9901 10.0088 13.3994 9.28269 13.3994Z"
stroke={primaryColor}
strokeWidth="2"
/>
<path
d="M19.6821 13.3994H14.7163C13.9901 13.3994 13.3994 13.9902 13.3994 14.7164V19.6828C13.3994 20.409 13.9901 20.9998 14.7163 20.9998H19.6821C20.4083 20.9997 20.999 20.409 20.999 19.6827V14.7163C20.999 13.9901 20.4083 13.3994 19.6821 13.3994Z"
stroke={primaryColor}
strokeWidth="2"
/>
</svg>
<div className="header-icon-text">Currikistudio</div>
</div>
</li>
<li>
<div style={{ cursor: 'pointer', textAlign: 'center' }}>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M9.38086 9.30012C9.59245 8.69862 10.0101 8.19142 10.5598 7.86834C11.1095 7.54527 11.7559 7.42717 12.3843 7.53496C13.0128 7.64276 13.5828 7.96949 13.9934 8.4573C14.4041 8.9451 14.6288 9.56249 14.6279 10.2001C14.6279 12.0001 11.9279 12.9001 11.9279 12.9001"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path d="M12 16.5H12.0094" stroke={primaryColor} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
<p className="header-icon-text">Help</p>
</div>
</li>
<li>
{' '}
<div style={{ cursor: 'pointer', textAlign: 'center' }}>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M17.2514 8.40096C17.2514 6.96854 16.6981 5.59478 15.7134 4.5819C14.7286 3.56903 13.3931 3 12.0004 3C10.6078 3 9.27219 3.56903 8.28745 4.5819C7.30271 5.59478 6.74949 6.96854 6.74949 8.40096C6.74949 14.7021 4.12402 16.5024 4.12402 16.5024H19.8768C19.8768 16.5024 17.2514 14.7021 17.2514 8.40096Z"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M13.5144 20.1025C13.3605 20.3754 13.1397 20.6018 12.8739 20.7592C12.6082 20.9166 12.307 20.9995 12.0003 20.9995C11.6937 20.9995 11.3925 20.9166 11.1267 20.7592C10.861 20.6018 10.6402 20.3754 10.4863 20.1025"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
<p className="header-icon-text">Notifications</p>
</div>
</li>
<li className="menu-user-settings d-flex align-items-center">
<Dropdown show={show}>
<Dropdown.Toggle className="align-items-center">
<div className="profile-avatar" style={{ backgroundColor: primaryColor }}>
B
</div>
<p className="header-icon-text">My Profile</p>
</Dropdown.Toggle>
<Dropdown.Menu show={show} className="user-dropdown">
<div className="user-dropdown-item-name">
<div className="profile-avatar" style={{ backgroundColor: primaryColor }}>
B
</div>
<div className="basic-info">
<b>
<p className="name">Branding Style</p>
</b>
<p className="email">[email protected]</p>
</div>
</div>
<hr />
<Dropdown.Item as={Link} to="#">
<div className="user-dropdown-item">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M11.0512 4.89746H4.78915C4.31464 4.89746 3.85956 5.08596 3.52403 5.42149C3.1885 5.75702 3 6.2121 3 6.68661V19.2106C3 19.6851 3.1885 20.1402 3.52403 20.4757C3.85956 20.8113 4.31464 20.9998 4.78915 20.9998H17.3132C17.7877 20.9998 18.2428 20.8113 18.5783 20.4757C18.9138 20.1402 19.1023 19.6851 19.1023 19.2106V12.9486"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M17.7602 3.55582C18.1161 3.19993 18.5988 3 19.1021 3C19.6054 3 20.088 3.19993 20.4439 3.55582C20.7998 3.9117 20.9997 4.39438 20.9997 4.89768C20.9997 5.40097 20.7998 5.88365 20.4439 6.23954L11.9455 14.738L8.36719 15.6326L9.26176 12.0543L17.7602 3.55582Z"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
My Account
</div>
</Dropdown.Item>
<hr />
<Dropdown.Item as={Link} to="#">
<div className="user-dropdown-item">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M18.2222 11.1025H5.77778C4.79594 11.1025 4 11.9082 4 12.9021V19.2005C4 20.1944 4.79594 21.0001 5.77778 21.0001H18.2222C19.2041 21.0001 20 20.1944 20 19.2005V12.9021C20 11.9082 19.2041 11.1025 18.2222 11.1025Z"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M7.55567 11.1025V7.50342C7.55456 6.38774 7.96303 5.31144 8.70178 4.48347C9.44052 3.65549 10.4568 3.13491 11.5534 3.02279C12.65 2.91066 13.7487 3.21499 14.6361 3.8767C15.5235 4.5384 16.1363 5.51028 16.3557 6.60365"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
Change Password
</div>
</Dropdown.Item>
<hr />
<Dropdown.Item href="#">
<div className="user-dropdown-item">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M15 3H19C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H15"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path d="M10 17L15 12L10 7" stroke={primaryColor} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
<path d="M15 12H3" stroke={primaryColor} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
Logout
</div>
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</li>
</ul>
</div>
</div>
</div>
</header>
<div className="main-content-wrapper-preivew">
<div className="sidebar-wrapper">
{/* Side Bar Portion */}
<aside className="sidebar-all">
<Link to="#">
<div className="row-sidebar">
<svg width="30" height="31" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clipPath="url(#clip0)">
<path
d="M4 9.60938V24.6094C4 25.2998 4.55965 25.8594 5.25 25.8594H25.25C25.9404 25.8594 26.5 25.2998 26.5 24.6094V11.3402C26.5 10.6498 25.9404 10.0902 25.25 10.0902H16.4038"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
/>
<path
d="M16.4038 10.0902L12.933 6.04244C12.8159 5.92523 12.6569 5.85938 12.4911 5.85938H4.625C4.27983 5.85938 4 6.1392 4 6.48437V9.60937"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
/>
</g>
<defs>
<clipPath id="clip0">
<rect width="30" height="30" stroke={primaryColor} transform="translate(0 0.859375)" />
</clipPath>
</defs>
</svg>
<div className="sidebar-headings">My Projects</div>
</div>
</Link>
{/* Interactive videos */}
<Link to="#">
<div className="row-sidebar">
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1.5" width="20" height="12" rx="2" stroke={primaryColor} strokeWidth="2" />
<path d="M1 18.5H21" stroke={primaryColor} strokeWidth="2" strokeLinecap="round" />
<circle cx="15" cy="18.5" r="2" fill="white" stroke={primaryColor} strokeWidth="2" />
<path
d="M9 9.66667V5.43426C9 5.03491 9.44507 4.79672 9.77735 5.01823L13.3044 7.36957C13.619 7.5793 13.5959 8.04885 13.2623 8.22677L9.73529 10.1078C9.40224 10.2855 9 10.0441 9 9.66667Z"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
/>
</svg>
<div className="sidebar-headings">My Interactive videos</div>
</div>
</Link>
<Link to="#">
<div className="row-sidebar">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M8.25315 15.0622C10.8934 15.0622 13.0336 12.9219 13.0336 10.2817C13.0336 7.64152 10.8934 5.50122 8.25315 5.50122C5.61296 5.50122 3.47266 7.64152 3.47266 10.2817C3.47266 12.9219 5.61296 15.0622 8.25315 15.0622Z"
stroke={primaryColor}
strokeWidth="2"
strokeMiterlimit="10"
/>
<path
d="M14.4512 5.67916C15.1086 5.49391 15.7982 5.45171 16.4734 5.5554C17.1487 5.65909 17.7939 5.90627 18.3654 6.28029C18.9371 6.65431 19.4219 7.14649 19.7874 7.72367C20.1527 8.30085 20.3902 8.94963 20.4838 9.62631C20.5773 10.303 20.5247 10.9919 20.3296 11.6465C20.1345 12.3012 19.8014 12.9065 19.3527 13.4215C18.9039 13.9366 18.35 14.3495 17.7283 14.6326C17.1065 14.9155 16.4314 15.062 15.7483 15.0621"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M1.63379 18.5C2.38041 17.438 3.37158 16.5712 4.52365 15.9728C5.67571 15.3745 6.95484 15.062 8.25302 15.062C9.55121 15.062 10.8304 15.3743 11.9825 15.9726C13.1346 16.5708 14.1258 17.4375 14.8725 18.4995"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M15.748 15.062C17.0463 15.0611 18.3257 15.373 19.478 15.9713C20.6302 16.5697 21.6213 17.4369 22.3672 18.4995"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
<div className="sidebar-headings">Teams</div>
</div>
</Link>
<Link to="#">
<div className="row-sidebar">
<svg width="20" height="18" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M18.6089 14.4799H16.5248C16.186 13.3522 15.1498 12.5234 13.9133 12.5234C12.6768 12.5234 11.6413 13.3522 11.3017 14.4799H1.39148C0.959483 14.4799 0.608887 14.8306 0.608887 15.2626C0.608887 15.6946 0.959483 16.0452 1.39148 16.0452H11.3017C11.6405 17.1729 12.6767 18.0017 13.9132 18.0017C15.1497 18.0017 16.1851 17.1729 16.5248 16.0452H18.6089C19.0416 16.0452 19.3915 15.6946 19.3915 15.2626C19.3915 14.8306 19.0417 14.4799 18.6089 14.4799ZM13.9133 16.4365C13.266 16.4365 12.7393 15.9098 12.7393 15.2626C12.7393 14.6154 13.266 14.0887 13.9133 14.0887C14.5605 14.0887 15.0872 14.6154 15.0872 15.2626C15.0872 15.9098 14.5604 16.4365 13.9133 16.4365Z"
fill={primaryColor}
/>
<path
d="M18.6089 1.95651H16.5248C16.1851 0.828783 15.1498 0 13.9133 0C12.6768 0 11.6413 0.828783 11.3017 1.95651H1.39148C0.959483 1.95651 0.608887 2.30711 0.608887 2.73911C0.608887 3.17111 0.959483 3.5217 1.39148 3.5217H11.3017C11.6413 4.64947 12.6767 5.47825 13.9133 5.47825C15.1498 5.47825 16.1852 4.64947 16.5248 3.52174H18.6089C19.0417 3.52174 19.3915 3.17114 19.3915 2.73914C19.3915 2.30714 19.0417 1.95651 18.6089 1.95651ZM13.9133 3.91302C13.266 3.91302 12.7393 3.38634 12.7393 2.73911C12.7393 2.09188 13.266 1.56519 13.9133 1.56519C14.5605 1.56519 15.0872 2.09188 15.0872 2.73911C15.0872 3.38634 14.5604 3.91302 13.9133 3.91302Z"
fill={primaryColor}
/>
<path
d="M18.6089 8.21823H8.69873C8.35907 7.0905 7.32367 6.26172 6.08718 6.26172C4.85068 6.26172 3.81525 7.0905 3.47562 8.21823H1.39148C0.959483 8.21823 0.608887 8.56883 0.608887 9.00083C0.608887 9.43283 0.959483 9.78343 1.39148 9.78343H3.47558C3.81525 10.9112 4.85064 11.7399 6.08714 11.7399C7.32364 11.7399 8.35907 10.9112 8.69869 9.78343H18.6089C19.0416 9.78343 19.3915 9.43283 19.3915 9.00083C19.3915 8.56883 19.0417 8.21823 18.6089 8.21823ZM6.08714 10.1747C5.43991 10.1747 4.91322 9.64806 4.91322 9.00083C4.91322 8.3536 5.43991 7.82691 6.08714 7.82691C6.73437 7.82691 7.26105 8.3536 7.26105 9.00083C7.26105 9.64806 6.73437 10.1747 6.08714 10.1747Z"
fill={primaryColor}
/>
</svg>
<div className="sidebar-headings">Admin Panel</div>
</div>
</Link>
<Link to="#">
<div className="row-sidebar">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M18.7273 14.7273C18.6063 15.0015 18.5702 15.3056 18.6236 15.6005C18.6771 15.8954 18.8177 16.1676 19.0273 16.3818L19.0818 16.4364C19.2509 16.6052 19.385 16.8057 19.4765 17.0265C19.568 17.2472 19.6151 17.4838 19.6151 17.7227C19.6151 17.9617 19.568 18.1983 19.4765 18.419C19.385 18.6397 19.2509 18.8402 19.0818 19.0091C18.913 19.1781 18.7124 19.3122 18.4917 19.4037C18.271 19.4952 18.0344 19.5423 17.7955 19.5423C17.5565 19.5423 17.3199 19.4952 17.0992 19.4037C16.8785 19.3122 16.678 19.1781 16.5091 19.0091L16.4545 18.9545C16.2403 18.745 15.9682 18.6044 15.6733 18.5509C15.3784 18.4974 15.0742 18.5335 14.8 18.6545C14.5311 18.7698 14.3018 18.9611 14.1403 19.205C13.9788 19.4489 13.8921 19.7347 13.8909 20.0273V20.1818C13.8909 20.664 13.6994 21.1265 13.3584 21.4675C13.0174 21.8084 12.5549 22 12.0727 22C11.5905 22 11.1281 21.8084 10.7871 21.4675C10.4461 21.1265 10.2545 20.664 10.2545 20.1818V20.1C10.2475 19.7991 10.1501 19.5073 9.97501 19.2625C9.79991 19.0176 9.55521 18.8312 9.27273 18.7273C8.99853 18.6063 8.69437 18.5702 8.39947 18.6236C8.10456 18.6771 7.83244 18.8177 7.61818 19.0273L7.56364 19.0818C7.39478 19.2509 7.19425 19.385 6.97353 19.4765C6.7528 19.568 6.51621 19.6151 6.27727 19.6151C6.03834 19.6151 5.80174 19.568 5.58102 19.4765C5.36029 19.385 5.15977 19.2509 4.99091 19.0818C4.82186 18.913 4.68775 18.7124 4.59626 18.4917C4.50476 18.271 4.45766 18.0344 4.45766 17.7955C4.45766 17.5565 4.50476 17.3199 4.59626 17.0992C4.68775 16.8785 4.82186 16.678 4.99091 16.5091L5.04545 16.4545C5.25503 16.2403 5.39562 15.9682 5.4491 15.6733C5.50257 15.3784 5.46647 15.0742 5.34545 14.8C5.23022 14.5311 5.03887 14.3018 4.79497 14.1403C4.55107 13.9788 4.26526 13.8921 3.97273 13.8909H3.81818C3.33597 13.8909 2.87351 13.6994 2.53253 13.3584C2.19156 13.0174 2 12.5549 2 12.0727C2 11.5905 2.19156 11.1281 2.53253 10.7871C2.87351 10.4461 3.33597 10.2545 3.81818 10.2545H3.9C4.2009 10.2475 4.49273 10.1501 4.73754 9.97501C4.98236 9.79991 5.16883 9.55521 5.27273 9.27273C5.39374 8.99853 5.42984 8.69437 5.37637 8.39947C5.3229 8.10456 5.18231 7.83244 4.97273 7.61818L4.91818 7.56364C4.74913 7.39478 4.61503 7.19425 4.52353 6.97353C4.43203 6.7528 4.38493 6.51621 4.38493 6.27727C4.38493 6.03834 4.43203 5.80174 4.52353 5.58102C4.61503 5.36029 4.74913 5.15977 4.91818 4.99091C5.08704 4.82186 5.28757 4.68775 5.50829 4.59626C5.72901 4.50476 5.96561 4.45766 6.20455 4.45766C6.44348 4.45766 6.68008 4.50476 6.9008 4.59626C7.12152 4.68775 7.32205 4.82186 7.49091 4.99091L7.54545 5.04545C7.75971 5.25503 8.03183 5.39562 8.32674 5.4491C8.62164 5.50257 8.9258 5.46647 9.2 5.34545H9.27273C9.54161 5.23022 9.77093 5.03887 9.93245 4.79497C10.094 4.55107 10.1807 4.26526 10.1818 3.97273V3.81818C10.1818 3.33597 10.3734 2.87351 10.7144 2.53253C11.0553 2.19156 11.5178 2 12 2C12.4822 2 12.9447 2.19156 13.2856 2.53253C13.6266 2.87351 13.8182 3.33597 13.8182 3.81818V3.9C13.8193 4.19253 13.906 4.47834 14.0676 4.72224C14.2291 4.96614 14.4584 5.15749 14.7273 5.27273C15.0015 5.39374 15.3056 5.42984 15.6005 5.37637C15.8954 5.3229 16.1676 5.18231 16.3818 4.97273L16.4364 4.91818C16.6052 4.74913 16.8057 4.61503 17.0265 4.52353C17.2472 4.43203 17.4838 4.38493 17.7227 4.38493C17.9617 4.38493 18.1983 4.43203 18.419 4.52353C18.6397 4.61503 18.8402 4.74913 19.0091 4.91818C19.1781 5.08704 19.3122 5.28757 19.4037 5.50829C19.4952 5.72901 19.5423 5.96561 19.5423 6.20455C19.5423 6.44348 19.4952 6.68008 19.4037 6.9008C19.3122 7.12152 19.1781 7.32205 19.0091 7.49091L18.9545 7.54545C18.745 7.75971 18.6044 8.03183 18.5509 8.32674C18.4974 8.62164 18.5335 8.9258 18.6545 9.2V9.27273C18.7698 9.54161 18.9611 9.77093 19.205 9.93245C19.4489 10.094 19.7347 10.1807 20.0273 10.1818H20.1818C20.664 10.1818 21.1265 10.3734 21.4675 10.7144C21.8084 11.0553 22 11.5178 22 12C22 12.4822 21.8084 12.9447 21.4675 13.2856C21.1265 13.6266 20.664 13.8182 20.1818 13.8182H20.1C19.8075 13.8193 19.5217 13.906 19.2778 14.0676C19.0339 14.2291 18.8425 14.4584 18.7273 14.7273Z"
fill="white"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M12 11.5C13.1046 11.5 14 10.6046 14 9.5C14 8.39544 13.1046 7.5 12 7.5C10.8954 7.5 10 8.39544 10 9.5C10 10.6046 10.8954 11.5 12 11.5Z"
fill="white"
stroke={primaryColor}
strokeWidth="2"
strokeMiterlimit="10"
/>
<path
d="M12 12C11.2184 12 10.452 12.259 9.78571 12.7483C9.30733 13.0996 8.89394 13.4408 8.56767 13.9655C8.52188 14.0392 8.5 14.1249 8.5 14.2116V15C8.5 15.2761 8.72386 15.5 9 15.5H15C15.2761 15.5 15.5 15.2761 15.5 15V14.2116C15.5 14.1249 15.4781 14.0392 15.4323 13.9655C15.106 13.4408 14.6926 13.0996 14.2143 12.7483C13.548 12.259 12.7816 12 12 12Z"
fill="white"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
/>
</svg>
<div className="sidebar-headings">Instance Admin</div>
</div>
</Link>
</aside>
</div>
<div className="content-wrapper">
<div className="inner-content">
{/* Project headline */}
<div className="project-headline">
<div className="title">
<div className="title-name-heading-image">
<Headings text="CurrikiStudio" headingType="body2" color="#084892" />
<div className="heading-image " id="preview-heading-myproject">
<svg width="35" height="35" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clipPath="url(#clip0)">
<path
d="M4 9.60938V24.6094C4 25.2998 4.55965 25.8594 5.25 25.8594H25.25C25.9404 25.8594 26.5 25.2998 26.5 24.6094V11.3402C26.5 10.6498 25.9404 10.0902 25.25 10.0902H16.4038"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
/>
<path
d="M16.4038 10.0902L12.933 6.04244C12.8159 5.92523 12.6569 5.85938 12.4911 5.85938H4.625C4.27983 5.85938 4 6.1392 4 6.48437V9.60937"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
/>
</g>
<defs>
<clipPath id="clip0">
<rect width="30" height="30" fill="white" transform="translate(0 0.859375)" />
</clipPath>
</defs>
</svg>
{/* Projects */}
<Headings className="preview-myproject-heading" text="My Projects" headingType="h2" color="#084892" />
</div>
</div>
<div className="search-main-relaced">
<FontAwesomeIcon icon="add" style={{ marginRight: '16px' }} color={secondaryColorIcon} />
<Buttons primary text="Create a project" icon={faPlus} width="auto" height="35px" hover />
</div>
</div>
<Headings text="Create and organize your activities into projects to create complete courses." headingType="body2" color="#515151" className="top-heading-detail" />
</div>
{/* Project card */}
<div>
<Tabs defaultActiveKey={selectTab} activeKey={selectTab} id="uncontrolled-tab-example" onSelect={(k) => setSelectTab(k)} className="main-tabs">
<Tab eventKey="My Projects" title="My Projects">
<div className="row">
<div className="col-md-12">
<div className="project-list-all">
<div className="playlist-resource">
<div className="main-myproject-card">
<div>
<>
<div
className="myproject-card-top"
style={{
backgroundImage: `url(${cardBg})`,
}}
>
<div className="myproject-card-dropdown">
<Dropdown show={show} className="project-dropdown check d-flex align-items-center text-added-project-dropdown">
<Dropdown.Toggle className="project-dropdown-btn project d-flex justify-content-center align-items-center">
<FontAwesomeIcon
icon="ellipsis-v"
style={{
fontSize: '13px',
color: '#ffffff',
marginLeft: '5px',
}}
/>
{/* <span>{text}</span> */}
</Dropdown.Toggle>
<Dropdown.Menu show>
<Dropdown.Item to="#">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" className="menue-img">
<path
d="M11.6667 1H2.33333C1.59695 1 1 1.59695 1 2.33333V11.6667C1 12.403 1.59695 13 2.33333 13H11.6667C12.403 13 13 12.403 13 11.6667V2.33333C13 1.59695 12.403 1 11.6667 1Z"
stroke={primaryColor}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path d="M7 4.33325V9.66659" stroke={primaryColor} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M4.33301 7H9.66634" stroke={primaryColor} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
Duplicate
</Dropdown.Item>
<Dropdown.Item to="#">
<svg width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg" className="menue-img">
<path d="M0.75 3.39966H1.91667H11.25" stroke={primaryColor} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path
d="M3.66699 3.4V2.2C3.66699 1.88174 3.78991 1.57652 4.0087 1.35147C4.22749 1.12643 4.52424 1 4.83366 1H7.16699C7.47641 1 7.77316 1.12643 7.99195 1.35147C8.21074 1.57652 8.33366 1.88174 8.33366 2.2V3.4M10.0837 3.4V11.8C10.0837 12.1183 9.96074 12.4235 9.74195 12.6485C9.52316 12.8736 9.22641 13 8.91699 13H3.08366C2.77424 13 2.47749 12.8736 2.2587 12.6485C2.03991 12.4235 1.91699 12.1183 1.91699 11.8V3.4H10.0837Z"
stroke={primaryColor}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path d="M4.83301 6.39966V9.99966" stroke={primaryColor} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M7.16699 6.39966V9.99966" stroke={primaryColor} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
Delete
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</div>
<Link to="#">
<div className="myproject-card-title" id="preview-myproject-card-title">
<h2>Design, Art & History tagr</h2>
</div>
</Link>
</div>
</>
</div>
<Link className="project-description" to="#">
<div className="myproject-card-detail">
<p>Within the six categories, there are over 50 learning activity types. These range from Interactive Video.</p>
</div>
</Link>
<div className="updated-date">Updated: 07/19/2021</div>
<div className="myproject-card-add-share">
<button type="button">
<Link
to="#"
style={{
textDecoration: 'none',
color: '#084892',
}}
>
<svg width="24" height="32" viewBox="0 0 24 32" fill="none" xmlns="http://www.w3.org/2000/svg" className="mr-3">
<path
d="M0 4C0 1.79086 1.79086 0 4 0H20C22.2091 0 24 1.79086 24 4V28C24 30.2091 22.2091 32 20 32H4C1.79086 32 0 30.2091 0 28V4Z"
fill="white"
/>
<path
d="M2.375 16C2.375 16 5.875 9 12 9C18.125 9 21.625 16 21.625 16C21.625 16 18.125 23 12 23C5.875 23 2.375 16 2.375 16Z"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M12 18.625C13.4497 18.625 14.625 17.4497 14.625 16C14.625 14.5503 13.4497 13.375 12 13.375C10.5503 13.375 9.375 14.5503 9.375 16C9.375 17.4497 10.5503 18.625 12 18.625Z"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
<span className="textinButton">Preview</span>
</Link>
</button>
<button type="button">
<svg width="24" height="32" viewBox="0 0 24 32" fill="none" xmlns="http://www.w3.org/2000/svg" className="mr-3">
<path d="M0 4C0 1.79086 1.79086 0 4 0H20C22.2091 0 24 1.79086 24 4V28C24 30.2091 22.2091 32 20 32H4C1.79086 32 0 30.2091 0 28V4Z" fill="white" />
<path
d="M11.0513 8.89767H4.78927C4.31476 8.89767 3.85968 9.08617 3.52415 9.4217C3.18862 9.75723 3.00012 10.2123 3.00012 10.6868V23.2108C3.00012 23.6854 3.18862 24.1404 3.52415 24.476C3.85968 24.8115 4.31476 25 4.78927 25H17.3133C17.7878 25 18.2429 24.8115 18.5784 24.476C18.9139 24.1404 19.1024 23.6854 19.1024 23.2108V16.9488"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M17.7605 7.55582C18.1163 7.19993 18.599 7 19.1023 7C19.6056 7 20.0883 7.19993 20.4442 7.55582C20.8001 7.9117 21 8.39438 21 8.89768C21 9.40097 20.8001 9.88365 20.4442 10.2395L11.9457 18.738L8.36743 19.6326L9.262 16.0543L17.7605 7.55582Z"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
<span className="textinButton">Edit</span>
</button>
<button type="button">
<svg width="24" height="32" viewBox="0 0 24 32" fill="none" xmlns="http://www.w3.org/2000/svg" className="mr-3">
<path d="M0 4C0 1.79086 1.79086 0 4 0H20C22.2091 0 24 1.79086 24 4V28C24 30.2091 22.2091 32 20 32H4C1.79086 32 0 30.2091 0 28V4Z" fill="white" />
<path
d="M10.1899 16.906C10.5786 17.4262 11.0746 17.8566 11.644 18.168C12.2135 18.4795 12.8433 18.6647 13.4905 18.7111C14.1378 18.7575 14.7875 18.664 15.3955 18.437C16.0035 18.21 16.5557 17.8547 17.0144 17.3953L19.7298 14.6772C20.5541 13.8228 21.0103 12.6785 21 11.4907C20.9897 10.303 20.5137 9.16675 19.6746 8.32683C18.8356 7.48692 17.7005 7.01049 16.5139 7.00017C15.3273 6.98985 14.1842 7.44646 13.3307 8.27165L11.7739 9.82094"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M13.8101 15.094C13.4214 14.5738 12.9255 14.1434 12.356 13.832C11.7865 13.5205 11.1567 13.3353 10.5095 13.2889C9.86218 13.2425 9.2125 13.336 8.60449 13.563C7.99648 13.7901 7.44435 14.1453 6.98557 14.6048L4.27025 17.3228C3.44589 18.1772 2.98974 19.3215 3.00005 20.5093C3.01036 21.6971 3.48631 22.8333 4.32538 23.6732C5.16445 24.5131 6.29951 24.9895 7.48609 24.9999C8.67267 25.0102 9.81583 24.5536 10.6694 23.7284L12.2171 22.1791"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
<span className="textinButton">Shared link</span>
</button>
</div>
</div>
</div>
<div className="playlist-resource">
<div className="main-myproject-card">
<div>
<>
<div
className="myproject-card-top"
style={{
backgroundImage: `url(${cardBg})`,
}}
>
<div className="myproject-card-dropdown">
<Dropdown className="project-dropdown check d-flex align-items-center text-added-project-dropdown">
<Dropdown.Toggle className="project-dropdown-btn project d-flex justify-content-center align-items-center">
<FontAwesomeIcon
icon="ellipsis-v"
style={{
fontSize: '13px',
color: '#ffffff',
marginLeft: '5px',
}}
/>
{/* <span>{text}</span> */}
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item to="#">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" className="menue-img">
<path
d="M11.6667 1H2.33333C1.59695 1 1 1.59695 1 2.33333V11.6667C1 12.403 1.59695 13 2.33333 13H11.6667C12.403 13 13 12.403 13 11.6667V2.33333C13 1.59695 12.403 1 11.6667 1Z"
stroke={primaryColor}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path d="M7 4.33325V9.66659" stroke={primaryColor} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M4.33301 7H9.66634" stroke={primaryColor} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
Duplicate
</Dropdown.Item>
<Dropdown.Item to="#">
<svg width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg" className="menue-img">
<path d="M0.75 3.39966H1.91667H11.25" stroke={primaryColor} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path
d="M3.66699 3.4V2.2C3.66699 1.88174 3.78991 1.57652 4.0087 1.35147C4.22749 1.12643 4.52424 1 4.83366 1H7.16699C7.47641 1 7.77316 1.12643 7.99195 1.35147C8.21074 1.57652 8.33366 1.88174 8.33366 2.2V3.4M10.0837 3.4V11.8C10.0837 12.1183 9.96074 12.4235 9.74195 12.6485C9.52316 12.8736 9.22641 13 8.91699 13H3.08366C2.77424 13 2.47749 12.8736 2.2587 12.6485C2.03991 12.4235 1.91699 12.1183 1.91699 11.8V3.4H10.0837Z"
stroke={primaryColor}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path d="M4.83301 6.39966V9.99966" stroke={primaryColor} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M7.16699 6.39966V9.99966" stroke={primaryColor} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
Delete
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</div>
<Link to="#">
<div className="myproject-card-title" id="preview-myproject-card-title">
<h2>Design, Art & History</h2>
</div>
</Link>
</div>
</>
</div>
<Link className="project-description" to="#">
<div className="myproject-card-detail">
<p>Within the six categories, there are over 50 learning activity types. These range from Interactive Video.</p>
</div>
</Link>
<div className="updated-date">Updated: 07/19/2021</div>
<div className="myproject-card-add-share">
<button type="button">
<Link
to="#"
style={{
textDecoration: 'none',
color: '#084892',
}}
>
<svg width="24" height="32" viewBox="0 0 24 32" fill="none" xmlns="http://www.w3.org/2000/svg" className="mr-3">
<path
d="M0 4C0 1.79086 1.79086 0 4 0H20C22.2091 0 24 1.79086 24 4V28C24 30.2091 22.2091 32 20 32H4C1.79086 32 0 30.2091 0 28V4Z"
fill="white"
/>
<path
d="M2.375 16C2.375 16 5.875 9 12 9C18.125 9 21.625 16 21.625 16C21.625 16 18.125 23 12 23C5.875 23 2.375 16 2.375 16Z"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M12 18.625C13.4497 18.625 14.625 17.4497 14.625 16C14.625 14.5503 13.4497 13.375 12 13.375C10.5503 13.375 9.375 14.5503 9.375 16C9.375 17.4497 10.5503 18.625 12 18.625Z"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
<span className="textinButton">Preview</span>
</Link>
</button>
<button type="button">
<svg width="24" height="32" viewBox="0 0 24 32" fill="none" xmlns="http://www.w3.org/2000/svg" className="mr-3">
<path d="M0 4C0 1.79086 1.79086 0 4 0H20C22.2091 0 24 1.79086 24 4V28C24 30.2091 22.2091 32 20 32H4C1.79086 32 0 30.2091 0 28V4Z" fill="white" />
<path
d="M11.0513 8.89767H4.78927C4.31476 8.89767 3.85968 9.08617 3.52415 9.4217C3.18862 9.75723 3.00012 10.2123 3.00012 10.6868V23.2108C3.00012 23.6854 3.18862 24.1404 3.52415 24.476C3.85968 24.8115 4.31476 25 4.78927 25H17.3133C17.7878 25 18.2429 24.8115 18.5784 24.476C18.9139 24.1404 19.1024 23.6854 19.1024 23.2108V16.9488"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M17.7605 7.55582C18.1163 7.19993 18.599 7 19.1023 7C19.6056 7 20.0883 7.19993 20.4442 7.55582C20.8001 7.9117 21 8.39438 21 8.89768C21 9.40097 20.8001 9.88365 20.4442 10.2395L11.9457 18.738L8.36743 19.6326L9.262 16.0543L17.7605 7.55582Z"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
<span className="textinButton">Edit</span>
</button>
<button type="button">
<svg width="24" height="32" viewBox="0 0 24 32" fill="none" xmlns="http://www.w3.org/2000/svg" className="mr-3">
<path d="M0 4C0 1.79086 1.79086 0 4 0H20C22.2091 0 24 1.79086 24 4V28C24 30.2091 22.2091 32 20 32H4C1.79086 32 0 30.2091 0 28V4Z" fill="white" />
<path
d="M10.1899 16.906C10.5786 17.4262 11.0746 17.8566 11.644 18.168C12.2135 18.4795 12.8433 18.6647 13.4905 18.7111C14.1378 18.7575 14.7875 18.664 15.3955 18.437C16.0035 18.21 16.5557 17.8547 17.0144 17.3953L19.7298 14.6772C20.5541 13.8228 21.0103 12.6785 21 11.4907C20.9897 10.303 20.5137 9.16675 19.6746 8.32683C18.8356 7.48692 17.7005 7.01049 16.5139 7.00017C15.3273 6.98985 14.1842 7.44646 13.3307 8.27165L11.7739 9.82094"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M13.8101 15.094C13.4214 14.5738 12.9255 14.1434 12.356 13.832C11.7865 13.5205 11.1567 13.3353 10.5095 13.2889C9.86218 13.2425 9.2125 13.336 8.60449 13.563C7.99648 13.7901 7.44435 14.1453 6.98557 14.6048L4.27025 17.3228C3.44589 18.1772 2.98974 19.3215 3.00005 20.5093C3.01036 21.6971 3.48631 22.8333 4.32538 23.6732C5.16445 24.5131 6.29951 24.9895 7.48609 24.9999C8.67267 25.0102 9.81583 24.5536 10.6694 23.7284L12.2171 22.1791"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
<span className="textinButton">Shared link</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</Tab>
<Tab eventKey="Favorite Projects" title="Favorite Projects">
<div className="row">
<div className="col-md-12">
<div className="flex-smaple">
<>
<div className="playlist-resource">
<div className="col-md-3 check">
<div className="program-tile">
<div className="program-thumb">
<div
className="project-thumb"
style={{
backgroundImage: `url(${cardBg})`,
}}
/>
</div>
<div className="program-content" style={{ padding: '10px 15px' }}>
<div>
<div className="row">
<div className="col-md-10">
<h3 className="program-title">
<a>The Curriki Vision</a>
</h3>
</div>
<div className="col-md-2">
<Dropdown className="project-dropdown check d-flex justify-content-center align-items-center">
<Dropdown.Toggle className="project-dropdown-btn project d-flex justify-content-center align-items-center">
<FontAwesomeIcon icon="ellipsis-v" />
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item as={Link}>
<svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg" className="menue-img">
<path
d="M1.125 6C1.125 6 3.625 1 8 1C12.375 1 14.875 6 14.875 6C14.875 6 12.375 11 8 11C3.625 11 1.125 6 1.125 6Z"
stroke={primaryColor}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M8 7.875C9.03553 7.875 9.875 7.03553 9.875 6C9.875 4.96447 9.03553 4.125 8 4.125C6.96447 4.125 6.125 4.96447 6.125 6C6.125 7.03553 6.96447 7.875 8 7.875Z"
stroke={primaryColor}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
Preview
</Dropdown.Item>
<Dropdown.Item to="#">
<FontAwesomeIcon icon="share" className="mr-2" />
Share
</Dropdown.Item>
<Dropdown.Item
to="#"
onClick={() => {
Swal.showLoading();
cloneProject(project.id);
}}
>
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" className="menue-img">
<path
d="M11.6667 1H2.33333C1.59695 1 1 1.59695 1 2.33333V11.6667C1 12.403 1.59695 13 2.33333 13H11.6667C12.403 13 13 12.403 13 11.6667V2.33333C13 1.59695 12.403 1 11.6667 1Z"
stroke={primaryColor}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path d="M7 4.33325V9.66659" stroke={primaryColor} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M4.33301 7H9.66634" stroke={primaryColor} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
Duplicate
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</div>
</div>
<div className="lessons-duration">
<div className="row">
<div className="col-md-12">
<div>An introduction to Curriki and our vision.</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</>
</div>
</div>
</div>
</Tab>
</Tabs>
</div>
</div>
</div>
</div>
</div>
);
}
Example #25
| Source File: index.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 4 votes |
|
SearchResults = (props) => {
const { match, searchParams, hasMoreResults, projects, backToSearch, previousPage, nextPage, search } = props;
const [dataActivity, setDataActivity] = useState(null);
const dispatch = useDispatch();
// const Playlist = async () => {
// var storeData = [];
// for (var i = 0; i < projects?.length; i++) {
// const result = await dispatch(showSearchProjectActionPlaylist(projects[i]));
// storeData.push(result.project.playlists?.map((data) => data?.activities));
// }
// setDataActivity(storeData);
// };
// Init
useEffect(() => {
search(searchParams);
}, [match, searchParams]);
return (
<div className="results">
{/*<div className="row my-4">
<div className="col">
<h4 className="search-heading">Search Results</h4>
</div>
<div className="col text-right">
<button type="button" className="btn back-action" style={{ color: 'rgb(8, 72, 146) ' }} onClick={backToSearch}>
<FontAwesomeIcon icon="chevron-left" className="action-icon mr-2" />
Back to Search
</button>
</div>
</div>*/}
<SearchForm />
{projects !== null && projects.length === 0 && (
<div className="row">
<div className="col">
<Alert variant="warning">No results found.</Alert>
</div>
</div>
)}
<Tabs defaultActiveKey="project" id="uncontrolled-tab-example">
<Tab eventKey="project" title="Project">
{projects ? (
<>
{projects !== null && projects.length > 0 && projects.map((project) => <Project project={project} key={project.id} />)}
<div className="row">
<div className="col text-left">
{!!searchParams.from && searchParams.from !== 0 && (
<button type="button" className="btn btn-primary pagination-buttons" onClick={previousPage}>
Previous
</button>
)}
</div>
<div className="col text-right">
{hasMoreResults && (
<button type="button" className="btn btn-primary pagination-buttons" onClick={nextPage}>
Next
</button>
)}
</div>
</div>
</>
) : (
<Alert variant="warning">loading ...</Alert>
)}
</Tab>
{/* <Tab eventKey="activities" title="Activities">
{dataActivity ? (
dataActivity?.length ? (
dataActivity.map((data) =>
data.map((data1) =>
data1.map((data2) => (
<div className="Playlists-container">
<div className="main-flex">
<div className="img-cont">
<div className="Playlists-img">
<img src={data2.thumb_url} />
</div>
<h6 className="Playlists-title">{data2.title}</h6>
</div>
<div className="ext-right">
<Dropdown>
<Dropdown.Toggle className="actions-button">
<FontAwesomeIcon icon="ellipsis-v" style={{ color: 'rgb(8, 72, 146)' }} />
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item to="#" eventKey={data2.id} onSelect={() => dispatch(setPreviewActivityAction(data2))}>
<FontAwesomeIcon icon="eye" className="action-icon" />
Preview
</Dropdown.Item>
<Dropdown.Item
to="#"
eventKey={data2.id}
onSelect={() => {
const finalUrl = `${decodeURIComponent(match.params.redirectUrl)}&title=${encodeURIComponent(data2.title)}&entity=activity&id=${data2.id}`;
Swal.fire({
icon: 'warning',
html: `You have selected <strong>Activity: ${data.title}</strong><br>Do you want to continue ?`,
showCancelButton: true,
confirmButtonColor: '#084892',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, add it',
}).then((result) => {
if (result.value) {
window.location.href = finalUrl;
}
});
}}
>
<FontAwesomeIcon icon="plus" className="action-icon" />
Add to Course
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</div>
</div>
</div>
))
)
)
) : (
<Alert variant="warning">No results found.</Alert>
)
) : (
<Alert variant="warning">loading ...</Alert>
)}
</Tab> */}
</Tabs>
</div>
);
}
Example #26
| Source File: LtiPlaylistPreview.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 4 votes |
|
function LtiPlaylistPreview(props) {
const { playlist, playlistId, activityId, projectId, showLti, loadLtiPlaylist, loadSharedPlaylist, loadProjectPlaylists, searchPreviewPlaylist, setCollapsed, collapsed } = props;
const { activeOrganization } = useSelector((state) => state.organization);
const [openPlaylistMenu, setPlaylistMenu] = useState(false);
const query = QueryString.parse(window.location.search);
useEffect(() => {
window.scrollTo(0, 0);
if (window.location.pathname.includes('/shared') && playlistId && projectId) {
loadSharedPlaylist(projectId, playlistId);
} else if (window.location.pathname.includes('/preview/lti') && playlistId) {
loadLtiPlaylist(playlistId);
} else if (window.location.pathname.includes('/preview') && playlistId && activeOrganization?.id) {
searchPreviewPlaylist(playlistId);
}
}, [playlistId, activityId, loadLtiPlaylist, loadSharedPlaylist, projectId, activeOrganization?.id, searchPreviewPlaylist]);
let { selectedPlaylist } = playlist;
useEffect(() => {
if (selectedPlaylist) {
loadProjectPlaylists(selectedPlaylist.project_id);
}
}, [selectedPlaylist]);
if (selectedPlaylist && selectedPlaylist.id !== playlistId) {
selectedPlaylist = null;
}
if (playlist.isNonAvailablePlaylist) {
return (
<div className="alert alert-danger" role="alert" style={{ fontSize: '1.5em' }}>
Playlist is not available.
</div>
);
}
if (!selectedPlaylist) {
return (
<div className="alert alert-info" role="alert">
Loading...
</div>
);
}
const allPlaylists = playlist.playlists;
let currentActivityId = activityId;
let currentActivity;
let previousResource = null;
let nextResource = null;
if (selectedPlaylist.activities && selectedPlaylist.activities.length > 0) {
if (currentActivityId === null || currentActivityId === undefined) {
currentActivityId = selectedPlaylist.activities[0].id;
}
currentActivity = selectedPlaylist.activities.find((f) => f.id === currentActivityId);
if (currentActivity) {
const index = selectedPlaylist.activities.findIndex((act) => act.id === currentActivity.id);
if (index > 0) {
previousResource = selectedPlaylist.activities[index - 1];
}
if (index < selectedPlaylist.activities.length - 1) {
nextResource = selectedPlaylist.activities[index + 1];
}
}
}
return (
<section className="curriki-playlist-preview">
<div className="project-share-preview-nav">
<img src={HeaderLogo} />
</div>
<div className="curriki-playlist-preview-container">
<div className="activity-preview-with-playlist-container">
{/* <div className={`activity-bg left-vdo${collapsed ? ' collapsed' : ''}`}> */}
<div className={!openPlaylistMenu ? (query.view === 'activity' ? 'left-activity-view extra-padding' : ' left-activity-view') : ' hideInMobile left-activity-view'}>
<div className="activity-metadata">
<Link>
<img src={projectIcon} alt="" />
Project: {selectedPlaylist.project.name}
</Link>
<FontAwesomeIcon icon="chevron-right" />
<Link>
<img src={listIcon} alt="" />
Playlist:{selectedPlaylist.title}
</Link>
</div>
{localStorage.getItem('lti_activity') === 'false' && (
<Link to={`/project/${selectedPlaylist.project.id}/shared`}>
<FontAwesomeIcon icon="times" />
</Link>
)}
<div className="activity-controller">
{currentActivity && (
<h1>
Activity:
<span>{currentActivity.title}</span>
</h1>
)}
<div className="controller">
<PreviousLink
viewType={query.view}
showLti={showLti}
playlistId={playlistId}
previousResource={previousResource}
allPlaylists={allPlaylists}
projectId={selectedPlaylist.project_id}
/>
<NextLink
viewType={query.view}
showLti={showLti}
playlistId={playlistId}
nextResource={nextResource}
allPlaylists={allPlaylists}
projectId={selectedPlaylist.project_id}
/>
</div>
</div>
<div className="main-item-wrapper">
<div className="item-container">
{currentActivity && (
<Suspense fallback={<div>Loading</div>}>
<H5PPreview showLtiPreview activityId={currentActivity.id} />
</Suspense>
)}
</div>
</div>
</div>
{query.view !== 'activity' && (
<div className={openPlaylistMenu ? 'all-activities-of-playlist active' : 'all-activities-of-playlist'}>
<div className="list-button" onClick={() => setPlaylistMenu(!openPlaylistMenu)}>
{openPlaylistMenu ? <FontAwesomeIcon icon="chevron-right" /> : <FontAwesomeIcon icon="chevron-left" />}
</div>
{openPlaylistMenu ? (
<div className="relative-white-bg">
<Tabs defaultActiveKey="home" id="uncontrolled-tab-example">
<Tab eventKey="home" title="Activities">
<div className="all-activities">
{selectedPlaylist.activities?.map((data) => (
<div className={currentActivity.title === data.title ? 'each-activity active' : 'each-activity'}>
<Link onClick={() => setPlaylistMenu(!openPlaylistMenu)} to={`/playlist/${selectedPlaylist.id}/activity/${data.id}/preview/lti`}>
<div
className="thumbnail"
style={{
backgroundImage:
!!data.thumb_url && data.thumb_url.includes('pexels.com') ? `url(${data.thumb_url})` : `url(${global.config.resourceUrl}${data.thumb_url})`,
}}
/>
<p>{data.title}</p>
</Link>
</div>
))}
</div>
</Tab>
</Tabs>
</div>
) : (
<div className="relative-white-bg-collapsed">
<div className="all-activities">
{selectedPlaylist.activities?.map((data) => (
<Link title={data.title} to={`/playlist/${selectedPlaylist.id}/activity/${data.id}/preview/lti`} className="each-activity">
<div
className="thumbnail"
style={{
backgroundImage:
!!data.thumb_url && data.thumb_url.includes('pexels.com') ? `url(${data.thumb_url})` : `url(${global.config.resourceUrl}${data.thumb_url})`,
}}
/>
</Link>
))}
</div>
</div>
)}
</div>
)}
</div>
</div>
</section>
);
}
Example #27
| Source File: LtiPlaylistPreviewShared.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 4 votes |
|
function LtiPlaylistPreviewShared(props) {
const { history, playlist, projectId, playlistId, activityId, loading, loadSharedPlaylist } = props;
const [openPlaylistMenu, setPlaylistMenu] = useState(false);
const [h5pCurrentActivity, setH5pCurrentActivity] = useState(null);
const [errorType, setTypeError] = useState('');
const query = QueryString.parse(window.location.search);
useEffect(() => {
window.scrollTo(0, 0);
loadSharedPlaylist(projectId, playlistId)
.then()
.catch((err) => setTypeError(err.errors?.[0]));
}, [projectId, playlistId, activityId, loadSharedPlaylist]);
let { selectedPlaylist } = playlist;
if (selectedPlaylist === 'error') {
return <Unauthorized text="Project is not public." />;
}
if (selectedPlaylist && selectedPlaylist.id !== playlistId) {
selectedPlaylist = null;
}
if (!selectedPlaylist) {
return (
<div className={errorType ? 'alert alert-danger' : 'alert alert-info'} role="alert">
{errorType ? errorType.replace('Project', 'Playlist') : 'Loading...'}
</div>
);
}
const allPlaylists = playlist.playlists;
let currentActivityId = activityId;
let currentActivity;
let previousResource = null;
let nextResource = null;
if (selectedPlaylist.activities && selectedPlaylist.activities.length > 0) {
if (currentActivityId === null || currentActivityId === undefined) {
currentActivityId = selectedPlaylist.activities[0].id;
}
currentActivity = h5pCurrentActivity?.id || selectedPlaylist.activities.find((f) => f.id === currentActivityId);
if (currentActivity) {
const index = selectedPlaylist.activities.findIndex((act) => act.id === currentActivity.id);
if (index > 0) {
previousResource = selectedPlaylist.activities[index - 1];
}
if (index < selectedPlaylist.activities.length - 1) {
nextResource = selectedPlaylist.activities[index + 1];
}
}
}
// useEffect(() => {
// if (selectedPlaylist?.activities?.length) {
// //setH5pCurrentActivity(selectedPlaylist.activities[0].id);
// }
// }, [selectedPlaylist]);
return (
<section className="curriki-playlist-preview">
<div className="project-share-preview-nav">
<img src={HeaderLogo} />
</div>
<div className="curriki-playlist-preview-container">
<div className="activity-preview-with-playlist-container">
{/* <div className={`activity-bg left-vdo${collapsed ? ' collapsed' : ''}`}> */}
<div className={!openPlaylistMenu ? (query.view === 'activity' ? 'left-activity-view extra-padding' : ' left-activity-view') : ' hideInMobile left-activity-view'}>
<div className="activity-metadata">
<Link>
<img src={projectIcon} alt="" />
Project: {selectedPlaylist.project.name}
</Link>
<FontAwesomeIcon icon="chevron-right" />
<Link>
<img src={listIcon} alt="" />
Playlist:{selectedPlaylist.title}
</Link>
</div>
{localStorage.getItem('lti_activity') === 'false' && (
<Link to={`/project/${selectedPlaylist.project.id}/shared`}>
<FontAwesomeIcon icon="times" />
</Link>
)}
<div className="activity-controller">
{currentActivity && (
<h1>
Activity:
<span>{h5pCurrentActivity?.title || currentActivity.title}</span>
</h1>
)}
<div className="controller">
<PreviousLink
viewType={query.view}
setH5pCurrentActivity={setH5pCurrentActivity}
playlistId={playlistId}
previousResource={
h5pCurrentActivity ? selectedPlaylist.activities[selectedPlaylist.activities.findIndex((f) => f.id === h5pCurrentActivity.id) - 1] : previousResource
}
allPlaylists={allPlaylists}
projectId={selectedPlaylist.project_id}
/>
<NextLink
viewType={query.view}
setH5pCurrentActivity={setH5pCurrentActivity}
playlistId={playlistId}
nextResource={h5pCurrentActivity ? selectedPlaylist.activities[selectedPlaylist.activities.findIndex((f) => f.id === h5pCurrentActivity.id) + 1] : nextResource}
allPlaylists={allPlaylists}
projectId={selectedPlaylist.project_id}
/>
</div>
</div>
<div className="main-item-wrapper">
<div className="item-container">
{currentActivity && (
<Suspense fallback={<div>Loading</div>}>
<H5PPreview showLtiPreview activityId={h5pCurrentActivity?.id || currentActivity.id} />
</Suspense>
)}
</div>
</div>
</div>
{query.view !== 'activity' && (
<div className={openPlaylistMenu ? 'all-activities-of-playlist active' : 'all-activities-of-playlist'}>
<div className="list-button" onClick={() => setPlaylistMenu(!openPlaylistMenu)}>
{openPlaylistMenu ? <FontAwesomeIcon icon="chevron-right" /> : <FontAwesomeIcon icon="chevron-left" />}
</div>
{openPlaylistMenu ? (
<div className="relative-white-bg">
<Tabs defaultActiveKey="home" id="uncontrolled-tab-example">
<Tab eventKey="home" title="Activities">
<div className="all-activities">
{selectedPlaylist.activities?.map((data) => (
<div className={currentActivity.title === data.title ? 'each-activity active' : 'each-activity'}>
<Link
onClick={() => {
setPlaylistMenu(!openPlaylistMenu);
setH5pCurrentActivity(data);
}}
to="#"
>
<div
className="thumbnail"
style={{
backgroundImage:
!!data.thumb_url && data.thumb_url.includes('pexels.com') ? `url(${data.thumb_url})` : `url(${global.config.resourceUrl}${data.thumb_url})`,
}}
/>
<p>{data.title}</p>
</Link>
</div>
))}
</div>
</Tab>
</Tabs>
</div>
) : (
<div className="relative-white-bg-collapsed">
<div className="all-activities">
{selectedPlaylist.activities?.map((data) => (
<Link
title={data.title}
onClick={() => {
setPlaylistMenu(!openPlaylistMenu);
setH5pCurrentActivity(data);
}}
to="#"
className="each-activity"
>
<div
className="thumbnail"
style={{
backgroundImage:
!!data.thumb_url && data.thumb_url.includes('pexels.com') ? `url(${data.thumb_url})` : `url(${global.config.resourceUrl}${data.thumb_url})`,
}}
/>
</Link>
))}
</div>
</div>
)}
</div>
)}
</div>
</div>
</section>
);
}
Example #28
| Source File: index.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 4 votes |
|
function PlaylistPreview(props) {
const { loading, projectId, playlistId, activityId, playlist, loadHP, loadPlaylist, loadProjectPlaylists } = props;
const organization = useSelector((state) => state.organization);
const { teamPermission } = useSelector((state) => state.team);
const [openPlaylistMenu, setPlaylistMenu] = useState(true);
const query = QueryString.parse(window.location.search);
const projectPreview = localStorage.getItem('projectPreview');
// const history = useHistory();
const dispatch = useDispatch();
const parser = new DOMParser();
useEffect(() => {
window.scrollTo(0, 0);
loadPlaylist(projectId, playlistId);
}, [projectId, playlistId, activityId, loadPlaylist]);
let { selectedPlaylist } = playlist;
if (selectedPlaylist && selectedPlaylist.id !== playlistId) {
selectedPlaylist = null;
}
useEffect(() => {
loadProjectPlaylists(projectId);
}, [projectId, loadProjectPlaylists]);
useEffect(() => {
if (Object.keys(teamPermission).length === 0 && organization?.currentOrganization?.id && selectedPlaylist?.project?.team?.id) {
dispatch(getTeamPermission(organization?.currentOrganization?.id, selectedPlaylist?.project?.team?.id));
}
}, [teamPermission, selectedPlaylist, dispatch, organization?.currentOrganization?.id]);
let currentActivityId = activityId;
let currentActivity;
let previousResource = null;
let nextResource = null;
if (selectedPlaylist && selectedPlaylist.activities && selectedPlaylist.activities.length > 0) {
if (currentActivityId === null || currentActivityId === undefined) {
currentActivityId = selectedPlaylist.activities[0].id;
}
currentActivity = selectedPlaylist.activities.find((f) => f.id === currentActivityId);
if (currentActivity) {
const index = selectedPlaylist.activities.findIndex((f) => f.id === currentActivity.id);
if (index > 0) {
previousResource = selectedPlaylist.activities[index - 1];
}
if (index < selectedPlaylist.activities.length - 1) {
nextResource = selectedPlaylist.activities[index + 1];
}
}
}
useEffect(() => {
if (loading && currentActivityId) {
loadH5pResourceSettings(currentActivityId)
.then(() => {
loadHP(null);
})
.catch(() => {
loadHP('fail');
});
}
}, [loading, currentActivityId, loadHP]);
if (!selectedPlaylist) {
return (
<div className="alert alert-info" role="alert">
Loading...
</div>
);
}
const allPlaylists = playlist.playlists;
return (
<section className="curriki-playlist-preview">
<div className="project-share-preview-nav">
<img src={HeaderLogo} />
</div>
<div className="curriki-playlist-preview-container">
<div className="activity-preview-with-playlist-container">
{/* <div className={`activity-bg left-vdo${collapsed ? ' collapsed' : ''}`}> */}
<div className={query.view !== 'activity' ? 'left-activity-view' : 'left-activity-view extra-padding'}>
<div className="activity-metadata">
<Link to={`/org/${organization.currentOrganization?.domain}/project/${selectedPlaylist.project.id}`}>
<img src={projectIcon} alt="" />
Project: {selectedPlaylist.project.name}
</Link>
<FontAwesomeIcon icon="chevron-right" />
<Link>
<img src={listIcon} alt="" />
Playlist:{selectedPlaylist.title}
</Link>
<Link
className="close-icon"
to={
projectPreview === 'true'
? // eslint-disable-next-line no-restricted-globals
{ pathname: `/org/${organization.currentOrganization?.domain}/project/${selectedPlaylist.project.id}/preview`, state: { from: location.pathname } }
: `/org/${organization.currentOrganization?.domain}/project/${selectedPlaylist.project.id}`
}
>
<FontAwesomeIcon icon="times" />
</Link>
</div>
{localStorage.getItem('lti_activity') === 'false' && (
<Link to={`/project/${selectedPlaylist.project.id}/shared`}>
<FontAwesomeIcon icon="times" />
</Link>
)}
<div className="activity-controller">
{currentActivity && (
<h1>
Activity:
<span>{parser.parseFromString(currentActivity.title, 'text/html').body.textContent}</span>
</h1>
)}
<div className="controller">
<PreviousLink viewType={query.view} projectId={projectId} playlistId={playlistId} previousResource={previousResource} allPlaylists={allPlaylists} />
<NextLink viewType={query.view} projectId={projectId} playlistId={playlistId} nextResource={nextResource} allPlaylists={allPlaylists} />
</div>
</div>
<div className="main-item-wrapper">
<div className="item-container">
{currentActivity && (
<Suspense fallback={<div>Loading</div>}>
<H5PPreview showLtiPreview activityId={currentActivity.id} />
</Suspense>
)}
</div>
</div>
</div>
{query.view !== 'activity' && (
<div className={openPlaylistMenu ? 'all-activities-of-playlist active' : 'all-activities-of-playlist'}>
<div className="list-button" onClick={() => setPlaylistMenu(!openPlaylistMenu)}>
{openPlaylistMenu ? <FontAwesomeIcon icon="chevron-right" /> : <FontAwesomeIcon icon="chevron-left" />}
</div>
{openPlaylistMenu ? (
<div className="relative-white-bg">
<Tabs defaultActiveKey="home" id="uncontrolled-tab-example">
<Tab eventKey="home" title="Activities">
<div className="all-activities">
{selectedPlaylist.activities?.map((data) => (
<div className={currentActivity.title === data.title ? 'each-activity active' : 'each-activity'}>
<Link
to={`/org/${organization.currentOrganization?.domain}/project/${selectedPlaylist.project.id}/playlist/${selectedPlaylist.id}/activity/${data.id}/preview`}
>
<div
className="thumbnail"
style={{
backgroundImage:
!!data.thumb_url && data.thumb_url.includes('pexels.com') ? `url(${data.thumb_url})` : `url(${global.config.resourceUrl}${data.thumb_url})`,
}}
/>
<p>{parser.parseFromString(data.title, 'text/html').body.textContent}</p>
</Link>
<DropdownActivity className="Dropdown-Activity" resource={data} playlist={selectedPlaylist} teamPermission={teamPermission || {}} />
</div>
))}
</div>
</Tab>
</Tabs>
</div>
) : (
<div className="relative-white-bg-collapsed">
<div className="all-activities">
{selectedPlaylist.activities?.map((data) => (
<Link
title={data.title}
className="each-activity"
to={`/org/${organization.currentOrganization?.domain}/project/${selectedPlaylist.project.id}/playlist/${selectedPlaylist.id}/activity/${data.id}/preview`}
>
<div
className="thumbnail"
style={{
backgroundImage:
!!data.thumb_url && data.thumb_url.includes('pexels.com') ? `url(${data.thumb_url})` : `url(${global.config.resourceUrl}${data.thumb_url})`,
}}
/>
</Link>
))}
</div>
</div>
)}
</div>
)}
</div>
</div>
</section>
);
}
Example #29
| Source File: index.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 4 votes |
|
ProjectsPage = (props) => {
const allStateProject = useSelector((state) => state.project);
const [show, setShow] = useState(false);
const [selectedProjectId, setSelectedProjectId] = useState(0);
const [activeFilter, setActiveFilter] = useState("small-grid");
const [allProjects, setAllProjects] = useState(null);
const [value, setValue] = useState(0);
const [projectDivider, setProjectDivider] = useState([]);
const [sortNumber, setSortNumber] = useState(5);
const [customCardWidth, setCustomCardWidth] = useState("customcard20");
const [sampleProject, setSampleProjects] = useState([]);
const [favProject, setFavProjects] = useState([]);
const [teamProjects, setTeamProjects] = useState([]);
const [activeTab, setActiveTab] = useState("My Projects");
const [showSampleSort, setShowSampleSort] = useState(true);
const [activePage, setActivePage] = useState(1);
const [meta, setMeta] = useState(1);
const [tabToggle, setTabToggle] = useState([]);
const [type, setType] = useState([]);
const [searchTeamQuery, SetSearchTeamQuery] = useState("");
const [createProject, setCreateProject] = useState(false);
const [noProjectAlert, setNoProjectAlert] = useState(false);
const samplerRef = useRef();
const {
ui,
showPreview,
showDeletePopup,
loadMyReorderProjectsActionMethod,
// allSidebarProjectsUpdate,
sampleProjectsData,
loadMyFavProjectsActionData,
location,
loadMyProjects,
loadLms,
getTeamProjects,
} = props;
const allState = useSelector((state) => state);
const { organization } = allState;
const { permission } = organization;
useEffect(() => {
const query = QueryString.parse(location.search);
if (query.active === "fav") {
setActiveTab("Favorite Projects");
} else {
setActiveTab("My Projects");
}
}, []);
useEffect(() => {
const sw = window.innerWidth;
if (sw < 1200) {
setSortNumber(3);
setCustomCardWidth("customcard30");
} else if (sw < 1600) {
setSortNumber(4);
setCustomCardWidth("customcard50");
} else if (sw > 1600) {
setSortNumber(6);
setCustomCardWidth("customcard60");
}
}, [window.innerWidth]);
useMemo(() => {
if (!searchTeamQuery) {
if (organization?.currentOrganization) {
getTeamProjects("", activePage).then((data) => {
setTeamProjects(data.data);
setMeta(data.meta);
});
}
} else if (searchTeamQuery && organization?.currentOrganization) {
getTeamProjects(searchTeamQuery, activePage).then((data) => {
setTeamProjects(data.data);
setMeta(data.meta);
});
}
}, [getTeamProjects, organization?.currentOrganization, activePage]);
useEffect(() => {
if (!searchTeamQuery && organization?.currentOrganization) {
getTeamProjects("", activePage).then((data) => {
setTeamProjects(data.data);
setMeta(data.meta);
});
}
}, [searchTeamQuery]);
useEffect(() => {
if (organization?.currentOrganization) {
sampleProjectsData();
}
}, [sampleProjectsData, organization?.currentOrganization]);
useEffect(() => {
if (organization?.currentOrganization) {
loadMyFavProjectsActionData();
}
}, [loadMyFavProjectsActionData, organization?.currentOrganization]);
useEffect(() => {
// if (allState.sidebar.updateProject.length > 0) {
setFavProjects(allState.sidebar.updateProject);
// }
}, [allState.sidebar.updateProject]);
useEffect(() => {
if (allState.sidebar.sampleProject.length > 0) {
setSampleProjects(allState.sidebar.sampleProject);
}
}, [allState.sidebar.sampleProject]);
const handleSearchQueryTeams = () => {
getTeamProjects(searchTeamQuery || "", activePage).then((data) => {
setTeamProjects(data.data);
setMeta(data.meta);
});
};
const reorder = (list, startIndex, endIndex) => {
const result = Array.from(list);
const [removed] = result.splice(startIndex, 1);
result.splice(endIndex, 0, removed);
return result;
};
const move = (source, destination, droppableSource, droppableDestination) => {
const sourceClone = Array.from(source);
const destClone = Array.from(destination);
const [removed] = sourceClone.splice(droppableSource.index, 1);
destClone.splice(droppableDestination.index, 0, removed);
const result = {};
result[droppableSource.droppableId] = sourceClone;
result[droppableDestination.droppableId] = destClone;
return result;
};
let array6 = [];
const allChunk = [];
const divideProjects = (dividerProjects) => {
dividerProjects.forEach((data, counter) => {
if ((counter + 1) % sortNumber === 0) {
array6.push(data);
allChunk.push({
id: `project_chunk${counter}`,
collection: array6,
});
array6 = [];
} else if (allStateProject.projects.length === counter + 1) {
array6.push(data);
allChunk.push({
id: `project_chunk${counter}`,
collection: array6,
});
array6 = [];
} else {
array6.push(data);
}
});
setProjectDivider(allChunk);
};
const onDragEnd = async (result) => {
const { source, destination, draggableId } = result;
// dropped outside the list
if (!destination) {
return;
}
if (source.droppableId === destination.droppableId) {
projectDivider.forEach(async (data, index) => {
if (data.id === source.droppableId) {
const items = reorder(
data.collection,
source.index,
destination.index
);
projectDivider[index] = {
id: data.id,
collection: items,
};
setProjectDivider(projectDivider);
setValue((v) => v + 1);
await loadMyReorderProjectsActionMethod(draggableId, projectDivider);
}
});
} else {
let verticalSource = "";
let verticalDestination = "";
projectDivider.forEach((data) => {
if (data.id === source.droppableId) {
verticalSource = data.collection;
}
if (data.id === destination.droppableId) {
verticalDestination = data.collection;
}
});
const res = move(
verticalSource,
verticalDestination,
source,
destination
);
Object.keys(res).forEach((key) => {
projectDivider.forEach((data, index) => {
if (data.id === key) {
projectDivider[index] = {
id: data.id,
collection: res[key],
};
}
});
});
const updateProjectList = [];
projectDivider.forEach((data) =>
data.collection.forEach((arrays) => {
updateProjectList.push(arrays);
})
);
setProjectDivider(projectDivider);
divideProjects(updateProjectList);
await loadMyReorderProjectsActionMethod(draggableId, projectDivider);
}
};
useEffect(() => {
if (allStateProject.projects.length > 0) {
setNoProjectAlert(false);
toast.dismiss();
} else if (allProjects?.length === 0) {
setNoProjectAlert(true);
}
setAllProjects(allStateProject.projects);
divideProjects(allStateProject.projects);
// }
}, [allStateProject]);
// useEffect(() => {
// const { activeOrganization } = organization;
// if (activeOrganization) {
// allSidebarProjectsUpdate();
// }
// }, [organization.activeOrganization]);
useEffect(() => {
loadLms();
}, []);
useMemo(() => {
// scroll to top
window.scrollTo(0, 0);
document.body.classList.remove("mobile-responsive");
if (organization.activeOrganization && !allState.projects) {
toast.info("Loading Projects ...", {
className: "project-loading",
closeOnClick: false,
closeButton: false,
position: toast.POSITION.BOTTOM_RIGHT,
autoClose: 10000,
icon: ImgLoader,
});
if (organization?.currentOrganization) {
loadMyProjects();
}
}
}, [organization?.currentOrganization]);
useEffect(() => {
if (allProjects) {
divideProjects(allProjects);
}
}, [allProjects, sortNumber]);
const handleShow = () => {
setShow(true); //! state.show
};
const setProjectId = (projectId) => {
setSelectedProjectId(projectId);
};
const handleClose = () => {
setShow(false);
};
const handleDeleteProject = (projectId) => {
const { deleteProject } = props;
if (window.confirm("Are you Sure?")) {
deleteProject(projectId);
}
};
const handleShareProject = (projectId) => {
const { shareProject } = props;
shareProject(projectId);
};
// const handleTabChange = (key) => {
// if (key === 'Favorite Projects') {
// setTabToggle(true);
// } else if (key === 'Sample Projects') {
// setTabToggle(false);
// }
// };
const { showDeletePlaylistPopup } = ui;
return (
<>
<div className={`content-wrapper ${activeFilter}`}>
<div className={`inner-content ${customCardWidth}`}>
<div className="">
<Headline setCreateProject={setCreateProject} />
{permission?.Project?.includes("project:view") ? (
<Tabs
onSelect={(eventKey) => {
setShowSampleSort(true);
setTabToggle(eventKey);
if (eventKey === "Sample Projects") {
setType("sample");
} else if (eventKey === "Favorite Projects") {
setType("fav");
} else if (eventKey === "Team Projects") {
setType("team");
}
}}
className="main-tabs"
defaultActiveKey={activeTab}
id="uncontrolled-tab-example"
>
<Tab eventKey="My Projects" title="My Projects">
<div className="row">
<div className="col-md-12">
{!!projectDivider && projectDivider.length > 0 ? (
<>
<div className="project-list-all">
<DragDropContext onDragEnd={onDragEnd}>
{projectDivider.map((rowData) => (
<Droppable
key={rowData.id}
droppableId={rowData.id}
// direction="horizontal"
// type="row"
className="drag-class"
direction="horizontal"
>
{(provided) => (
<div
{...provided.droppableProps}
ref={provided.innerRef}
>
<div className="check-home" id={value}>
{/* <div id={value}> */}
{rowData.collection.map(
(proj, index) => {
const res = {
title: proj.name,
id: proj.id,
deleteType: "Project",
};
return (
<Draggable
key={proj.id}
draggableId={`${proj.id}`}
index={index}
>
{(provid) => (
<div
className="playlist-resource"
ref={provid.innerRef}
{...provid.draggableProps}
{...provid.dragHandleProps}
>
<ProjectCard
key={proj.id}
project={proj}
res={res}
handleDeleteProject={
handleDeleteProject
}
handleShareProject={
handleShareProject
}
showDeletePopup={
showDeletePopup
}
showPreview={
showPreview === proj.id
}
handleShow={handleShow}
handleClose={handleClose}
setProjectId={
setProjectId
}
activeFilter={
activeFilter
}
setCreateProject={
setCreateProject
}
/>
</div>
)}
</Draggable>
);
}
)}
</div>
{provided.placeholder}
</div>
)}
</Droppable>
))}
</DragDropContext>
</div>
</>
) : (
<Initialpage />
)}
</div>
</div>
</Tab>
{permission?.Project?.includes("project:favorite") && (
<Tab eventKey="Favorite Projects" title="Favorite Projects">
<div className="row">
<div className="col-md-12" style={{ display: "none" }}>
<div className="program-page-title">
<h1>Favorite Projects</h1>
{showSampleSort && favProject.length === 0 && (
<div className="project-page-settings">
<div className="sort-project-btns">
<div
className={
activeFilter === "list-grid"
? "sort-btn active"
: "sort-btn"
}
onClick={() => {
// const allchunk = [];
// var counterSimpl = 0;
setActiveFilter("list-grid");
setSortNumber(-1);
divideProjects(allProjects);
}}
>
<FontAwesomeIcon icon="bars" />
</div>
<div
className={
activeFilter === "small-grid"
? "sort-btn active"
: "sort-btn"
}
onClick={() => {
setActiveFilter("small-grid");
setSortNumber(5);
divideProjects(allProjects);
}}
>
<FontAwesomeIcon icon="grip-horizontal" />
</div>
<div
className={
activeFilter === "normal-grid"
? "sort-btn active"
: "sort-btn"
}
onClick={() => {
setActiveFilter("normal-grid");
setSortNumber(4);
divideProjects(allProjects);
}}
>
<FontAwesomeIcon icon="th-large" />
</div>
</div>
</div>
)}
</div>
</div>
<div className="col-md-12">
<div className="flex-smaple">
{favProject.length > 0 ? (
<SampleProjectCard
projects={favProject}
type={type}
activeTab={tabToggle}
setType={setType}
setTabToggle={setTabToggle}
setShowSampleSort={setShowSampleSort}
/>
) : (
<Alert variant="warning">
No Favorite Project found.
</Alert>
)}
</div>
</div>
</div>
</Tab>
)}
<Tab
eventKey="Sample Projects"
ref={samplerRef}
title="Sample Projects"
>
<div className="row">
<div className="col-md-12" style={{ display: "none" }}>
<div className="program-page-title">
<h1>Sample Projects</h1>
{showSampleSort && sampleProject.length === 0 && (
<div className="project-page-settings">
<div className="sort-project-btns">
<div
className={
activeFilter === "list-grid"
? "sort-btn active"
: "sort-btn"
}
onClick={() => {
// const allchunk = [];
// let counterSimpl = 0;
setActiveFilter("list-grid");
setSortNumber(-1);
divideProjects(allProjects);
}}
>
<FontAwesomeIcon icon="bars" />
</div>
<div
className={
activeFilter === "small-grid"
? "sort-btn active"
: "sort-btn"
}
onClick={() => {
setActiveFilter("small-grid");
setSortNumber(5);
divideProjects(allProjects);
}}
>
<FontAwesomeIcon icon="grip-horizontal" />
</div>
<div
className={
activeFilter === "normal-grid"
? "sort-btn active"
: "sort-btn"
}
onClick={() => {
setActiveFilter("normal-grid");
setSortNumber(4);
divideProjects(allProjects);
}}
>
<FontAwesomeIcon icon="th-large" />
</div>
</div>
</div>
)}
</div>
</div>
<div className="col-md-12">
<div className="flex-smaple">
{sampleProject.length > 0 ? (
<SampleProjectCard
projects={sampleProject}
activeTab={tabToggle}
setType={setType}
setTabToggle={setTabToggle}
type={type}
setShowSampleSort={setShowSampleSort}
/>
) : (
<Alert variant="warning">
{" "}
No sample project found.
</Alert>
)}
</div>
</div>
</div>
</Tab>
<Tab eventKey="Team Projects" title="Team Projects">
<div className="row">
<div className="col-md-12" style={{ display: "none" }}>
<div className="program-page-title">
<h1>Team Projects</h1>
</div>
</div>
<div className="col-md-12">
{showSampleSort && (
<div className="search-bar-team-tab">
<input
type="text"
placeholder="Search team projects"
value={searchTeamQuery}
onChange={({ target }) =>
SetSearchTeamQuery(target.value)
}
/>
<img
src={searchimg}
alt="search"
onClick={handleSearchQueryTeams}
/>
</div>
)}
<div className="flex-smaple">
{teamProjects.length > 0 ? (
<SampleProjectCard
projects={teamProjects}
type={type}
setType={setType}
setTabToggle={setTabToggle}
activeTab={tabToggle}
setShowSampleSort={setShowSampleSort}
handleShow={handleShow}
handleClose={handleClose}
setProjectId={setProjectId}
/>
) : (
<Alert variant="warning">
No Team Project found.
</Alert>
)}
</div>
</div>
</div>
<div className="pagination-top-team">
<div className="pagination_state">
{showSampleSort && teamProjects.length > 0 && (
<Pagination
activePage={activePage}
pageRangeDisplayed={5}
itemsCountPerPage={Number(meta?.per_page)}
totalItemsCount={Number(meta?.total)}
onChange={(e) => {
// setCurrentTab("index");
window.scrollTo(0, 0);
setActivePage(e);
}}
/>
)}
</div>
</div>
</Tab>
</Tabs>
) : (
<Alert variant="danger">
{" "}
You are not authorized to view Projects
</Alert>
)}
</div>
</div>
</div>
{createProject && (
<NewProjectPage
project={props?.project}
handleCloseProjectModal={setCreateProject}
/>
)}
{showDeletePlaylistPopup && (
<DeletePopup {...props} deleteType="Project" />
)}
<GoogleModel
projectId={selectedProjectId}
show={show} // {props.show}
onHide={handleClose}
/>
</>
);
}
