@ant-design/icons#BarsOutlined JavaScript Examples

StyledBarsOutlined = styled(BarsOutlined)`
  color: ${colors.black};
  font-size: 19px;
  display: flex;
  align-items: center;

  ${media.tablet`
    display: none;
  `}
`

render() {
    return (

      <Layout className="layout-style">
        <Tabs activeKey={this.state.key} onTabClick={async (key) => {
          await this.props.history.push("/Admin/" + key)
          if (this.props.location.pathname === "/Admin/" + key) this.setState({ key: key })

        }} style={{ overflowY: "auto", overflowX: "auto" }}>
          <TabPane
            tab={<span> Home </span>}
            key=""
          >
            <h1>Welcome to Sieberrsec CTF Platform's admin panel.</h1>
            <h1>Click on any of the tabs above to manage different parts of the portal.</h1>

            <div className="settings-responsive2" style={{ display: "flex", justifyContent: "space-around" }}>
              <Card className="settings-card">
                <Button type='primary' onClick={this.downloadBackup} loading={this.state.backupLoading}><DownloadOutlined /> Download Backup</Button>
                <p>Download all the data stored in the platform's database. Data can be uploaded onto a different platform/a later date to restore all the data</p>
              </Card>

              <Divider type="vertical" style={{ height: "inherit" }} />

              <Card className="settings-card">
                <div style={{width: "50%"}}>
                  <Dragger
                    fileList={this.state.fileList}
                    disabled={this.state.loadingUpload}
                    accept=".json"
                    maxCount={1}
                    onChange={(file) => {
                      if (file.fileList.length > 0) this.setState({ noFile: false })
                      else this.setState({ noFile: true })
                      this.setState({ fileList: file.fileList })
                    }}
                    beforeUpload={(file) => {
                      return false
                    }}>
                    <h4>Drag and drop backup .json file to upload.</h4><br/>
                    <p>Then, click the Upload button</p>
                  </Dragger>
                  <Button type="primary" icon={<UploadOutlined />} style={{ marginTop: "3ch" }} disabled={this.state.noFile} loading={this.state.loadingUpload} onClick={() => {
                    confirm({
                      confirmLoading: this.state.loadingUpload,
                      title: 'Are you sure you want to restore all platform data to this JSON file? This action is irreversible.',
                      icon: <ExclamationCircleOutlined />,
                      onOk: (close) => { this.uploadBackup(close) },
                      onCancel: () => { },
                  });
                    this.uploadBackup
                    }}>Upload Backup</Button>
                </div>
                <p>Restore and upload data stored in a backup json file. <span style={{ color: "#d32029" }}><b>Warning: This <u>WILL OVERRIDE ALL EXISTING DATA</u> stored in this platform</b> (including the current account used to upload the backup). Please re-login after restoration is completed.</span></p>
              </Card>
            </div>
          </TabPane>
          <TabPane
            tab={<span><NotificationOutlined />Announcements</span>}
            key="Announcements"
          >
            <AdminManageAnnouncements />
          </TabPane>
          <TabPane
            tab={<span><UserOutlined />Users</span>}
            key="Users"
          >
            <AdminUsers></AdminUsers>
          </TabPane>
          <TabPane
            tab={<span><AppstoreOutlined />Challenges</span>}
            key="Challenges"
          >
            <AdminChallenges history={this.props.history} location={this.props.location}></AdminChallenges>
          </TabPane>
          <TabPane
            tab={<span><BarsOutlined />Transactions</span>}
            key="Submissions"
          >
            <AdminSubmissions></AdminSubmissions>
          </TabPane>
          <TabPane
            tab={<span><MailOutlined />Email Settings</span>}
            key="Emails"
          >
            <AdminEmails></AdminEmails>
          </TabPane>
        </Tabs>



      </Layout>
    );
  }

ProjectWorkspace = ({ project,projects,selectedProject,createProject }) => {

  const [ showNewProject, setShowNewProject ] = useState(true);
  const [ newProject, setNewProject ] = useState({name:"",user:""});

  const addProject = async (values) => {
    const result = await Http.post(values,'/api/projects/createProject');
    if(result){
      console.log(result);
      createProject(result);
      selectedProject(result.id);
      ///TODO
      //createUser(result);
    }   
}  

  useEffect(()=> {
    setShowNewProject(true);
  },[project]);


  return (

    (project.id === "add") ?    <Modal
    visible={showNewProject}
    title="Crear Proyecto"
    destroyOnClose={true}
    onCancel={()=> {setShowNewProject(!showNewProject);selectedProject(projects[1].id)}}
    onOk={()=>{addProject(newProject)}}
    okText="Nuevo Proyecto"
    cancelText="Cancelar"
          >
      <Form>

      <Form.Item
        label="Nombre del Proyecto"
        name="name"
          rules={[{ required: true, message: 'Pon un nombre al proyecto' }]}
        >
        <Input onChange={(e)=>{
          setNewProject({...newProject,[e.target.id]:e.target.value})          
          }}/>
      </Form.Item>

      <Form.Item
        label="Creador como alumno del proyecto"
        name="user"
          rules={[{ message: 'Usuario de la sesión asignado al proyecto' }]}
        >
        <Checkbox onChange={(e)=>{setNewProject({...newProject,[e.target.id]:(e.target.checked)?true:false})}}/>
      </Form.Item>
  
      </Form>
    </Modal>
  : 
    <Tabs defaultActiveKey="1" className="projectWorkspace">
      <TabPane
        tab={
          <span>
            <BarsOutlined />
            Detalles
          </span>
        }
        key="1"
      >
        <ProjectDescription/>
      </TabPane>
      <TabPane
        tab={
          <span>
            <InsertRowAboveOutlined />
            Kanban
          </span>
        }
        key="2"
      >
        <Kanban/>
      </TabPane>
      <TabPane
        tab={
          <span>
            <StarOutlined />
            Calificaciones
          </span>
        }
        key="3"
      >
        Notas de Angel
        Notas de Diego
        Notas de Manuel Maria
      </TabPane>
    </Tabs>
  );
}

Menu = () => {
    const [deadlines, setDeadlines] = useState([]);
    const [existingPinnedDeadline, setExistingPinnedDeadline] = useState({});

    useEffect(() => {
        chrome.storage.sync.get(['deadlines', 'pinned'], data => {
            console.log(data);
            if (!data) {
                return;
            }

            if (!!data.pinned) {
                setExistingPinnedDeadline(data.pinned);
            }

            if (!!data.deadlines) {
                setDeadlines(data.deadlines);
            }

        });
    }, []);

    const newTabReload = () => {
        chrome.tabs.getCurrent(tab => {
            if (tab.url === newTabURL) {
                chrome.tabs.reload();
            }
        });
    }

    const handleDelete = (id, index) => {
        const newDeadlines = [...deadlines.slice(0, index), ...deadlines.slice(index + 1)];
        chrome.storage.sync.set({ deadlines: newDeadlines }, () => {
            console.log(`Deadline with ID ${id} has been deleted`);
            setDeadlines(newDeadlines);
            newTabReload();
        });
    }

    const handleAdd = ({ name, start, end, priority }) => {
        const deadline = {
            id: Date.now(),
            name,
            start: start.toJSON(),
            end: end.toJSON(),
            priority
        };

        const newDeadlines = [...deadlines, deadline];

        chrome.storage.sync.set({ deadlines: newDeadlines }, function () {
            console.log('new goal/plan has been added');
            setDeadlines(newDeadlines);
            newTabReload();
        });
    }

    const handlePin = (index) => {
        const pinnedDeadline = deadlines[index];
        const newDeadlines = [...deadlines.slice(0, index), ...deadlines.slice(index + 1)];

        // check if there is no existing pinned deadline
        if (!isEmptyObject(existingPinnedDeadline)) {
            newDeadlines.push(existingPinnedDeadline);
        }

        // if there is an existing pinned deadline then swap
        chrome.storage.sync.set({
            deadlines: newDeadlines,
            pinned: pinnedDeadline,
        }, function () {
            console.log('a new pinned deadline has been set');
            setExistingPinnedDeadline(pinnedDeadline)
            setDeadlines(newDeadlines);
            newTabReload();
        });
    };

    const handleUnpin = () => {
        if (isEmptyObject(existingPinnedDeadline)) {
            return;
        }

        deadlines.push(existingPinnedDeadline);
        chrome.storage.sync.set({
            deadlines,
            pinned: {},
        }, function () {
            console.log('a new pinned deadline has been set');
            setExistingPinnedDeadline({});
            setDeadlines(deadlines);
            newTabReload();
        });
    }

    return (
        <StyledTabs tabBarExtraContent={<StyledSetting twoToneColor="#a6a6a6" />} defaultActiveKey="1" centered
            animated={true}>
            <TabPane tab={
                <span>
                    <AimOutlined />
                    New
                </span>
            } key="1">
                <Submission onSubmit={handleAdd} />
            </TabPane>
            <TabPane tab={
                <span>
                    <BarsOutlined />
                    List
                </span>
            } key="2">
                <DeadlineList
                    pinned={isEmptyObject(existingPinnedDeadline) ? undefined : existingPinnedDeadline}
                    data={deadlines}
                    onPin={handlePin}
                    onUnpin={handleUnpin}
                    onDelete={handleDelete} />
            </TabPane>
        </StyledTabs>
    );
}