@mui/material#InputLabel JavaScript Examples
The following examples show how to use
@mui/material#InputLabel.
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: CreateSavedFilter.jsx From Edlib with GNU General Public License v3.0 | 4 votes |
|
CreateSavedFilter = ({
show,
onClose,
savedFilterData,
filters,
onDone,
filterUtils,
}) => {
const { classes } = useStyles();
const { t } = useTranslation();
const { edlibApi } = useConfigurationContext();
const [selected, setSelected] = React.useState('new');
const [newFilterName, setNewFilterName] = React.useState('My filter');
const request = useRequestWithToken();
return (
<Dialog open={show} onClose={() => onClose()} maxWidth="sm" fullWidth>
<DialogTitle>{_.capitalize(t('edit_filter'))}</DialogTitle>
<DialogContent>
<Box pt={1}>
<FormControl
variant="outlined"
fullWidth
className={classes.formControl}
>
<InputLabel>
{_.capitalize(t('choose_filter'))}
</InputLabel>
<Select
value={selected}
onChange={(e) => setSelected(e.target.value)}
label={_.capitalize(t('choose_filter'))}
>
<MenuItem value="new">
<em>{_.capitalize(t('create_new'))}</em>
</MenuItem>
{savedFilterData.map((savedFilter) => (
<MenuItem
key={savedFilter.id}
value={savedFilter.id}
>
{savedFilter.name}
</MenuItem>
))}
</Select>
</FormControl>
{selected === 'new' && (
<TextField
required
label={_.capitalize(t('name'))}
variant="outlined"
className={classes.formControl}
fullWidth
value={newFilterName}
onChange={(e) => setNewFilterName(e.target.value)}
/>
)}
<div className={classes.formControl}>
<FilterChips
chips={filterUtils.getChipsFromFilters(false)}
/>
</div>
</Box>
</DialogContent>
<DialogActions>
<Button
color="primary"
variant="outlined"
onClick={() => onClose()}
>
{t('cancel')}
</Button>
<Button
color="primary"
variant="contained"
style={{ marginLeft: 5 }}
onClick={() => {
let url = edlibApi(`/common/saved-filters`);
if (selected !== 'new') {
url += `/` + selected;
}
request(url, 'POST', {
body: {
name: newFilterName,
choices: [
filters.contentTypes.value.map(
(contentType) => ({
group: 'contentType',
value: contentType.value,
})
),
filters.licenses.value.map(
(contentType) => ({
group: 'license',
value: contentType.value,
})
),
].flat(),
},
}).then((data) => onDone(data));
}}
>
{t('save')}
</Button>
</DialogActions>
</Dialog>
);
}
Example #2
| Source File: DeleteSavedFilter.jsx From Edlib with GNU General Public License v3.0 | 4 votes |
|
DeleteSavedFilter = ({
show,
onClose,
savedFilterData,
onDeleted,
filterUtils,
}) => {
const { classes } = useStyles();
const { t } = useTranslation();
const request = useRequestWithToken();
const { edlibApi } = useConfigurationContext();
const [selected, setSelected] = React.useState(null);
const selectedSavedFilter = React.useMemo(() => {
if (!selected) {
return null;
}
return savedFilterData.find((sfd) => sfd.id === selected);
}, [selected]);
return (
<Dialog open={show} onClose={() => onClose()} maxWidth="sm" fullWidth>
<DialogTitle>{_.capitalize(t('delete_filter'))}</DialogTitle>
<DialogContent>
<Box pt={1}>
<FormControl
variant="outlined"
fullWidth
className={classes.formControl}
>
<InputLabel>
{_.capitalize(t('choose_filter'))}
</InputLabel>
<Select
value={selected}
onChange={(e) => setSelected(e.target.value)}
label={_.capitalize(t('choose_filter'))}
>
{savedFilterData.map((savedFilter) => (
<MenuItem
key={savedFilter.id}
value={savedFilter.id}
>
{savedFilter.name}
</MenuItem>
))}
</Select>
</FormControl>
<div className={classes.formControl}>
<FilterChips
chips={filterUtils.getChipsFromChoices(
selectedSavedFilter
? selectedSavedFilter.choices
: []
)}
color="default"
/>
</div>
</Box>
</DialogContent>
<DialogActions>
<Button
color="primary"
variant="outlined"
onClick={() => onClose()}
>
{t('cancel')}
</Button>
<Button
color="primary"
variant="contained"
style={{ marginLeft: 5 }}
disabled={!selected}
onClick={() => {
if (!selected) {
return;
}
let url = edlibApi(`/common/saved-filters/${selected}`);
request(url, 'DELETE', {
json: false,
}).then(() => onDeleted(selected));
}}
>
{t('delete')}
</Button>
</DialogActions>
</Dialog>
);
}
Example #3
| Source File: ResourcePage.jsx From Edlib with GNU General Public License v3.0 | 4 votes |
|
ResourcePage = ({ filters, showDeleteButton = false }) => {
const { t } = useTranslation();
const theme = useTheme();
const forceGridView = useMediaQuery(theme.breakpoints.down(1400));
const [filtersExpanded, setFiltersExpanded] = React.useState(false);
const [sortingOrder, setSortingOrder] = React.useState(useDefaultOrder());
const [page, setPage] = React.useState(0);
const [pageSize, setPageSize] = React.useState(40);
const [_isGridView, setIsGridView] = React.useState(false);
const filterUtils = FilterUtils(filters);
const isGridView = forceGridView || _isGridView;
const { error, loading, resources, pagination, refetch, filterCount } =
useGetResources(
React.useMemo(
() => ({
limit: pageSize,
offset: page * pageSize,
resourceCapabilities: ['view'],
orderBy: sortingOrder,
...(filters && filters.requestData),
}),
[page, sortingOrder, filters && filters.requestData, pageSize]
)
);
React.useEffect(() => {
setPage(0);
}, [sortingOrder, filters.requestData]);
const setSearch = React.useCallback(
(searchText) => {
filters.setSearchInput(searchText);
if (sortingOrder !== resourceOrders.RELEVANT_DESC) {
setSortingOrder(resourceOrders.RELEVANT_DESC);
}
},
[filters, sortingOrder, setSortingOrder]
);
const sortOrderDropDown = (
<FormControl variant="outlined">
<InputLabel>{t('Sortering')}</InputLabel>
<Select
MenuProps={{
style: { zIndex: 2051 },
anchorOrigin: {
vertical: 'bottom',
horizontal: 'center',
},
transformOrigin: {
vertical: 'top',
horizontal: 'center',
},
}}
value={sortingOrder}
onChange={(e) => setSortingOrder(e.target.value)}
label={getOrderText(t, sortingOrder)}
>
{[
resourceOrders.RELEVANT_DESC,
resourceOrders.VIEWS_DESC,
resourceOrders.VIEWS_ASC,
resourceOrders.UPDATED_AT_DESC,
resourceOrders.UPDATED_AT_ASC,
].map((value, index) => (
<MenuItem key={index} value={value}>
{getOrderText(t, value)}
</MenuItem>
))}
</Select>
</FormControl>
);
return (
<StyledResourcePage>
<Box
sx={[
{
backgroundColor: 'white',
boxShadow: '5px 0 5px 0 rgba(0, 0, 0, 0.16)',
overflowY: 'auto',
position: {
xs: 'absolute',
md: 'initial',
},
right: {
xs: '110%',
md: 'initial',
},
zIndex: {
xs: 2,
md: 'initial',
},
},
filtersExpanded && {
width: '100vw',
right: 'unset',
left: 0,
},
]}
>
<ResourceFilters filters={filters} filterCount={filterCount} />
</Box>
<Box
onClick={() => setFiltersExpanded(false)}
sx={[
{
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
backgroundColor: 'rgba(0, 0, 0, 0.5)',
zIndex: 1,
cursor: 'pointer',
},
filtersExpanded && {
display: {
xs: 'block',
md: 'none',
},
},
!filtersExpanded && {
display: 'none',
},
]}
/>
<div className="pageContent">
<div className="contentOptions">
<Box display="flex" paddingRight={1}>
<Box
paddingRight={1}
style={{
width: 400,
}}
>
<TextField
fullWidth
label={t('Søk')}
variant="outlined"
value={filters.searchInput}
onChange={(e) => setSearch(e.target.value)}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<Icon>
<SearchIcon />
</Icon>
</InputAdornment>
),
}}
/>
</Box>
<div
style={{
width: 200,
}}
>
<LanguageDropdown
language={
filters.languages.length !== 0
? filters.languages[0]
: null
}
setLanguage={(value) =>
filters.languages.setValue(
value ? [value] : []
)
}
/>
</div>
</Box>
<div>{sortOrderDropDown}</div>
</div>
<Box
pt={1}
sx={{
display: {
xs: 'block',
md: 'none',
},
}}
>
<Button
color="primary"
variant="contained"
onClick={() => setFiltersExpanded(!filtersExpanded)}
startIcon={<TuneIcon />}
>
{t('filter', { count: 2 })}
</Button>
</Box>
<Box
display="flex"
flexDirection="row"
justifyContent="space-between"
pt={1}
>
<Box>
<FilterChips
chips={filterUtils.getChipsFromFilters()}
/>
</Box>
<Box>
{!forceGridView && (
<IconButton
onClick={() => setIsGridView(!isGridView)}
size="large"
>
{isGridView ? <ListIcon /> : <ViewModuleIcon />}
</IconButton>
)}
</Box>
</Box>
<Content>
<div style={{ marginTop: 20 }}>
{loading && <Spinner />}
{error && <div>{t('Noe skjedde')}</div>}
{!loading && !error && resources && !isGridView && (
<ResourceTable
totalCount={pagination.totalCount}
resources={resources}
refetch={refetch}
showDeleteButton={showDeleteButton}
sortingOrder={sortingOrder}
setSortingOrder={setSortingOrder}
/>
)}
{!loading && !error && resources && isGridView && (
<CardView
totalCount={pagination.totalCount}
resources={resources}
refetch={refetch}
showDeleteButton={showDeleteButton}
/>
)}
</div>
{pagination && (
<PaginationWrapper>
<TablePagination
component="div"
count={pagination.totalCount}
page={page}
onPageChange={(e, page) => {
setPage(page);
}}
rowsPerPage={pageSize}
onRowsPerPageChange={(e, pageSize) => {
setPageSize(pageSize);
setPage(0);
}}
rowsPerPageOptions={[40]}
/>
</PaginationWrapper>
)}
</Content>
</div>
</StyledResourcePage>
);
}
Example #4
| Source File: index.js From fireact with MIT License | 4 votes |
|
AddUser = () => {
const title = 'Add User';
const mountedRef = useRef(true);
const history = useHistory();
const { userData } = useContext(AuthContext);
const { setBreadcrumb } = useContext(BreadcrumbContext);
const [emailAddress, setEmailAddress] = useState({
hasError: false,
error: null,
value: null
});
const [error, setError] = useState(null);
const [success, setSuccess] = useState(false);
const [inSubmit, setInSubmit] = useState(false);
const [selectedRole, setSelectedRole] = useState('user');
const [inviteDialog, setInviteDialog] = useState(false);
useEffect(() => {
setBreadcrumb([
{
to: "/",
text: "Home",
active: false
},
{
to: "/account/"+userData.currentAccount.id+"/",
text: userData.currentAccount.name,
active: false
},
{
to: "/account/"+userData.currentAccount.id+"/users",
text: 'Manage Users',
active: false
},
{
to: null,
text: title,
active: true
}
]);
}, [userData, setBreadcrumb, title]);
useEffect(() => {
return () => {
mountedRef.current = false
}
},[]);
return (
<>
<Paper>
<Box p={2}>
{success?(
<>
{inviteDialog?(
<Alert severity="success">The invite is sent to the email address.</Alert>
):(
<Alert severity="success">The user is added to the account.</Alert>
)}
<Stack direction="row" spacing={1} mt={2}>
<Button variant="contained" color="primary" onClick={() => history.push("/account/"+userData.currentAccount.id+"/users")} >Back to User List</Button>
</Stack>
</>
):(
<>
{error !== null &&
<div style={{marginBottom: '20px'}}><Alert severity="error">{error}</Alert></div>
}
{inviteDialog?(
<>
<Alert severity="info">The email is not registered by any existing user. Do you want to send an invite to the user?</Alert>
<Stack direction="row" spacing={1} mt={2}>
<Button variant="contained" color="primary" disabled={inSubmit} onClick={e => {
e.preventDefault();
setInSubmit(true);
const inviteEmailToAccount = CloudFunctions.httpsCallable('inviteEmailToAccount');
inviteEmailToAccount({
accountId: userData.currentAccount.id,
email: emailAddress.value,
role: selectedRole
}).then(res => {
if (!mountedRef.current) return null
setInSubmit(false);
setSuccess(true);
}).catch(err => {
if (!mountedRef.current) return null
setError(err.message);
});
}}>{inSubmit && <Loader />}
Yes, send an invite</Button>
<Button variant="contained" color="secondary" disabled={inSubmit} onClick={() => {
history.push("/account/"+userData.currentAccount.id+"/users");
}}>No</Button>
</Stack>
</>
):(
<Form handleSubmit={e => {
e.preventDefault();
setError(null);
setSuccess(false);
setInSubmit(true);
const addUserToAccount = CloudFunctions.httpsCallable('addUserToAccount');
addUserToAccount({
accountId: userData.currentAccount.id,
email: emailAddress.value,
role: selectedRole
}).then(res => {
if (!mountedRef.current) return null
setInSubmit(false);
setSuccess(true);
}).catch(err => {
if (!mountedRef.current) return null
setInSubmit(false);
if(err.details && err.details.code === 'auth/user-not-found'){
setInviteDialog(true);
setInSubmit(false);
}else{
setError(err.message);
}
});
}}
disabled={emailAddress.hasError || emailAddress.value===null || selectedRole===null || inSubmit}
submitBtnStyle={(selectedRole!=='remove')?"primary":"danger"}
inSubmit={inSubmit}
enableDefaultButtons={true}
backToUrl={"/account/"+userData.currentAccount.id+"/users"}
>
<Input label="Email Address" type="email" name="email-address" hasError={emailAddress.hasError} error={emailAddress.error} minLen={5} maxLen={50} required={true} validRegex="^[a-zA-Z0-9-_+\.]*@[a-zA-Z0-9-_\.]*\.[a-zA-Z0-9-_\.]*$" changeHandler={setEmailAddress} fullWidth />
<FormControl fullWidth>
<InputLabel>Role</InputLabel>
<Select label="Role" value={selectedRole} onChange={e => {
setSelectedRole(e.target.value);
}}>
<MenuItem value="user">user</MenuItem>
<MenuItem value="admin">admin</MenuItem>
</Select>
</FormControl>
</Form>
)}
</>
)}
</Box>
</Paper>
</>
)
}
Example #5
| Source File: index.js From fireact with MIT License | 4 votes |
|
UserRole = () => {
const title = 'Change User Role';
const history = useHistory();
const { userData } = useContext(AuthContext);
const { userId } = useParams();
const mountedRef = useRef(true);
const { setBreadcrumb } = useContext(BreadcrumbContext);
const [user, setUser] = useState(null);
const [error, setError] = useState(null);
const [success, setSuccess] = useState(false);
const [inSubmit, setInSubmit] = useState(false);
const [selectedRole, setSelectedRole] = useState(null);
useEffect(() => {
setBreadcrumb([
{
to: "/",
text: "Home",
active: false
},
{
to: "/account/"+userData.currentAccount.id+"/",
text: userData.currentAccount.name,
active: false
},
{
to: "/account/"+userData.currentAccount.id+"/users",
text: 'Manage Users',
active: false
},
{
to: null,
text: title,
active: true
}
]);
setError(null);
const getAccountUser = CloudFunctions.httpsCallable('getAccountUser');
getAccountUser({
accountId: userData.currentAccount.id,
userId: userId
}).then(res => {
if (!mountedRef.current) return null
res.data.lastLoginTime = new Date(res.data.lastLoginTime);
setUser(res.data);
}).catch(err => {
if (!mountedRef.current) return null
setError(err.message);
});
},[userData, userId, setBreadcrumb]);
useEffect(() => {
return () => {
mountedRef.current = false
}
},[]);
return (
<Paper>
<Box p={2}>
{(userId !== userData.currentAccount.owner)?(
success?(
<>
<Alert severity="success" onClose={() => setSuccess(false)}>User role is successfully updated.</Alert>
<Stack direction="row" spacing={1} mt={2}>
<Button variant="contained" color="primary" onClick={() => history.push("/account/"+userData.currentAccount.id+"/users")} >Back to User List</Button>
</Stack>
</>
):(
<Stack spacing={3}>
{error !== null &&
<Alert severity="error">{error}</Alert>
}
{user === null ? (
<Loader text="Loading user details" />
):(
<Form handleSubmit={e => {
e.preventDefault();
setError(null);
setSuccess(false);
setInSubmit(true);
const updateAccountUserRole = CloudFunctions.httpsCallable('updateAccountUserRole');
updateAccountUserRole({
accountId: userData.currentAccount.id,
userId: userId,
role: selectedRole
}).then(res => {
setInSubmit(false);
setSuccess(true);
}).catch(err => {
setInSubmit(false);
setError(err.message);
});
}}
disabled={selectedRole===null || selectedRole===user.role || inSubmit}
submitBtnStyle={(selectedRole!=='remove')?"primary":"error"}
inSubmit={inSubmit}
enableDefaultButtons={true}
backToUrl={"/account/"+userData.currentAccount.id+"/users"}
>
<Stack spacing={1} mb={5} style={{display: 'inline-block', textAlign: 'center'}}>
<Avatar alt={user.displayName} src={user.photoUrl} sx={{width: 100, height:100, margin: 'auto'}} />
<Typography><strong style={{fontSize: '1.3rem'}}>{user.displayName}</strong></Typography>
<Typography>
Last Login:<br /> {user.lastLoginTime.toLocaleString()}
</Typography>
</Stack>
<FormControl fullWidth>
<InputLabel>Role</InputLabel>
<Select label="Role" defaultValue={user.role} onChange={e => {
setSelectedRole(e.target.value);
}}>
<MenuItem value="user">user</MenuItem>
<MenuItem value="admin">admin</MenuItem>
<MenuItem value="remove"><em>-- Remove Access --</em></MenuItem>
</Select>
</FormControl>
</Form>
)}
</Stack>
)
):(
<>
<Alert severity="error">Cannot change account owner role.</Alert>
<Stack direction="row" spacing={1} mt={2}>
<Button variant="contained" color="primary" onClick={() => history.push("/account/"+userData.currentAccount.id+"/users")} >Back to User List</Button>
</Stack>
</>
)}
</Box>
</Paper>
)
}
Example #6
| Source File: FolderPermissions.js From admin-web with GNU Affero General Public License v3.0 | 4 votes |
|
render() {
const { classes, t, open, onCancel, owners, domain, folderID } = this.props;
const { permissions, selected, adding, deleting } = this.state;
return (
<Dialog
onClose={onCancel}
open={open}
maxWidth="sm"
fullWidth
TransitionProps={{
onEnter: this.handleEnter,
}}
>
<DialogTitle>{t('Permissions')}</DialogTitle>
<DialogContent style={{ minWidth: 400 }}>
{owners.length > 0 ? <List className={classes.list}>
{owners.map((user, idx) => <Fragment key={idx}>
<ListItem disablePadding>
<ListItemButton
selected={user.memberID === selected?.memberID}
component="a"
onClick={this.handleUserSelect(user)}
>
<ListItemText primary={user.username}/>
</ListItemButton>
</ListItem>
<Divider />
</Fragment>)}
</List> : <div className={classes.noOwnersContainer}>
<em>{t('No owners')}</em>
</div>}
<div className={classes.addUserRow}>
<Button
onClick={this.handleAdd}
variant="contained"
color="primary"
style={{ marginRight: 8 }}
>
{t('Add')}
</Button>
<Button
onClick={this.handleDelete}
color="secondary"
>
{t('Remove')}
</Button>
</div>
<FormControl fullWidth style={{ marginBottom: 4 }}>
<InputLabel>{t('Profile')}</InputLabel>
<Select
labelId="demo-simple-select-label"
value={permissionProfiles.findIndex(profile => profile.value === permissions) === -1 ? "" : permissions}
label={t('Profile')}
onChange={this.handleProfileSelect}
>
{permissionProfiles.map((profile, idx) =>
<MenuItem key={idx} value={profile.value}>
{profile.name}
</MenuItem>
)}
</Select>
</FormControl>
<Grid container>
<Grid item xs={6}>
<FormControl className={classes.form}>
<FormLabel>Read</FormLabel>
<RadioGroup defaultValue={0} value={permissions & 1} onChange={this.handlePermissions}>
<FormControlLabel
value={0x0}
control={<Radio size="small" className={classes.radio}/>}
label="None"
/>
<FormControlLabel
value={0x1}
control={<Radio size="small" className={classes.radio}/>}
label="Full Details"
/>
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={6}>
<FormControl className={classes.form}>
<FormLabel>Write</FormLabel>
<FormControlLabel
control={
<Checkbox
value={0x2}
checked={Boolean(permissions & 0x2)}
onChange={this.handlePermissions}
className={classes.radio}
color="primary"
/>
}
label={t('Create items')}
/>
<FormControlLabel
control={
<Checkbox
value={0x80}
checked={Boolean(permissions & 0x80)}
className={classes.radio}
onChange={this.handlePermissions}
color="primary"
/>
}
label={t('Create subfolders')}
/>
<FormControlLabel
control={
<Checkbox
checked={Boolean(permissions & 0x8)}
value={0x8}
className={classes.radio}
onChange={this.handlePermissions}
color="primary"
/>
}
label={t('Edit own')}
/>
<FormControlLabel
control={
<Checkbox
className={classes.radio}
checked={Boolean(permissions & 0x20)}
value={0x20}
onChange={this.handlePermissions}
color="primary"
/>
}
label={t('Edit all')}
/>
</FormControl>
</Grid>
</Grid>
<Grid container style={{ marginTop: 16 }}>
<Grid item xs={6}>
<FormControl className={classes.form}>
<FormLabel>Delete items</FormLabel>
<RadioGroup
value={(permissions & 0x50) || true /* This is a bit janky */}
defaultValue={true}
onChange={this.handleRadioPermissions}
>
<FormControlLabel
value={(permissions & 0x50) === 0} // Has explicit handling
control={<Radio size="small" className={classes.radio}/>}
label="None" />
<FormControlLabel
value={0x10}
control={<Radio size="small" className={classes.radio}/>}
label="Own"
/>
<FormControlLabel
value={0x50}
control={<Radio size="small" className={classes.radio}/>}
label="All"
/>
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={6}>
<FormControl className={classes.form}>
<FormLabel>Other</FormLabel>
<FormControlLabel
control={
<Checkbox
className={classes.radio}
checked={Boolean(permissions & 0x100)}
value={0x100}
onChange={this.handlePermissions}
color="primary"
/>
}
label={t('Folder owner')}
/>
<FormControlLabel
control={
<Checkbox
className={classes.radio}
checked={Boolean(permissions & 0x200)}
onChange={this.handlePermissions}
color="primary"
value={0x200}
/>
}
label={t('Folder contact')}
/>
<FormControlLabel
control={
<Checkbox
className={classes.radio}
checked={Boolean(permissions & 0x400)}
onChange={this.handlePermissions}
color="primary"
value={0x400}
/>
}
label={t('Folder visible')}
/>
</FormControl>
</Grid>
</Grid>
</DialogContent>
<DialogActions>
<Button
onClick={onCancel}
color="secondary"
>
{t('Close')}
</Button>
<Button
onClick={this.handleSave}
variant="contained"
color="primary"
disabled={owners.length === 0 || !selected}
>
{t('Save')}
</Button>
</DialogActions>
<AddOwner
open={adding}
onSuccess={this.handleAddingSuccess}
onError={this.handleAddingError}
onCancel={this.handleAddingCancel}
domain={domain}
folderID={folderID}
/>
{selected && <RemoveOwner
open={deleting}
onSuccess={this.handleDeleteSuccess}
onError={this.handleDeleteError}
onClose={this.handleDeleteClose}
ownerName={selected.username}
domainID={domain.ID}
folderID={folderID}
memberID={selected.memberID}
/>}
</Dialog>
);
}
Example #7
| Source File: User.js From admin-web with GNU Affero General Public License v3.0 | 4 votes |
|
render() {
const { classes, t, user, handlePropertyChange } = this.props;
const { properties, ldapID } = user;
const { title, displayname, nickname, primarytelephonenumber, streetaddress,
departmentname, companyname, officelocation, givenname, surname, initials,
assistant, country, locality, stateorprovince, postalcode } = properties;
return (
<FormControl className={classes.form}>
<div className={classes.flexRow}>
<Typography variant="h6">{t('Name')}</Typography>
{ldapID && <Tooltip title={t("Warning") + ": " + t("Changes will be overwritten with next LDAP sync")}>
<Warning color="warning" fontSize="inherit" style={{ fontSize: 32 }}/>
</Tooltip>}
</div>
<Grid container>
<Grid item xs={12} className={classes.gridItem}>
<div className={classes.grid}>
<TextField
className={classes.flexTextfield}
label={t("First name")}
value={givenname || ''}
onChange={handlePropertyChange('givenname')}
variant={ldapID ? "filled" : 'outlined'}
/>
<TextField
//className={classes.flexTextfield}
label={t("Initials")}
value={initials || ''}
onChange={handlePropertyChange('initials')}
variant={ldapID ? "filled" : 'outlined'}
/>
</div>
<TextField
className={classes.propertyInput}
label={t("Surname")}
fullWidth
value={surname || ''}
onChange={handlePropertyChange('surname')}
variant={ldapID ? "filled" : 'outlined'}
/>
</Grid>
<Grid item xs={12} className={classes.gridItem}>
<TextField
className={classes.propertyInput}
label={t("Display name")}
fullWidth
value={displayname || ''}
onChange={handlePropertyChange('displayname')}
variant={ldapID ? "filled" : 'outlined'}
/>
<TextField
className={classes.propertyInput}
label={t("Nickname")}
fullWidth
value={nickname || ''}
onChange={handlePropertyChange('nickname')}
variant={ldapID ? "filled" : 'outlined'}
/>
</Grid>
</Grid>
<Divider className={classes.divider} />
<Grid container>
<Grid item xs={6} style={{ display: 'flex' }}>
<TextField
className={classes.address}
label={t("Address")}
value={streetaddress || ''}
onChange={handlePropertyChange('streetaddress')}
multiline
rows={3}
variant={ldapID ? "filled" : 'outlined'}
inputProps={{
style: {
height: 95,
},
}}
/>
</Grid>
<Grid item xs={6} style={{ paddingRight: 16 }}>
<TextField
className={classes.input}
label={t("Position")}
fullWidth
value={title || ''}
onChange={handlePropertyChange('title')}
variant={ldapID ? "filled" : 'outlined'}
/>
<TextField
className={classes.input}
label={t("Company")}
fullWidth
value={companyname || ''}
onChange={handlePropertyChange('companyname')}
variant={ldapID ? "filled" : 'outlined'}
/>
</Grid>
</Grid>
<Grid container>
<Grid item xs={12} className={classes.gridItem}>
<TextField
className={classes.propertyInput}
label={t("Locality")}
fullWidth
value={locality || ''}
onChange={handlePropertyChange('locality')}
variant={ldapID ? "filled" : 'outlined'}
/>
<TextField
className={classes.propertyInput}
label={t("Department")}
fullWidth
value={departmentname || ''}
onChange={handlePropertyChange('departmentname')}
variant={ldapID ? "filled" : 'outlined'}
/>
</Grid>
<Grid item xs={12} className={classes.gridItem}>
<TextField
className={classes.propertyInput}
label={t("State")}
fullWidth
value={stateorprovince || ''}
onChange={handlePropertyChange('stateorprovince')}
variant={ldapID ? "filled" : 'outlined'}
/>
<TextField
className={classes.propertyInput}
label={t("Office")}
fullWidth
value={officelocation || ''}
onChange={handlePropertyChange('officelocation')}
variant={ldapID ? "filled" : 'outlined'}
/>
</Grid>
<Grid item xs={12} className={classes.gridItem}>
<TextField
className={classes.propertyInput}
label={t("Postal Code")}
fullWidth
value={postalcode || ''}
onChange={handlePropertyChange('postalcode')}
variant={ldapID ? "filled" : 'outlined'}
/>
<TextField
className={classes.propertyInput}
label={t("Assistant")}
fullWidth
value={assistant || ''}
onChange={handlePropertyChange('assistant')}
variant={ldapID ? "filled" : 'outlined'}
/>
</Grid>
<Grid item xs={12} className={classes.gridItem}>
<FormControl className={classes.countrySelect}>
<InputLabel variant="standard">{t("Country")}</InputLabel>
<NativeSelect
value={country || "Germany"}
onChange={handlePropertyChange('country')}
fullWidth
>
{world.map(country =>
<option key={country.id} value={country.name}>
{country.name}
</option>
)}
</NativeSelect>
</FormControl>
<TextField
className={classes.propertyInput}
label={t("Telephone")}
fullWidth
value={primarytelephonenumber || ''}
onChange={handlePropertyChange('primarytelephonenumber')}
variant={ldapID ? "filled" : 'outlined'}
/>
</Grid>
</Grid>
</FormControl>
);
}
Example #8
| Source File: Classes.js From admin-web with GNU Affero General Public License v3.0 | 4 votes |
|
render() {
const { classes, t, _classes, domain, tableState, handleMatch, handleRequestSort,
handleAdd, handleAddingSuccess, handleAddingClose, handleAddingError,
handleDelete, handleDeleteClose, handleDeleteError,
handleDeleteSuccess, handleEdit } = this.props;
const { order, orderBy, match, snackbar, adding, deleting } = tableState;
const writable = this.context.includes(DOMAIN_ADMIN_WRITE);
const { tab, root } = this.state;
return (
<TableViewContainer
handleScroll={this.handleScroll}
headline={t("Groups")}
subtitle={t("groups_sub")}
href="https://docs.grommunio.com/admin/administration.html#groups"
snackbar={snackbar || this.state.snackbar}
onSnackbarClose={this.handleSnackbarClose}
baseRef={tc => (this.treeContainer = tc)}
>
<Grid container alignItems="flex-end" className={classes.buttonGrid}>
<Button
variant="contained"
color="primary"
onClick={handleAdd}
className={classes.newButton}
disabled={!writable}
>
{t('New group')}
</Button>
<div className={classes.actions}>
<TextField
value={match}
onChange={handleMatch}
placeholder={t("Search")}
variant="outlined"
className={classes.textfield}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<Search color="secondary" />
</InputAdornment>
),
}}
color="primary"
/>
</div>
</Grid>
<Tabs
indicatorColor="primary"
textColor="primary"
className={classes.tabs}
onChange={this.handleTab}
value={tab}
>
<Tab value={0} label={t("List")} />
<Tab value={1} label={t("Tree")} />
</Tabs>
{!tab && <Typography className={classes.count} color="textPrimary">
{t("showingGroups", { count: _classes.Classes.length })}
</Typography>}
{!tab ? <Paper className={classes.tablePaper} elevation={1}>
<Table size="small">
<TableHead>
<TableRow>
{this.columns.map(column =>
<TableCell key={column.value}>
<TableSortLabel
active={orderBy === column.value}
align="left"
direction={orderBy === column.value ? order : 'asc'}
onClick={handleRequestSort(column.value)}
>
{t(column.label)}
</TableSortLabel>
</TableCell>
)}
<TableCell></TableCell>
</TableRow>
</TableHead>
<TableBody>
{_classes.Classes.map((obj, idx) =>
<TableRow key={idx} hover onClick={handleEdit('/' + domain.ID + '/classes/' + obj.ID)}>
<TableCell>{obj.classname}</TableCell>
<TableCell>{obj.listname}</TableCell>
<TableCell align="right">
{writable && <IconButton onClick={handleDelete(obj)} size="large">
<Delete color="error"/>
</IconButton>}
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
{(_classes.Classes.length < _classes.count) && <Grid container justifyContent="center">
<CircularProgress color="primary" className={classes.circularProgress}/>
</Grid>}
</Paper> :
<>
<FormControl className={classes.select}>
<InputLabel variant="standard">{t("Root group")}</InputLabel>
<Select
fullWidth
value={root > -1 ? root : ''}
onChange={this.handleRootSelect}
input={<Input />}
placeholder={t('Select root group')}
>
{_classes.Trees.map((tree, idx) => (
<MenuItem key={idx} value={idx}>
{tree.name}
</MenuItem>
))}
</Select>
</FormControl>
<div className={classes.treeContainer}>
{root !== -1 &&
<Paper style={{ flex: 1 }}>
<Tree
data={_classes.Trees[root]}
orientation="vertical"
renderCustomNodeElement={this.renderNode}
depthFactor={50}
pathFunc="step"
translate={this.getOffset()}
scaleExtent={{
min: 0.1,
max: 2,
}}
separation={{
siblings: 1,
nonSiblings: 2,
}}
onNodeClick={this.handleNodeClicked}
collapsible={false}
/>
</Paper>}
</div>
</>
}
<AddClass
open={adding}
onSuccess={handleAddingSuccess}
onError={handleAddingError}
domain={domain}
onClose={handleAddingClose}
/>
<DomainDataDelete
open={!!deleting}
delete={this.props.delete}
onSuccess={handleDeleteSuccess}
onError={handleDeleteError}
onClose={handleDeleteClose}
item={deleting.name}
id={deleting.ID}
domainID={domain.ID}
/>
</TableViewContainer>
);
}
