@mui/material#capitalize TypeScript Examples

The following examples show how to use @mui/material#capitalize. 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: resource-meta.tsx    From tams-club-cal with MIT License 6 votes vote down vote up 
ResourceMeta = (props: ResourceMetaProps) => {
    const title =
        (props.editHistory ? '[Edit History] ' : '') +
        `${props.name} | ${capitalize(props.resource)} - TAMS Club Calendar`;

    const url = props.imgSrc ? `${getCdnUrl()}/${props.imgSrc}` : null;
    const image = props.imgSrc
        ? [
              <meta key="image-0" property="og:image" content={url} />,
              <meta key="image-1" property="og:image:width" content="1800" />,
              <meta key="image-2" property="og:image:height" content="750" />,
              <meta key="image-3" name="twitter:image" content={url} />,
          ]
        : null;

    return (
        <Head>
            <title>{title}</title>
            <meta key="description" name="description" content={props.description} />
            <meta key="title" property="og:title" content={title} />
            <meta key="url" property="og:url" content={`https://tams.club${props.path}`} />
            {image}
            <meta key="title-1" name="twitter:title" content={title} />
            <meta key="description-1" name="twitter:description" content={props.description} />
        </Head>
    );
}
Example #2
Source File: sort-select.tsx    From tams-club-cal with MIT License 6 votes vote down vote up 
SortSelect = (props: SortSelectProps) => {
    // Set state value when user changes selection
    const handleChange = (event: SelectChangeEvent<string>) => {
        props.setValue(event.target.value);
    };

    return (
        <React.Fragment>
            <FormControl>
                <Select value={props.value} onChange={handleChange} variant="standard">
                    {props.options
                        ? props.options.map((o) => (
                              <MenuItem value={o} key={o}>
                                  {capitalize(o)}
                              </MenuItem>
                          ))
                        : null}
                </Select>
            </FormControl>
            <Tooltip
                title={props.reverse ? 'Sorted descending' : 'Sorted ascending'}
                onClick={props.setReverse.bind(this, !props.reverse)}
                sx={{
                    marginLeft: 3,
                    marginRight: 2,
                }}
            >
                <IconButton size="large">
                    {props.reverse ? <ArrowUpwardRoundedIcon /> : <ArrowDownwardRoundedIcon />}
                </IconButton>
            </Tooltip>
        </React.Fragment>
    );
}
Example #3
Source File: action-bar.tsx    From tams-club-cal with MIT License 5 votes vote down vote up 
ActionBar = () => {
    const router = useRouter();
    const theme = useTheme();
    const matches = useMediaQuery(theme.breakpoints.up('md'));
    const [path, setPath] = useState('schedule');

    // If the user clicks on a new view, update the state variable and url
    const handleView = (
        event: React.MouseEvent<HTMLElement, MouseEvent>,
        newPath: 'schedule' | 'calendar' | 'reservations'
    ) => {
        if (newPath !== null) router.push(newPath === 'schedule' ? '/' : `/events/${newPath}`);
    };

    // Get the current view from the pathname
    useEffect(() => {
        const view = router.pathname.includes('calendar')
            ? 'calendar'
            : router.pathname.includes('reservations')
            ? 'reservations'
            : 'schedule';
        setPath(view);
    }, []);

    return (
        <Paper
            sx={{
                marginBottom: 3,
                marginLeft: 3,
                marginRight: 2,
            }}
            elevation={4}
        >
            <Toolbar>
                <Typography variant="h3" sx={{ marginRight: 4 }}>
                    {`${capitalize(path || '')}${matches ? ' View' : ''}`}
                </Typography>
                <ToggleButtonGroup
                    value={path}
                    exclusive
                    onChange={handleView}
                    aria-label="switch view"
                    sx={{
                        paddingLeft: 'auto',
                        flexGrow: 1,
                        justifyContent: 'flex-end',
                    }}
                >
                    <ToggleButton value="schedule">
                        <FormatListBulletedRoundedIcon width="16" sx={{ marginRight: { xs: 0, md: 1 } }} />
                        <Hidden mdDown>Schedule</Hidden>
                    </ToggleButton>
                    <ToggleButton value="calendar">
                        <EventNoteRoundedIcon width="16" sx={{ marginRight: { xs: 0, md: 1 } }} />
                        <Hidden mdDown>Calendar</Hidden>
                    </ToggleButton>
                    <ToggleButton value="reservations">
                        <MeetingRoomRoundedIcon width="16" sx={{ marginRight: { xs: 0, md: 1 } }} />
                        <Hidden mdDown>Reservations</Hidden>
                    </ToggleButton>
                </ToggleButtonGroup>
            </Toolbar>
        </Paper>
    );
}
Example #4
Source File: manage-resources.tsx    From tams-club-cal with MIT License 4 votes vote down vote up 
ManageResources = () => {
    const [dataToDelete, setDataToDelete] = useState<DeleteObject>({ resource: 'events', id: '', name: '' });
    const [deletePrompt, setDeletePrompt] = useState(false);
    const [popupEvent, setPopupEvent] = useState<PopupEvent>(null);
    const [backdrop, setBackdrop] = useState(false);
    const [rowCount, setRowCount] = useState(0);
    const [rowsState, setRowsState] = useState({
        page: 0,
        pageSize: 10,
        rows: [],
        loading: true,
    });
    const [sortModel, setSortModel] = useState<GridSortModel>([]);
    const [resource, setResource] = useState<Resource>('events');
    const [filterValue, setFilterValue] = useState<GridFilterItem>(null);
    const [colList, setColList] = useState<GridColDef[]>([]);

    // Format start/end datetime
    const dts = (params) => formatDate(params.row.start, 'MM/DD/YY, HH:mma');
    const dte = (params) => formatDate(params.row.end, 'MM/DD/YY, HH:mma');

    // Define filters to use
    const filterOperators = getGridStringOperators().filter((operator) => operator.value === 'contains');

    // Define the 2 columns for the view and delete action buttons
    const actionColumns: GridColDef[] = [
        {
            field: 'view',
            headerName: '?️',
            width: 75,
            sortable: false,
            filterable: false,
            renderCell: (params) => (
                <IconButton
                    onClick={window.open.bind(this, `${window.location.origin}/${resource}/${params.row.id}`)}
                    sx={{ margin: 'auto' }}
                >
                    <VisibilityIcon />
                </IconButton>
            ),
        },
        {
            field: 'delete',
            headerName: '❌',
            width: 75,
            sortable: false,
            filterable: false,
            renderCell: (params) => (
                <IconButton onClick={promptDelete.bind(this, params.row.id, params.row.name)} sx={{ margin: 'auto' }}>
                    <DeleteOutlineIcon />
                </IconButton>
            ),
        },
    ];

    // Define columns to show for events
    const eventColumns: GridColDef[] = [
        { field: 'name', headerName: 'Name', width: 325, filterOperators },
        { field: 'club', headerName: 'Club', width: 150, filterOperators },
        { field: 'start', headerName: 'Start', width: 150, valueGetter: dts, filterable: false },
        { field: 'end', headerName: 'End', width: 150, valueGetter: dte, filterable: false },
        { field: 'id', headerName: 'ID', width: 225, filterOperators },
        ...actionColumns,
    ];

    // Define columns to show for clubs
    // TODO: Figure out how to filter by a boolean value -- advised (need to fix adminRouter too)
    const clubColumns: GridColDef[] = [
        { field: 'name', headerName: 'Name', width: 325, filterOperators },
        { field: 'advised', headerName: 'Advised', width: 100, filterOperators, filterable: false },
        { field: 'description', headerName: 'Description', width: 350, filterable: false },
        { field: 'id', headerName: 'ID', width: 225, filterOperators },
        ...actionColumns,
    ];

    // Define columns to show for volunteering
    const volunteeringColumns: GridColDef[] = [
        { field: 'name', headerName: 'Name', width: 325, filterOperators },
        { field: 'club', headerName: 'Club', width: 150, filterOperators },
        { field: 'description', headerName: 'Description', width: 300, filterable: false },
        { field: 'id', headerName: 'ID', width: 225, filterOperators },
        ...actionColumns,
    ];

    // When sorting changes
    const handleSortModelChange = (newModel: GridSortModel) => {
        setSortModel(newModel);
    };

    // When filtering changes
    const onFilterChange = React.useCallback((filterModel: GridFilterModel) => {
        setFilterValue(filterModel.items[0]);
    }, []);

    // This function will prompt the user first to see if they are sure they want to delete
    const promptDelete = (id: string, name: string) => {
        setDataToDelete({ resource, id, name });
        setDeletePrompt(true);
    };

    // This function will trigger when the user selects a new resource
    const handleResourceChange = (event: SelectChangeEvent) => {
        setResource(event.target.value as Resource);
    };

    // Actually delete the resource
    const deleteResource = async () => {
        setDeletePrompt(false);
        setBackdrop(true);
        const res = await deleteAdminResource(dataToDelete.resource, dataToDelete.id);
        if (res.status === 200) {
            const cookies = new Cookies();
            cookies.set('success', `${dataToDelete.name} deleted successfully!`, { path: '/' });
            window.location.reload();
        } else {
            setPopupEvent(createPopupEvent('Error deleting resource', 4));
        }
        setBackdrop(false);
    };

    // When the resource changes, change the columns
    useEffect(() => {
        if (resource === 'events') setColList(eventColumns);
        else if (resource === 'clubs') setColList(clubColumns);
        else if (resource === 'volunteering') setColList(volunteeringColumns);
    }, [resource]);

    // On load, get the number of rows
    // Also trigger this if the filtering or sorting changes
    useEffect(() => {
        (async () => {
            // Set loading state
            setRowsState((prev) => ({ ...prev, loading: true }));

            // Calculate sort and filters
            const sort = sortModel[0] ? sortModel[0].field : null;
            const reverse = sortModel[0] ? sortModel[0].sort === 'desc' : false;
            const filter = filterValue && filterValue.value ? filterValue : null;

            const rowsRes = await getAdminResources(resource, 1, rowsState.pageSize, sort, reverse, filter);
            if (rowsRes.status !== 200) {
                setPopupEvent(createPopupEvent('Error fetching resource', 4));
                return;
            }
            setRowsState((prev) => ({ ...prev, rows: rowsRes.data.docs, page: 0, loading: false }));
            setRowCount(rowsRes.data.totalPages * 10);
        })();
    }, [resource, sortModel, filterValue]);

    // Whenever the user scrolls to another page or changes the size of pages, load more content
    useEffect(() => {
        if (rowCount === 0) return;

        (async () => {
            // Set loading state
            setRowsState((prev) => ({ ...prev, loading: true }));

            // Calculate sort and filters
            const sort = sortModel[0] ? sortModel[0].field : null;
            const reverse = sortModel[0] ? sortModel[0].sort === 'desc' : false;
            const filter = filterValue && filterValue.value ? filterValue : null;

            const newRowsRes = await getAdminResources(
                resource,
                rowsState.page + 1,
                rowsState.pageSize,
                sort,
                reverse,
                filter
            );
            if (newRowsRes.status !== 200) {
                setPopupEvent(createPopupEvent('Error fetching resource', 4));
                return;
            }

            setRowsState((prev) => ({ ...prev, loading: false, rows: newRowsRes.data.docs }));
        })();
    }, [rowsState.page, rowsState.pageSize]);

    return (
        <React.Fragment>
            <Popup event={popupEvent} />
            <Dialog
                open={deletePrompt}
                aria-labelledby="delete-dialog-title"
                aria-describedby="delete-dialog-description"
            >
                <DialogTitle id="delete-dialog-title">
                    Delete {capitalize(dataToDelete.resource).replace(/s/g, '')}
                </DialogTitle>
                <DialogContent>
                    <DialogContentText id="delete-dialog-description">
                        Are you sure you want to delete {dataToDelete.name}?
                    </DialogContentText>
                </DialogContent>
                <DialogActions>
                    <Button onClick={setDeletePrompt.bind(this, false)} sx={{ color: '#aaa' }} variant="text">
                        Cancel
                    </Button>
                    <Button onClick={deleteResource} color="error" variant="contained">
                        Delete
                    </Button>
                </DialogActions>
            </Dialog>
            <UploadBackdrop text="Deleting Resource..." open={backdrop} />
            <Box sx={{ display: 'flex', flexDirection: 'row', justifyContent: 'center', marginTop: 2 }}>
                <FormControl sx={{ maxWidth: 300 }} fullWidth>
                    <InputLabel id="resource-select-label">Resource</InputLabel>
                    <Select
                        labelId="resource-select-label"
                        id="resource-select"
                        label="Resource"
                        value={resource}
                        onChange={handleResourceChange}
                    >
                        <MenuItem value="events">Event</MenuItem>
                        <MenuItem value="clubs">Clubs</MenuItem>
                        <MenuItem value="volunteering">Volunteering</MenuItem>
                    </Select>
                </FormControl>
            </Box>
            <DataGrid
                columns={colList}
                {...rowsState}
                rowCount={rowCount}
                pagination
                paginationMode="server"
                onPageChange={(page) => setRowsState((prev) => ({ ...prev, page }))}
                onPageSizeChange={(pageSize) => setRowsState((prev) => ({ ...prev, pageSize }))}
                sortingMode="server"
                sortModel={sortModel}
                filterMode="server"
                onFilterModelChange={onFilterChange}
                onSortModelChange={handleSortModelChange}
                sx={{ marginTop: 2, height: 650 }}
            />
        </React.Fragment>
    );
}