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

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>  
    )
    }

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>  
        )
    }

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>  
    )
    }

library.add(
  faFileDownload,
  faTrash,
  faBars,
  faCheckSquare,
  faCheck,
  faPlus,
  faCogs,
  faServer,
  faLaptop,
  faMobileAlt
);

library.add(faTrash)

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

Icon = <FontAwesomeIcon icon={faTrash} />

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

library.add(faTrash)

TrashIcon = <FontAwesomeIcon icon={faTrash} color="#007bff" />

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

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

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

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

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

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>
            </>
        }
    </>
}

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

// 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>
    );
  }

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

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

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