@fortawesome/free-solid-svg-icons#faTrash JavaScript Examples

The following examples show how to use @fortawesome/free-solid-svg-icons#faTrash. 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: RecordList.js    From GB-GCGC with MIT License 6 votes vote down vote up
render(){
        const {redirect} = this.state;

        if(redirect){
            return <Redirect to={"/TrainingBoardEdit"}/>
        }
    return (
          <tr>
                <td>
                    {this.props.obj.from_date}
                </td>
                <td>
                    {this.props.obj.to_date}
                </td>
                <td>
                    {this.props.obj.name_of_the_program}
                </td>
                <td>
                    {this.props.obj.status}
                </td>
                <td>
                    <Tooltip title="Edit" placement="left">
                        <Link to={"/edit/"+this.props.obj.id} ><FontAwesomeIcon icon={faEdit} className="ml-2 p-1 fa-lg" style={{backgroundColor:'#2A324B',color:'white',fontSize:'20',borderRadius:'10'}}/></Link>
                    </Tooltip>
                    <Tooltip title="Delete" placement="right">
                        <Link><FontAwesomeIcon icon={faTrash} onClick={this.delete} className="ml-2 p-1" style={{backgroundColor:'#2A324B',color:'white',fontSize:'20',borderRadius:'10'}}/></Link>
                    </Tooltip>
                </td>
            </tr>  
    )
    }
Example #2
Source File: RecordListuserstaff.js    From GB-GCGC with MIT License 6 votes vote down vote up
render(){
    	const {redirect} = this.state;

        if(redirect){
            return <Redirect to={"/user-staff"}/>
        }
    	return (
        <tr>
            <td>{this.props.obj.Emp_Id}</td>
            <td align="left">{this.props.obj.Emp_Name}</td>
            <td>{this.props.obj.Email_id}</td>
            <td>{this.props.obj.Campus}</td>
            <td>{this.props.obj.Department}</td>
            <td>{this.props.obj.Mobile_No}</td>
            <td>
                <Tooltip title="Edit" placement="left">
                    <Link to={"/edituserstaff/"+this.props.obj.Emp_Id} ><FontAwesomeIcon icon={faEdit} className="ml-2 p-1 fa-lg" style={{backgroundColor:'#2A324B',color:'white',fontSize:'20',borderRadius:'10'}}/></Link>
                </Tooltip>
                <Tooltip title="Delete" placement="right">
                    <FontAwesomeIcon icon={faTrash} onClick={this.deletestaff} className="ml-2 p-1" style={{backgroundColor:'#2A324B',color:'white',fontSize:'20',borderRadius:'10'}}/>
                </Tooltip>
            </td>        
        </tr>  
        )
    }
Example #3
Source File: RecordsListPlacement.js    From GB-GCGC with MIT License 6 votes vote down vote up
render(){
        const {redirect} = this.state;

        if(redirect){
            return <Redirect to={"/PlacementEditBoard"}/>
        }
    return (
        
        //let count = {this.state};
          <tr>
              <td>
                  {this.props.obj.sno}
              </td>
                <td>
                    {this.props.obj.Company_name}
                </td>
                <td>
                    {this.props.obj.Date}
                </td>
                <td>
                    {this.props.obj.CTC}
                </td>
                <td>
                    {this.props.obj.status}
                </td>
                <td>
                    <Tooltip title="Edit" placement="left">
                        <Link to={"/editplacement/"+1} ><FontAwesomeIcon icon={faEdit} className="ml-2 p-1 fa-lg" style={{backgroundColor:'#2A324B',color:'white',fontSize:'20',borderRadius:'10'}}/></Link>
                    </Tooltip>
                    <Tooltip title="Delete" placement="right">
                        <Link><FontAwesomeIcon icon={faTrash} onClick={this.delete} className="ml-2 p-1" style={{backgroundColor:'#2A324B',color:'white',fontSize:'20',borderRadius:'10'}}/></Link>
                    </Tooltip>
                </td>
            </tr>  
    )
    }
Example #4
Source File: icons.js    From WirtBot with GNU Affero General Public License v3.0 6 votes vote down vote up
library.add(
  faFileDownload,
  faTrash,
  faBars,
  faCheckSquare,
  faCheck,
  faPlus,
  faCogs,
  faServer,
  faLaptop,
  faMobileAlt
);
Example #5
Source File: App.js    From todo-list-react with MIT License 5 votes vote down vote up
library.add(faTrash)
Example #6
Source File: FilePath.jsx    From UniDrive with GNU General Public License v2.0 5 votes vote down vote up
render() {
    const {
      email, folder, oId, pIndex, updatePath, userId, shareFile, moveWithin,
    } = this.props;

    const deleteFunc = loadAuthParam(email, this.delete);
    const renameFunc = loadAuthParam(email, this.rename);
    const starFunc = loadAuthParam(email, this.star);
    const findPermissionFunc = loadAuthParam(email, this.findPermission);
    const findFilePermissionFunc = loadAuthParam(email, this.findFilePermission);
    const deletePermissionFunc = loadAuthParam(email, this.deletePermission);
    return (
      <span className="file-path">
        <span>
          {' '}
          <FontAwesomeIcon icon={faChevronRight} />
          <ContextMenuTrigger id={folder.id + userId.toString() + oId.toString()}>
            <button type="button" className="path-btn" onClick={() => updatePath(userId, oId, pIndex)}>{folder.name}</button>
          </ContextMenuTrigger>
          <ContextMenu className="context-menu" id={folder.id + userId.toString() + oId.toString()}>
            <MenuItem className="menu-item" onClick={() => window.open(folder.webViewLink, 'blank')}>
              <FontAwesomeIcon className="faGoogle menu-icon" icon={faGoogleDrive} />
              View on Google Drive
            </MenuItem>
            <hr className="divider" />
            <MenuItem className="menu-item" onClick={() => shareFile(folder.id, window.prompt('Email Address of sharee: '))}>
              <FontAwesomeIcon className="faShare menu-icon" icon={faShare} />
              Share
            </MenuItem>
            <MenuItem className="menu-item" onClick={() => moveWithin(userId, folder, 'root')}>
              <FontAwesomeIcon className="faArrowRight menu-icon" icon={faArrowRight} />
              Move to Root
            </MenuItem>
            <MenuItem className="menu-item" onClick={() => renameFunc()}>
              <FontAwesomeIcon className="faPencil menu-icon" icon={faPencilAlt} />
              Rename
            </MenuItem>
            <MenuItem className="menu-item" onClick={() => starFunc()}>
              <FontAwesomeIcon className="faStar menu-icon" icon={faStar} />
              { (folder.starred) ? 'Remove From Starred' : 'Add to Starred' }
            </MenuItem>
            <hr className="divider" />
            <MenuItem className="menu-item" onClick={() => { if (window.confirm('This item and all its contents will be placed in the trash. Proceed?')) { deleteFunc(findPermissionFunc, findFilePermissionFunc, deletePermissionFunc); } }}>
              <FontAwesomeIcon className="menu-icon" icon={faTrash} />
              Delete
            </MenuItem>
          </ContextMenu>
        </span>
      </span>
    );
  }
Example #7
Source File: Remove.jsx    From covid with GNU General Public License v3.0 5 votes vote down vote up
Icon = <FontAwesomeIcon icon={faTrash} />
Example #8
Source File: icon.js    From uptime-kuma with MIT License 5 votes vote down vote up
library.add(
    faArrowAltCircleUp,
    faCog,
    faEdit,
    faEye,
    faEyeSlash,
    faList,
    faPause,
    faPlay,
    faPlus,
    faSearch,
    faTachometerAlt,
    faTimes,
    faTimesCircle,
    faTrash,
    faCheckCircle,
    faStream,
    faSave,
    faExclamationCircle,
    faBullhorn,
    faArrowsAltV,
    faUnlink,
    faQuestionCircle,
    faImages,
    faUpload,
    faCopy,
    faCheck,
    faFile,
    faAward,
    faLink,
    faChevronDown,
    faSignOutAlt,
    faPen,
    faExternalLinkSquareAlt,
    faSpinner,
    faUndo,
    faPlusCircle,
    faAngleDown,
    faLink,
);
Example #9
Source File: icons.js    From attestation-couvre-feu-covid-19 with MIT License 5 votes vote down vote up
library.add(faTrash)
Example #10
Source File: index.js    From Artion-Client with GNU General Public License v3.0 5 votes vote down vote up
TrashIcon = <FontAwesomeIcon icon={faTrash} color="#007bff" />
Example #11
Source File: activitycarddropdown.js    From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 5 votes vote down vote up
ActivityCardDropDown = ({ iconColor }) => {
  const IconColor = iconColor ? iconColor : "#084892";
  const dispatch = useDispatch();
  return (
    <div className="curriki-utility-activity-dropdown">
      <Dropdown className="activity-dropdown check ">
        <Dropdown.Toggle className="activity-dropdown-btn">
          <FontAwesomeIcon
            icon={faEllipsisV}
            style={{ fontSize: "13px", color: IconColor, marginLeft: "5px" }}
          />
          {/* <span>EditActivity</span> */}
        </Dropdown.Toggle>

        <Dropdown.Menu>
          <Dropdown.Item
            onClick={() => {
              dispatch({
                type: "SET_ACTIVE_ACTIVITY_SCREEN",
                payload: "addactivity",
              });
            }}
          >
            <FontAwesomeIcon icon={faEdit} className="mr-2" />
            Edit
          </Dropdown.Item>

          <Dropdown.Item>
            <FontAwesomeIcon icon={faCopy} className="mr-2" />
            Duplicate
          </Dropdown.Item>
          <Dropdown.Item>
            <FontAwesomeIcon icon={faTrash} className="mr-2" />
            Delete
          </Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown>
    </div>
  );
}
Example #12
Source File: UserStudents.js    From GB-GCGC with MIT License 5 votes vote down vote up
render(){
        const {redirect} = this.state;
        if(redirect){
            return <Redirect to={"/user-student"}/>
        }
        if(this.props.obj.Branch==="CIVIL" || this.props.obj.Branch==="Civil" || this.props.obj.Branch==="EEE"){
            return(
            <tr>
                <td>{this.props.obj.id}</td>
                <td align="left">{this.props.obj.fname} {this.props.obj.mname} {this.props.obj.lname}</td>
                <td>{this.props.obj.Branch}</td>
                <td>{this.props.obj.Branch}</td>
                <td>{this.props.obj.YOP}</td>
                <td>{this.props.obj.Faculty_Coordinator}</td>
                <td>
                    <Tooltip title="Delete" placement="right">
                        <FontAwesomeIcon icon={faTrash} onClick={this.delete} className="ml-2 p-1" style={{backgroundColor:'#2A324B',color:'white',fontSize:'20',borderRadius:'10'}}/>
                    </Tooltip>
                </td>
            </tr>
            );
        }
        else{
            return(
                <tr>
                    <td>{this.props.obj.id}</td>
                    <td align="left">{this.props.obj.fname} {this.props.obj.mname} {this.props.obj.lname}</td>
                    <td>{this.props.obj.Branch.slice(0,3)}</td>
                    <td>{this.props.obj.Branch.slice(3,5)}</td>
                    <td>{this.props.obj.YOP}</td>
                    <td>{this.props.obj.Faculty_Coordinator}</td>
                    <td>
                    <Tooltip title="Delete" placement="right">
                        <Link><FontAwesomeIcon icon={faTrash} onClick={this.delete} className="ml-2 p-1" style={{backgroundColor:'#2A324B',color:'white',fontSize:'20',borderRadius:'10'}}/></Link>
                    </Tooltip>
                </td>
                </tr>
            );
        }
    }
Example #13
Source File: LayerPanel.js    From Easy-Annotator with GNU General Public License v3.0 5 votes vote down vote up
render() {
    const { listrois, selected } = this.props;
    return (
      <div style={styles.layersWrapper}>
        {listrois &&
          listrois.map((rois, index) => {
            //Fix coloring of layer panel
            return (
              <div
                style={{
                  ...styles.layer,
                  borderColor: selected == index ? highlightColor : borderColor
                }}
                key={index}
                onClick={() => {}}
              >
                <div
                  style={{
                    ...styles.eyeWrapper,
                    borderColor:
                      selected == index ? highlightColor : borderColor
                  }}
                  onClick={() => {
                    this.props.onEyeClick(index);
                  }}
                >
                  {rois.visible ? (
                    <FontAwesomeIcon
                      onClick={() => {
                        this.props.onEyeClick;
                      }}
                      icon={faEye}
                      style={styles.eye}
                    />
                  ) : (
                    <FontAwesomeIcon
                      onClick={() => {
                        this.props.onEyeClick;
                      }}
                      icon={faEyeSlash}
                      style={styles.eye}
                    />
                  )}
                </div>
                <div
                  style={styles.textWrapper}
                  onClick={() => {
                    this.props.setSelected(index);
                  }}
                >
                  <span>{rois.label.title}</span>
                  <span>{rois.label.type}</span>
                </div>
                <div
                  style={styles.timeWrapper}
                  onClick={() => {
                    this.props.setSelected(index);
                  }}
                >
                  {rois.numSeconds}
                  <FontAwesomeIcon
                    onClick={() => {
                      this.props.onDeleteClick(index);
                    }}
                    icon={faTrash}
                    style={styles.eye}
                  />
                </div>
              </div>
            );
          })}
      </div>
    );
  }
Example #14
Source File: dropdownedit.js    From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 5 votes vote down vote up
DropDownEdit = ({ iconColor, data }) => {
  const IconColor = iconColor ? iconColor : '#084892';
  const dispatch = useDispatch();
  return (
    <div className="curriki-utility-activity-dropdown">
      <Dropdown className="activity-dropdown check ">
        <Dropdown.Toggle className="activity-dropdown-btn">
          <FontAwesomeIcon icon={faEllipsisV} style={{ fontSize: '13px', color: IconColor, marginLeft: '5px' }} />
          {/* <span>EditActivity</span> */}
        </Dropdown.Toggle>

        <Dropdown.Menu>
          <Dropdown.Item
            onClick={async () => {
              toast.info('Duplicating project...', {
                className: 'project-loading',
                closeOnClick: false,
                closeButton: false,
                position: toast.POSITION.BOTTOM_RIGHT,
                autoClose: 10000,
                icon: '',
              });
              const result = await dispatch(cloneh5pvideo(data.id));
              toast.dismiss();
              Swal.fire({
                html: result.message,
                icon: 'success',
              });
            }}
          >
            <FontAwesomeIcon icon={faCopy} className="mr-2" />
            Duplicate
          </Dropdown.Item>
          <Dropdown.Item
            className
            onClick={() => {
              Swal.fire({
                title: 'Are you sure you want to delete this activity?',
                showDenyButton: true,
                showCancelButton: true,
                confirmButtonText: 'Yes',
                denyButtonText: 'No',
              }).then((result) => {
                if (result.isConfirmed) {
                  dispatch(deleteVideo(data.id));
                }
              });
            }}
          >
            <FontAwesomeIcon icon={faTrash} className="mr-2" />
            Delete
          </Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown>
    </div>
  );
}
Example #15
Source File: UserAccessWidget.jsx    From frontend-app-library-authoring with GNU Affero General Public License v3.0 4 votes vote down vote up
UserAccessWidget = ({
  intl, library, user, multipleAdmins, setAccessLevel, removeAccess, isUser, showRemoveModal, setShowRemoveModal,
  showDeprivModal, setShowDeprivModal, isAdmin, adminLocked,
}) => (
  <Col xs={12} className="py-3">
    <Card>
      <Card.Body>
        <Badge className={`position-absolute ml-1 permy ${user.access_level}`}>
          <strong>{intl.formatMessage(messages[`library.access.info.${user.access_level}`])}</strong>&nbsp;
          <span className="font-weight-normal">{isUser && intl.formatMessage(messages['library.access.info.self'])}</span>
        </Badge>
        <Row className="py-3">
          <Col xs={12} md={6}>
            <span className="title title-2">
              <span className="font-weight-bold">{user.username}</span>
            </span>
            <span className="title px-2">
              <a href={`mailto:${user.email}`}>{user.email}</a>
            </span>
          </Col>
          {isAdmin && (
          <Col xs={12} md={6}>
            <Row>
              {(user.access_level === LIBRARY_ACCESS.ADMIN) && adminLocked && (
              <Col xs={12} className="text-center text-md-right">
                <small>{intl.formatMessage(messages['library.access.info.admin_unlock'])}</small>
              </Col>
              )}
              {user.access_level === LIBRARY_ACCESS.ADMIN && multipleAdmins && (
              <Col xs={10} className="text-left text-md-right">
                <Button size="lg" variant="secondary" onClick={() => setShowDeprivModal(true)}>
                  {intl.formatMessage(messages['library.access.remove_admin'])}
                </Button>
                <Modal
                  open={showDeprivModal}
                  title={intl.formatMessage(messages['library.access.modal.remove_admin.title'])}
                  onClose={() => setShowDeprivModal(false)}
                  body={(
                    <div>
                      <p>
                        {intl.formatMessage(
                          messages['library.access.modal.remove_admin.body'],
                          { library: library.title, email: user.email },
                        )}
                      </p>
                    </div>
                  )}
                  buttons={[
                    <Button
                      onClick={() => setAccessLevel(LIBRARY_ACCESS.AUTHOR).then(setShowDeprivModal(false))}
                    >
                      {intl.formatMessage(commonMessages['library.common.forms.button.yes'])}
                    </Button>,
                  ]}
                />
              </Col>
              )}
              {user.access_level === LIBRARY_ACCESS.READ && (
              <Col xs={10} className="text-left text-md-right">
                <Button size="lg" variant="primary" onClick={() => setAccessLevel(LIBRARY_ACCESS.AUTHOR)}>
                  {intl.formatMessage(messages['library.access.add_author'])}
                </Button>
              </Col>
              )}
              {user.access_level === LIBRARY_ACCESS.AUTHOR && (
                <>
                  <Col xs={5} className="text-left text-md-right pl-md-1">
                    <Button size="lg" variant="secondary" onClick={() => setAccessLevel(LIBRARY_ACCESS.READ)}>
                      {intl.formatMessage(messages['library.access.remove_author'])}
                    </Button>
                  </Col>
                  <Col xs={5} className="text-left text-md-right pl-md-1">
                    <Button size="lg" variant="primary" onClick={() => setAccessLevel(LIBRARY_ACCESS.ADMIN)}>
                      {intl.formatMessage(messages['library.access.add_admin'])}
                    </Button>
                  </Col>
                </>
              )}
              {(!((user.access_level === LIBRARY_ACCESS.ADMIN) && adminLocked)) && (
              <Col xs={2} className="text-right text-md-center">
                <Button
                  size="lg"
                  variant="danger"
                  onClick={() => setShowRemoveModal(true)}
                  aria-label={
                    intl.formatMessage(messages['library.access.remove_user'])
                  }
                >
                  <FontAwesomeIcon icon={faTrash} />
                </Button>
                <Modal
                  open={showRemoveModal}
                  title={intl.formatMessage(messages['library.access.modal.remove.title'])}
                  onClose={() => setShowRemoveModal(false)}
                  body={(
                    <div>
                      <p>
                        {intl.formatMessage(
                          messages['library.access.modal.remove.body'],
                          { library: library.title, email: user.email },
                        )}
                      </p>
                    </div>
                    )}
                  buttons={[
                    <Button onClick={() => removeAccess()}>
                      {intl.formatMessage(commonMessages['library.common.forms.button.yes'])}
                    </Button>,
                  ]}
                />
              </Col>
              )}
            </Row>
          </Col>
          )}
        </Row>
      </Card.Body>
    </Card>
  </Col>
)
Example #16
Source File: Details.js    From web-client with Apache License 2.0 4 votes vote down vote up
ProjectDetails = () => {
    const navigate = useNavigate();
    const { projectId } = useParams();
    const { colorMode } = useColorMode()

    const [project, updateProject] = useFetch(`/projects/${projectId}`)
    const [users] = useFetch(`/projects/${projectId}/users`)
    const destroy = useDelete(`/projects/`, updateProject);

    const handleGenerateReport = () => {
        navigate(`/projects/${project.id}/report`)
    }

    const handleManageTeam = () => {
        navigate(`/projects/${project.id}/membership`)
    }

    const onArchiveButtonClick = (project) => {
        secureApiFetch(`/projects/${project.id}`, {
            method: 'PATCH',
            body: JSON.stringify({ archived: !project.archived })
        })
            .then(() => {
                updateProject();
                actionCompletedToast('The project has been updated.');
            })
            .catch(err => console.error(err))
    }

    if (project && project.is_template) {
        return <Navigate to={`/projects/templates/${project.id}`} />
    }

    return <>
        <div className='heading'>
            <Breadcrumb>
                <Link to="/projects">Projects</Link>
            </Breadcrumb>
            {project && <>
                <PageTitle value={`${project.name} project`} />
                <ProjectTeam project={project} users={users} />

                <ButtonGroup isAttached>
                    <RestrictedComponent roles={['administrator', 'superuser', 'user']}>
                        {!project.archived && <>
                            <LinkButton href={`/projects/${project.id}/edit`}>Edit</LinkButton>
                            <SecondaryButton onClick={handleGenerateReport} leftIcon={<IconClipboardCheck />}>Report</SecondaryButton>
                            <SecondaryButton onClick={handleManageTeam} leftIcon={<IconUserGroup />}>Membership</SecondaryButton>
                        </>}

                        <Menu>
                            <MenuButton as={IconButton} aria-label='Options' icon={<FontAwesomeIcon icon={faEllipsis} />} variant='outline' />
                            <MenuList>
                                <MenuItem onClick={() => onArchiveButtonClick(project)}>{project.archived ? 'Unarchive' : 'Archive'}</MenuItem>
                                <MenuItem icon={<FontAwesomeIcon icon={faTrash} />} color={colorMode === "light" ? "red.500" : "red.400"} onClick={() => destroy(project.id)}>Delete</MenuItem>
                            </MenuList>
                        </Menu>
                    </RestrictedComponent>
                </ButtonGroup>
            </>}
        </div>
        {!project ? <Loading /> :
            <>
                <Title title={project.name} type="Project" icon={<IconFolder />} />

                <Tabs>
                    <TabList>
                        <Tab>Details</Tab>
                        <Tab>Targets</Tab>
                        <Tab>Tasks</Tab>
                        <Tab>Vulnerabilities</Tab>
                        <Tab>Notes</Tab>
                        <Tab>Attachments</Tab>
                        <Tab>Vault</Tab>
                    </TabList>
                    <TabPanels>
                        <TabPanel><ProjectDetailsTab project={project} /></TabPanel>
                        <TabPanel><ProjectTargets project={project} /></TabPanel>
                        <TabPanel><ProjectTasks project={project} /></TabPanel>
                        <TabPanel><ProjectVulnerabilities project={project} /></TabPanel>
                        <TabPanel><ProjectNotesTab project={project} /></TabPanel>
                        <TabPanel><ProjectAttachmentsTab project={project} /></TabPanel>
                        <TabPanel><ProjectVaultTab project={project} /></TabPanel>
                    </TabPanels>
                </Tabs>
            </>
        }
    </>
}
Example #17
Source File: User.jsx    From UniDrive with GNU General Public License v2.0 4 votes vote down vote up
render() {
    const { looseFilesIsDisplayed } = this.state;

    const {
      closePath, filterFunc, idToken, looseFileList, moveExternal,
      moveWithin, openFolder, openFolderList, refreshFunc, removeFunc, sortFunc,
      topLevelFolderList, updatePath, userId,
    } = this.props;

    const { name, email, picture } = parseIDToken(idToken);
    const createFunc = loadAuthParam(email, this.create);
    return (
      <ContextMenuTrigger className="user" id={userId.toString()}>
        <button
          type="button"
          className="user-banner"
          onClick={() => this.viewToggle()}
          onKeyDown={() => this.viewToggle()}
        >
          <img className="profile-picture" src={picture} alt="Account profile" />
          <span className="profile-text">
            {' '}
            <span className="profile-name">{name}</span>
            {' '}
            <span className="profile-email">
              (
              {email}
              )
            </span>
          </span>
          <ContextMenuTrigger className="context-menu" id={userId.toString()} holdToDisplay={0}>
            <FontAwesomeIcon className="fa-ellipsis menu-icon" icon={faEllipsisV} size="lg" onClick={(event) => this.handleIconClick(event, () => {})} title="Options" />
          </ContextMenuTrigger>
        </button>
        <ContextMenu className="context-menu" id={userId.toString()}>
          <MenuItem className="menu-item upload">
            <SubMenu
              className="context-menu sub-menu-upload"
              title={
              (
                <span>
                  <FontAwesomeIcon className="fa-plus menu-icon" icon={faPlus} onClick={(event) => this.handleIconClick(event, () => {})} />
                  Create New...
                </span>
              )
            }
            >
              <MenuItem className="menu-item" onClick={() => createFunc('application/vnd.google-apps.folder', 'New Folder')}>
                <FontAwesomeIcon className="fa-folder menu-icon" icon={faFolderPlus} />
                Folder
              </MenuItem>
              <hr className="divider" />
              <MenuItem className="menu-item" onClick={() => createFunc('application/vnd.google-apps.document', 'New Doc')}>
                <img className="menu-icon" src="https://drive-thirdparty.googleusercontent.com/16/type/application/vnd.google-apps.document" alt="Google Doc icon" />
                Google Doc
              </MenuItem>
              <MenuItem className="menu-item" onClick={() => createFunc('application/vnd.google-apps.spreadsheet', 'New Sheet')}>
                <img className="menu-icon" src="https://drive-thirdparty.googleusercontent.com/16/type/application/vnd.google-apps.spreadsheet" alt="Google Speardsheet icon" />
                Google Sheets
              </MenuItem>
              <MenuItem className="menu-item" onClick={() => createFunc('application/vnd.google-apps.presentation', 'New Presentation')}>
                <img className="menu-icon" src="https://drive-thirdparty.googleusercontent.com/16/type/application/vnd.google-apps.presentation" alt="Google Slides icon" />
                Google Slides
              </MenuItem>
              <MenuItem className="menu-item" onClick={() => createFunc('application/vnd.google-apps.form', 'New Form')}>
                <img className="menu-icon" src="https://drive-thirdparty.googleusercontent.com/16/type/application/vnd.google-apps.form" alt="Google Forms icon" />
                Google Forms
              </MenuItem>
            </SubMenu>
          </MenuItem>
          <label htmlFor={email}>
            <MenuItem className="menu-item">
              <FontAwesomeIcon className="fa-upload menu-icon" icon={faUpload} />
              <input
                type="file"
                id={email}
                className="file-input"
                onChange={(e) => this.uploadController(e, idToken)}
                multiple
              />
              Upload
            </MenuItem>
          </label>
          <MenuItem className="menu-item" onClick={(event) => this.handleIconClick(event, () => this.toggleLoose())}>
            <FontAwesomeIcon className="fa-eye-slash menu-icon" icon={(looseFilesIsDisplayed) ? faEyeSlash : faEye} />
            Toggle Folder View
          </MenuItem>
          <MenuItem className="menu-item" onClick={(event) => this.handleIconClick(event, () => refreshFunc(userId))}>
            <FontAwesomeIcon className="fa-sync menu-icon" icon={faSyncAlt} />
            Refresh Account
          </MenuItem>
          <MenuItem className="menu-item" onClick={(event) => this.handleIconClick(event, () => removeFunc(userId))}>
            <FontAwesomeIcon className="fa-trash menu-icon" icon={faTrash} />
            Remove Account
          </MenuItem>
        </ContextMenu>
        <div style={{ display: 'none' }} className="Files/Folders" ref={this.props.forwardRef}>
          <Filters
            filterFunc={filterFunc}
            sortFunc={sortFunc}
            userId={userId}
          />
          <TopLevelFolderList
            email={email}
            userId={userId}
            topLevelFolderList={topLevelFolderList}
            shareFile={loadAuthParam(email, this.shareFile)}
            moveWithin={moveWithin}
            moveExternal={moveExternal}
            refreshFunc={refreshFunc}
            openFolder={openFolder}
          />
          <OpenFolderList
            email={email}
            userId={userId}
            openFolderList={openFolderList}
            shareFile={loadAuthParam(email, this.shareFile)}
            moveWithin={moveWithin}
            moveExternal={moveExternal}
            refreshFunc={refreshFunc}
            openFolder={openFolder}
            closePath={closePath}
            updatePath={updatePath}
          />
          {looseFilesIsDisplayed && (
            <LooseFileList
              email={email}
              userId={userId}
              looseFileList={looseFileList}
              shareFile={loadAuthParam(email, this.shareFile)}
              moveWithin={moveWithin}
              moveExternal={moveExternal}
              refreshFunc={refreshFunc}
            />
          )}
        </div>
      </ContextMenuTrigger>
    );
  }
Example #18
Source File: File.jsx    From UniDrive with GNU General Public License v2.0 4 votes vote down vote up
// export default function File(props) {
  render() {
    const {
      data, email, moveWithin, oId, openFolder, shareFile, userId,
    } = this.props;

    const {
      id, webViewLink, iconLink, name, mimeType, starred,
    } = data;

    const copyFunc = loadAuthParam(email, this.copy);
    const deleteFunc = loadAuthParam(email, this.delete);
    const renameFunc = loadAuthParam(email, this.rename);
    const starFunc = loadAuthParam(email, this.star);
    const findPermissionFunc = loadAuthParam(email, this.findPermission);
    const findFilePermissionFunc = loadAuthParam(email, this.findFilePermission);
    const deletePermissionFunc = loadAuthParam(email, this.deletePermission);
    if (mimeType !== 'application/vnd.google-apps.folder') {
      // if file
      return (
        <div>
          <ContextMenuTrigger id={id + userId.toString() + oId.toString()}>
            <a href={webViewLink} target="blank">
              <div className="file-container">
                <div className="file-image-container">
                  <img className="file-img" src={iconLink} alt="File icon" />
                </div>
                <div className="file-name">
                  {name}
                </div>
              </div>
            </a>
          </ContextMenuTrigger>
          <ContextMenu className="context-menu" id={id + userId.toString() + oId.toString()}>
            <MenuItem className="menu-item" onClick={() => window.open(webViewLink, 'blank')}>
              <FontAwesomeIcon className="faOpen menu-icon" icon={faFolderOpen} />
              Open
            </MenuItem>
            <hr className="divider" />
            <MenuItem className="menu-item" onClick={() => shareFile(id, window.prompt('Email Address of sharee: '))}>
              <FontAwesomeIcon className="faShare menu-icon" icon={faShare} />
              Share
            </MenuItem>
            <MenuItem className="menu-item" onClick={() => moveWithin(userId, data, 'root')}>
              <FontAwesomeIcon className="faArrowRight menu-icon" icon={faArrowRight} />
              Move to Root
            </MenuItem>
            <MenuItem className="menu-item" onClick={() => renameFunc()}>
              <FontAwesomeIcon className="faPencil menu-icon" icon={faPencilAlt} />
              Rename
            </MenuItem>
            <MenuItem className="menu-item" onClick={() => copyFunc()}>
              <FontAwesomeIcon className="faCopy menu-icon" icon={faCopy} />
              Make a copy
            </MenuItem>
            <MenuItem className="menu-item" onClick={() => starFunc()}>
              <FontAwesomeIcon className="faStar menu-icon" icon={faStar} />
              { (starred) ? 'Remove From Starred' : 'Add to Starred' }
            </MenuItem>
            <hr className="divider" />
            <MenuItem className="menu-item" onClick={() => { if (window.confirm('This item will be placed in the trash. Proceed?')) { deleteFunc(findPermissionFunc, findFilePermissionFunc, deletePermissionFunc); } }}>
              <FontAwesomeIcon className="menu-icon" icon={faTrash} />
              Delete
            </MenuItem>
          </ContextMenu>
        </div>
      );
    }
    // if folder
    return (
      <div>
        <ContextMenuTrigger id={id + userId.toString() + oId.toString()}>
          <div className="folder-container" onClick={() => openFolder(userId, oId, data)}>
            <div className="folder-content-container">
              <img className="folder-img" src={iconLink} alt="File icon" />
              <p className="folder-name">{name}</p>
            </div>
          </div>
        </ContextMenuTrigger>
        <ContextMenu className="context-menu" id={id + userId.toString() + oId.toString()}>
          <MenuItem className="menu-item" onClick={() => window.open(webViewLink, 'blank')}>
            <FontAwesomeIcon className="faGoogle menu-icon" icon={faGoogleDrive} />
            View on Google Drive
          </MenuItem>
          <hr className="divider" />
          <MenuItem className="menu-item" onClick={() => shareFile(id, window.prompt('Email Address of sharee: '))}>
            <FontAwesomeIcon className="faShare menu-icon" icon={faShare} />
            Share
          </MenuItem>
          <MenuItem className="menu-item" onClick={() => moveWithin(userId, data, 'root')}>
            <FontAwesomeIcon className="faArrowRight menu-icon" icon={faArrowRight} />
            Move to Root
          </MenuItem>
          <MenuItem className="menu-item" onClick={() => renameFunc(userId, id)}>
            <FontAwesomeIcon className="faPencil menu-icon" icon={faPencilAlt} />
            Rename
          </MenuItem>
          <MenuItem className="menu-item" onClick={() => starFunc()}>
            <FontAwesomeIcon className="faStar menu-icon" icon={faStar} />
            { (starred) ? 'Remove From Starred' : 'Add to Starred' }
          </MenuItem>
          <hr className="divider" />
          <MenuItem className="menu-item" onClick={() => { if (window.confirm('This item will become unrecoverable. Proceed?')) { deleteFunc(findPermissionFunc, findFilePermissionFunc, deletePermissionFunc); } }}>
            <FontAwesomeIcon className="menu-icon" icon={faTrash} />
            Delete
          </MenuItem>
        </ContextMenu>
      </div>
    );
  }
Example #19
Source File: Cart.js    From amazon-next with MIT License 4 votes vote down vote up
export default function Cart({ products }) {
    const dispatch = useDispatch();
    const formattedPrices = useMemo(() => {
        const totalCost = products.reduce((acc, { price }) => acc + price, 0);
        const productsCost = totalCost - 5000;
        return {
            totalCost: formatMoney(totalCost / 100),
            productsCost: formatMoney(productsCost / 100),
        };
    }, [products]);

    function deleteProduct(productId) {
        return dispatch(removeFromCartRequest(productId));
    }

    return (
        <motion.div
            exit={{ opacity: 0 }}
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            className="h-full bg-gray-200 flex flex-col justify-between"
        >
            <div className="py-8 px-5">
                <h1 className="text-2xl font-bold text-gray-500">
                    You&apos;re Buying
                </h1>
            </div>
            {products && products.length > 0 ? (
                <motion.ul
                    variants={stagger}
                    animate="animate"
                    className="flex flex-grow flex-col w-full px-5 pb-8"
                >
                    {products &&
                        products.map(product => (
                            <motion.li
                                key={product}
                                className="flex flex-row items-center justify-between cursor-pointer"
                                variants={fadeUp}
                                initial="fadeup"
                                animate="normal"
                                exit="exit"
                            >
                                <Link href={`/details?productId=${product.id}`}>
                                    <div>
                                        <img
                                            className="w-80 p-2 rounded"
                                            src={product.image}
                                            alt={product.name}
                                            aria-label={product.name}
                                            title={product.name}
                                        />
                                        <strong className="mb-3 transition-colors duration-300 text-gray-700 hover:text-gray-800">
                                            {product.name}
                                        </strong>
                                    </div>
                                </Link>

                                <button
                                    type="button"
                                    onClick={() => deleteProduct(product.id)}
                                    className="mb-3 border-none outline-0 bg-none cursor-pointer transition-colors duration-300 text-gray-700 hover:text-gray-800"
                                >
                                    <FontAwesomeIcon icon={faTrash} size="sm" />
                                </button>
                            </motion.li>
                        ))}
                </motion.ul>
            ) : (
                <strong className="text-gray-700 text-center">
                    Empty cart
                </strong>
            )}
            <div className="flex flex-col bg-gray-300 p-5">
                <ul className="w-full">
                    <li className="flex flex-row justify-between text-gray-600 mb-2">
                        Products Count{' '}
                        <span className="text-gray-800">{products.length}</span>
                    </li>
                    <li className="flex flex-row justify-between text-gray-600 mb-2">
                        Products Cost{' '}
                        <span className="text-gray-800">
                            {products.length
                                ? formattedPrices.productsCost
                                : '$0.00'}
                        </span>
                    </li>
                    <li className="flex flex-row justify-between text-gray-600 mb-4">
                        Shipping Cost{' '}
                        <span className="text-gray-800">
                            {products.length ? '$50' : '$0.00'}
                        </span>
                    </li>
                    <li className="flex flex-row justify-between text-xl text-gray-600 mb-4">
                        Total Cost{' '}
                        <strong className="text-gray-800">
                            {formattedPrices.totalCost}
                        </strong>
                    </li>
                </ul>
            </div>
        </motion.div>
    );
}
Example #20
Source File: Component.js    From agenda with MIT License 4 votes vote down vote up
render() {
        const {modalFlag} = this.state;
        const {
            assignment, assignments
        } = this.props;
        return (
            <Container>
                <Row>
                    <Col>
                        <Button
                            className="float-right"
                            color="primary"
                            size="lg"
                            tag={Link}
                            to="/assignments/new"
                        >
                            Nueva asignación
                        </Button>
                    </Col>
                </Row>
                <hr/>
                <Row>
                    <Col>
                        <Table bordered condensed hover stripped size="sm">
                            <thead>
                                <tr>
                                    <th colSpan="4">Contacto</th>
                                    <th colSpan="3">Departamento</th>
                                    <th rowSpan="2">Acciones</th>
                                </tr>
                                <tr>
                                    <th>Nombre</th>
                                    <th>Apellido</th>
                                    <th>Direccion</th>
                                    <th>Cargo</th>

                                    <th>Nombre</th>
                                    <th>Dirección</th>
                                    <th>Decripción</th>
                                </tr>
                            </thead>
                            <tbody>
                                {assignments.map(assignment => (
                                    <tr>
                                        <td>{assignment.firstName}</td>
                                        <td>{assignment.lastName}</td>
                                        <td>{assignment.address}</td>
                                        <td>{assignment.role}</td>
                                        <td>{assignment.name}</td>
                                        <td>{assignment.departmentAddress}</td>
                                        <td>{assignment.description}</td>
                                        <td className="text-center">
                                            <ButtonGroup>
                                                <Button tag={Link} to={`/assignments/${assignment.id}`}>
                                                    <FontAwesomeIcon icon={faEdit}/>
                                                </Button>
                                                <Button
                                                    onClick={() => this.handleModal(true, assignment)}
                                                    color="danger"
                                                >
                                                    <FontAwesomeIcon icon={faTrash}/>
                                                </Button>
                                            </ButtonGroup>
                                        </td>
                                    </tr>
                                ))}
                            </tbody>
                        </Table>
                    </Col>
                </Row>
                {modalFlag && (
                    <ModalConfirm
                        title="Confirme borrado"
                        message="Estas por borrar una Asignacion"
                        onDismiss={() => this.handleModal(null)}
                        onAccept={() => this.onDelete(assignment)}
                    >
                        <div> Testing </div>
                    </ModalConfirm>
                )}
            </Container>
        );
    }
Example #21
Source File: VersionDialog.js    From Designer-Client with GNU General Public License v3.0 4 votes vote down vote up
export function VersionDialog(props) {
  const dispatch = useDispatch();

  const open = props.open;
  const handleModal = props.handleModal;
  const applicationId = props.applicationId;

  const [errorMessage, setErrorMessage] = useState();
  const [changed, setChanged] = useState(false);

  const applications = useSelector(state => state.applications);
  const loading = applications.loading;
  const application = applications.dict[applicationId]
  
  useEffect(() => {
    if(open === true) {
      setChanged(false);
      dispatch(applicationActions.getApp(applicationId)).then(
        (response) => {
          if(response.error) {
            alertActions.handleError(dispatch, response.error);
            return;
          }
        }
      );
    }
  }, [open]);

  const handleClose = (e) => {
    handleModal(applicationId, false, changed);
  }

  const handlePost = (e) => {
    dispatch(applicationActions.postStage(applicationId)).then(
      (response) => {
        if(response.error) {
          setErrorMessage(response.error);
          return;
        }
        handleModal(applicationId, false, true);
      }
    )
  }

  const deleteStage = (stageId) => {
    dispatch(applicationActions.deleteStage(stageId)).then(
      (response) => {
        if(response.error) {
          setErrorMessage(response.error);
          return;
        }
        setChanged(true);
        dispatch(applicationActions.getApp(applicationId)).then(
          (response) => {
            if(response.error) {
              alertActions.handleError(dispatch, response.error);
              return;
            }
          }
        );
      }
    )
  }

  return (
    <Dialog
      open={open}
      onClose={handleClose}
      scroll='paper'
      aria-labelledby="scroll-dialog-title"
      aria-describedby="scroll-dialog-description"
      maxWidth={'md'}
      disableBackdropClick={true}
      fullWidth={true}
    > 
      <DialogContent>
        { errorMessage &&
          <Box mt={2}>
            <Alert severity="error">{errorMessage}</Alert> 
          </Box>
        }
        { loading &&
          <Box>
            <Typography>로딩중...</Typography>
          </Box>
        }
        { !loading && application &&
          <Box>
            <SubTitle text='버전 현황'/>
            <Box maxHeight={400}>
              <TableContainer component={Paper}>
                <Table>
                  <TableHead>
                    <TableRow>
                      <TableCell align="center">id</TableCell>
                      <TableCell align="center">버전</TableCell>
                      <TableCell align="center">상태</TableCell>
                      <TableCell align="center">수정일</TableCell>
                      <TableCell align="center">생성일</TableCell>
                      <TableCell></TableCell>
                    </TableRow>
                  </TableHead>
                  <TableBody>
                    { application.stages && Array.isArray(application.stages) && application.stages.map((stage) => {
                      let button;
                      return (
                        <TableRow>
                          <TableCell align="center">{stage.id}</TableCell>
                          <TableCell align="center">v{stage.name}</TableCell>
                          <TableCell align="center">{stage.status}</TableCell>
                          <TableCell align="center">{moment(stage.updatedAt).format('YYYY-MM-DD HH:mm:ss')}</TableCell>
                          <TableCell align="center">{moment(stage.createdAt).format('YYYY-MM-DD HH:mm:ss')}</TableCell>
                          <TableCell align="center"><Button onClick={() => deleteStage(stage.id)}><FontAwesomeIcon icon={faTrash}/></Button></TableCell>
                        </TableRow>
                      );
                    })}
                  </TableBody>
                </Table>
              </TableContainer>
            </Box>
            
          </Box>
        }
      </DialogContent>
      { application &&
        <DialogActions>
          <Button onClick={handleClose} variant="contained" color="secondary">
            닫기
          </Button>
          <Button onClick={handlePost} variant="contained" color="primary" autoFocus>
            버전 {application.lastStageVersion + 1} 생성
          </Button>
        </DialogActions>
      }
      
    </Dialog>
  );
}