mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

move AccessContainer into its own Components

Browse source
This commit is contained in:
grafixeyehero 2022-05-07 22:10:01 +03:00
parent 01d29bcf11
commit 0c4851b092
3 changed files with 146 additions and 153 deletions
Download patch file Download diff file Expand all files Collapse all files

41
src/components/dashboard/users/AccessContainer.tsx Normal file
View file

@ -0,0 +1,41 @@
import React, { FunctionComponent } from 'react';
import globalize from '../../../scripts/globalize';
import CheckBoxElement from './CheckBoxElement';
type IProps = {
ContainerClassName?: string;
HeaderTitle?: string;
CheckBoxClassName?: string;
CheckBoxTitle?: string;
ListContainerClassName?: string;
AccessClassName?: string;
ListTitle?: string;
Description?: string;
children?: React.ReactNode
}
const AccessContainer: FunctionComponent<IProps> = ({ContainerClassName, HeaderTitle, CheckBoxClassName, CheckBoxTitle, ListContainerClassName, AccessClassName, ListTitle, Description, children }: IProps) => {
return (
<div className={ContainerClassName}>
<h2>{globalize.translate(HeaderTitle)}</h2>
<CheckBoxElement labelClassName='checkboxContainer' type='checkbox' className={CheckBoxClassName} title={CheckBoxTitle} />
<div className={ListContainerClassName}>
<div className={AccessClassName}>
<h3 className='checkboxListLabel'>
{globalize.translate(ListTitle)}
</h3>
<div className='checkboxList paperList' style={{
padding: '.5em 1em'
}}>
{children}
</div>
</div>
<div className='fieldDescription'>
{globalize.translate(Description)}
</div>
</div>
</div>
);
};
export default AccessContainer;

99
src/components/pages/NewUserPage.tsx
View file

@ -9,6 +9,7 @@ import InputElement from '../dashboard/users/InputElement';
import CheckBoxElement from '../dashboard/users/CheckBoxElement'; import CheckBoxElement from '../dashboard/users/CheckBoxElement';
import CheckBoxListItem from '../dashboard/users/CheckBoxListItem'; import CheckBoxListItem from '../dashboard/users/CheckBoxListItem';
import ButtonElement from '../dashboard/users/ButtonElement'; import ButtonElement from '../dashboard/users/ButtonElement';
import AccessContainer from '../dashboard/users/AccessContainer';
type userInput = { type userInput = {
Name?: string; Name?: string;
@ -194,65 +195,47 @@ const NewUserPage: FunctionComponent = () => {
label='LabelPassword' label='LabelPassword'
/> />
</div> </div>
<AccessContainer
ContainerClassName='folderAccessContainer'
HeaderTitle='HeaderLibraryAccess'
CheckBoxClassName='chkEnableAllFolders'
CheckBoxTitle='OptionEnableAccessToAllLibraries'
ListContainerClassName='folderAccessListContainer'
AccessClassName='folderAccess'
ListTitle='HeaderLibraries'
Description='LibraryAccessHelp'
>
{mediaFoldersItems.map(Item => (
<CheckBoxListItem
key={Item.Id}
className='chkFolder'
Id={Item.Id}
Name={Item.Name}
checkedAttribute=''
/>
))}
</AccessContainer>
<div className='folderAccessContainer'> <AccessContainer
<h2>{globalize.translate('HeaderLibraryAccess')}</h2> ContainerClassName='channelAccessContainer verticalSection-extrabottompadding hide'
<CheckBoxElement HeaderTitle='HeaderChannelAccess'
type='checkbox' CheckBoxClassName='chkEnableAllChannels'
className='chkEnableAllFolders' CheckBoxTitle='OptionEnableAccessToAllChannels'
title='OptionEnableAccessToAllLibraries' ListContainerClassName='channelAccessListContainer'
/> AccessClassName='channelAccess'
<div className='folderAccessListContainer'> ListTitle='Channels'
<div className='folderAccess'> Description='ChannelAccessHelp'
<h3 className='checkboxListLabel'> >
{globalize.translate('HeaderLibraries')} {channelsItems.map(Item => (
</h3> <CheckBoxListItem
<div className='checkboxList paperList' style={{padding: '.5em 1em'}}> key={Item.Id}
{mediaFoldersItems.map(Item => ( className='chkChannel'
<CheckBoxListItem Id={Item.Id}
key={Item.Id} Name={Item.Name}
className='chkFolder' checkedAttribute=''
Id={Item.Id} />
Name={Item.Name} ))}
checkedAttribute='' </AccessContainer>
/>
))}
</div>
</div>
<div className='fieldDescription'>
{globalize.translate('LibraryAccessHelp')}
</div>
</div>
</div>
<div className='channelAccessContainer verticalSection-extrabottompadding hide'>
<h2>{globalize.translate('HeaderChannelAccess')}</h2>
<CheckBoxElement
type='checkbox'
className='chkEnableAllChannels'
title='OptionEnableAccessToAllChannels'
/>
<div className='channelAccessListContainer'>
<div className='channelAccess'>
<h3 className='checkboxListLabel'>
{globalize.translate('Channels')}
</h3>
<div className='checkboxList paperList' style={{padding: '.5em 1em'}}>
{channelsItems.map(Item => (
<CheckBoxListItem
key={Item.Id}
className='chkChannel'
Id={Item.Id}
Name={Item.Name}
checkedAttribute=''
/>
))}
</div>
</div>
<div className='fieldDescription'>
{globalize.translate('ChannelAccessHelp')}
</div>
</div>
</div>
<div> <div>
<ButtonElement <ButtonElement
type='submit' type='submit'

159
src/components/pages/UserLibraryAccessPage.tsx
View file

@ -11,6 +11,7 @@ import CheckBoxListItem from '../dashboard/users/CheckBoxListItem';
import ButtonElement from '../dashboard/users/ButtonElement'; import ButtonElement from '../dashboard/users/ButtonElement';
import { getParameterByName } from '../../utils/url'; import { getParameterByName } from '../../utils/url';
import SectionTitleContainer from '../dashboard/users/SectionTitleContainer'; import SectionTitleContainer from '../dashboard/users/SectionTitleContainer';
import AccessContainer from '../dashboard/users/AccessContainer';
type ItemsArr = { type ItemsArr = {
Name?: string; Name?: string;
@ -231,101 +232,69 @@ const UserLibraryAccessPage: FunctionComponent = () => {
<SectionTitleContainer title={userName}/> <SectionTitleContainer title={userName}/>
<SectionTabs activeTab='userlibraryaccess'/> <SectionTabs activeTab='userlibraryaccess'/>
<form className='userLibraryAccessForm'> <form className='userLibraryAccessForm'>
<div className='folderAccessContainer'> <AccessContainer
<h2>{globalize.translate('HeaderLibraryAccess')}</h2> ContainerClassName='folderAccessContainer'
<CheckBoxElement HeaderTitle='HeaderLibraryAccess'
labelClassName='checkboxContainer' CheckBoxClassName='chkEnableAllFolders'
type='checkbox' CheckBoxTitle='OptionEnableAccessToAllLibraries'
className='chkEnableAllFolders' ListContainerClassName='folderAccessListContainer'
title='OptionEnableAccessToAllLibraries' AccessClassName='folderAccess'
/> ListTitle='HeaderLibraries'
<div className='folderAccessListContainer'> Description='LibraryAccessHelp'
<div className='folderAccess'> >
<h3 className='checkboxListLabel'> {mediaFoldersItems.map(Item => (
{globalize.translate('HeaderLibraries')} <CheckBoxListItem
</h3> key={Item.Id}
<div className='checkboxList paperList checkboxList-paperList'> className='chkFolder'
{mediaFoldersItems.map(Item => { Id={Item.Id}
return ( Name={Item.Name}
<CheckBoxListItem checkedAttribute={Item.checkedAttribute}
key={Item.Id} />
className='chkFolder' ))}
Id={Item.Id} </AccessContainer>
Name={Item.Name}
checkedAttribute={Item.checkedAttribute} <AccessContainer
/> ContainerClassName='channelAccessContainer hide'
); HeaderTitle='HeaderChannelAccess'
})} CheckBoxClassName='chkEnableAllChannels'
</div> CheckBoxTitle='OptionEnableAccessToAllChannels'
</div> ListContainerClassName='channelAccessListContainer'
<div className='fieldDescription'> AccessClassName='channelAccess'
{globalize.translate('LibraryAccessHelp')} ListTitle='Channels'
</div> Description='ChannelAccessHelp'
</div> >
</div> {channelsItems.map(Item => (
<div className='channelAccessContainer hide'> <CheckBoxListItem
<h2>{globalize.translate('HeaderChannelAccess')}</h2> key={Item.Id}
<CheckBoxElement className='chkChannel'
labelClassName='checkboxContainer' Id={Item.Id}
type='checkbox' Name={Item.Name}
className='chkEnableAllChannels' checkedAttribute={Item.checkedAttribute}
title='OptionEnableAccessToAllChannels' />
/> ))}
<div className='channelAccessListContainer'> </AccessContainer>
<div className='channelAccess'>
<h3 className='checkboxListLabel'> <AccessContainer
{globalize.translate('Channels')} ContainerClassName='deviceAccessContainer hide'
</h3> HeaderTitle='HeaderDeviceAccess'
<div className='checkboxList paperList' style={{padding: '.5em 1em'}}> CheckBoxClassName='chkEnableAllDevices'
{channelsItems.map(Item => ( CheckBoxTitle='OptionEnableAccessFromAllDevices'
<CheckBoxListItem ListContainerClassName='deviceAccessListContainer'
key={Item.Id} AccessClassName='deviceAccess'
className='chkChannel' ListTitle='HeaderDevices'
Id={Item.Id} Description='DeviceAccessHelp'
Name={Item.Name} >
checkedAttribute={Item.checkedAttribute} {devicesItems.map(Item => (
/> <CheckBoxListItem
))} key={Item.Id}
</div> className='chkDevice'
</div> Id={Item.Id}
<div className='fieldDescription'> Name={Item.Name}
{globalize.translate('ChannelAccessHelp')} AppName={Item.AppName}
</div> checkedAttribute={Item.checkedAttribute}
</div> />
</div> ))}
<br /> </AccessContainer>
<div className='deviceAccessContainer hide'>
<h2>{globalize.translate('HeaderDeviceAccess')}</h2>
<CheckBoxElement
labelClassName='checkboxContainer'
type='checkbox'
className='chkEnableAllDevices'
title='OptionEnableAccessFromAllDevices'
/>
<div className='deviceAccessListContainer'>
<div className='deviceAccess'>
<h3 className='checkboxListLabel'>
{globalize.translate('HeaderDevices')}
</h3>
<div className='checkboxList paperList' style={{padding: '.5em 1em'}}>
{devicesItems.map(Item => (
<CheckBoxListItem
key={Item.Id}
className='chkDevice'
Id={Item.Id}
Name={Item.Name}
AppName={Item.AppName}
checkedAttribute={Item.checkedAttribute}
/>
))}
</div>
</div>
<div className='fieldDescription'>
{globalize.translate('DeviceAccessHelp')}
</div>
</div>
<br />
</div>
<br /> <br />
<div> <div>
<ButtonElement <ButtonElement