@material-ui/icons#Ballot JavaScript Examples

The following examples show how to use @material-ui/icons#Ballot. 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: Inbox.js    From treetracker-admin-client with GNU Affero General Public License v3.0 5 votes vote down vote up 
Inbox = ({ threads, selected, handleListItemClick }) => {
  const { paper, searchInbox, list, listItem, listText, avatar } = useStyles();
  const [search, setSearch] = useState('');

  return (
    <Paper className={paper}>
      <List className={list}>
        {threads
          .filter((thread) => {
            if (search === '') {
              return thread;
            } else if (
              thread.userName.toLowerCase().includes(search.toLowerCase())
            ) {
              return thread;
            }
          })
          .map((thread, i) => (
            <ListItem
              key={`${thread.userName}-${i}`}
              alignItems="flex-start"
              className={listItem}
              selected={thread.userName === selected}
              onClick={() => handleListItemClick(thread.userName)}
            >
              <ListItemAvatar>
                {thread.messages[0].type === 'message' ? (
                  <Avatar src={thread.avatar} className={avatar}></Avatar>
                ) : thread.messages[0].type === 'announce' ? (
                  <Announcement color="inherit" />
                ) : (
                  <Ballot color="inherit" />
                )}
              </ListItemAvatar>
              {thread.messages[0].type === 'survey' ||
              thread.messages[0].type === 'announce' ? (
                <ListItemText
                  primary={thread.messages[0].subject}
                  secondary={
                    thread.messages[0].subject
                      ? thread.messages[0].composed_at.slice(0, 10)
                      : thread.userName
                  }
                  className={listText}
                />
              ) : (
                <ListItemText primary={thread.userName} className={listText} />
              )}
              <Typography>
                {timeAgoFormatDate(
                  new Date(
                    thread.messages[thread.messages.length - 1].composed_at
                  )
                )}
              </Typography>
            </ListItem>
          ))}
      </List>
      <SearchInbox className={searchInbox} setSearch={setSearch} />
    </Paper>
  );
}
Example #2
Source File: MessageBody.js    From treetracker-admin-client with GNU Affero General Public License v3.0 4 votes vote down vote up 
SenderInformation = ({
  message,
  messageRecipient,
  responseCount,
  type,
  id,
  avatar_url,
  showCharts,
  setShowCharts,
}) => {
  const { senderInfo, senderItem, avatar, button, dataContainer } = useStyles();

  return (
    <Grid container className={senderInfo}>
      <Grid item className={senderItem}>
        {type === 'message' ? (
          <Avatar src={avatar_url} className={avatar}></Avatar>
        ) : type === 'announce' ? (
          <Announcement
            color="inherit"
            style={{ padding: '2px', fontSize: '2rem' }}
          />
        ) : (
          <Ballot
            color="inherit"
            style={{ padding: '2px', fontSize: '2rem' }}
          />
        )}
      </Grid>
      <Grid item className={senderItem}>
        <Typography variant="h5">
          {type === 'survey' || type === 'survey_response'
            ? `Survey: ${message?.survey?.title}`
            : type === 'announce'
            ? `Announcement`
            : messageRecipient}
        </Typography>

        {(type === 'survey' ||
          type === 'survey_response' ||
          type === 'announce') && (
          <>
            <Typography align="left" color="primary">
              <b>DATE:</b> {dateFormat(message?.composed_at, 'yyyy/mm/dd')}
            </Typography>
            {message?.bulk_message_recipients &&
              message.bulk_message_recipients.map((recipient, i) => (
                <Chip
                  key={`${
                    recipient.organization
                      ? recipient.organization
                      : recipient.region
                  }-${i}`}
                  label={`${
                    recipient.organization
                      ? recipient.organization
                      : recipient.region
                  }`}
                  color="primary"
                  style={{
                    color: 'white',
                    borderRadius: '6px',
                    fontSize: '.8rem',
                    margin: '0.2rem',
                  }}
                />
              ))}
            {(type === 'survey' || type === 'survey_response') && (
              <Typography>
                <b>RESPONSES:</b> {responseCount}
              </Typography>
            )}
          </>
        )}

        {type === 'message' && id && (
          <Typography align="left" color="primary">
            ID: {id}
          </Typography>
        )}
      </Grid>
      {(type === 'survey' || type === 'survey_response') && responseCount > 0 && (
        <Grid item className={dataContainer}>
          <Badge
            badgeContent={responseCount}
            color="secondary"
            overlap="circle"
            anchorOrigin={{
              vertical: 'top',
              horizontal: 'right',
            }}
          >
            {showCharts ? (
              <Button className={button} onClick={() => setShowCharts(false)}>
                Show Survey
              </Button>
            ) : (
              <Button
                className={button}
                onClick={() => setShowCharts(true)}
                disabled={responseCount === 0}
              >
                Show Survey Data
              </Button>
            )}
          </Badge>
        </Grid>
      )}
    </Grid>
  );
}