react-bootstrap#Accordion JavaScript Examples

The following examples show how to use react-bootstrap#Accordion. 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: Description.jsx    From cosmoscan-front with Apache License 2.0 6 votes vote down vote up
AccordionToggle = styled(Accordion.Toggle)`
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s;
  display: flex;
  justify-content: space-between;
  
  ${({ theme: { blue4 } }) => css`
    &:hover {
      background-color: ${blue4};
      border-color: ${blue4};
    }
  `}
`
Example #2
Source File: Description.jsx    From cosmoscan-front with Apache License 2.0 6 votes vote down vote up
Description = ({ title, desc, className }) => {
  const [currEventKey, setCurrEventKey] = useState(null);


  return (
    <Accordion className={className} onSelect={setCurrEventKey}>
      <Card>
        <Card.Header as={AccordionToggle} eventKey="0">
          <TitleChart>
            { title }
          </TitleChart>
          <FontAwesomeIcon
            icon={currEventKey === '0' ? 'chevron-up' : 'chevron-down'}
          />
        </Card.Header>
        <Accordion.Collapse eventKey="0">
          <Card.Body>
            <div
              dangerouslySetInnerHTML={{ __html: parseParagraphs(linkify(desc)) }}
              className="w-75"
            />
          </Card.Body>
        </Accordion.Collapse>
      </Card>
    </Accordion>
  );
}
Example #3
Source File: accordian-item.js    From stacker.news with MIT License 6 votes vote down vote up
export default function AccordianItem ({ header, body, headerColor = 'var(--theme-grey)', show }) {
  const [open, setOpen] = useState(show)

  useEffect(() => {
    setOpen(show)
  }, [])

  return (
    <Accordion
      defaultActiveKey={show ? '0' : undefined}
    >
      <Accordion.Toggle
        as={props => <div {...props} />}
        eventKey='0'
        style={{ cursor: 'pointer', display: 'flex', alignItems: 'center' }}
        onClick={() => setOpen(!open)}
      >
        {open
          ? <ArrowDown style={{ fill: headerColor }} height={20} width={20} />
          : <ArrowRight style={{ fill: headerColor }} height={20} width={20} />}
        <div style={{ color: headerColor }}>{header}</div>
      </Accordion.Toggle>
      <Accordion.Collapse eventKey='0' className='mt-2'>
        <div>{body}</div>
      </Accordion.Collapse>
    </Accordion>
  )
}
Example #4
Source File: Subsystems.js    From Website2020 with MIT License 5 votes vote down vote up
function Posts() {
    return (
        <Router>
            <div className="section team-data landing-section">
                <Container>
                    <Row className="d-flex justify-content-center">
                        <Col className="ml-auto mr-auto" md="12">
                            <h2 className="text-center heading-main">Subsystems</h2>
                        </Col>
                    </Row>
                    <Accordion defaultActiveKey="0">
                        <div className="accordian-section">
                            <Accordion.Toggle as={Card.Header} eventKey="0" className="accordian-toggle text-center">
                                MECHANICAL <i class="fa fa-cogs fa-lg"></i>
                            </Accordion.Toggle>
                            <Accordion.Collapse eventKey="0">
                                <div>
                                    <Mechanical />
                                </div>
                            </Accordion.Collapse>
                        </div>
                        <div className="accordian-section">
                            <Accordion.Toggle as={Card.Header} eventKey="1" className="accordian-toggle text-center">
                                ELECTRICAL <img src={electronics} style={{ width: "25px", height: "25px" }} />
                            </Accordion.Toggle>
                            <Accordion.Collapse eventKey="1">
                                <div>
                                    <Electrical />
                                </div>
                            </Accordion.Collapse>
                        </div>
                        <div className="accordian-section">
                            <Accordion.Toggle as={Card.Header} eventKey="2" className="accordian-toggle text-center my-auto">
                                SOFTWARE <i class="fa fa-code fa-lg" />
                            </Accordion.Toggle>
                            <Accordion.Collapse eventKey="2">
                                <div>
                                    <Software />
                                </div>
                            </Accordion.Collapse>
                        </div>
                        <div className="accordian-section">
                            <Accordion.Toggle as={Card.Header} eventKey="3" className="accordian-toggle text-center">
                                BUSINESS <i class="fa fa-briefcase fa-lg"></i>
                            </Accordion.Toggle>
                            <Accordion.Collapse eventKey="3">
                                <div>
                                    <Business />
                                </div>
                            </Accordion.Collapse>
                        </div>
                    </Accordion>
                </Container>
            </div>
        </Router>
    );


}
Example #5
Source File: FooterAccordion.js    From flotiq-blog with MIT License 5 votes vote down vote up
FooterAccordion = ({ data }) => (
    <Accordion>
        <Card>
            <Card.Header>
                <ContextAwareToggle eventKey="0">
                    {data.footer_1_column_header}
                </ContextAwareToggle>
            </Card.Header>
            <Accordion.Collapse eventKey="0">
                <Card.Body>
                    <ul className="main-footer-list">
                        {data.footer_1_column.map((item) => (
                            <li key={item.text}>
                                <a target="_blank" href={item.url} rel="noreferrer">{item.text}</a>
                            </li>
                        ))}
                    </ul>
                </Card.Body>
            </Accordion.Collapse>
        </Card>
        <Card>
            <Card.Header>
                <ContextAwareToggle eventKey="1">
                    {data.footer_2_column_header}
                </ContextAwareToggle>
            </Card.Header>
            <Accordion.Collapse eventKey="1">
                <Card.Body>
                    <ul className="main-footer-list">
                        {data.footer_2_column.map((item) => (
                            <li key={item.text}>
                                <a target="_blank" href={item.url} rel="noreferrer">{item.text}</a>
                            </li>
                        ))}
                    </ul>
                </Card.Body>
            </Accordion.Collapse>
        </Card>
        <Card>
            <Card.Header>
                <ContextAwareToggle eventKey="2">
                    {data.footer_3_column_header}
                </ContextAwareToggle>
            </Card.Header>
            <Accordion.Collapse eventKey="2">
                <Card.Body>
                    <ul className="main-footer-list">
                        {data.footer_3_column.map((item) => (
                            <li key={item.text}>
                                <a target="_blank" href={item.url} rel="noreferrer">{item.text}</a>
                            </li>
                        ))}
                    </ul>
                </Card.Body>
            </Accordion.Collapse>
        </Card>
        <Card>
            <Card.Header>
                <ContextAwareToggle eventKey="3">Subscribe</ContextAwareToggle>
            </Card.Header>
            <Accordion.Collapse eventKey="3">
                <Card.Body>
                    <ul className="main-footer-list">
                        <SubscriptionForm />
                    </ul>
                </Card.Body>
            </Accordion.Collapse>
        </Card>
    </Accordion>
)
Example #6
Source File: ListCard.jsx    From caricovidsite with MIT License 5 votes vote down vote up
render() {
    return (
      <div>
        {this.state.hideHighestActiveBox ? null : (
          <div className="statsCard">
            <Accordion>
              <Card type="rounded-0" style={cardStyle}>
                <Card.Body
                  className="div-only-mobile-cards"
                  style={cardBodyStyle}
                >
                  <Card.Text style={cardTextStyle}>
                    <div
                      style={dismissMessageStyle}
                      onClick={this.onClickHideHighest}
                    >
                      x
                    </div>
                    <AccordionToggle eventKey="1" style={cardTextStyle}>
                      {this.props.title}
                    </AccordionToggle>
                    <Accordion.Collapse eventKey="1">
                      <div style={dataStyle}>
                        {this.props.cases?.map((caseEntry) => (
                          <div>
                            <b>
                              {new Intl.NumberFormat().format(
                                caseEntry[this.props.param]
                              )}
                            </b>{" "}
                            {fetchCountryCode(caseEntry.country) &&
                              emojiFlags.countryCode(
                                fetchCountryCode(caseEntry.country)
                              ).emoji}
                            {caseEntry.country}
                          </div>
                        ))}
                      </div>
                    </Accordion.Collapse>
                  </Card.Text>
                </Card.Body>
              </Card>
            </Accordion>
          </div>
        )}
      </div>
    );
  }
Example #7
Source File: SubsystemSpecs.js    From Website2020 with MIT License 4 votes vote down vote up
function Posts() {
    // console.log(specs);
    return (
        <>
            {
                <div className="section landing-section">
                    <Container>
                        <div className="title-block">
                            <Row className="justify-content-center heading-components">
                                <div style={{ textAlign: 'center' }}>
                                    <b style={{ fontSize: "4rem" }}>COMPONENTS</b>
                                </div>
                            </Row>
                        </div>
                        <Row className="subsystem-headings">
                            <h3>Mechanical</h3>
                        </Row>
                        <FadeIn>
                            <div className="spec-container">
                                <Row>
                                    {/* <Col lg="5" className="text-center my-auto imgCol">
                                <img src={mech_main} alt="spec-img" className="w-100"></img>
                                <p className="small-heading-edited">
                                    ANAHITA VEHICLE : STRUCTURE
                                </p>
                            </Col> */}
                                    <Col lg="1"></Col>
                                    <Col lg="10" className="featureCol my-auto">
                                        The mechanical subsystem is responsible for design and manufacture of the vehicle. Anahita’s mechanical system consists of the vehicle’s frame, grabber, marker dropper, torpedo, connectors and penetrators. The mechanical design of Anahita is made more modular, easy to assemble and robust as compared to its predecessor Varun. Furthermore, the addition of interchangeable components and task specific parts increases the vehicle's modularity significantly.
                                        <div style={{ marginBottom: '20px' }}></div>
                                            {
                                                specs.mechanical.map(
                                                    (data) => (
                                                    <Accordion defaultActiveKey="">
                                                        <Card className="card-plain spec-card">
                                                            <Accordion.Toggle className="accord-head" as={Card.Header} eventKey={String(data.id)}>
                                                                <svg className="add-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6 13h-5v5h-2v-5h-5v-2h5v-5h2v5h5v2z" /></svg>
                                                                {data.title}
                                                            </Accordion.Toggle>
                                                            <>
                                                                <Accordion.Collapse eventKey={String(data.id)}>
                                                                    <Card.Body>
                                                                        <div>
                                                                            {data.content}
                                                                        </div>
                                                                        <div style={{ display: 'grid', placeItems: 'center' }}>
                                                                            {data.img && <img className="w-75 accord-img" alt="spec-img" src={require("assets/img/anahita/" + data.img)} />}
                                                                            <div className="card-image-description" style={{ fontFamily: 'monospace', textAlign: 'center' }} >
                                                                                {data.imgDesc}
                                                                            </div>
                                                                        </div>
                                                                    </Card.Body>
                                                                </Accordion.Collapse>
                                                            </>
                                                        </Card>
                                                    </Accordion>
                                                    )
                                                )
                                            }
                                    </Col>
                                    <Col lg="1"></Col>
                                </Row>
                            </div>
                        </FadeIn>
                        <Row className="subsystem-headings">
                            <h3>Electrical</h3>
                        </Row>
                        <FadeIn>
                            <div className="spec-container">
                                <Row>
                                    <Col lg="1"></Col>
                                    <Col lg="10" className="my-auto featureCol">
                                        The Electrical System in Anahita acts as an interface between the mechanical structure and software logic. It is designed for providing power, driving actuators and interfacing with various sensors installed in the robot. Major improvements over Varun's electrical system are the custom made PCBs designed to suit the specific needs of Anahita.

                                        <div style={{ marginBottom: '20px' }}></div>
                                            {
                                                specs.electrical.map(
                                                    (data) => (
                                                    <Accordion defaultActiveKey="">
                                                        <Card className="card-plain spec-card">
                                                            <Accordion.Toggle className="accord-head" as={Card.Header} eventKey={String(data.id)}>
                                                                <svg className="add-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6 13h-5v5h-2v-5h-5v-2h5v-5h2v5h5v2z" /></svg>

                                                                {data.title}
                                                            </Accordion.Toggle>
                                                            <Accordion.Collapse eventKey={String(data.id)}>
                                                                <Card.Body>
                                                                    <div>
                                                                        {data.content}
                                                                    </div>
                                                                    <div style={{ display: 'grid', placeItems: 'center' }}>
                                                                        {data.img && <img className="w-75 accord-img" alt="spec-img" src={require("assets/img/anahita/" + data.img)} />}
                                                                        <div className="card-image-description" style={{ fontFamily: 'monospace', textAlign: 'center' }} >
                                                                            {data.imgDesc}
                                                                        </div>
                                                                    </div>
                                                                </Card.Body>
                                                            </Accordion.Collapse>
                                                        </Card>
                                                    </Accordion>
                                                    )
                                                )
                                            }
                                    </Col>
                                    <Col lg="1"></Col>
                                    {/* <Col md="5" className="text-center my-auto imgCol">
                                <img src={powerimg} alt="spec-img" className="w-100"></img>
                                <p className="small-heading-edited">
                                    ELECTRICAL ARCHITECTURE
                                </p>
                            </Col> */}
                                </Row>
                            </div>
                        </FadeIn>
                        <Row className="subsystem-headings">
                            <h3>Software</h3>
                        </Row>
                        <FadeIn>
                            <div className="spec-container">
                                <Row>
                                    {/* <Col md="5" className="text-center my-auto imgCol">
                                <img src={soft} alt="spec-img" className="w-100"></img>
                                <p className="small-heading-edited">
                                    SOFTWARE DATA & CONTROL FLOW
                                </p>
                            </Col> */}
                                    <Col lg="1"></Col>
                                    <Col lg="10" className="my-auto featureCol">
                                        The software stack of Anahita consists of dedicated layers for the hardware integration, controls and navigation, motion planning, perception and acoustic localization. It is built over the Robot Operating System (ROS) framework by Willow Garage, which acts as a communication middleware between all processes running on our robot.

                                        <div style={{ marginBottom: '20px' }}></div>
                                        <Accordion defaultActiveKey="">
                                            <Card className="card-plain spec-card">
                                                <Accordion.Toggle className="accord-head" as={Card.Header} eventKey='100'>
                                                    <svg className="add-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6 13h-5v5h-2v-5h-5v-2h5v-5h2v5h5v2z" /></svg>

                                                    Architecture
                                                </Accordion.Toggle>
                                                <Accordion.Collapse eventKey='100' >
                                                    <Card.Body>
                                                        <div>
                                                            In order to make the code modular, it is divided into five layers:
                                                            <ol>
                                                                <li><b>Master Layer:</b> The master layer is responsible for initiating each process. It instructs the task handler layer to execute node sequence in which the task has to be performed.</li>
                                                                <li><b>Task Handler Layer:</b> This layer has task-specific code written for each task and uses a motion library to achieve the target.</li>
                                                                <li><b>Motion Library:</b> This layer assists the task handler layer to achieve a goal. It consists of six PID control loops for six degrees of freedom.</li>
                                                                <li><b>Vision Layer: </b>The vision layer is responsible for providing the information about the mission elements present in the arena. It detects the targets from the raw image of the camera and provides the coordinates of the vehicle to the task handler layer.</li>
                                                                <li><b>Hardware Layer:</b> This layer is responsible for integrating sensors with the software stack. It collects all the information from the sensors and advertises it over topics from where any node that needs it might want to take it. The design specifications are such that it is independent and extendable. As a result, the software can scale concerning the tasks or missions to accomplish.</li>
                                                            </ol>
                                                        </div>
                                                        <div style={{ display: 'grid', placeItems: 'center' }}>
                                                            <img className="w-75 accord-img" alt="spec-img" src={require("assets/img/anahita/AnahitaSoft.jpg")} />
                                                            <div className="card-image-description" style={{ fontFamily: 'monospace', textAlign: 'center' }} >
                                                                SOFTWARE DATA & CONTROL FLOW
                                                            </div>
                                                        </div>
                                                    </Card.Body>
                                                </Accordion.Collapse>
                                            </Card>
                                            </Accordion>
                                            {
                                                specs.software.map(
                                                    (data) => (
                                                        <Accordion>
                                                        <Card className="card-plain spec-card">
                                                            <Accordion.Toggle className="accord-head" as={Card.Header} eventKey={String(data.id)}>
                                                                <svg className="add-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6 13h-5v5h-2v-5h-5v-2h5v-5h2v5h5v2z" /></svg>

                                                                {data.title}
                                                            </Accordion.Toggle>
                                                            <Accordion.Collapse eventKey={String(data.id)}>
                                                                <Card.Body>
                                                                    <div>
                                                                        {data.content}
                                                                    </div>
                                                                    <div style={{ display: 'grid', placeItems: 'center' }}>
                                                                        {data.img && <img className="w-75 accord-img" alt="spec-img" src={require("assets/img/anahita/" + data.img)} />}
                                                                        <div className="card-image-description" style={{ fontFamily: 'monospace', textAlign: 'center' }} >
                                                                            {data.imgDesc}
                                                                        </div>
                                                                    </div>
                                                                </Card.Body>
                                                            </Accordion.Collapse>
                                                        </Card>
                                                    </Accordion>
                                                    )
                                                )
                                            }
                                    </Col>
                                    <Col lg="1"></Col>
                                </Row>
                            </div>
                        </FadeIn>
                    </Container>
                </div>
            }
        </>
    );
}
Example #8
Source File: SubsystemSpecs.js    From Website2020 with MIT License 4 votes vote down vote up
function Posts() {
    // console.log(specs);
    return (
        <>
        {
            <div className="section landing-section">
                <Container>
                    <div className="title-block">
                            <Row className="justify-content-center heading-components">
                                <div style={{ textAlign: 'center' }}>
                                    <b style={{ fontSize: "4rem" }}>COMPONENTS</b>
                                </div>
                            </Row>
                        </div>
                    <Row className="subsystem-headings">
                        <h3>Mechanical</h3>
                    </Row>
                    <FadeIn>
                    <div className="spec-container">
                        <Row>
                            <Col lg="1"></Col>
                            <Col lg="10" className="featureCol my-auto">
                                Although the design of our previous AUV: Anahita, was acknowledged worldwide, it still had a few flaws. The design involved multiple hulls, leading to high susceptibility to leakages, often damaging the electronic components during pool testing. In addition, multiple hulls and casings limited the accessibility of the internal components, and the positioning of hulls produced relatively high hydrodynamic drag during motion. Finally, the heat dissipation was poor as acrylic is an inferior conductor of heat, resulting in performance degradation and often rendering electronic components inoperable. We tried improving these aspects while designing our new bot.
                                <div style={{ marginBottom: '20px' }}></div>
                                {
                                    specs.mechanical.map(
                                        (data) => (
                                            <Accordion defaultActiveKey="">
                                            <Card className="card-plain spec-card">
                                                <Accordion.Toggle className="accord-head" as={Card.Header} eventKey={String(data.id)}>
                                                <svg className="add-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6 13h-5v5h-2v-5h-5v-2h5v-5h2v5h5v2z"/></svg>
                                                {data.title}
                                                </Accordion.Toggle>
                                                <Accordion.Collapse eventKey={String(data.id)}>
                                                <Card.Body>
                                                    <div>
                                                        {data.content}
                                                    </div>
                                                    
                                                    <div style={{ display: 'grid', placeItems: 'center' }}>
                                                        
                                                        {data.img && <img className={(data.img === 'md working2.PNG') ? 'w-50' : 'w-75'+' accord-img' } alt="spec-img" src={require("assets/img/tarang/" + data.img)} />}
                                                        <div className="card-image-description" style={{ fontFamily: 'monospace', textAlign: 'center' }} >
                                                            {data.imgDesc}
                                                        </div>
                                                    </div>
                                                </Card.Body>
                                                </Accordion.Collapse>
                                            </Card>
                                        </Accordion>
                                        )
                                    )
                                }
                            </Col>
                            <Col lg="1"></Col>
                        </Row>
                     </div>
                     </FadeIn>
                    <Row className="subsystem-headings">
                        <h3>Electrical</h3>
                    </Row>
                    <FadeIn>
                    <div className="spec-container">
                        <Row>
                            <Col lg="1"></Col>
                            <Col lg="10" className="my-auto featureCol">
                                Tarang's Electrical system includes power sources, sensors, actuators and all the computational resources required for autonomous underwater tasks. We have designed our own PCBs for multiple purposes. This year, we have designed a dedicated power board for power monitoring and distribution to all components. The power system includes a custom buck and boost converter designed to our specifications and requirements with the flexibility of placement and connections. We have also built a custom micro-controller board for Tarang instead of using Arduino boards with shields, saving us a lot of PCB space and cost. The previous micro-controller board (a shield to Arduino Mega) was huge due to unnecessary GPIO pins unused by the Arduino. We use 2 ESC boards with 4 ESCs on each board, of which one ESC on each board is a backup in case of failure. There are 2 layers of stacks inside the hull, which will be used for mounting different electronic devices.
                                <div style={{ marginBottom: '20px' }}></div>
                                <Accordion defaultActiveKey="">
                                <Card className="card-plain spec-card">
                                    <Accordion.Toggle className="accord-head" as={Card.Header} eventKey={42}>
                                    <svg className="add-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6 13h-5v5h-2v-5h-5v-2h5v-5h2v5h5v2z"/></svg>

                                    Power Distribution
                                    </Accordion.Toggle>
                                    <Accordion.Collapse eventKey={42}>
                                        <Card.Body>
                                            <div>
                                                We use two 14.8V 18A-h batteries to power the complete system. One battery is wholly dedicated to the thrusters, which have a high power consumption and cameras with low power consumption, ensuring supply voltage is within the battery voltage range. The other battery powers all the rest of the electronics by generating 12V and 19V with high-efficiency buck and boost converters, respectively.The microcontroller on the powerboard features a display and multiple LED indicators for battery monitoring and threat alarming.
                                            </div>
                                            <br />

                                            <div><b>Custom made Boost Converter</b></div>
                                            <div>The custom boost converter powers the onboard computer, which operates at 19V. As the power rating for the computer is high (54W), the boost converter had to be very efficient as the computer will be powered on for the complete duration of the mission. 
                                                <div style={{ display: 'grid', placeItems: 'center' }}>
                                                <img className="w-50 accord-img" alt="spec-img" src={require("assets/img/tarang/boost_render.png")}/>
                                                <div className="card-image-description" style={{ fontFamily: 'monospace', textAlign: 'center' }} >
                                                    Boost Converter
                                                </div>
                                                </div>
                                            </div>
                                            <br />

                                            <div><b>Custom made Buck Converter</b></div>
                                            <div>Most of the low power electronics are powered through the custom-designed buck converter, which outputs 12V. We ensured high efficiency for the buck to minimize the power losses. The power will be controlled through the buck converter using micro-controller GPIO. It will enable us to completely turn it off and save power.
                                                <div style={{ display: 'grid', placeItems: 'center' }}>
                                                <img className="w-50 accord-img" alt="spec-img" src={require("assets/img/tarang/buck_render.png")}/>
                                                <div className="card-image-description" style={{ fontFamily: 'monospace', textAlign: 'center' }} >
                                                    Buck Converter
                                                </div>
                                                </div>
                                            </div>
                                            <br />

                                            <div><b>5V power supply for servo</b></div>
                                            <div>The 5V power supply required for driving the servos is created through a regulator with the 12V input from the buck. The power losses of the regulator are insignificant as the regulator will be turned on only for the duration of servo usage. This saves us a lot of space and cost that can be expended in the making/using of another buck converter.We used the RP2040 micro-controller module on the Power board to build a robust and small solution while getting sufficient GPIOs for sensors and other peripherals.</div>
                                            
                                            <div style={{ display: 'grid', placeItems: 'center' }}>
                                                <img className="w-100 accord-img" alt="spec-img" src={require("assets/img/tarang/electrical_architecture.jpg")}/>
                                                <div className="card-image-description" style={{ fontFamily: 'monospace', textAlign: 'center' }} >
                                                    Tarang's Electrical Architecture
                                                </div>
                                            </div>
                                        </Card.Body>
                                    </Accordion.Collapse>
                                </Card>
                                </Accordion>
                                {
                                    specs.electrical.map(
                                        (data) => (
                                            <Accordion>
                                            <Card className="card-plain spec-card">
                                                <Accordion.Toggle className="accord-head" as={Card.Header} eventKey={String(data.id)}>
                                                <svg className="add-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6 13h-5v5h-2v-5h-5v-2h5v-5h2v5h5v2z"/></svg>

                                                {data.title}
                                                </Accordion.Toggle>
                                                <Accordion.Collapse eventKey={String(data.id)}>
                                                <Card.Body>
                                                    <div>
                                                        {data.content}
                                                    </div>
                                                    
                                                    <div style={{ display: 'grid', placeItems: 'center' }}>
                                                        {data.img && <img className="w-75 accord-img" alt="spec-img" src={require("assets/img/tarang/" + data.img)} />}
                                                        <div className="card-image-description" style={{ fontFamily: 'monospace', textAlign: 'center' }} >
                                                            {data.imgDesc}
                                                        </div>
                                                    </div>
                                                </Card.Body>
                                                </Accordion.Collapse>
                                            </Card>
                                            </Accordion>
                                        )
                                    )
                                }
                                {/* </Accordion> */}
                            </Col>
                            <Col lg="1"></Col>
                        </Row>
                     </div>
                     </FadeIn>
                    <Row className="subsystem-headings">
                        <h3>Software</h3>
                    </Row>
                    <FadeIn>
                    <div className="spec-container">
                        <Row>
                            <Col lg="1"></Col>
                            <Col lg="10" className="my-auto featureCol">
                                We have improved the software architecture to make the code modular making it easier to test, debug and integrate. In addition, we have made significant advancements in Simultaneous Localization and Mapping strategy (SLAM), tuning of the controller and vision algorithms. The software stack uses the Robot Operating System (ROS noetic) framework by Willow Garage, which works on Ubuntu 20.04 OS that acts as communication middleware between all the processes running on the robot. We have migrated our code from python 2 (which has been deprecated) to python 3. In addition to it, we have also updated the code for our previous vehicles to use the latest versions of the third-party libraries like OpenCV, YOLO and other ROS packages.
                                <div style={{ marginBottom: '20px' }}></div>
                                <Accordion defaultActiveKey="">
                                <Card className="card-plain spec-card">
                                    <Accordion.Toggle className="accord-head" as={Card.Header} eventKey={42}>
                                    <svg className="add-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6 13h-5v5h-2v-5h-5v-2h5v-5h2v5h5v2z"/></svg>

                                    Software Architecture
                                    </Accordion.Toggle>
                                    <Accordion.Collapse eventKey={42}>
                                        <Card.Body>
                                            <div>
                                                The software stack of Tarang consists of dedicated layers for hardware integration, controls, navigation, motion planning and acoustic localization. The software stack consists of the following layers:
                                                <ol>
                                                    <li>
                                                        <b>Master Layer:</b>  It controls and coordinates the actions of all other layers to perform the tasks autonomously. All the decision making and strategy gets coded in the master layer, which commands the nodes in the other layers to perform different functions. The master layer contains the task-specific code. The signals and instructions for completing all the tasks originate from the master layer.
                                                    </li>
                                                    <li>
                                                        <b>Control Layer:</b> It contains the implementation of the cascaded PID controller the bot uses. The control layer calculates the thrust for each of the thrusters to manoeuvre the bot as desired. It also generates the trajectory and waypoints to perform the wanted task.
                                                    </li>
                                                    <li>
                                                        <b>Navigation Layer:</b> It contains the code for the Simultaneous Localization and Mapping (SLAM) algorithm. It performs sensor fusion, estimates the bot's current position in the world, and generates the world's map based upon the filtered sensor information.
                                                    </li>
                                                    <li>
                                                        <b>Vision Layer:</b>  It contains the code for all the image processing and vision-related tasks. The vision layer receives the feed directly from the cameras, performs computation on the received data for preprocessing, object detection or visual odometry and sends the processed output to other nodes which require it.
                                                    </li>
                                                    <li>
                                                        <b>Hardware Layer:</b> It is responsible for integrating sensors with the software stack. It collects the sensors-specific plugins and utilities to receive information from the sensors and publishes it on topics for the other nodes to use.
                                                    </li>
                                                </ol>
                                            </div>
                                            <br />
                                            <div>
                                                Advantages of such a software architecture are:
                                                <ol>
                                                    <li>It makes the development easier as different layers can be developed independently and tested asynchronously.</li>
                                                    <li>It enables easy debugging and troubleshooting.</li>
                                                    <li>It ensures that the code is scalable and maintainable and provides a straightforward way to integrate external libraries and expand the codebase.</li>
                                                </ol>
                                            </div>
                                            <div style={{ display: 'grid', placeItems: 'center' }}>
                                                {<img className="w-100 accord-img" alt="spec-img" src={require("assets/img/tarang/Software_Architecture.png")} />}
                                                <div className="card-image-description" style={{ fontFamily: 'monospace', textAlign: 'center' }} >
                                                    Tarang's Software Architecture
                                                </div>
                                            </div>
                                        </Card.Body>
                                    </Accordion.Collapse>
                                </Card>
                                </Accordion>
                                <Accordion>
                                <Card className="card-plain spec-card">
                                    <Accordion.Toggle className="accord-head" as={Card.Header} eventKey={43}>
                                    <svg className="add-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6 13h-5v5h-2v-5h-5v-2h5v-5h2v5h5v2z"/></svg>

                                    Image-Preprocessing
                                    </Accordion.Toggle>
                                    <Accordion.Collapse eventKey={43}>
                                        <Card.Body>
                                            <div><b>Undistortion</b></div>
                                            <div>We preprocess the video feed by applying multiple filters before extracting any information from it. Since the images are used to estimate the location of various objects and the vehicle itself, the lengths represented in the images must be true. The camera distorts the features in the image changing their shape and length, so images are undistorted in the preprocessing pipeline. To undistort images, we need to have distortion coefficients of the camera. To obtain these, we need to calibrate the camera using images of known size and shape images. In our case, a checkerboard pattern distortion known beforehand was used to calculate these coefficients. </div>
                                            <br />

                                            <div><b>Relative Global Histogram Stretching</b></div>
                                            <div>The Relative Global Histogram Stretching method aims to improve image quality by applying contrast correction and colour correction to the camera output. </div>
                                            <br />

                                            <div><b>Contrast Correction</b></div>
                                            <div>The contrast correction pipeline applies colour equalization on the image's green-blue(G-B) channels, followed by relative global histogram stretching.</div>
                                            <br />

                                            <div><b>Bilateral Filter</b></div>
                                            <div>A bilateral filter reduces the noise by using a non-linear smoothing filter to the image. The contrast-corrected image is then passed to the colour correction phase, which converts the image to CIE-Lab colour space and stretches L, a and b components followed by CIE-Lab to RGB conversion</div>
                                            
                                            <div style={{ display: 'grid', placeItems: 'center' }}>
                                                {<img className="w-75 accord-img" alt="spec-img" src={require("assets/img/tarang/processing_combined.png")} />}
                                                <div className="card-image-description" style={{ fontFamily: 'monospace', textAlign: 'center' }} >
                                                    Image Before Preprocessing Vs Image After Preprocessing
                                                </div>
                                            </div>
                                        </Card.Body>
                                    </Accordion.Collapse>
                                </Card>
                                </Accordion>
                                {
                                    specs.software.map(
                                        (data) => (
                                            <Accordion>
                                            <Card className="card-plain spec-card">
                                                <Accordion.Toggle className="accord-head" as={Card.Header} eventKey={String(data.id)}>
                                                <svg className="add-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6 13h-5v5h-2v-5h-5v-2h5v-5h2v5h5v2z"/></svg>

                                                {data.title}
                                                </Accordion.Toggle>
                                                <Accordion.Collapse eventKey={String(data.id)}>
                                                <Card.Body>
                                                    <div>
                                                        {data.content}
                                                    </div>
                                                    
                                                    <div style={{ display: 'grid', placeItems: 'center' }}>
                                                        {data.img && <img className="w-75 accord-img" alt="spec-img" src={require("assets/img/tarang/" + data.img)} />}
                                                        <div className="card-image-description" style={{ fontFamily: 'monospace', textAlign: 'center' }} >
                                                            {data.imgDesc}
                                                        </div>
                                                    </div>
                                                </Card.Body>
                                                </Accordion.Collapse>
                                            </Card>
                                            </Accordion>
                                        )
                                    )
                                }
                                {/* </Accordion> */}
                            </Col>
                            <Col lg="1"></Col>
                        </Row>
                    </div>
                    </FadeIn>
                </Container>
            </div>
        }
        </>
    );
}
Example #9
Source File: SubsystemSpecs.js    From Website2020 with MIT License 4 votes vote down vote up
function Posts() {
    return (
        <>
            {
                <div className="section landing-section">
                    <Container>
                        <div className="title-block">
                            <Row className="justify-content-center heading-components">
                                <div style={{ textAlign: 'center' }}>
                                    <b style={{ fontSize: "4rem" }}>COMPONENTS</b>
                                </div>
                            </Row>
                        </div>
                        <Row className="subsystem-headings">
                            <h3>Mechanical</h3>
                        </Row>
                        <FadeIn>
                            <div className="spec-container">
                                <Row>
                                    {/* <Col lg="5" className="text-center my-auto imgCol">
                                <img src={mech_main} alt="spec-img" className="w-100"></img>
                                <p className="small-heading-edited">
                                    VARUN: STRUCTURE
                                </p>
                            </Col> */}
                                    <Col lg="1"></Col>
                                    <Col lg="10" className="featureCol my-auto">
                                        Varun's mechanical system comprises an aluminium structural frame, pressure casings, and electromagnetic actuators. The mechanical parts were first designed in Solidworks and Autodesk Inventor and then improved using Ansys Workbench before its final fabrication using available in-house facilities at the institute.
                                        <div style={{ marginBottom: '20px' }}></div>
                                            {
                                                specs.mechanical.map(
                                                    (data) => (
                                                    <Accordion defaultActiveKey="">
                                                        <Card className="card-plain spec-card">
                                                            <Accordion.Toggle className="accord-head" as={Card.Header} eventKey={String(data.id)}>
                                                                <svg className="add-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6 13h-5v5h-2v-5h-5v-2h5v-5h2v5h5v2z" /></svg>
                                                                {data.title}
                                                            </Accordion.Toggle>
                                                            <Accordion.Collapse eventKey={String(data.id)}>
                                                                <Card.Body>
                                                                    <div>
                                                                        {data.content}
                                                                    </div>
                                                                    <div style={{ display: 'grid', placeItems: 'center' }}>
                                                                        {data.img && <img className="w-75 accord-img" alt="spec-img" src={require("assets/img/varun/VARUN-AUV/" + data.img)} />}
                                                                        <div className="card-image-description" style={{ fontFamily: 'monospace', textAlign: 'center' }} >
                                                                            {data.imgDesc}
                                                                        </div>
                                                                    </div>
                                                                </Card.Body>
                                                            </Accordion.Collapse>
                                                        </Card>
                                                    </Accordion>
                                                    )
                                                )
                                            }
                                    </Col>
                                    <Col lg="1"></Col>
                                </Row>
                            </div>
                        </FadeIn>
                        <Row className="subsystem-headings">
                            <h3>Electrical</h3>
                        </Row>
                        <FadeIn>
                            <div className="spec-container">
                                <Row>
                                    <Col lg="1"></Col>
                                    <Col lg="10" className="my-auto featureCol">
                                        The Electrical system provides the interface between the processor and the other electronic devices. There will be three layers of stacks inside the hull, which will be used for mounting different electronic devices and PCBs.The Arduino used in Varun is the ATmega1280 microcontroller and has an operating voltage of 5V. It has 16 Analog input pins and 54 digital I/O pins (of which 15 provide PWM output). The open-source Arduino platform is used to process the input signals from the main processor and convert it into desired signals to the actuators like motor drivers and pneumatic system.
                                        <div style={{ marginBottom: '20px' }}></div>
                                            {
                                                specs.electrical.map(
                                                    (data) => (
                                                    <Accordion defaultActiveKey="">
                                                        <Card className="card-plain spec-card">
                                                            <Accordion.Toggle className="accord-head" as={Card.Header} eventKey={String(data.id)}>
                                                                <svg className="add-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6 13h-5v5h-2v-5h-5v-2h5v-5h2v5h5v2z" /></svg>

                                                                {data.title}
                                                            </Accordion.Toggle>
                                                            <Accordion.Collapse eventKey={String(data.id)}>
                                                                <Card.Body>
                                                                    <div>
                                                                        {data.content}
                                                                    </div>
                                                                    <div style={{ display: 'grid', placeItems: 'center' }}>
                                                                        {data.img && <img className="w-75 accord-img" alt="spec-img" src={require("assets/img/varun/VARUN-AUV/" + data.img)} />}
                                                                        <div className="card-image-description" style={{ fontFamily: 'monospace', textAlign: 'center' }} >
                                                                            {data.imgDesc}
                                                                        </div>
                                                                    </div>
                                                                </Card.Body>
                                                            </Accordion.Collapse>
                                                        </Card>
                                                    </Accordion>
                                                    )
                                                )
                                            }
                                    </Col>
                                    <Col lg="1"></Col>
                                    {/* <Col lg="5" className="text-center my-auto imgCol">
                                <img src={elec_main} alt="spec-img" className="w-100"></img>
                                <p className="small-heading-edited">
                                    VARUN: ELECTRICAL ARCHITECTURE
                                </p>
                            </Col> */}
                                </Row>
                            </div>
                        </FadeIn>
                        <Row className="subsystem-headings">
                            <h3>Software</h3>
                        </Row>
                        <FadeIn>
                            <div className="spec-container">
                                <Row>
                                    {/* <Col lg="5" className="text-center my-auto imgCol">
                                <img src={soft_main} alt="spec-img" className="w-100"></img>
                                <p className="small-heading-edited">
                                    VARUN: SOFTWARE ARCHIETECTURE
                                </p>
                            </Col> */}
                                    <Col lg="1"></Col>
                                    <Col lg="10" className="my-auto featureCol">
                                        The Software Architecture of Varun is based on the Robot Operating System (ROS) Software Framework from Willow Garage, which encompasses the underlying messaging infrastructure for inter-process communications in our distributed system.
                                        <div style={{ marginBottom: '20px' }}></div>
                                            {
                                                specs.software.map(
                                                    (data) => (
                                                    <Accordion defaultActiveKey="">
                                                        <Card className="card-plain spec-card">
                                                            <Accordion.Toggle className="accord-head" as={Card.Header} eventKey={String(data.id)}>
                                                                <svg className="add-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6 13h-5v5h-2v-5h-5v-2h5v-5h2v5h5v2z" /></svg>

                                                                {data.title}
                                                            </Accordion.Toggle>
                                                            <Accordion.Collapse eventKey={String(data.id)}>
                                                                <Card.Body>
                                                                    <div>
                                                                        {data.content}
                                                                    </div>
                                                                    <div style={{ display: 'grid', placeItems: 'center' }}>
                                                                        {data.img && <img className="w-75 accord-img" alt="spec-img" src={require("assets/img/varun/VARUN-AUV/" + data.img)} />}
                                                                        <div className="card-image-description" style={{ fontFamily: 'monospace', textAlign: 'center' }} >
                                                                            {data.imgDesc}
                                                                        </div>
                                                                    </div>
                                                                </Card.Body>
                                                            </Accordion.Collapse>
                                                        </Card>
                                                    </Accordion>
                                                    )
                                                )
                                            }
                                    </Col>
                                    <Col lg="1"></Col>
                                </Row>
                            </div>
                        </FadeIn>
                    </Container>
                </div>
            }
        </>
    );
}
Example #10
Source File: index.js    From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 4 votes vote down vote up
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&amp;cs=tinysrgb&amp;dpr=1&amp;fit=crop&amp;h=200&amp;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 #11
Source File: index.js    From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 4 votes vote down vote up
LTIProjectShared = (props) => {
  const [activeProject, setActiveProject] = useState(null);
  const [activePlaylist, setActivePlaylist] = useState(null);
  const [activeActivity, setActiveActivity] = useState(null);
  const [defaultPlaylist, setDefaultPlaylist] = useState(null);
  const [allProjects, setAllProjects] = useState([]);
  const [formData, setFormData] = useState({});

  const dispatch = useDispatch();
  const project = useSelector((state) => state.project);

  const { match } = props;

  useEffect(() => {
    dispatch(
      loadMyProjectsLtiAction(
        decodeURIComponent(match.params.lmsUrl),
        decodeURIComponent(match.params.ltiClientId),
      ),
    );
  }, [dispatch, match.params.lmsUrl, match.params.ltiClientId]);

  useEffect(() => {
    if (project.projects) {
      setAllProjects(project.projects);
    }
  }, [project.projects]);

  return (
    <div className="lti-all-project">
      <Accordion>
        {!!allProjects && allProjects.map((data, counterTop) => (
          <Card>
            <Card.Header className="top-card">
              <Accordion.Toggle
                as={Button}
                variant="link"
                eventKey={counterTop + 1}
                className="top-card-btn"
              >
                <span
                  onClick={() => {
                    if (activeProject === counterTop + 1) {
                      setActiveProject(null);
                    } else {
                      setActiveProject(counterTop + 1);
                      setActiveActivity(null);
                    }
                    // setActivePlaylist(null);
                  }}
                >
                  <div className="flex-bar">
                    <div>
                      {/* {activeProject === counterTop + 1 ? (
                        <i
                          className="fa fa-check-square"
                          aria-hidden="true"
                        />
                      ) : (
                        <i className="fa fa-square" aria-hidden="true" />
                      )} */}
                      {data.name}
                    </div>
                    {activeProject === counterTop + 1 ? (
                      <FontAwesomeIcon icon="chevron-up" />
                    ) : (
                      <FontAwesomeIcon icon="chevron-down" />
                    )}
                  </div>
                </span>
              </Accordion.Toggle>
            </Card.Header>
            <Accordion.Collapse eventKey={counterTop + 1}>
              <Card.Body>
                {!!data.playlists && data.playlists.length > 0 ? (
                  <Accordion>
                    {data.playlists.map((data2, counterPlaylist) => (
                      <Card>
                        <Card.Header className="middle-card">
                          <Accordion.Toggle
                            as={Button}
                            variant="link"
                            eventKey={counterPlaylist + counterTop + 1}
                          >
                            <span
                              onClick={() => {
                                if (activePlaylist === counterPlaylist + counterTop + 1) {
                                  setActivePlaylist(null);
                                  setFormData({});
                                } else {
                                  if (!activeActivity) {
                                    setActivePlaylist(counterPlaylist + counterTop + 1);
                                  }
                                  setActiveActivity(null);
                                  setDefaultPlaylist(data2.id);
                                  setFormData({
                                    name: data2.title,
                                    id: data2.id,
                                    entity: 'playlist',
                                  });
                                }
                              }}
                            >
                              <div className="flex-bar">
                                <div>
                                  <span>
                                    {activePlaylist === (counterPlaylist + counterTop + 1) ? (
                                      <FontAwesomeIcon icon="stop-circle" className="mr-2" />
                                    ) : (
                                      <FontAwesomeIcon icon="circle" className="mr-2" />
                                    )}
                                    {data2.title}
                                  </span>
                                </div>
                                {activePlaylist === (counterPlaylist + counterTop + 1) ? (
                                  <FontAwesomeIcon icon="chevron-up" />
                                ) : (
                                  <FontAwesomeIcon icon="chevron-down" />
                                )}
                              </div>
                            </span>
                          </Accordion.Toggle>
                        </Card.Header>

                        <Accordion.Collapse eventKey={counterPlaylist + counterTop + 1}>
                          <Card.Body className="last-card">
                            {!!data2.activities && data2.activities.length > 0 ? (
                              <ul>
                                {data2.activities.map(
                                  (data3, counter3) => (
                                    <li
                                      onClick={() => {
                                        if (activeActivity === counter3) {
                                          setActiveActivity(null);
                                          setFormData(null);
                                          setDefaultPlaylist(data2.id);
                                          setActivePlaylist(counterPlaylist + counterTop + 1);
                                          setFormData({
                                            name: data2.title,
                                            id: data2.id,
                                            entity: 'playlist',
                                          });
                                        } else {
                                          setActiveActivity(counter3);
                                          setActivePlaylist(null);
                                          setFormData({
                                            name: data3.title,
                                            id: data3.id,
                                            entity: 'activity',
                                          });
                                        }
                                      }}
                                      key={counter3}
                                    >
                                      {activeActivity === counter3 ? (
                                        <FontAwesomeIcon icon="stop-circle" className="mr-2" />
                                      ) : (
                                        <FontAwesomeIcon icon="circle" className="mr-2" />
                                      )}
                                      {data3.title}
                                    </li>
                                  ),
                                )}
                              </ul>
                            ) : (
                              <span className="error">
                                No activity found
                              </span>
                            )}
                          </Card.Body>
                        </Accordion.Collapse>
                      </Card>
                    ))}
                    {' '}
                  </Accordion>
                ) : (
                  <span className="error">No Playlists found</span>
                )}
              </Card.Body>
            </Accordion.Collapse>
          </Card>
        ))}
      </Accordion>

      <button
        type="button"
        className="button-submit"
        onClick={() => {
          let finalUrl;
          if (activePlaylist) {
            finalUrl = `${decodeURIComponent(match.params.redirectUrl)}&title=${
              encodeURIComponent(formData.name)}&entity=${formData.entity}&id=${formData.id}`;
          } else {
            finalUrl = `${decodeURIComponent(match.params.redirectUrl)}&title=${
              encodeURIComponent(formData.name)}&entity=${formData.entity}&id=${formData.id}&playlist=${defaultPlaylist}`;
          }

          if (formData.id) {
            Swal.fire({
              html: `You have selected <strong>${formData.entity}: ${formData.name}</strong><br>Do you want to continue ?`,
              showCancelButton: true,
              confirmButtonColor: '#3085d6',
              cancelButtonColor: '#d33',
              confirmButtonText: 'Ok',
            }).then((result) => {
              if (result.value) {
                window.location.href = finalUrl;
              }
            });
          }
        }}
      >
        Proceed
      </button>
    </div>
  );
}
Example #12
Source File: CloneModel.js    From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 4 votes vote down vote up
function LtiProjectShared(props) {
  const { clone } = props;

  const [activeProject, setActiveProject] = useState(null);
  const [activePlaylist, setActivePlaylist] = useState(null);
  const [currentProject, setCurrentProject] = useState(null);
  const [currentPlaylist, setCurrentPlaylist] = useState(null);

  const dispatch = useDispatch();
  const project = useSelector((state) => state.project);

  useEffect(() => {
    dispatch(
      loadMyCloneProjectsAction(),
      // loadMyProjectsAction(),
    );
  }, [dispatch]);

  return (
    <>
      <div className="lti-all-project">
        <div className="information-clone">
          <p>
            Select a
            {' '}
            {clone.clone.model === 'Activity' ? 'Playlist' : 'Project'}
            {' '}
            from your library that you would like to place this
            {' '}
            {clone.clone.model}
            .
          </p>
          <div className="active-resource">
            <h2>{clone.clone.title}</h2>
            <h3>
              Type:
              <span>{clone.clone.model}</span>
            </h3>
          </div>
        </div>
        <Accordion className="top-box-project">
          {!!project.clone && project.clone.map((data, counterTop) => (
            <Card>
              <Card.Header className="top-card">
                <Accordion.Toggle
                  as={Button}
                  variant="link"
                  eventKey={counterTop + 1}
                  className="top-card-btn"
                >
                  <span
                    onClick={() => {
                      if (activeProject === counterTop + 1) {
                        setActiveProject(null);
                        setCurrentProject(null);
                      } else {
                        setActiveProject(counterTop + 1);
                        setCurrentProject(data);
                        setCurrentPlaylist(null);
                      }
                      // setActivePlaylist(null);
                    }}
                  >
                    <div className="flex-bar">
                      <div className="text-align-left">
                        {activeProject === counterTop + 1 ? (

                          <FontAwesomeIcon icon="check-square" />
                        ) : (
                          <FontAwesomeIcon icon="square" />
                        )}
                        {data.name}
                      </div>
                      {clone.clone.model === 'Activity' && (activeProject === counterTop + 1 ? (
                        <FontAwesomeIcon icon="chevron-up" />
                      ) : (
                        <FontAwesomeIcon icon="chevron-down" />
                      ))}
                    </div>
                  </span>
                </Accordion.Toggle>
              </Card.Header>
              <Accordion.Collapse eventKey={counterTop + 1}>
                <Card.Body>
                  {clone.clone.model === 'Activity' && (!!data.playlists && data.playlists.length > 0 ? (
                    <Accordion>
                      {data.playlists.map((data2, counterPlaylist) => (
                        <Card>
                          <Card.Header className="middle-card">
                            <Accordion.Toggle
                              as={Button}
                              variant="link"
                              eventKey={counterPlaylist + counterTop + 1}
                            >
                              <span
                                onClick={() => {
                                  if (activePlaylist === counterPlaylist + counterTop + 1) {
                                    setActivePlaylist(null);
                                    setCurrentPlaylist(null);
                                  } else {
                                    setActivePlaylist(counterPlaylist + counterTop + 1);
                                    setCurrentPlaylist(data2);
                                  }
                                }}
                              >
                                <div className="flex-bar">
                                  <div className="text-align-left">
                                    <span>
                                      {activePlaylist === counterPlaylist + counterTop + 1 ? (
                                        <FontAwesomeIcon icon="stop-circle" className="mr-2" />
                                      ) : (
                                        <FontAwesomeIcon icon="circle" className="mr-2" />
                                      )}
                                      {data2.title}
                                    </span>
                                  </div>
                                </div>
                              </span>
                            </Accordion.Toggle>
                          </Card.Header>
                        </Card>
                      ))}
                      {' '}
                    </Accordion>
                  ) : (
                    clone.clone.model === 'Activity' && (<span className="error">No Playlists found</span>)
                  ))}
                </Card.Body>
              </Accordion.Collapse>
            </Card>
          ))}
        </Accordion>
      </div>
      <div className="footer-model">
        <button
          type="button"
          className="button-submit"
          onClick={() => {
            if (!currentProject && !currentPlaylist) {
              Swal.fire('Kindly select Project or playlist');
              return;
            }

            let activeAssetDirection;
            if (!currentPlaylist) {
              activeAssetDirection = currentProject.name;
            } else {
              activeAssetDirection = currentPlaylist.title;
            }

            Swal.fire({
              html: `You have selected <strong>${activeAssetDirection}</strong><br>Do you want to continue ?`,
              showCancelButton: true,
              confirmButtonColor: '#3085d6',
              cancelButtonColor: '#d33',
              confirmButtonText: 'Ok',
            }).then((result) => {
              if (result.value) {
                if (currentPlaylist) {
                  cloneActivity(currentPlaylist.id, clone.clone.id);
                } else {
                  clonePlaylist(currentProject.id, clone.clone.id);
                }
              }
            });
          }}
        >
          Done
        </button>
      </div>
    </>
  );
}
Example #13
Source File: SearchNetlify.js    From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 4 votes vote down vote up
function SearchInterface(props) {
  const { history } = props;
  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('');
  const [activeType, setActiveType] = useState([]);
  const [activeSubject, setActiveSubject] = useState([]);
  const [activeEducation, setActiveEducation] = useState([]);
  const [searchType, setSearchType] = useState(null);
  const [authorName, SetAuthor] = useState('');
  useMemo(() => {
    setActiveEducation([]);
    setActiveSubject([]);
    setActiveType([]);
    // eslint-disable-next-line no-restricted-globals
    const query = QueryString.parse(location.search);
    console.log(query);
    if (query.type) {
      if (query.type === 'private') {
        setSearchType('private');
      } else if (query.type === 'public') {
        setSearchType('public');
      } else {
        setSearchType('orgSearch');
      }
    }
    if (query.h5p) {
      setActiveType(query.h5p.split(','));
    }
    if (query.grade) {
      // if (query.grade.includes('and')) {
      //   query.grade = query.grade.replace('and', '&');
      // }
      setActiveSubject(query?.grade?.replace('and', '&')?.split(','));
    }
    if (query.education) {
      // if (query.education.includes('and')) {
      //   query.education = query.education.replace('and', '&');
      // }
      setActiveEducation(query?.education?.replace('and', '&')?.split(','));
    }
    if (query.author) {
      SetAuthor(query.author);
    }
    if (query?.q) {
      setSearchInput(query?.q);
    }
  // eslint-disable-next-line no-restricted-globals
  }, [location.search]);
  window.onbeforeunload = () => {
    localStorage.setItem('refreshPage', 'true');
  };
  useEffect(() => {
    if (localStorage.getItem('refreshPage') === 'true' && currentOrganization && searchType) {
      let dataSend;
      if (searchType === 'orgSearch') {
        dataSend = {
          subjectArray: activeSubject,
          gradeArray: activeEducation,
          standardArray: activeType,
          author: authorName || undefined,
          type: searchType,
          from: 0,
          size: 20,
        };
      } else {
        dataSend = {
          phrase: searchInput.trim(),
          subjectArray: activeSubject,
          gradeArray: activeEducation,
          standardArray: activeType,
          author: authorName || undefined,
          type: searchType,
          from: 0,
          size: 20,
        };
      }
      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);
      }
      // eslint-disable-next-line max-len
      history.push(`/org/${currentOrganization?.domain}/search?q=${searchInput.trim()}&type=${searchType}&grade=${tempSubject}&education=${tempEducation}&h5p=${activeType}&author=${authorName}`);
    }
  }, [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(() => {
    // setTimeout(() => {
    //   Swal.close();
    //   localStorage.setItem('loading', 'false');
    // }, 5000);
  });

  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.map((data) => data.activityItems.map((itm) => allItems.push(itm)));
    setActivityTypes(allItems.sort(compare));
  }, [activityTypesState]);
  // console.log(activeSubject, activeEducation);
  return (
    <>
      <div>
        <div className="content-wrapper">
          <div className="content">
            {true
                ? (
                  <div className="search-result-main">
                    <div className="total-count">
                      {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">
                                Search Library
                                <FontAwesomeIcon className="ml-2" icon="plus" />
                              </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 = {
                                                subjectArray: activeSubject,
                                                gradeArray: activeEducation,
                                                authors: authorName || undefined,
                                                standardArray: activeType,
                                                type: searchType,
                                                from: 0,
                                                size: 20,
                                              };
                                            } else {
                                              dataSend = {
                                                phrase: searchInput.trim(),
                                                subjectArray: activeSubject,
                                                gradeArray: activeEducation,
                                                authors: authorName || undefined,
                                                standardArray: activeType,
                                                type: searchType,
                                                from: 0,
                                                size: 20,
                                              };
                                            }
                                            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);
                                            }
                                            // eslint-disable-next-line max-len
                                            history.push(`/org/${currentOrganization?.domain}/search?q=${searchInput.trim()}&type=${searchType}&grade=${tempSubject}&education=${tempEducation}&h5p=${activeType}&author=${authorName}`);
                                          }
                                        }
                                      }}
                                      type="search"
                                      placeholder="Search"
                                    />
                                    <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 () => {
                                        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 = {
                                              subjectArray: activeSubject,
                                              gradeArray: activeEducation,
                                              standardArray: activeType,
                                              author: authorName || undefined,
                                              type: searchType,
                                              from: 0,
                                              size: 20,
                                            };
                                          } else {
                                            dataSend = {
                                              phrase: searchInput.trim(),
                                              subjectArray: activeSubject,
                                              author: authorName || undefined,
                                              gradeArray: activeEducation,
                                              standardArray: activeType,
                                              type: searchType,
                                              from: 0,
                                              size: 20,
                                            };
                                          }
                                          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);
                                          }
                                          // eslint-disable-next-line max-len
                                          history.push(`/org/${currentOrganization?.domain}/search?q=${searchInput.trim()}&type=${searchType}&grade=${tempSubject}&education=${tempEducation}&h5p=${activeType}&author=${authorName}`);
                                        }
                                        // setModalShow(true);
                                      }}
                                    >
                                      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">
                                Subject
                                <FontAwesomeIcon className="ml-2" icon="plus" />
                              </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">
                                Education Level
                                <FontAwesomeIcon className="ml-2" icon="plus" />
                              </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') {
                                            setActiveSubject(activeEducation.filter((index) => {
                                              if (index === 'College & Beyondn' || 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">
                                Type of Activity
                                <FontAwesomeIcon className="ml-2" icon="plus" />
                              </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">
                        <Tabs
                          defaultActiveKey="total"
                          id="uncontrolled-tab-example"
                          onSelect={async (e) => {
                            if (e === 'total') {
                              let searchData;
                              if (searchType === 'orgSearch') {
                                searchData = {
                                from: 0,
                                size: 20,
                                type: searchType,
                                author: authorName || undefined,

                                subjectArray: activeSubject,
                                gradeArray: activeEducation,
                                standardArray: activeType,
                              };
                              } else {
                                searchData = {
                                  phrase: searchQueries.trim(),
                                  from: 0,
                                  size: 20,
                                  author: authorName || 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 = {
                                from: 0,
                                size: 20,
                                author: authorName || undefined,
                                model: e,
                                type: searchType,
                                subjectArray: activeSubject,
                                gradeArray: activeEducation,
                                standardArray: activeType,
                              };
                              } else {
                                searchData = {
                                  phrase: searchQueries.trim(),
                                  from: 0,
                                  size: 20,
                                  model: e,
                                  author: authorName || 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);
                            }
                          }}
                        >
                          <Tab
                            eventKey="total"
                            title={
                              !!search && !!meta.total
                                ? `all (${meta.total})`
                                : 'all (0)'
                            }
                          >
                            <div className="results_search">
                              {!!search && search.length > 0 ? (
                                search.map((res) => (
                                  <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&amp;cs=tinysrgb&amp;dpr=1&amp;fit=crop&amp;h=200&amp;w=280',
                                          }}
                                        />
                                      )}

                                      {/* <h5>CALCULUS</h5> */}
                                    </div>
                                    <div className="content">
                                      <div className="search-content">
                                        <a
                                          href={
                                            res.model === 'Activity'
                                              // eslint-disable-next-line max-len
                                              ? (permission?.activeRole === 'admin' && searchType !== 'public') || (searchType === 'private') ? `/org/${currentOrganization?.domain}/project/${res.project_id}/playlist/${res.playlist_id}/activity/${res.id}/preview` : `/activity/${res.id}/shared`
                                              : res.model === 'Playlist'
                                                ? `/playlist/${res.id}/preview/lti`
                                                : `/project/${res.id}/shared`
                                          }
                                          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>
                                          {/* <li>
                                            Member Rating{" "}
                                            <span className="type">Project</span>
                                          </li> */}
                                        </ul>
                                        <p>{res.description}</p>
                                      </div>
                                    </div>
                                  </div>
                                ))
                              ) : (
                                <div className="box">No result found !</div>
                              )}
                            </div>
                          </Tab>

                          <Tab
                            eventKey="projects"
                            title={
                              !!search && !!meta.projects
                                ? `project (${meta.projects})`
                                : 'project (0)'
                            }
                          >
                            <div className="results_search">
                              {!!search && search.length > 0 ? (
                                search.map((res) => (
                                  <>
                                    {res.model === 'Project' && (
                                      <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&amp;cs=tinysrgb&amp;dpr=1&amp;fit=crop&amp;h=200&amp;w=280',
                                              }}
                                            />
                                          )}

                                          {/* <h5>CALCULUS</h5> */}
                                        </div>
                                        <div className="content">
                                          <div className="search-content">
                                            <a
                                              href={
                                                res.model === 'Activity'
                                                  ? `/activity/${res.id}/shared`
                                                  : res.model === 'Playlist'
                                                    ? `/playlist/${res.id}/preview/lti`
                                                    : `/project/${res.id}/shared`
                                              }
                                              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>
                                              {/* <li>
                                                Member Rating{" "}
                                                <span className="type">Project</span>
                                              </li> */}
                                            </ul>
                                            <p>{res.description}</p>
                                          </div>
                                        </div>
                                      </div>
                                    )}
                                  </>
                                ))
                              ) : (
                                <div className="box">No result found !</div>
                              )}
                            </div>
                          </Tab>

                          <Tab
                            eventKey="playlists"
                            title={
                              !!search && !!meta.playlists
                                ? `playlist (${meta.playlists})`
                                : 'playlist (0)'
                            }
                          >
                            <div className="results_search">
                              {!!search && search.length > 0 ? (
                                search.map((res) => (
                                  <>
                                    {res.model === 'Playlist' && (
                                      <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&amp;cs=tinysrgb&amp;dpr=1&amp;fit=crop&amp;h=200&amp;w=280',
                                              }}
                                            />
                                          )}

                                          {/* <h5>CALCULUS</h5> */}
                                        </div>

                                        <div className="content">
                                          <div className="search-content">
                                            <a
                                              href={
                                                res.model === 'Activity'
                                                  // eslint-disable-next-line max-len
                                                  ? (permission?.activeRole === 'admin' && searchType !== 'public') || (searchType === 'private') ? `/org/${currentOrganization?.domain}/project/${res.project_id}/playlist/${res.playlist_id}/activity/${res.id}/preview` : `/activity/${res.id}/shared`
                                                  : res.model === 'Playlist'
                                                    ? `/playlist/${res.id}/preview/lti`
                                                    : `/project/${res.id}/shared`
                                              }
                                              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>
                                              {/* <li>
                                                Member Rating{" "}
                                                <span className="type">Project</span>
                                              </li> */}
                                            </ul>
                                            <p>{res.description}</p>
                                          </div>
                                        </div>
                                      </div>
                                    )}
                                  </>
                                ))
                              ) : (
                                <div className="box">No result found !</div>
                              )}
                            </div>
                          </Tab>

                          <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&amp;cs=tinysrgb&amp;dpr=1&amp;fit=crop&amp;h=200&amp;w=280',
                                                }}
                                              />
                                            )}

                                            {/* <h5>CALCULUS</h5> */}
                                          </div>

                                          <div className="content">
                                            <div className="search-content">
                                              <a
                                                href={
                                                  res.model === 'Activity'
                                                    ? `/activity/${res.id}/shared`
                                                    : res.model === 'Playlist'
                                                      ? `/playlist/${res.id}/preview/lti`
                                                      : `/project/${res.id}/shared`
                                                }
                                                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>
                                                {/* <li>
                                                  Member Rating{" "}
                                                  <span className="type">Project</span>
                                                </li> */}
                                              </ul>
                                              <p>{res.description}</p>
                                            </div>
                                          </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,
                                };
                                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,
                                };
                                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 #14
Source File: index.js    From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 4 votes vote down vote up
function SearchInterface(props) {
  const { history, fromTeam, selectProject, setSelectProject } = props;
  const [toggleStates, setToggleStates] = useState({
    searchLibrary: true,
    subject: true,
    education: false,
    authorTag: false,
    type: false,
  });
  const allState = useSelector((state) => state.search);
  const activityTypesState = useSelector((state) => state.resource.types);
  const { currentOrganization, permission } = useSelector((state) => state.organization);
  const dispatcher = useDispatch();
  const safariMontagePublishTool = useSelector((state) => state.genericLMS.safariMontagePublishTool);
  const allLms = useSelector((state) => state.share);
  const dispatch = useDispatch();
  const [show, setShow] = useState(false);
  const [selectedProjectId, setSelectedProjectId] = useState(0);
  const [selectedProjectPlaylistId, setSelectedProjectPlaylistId] = useState(0);
  const [activityTypes, setActivityTypes] = useState([]);
  const [modalShow, setModalShow] = useState(false);
  const [search, setSearch] = useState([]);
  const [searchQueries, SetSearchQuery] = useState('');
  const [searchInput, setSearchInput] = useState('');
  const [meta, setMeta] = useState({});
  const [clone, setClone] = useState();
  const [activePage, setActivePage] = useState(1);
  const [totalCount, setTotalCount] = useState(0);
  const [activeModel, setActiveModel] = useState('');
  const [activeType, setActiveType] = useState([]);
  const [activeSubject, setActiveSubject] = useState([]);
  const [activeEducation, setActiveEducation] = useState([]);
  const [activeAuthorTag, setActiveAuthorTag] = useState([]);
  const [searchType, setSearchType] = useState(null);
  const [authorName, SetAuthor] = useState('');
  const [activetab, setActiveTab] = useState(fromTeam ? 'projects' : 'total');
  const [todate, Settodate] = useState(undefined);
  const [fromdate, Setfromdate] = useState(undefined);
  const [subjects, setSubjects] = useState([]);
  const [authorTags, setAuthorTags] = useState([]);
  const [educationLevels, setEducationLevels] = useState([])
  // const [selectedAuthor, setSelectedAuthor] = useState([]);
  // const [authors, setAuthors] = useState([]);
  // var activeSubject1;
  //   useMemo(() => {

  // activeSubject1 = activeSubject.map((data1) => data1.replace('and', '&'))
  //   },[activeSubject])
  const handleShow = () => {
    setShow(true); //! state.show
  };
  const setProjectId = (projectId) => {
    setSelectedProjectId(projectId);
  };

  const setProjectPlaylistId = (playlistId) => {
    setSelectedProjectPlaylistId(playlistId);
  };
  const projectVisibilityLMS = allLms?.shareVendors?.map((data) => {
    if (data.project_visibility === true) {
      return true;
    }
    return false;
  });
  // const playlistVisibilityLMS = allLms?.shareVendors?.filter((data) => data.playlist_visibility === true);
  const activityVisibilityLMS = allLms?.shareVendors?.map((data) => {
    if (data.activity_visibility === true) {
      return true;
    }
    return false;
  });
  const safariMontageActivity = allLms?.shareVendors?.map((data) => {
    if (data.lms_name === 'safarimontage') {
      return true;
    }
    return false;
  });
  useMemo(() => {
    dispatch(loadLmsAction());
  }, []);
  useMemo(() => {
    setActiveEducation([]);
    setActiveSubject([]);
    setActiveAuthorTag([]);
    setActiveType([]);
    // eslint-disable-next-line no-restricted-globals
    const query = QueryString.parse(location.search);
    if (query.type) {
      if (query.type === 'private') {
        setSearchType('private');
      } else if (query.type === 'public') {
        setSearchType('public');
      } else {
        setSearchType('orgSearch');
      }
    }
    if (query.h5p) {
      setActiveType(query.h5p.split(','));
    }
    if (query.grade) {
      // if (query.grade.includes('and')) {
      //   query.grade = query.grade.replace('and', '&');
      // }
      setActiveSubject(query?.grade?.split(',').map(Number));
    }
    if (query.education) {
      // if (query.education.includes('and')) {
      //   query.education = query.education.replace('and', '&');
      // }
      setActiveEducation(query?.education?.split(',').map(Number));
    }
    if (query.authorTag) {
      setActiveAuthorTag(query?.authorTag?.split(',').map(Number));
    }
    if (query.author) {
      SetAuthor(query.author);
    }
    if (query.fromDate && query.fromDate !== 'undefined') {
      Setfromdate(query.fromDate);
    } else {
      Setfromdate(undefined);
    }
    if (query.toDate && query.fromDate !== 'undefined') {
      Settodate(query.toDate);
    } else {
      Settodate(undefined);
    }
    if (query?.q) {
      setSearchInput(query?.q);
    }
    // eslint-disable-next-line no-restricted-globals
  }, [location.search]);
  window.onbeforeunload = () => {
    localStorage.setItem('refreshPage', 'true');
  };
  useEffect(() => {
    if (localStorage.getItem('refreshPage') === 'true' && currentOrganization && searchType) {
      let dataSend;
      if (searchType === 'orgSearch') {
        dataSend = {
          phrase: searchInput.trim(),
          subjectArray: activeSubject,
          gradeArray: activeEducation,
          authorTagsArray: activeAuthorTag,
          standardArray: activeType,
          author: authorName || undefined,
          type: searchType,
          from: 0,
          size: 20,
        };
      } else {
        dataSend = {
          phrase: searchInput.trim(),
          subjectArray: activeSubject,
          gradeArray: activeEducation,
          authorTagsArray: activeAuthorTag,
          standardArray: activeType,
          author: authorName || undefined,
          type: searchType,
          from: 0,
          size: 20,
        };
      }
      let result;
      (async () => {
        result = await dispatch(simpleSearchAction(dataSend));
      })();
      setTotalCount(result?.meta?.total);
      const tempEducation = [];
      const tempSubject = [];
      const tempTag = [];
      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);
      }
      if (activeAuthorTag) {
        activeAuthorTag.forEach((sub) => {
          if (String(sub).includes('&')) {
            const temp = String(sub).replace('&', 'and');
            tempTag.push(temp);
          } else {
            tempTag.push(sub);
          }
        });
        setActiveAuthorTag(tempTag);
      }
      // eslint-disable-next-line max-len
      if (!fromTeam) {
        // eslint-disable-next-line max-len
        history.push(
          `/org/${
            currentOrganization?.domain
          }/search?q=${searchInput.trim()}&type=${searchType}&grade=${tempSubject}&education=${tempEducation}&authorTag=${tempTag}&h5p=${activeType}&author=${authorName}`
        );
      }
    }
  }, [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(() => {
    // setTimeout(() => {
    //   Swal.close();
    //   localStorage.setItem('loading', 'false');
    // }, 5000);
  });

  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]);

  useEffect (() => {
    if(currentOrganization?.id) {
      if(subjects.length == 0) {
        const result_sub = dispatcher(getSubjects(currentOrganization?.id || 1));
        result_sub.then((data)=>setSubjects(data));
      }
      if(authorTags.length == 0) {
        const result_auth = dispatcher(getAuthorTag(currentOrganization?.id || 1));
        result_auth.then((data)=>setAuthorTags(data));
      }
      if(educationLevels.length == 0) {
        const result_edu = dispatcher(getEducationLevel(currentOrganization?.id || 1));
        result_edu.then((data)=>setEducationLevels(data));
      }
    }    
  }, currentOrganization);
  return (
    <>
      <div>
        <div className={!fromTeam && 'search-wrapper'}>
          <MyVerticallyCenteredModal show={modalShow} onHide={() => setModalShow(false)} className="clone-lti" clone={clone} />

          <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,
                                            authorTagsArray: activeAuthorTag,
                                            authors: authorName || undefined,
                                            standardArray: activeType,
                                            type: searchType,
                                            from: 0,
                                            size: 20,
                                          };
                                        } else {
                                          dataSend = {
                                            phrase: searchInput.trim(),
                                            subjectArray: activeSubject,
                                            gradeArray: activeEducation,
                                            authorTagsArray: activeAuthorTag,
                                            authors: authorName || undefined,
                                            standardArray: activeType,
                                            type: searchType,
                                            from: 0,
                                            size: 20,
                                          };
                                        }
                                        const result = await dispatch(simpleSearchAction(dataSend));
                                        setTotalCount(result.meta?.total);
                                        const tempEducation = [];
                                        const tempSubject = [];
                                        const tempTag = [];
                                        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);
                                        }
                                        if (activeAuthorTag) {
                                          activeAuthorTag.forEach((sub) => {
                                            if (String(sub).includes('&')) {
                                              const temp = String(sub).replace('&', 'and');
                                              tempTag.push(temp);
                                            } else {
                                              tempTag.push(sub);
                                            }
                                          });
                                          setActiveAuthorTag(tempTag);
                                        }
                                        // eslint-disable-next-line max-len
                                        if (!fromTeam) {
                                          // eslint-disable-next-line max-len
                                          history.push(
                                            `/org/${
                                              currentOrganization?.domain
                                            }/search?q=${searchInput.trim()}&type=${searchType}&grade=${tempSubject}&education=${tempEducation}&authorTag=${tempTag}&h5p=${activeType}&author=${authorName}`
                                          );
                                        }
                                      }
                                    }
                                  }}
                                  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(fromTeam ? 'projects' : 'total');
                                    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,
                                          authorTagsArray: activeAuthorTag,
                                          standardArray: activeType,
                                          author: authorName || undefined,
                                          fromDate: fromdate || undefined,
                                          toDate: todate || undefined,
                                          type: searchType,
                                          from: 0,
                                          size: 20,
                                        };
                                      } else {
                                        dataSend = {
                                          phrase: searchInput.trim(),
                                          subjectArray: activeSubject,
                                          author: authorName || undefined,
                                          fromDate: fromdate || undefined,
                                          toDate: todate || undefined,
                                          gradeArray: activeEducation,
                                          authorTagsArray: activeAuthorTag,
                                          standardArray: activeType,
                                          type: searchType,
                                          from: 0,
                                          size: 20,
                                        };
                                      }
                                      const result = await dispatch(simpleSearchAction(dataSend));
                                      setTotalCount(result.meta?.total);
                                      const tempEducation = [];
                                      const tempSubject = [];
                                      const tempTag = [];
                                      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);
                                      }
                                      if (activeAuthorTag) {
                                        activeAuthorTag.forEach((sub) => {
                                          if (String(sub).includes('&')) {
                                            const temp = String(sub).replace('&', 'and');
                                            tempTag.push(temp);
                                          } else {
                                            tempTag.push(sub);
                                          }
                                        });
                                        setActiveAuthorTag(tempSubject);
                                      }
                                      if (!fromTeam) {
                                        // eslint-disable-next-line max-len
                                        history.push(
                                          `/org/${
                                            currentOrganization?.domain
                                          }/search?q=${searchInput.trim()}&type=${searchType}&grade=${tempSubject}&education=${tempEducation}&authorTag=${tempTag}&h5p=${activeType}&author=${authorName}`
                                        );
                                      }
                                    }
                                    // setModalShow(true);
                                  }}
                                >
                                  <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,
                                authorTag: 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.length !== 0 && subjects?.data.map((data) => (
                                <div
                                  className="list-item-keys"
                                  key={data.id}
                                  value={data.id}
                                  onClick={() => {
                                    if (activeSubject.includes(data.id)) {
                                      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.id));
                                      }
                                    } else {
                                      setActiveSubject([...activeSubject, data.id]);
                                    }
                                  }}
                                >
                                  {activeSubject.includes(data.id) ? (
                                    <FontAwesomeIcon icon="check-square" />
                                  ) : (
                                    <FontAwesomeIcon icon="square" />
                                  )}
                                  <span>{data.name}</span>
                                </div>
                              ))}
                            </Card.Body>
                          </Accordion.Collapse>
                        </Card>

                        <Card>
                          <Accordion.Toggle
                            as={Card.Header}
                            eventKey="1"
                            onClick={() =>
                              setToggleStates({
                                ...toggleStates,
                                type: false,
                                subject: false,
                                authorTag: 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.length !== 0 && educationLevels.data.map((data) => (
                                <div
                                  className="list-item-keys"
                                  key={data.id}
                                  value={data.id}
                                  onClick={() => {
                                    if (activeEducation.includes(data.id)) {
                                      if (data.id === '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.id));
                                      }
                                    } else {
                                      setActiveEducation([...activeEducation, data.id]);
                                    }
                                  }}
                                >
                                  {activeEducation.includes(data.id) ? (
                                    <FontAwesomeIcon icon="check-square" />
                                  ) : (
                                    <FontAwesomeIcon icon="square" />
                                  )}

                                  <span>{data.name}</span>
                                </div>
                              ))}
                            </Card.Body>
                          </Accordion.Collapse>
                        </Card>

                        <Card>
                          <Accordion.Toggle
                            as={Card.Header}
                            eventKey="2"
                            onClick={() =>
                              setToggleStates({
                                ...toggleStates,
                                type: false,
                                subject: false,
                                education: false,
                                authorTag: !toggleStates.authorTag,
                              })
                            }
                          >
                            Author Tags
                            <FontAwesomeIcon className="ml-2" icon={toggleStates.authorTag ? 'chevron-up' : 'chevron-down'} />
                          </Accordion.Toggle>

                          <Accordion.Collapse eventKey="2">
                            <Card.Body>
                              {authorTags.length !== 0 && authorTags.data.map((data) => (
                                <div
                                  className="list-item-keys"
                                  key={data.id}
                                  value={data.id}
                                  onClick={() => {
                                    if (activeAuthorTag.includes(data.id)) {
                                      if (data.name === 'College & Beyond') {
                                        setActiveAuthorTag(
                                          activeAuthorTag.filter((index) => {
                                            if (index === 'College & Beyond' || index === 'College and Beyond') {
                                              return false;
                                            }
                                            return true;
                                          })
                                        );
                                      } else {
                                        setActiveAuthorTag(activeAuthorTag.filter((index) => index !== data.id));
                                      }
                                    } else {
                                      setActiveAuthorTag([...activeAuthorTag, data.id]);
                                    }
                                  }}
                                >
                                  {activeAuthorTag.includes(data.id) ? (
                                    <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,
                                authorTag: 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.length !== 0 && 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,
                                authorTagsArray: activeAuthorTag,
                                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,
                                authorTagsArray: activeAuthorTag,
                                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,
                                authorTagsArray: activeAuthorTag,
                                standardArray: activeType,
                              };
                            } 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,
                                authorTagsArray: activeAuthorTag,
                                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);
                          }
                        }
                      }}
                    >
                      {!fromTeam && (
                        <Tab eventKey="total" title={!!search && !!meta.total ? `all (${meta.total})` : 'all (0)'}>
                          <div className="results_search">
                            {!!search && search.length > 0 ? (
                              search.map((res) => (
                                <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&amp;cs=tinysrgb&amp;dpr=1&amp;fit=crop&amp;h=200&amp;w=280',
                                        }}
                                      />
                                    )}

                                    {/* <h5>CALCULUS</h5> */}
                                  </div>
                                  <div className="contentbox">
                                    <div className="search-content">
                                      <a
                                        href={
                                          res.model === 'Activity'
                                            ? // eslint-disable-next-line max-len
                                              `/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>
                                          by <span>{res?.team_name ? `(T) ${res?.team_name}` : res.user.first_name}</span>
                                        </li>
                                        {/* <li>
                                            Member Rating{" "}
                                            <span className="type">Project</span>
                                          </li> */}
                                        {res.model === 'Project' && permission?.Project?.includes('project:favorite') && (
                                          <div
                                            className={`btn-fav ${res.favored}`}
                                            onClick={(e) => {
                                              if (e.target.classList.contains('true')) {
                                                e.target.classList.remove('true');
                                                e.target.classList.add('false');
                                              } else {
                                                e.target.classList.add('true');
                                              }
                                              dispatch(addProjectFav(res.id));
                                            }}
                                          >
                                            <FontAwesomeIcon
                                              className="mr-2"
                                              icon="star"
                                              style={{
                                                pointerEvents: 'none',
                                              }}
                                            />{' '}
                                            Favorite
                                          </div>
                                        )}
                                      </ul>
                                      <p>{res.description}</p>
                                    </div>
                                    {(permission?.Project?.includes('project:clone') || permission?.Project?.includes('project:publish')) && res.model === 'Project' && (
                                      <Dropdown className="playlist-dropdown check">
                                        <Dropdown.Toggle>
                                          <FontAwesomeIcon icon="ellipsis-v" />
                                        </Dropdown.Toggle>
                                        <Dropdown.Menu>
                                          {permission?.Project?.includes('project:clone') && (
                                            <Dropdown.Item
                                              onClick={() => {
                                                Swal.fire({
                                                  html: `You have selected <strong>${res.title}</strong> ${res.model}<br>Do you want to continue ?`,
                                                  showCancelButton: true,
                                                  confirmButtonColor: '#3085d6',
                                                  cancelButtonColor: '#d33',
                                                  confirmButtonText: 'Ok',
                                                }).then((result) => {
                                                  if (result.value) {
                                                    cloneProject(res.id);
                                                  }
                                                });
                                              }}
                                            >
                                              <FontAwesomeIcon className="mr-2" icon="clone" />
                                              Duplicate
                                            </Dropdown.Item>
                                          )}
                                          {permission?.Project?.includes('project:publish') && (
                                            <li
                                              className="dropdown-submenu send"
                                              style={{
                                                display: projectVisibilityLMS[0] || currentOrganization?.gcr_project_visibility ? 'block' : 'none',
                                              }}
                                            >
                                              <a tabIndex="-1">
                                                <FontAwesomeIcon icon="newspaper" className="mr-2" />
                                                Publish
                                              </a>
                                              <ul className="dropdown-menu check">
                                                {currentOrganization?.gcr_project_visibility && (
                                                  // eslint-disable-next-line react/jsx-indent
                                                  <li
                                                    onClick={() => {
                                                      setShow(true);
                                                      getProjectId(res.id);
                                                      setSelectedProjectId(res.id);
                                                      dispatch(googleShare(false));
                                                    }}
                                                  >
                                                    <a>Google Classroom</a>
                                                  </li>
                                                )}
                                                {allLms.shareVendors &&
                                                  allLms.shareVendors.map(
                                                    (data) =>
                                                      data?.project_visibility && (
                                                        <li>
                                                          <a
                                                            onClick={async () => {
                                                              const allPlaylist = await dispatch(lmsPlaylist(res.id));
                                                              if (allPlaylist) {
                                                                dispatch(
                                                                  getProjectCourseFromLMS(data.lms_name.toLowerCase(), data.id, res.id, allPlaylist.playlists, data.lms_url)
                                                                );
                                                              }
                                                            }}
                                                          >
                                                            {data.site_name}
                                                          </a>
                                                        </li>
                                                      )
                                                  )}
                                              </ul>
                                            </li>
                                          )}
                                        </Dropdown.Menu>
                                      </Dropdown>
                                    )}
                                  </div>
                                  {permission?.Playlist?.includes('playlist:duplicate') && res.model === 'Playlist' && (
                                    <Dropdown className="playlist-dropdown check">
                                      <Dropdown.Toggle>
                                        <FontAwesomeIcon icon="ellipsis-v" />
                                      </Dropdown.Toggle>
                                      <Dropdown.Menu>
                                        <Dropdown.Item
                                          onClick={() => {
                                            setModalShow(true);
                                            setClone(res);
                                          }}
                                        >
                                          <FontAwesomeIcon className="mr-2" icon="clone" />
                                          Duplicate
                                        </Dropdown.Item>
                                        {permission?.Playlist?.includes('playlist:publish') && (
                                          <ShareLink
                                            playlistId={res.id}
                                            projectId={res.project_id}
                                            setProjectId={setProjectId}
                                            handleShow={handleShow}
                                            gcr_playlist_visibility={currentOrganization.gcr_playlist_visibility}
                                            setProjectPlaylistId={setProjectPlaylistId}
                                          />
                                        )}
                                      </Dropdown.Menu>
                                    </Dropdown>
                                  )}
                                  {permission?.Activity?.includes('activity:duplicate') && res.model === 'Activity' && (
                                    <Dropdown className="playlist-dropdown check">
                                      <Dropdown.Toggle>
                                        <FontAwesomeIcon icon="ellipsis-v" />
                                      </Dropdown.Toggle>
                                      <Dropdown.Menu>
                                        <>
                                          <Dropdown.Item
                                            onClick={() => {
                                              setModalShow(true);
                                              setClone(res);
                                            }}
                                          >
                                            <FontAwesomeIcon className="mr-2" icon="clone" />
                                            Duplicate
                                          </Dropdown.Item>
                                          {permission?.Activity?.includes('activity:share') && allLms?.length !== 0 && (
                                            <li
                                              className="dropdown-submenu send"
                                              style={{
                                                display: activityVisibilityLMS.includes(true) && safariMontageActivity.includes(true) ? 'block' : 'none',
                                              }}
                                            >
                                              <a tabIndex="-1" className="dropdown-item">
                                                <FontAwesomeIcon icon="newspaper" className="mr-2" />
                                                Publish
                                              </a>
                                              <ul className="dropdown-menu check">
                                                {allLms?.shareVendors.map((data) =>
                                                  data.lms_name !== 'safarimontage' ? null : (
                                                    <>
                                                      {data?.activity_visibility && (
                                                        <li>
                                                          <a
                                                            onClick={() => {
                                                              dispatch(loadSafariMontagePublishToolAction(res.project_id, res.playlist_id, res.id, data.id));
                                                            }}
                                                          >
                                                            {data.site_name}
                                                          </a>
                                                        </li>
                                                      )}
                                                    </>
                                                  )
                                                )}
                                                <Modal
                                                  dialogClassName="safari-modal"
                                                  show={safariMontagePublishTool}
                                                  onHide={() => dispatch(closeSafariMontageToolAction())}
                                                  aria-labelledby="example-modal-sizes-title-lg"
                                                >
                                                  <Modal.Header closeButton>
                                                    <Modal.Title id="example-modal-sizes-title-lg">Safari Montage</Modal.Title>
                                                  </Modal.Header>
                                                  <Modal.Body>
                                                    <iframe title="Safari Montage" src={`data:text/html;charset=utf-8,${safariMontagePublishTool}`} />
                                                  </Modal.Body>
                                                </Modal>
                                              </ul>
                                            </li>
                                          )}
                                        </>
                                      </Dropdown.Menu>
                                    </Dropdown>
                                  )}
                                </div>
                              ))
                            ) : (
                              <div className="box">No result found !</div>
                            )}
                          </div>
                        </Tab>
                      )}

                      <Tab eventKey="projects" title={!!search && !!meta.projects ? `project (${meta.projects})` : 'project (0)'}>
                        <div className="results_search">
                          {!!search && search.length > 0 ? (
                            search.map((res) => (
                              <>
                                {res.model === 'Project' && (
                                  <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&amp;cs=tinysrgb&amp;dpr=1&amp;fit=crop&amp;h=200&amp;w=280',
                                          }}
                                        />
                                      )}

                                      {/* <h5>CALCULUS</h5> */}
                                    </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?.team_name ? `(T) ${res?.team_name}` : res.user.first_name}</span>
                                            </li>
                                          )}
                                          <li>
                                            Type <span className="type">{res.model}</span>
                                          </li>
                                          {/* <li>
                                                Member Rating{" "}
                                                <span className="type">Project</span>
                                              </li> */}
                                          {permission?.Project?.includes('project:favorite') && (
                                            <div
                                              className={`btn-fav ${res.favored}`}
                                              onClick={(e) => {
                                                if (e.target.classList.contains(' true')) {
                                                  e.target.classList.remove('true');
                                                } else {
                                                  e.target.classList.add('true');
                                                }
                                                dispatch(addProjectFav(res.id));
                                              }}
                                            >
                                              <FontAwesomeIcon className="mr-2" icon="star" />
                                              Favorite
                                            </div>
                                          )}
                                        </ul>
                                        <p>{res.description}</p>
                                      </div>
                                      {(permission?.Project?.includes('project:clone') || permission?.Project?.includes('project:publish')) && (
                                        <Dropdown className="playlist-dropdown check">
                                          <Dropdown.Toggle>
                                            <FontAwesomeIcon icon="ellipsis-v" />
                                          </Dropdown.Toggle>
                                          <Dropdown.Menu>
                                            {permission?.Project?.includes('project:clone') && (
                                              <Dropdown.Item
                                                onClick={() => {
                                                  Swal.fire({
                                                    html: `You have selected <strong>${res.title}</strong> ${res.model}<br>Do you want to continue ?`,
                                                    showCancelButton: true,
                                                    confirmButtonColor: '#3085d6',
                                                    cancelButtonColor: '#d33',
                                                    confirmButtonText: 'Ok',
                                                  }).then((result) => {
                                                    if (result.value) {
                                                      cloneProject(res.id);
                                                    }
                                                  });
                                                }}
                                              >
                                                <FontAwesomeIcon className="mr-2" icon="clone" />
                                                Duplicate
                                              </Dropdown.Item>
                                            )}
                                            {permission?.Project?.includes('project:publish') && (
                                              <li
                                                className="dropdown-submenu send"
                                                style={{
                                                  display: projectVisibilityLMS[0] || currentOrganization?.gcr_project_visibility ? 'block' : 'none',
                                                }}
                                              >
                                                <a tabIndex="-1">
                                                  <FontAwesomeIcon icon="newspaper" className="mr-2" />
                                                  Publish
                                                </a>
                                                <ul className="dropdown-menu check">
                                                  {currentOrganization.gcr_project_visibility && (
                                                    <li
                                                      onClick={() => {
                                                        setShow(true);
                                                        getProjectId(res.id);
                                                        setSelectedProjectId(res.id);
                                                        dispatch(googleShare(false));
                                                      }}
                                                    >
                                                      <a>Google Classroom</a>
                                                    </li>
                                                  )}
                                                  {allLms.shareVendors &&
                                                    allLms.shareVendors.map(
                                                      (data) =>
                                                        data.project_visibility && (
                                                          <li>
                                                            <a
                                                              onClick={async () => {
                                                                const allPlaylist = await dispatch(lmsPlaylist(res.id));
                                                                if (allPlaylist) {
                                                                  dispatch(
                                                                    getProjectCourseFromLMS(data.lms_name.toLowerCase(), data.id, res.id, allPlaylist.playlists, data.lms_url)
                                                                  );
                                                                }
                                                              }}
                                                            >
                                                              {data.site_name}
                                                            </a>
                                                          </li>
                                                        )
                                                    )}
                                                </ul>
                                              </li>
                                            )}
                                            {fromTeam && (
                                              <Dropdown.Item
                                                onClick={() => {
                                                  if (selectProject.length === 0 && fromTeam) {
                                                    setSelectProject([res.id]);
                                                  } else if (selectProject[0] === res.id && fromTeam) {
                                                    setSelectProject([]);
                                                  } else {
                                                    Swal.fire({
                                                      icon: 'warning',
                                                      title: 'Action Prohibited',
                                                      text: 'You are only allowed to select 1 project.',
                                                    });
                                                  }
                                                }}
                                              >
                                                <img src={teamicon} alt="teams_logo" className="teams-logo" />
                                                {selectProject.includes(res.id) ? 'Remove from ' : 'Add to '}
                                                team
                                              </Dropdown.Item>
                                            )}
                                          </Dropdown.Menu>
                                        </Dropdown>
                                      )}
                                    </div>
                                  </div>
                                )}
                              </>
                            ))
                          ) : (
                            <div className="box">No result found !</div>
                          )}
                        </div>
                      </Tab>

                      {!fromTeam && (
                        <Tab eventKey="playlists" title={!!search && !!meta.playlists ? `playlist (${meta.playlists})` : 'playlist (0)'}>
                          <div className="results_search">
                            {!!search && search.length > 0 ? (
                              search.map((res) => (
                                <>
                                  {res.model === 'Playlist' && (
                                    <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&amp;cs=tinysrgb&amp;dpr=1&amp;fit=crop&amp;h=200&amp;w=280',
                                            }}
                                          />
                                        )}

                                        {/* <h5>CALCULUS</h5> */}
                                      </div>

                                      <div className="contentbox">
                                        <div className="search-content">
                                          <a
                                            href={
                                              res.model === 'Activity'
                                                ? // eslint-disable-next-line max-len
                                                  `/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>
                                            {/* <li>
                                                Member Rating{" "}
                                                <span className="type">Project</span>
                                              </li> */}
                                          </ul>
                                          <p>{res.description}</p>
                                        </div>
                                        {permission?.Playlist?.includes('playlist:duplicate') && (
                                          <Dropdown className="playlist-dropdown check">
                                            <Dropdown.Toggle>
                                              <FontAwesomeIcon icon="ellipsis-v" />
                                            </Dropdown.Toggle>
                                            <Dropdown.Menu>
                                              <Dropdown.Item
                                                onClick={() => {
                                                  setModalShow(true);
                                                  setClone(res);
                                                }}
                                              >
                                                <FontAwesomeIcon className="mr-2" icon="clone" />
                                                Duplicate
                                              </Dropdown.Item>
                                              {permission?.Playlist?.includes('playlist:publish') && (
                                                <ShareLink
                                                  playlistId={res.id}
                                                  projectId={res.project_id}
                                                  setProjectId={setSelectedProjectId}
                                                  handleShow={handleShow}
                                                  gcr_playlist_visibility={currentOrganization.gcr_playlist_visibility}
                                                  setProjectPlaylistId={setSelectedProjectPlaylistId}
                                                />
                                              )}
                                            </Dropdown.Menu>
                                          </Dropdown>
                                        )}
                                      </div>
                                    </div>
                                  )}
                                </>
                              ))
                            ) : (
                              <div className="box">No result found !</div>
                            )}
                          </div>
                        </Tab>
                      )}

                      {!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&amp;cs=tinysrgb&amp;dpr=1&amp;fit=crop&amp;h=200&amp;w=280',
                                              }}
                                            />
                                          )}

                                          {/* <h5>CALCULUS</h5> */}
                                        </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>
                                              {/* <li>
                                                  Member Rating{" "}
                                                  <span className="type">Project</span>
                                                </li> */}
                                            </ul>
                                            <p>{res.description}</p>
                                          </div>
                                          {permission?.Activity?.includes('activity:duplicate') && res.model === 'Activity' && (
                                            <Dropdown className="playlist-dropdown check">
                                              <Dropdown.Toggle>
                                                <FontAwesomeIcon icon="ellipsis-v" />
                                              </Dropdown.Toggle>
                                              <Dropdown.Menu>
                                                <>
                                                  <Dropdown.Item
                                                    onClick={() => {
                                                      setModalShow(true);
                                                      setClone(res);
                                                    }}
                                                  >
                                                    <FontAwesomeIcon className="mr-2" icon="clone" />
                                                    Duplicate
                                                  </Dropdown.Item>
                                                  {permission?.Activity?.includes('activity:share') && allLms?.length !== 0 && (
                                                    <li
                                                      className="dropdown-submenu send"
                                                      style={{
                                                        display: activityVisibilityLMS.includes(true) && safariMontageActivity.includes(true) ? 'block' : 'none',
                                                      }}
                                                    >
                                                      <a tabIndex="-1" className="dropdown-item">
                                                        <FontAwesomeIcon icon="newspaper" className="mr-2" />
                                                        Publish
                                                      </a>
                                                      <ul className="dropdown-menu check">
                                                        {allLms?.shareVendors.map((data) => {
                                                          if (data.lms_name !== 'safarimontage') return false;
                                                          return (
                                                            data?.activity_visibility && (
                                                              <li>
                                                                <a
                                                                  onClick={() => {
                                                                    dispatch(loadSafariMontagePublishToolAction(res.project_id, res.playlist_id, res.id, data.id));
                                                                  }}
                                                                >
                                                                  {data.site_name}
                                                                </a>
                                                              </li>
                                                            )
                                                          );
                                                        })}
                                                        <Modal
                                                          dialogClassName="safari-modal"
                                                          show={safariMontagePublishTool}
                                                          onHide={() => dispatch(closeSafariMontageToolAction())}
                                                          aria-labelledby="example-modal-sizes-title-lg"
                                                        >
                                                          <Modal.Header closeButton>
                                                            <Modal.Title id="example-modal-sizes-title-lg">Safari Montage</Modal.Title>
                                                          </Modal.Header>
                                                          <Modal.Body>
                                                            <iframe title="Safari Montage" src={`data:text/html;charset=utf-8,${safariMontagePublishTool}`} />
                                                          </Modal.Body>
                                                        </Modal>
                                                      </ul>
                                                    </li>
                                                  )}
                                                </>
                                              </Dropdown.Menu>
                                            </Dropdown>
                                          )}
                                        </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,
                              authorTagsArray: activeAuthorTag || 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,
                              authorTagsArray: activeAuthorTag || undefined,
                              standardArray: activeType || undefined,
                              author: authorName || undefined,
                            };
                            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>
        <GoogleModel
          projectId={selectedProjectId}
          playlistId={selectedProjectPlaylistId}
          activityId={0}
          show={show} // {props.show}
          onHide={() => {
            setShow(false);
          }}
        />
      </div>

      <Footer />
    </>
  );
}
Example #15
Source File: mygroups.js    From SpotifyParty with MIT License 4 votes vote down vote up
render() {

        return (
            <div className="fullsize">
                { this.state.user !== null ?
                    <div className="fullsize">

                        <Accordion>
                            <Accordion.Toggle as={Card.Header} eventKey={1}>
                                Create Group
                            </Accordion.Toggle>
                            <Accordion.Collapse eventKey={1}>
                                <Card.Body>
                                    <form onSubmit={this.handleAddGroupSubmit}>
                                        <Form>
                                            <Form.Group>
                                            <Form.Control className="input" onChange={this.handleInputChange} name="newGroup" type="text" placeholder="Enter name" value={this.state.newGroup}/>
                                            </Form.Group>
                                            <Button className="btnAddPlaylist" variant="success" type="submit">
                                                Create
                                            </Button>
                                        </Form>
                                    </form>
                                </Card.Body>
                            </Accordion.Collapse>
                        </Accordion>
                        { this.state.groups !== null ?
                            <Accordion defaultActiveKey="0">
                                {   this.state.groups.map((group, index) =>
                                    {
                                        return (
                                        <Card>
                                            <Accordion.Toggle as={"button"} className="btn btn-secondary" onClick={this.handleSelectedGroup} value={group.groupname} eventKey={index}>
                                                {group.groupname}
                                            </Accordion.Toggle>
                                            <Accordion.Collapse eventKey={index}>
                                                <Card.Body>
                                                    <h4>Members</h4>
                                                    <ul id="MemberList">
                                                        {group.members.map((member, i) => {
                                                            var displayName = member.split("@")[0];
                                                            return(<h6>{displayName}</h6>)
                                                            })
                                                        }
                                                    </ul>
                                                    <Accordion>
                                                        <Accordion.Toggle as={Button} eventKey={3}>
                                                            Add Member
                                                        </Accordion.Toggle>
                                                       
                                                        <Accordion.Collapse eventKey={3}>
                                                            <Card.Body>
                                                                <form onSubmit={this.handleAddMemberSubmit}>
                                                                    <Form role="form">
                                                                        <Form.Group>
                                                                            <Form.Control name="newMemberGroup" type="hidden" value={this.state.groups[index].groupname}/>
                                                                            <Form.Control onChange={this.handleInputChange} name="newMember" type="email" placeholder="Enter email" value={this.state.newMember}/>
                                                                            
                                                                            <Button className="btnAddPlaylist" variant="success" type="submit">
                                                                                Add
                                                                            </Button>
                                                                        </Form.Group>
                                                                    </Form>
                                                                </form>
                                                            </Card.Body>
                                                        </Accordion.Collapse>
                                                    </Accordion>
                                                    <h4 className="labelPlaylist">Playlists</h4>
                                                    <div id="fixedspacing">
                                                        <p></p>
                                                    </div>
                                                    <ToggleButtonGroup type="radio" name="playlists" vertical onChange={this.handleSelectedPlaylist}>
                                                        {group.playlists.map((playlist, i) => {
                                                            return(
            
                                                                <ToggleButton id="playlistbtns" value={[this.state.groups[index].playlists[i],this.state.groups[index].groupname]} >{playlist.name}</ToggleButton>
                                                                
                                                            )
                                                        })
                                                        }
                                                    </ToggleButtonGroup>
                                                    <div id="fixedspacing">
                                                        <p></p>
                                                    </div>
                                                    <Accordion>
                                                        <Accordion.Toggle as={Button} eventKey={2}>
                                                            Create Playlist
                                                        </Accordion.Toggle>
                                                       
                                                        <Accordion.Collapse eventKey={2}>
                                                            <Card.Body>
                                                                <form onSubmit={this.handleAddPlaylistSubmit}>
                                                                    <Form role="form">
                                                                        <Form.Group>
                                                                            <Form.Control name="newPlaylistGroup" type="hidden" value={this.state.groups[index].groupname}/>
                                                                            <Form.Control onChange={this.handleInputChange} name="newPlaylist" type="text" placeholder="Enter name" value={this.state.newPlaylist}/>
                                                                            
                                                                            <Button className="btnAddPlaylist" variant="success" type="submit">
                                                                                Create
                                                                            </Button>
                                                                        </Form.Group>
                                                                    </Form>
                                                                </form>
                                                            </Card.Body>
                                                        </Accordion.Collapse>
                                                    </Accordion>
                                              </Card.Body>
                                            </Accordion.Collapse>
                                        </Card>
                                        
                                        )
                                    })
                                }
                            </Accordion> 
                        :
                            <div>
                                
                            </div>
                        }
                            
                    </div>
                    :
                    <h4>Not logged in</h4>
                }
                    
                
            </div>
        );
    }