Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Admin components clean (without sidebar) #1324

Merged
merged 9 commits into from
Aug 4, 2024
Merged

Admin components clean (without sidebar) #1324

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
1d09ec5
Add and remove translations needed for admin settings dashboard
hazeltonbw Jul 23, 2024
47f8214
Remove unused sidebar translations, remove reference to managing user…
hazeltonbw Aug 1, 2024
ac72e28
Organize settings by category and give each a header, make CSS changes
hazeltonbw Aug 1, 2024
243bf60
Remove unused CSS, change name of admin panel, remove manage users bu…
hazeltonbw Aug 1, 2024
909b010
Fix formatting errors
hazeltonbw Aug 1, 2024
e74a45d
Made requested changes
hazeltonbw Aug 3, 2024
ec86c72
Change categories back to being alphabetical
hazeltonbw Aug 4, 2024
93a3575
Limit size of inputs to 50% of the page, 100% when small display is u…
hazeltonbw Aug 4, 2024
e28086b
Fix formatting errors
hazeltonbw Aug 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/client/app/components/HeaderButtonsComponent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -209,7 +209,7 @@ export default function HeaderButtonsComponent() {
disabled={state.shouldAdminButtonDisabled}
tag={Link}
to="/admin">
<FormattedMessage id='admin.panel' />
<FormattedMessage id='admin.settings' />
</DropdownItem>
<DropdownItem divider />
<DropdownItem
Expand Down
33 changes: 8 additions & 25 deletions src/client/app/components/admin/AdminComponent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,23 +7,12 @@ import { FormattedMessage } from 'react-intl';
import TooltipHelpComponent from '../../components/TooltipHelpComponent';
import TooltipMarkerComponent from '../TooltipMarkerComponent';
import PreferencesComponent from './PreferencesComponent';
import ManageUsersLinkButtonComponent from './users/ManageUsersLinkButtonComponent';

/**
* React component that defines the admin page
* @returns Admin page element
*/
export default function AdminComponent() {

const bottomPaddingStyle: React.CSSProperties = {
paddingBottom: '15px'
};

const sectionTitleStyle: React.CSSProperties = {
fontWeight: 'bold',
margin: 0,
paddingBottom: '5px'
};
const titleStyle: React.CSSProperties = {
textAlign: 'center'
};
Expand All @@ -34,21 +23,15 @@ export default function AdminComponent() {
return (
<div>
<TooltipHelpComponent page='admin' />
<h2 style={titleStyle}>
<FormattedMessage id='admin.settings' />
<div style={tooltipStyle}>
<TooltipMarkerComponent page='admin' helpTextId='help.admin.header' />
</div>
</h2>
<div className='container-fluid'>
<h2 style={titleStyle}>
<FormattedMessage id='admin.panel' />
<div style={tooltipStyle}>
<TooltipMarkerComponent page='admin' helpTextId='help.admin.header' />
</div>
</h2>
<div className='row'>
<div className='col-12 col-lg-6'>
<div style={bottomPaddingStyle}>
<p style={sectionTitleStyle}><FormattedMessage id='manage' />:</p>
<div>
<ManageUsersLinkButtonComponent />
</div>
</div>
<div className='d-inline-flex flex-column align-items-center justify-content-center w-100'>
<div className='col-12 col-lg-6 border border-4 rounded p-4 vw-50'>
<PreferencesComponent />
</div>
</div>
Expand Down
221 changes: 112 additions & 109 deletions src/client/app/components/admin/PreferencesComponent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,28 +39,17 @@ export default function PreferencesComponent() {
};

return (
<div>
<div className='d-flex flex-column '>
<UnsavedWarningComponent
hasUnsavedChanges={hasChanges}
changes={localAdminPref}
submitChanges={submitPreferences}
successMessage='updated.preferences'
failureMessage='failed.to.submit.changes'
/>
<div style={bottomPaddingStyle}>
<p style={titleStyle}>
{`${translate('default.site.title')}:`}
</p>
<Input
type='text'
placeholder={translate('name')}
value={localAdminPref.displayTitle}
onChange={e => makeLocalChanges('displayTitle', e.target.value)}
maxLength={50}
/>
</div>
<h3 className='border-bottom'>{translate('graph.settings')}</h3>
<div>
<p style={labelStyle}>
<p className='mt-2' style={labelStyle}>
<FormattedMessage id='default.graph.type' />:
</p>
{
Expand All @@ -81,7 +70,7 @@ export default function PreferencesComponent() {
))
}
</div>
<p style={labelStyle}>
<p className='mt-2' style={labelStyle}>
<FormattedMessage id='default.graph.settings' />:
</p>
<div className='checkbox'>
Expand All @@ -108,7 +97,7 @@ export default function PreferencesComponent() {
</label>
</div>
<div>
<p style={labelStyle}>
<p className='mt-2' style={labelStyle}>
{translate('default.area.unit')}

</p>
Expand Down Expand Up @@ -139,81 +128,9 @@ export default function PreferencesComponent() {
</label>
</div>
</div>

<h3 className='border-bottom mt-3'>{translate('meter.settings')}</h3>
<div>
<p style={labelStyle}>
{translate('default.language')}
</p>
<div className='radio'>
<label>
<input
type='radio'
style={{ marginRight: '10px' }}
name='languageTypes'
value={LanguageTypes.en}
onChange={e => makeLocalChanges('defaultLanguage', e.target.value)}
checked={localAdminPref.defaultLanguage === LanguageTypes.en}
/>
English
</label>
</div>
<div className='radio'>
<label>
<input
type='radio'
style={{ marginRight: '10px' }}
name='languageTypes'
value={LanguageTypes.fr}
onChange={e => makeLocalChanges('defaultLanguage', e.target.value)}
checked={localAdminPref.defaultLanguage === LanguageTypes.fr}
/>
Français
</label>
</div>
<div className='radio'>
<label>
<input
type='radio'
style={{ marginRight: '10px' }}
name='languageTypes'
value={LanguageTypes.es}
onChange={e => makeLocalChanges('defaultLanguage', e.target.value)}
checked={localAdminPref.defaultLanguage === LanguageTypes.es}
/>
Español
</label>
</div>
</div>
<div style={bottomPaddingStyle}>
<p style={titleStyle}>
{`${translate('default.time.zone')}:`}
</p>
<TimeZoneSelect
current={localAdminPref.defaultTimezone}
handleClick={e => makeLocalChanges('defaultTimezone', e)} />
</div>
<div style={bottomPaddingStyle}>
<p style={titleStyle}>
{`${translate('default.warning.file.size')}:`}
</p>
<Input
type='number'
value={localAdminPref.defaultWarningFileSize}
onChange={e => makeLocalChanges('defaultWarningFileSize', e.target.value)}
maxLength={50}
/>
</div>
<div style={bottomPaddingStyle}>
<p style={titleStyle}>
{`${translate('default.file.size.limit')}:`}
</p>
<Input
type='number'
value={localAdminPref.defaultFileSizeLimit}
onChange={e => makeLocalChanges('defaultFileSizeLimit', e.target.value)}
maxLength={50}
/>
</div>
<div style={bottomPaddingStyle}>
<p style={titleStyle}>
{`${translate('default.meter.reading.frequency')}:`}
</p>
Expand All @@ -223,8 +140,8 @@ export default function PreferencesComponent() {
onChange={e => makeLocalChanges('defaultMeterReadingFrequency', e.target.value)}
/>
</div>
<div style={bottomPaddingStyle}>
<p style={titleStyle}>
<div>
<p className='mt-2' style={titleStyle}>
{`${translate('default.meter.minimum.value')}:`}
</p>
<Input
Expand All @@ -234,8 +151,8 @@ export default function PreferencesComponent() {
maxLength={50}
/>
</div>
<div style={bottomPaddingStyle}>
<p style={titleStyle}>
<div>
<p className='mt-2' style={titleStyle}>
{`${translate('default.meter.maximum.value')}:`}
</p>
<Input
Expand All @@ -245,8 +162,8 @@ export default function PreferencesComponent() {
maxLength={50}
/>
</div>
<div style={bottomPaddingStyle}>
<p style={titleStyle}>
<div>
<p className='mt-2' style={titleStyle}>
{`${translate('default.meter.minimum.date')}:`}
</p>
<Input
Expand All @@ -256,8 +173,8 @@ export default function PreferencesComponent() {
placeholder='YYYY-MM-DD HH:MM:SS'
/>
</div>
<div style={bottomPaddingStyle}>
<p style={titleStyle}>
<div>
<p className='mt-2' style={titleStyle}>
{`${translate('default.meter.maximum.date')}:`}
</p>
<Input
Expand All @@ -267,8 +184,8 @@ export default function PreferencesComponent() {
placeholder='YYYY-MM-DD HH:MM:SS'
/>
</div>
<div style={bottomPaddingStyle}>
<p style={titleStyle}>
<div>
<p className='mt-2' style={titleStyle}>
{`${translate('default.meter.reading.gap')}:`}
</p>
<Input
Expand All @@ -278,8 +195,8 @@ export default function PreferencesComponent() {
maxLength={50}
/>
</div>
<div style={bottomPaddingStyle}>
<p style={titleStyle}>
<div>
<p className='mt-2' style={titleStyle}>
{`${translate('default.meter.maximum.errors')}:`}
</p>
<Input
Expand All @@ -289,8 +206,8 @@ export default function PreferencesComponent() {
maxLength={50}
/>
</div>
<div style={bottomPaddingStyle}>
<p style={titleStyle}>
<div>
<p className='mt-2' style={titleStyle}>
{`${translate('default.meter.disable.checks')}:`}
</p>
<Input
Expand All @@ -302,8 +219,95 @@ export default function PreferencesComponent() {
})}
</Input>
</div>
<div style={bottomPaddingStyle}>
<p style={titleStyle}>
<div>
<h3 className='border-bottom mt-3'>{translate('site.settings')}</h3>
<div>
<p className='mt-2' style={titleStyle}>
{`${translate('site.title')}:`}
</p>
<Input
type='text'
placeholder={translate('name')}
value={localAdminPref.displayTitle}
onChange={e => makeLocalChanges('displayTitle', e.target.value)}
maxLength={50}
/>
</div>
<p className='mt-2' style={labelStyle}>
{translate('default.language')}
</p>
<div className='radio'>
<label>
<input
type='radio'
style={{ marginRight: '10px' }}
name='languageTypes'
value={LanguageTypes.en}
onChange={e => makeLocalChanges('defaultLanguage', e.target.value)}
checked={localAdminPref.defaultLanguage === LanguageTypes.en}
/>
English
</label>
</div>
<div className='radio'>
<label>
<input
type='radio'
style={{ marginRight: '10px' }}
name='languageTypes'
value={LanguageTypes.fr}
onChange={e => makeLocalChanges('defaultLanguage', e.target.value)}
checked={localAdminPref.defaultLanguage === LanguageTypes.fr}
/>
Français
</label>
</div>
<div className='radio'>
<label>
<input
type='radio'
style={{ marginRight: '10px' }}
name='languageTypes'
value={LanguageTypes.es}
onChange={e => makeLocalChanges('defaultLanguage', e.target.value)}
checked={localAdminPref.defaultLanguage === LanguageTypes.es}
/>
Español
</label>
</div>
</div>
<div>
<p className='mt-2' style={titleStyle}>
{`${translate('default.time.zone')}:`}
</p>
<TimeZoneSelect
current={localAdminPref.defaultTimezone}
handleClick={e => makeLocalChanges('defaultTimezone', e)} />
</div>
<div>
<p className='mt-2' style={titleStyle}>
{`${translate('default.warning.file.size')}:`}
</p>
<Input
type='number'
value={localAdminPref.defaultWarningFileSize}
onChange={e => makeLocalChanges('defaultWarningFileSize', e.target.value)}
maxLength={50}
/>
</div>
<div>
<p className='mt-2' style={titleStyle}>
{`${translate('default.file.size.limit')}:`}
</p>
<Input
type='number'
value={localAdminPref.defaultFileSizeLimit}
onChange={e => makeLocalChanges('defaultFileSizeLimit', e.target.value)}
maxLength={50}
/>
</div>
<div>
<p className='mt-2' style={titleStyle}>
<FormattedMessage id='default.help.url' />:
</p>
<Input
Expand All @@ -312,6 +316,7 @@ export default function PreferencesComponent() {
onChange={e => makeLocalChanges('defaultHelpUrl', e.target.value)}
/>
</div>

hazeltonbw marked this conversation as resolved.
Show resolved Hide resolved
<Button
hazeltonbw marked this conversation as resolved.
Show resolved Hide resolved
type='submit'
hazeltonbw marked this conversation as resolved.
Show resolved Hide resolved
onClick={() =>
Expand All @@ -325,6 +330,7 @@ export default function PreferencesComponent() {
})
}
disabled={!hasChanges}
className='align-self-end mt-3'
>
{translate('submit')}
</Button>
Expand All @@ -336,9 +342,6 @@ const labelStyle: React.CSSProperties = {
fontWeight: 'bold',
margin: 0
};
const bottomPaddingStyle: React.CSSProperties = {
paddingBottom: '15px'
};

const titleStyle: React.CSSProperties = {
fontWeight: 'bold',
Expand Down
Loading
Loading