@material-ui/core#Table JavaScript Examples

The following examples show how to use @material-ui/core#Table. 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: index.js    From react-material-ui-table-row-drag-and-drop with Creative Commons Zero v1.0 Universal 8 votes vote down vote up
render() {
        return (
            <TableContainer component={Paper}>
                <Table>
                    <TableHead>
                        <TableRow>
                            <TableCell>Nr</TableCell>
                            <TableCell>Label</TableCell>
                            <TableCell align="right">Text</TableCell>
                        </TableRow>
                    </TableHead>
                    <TableBody component={DroppableComponent(this.onDragEnd)}>
                        {this.state.items.map((item, index) => (
                            <TableRow component={DraggableComponent(item.id, index)} key={item.id} >
                                <TableCell scope="row">{index + 1}</TableCell>
                                <TableCell>{item.primary}</TableCell>
                                <TableCell align="right">{item.secondary}</TableCell>
                            </TableRow>
                        ))}
                    </TableBody>
                </Table>
            </TableContainer>
        )
    }
Example #2
Source File: LeaderboardDialog.js    From dipact with GNU General Public License v3.0 7 votes vote down vote up
render() {
		return (
			<Dialog
				onEntered={helpers.genOnback(this.props.onClose)}
				disableBackdropClick={false}
				open={true}
				onClose={this.onClose}
			>
				<DialogTitle>Leaderboard</DialogTitle>
				<DialogContent>
					<TableContainer component={Paper}>
						<Table>
							<TableBody>
								{this.state.userStats.map((userStat, idx) => {
									return this.makeRow(
										idx + 1,
										userStat.Properties.User
									);
								})}
							</TableBody>
						</Table>
					</TableContainer>
				</DialogContent>
				<DialogActions>
					<Button onClick={this.onClose} color="primary">
						Close
					</Button>
				</DialogActions>
			</Dialog>
		);
	}
Example #3
Source File: table-container-generator.js    From horondi_admin with MIT License 6 votes vote down vote up
TableContainerGenerator = ({
  pagination,
  tableTitles,
  tableItems,
  count
}) => {
  const { SMALL_SIZE, DEFAULT_SIZE } = config.tableSizes;
  const dense = useSelector(selectTableDense);

  return (
    <>
      <TableContainer component={Paper}>
        <Table size={dense ? SMALL_SIZE : DEFAULT_SIZE}>
          <TableContainerHead titles={tableTitles} />
          <TableBody id='table-body'>{tableItems}</TableBody>
        </Table>
      </TableContainer>
      {pagination && count > maxItemsPerPage && <TablePaginator />}
    </>
  );
}
Example #4
Source File: order-history-table.js    From horondi_client_fe with MIT License 6 votes vote down vote up
OrderHistoryTable = ({ items }) => {
  const styles = useStyles();
  const { t } = useTranslation();

  return (
    <>
      <Divider variant='fullWidth' />
      <Table>
        <TableHead>
          <TableRow classes={{ root: styles.tableHeader }}>
            <TableCell style={{ width: '22%' }} className={styles.tableCell}>
              {t('common.product')}
            </TableCell>
            <TableCell style={{ width: '25%' }} className={styles.tableCell} />
            <TableCell style={{ width: '15%' }} className={styles.tableCell}>
              {t('common.size')}
            </TableCell>
            <TableCell style={{ width: '15%' }} className={styles.tableCell}>
              {t('common.price')}
            </TableCell>
            <TableCell style={{ width: '12%' }} className={styles.tableCell}>
              {t('common.quantity')}
            </TableCell>
            <TableCell style={{ width: '15%' }} className={styles.tableCell}>
              {t('common.total')}
            </TableCell>
          </TableRow>
        </TableHead>
        <TableBody>{items}</TableBody>
      </Table>
    </>
  );
}
Example #5
Source File: ContentPropertiesLayout.js    From Edlib with GNU General Public License v3.0 6 votes vote down vote up
function ContentPropertiesLayout(props) {
    const {
        classes,
        rows,
    } = props;
    return (
        <Table className={classes.table}>
            <TableBody>
                {rows.map(row => {
                    let contentPropertiesRowClassName = 'contentpropertiesrow';
                    if (typeof row.cssClassName !== 'undefined') {
                        contentPropertiesRowClassName += ' ' + row.cssClassName;
                    }
                    let displayValue = row.value;
                    if (typeof row.fullValue !== 'undefined') {
                        displayValue = (
                            <Tooltip
                                title={row.fullValue}
                                classes={{ tooltip: classes.tooltip }}
                                placement="top"
                            >
                                <span>{row.value}</span>
                            </Tooltip>
                        );
                    }
                    return (
                        <TableRow className={contentPropertiesRowClassName} key={row.label}>
                            <TableCell className="contentpropertieslabel">{row.label}</TableCell>
                            <TableCell className="contentpropertiesvalue">
                                {displayValue}
                            </TableCell>
                        </TableRow>
                    );
                })}
            </TableBody>
        </Table>
    );
}
Example #6
Source File: OrderService.js    From module-federation-examples with MIT License 6 votes vote down vote up
export default function OrderService() {
  const classes = useStyles();
  const serviceContext = useServiceContext();
  React.useEffect(() => {
    serviceContext.setService({ title: 'Orders' });
  }, []);
  return (
    <main className={classes.content}>
      <div className={classes.appBarSpacer} />
      <Container maxWidth="lg" className={classes.container}>
        <Grid item xs={12}>
          <Paper className={classes.paper}>
            <Typography component="h1" variant="h6" color="primary" gutterBottom>
              Orders
            </Typography>
            <Table>
              <TableHead>
                <TableRow>
                  <TableCell>Date</TableCell>
                  <TableCell>Name</TableCell>
                  <TableCell>Ship To</TableCell>
                  <TableCell>Payment Method</TableCell>
                  <TableCell align="right">Sale Amount</TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                {orders.map(order => (
                  <OrderRow order={order} key={order.id} />
                ))}
              </TableBody>
            </Table>
          </Paper>
        </Grid>
      </Container>
    </main>
  );
}
Example #7
Source File: Table.js    From react-code-splitting-2021-04-26 with MIT License 6 votes vote down vote up
export default function TableComponent({ data }) {
  const classes = useStyles();
  var keys = Object.keys(data[0]).map(i => i.toUpperCase());
  keys.shift(); // delete "id" key

  return (
    <Table className="mb-0">
      <TableHead>
        <TableRow>
          {keys.map(key => (
            <TableCell key={key}>{key}</TableCell>
          ))}
        </TableRow>
      </TableHead>
      <TableBody>
        {data.map(({ id, name, email, product, price, date, city, status }) => (
          <TableRow key={id}>
            <TableCell className="pl-3 fw-normal">{name}</TableCell>
            <TableCell>{email}</TableCell>
            <TableCell>{product}</TableCell>
            <TableCell>{price}</TableCell>
            <TableCell>{date}</TableCell>
            <TableCell>{city}</TableCell>
            <TableCell>
              <Chip label={status} classes={{root: classes[states[status.toLowerCase()]]}}/>
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
}
Example #8
Source File: certificate-table.js    From horondi_client_fe with MIT License 6 votes vote down vote up
CertificateTable = ({ items }) => {
  const styles = useStyles();
  const { t } = useTranslation();

  const certificateItems = useMemo(
    () =>
      [...items]
        .sort((a, b) => new Date(b.dateStart) - new Date(a.dateStart))
        .map((item) => <CertificateItem item={item} key={item._id} />),
    [items]
  );

  const headerItems = useMemo(
    () => ROW_FIELDS.map((item) => <TableCell key={item}>{t(`certificate.${item}`)}</TableCell>),
    [ROW_FIELDS, t]
  );

  return (
    <div className={styles.root}>
      <h2 className={styles.titleWrapper}>{t('certificate.title')}</h2>
      <div className={styles.table}>
        <Table>
          <TableHead>
            <TableRow className={styles.tableHeader}>{headerItems}</TableRow>
          </TableHead>
          <TableBody>{certificateItems}</TableBody>
        </Table>
      </div>
    </div>
  );
}
Example #9
Source File: DataPreview.js    From Otto with MIT License 6 votes vote down vote up
export default function DataPreview() {
  const { state } = useState();
  const classes = useStyles();

  if (state.sample_dataset == null) {
    return null;
  }
  const metadata = datasetMetadata[state.sample_dataset];
  function getFormatted(label, index) {
    if (metadata.units) {
      return label + " (" + metadata.units[index] + ")";
    }
    return label;
  }

  return (
    <Grid direction="column" container className={classes.noPadding}>
      {/* Data Attributes */}
      <Grid item>
        <div className={classes.root}>
          {chipData(state).map((data, index) => {
            return (
              <li key={index}>
                <Chip label={data} color="primary" className={classes.chip} />
              </li>
            );
          })}
        </div>
      </Grid>
      {/* Table */}
      <Grid item className={classes.fullWidth}>
        <TableContainer component={Paper} className={classes.table}>
          <Table size="small" aria-label="a dense table">
            <TableHead>
              <TableRow>
                {metadata.columns.map((column, index) => (
                  <TableCell key={index}>
                    {getFormatted(
                      metadata.columnsMap
                        ? metadata.columnsMap[column]
                        : column,
                      index
                    )}
                  </TableCell>
                ))}
              </TableRow>
            </TableHead>
            <TableBody>
              {metadata.data.slice(0, 5).map((row, index) => (
                <TableRow key={index}>
                  {metadata.columns.map((column, index) => (
                    <TableCell key={index} component="th" scope="row">
                      {row[column]}
                    </TableCell>
                  ))}
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </TableContainer>
      </Grid>
    </Grid>
  );
}
Example #10
Source File: TableView.js    From qasong with ISC License 5 votes vote down vote up
function TableView({
  searchResults,
  nowPlaying,
  setNowPlaying,
  queue,
  setQueue,
  setSearchTableViewMode,
}) {
  return (
    <Box
      mt={4}
      id="video-grid"
      style={{ maxWidth: "1200px", margin: "0 auto 200px auto" }}
    >
      <Box m={2}>
        <Typography>
          Search Results for <i>{searchResults.searchTerm}</i>
        </Typography>
        <IconButton
          edge="end"
          title="toggle light/dark theme"
          onClick={() => setSearchTableViewMode(false)}
          target="_blank"
        >
          <GridOnIcon />
        </IconButton>
      </Box>
      <Grid container justify="center" alignItems="center">
        <TableContainer>
          <Table>
            <TableHead>
              <TableRow>
                <TableCell align="center">Play</TableCell>
                <TableCell align="center">Queue</TableCell>
                <TableCell>Name</TableCell>
                <TableCell>Author</TableCell>
                <TableCell>View Count</TableCell>
                <TableCell align="center">Thumbnail</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {searchResults.results.map((video) => {
                return (
                  <VideoRow
                    key={video.videoId}
                    video={video}
                    nowPlaying={nowPlaying}
                    setNowPlaying={setNowPlaying}
                    queue={queue}
                    setQueue={setQueue}
                  />
                );
              })}
            </TableBody>
          </Table>
        </TableContainer>
      </Grid>
    </Box>
  );
}
Example #11
Source File: AuditorsModal.js    From akashlytics-deploy with GNU General Public License v3.0 5 votes vote down vote up
AuditorsModal = ({ provider, onClose }) => {
  const classes = useStyles();
  const { auditors } = useAkash();

  const onWebsiteClick = (event, website) => {
    event.preventDefault();
    event.stopPropagation();

    window.electron.openUrl(website);
  };

  return (
    <Dialog maxWidth="sm" open={true} onClose={onClose} fullWidth>
      <DialogTitle>Audited Attributes</DialogTitle>
      <DialogContent dividers className={classes.content}>
        <TableContainer>
          <Table size="small">
            <TableHead>
              <TableRow>
                <TableCell className={classes.tableHead}>Key</TableCell>
                <TableCell className={classes.tableHead}>Value</TableCell>
                <TableCell className={classes.tableHead}>Auditors</TableCell>
              </TableRow>
            </TableHead>

            <TableBody>
              {provider.attributes.map((a) => {
                return (
                  <TableRow key={a.key}>
                    <TableCell component="th" scope="row">
                      {a.key}
                    </TableCell>
                    <TableCell>{a.value}</TableCell>
                    <TableCell>
                      {a.auditedBy
                        .filter((x) => auditors.some((y) => y.address === x))
                        .map((x) => {
                          const auditor = auditors.find((y) => y.address === x);
                          return (
                            <div key={x}>
                              <Tooltip
                                classes={{ tooltip: classes.tooltip }}
                                arrow
                                interactive
                                title={
                                  <div>
                                    <LinkTo onClick={(event) => onWebsiteClick(event, auditor.website)} className={classes.websiteLink}>
                                      {auditor.website}
                                    </LinkTo>
                                    <Address address={auditor.address} isCopyable />
                                  </div>
                                }
                              >
                                <Chip label={auditor.name} size="small" className={classes.auditorChip} />
                              </Tooltip>
                            </div>
                          );
                        })}
                    </TableCell>
                  </TableRow>
                );
              })}
            </TableBody>
          </Table>
        </TableContainer>
      </DialogContent>
      <DialogActions>
        <Button autoFocus variant="contained" onClick={onClose} color="primary" size="small">
          Close
        </Button>
      </DialogActions>
    </Dialog>
  );
}
Example #12
Source File: SystemStatus.jsx    From Edlib with GNU General Public License v3.0 5 votes vote down vote up
SystemStatus = ({ name, loading, error, data }) => {
    const [isExpanded, setIsExpanded] = React.useState(false);

    if (loading) {
        return (
            <Paper>
                <h2>{name}</h2>
            </Paper>
        );
    }

    if (error) {
        return (
            <Paper>
                <Box display="flex" justifyContent="space-between">
                    <div>{name}</div>
                    <div>
                        <i className="fa fa-caret-down" />
                    </div>
                </Box>
                <Collapse in={isExpanded} timeout="auto">
                    <Typography>
                        Could not get service status. This might be because the
                        service is not set up properly or that you have no
                        internet connection.
                    </Typography>
                </Collapse>
            </Paper>
        );
    }

    return (
        <Paper>
            <Box
                display="flex"
                justifyContent="space-between"
                bgcolor={data.color + '.main'}
                onClick={() => setIsExpanded(!isExpanded)}
            >
                <div>{name}</div>
                <div>
                    <i className="fa fa-caret-down" />
                </div>
            </Box>
            <Collapse in={isExpanded}>
                <Table>
                    <TableHead>
                        <tr>
                            <th width={35} />
                            <th>Subservice name</th>
                            <th>Status</th>
                            <th>Parameters</th>
                        </tr>
                    </TableHead>
                    <TableBody>
                        {data.systems.map((s, index) => (
                            <TableRow key={index}>
                                <TableCell className={'bg-' + s.color} />
                                <TableCell>{s.name}</TableCell>
                                <TableCell>{s.statusMessage}</TableCell>
                                <TableCell>
                                    {s.parameters &&
                                        Object.entries(s.parameters).map(
                                            ([key, value]) => (
                                                <div>
                                                    <strong>{key}: </strong>
                                                    {value}
                                                </div>
                                            )
                                        )}
                                </TableCell>
                            </TableRow>
                        ))}
                    </TableBody>
                </Table>
            </Collapse>
        </Paper>
    );
}
Example #13
Source File: FreshnessBlip.jsx    From archeage-tools with The Unlicense 5 votes vote down vote up
render() {
    const { name, profitLevels } = this.props;

    const standard = profitLevels.filter(pL => !pL.aged);
    const aged = profitLevels.filter(pL => pL.aged);
    const hasAged = aged.length > 0;

    return (
      <Tooltip
        title={<Table size="small" className="freshness-table">
          <TableHead>
            <TableRow>
              <TableCell colSpan={hasAged ? 4 : 2} align="center" className={`freshness ${name}`}>
                {name} Packs
              </TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {hasAged &&
            <TableRow>
              <TableCell colSpan={2} align="center">Regular</TableCell>
              <TableCell colSpan={2} align="center">Aged</TableCell>
            </TableRow>}
            {standard.map((standardPL, i) => {
              const agedPL = aged[i];
              return (
                <TableRow key={`profit-${name}-${standardPL.name}`} className="profit-row">
                  <TableCell>
                    {standardPL.name} Profit
                  </TableCell>
                  <TableCell>
                    {percentModifier(standardPL.modifier)} {standardPL.time}
                  </TableCell>
                  {hasAged && agedPL &&
                  <>
                    <TableCell>
                      {agedPL.name} Profit
                    </TableCell>
                    <TableCell>
                      {percentModifier(agedPL.modifier)} {agedPL.time}
                    </TableCell>
                  </>}
                </TableRow>
              );
            })}
          </TableBody>
        </Table>}
        classes={{ tooltip: 'freshness-tip-container' }}
      >
        <Typography variant="overline" className="freshness-tip">
          <span className={`blip freshness ${name}`} /> {name}
        </Typography>
      </Tooltip>
    );
  }
Example #14
Source File: BorderedTable.js    From Designer-Client with GNU General Public License v3.0 5 votes vote down vote up
/**
 * 
 * @param {{container: Component, size: number, headers: string[], rows: Object[]}} props
 */
export default function BorderedTable({ container, size, headers, rows }) {
  const classes = useStyles();

  return (
    <TableContainer component={container}>
      <Table size={size}>
        {headers && (
          <TableHead>
            <TableRow>
              {headers.map((header) => {
                return (
                  <TableCell key={`table-header-cell-${header}`} className={classes.borderedCell}>
                    {header}
                  </TableCell>
                );
              })}
            </TableRow>
          </TableHead>
        )}

        <TableBody>
          {rows.map((row) => {
            return (
              <TableRow key={`table-row-${row[0]}`}>
                {row.map((col) => {
                  return (
                    <TableCell className={classes.borderedCell} key={`table-cell-${col}`}>
                      {col}
                    </TableCell>
                  );
                })}
              </TableRow>
            );
          })}
        </TableBody>
      </Table>
    </TableContainer>
  );
}
Example #15
Source File: SortableTable.js    From covid-19 with MIT License 5 votes vote down vote up
SortableTable = (props) => {
  const classes = useStyles();
  const theme = useTheme();
  const squish = useMediaQuery(theme.breakpoints.down('xs'));
  const {columns, rows, defaultSortColumn} = props;

  const [orderingBy, setOrderingBy] = React.useState(defaultSortColumn);
  const [direction, setDirection] = React.useState(orderingBy.defaultDirection);

  const sortFn = (a, b) =>
      compareStable(
          a, b, orderingBy.key, columns, direction === orderingBy.defaultDirection);
  const sorted = [...rows].sort((a, b) =>
      direction === 'asc' ? sortFn(a, b) : sortFn(b, a));

  const createUpdateSort = (column) => () => {
    setOrderingBy(column);
    setDirection(
        orderingBy === column
            ? opposite(direction) : column.defaultDirection);
  };

  return (
    <Table size="small" className={squish ? classes.squishText : ''}>
      <TableHead>
        <TableRow>
          {columns.map((column) =>
            <TableCell key={column.key}>
              <TableSortLabel
                  active={orderingBy.key === column.key}
                  direction={
                    orderingBy === column ? direction : column.defaultDirection}
                  hideSortIcon={squish}
                  onClick={createUpdateSort(column)}
              >
                {squish ? column.shortLabel || column.label : column.label}
              </TableSortLabel>
            </TableCell>
          )}
        </TableRow>
      </TableHead>
      <TableBody>
        {sorted.map((row) =>
          <TableRow key={row.id}>
            {columns.map(({key, contextKey, renderShortNumber}) =>
              <TableCell key={key}>
                {render(row[key], renderShortNumber)}
                {row[contextKey] && ` (${row[contextKey]})`}
              </TableCell>
            )}
          </TableRow>
        )}
      </TableBody>
    </Table>
  );
}
Example #16
Source File: order-table.js    From horondi_client_fe with MIT License 5 votes vote down vote up
OrderTable = ({ items, user, cartOperations, promoCode }) => {
  const { t, i18n } = useTranslation();
  const language = i18n.language === 'ua' ? 0 : 1;
  const styles = useStyles();

  const [removeOneModalVisibility, setRemoveOneModalVisibility] = useState(false);
  const [modalItem, setModalItem] = useState({});
  const { removeFromCart } = cartOperations;

  const cartItems = items.map((item) => (
    <CartItem
      key={item.id}
      item={item}
      language={language}
      user={user}
      setModalVisibility={setRemoveOneModalVisibility}
      setModalItem={setModalItem}
      cartOperations={cartOperations}
      promoCode={promoCode}
    />
  ));

  const onRemoveOneModalAction = (action) => {
    if (action) {
      removeFromCart(modalItem);
    }

    setRemoveOneModalVisibility(false);
  };

  return (
    <div className={styles.root}>
      {removeOneModalVisibility && (
        <>
          <Modal
            message={t('cart.deleteItem')}
            isOpen={removeOneModalVisibility}
            onAction={onRemoveOneModalAction}
            isCartModal
          />
        </>
      )}
      <h2 className={styles.titleWrapper}>{t('cart.titleFilled')} </h2>
      <div className={styles.table}>
        <Table>
          <TableHead>
            <TableRow
              classes={{
                root: styles.tableHeader
              }}
            >
              <TableCell>{t('cart.product')}</TableCell>
              <TableCell>{t('cart.size')}</TableCell>
              <TableCell>{t('cart.price')}</TableCell>
              <TableCell>{t('cart.quantity')}</TableCell>
              <TableCell>{t('cart.toPay')}</TableCell>
              <TableCell>{t('cart.actions')}</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>{cartItems}</TableBody>
        </Table>
      </div>
    </div>
  );
}
Example #17
Source File: positions.jsx    From GraphVega with MIT License 5 votes vote down vote up
Positions = props => {
  return (
    <Row>
      <Col sm={{span:12}}>
        <Card>
          <CardContent>
          <Typography variant="h6" display="block" gutterBottom>
            Positions
          </Typography>
            <Table>
              <TableHead>
                <TableRow>
                  <TableCell>TYPE</TableCell>
                  <TableCell>QTY</TableCell>
                  <TableCell>MARK</TableCell>
                  <TableCell>STRIKE</TableCell>
                  <TableCell>EXPIRY</TableCell>
                  <TableCell>IMP VOL</TableCell>
                  <TableCell>VEGA</TableCell>
                  <TableCell>THETA</TableCell>
                  <TableCell>DELTA</TableCell>
                  <TableCell>GAMMA</TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                {props.positions.map((option) => (
                  <TableRow>
                    <TableCell>
                      <Chip label={option.option_type} color={chipStyle(option.option_type)}/>
                    </TableCell>
                    <TableCell>{option.quantity}</TableCell>
                    <TableCell>{(option.bid + option.ask)/2}</TableCell>
                    <TableCell>{option.strike}</TableCell>
                    <TableCell>{expiry(option.expiration_date)}</TableCell>
                    <TableCell>{roundOne(option.greeks.smv_vol*100)}%</TableCell>
                    <TableCell>{option.greeks.vega}</TableCell>
                    <TableCell>{option.greeks.theta}</TableCell>
                    <TableCell>{option.greeks.delta}</TableCell>
                    <TableCell>{option.greeks.gamma}</TableCell>
                  </TableRow>
                ))}
                {(props.quantity && props.quantity !== 0) ? 
                  <TableRow>
                    <TableCell>
                      <Chip label={"shares"} />
                    </TableCell>
                    <TableCell>{props.quantity}</TableCell>
                    <TableCell>{(props.quote.ask + props.quote.bid)/2}</TableCell>
                    <TableCell>--</TableCell>
                    <TableCell>--</TableCell>
                    <TableCell>--</TableCell>
                    <TableCell>--</TableCell>
                    <TableCell>--</TableCell>
                    <TableCell>{props.quantity}</TableCell>
                    <TableCell>--</TableCell>
                  </TableRow>
                : ""
                }
              </TableBody>
            </Table>
          </CardContent>
        </Card>
      </Col>
    </Row>
  )
}
Example #18
Source File: events.js    From dscbppimt-official-website with MIT License 5 votes vote down vote up
function Events() {
    const classes = useStyles()
    const [ Events, setEvents] = useState([]);
    const [ upcomingEvents, setUpcomingEvents ] = useState([])
    const [ isLoading, setLoading ] = useState(false)
    const URL = "https://dscbppimt-cms.herokuapp.com/files/"
    useEffect(() => {
        const today = new Date()
        const todayDate = today.toISOString()
        console.log(todayDate)
        // 2020-10-11T09:10:30.698Z
        setLoading(true);
        Axios.get(`https://dscbppimt-cms.herokuapp.com/our-events?Date_gte=${todayDate}&_sort=Date:desc&_limit=2`).then(res => {
          console.log(res.data);
          setUpcomingEvents(res.data);
          setLoading(false)
        });
        Axios.get(`https://dscbppimt-cms.herokuapp.com/our-events?Date_lt=${todayDate}&_sort=Date:desc`).then(res => {
            console.log(res.data);
            setEvents(res.data);
            setLoading(false)
          });
    },[])
    return (
        <Layout>
            <Box>
                <Container style={{marginBottom : '4em'}}>
                    <Typography variant="h4" style={{fontWeight : '500', margin : '1em 0px'}}>Our Events</Typography>
                    <Grid container spacing={2}>
                    {isLoading ? <Skeleton variant="rect" width="100%" height="150px"/> : upcomingEvents.length !== 0 ? upcomingEvents.map(event => (
                        <Grid item xs={12} sm={6} md={12} key={event._id}>
                        <EventCard 
                        Image={URL+(event.Image.formats.thumbnail.url)}
                        title={event.Title} 
                        speaker={event.Speaker === 'None' ? null : event.Speaker } 
                        description={event.Description} 
                        date={event.Date}
                        data={event.Image}
                        register={event.Register}
                        learn={event.Learn}
                        />
                        </Grid>
                    )) : <Container style={{width: '100%', textAlign: 'center', margin: '4em 0'}}><Typography align="center" >No Upcoming Events</Typography></Container>}
                    </Grid>
                </Container>
            </Box>
            <Container style={{padding : '2em'}}>
                <Box style={{display : 'flex', justifyContent : 'space-between'}}>
                    <Typography variant="h6">Past Events</Typography>
                </Box>
                <TableContainer component={Paper} className={classes.tableContainer}>
      <Table className={classes.table} aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell align="center">Event</TableCell>
            <TableCell align="center">Speaker</TableCell>
            <TableCell align="center">Date</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {Events.map((row) => (
            <TableRow key={row.Title}>
              <TableCell component="th" scope="row" align="center">{row.Title}</TableCell>
              <TableCell align="center">{row.Speaker}</TableCell>
              <TableCell align="center">{row.Date}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
            </Container>

        </Layout>
    )
}
Example #19
Source File: HospitalList.jsx    From frontend with MIT License 5 votes vote down vote up
HospitalList = () => {
  const [requests, setRequests] = useState([]);

  const getData = () => {
    fetch(`${apiUrl}/resources`)
      .then((x) => x.json())
      .then((x) => x.list.filter((a) => a.name))
      .then((x) => {
        setRequests([...x]);
      });
  };

  const [showAppModal, handleAppModal] = useState(false);
  const [requestId, setRequestId] = useState(null);

  const toggleModal = () => {
    handleAppModal(!showAppModal);
  };

  const init = useRef(false);
  useEffect(() => {
    if (!init.current) {
      getData();
      init.current = true;
    }
  }, [init]);

  return (
    <Paper elevation={2}>
      <TableFilter />
      <Table>
        <TableHead>
          <TableRow>
            {columns.map((col) => (
              <TableCell key={col.label}>{col.label}</TableCell>
            ))}
          </TableRow>
        </TableHead>
        <TableBody>
          {requests.map((data) => (
            <TableRow key={data.id}>
              <TableCell>{data.beneficiary.name}</TableCell>
              <TableCell>{data.name}</TableCell>
              <TableCell>{data.quantity}</TableCell>
              <TableCell>{data.deadline}</TableCell>
              <TableCell>
                <PersonCell person={data.contactPerson} />
              </TableCell>
              <TableCell>
                <Button
                  color="secondary"
                  variant="contained"
                  onClick={() => {
                    setRequestId(data.id);
                    toggleModal(true);
                  }}
                >
                  Apply
                </Button>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
      <VolunteerJoin open={showAppModal} id={requestId} onClose={toggleModal} />
    </Paper>
  );
}
Example #20
Source File: Home.jsx    From Edlib with GNU General Public License v3.0 5 votes vote down vote up
Home = ({
    onGoToDetails,
    loading,
    applications,
    refetchApplications,
}) => {
    const [createNew, setCreateNew] = React.useState(false);

    return (
        <Container maxWidth={false}>
            <Grid component={Box} container paddingY={2}>
                <Grid item>
                    <Breadcrumbs aria-label="breadcrumb">
                        <Link to="/">Edlib admin</Link>
                        <Link to="/settings">Settings</Link>
                        <Typography color="textPrimary">
                            External applications
                        </Typography>
                    </Breadcrumbs>
                </Grid>
            </Grid>
            <Grid container component={Box} paddingBottom={2}>
                <Grid item md={12}>
                    <Typography variant="h2">External applications</Typography>
                </Grid>
            </Grid>
            <Grid container>
                <Grid item md={12}>
                    <Paper>
                        <Box padding={2}>
                            <Button
                                variant="contained"
                                color="primary"
                                onClick={() => setCreateNew(true)}
                            >
                                Create new
                            </Button>
                        </Box>
                        {loading && <CircularProgress />}
                        {!loading && (
                            <Table>
                                <TableHead>
                                    <TableRow>
                                        <TableCell>Id</TableCell>
                                        <TableCell>Name</TableCell>
                                    </TableRow>
                                </TableHead>
                                <TableBody>
                                    {applications.map(({ id, name }) => (
                                        <TableRow
                                            key={id}
                                            hover
                                            onClick={() => onGoToDetails(id)}
                                        >
                                            <TableCell width={260}>
                                                {id}
                                            </TableCell>
                                            <TableCell>{name}</TableCell>
                                        </TableRow>
                                    ))}
                                </TableBody>
                            </Table>
                        )}
                    </Paper>
                </Grid>
            </Grid>
            <CreateExternalApplication
                isOpen={createNew}
                onClose={() => setCreateNew(false)}
                onAdded={() => {
                    setCreateNew(false);
                    refetchApplications();
                }}
            />
        </Container>
    );
}
Example #21
Source File: Index.js    From Designer-Client with GNU General Public License v3.0 5 votes vote down vote up
export function UserIndex() {
  const users = useSelector(state => state.users.items);
  const loading = useSelector(state => state.users.loading);
  const dispatch = useDispatch();
  const [deleteModalOpen, setDeleteModalOpen] = useState(false);
  const [selectedUserId, setSelectedUserId] = useState(-1);

  useEffect(() => {
    dispatch(userActions.index());
  }, [])

  const deleteBtnClick = (userId) => {
    setSelectedUserId(userId)
    setDeleteModalOpen(true);
  }

  const deleteUser = () => {
    if(selectedUserId <= 0) return;
    dispatch(userActions.unregistByAdmin(selectedUserId));
  }

  return (
    <Container>
      <PageTitle text={"담당자 관리"} align="left" />
      <ActionDialog action={deleteUser} open={deleteModalOpen} setOpen={setDeleteModalOpen} titleText="사용자 탈퇴" actionText="삭제" cancelText="취소">
        정말 사용자를 탈퇴 시키시겠습니까?
      </ActionDialog>
      <TableContainer component={Paper}>
        <Table aria-label="custom pagination table">
          <TableHead>
            <TableRow>
              <TableCell align="center">id</TableCell>
              <TableCell align="center">Group</TableCell>
              <TableCell align="center">로그인ID</TableCell>
              <TableCell align="center">Email</TableCell>
              <TableCell align="center">권한</TableCell>
              <TableCell align="center">가입일</TableCell>
              <TableCell/>
            </TableRow>
          </TableHead>
          <TableBody>
            { loading &&
              <TableLodingProgress colSpan={6}/>
            }
            { !loading && users.length <= 0 &&
              <TableEmptyRow colSpan={6} text={`관리가 가능한 사용자가 없습니다.`}/>
            }
            { !loading && users.length > 0 && users.map( user => {
              return (
                <TableRow key={`users-index-table-row-${user.id}`}>
                  <TableCell align="center">{user.id}</TableCell>
                  <TableCell align="center">{user.group}</TableCell>
                  <TableCell align="center">{user.username}</TableCell>
                  <TableCell align="center">{user.email}</TableCell>
                  <TableCell align="center">{user.role}</TableCell>
                  <TableCell align="center">{user.createdAt}</TableCell>
                  <TableCell align="center">
                    <Button variant="outlined" size="small" color="primary" component={Link} to={{ pathname: `/users/${user.id}`, state: {user: user}}}>상세보기</Button>
                    <Button variant="outlined" size="small" color="secondary" onClick={() => deleteBtnClick(user.id)}>삭제</Button>
                  </TableCell>
                </TableRow>
              )
            })}
            
          </TableBody>
        </Table>
      </TableContainer>
      <Box mt={4} alignItems="center" flexWrap="wrap" style={{textAlign: "center", display: "flex", alignItems: "center", justifyContent: "center"}}>
        <Pagination count={100}  showFirstButton showLastButton variant="outlined" shape="rounded" size="large" page={Number(1)}/>
      </Box>
      <Grid container direction="column" justify="flex-end" alignItems="flex-end">
        <Grid item>
          <Button variant="outlined" color="primary" component={Link} to='/users/new'>
            신규 담당자 추가
          </Button>
        </Grid>
      </Grid>
    </Container>
  )
}
Example #22
Source File: ApplicationListPage.jsx    From frontend with MIT License 5 votes vote down vote up
ApplicationPage = () => {
  const classes = useStyles();
  const [handlePageChange,
    handleChangeRowsPerPage,
    pagination, paginateData] = usePaginateHandlers(applications);
  return (
    <>
      <Box mb={2}>
        <Typography variant="h4">Applications</Typography>
      </Box>
      <Box>
        <Paper elevation={2}>
          <Table>
            <TableHead>
              <TableRow>
                {columns.map((c) => <TableCell key={c.label}>{c.label}</TableCell>)}
              </TableRow>
            </TableHead>
            <TableBody>
              {paginateData.map((x) => (
                <TableRow key={x.id}>
                  <TableCell>
                    {x.requestId}
                  </TableCell>
                  <TableCell>{x.firstName}</TableCell>
                  <TableCell>{x.lastName}</TableCell>
                  <TableCell>{x.phone}</TableCell>
                  <TableCell>{x.help}</TableCell>
                  <TableCell>
                    {x.status
                      ? (
                        <Select
                          value={x.status}
                          classes={{ root: classes[x.status], select: classes[x.status] }}
                        >
                          <MenuItem value="on_hold">On hold</MenuItem>
                          <MenuItem value="in_progress">In progress</MenuItem>
                          <MenuItem value="receieved">Received</MenuItem>
                          <MenuItem value="closed">Closed</MenuItem>
                        </Select>
                      ) : 'Pending'}
                  </TableCell>
                  <TableCell align="right">
                    {!x.approved && (
                    <>
                      <IconButton color="primary">
                        <Icon>check</Icon>
                      </IconButton>
                      <IconButton color="secondary">
                        <Icon>clear</Icon>
                      </IconButton>
                    </>
                    )}
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
            <TableFooter>
              <TableRow>
                <TablePagination
                  count={applications.length}
                  onChangePage={handlePageChange}
                  page={pagination.page}
                  rowsPerPage={pagination.limit}
                  onChangeRowsPerPage={handleChangeRowsPerPage}
                />
              </TableRow>
            </TableFooter>
          </Table>
        </Paper>
      </Box>
    </>
  );
}
Example #23
Source File: CertificateListModal.js    From akashlytics-deploy with GNU General Public License v3.0 5 votes vote down vote up
export function CertificateListModal({ onClose, revokeCertificate }) {
  const classes = useStyles();
  const { validCertificates, localCert, selectedCertificate } = useCertificate();

  return (
    <Dialog open={true} onClose={onClose} maxWidth="md" fullWidth>
      <DialogTitle>Certificates</DialogTitle>
      <DialogContent dividers className={classes.dialogContent}>
        <TableContainer>
          <Table size="small">
            <TableHead>
              <TableRow>
                <TableCell align="center">Selected</TableCell>
                <TableCell align="center">Local cert</TableCell>
                <TableCell align="center">Issued on</TableCell>
                <TableCell align="center">Expires</TableCell>
                <TableCell align="center">Serial</TableCell>
                <TableCell align="center"></TableCell>
              </TableRow>
            </TableHead>

            <TableBody>
              {validCertificates.map((cert) => (
                <TableRow key={cert.serial}>
                  <TableCell align="center">{cert.serial === selectedCertificate?.serial && <CheckIcon color="primary" />}</TableCell>
                  <TableCell align="center">{cert.parsed === localCert?.certPem && <CheckIcon color="primary" />}</TableCell>

                  <TableCell align="center">
                    <FormattedDate value={cert.pem.issuedOn} year="numeric" month="2-digit" day="2-digit" hour="2-digit" minute="2-digit" />
                  </TableCell>
                  <TableCell align="center">
                    <FormattedDate value={cert.pem.expiresOn} year="numeric" month="2-digit" day="2-digit" hour="2-digit" minute="2-digit" />
                  </TableCell>
                  <TableCell align="center">{cert.serial}</TableCell>
                  <TableCell align="center">
                    <Button onClick={() => revokeCertificate(cert)} color="secondary" size="small">
                      Revoke
                    </Button>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </TableContainer>
      </DialogContent>
      <DialogActions>
        <Button variant="contained" color="primary" onClick={onClose}>
          Close
        </Button>
      </DialogActions>
    </Dialog>
  );
}
Example #24
Source File: ViewTransactions.js    From Pharma-Chain with MIT License 5 votes vote down vote up
export default function ViewTransactions(props) {
  const classes = useStyles();
  const [ account ] = useState(props.location.query.account);
  const [ txnAddress ] = useState(props.location.query.address);
  const [ web3 ] = useState(props.location.query.web3);
  const [ details, setDetails ] = useState({});
  const [ loading, isLoading ] = useState(true);

  async function getTxnData() {
    const transaction = new web3.eth.Contract(Transactions.abi, txnAddress);
    let txns = await transaction.methods.getAllTransactions().call({ from: account });
    const txnsList = txns.map(data => {
      return (
        <TableRow key={data[ 0 ]} className={classes.tableBodyRow}>
          <TableCell multiline className={classes.tableCell} style={{ maxWidth: "75px" }}>{data[ 0 ]}</TableCell>
          <TableCell multiline className={classes.tableCell} style={{ maxWidth: "50px" }}>{data[ 1 ]}</TableCell>
          <TableCell multiline className={classes.tableCell} style={{ maxWidth: "50px" }}>{data[ 2 ]}</TableCell>
          <TableCell multiline className={classes.tableCell} style={{ maxWidth: "75px" }}>{data[ 3 ]}</TableCell>
          <TableCell multiline className={classes.tableCell} style={{ maxWidth: "10px" }}>{data[ 4 ]}</TableCell>
          <TableCell multiline className={classes.tableCell} style={{ maxWidth: "10px" }}>{data[ 5 ]}</TableCell>
          <TableCell multiline className={classes.tableCell} style={{ maxWidth: "40px" }}>{new Date(data[ 6 ] * 1000).toString()}</TableCell>
        </TableRow>
      )
    });
    setDetails(txnsList);
    isLoading(false);
  }

  if (loading) {
    getTxnData();
    return (
      <Loader></Loader>
    );
  } else {
    return (
      <Card>
        <CardHeader color="danger">
          <h4 className={classes.cardTitleWhite}>Transactions List</h4>
          <p className={classes.cardCategoryWhite}>
            View all transactions for this Medicine
          </p>
        </CardHeader>
        <CardBody>
          <div className={classes.tableResponsive}>
            <Table className={classes.table}>
              <TableHead className={classes[ "dangerTableHeader" ]}>
                <TableRow className={classes.tableHeadRow}>
                  <TableCell className={classes.tableCell + " " + classes.tableHeadCell} style={{ maxWidth: "75px" }}>TxnHash</TableCell>
                  <TableCell className={classes.tableCell + " " + classes.tableHeadCell} style={{ maxWidth: "50px" }} >From</TableCell>
                  <TableCell className={classes.tableCell + " " + classes.tableHeadCell} style={{ maxWidth: "50px" }} >To</TableCell>
                  <TableCell className={classes.tableCell + " " + classes.tableHeadCell} style={{ maxWidth: "75px" }} >Previous TxnHash</TableCell>
                  <TableCell className={classes.tableCell + " " + classes.tableHeadCell} style={{ maxWidth: "10px" }} >Lat</TableCell>
                  <TableCell className={classes.tableCell + " " + classes.tableHeadCell} style={{ maxWidth: "10px" }} >Lng</TableCell>
                  <TableCell className={classes.tableCell + " " + classes.tableHeadCell} style={{ maxWidth: "40px" }} >Timestamp</TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                {details}
              </TableBody>
            </Table>
          </div>
        </CardBody>
      </Card>
    );
  }
}
Example #25
Source File: index.js    From iiitt with MIT License 4 votes vote down vote up
export default function VlaParticipants(props) {
  const pathName = useLocation().pathname;
  useEffect(() => {
    document.getElementsByTagName("title")[0].innerHTML = "VLA | Participants";
  }, []);
  useEffect(() => {
    return () => {
      document.getElementsByTagName("title")[0].innerHTML = "IIIT Trichy";
    };
  }, []);

  const [participants, setParticipants] = useState(undefined);
  const [redirect, setRedirect] = useState(false);
  useEffect(() => {
    import(`../../json/${pathName.slice(1, pathName.length)}.json`)
      .then((data) => setParticipants(data.data))
      .catch(() => setRedirect(true));
  }, []);

  const classes = createStyles();
  var ctr = 0;
  return (
    <div className="page-container">
      <Navbar src="vla_navbar.json" homeRoute="/vla" />
      <Grid container className="container">
        <Grid item xs={false} sm={1} />
        <Grid item xs={12} sm={10}>
          {redirect ? (
            <Redirect to="/404" />
          ) : (
            <>
              {participants && (
                <TableContainer
                  component={Paper}
                  className={classes.table}
                  gutterBottom
                >
                  <Table>
                    <TableHead>
                      <TableRow>
                        <TableCell
                          className={`${classes.tableHead} ${classes.tableCell}`}
                        >
                          S. No.
                        </TableCell>
                        <TableCell
                          className={`${classes.tableHead} ${classes.tableCell}`}
                        >
                          Name
                        </TableCell>
                        <TableCell
                          className={`${classes.tableHead} ${classes.tableCell}`}
                        >
                          Designation
                        </TableCell>
                        <TableCell
                          className={`${classes.tableHead} ${classes.tableCell}`}
                        >
                          Institute
                        </TableCell>
                        <TableCell
                          className={`${classes.tableHead} ${classes.tableCell}`}
                        >
                          State
                        </TableCell>
                      </TableRow>
                    </TableHead>
                    <TableBody>
                      {participants.map((participant) => {
                        ctr++;
                        return (
                          <TableRow className={classes.tableRow}>
                            <TableCell className={classes.tableCell}>
                              {ctr}
                            </TableCell>
                            <TableCell className={classes.tableCell}>
                              {participant.name}
                            </TableCell>
                            <TableCell className={classes.tableCell}>
                              {participant.designation}
                            </TableCell>
                            <TableCell className={classes.tableCell}>
                              {participant.institute}
                            </TableCell>
                            <TableCell className={classes.tableCell}>
                              {participant.state}
                            </TableCell>
                          </TableRow>
                        );
                      })}
                    </TableBody>
                  </Table>
                </TableContainer>
              )}
            </>
          )}
        </Grid>
        <Grid item xs={false} sm={1} />
      </Grid>
      <Footer />
    </div>
  );
}
Example #26
Source File: filled-wishlist.js    From horondi_client_fe with MIT License 4 votes vote down vote up
FilledWishlist = ({ items }) => {
  const { userData } = useSelector(({ User }) => ({
    userData: User.userData
  }));
  const [modalVisibility, setModalVisibility] = useState(false);
  const [modalItem, setModalItem] = useState({});
  const [wishlist, setWishlist] = useState(items || []);
  const [similarProductsList, setSimilarProductsList] = useState([]);
  const { cartOperations, isInCart } = useCart(userData);

  const { t, i18n } = useTranslation();
  const dispatch = useDispatch();

  const [isLightTheme] = useContext(ThemeContext);

  const language = i18n.language === 'ua' ? 0 : 1;
  const styles = useStyles(isLightTheme);

  const { wishlist: updatedWishlist, wishlistOperations } = useWishlist();
  const { removeFromWishlist } = wishlistOperations;

  useEffect(() => {
    updatedWishlist && setWishlist([...updatedWishlist].reverse());
  }, [updatedWishlist]);

  useEffect(() => {
    setSimilarProductsList(
      items.map((item) => ({
        productId: item._id
      }))
    );
  }, [items]);

  if (!wishlist.length) return <EmptyWishlist />;

  const onModalAction = (action) => {
    setModalVisibility(false);
    if (action) {
      removeFromWishlist(modalItem);
      dispatch(setToastMessage(t('product.toastMessage.removedFromWishList')));
      dispatch(setToastSettings(TOAST_SETTINGS));
    }
  };

  return (
    <>
      <div className={styles.root}>
        <div className={styles.title}>{t('wishlist.wishlistTitles.filled')}</div>
        <div className={styles.table}>
          <Table>
            <TableHead>
              <TableRow classes={{ root: styles.tableHeader }}>
                <TableCell>{t('wishlist.wishlistTableFields.item')}</TableCell>
                <TableCell>{t('wishlist.wishlistTableFields.price')}</TableCell>
                <TableCell />
              </TableRow>
            </TableHead>
            <TableBody>
              {wishlist.map((item, i) => (
                <WishlistItem
                  key={i}
                  item={item}
                  setModalVisibility={() => {
                    setModalVisibility(!modalVisibility);
                  }}
                  cartOperations={cartOperations}
                  isInCart={isInCart}
                  setModalItem={setModalItem}
                />
              ))}
            </TableBody>
          </Table>
        </div>
        {modalVisibility && (
          <div>
            <Modal
              itemName={t(`${modalItem.translationsKey}.name`)}
              message={t('modal.modalDeleteFromWishlistMessage')}
              isOpen={modalVisibility}
              onAction={onModalAction}
              language={language}
            />
          </div>
        )}
      </div>
      <SimilarProducts cartList={similarProductsList} />
    </>
  );
}
Example #27
Source File: index.js    From iiitt with MIT License 4 votes vote down vote up
export default function GenderData() {
  useEffect(() => {
    document.getElementsByTagName("title")[0].innerHTML = "Gender wise data";
  }, []);

  useEffect(() => {
    return () => {
      document.getElementsByTagName("title")[0].innerHTML = "IIIT Trichy";
    };
  }, []);

  const [genderData, setGenderData] = useState(undefined);
  useEffect(() => {
    import("../../json/genderdata.json").then((data) => {
      setGenderData(data);
    });
  }, []);

  const classes = createStyles();
  return (
    <div className="page-container">
      <Navbar />
      <Grid container className={classes.container}>
        <Grid item xs={false} sm={1} />
        <Grid item xs={12} sm={10}>
          <Typography
            variant="h2"
            component="h2"
            gutterBottom
            className={classes.themeText}
          >
            <Box component="span" fontWeight={380}>
              Gender wise Data
            </Box>
          </Typography>
          <TableContainer component={Paper}>
            <Table>
              <TableHead className={classes.tableHead}>
                <TableRow>
                  <TableCell className={classes.th} align="center">
                    Name of IIIT
                  </TableCell>
                  <TableCell className={classes.th} colspan="4" align="center">
                    Enrolment in Tertiary Education
                  </TableCell>
                  <TableCell className={classes.th} colspan="4" align="center">
                    Professional and Technical Workers
                  </TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                <TableRow>
                  <TableCell rowspan="4" className={classes.td} align="center">
                    IIIT TIRUCHIRAPPALLI
                  </TableCell>
                  <TableCell colspan="4" className={classes.td} align="center">
                    B.Tech.
                  </TableCell>
                  <TableCell colspan="4" className={classes.td} align="center">
                    Faculty
                  </TableCell>
                </TableRow>
                <TableRow>
                  <TableCell colspan="2" className={classes.td} align="center">
                    CSE
                  </TableCell>
                  <TableCell colspan="2" className={classes.td} align="center">
                    ECE
                  </TableCell>
                  <TableCell colspan="2" className={classes.td} align="center">
                    Regular
                  </TableCell>
                  <TableCell colspan="2" className={classes.td} align="center">
                    Temporary
                  </TableCell>
                </TableRow>
                <TableRow>
                  <TableCell className={classes.td}>Boys</TableCell>
                  <TableCell className={classes.td}>Girls</TableCell>
                  <TableCell className={classes.td}>Boys</TableCell>
                  <TableCell className={classes.td}>Girls</TableCell>
                  <TableCell className={classes.td}>Male</TableCell>
                  <TableCell className={classes.td}>Female</TableCell>
                  <TableCell className={classes.td}>Male</TableCell>
                  <TableCell className={classes.td}>Female</TableCell>
                </TableRow>
                <TableRow>
                  <TableCell className={classes.td}>
                    {genderData ? genderData.btech.cse.boys : "Loading..."}
                  </TableCell>
                  <TableCell className={classes.td}>
                    {genderData ? genderData.btech.cse.girls : "Loading..."}
                  </TableCell>
                  <TableCell className={classes.td}>
                    {genderData ? genderData.btech.ece.boys : "Loading..."}
                  </TableCell>
                  <TableCell className={classes.td}>
                    {genderData ? genderData.btech.ece.girls : "Loading..."}
                  </TableCell>
                  <TableCell className={classes.td}>
                    {genderData
                      ? genderData.faculty.regular.male
                      : "Loading..."}
                  </TableCell>
                  <TableCell className={classes.td}>
                    {genderData
                      ? genderData.faculty.regular.female
                      : "Loading..."}
                  </TableCell>
                  <TableCell className={classes.td}>
                    {genderData
                      ? genderData.faculty.temporary.male
                      : "Loading..."}
                  </TableCell>
                  <TableCell className={classes.td}>
                    {genderData
                      ? genderData.faculty.temporary.female
                      : "Loading..."}
                  </TableCell>
                </TableRow>
              </TableBody>
            </Table>
          </TableContainer>
        </Grid>
        <Grid item xs={false} sm={1} />
      </Grid>
      <Footer />
    </div>
  );
}
Example #28
Source File: UsersTable.js    From git-insights with MIT License 4 votes vote down vote up
UsersTable = props => {
  const { className, users, ...rest } = props;

  const classes = useStyles();

  const [selectedUsers, setSelectedUsers] = useState([]);
  const [rowsPerPage, setRowsPerPage] = useState(10);
  const [page, setPage] = useState(0);

  const handleSelectAll = event => {
    const { users } = props;

    let selectedUsers;

    if (event.target.checked) {
      selectedUsers = users.map(user => user.id);
    } else {
      selectedUsers = [];
    }

    setSelectedUsers(selectedUsers);
  };

  const handleSelectOne = (event, id) => {
    const selectedIndex = selectedUsers.indexOf(id);
    let newSelectedUsers = [];

    if (selectedIndex === -1) {
      newSelectedUsers = newSelectedUsers.concat(selectedUsers, id);
    } else if (selectedIndex === 0) {
      newSelectedUsers = newSelectedUsers.concat(selectedUsers.slice(1));
    } else if (selectedIndex === selectedUsers.length - 1) {
      newSelectedUsers = newSelectedUsers.concat(selectedUsers.slice(0, -1));
    } else if (selectedIndex > 0) {
      newSelectedUsers = newSelectedUsers.concat(
        selectedUsers.slice(0, selectedIndex),
        selectedUsers.slice(selectedIndex + 1)
      );
    }

    setSelectedUsers(newSelectedUsers);
  };

  const handlePageChange = (event, page) => {
    setPage(page);
  };

  const handleRowsPerPageChange = event => {
    setRowsPerPage(event.target.value);
  };

  return (
    <Card
      {...rest}
      className={clsx(classes.root, className)}
    >
      <CardContent className={classes.content}>
        <PerfectScrollbar>
          <div className={classes.inner}>
            <Table>
              <TableHead>
                <TableRow>
                  <TableCell padding="checkbox">
                    <Checkbox
                      checked={selectedUsers.length === users.length}
                      color="primary"
                      indeterminate={
                        selectedUsers.length > 0 &&
                        selectedUsers.length < users.length
                      }
                      onChange={handleSelectAll}
                    />
                  </TableCell>
                  <TableCell>Name</TableCell>
                  <TableCell>Email</TableCell>
                  <TableCell>Location</TableCell>
                  <TableCell>Phone</TableCell>
                  <TableCell>Registration date</TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                {users.slice(0, rowsPerPage).map(user => (
                  <TableRow
                    className={classes.tableRow}
                    hover
                    key={user.id}
                    selected={selectedUsers.indexOf(user.id) !== -1}
                  >
                    <TableCell padding="checkbox">
                      <Checkbox
                        checked={selectedUsers.indexOf(user.id) !== -1}
                        color="primary"
                        onChange={event => handleSelectOne(event, user.id)}
                        value="true"
                      />
                    </TableCell>
                    <TableCell>
                      <div className={classes.nameContainer}>
                        <Avatar
                          className={classes.avatar}
                          src={user.avatarUrl}
                        >
                          {getInitials(user.name)}
                        </Avatar>
                        <Typography variant="body1">{user.name}</Typography>
                      </div>
                    </TableCell>
                    <TableCell>{user.email}</TableCell>
                    <TableCell>
                      {user.address.city}, {user.address.state},{' '}
                      {user.address.country}
                    </TableCell>
                    <TableCell>{user.phone}</TableCell>
                    <TableCell>
                      {moment(user.createdAt).format('DD/MM/YYYY')}
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>
        </PerfectScrollbar>
      </CardContent>
      <CardActions className={classes.actions}>
        <TablePagination
          component="div"
          count={users.length}
          onChangePage={handlePageChange}
          onChangeRowsPerPage={handleRowsPerPageChange}
          page={page}
          rowsPerPage={rowsPerPage}
          rowsPerPageOptions={[5, 10, 25]}
        />
      </CardActions>
    </Card>
  );
}
Example #29
Source File: index.js    From iiitt with MIT License 4 votes vote down vote up
export default function VlaWorkshops() {
  useEffect(() => {
    document.getElementsByTagName("title")[0].innerHTML = "VLA | Workshops";
  }, []);
  useEffect(() => {
    return () => {
      document.getElementsByTagName("title")[0].innerHTML = "IIIT Trichy";
    };
  }, []);
  const [workshops, setWorkshops] = useState(undefined);
  useEffect(() => {
    import("../../json/vlaworkshops.json").then((data) =>
      setWorkshops(data.data)
    );
  }, []);

  const classes = createStyles();
  var ctr = 0;
  return (
    <div className="page-container">
      <Navbar src="vla_navbar.json" homeRoute="/vla" />
      <Grid container className={classes.container}>
        <Grid item xs={false} sm={1} />
        <Grid item xs={12} sm={10}>
          <Typography
            variant="h2"
            component="h2"
            gutterBottom
            className={classes.themeText}
          >
            <Box component="span" fontWeight={380}>
              Workshops Planned and Completed
            </Box>
          </Typography>
          {workshops && (
            <TableContainer
              component={Paper}
              className={classes.table}
              gutterBottom
            >
              <Table>
                <TableHead>
                  <TableRow>
                    <TableCell
                      className={`${classes.tableHead} ${classes.tableCell}`}
                    >
                      S. No.
                    </TableCell>
                    <TableCell
                      className={`${classes.tableHead} ${classes.tableCell}`}
                    >
                      Name of the Programme
                    </TableCell>
                    <TableCell
                      className={`${classes.tableHead} ${classes.tableCell}`}
                    >
                      Co-ordinator(s) Name
                    </TableCell>
                    <TableCell
                      className={`${classes.tableHead} ${classes.tableCell}`}
                    >
                      Start Date
                    </TableCell>
                    <TableCell
                      className={`${classes.tableHead} ${classes.tableCell}`}
                    >
                      End Date
                    </TableCell>
                    <TableCell
                      className={`${classes.tableHead} ${classes.tableCell}`}
                    >
                      No. Of Participants
                    </TableCell>
                    <TableCell
                      className={`${classes.tableHead} ${classes.tableCell}`}
                    >
                      Videos
                    </TableCell>
                    <TableCell
                      className={`${classes.tableHead} ${classes.tableCell}`}
                    >
                      Brochure
                    </TableCell>
                    <TableCell
                      className={`${classes.tableHead} ${classes.tableCell}`}
                    >
                      Summary & Feedback
                    </TableCell>
                  </TableRow>
                </TableHead>
                <TableBody>
                  {workshops.map((workshop) => {
                    ctr++;
                    return (
                      <TableRow className={classes.tableRow}>
                        <TableCell className={classes.tableCell}>
                          {ctr}
                        </TableCell>
                        <TableCell className={classes.tableCell}>
                          {workshop.programmeName}
                        </TableCell>
                        <TableCell className={classes.tableCell}>
                          {workshop.name}
                        </TableCell>
                        <TableCell className={classes.tableCell}>
                          {workshop.startDate}
                        </TableCell>
                        <TableCell className={classes.tableCell}>
                          {workshop.endDate}
                        </TableCell>
                        <TableCell className={classes.tableCell}>
                          {workshop.participantsLink.trim() && (
                            <Link
                              to={{
                                pathname: workshop.participantsLink.trim(),
                              }}
                              className={classes.link}
                            >
                              {workshop.participants}
                            </Link>
                          )}
                        </TableCell>
                        <TableCell className={classes.tableCell}>
                          {workshop.videos.trim() && (
                            <Link
                              to={{ pathname: workshop.videos }}
                              className={classes.link}
                            >
                              Videos
                            </Link>
                          )}
                        </TableCell>
                        <TableCell className={classes.tableCell}>
                          {workshop.brochure.trim() && (
                            <a
                              href={`../../docs/vla/${workshop.brochure}`}
                              className={classes.link}
                              download={workshop.brochure}
                            >
                              Brochure
                            </a>
                          )}
                        </TableCell>
                        <TableCell className={classes.tableCell}>
                          {workshop.summary.trim() && (
                            <Link
                              to={{ pathname: workshop.summary }}
                              className={classes.link}
                            >
                              Summary & Feedback
                            </Link>
                          )}
                        </TableCell>
                      </TableRow>
                    );
                  })}
                </TableBody>
              </Table>
            </TableContainer>
          )}
        </Grid>
        <Grid item xs={false} sm={1} />
      </Grid>
      <Footer />
    </div>
  );
}