mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
Merge pull request #3026 from grafixeyehero/convert-newUserPage-to-react
convert NewUserPage to react
This commit is contained in:
Bill Thornton
GitHub
commit
fd34aea9b4
9 changed files with 384 additions and 191 deletions
32
src/components/dashboard/users/ButtonElement.tsx
Normal file
32
src/components/dashboard/users/ButtonElement.tsx
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
import React, { FunctionComponent } from 'react';
|
||||||
|
import globalize from '../../../scripts/globalize';
|
||||||
|
|
||||||
|
const createButtonElement = ({ type, className, title }) => ({
|
||||||
|
__html: `<button
|
||||||
|
is="emby-button"
|
||||||
|
type="${type}"
|
||||||
|
class="${className}"
|
||||||
|
>
|
||||||
|
<span>${title}</span>
|
||||||
|
</button>`
|
||||||
|
});
|
||||||
|
|
||||||
|
type IProps = {
|
||||||
|
type?: string;
|
||||||
|
className?: string;
|
||||||
|
title?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const ButtonElement: FunctionComponent<IProps> = ({ type, className, title }: IProps) => {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
dangerouslySetInnerHTML={createButtonElement({
|
||||||
|
type: type,
|
||||||
|
className: className,
|
||||||
|
title: globalize.translate(title)
|
||||||
|
})}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ButtonElement;
|
||||||
33
src/components/dashboard/users/CheckBoxElement.tsx
Normal file
33
src/components/dashboard/users/CheckBoxElement.tsx
Normal file
|
|
@ -0,0 +1,33 @@
|
||||||
|
import React, { FunctionComponent } from 'react';
|
||||||
|
import globalize from '../../../scripts/globalize';
|
||||||
|
|
||||||
|
const createCheckBoxElement = ({ type, className, title }) => ({
|
||||||
|
__html: `<label>
|
||||||
|
<input
|
||||||
|
is="emby-checkbox"
|
||||||
|
type="${type}"
|
||||||
|
class="${className}"
|
||||||
|
/>
|
||||||
|
<span>${title}</span>
|
||||||
|
</label>`
|
||||||
|
});
|
||||||
|
|
||||||
|
type IProps = {
|
||||||
|
type?: string;
|
||||||
|
className?: string;
|
||||||
|
title?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const CheckBoxElement: FunctionComponent<IProps> = ({ type, className, title }: IProps) => {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
dangerouslySetInnerHTML={createCheckBoxElement({
|
||||||
|
type: type,
|
||||||
|
className: className,
|
||||||
|
title: globalize.translate(title)
|
||||||
|
})}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CheckBoxElement;
|
||||||
34
src/components/dashboard/users/CheckBoxListItem.tsx
Normal file
34
src/components/dashboard/users/CheckBoxListItem.tsx
Normal file
|
|
@ -0,0 +1,34 @@
|
||||||
|
import React, { FunctionComponent } from 'react';
|
||||||
|
|
||||||
|
type IProps = {
|
||||||
|
className?: string;
|
||||||
|
Name?: string;
|
||||||
|
Id?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const createCheckBoxElement = ({className, Name, Id}) => ({
|
||||||
|
__html: `<label>
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
is="emby-checkbox"
|
||||||
|
class="${className}"
|
||||||
|
data-id="${Id}"
|
||||||
|
/>
|
||||||
|
<span>${Name}</span>
|
||||||
|
</label>`
|
||||||
|
});
|
||||||
|
|
||||||
|
const CheckBoxListItem: FunctionComponent<IProps> = ({className, Name, Id}: IProps) => {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
dangerouslySetInnerHTML={createCheckBoxElement({
|
||||||
|
className: className,
|
||||||
|
Name: Name,
|
||||||
|
Id: Id
|
||||||
|
})}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CheckBoxListItem;
|
||||||
|
|
||||||
34
src/components/dashboard/users/InputElement.tsx
Normal file
34
src/components/dashboard/users/InputElement.tsx
Normal file
|
|
@ -0,0 +1,34 @@
|
||||||
|
import React, { FunctionComponent } from 'react';
|
||||||
|
import globalize from '../../../scripts/globalize';
|
||||||
|
|
||||||
|
const createInputElement = ({ type, id, label, options }) => ({
|
||||||
|
__html: `<input
|
||||||
|
is="emby-input"
|
||||||
|
type="${type}"
|
||||||
|
id="${id}"
|
||||||
|
label="${label}"
|
||||||
|
${options}
|
||||||
|
/>`
|
||||||
|
});
|
||||||
|
|
||||||
|
type IProps = {
|
||||||
|
type?: string;
|
||||||
|
id?: string;
|
||||||
|
label?: string;
|
||||||
|
options?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const InputElement: FunctionComponent<IProps> = ({ type, id, label, options }: IProps) => {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
dangerouslySetInnerHTML={createInputElement({
|
||||||
|
type: type,
|
||||||
|
id: id,
|
||||||
|
label: globalize.translate(label),
|
||||||
|
options: options ? options : ''
|
||||||
|
})}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default InputElement;
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
import React, { FunctionComponent } from 'react';
|
import React, { FunctionComponent } from 'react';
|
||||||
import globalize from '../../../scripts/globalize';
|
import globalize from '../../../scripts/globalize';
|
||||||
|
|
||||||
const createLinkElement = ({ className, href, title }) => ({
|
const createLinkElement = ({ className, title, href }) => ({
|
||||||
__html: `<a
|
__html: `<a
|
||||||
is="emby-linkbutton"
|
is="emby-linkbutton"
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
|
|
|
||||||
249
src/components/pages/NewUserPage.tsx
Normal file
249
src/components/pages/NewUserPage.tsx
Normal file
|
|
@ -0,0 +1,249 @@
|
||||||
|
import React, { FunctionComponent, useCallback, useEffect, useState, useRef } from 'react';
|
||||||
|
|
||||||
|
import Dashboard from '../../scripts/clientUtils';
|
||||||
|
import globalize from '../../scripts/globalize';
|
||||||
|
import loading from '../loading/loading';
|
||||||
|
import toast from '../toast/toast';
|
||||||
|
|
||||||
|
import SectionTitleLinkElement from '../dashboard/users/SectionTitleLinkElement';
|
||||||
|
import InputElement from '../dashboard/users/InputElement';
|
||||||
|
import CheckBoxElement from '../dashboard/users/CheckBoxElement';
|
||||||
|
import CheckBoxListItem from '../dashboard/users/CheckBoxListItem';
|
||||||
|
import ButtonElement from '../dashboard/users/ButtonElement';
|
||||||
|
|
||||||
|
type userInput = {
|
||||||
|
Name?: string;
|
||||||
|
Password?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
type ItemsArr = {
|
||||||
|
Name?: string;
|
||||||
|
Id?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const NewUserPage: FunctionComponent = () => {
|
||||||
|
const [ channelsItems, setChannelsItems ] = useState([]);
|
||||||
|
const [ mediaFoldersItems, setMediaFoldersItems ] = useState([]);
|
||||||
|
const element = useRef(null);
|
||||||
|
|
||||||
|
const getItemsResult = (items: ItemsArr[]) => {
|
||||||
|
return items.map(item =>
|
||||||
|
({
|
||||||
|
Id: item.Id,
|
||||||
|
Name: item.Name
|
||||||
|
})
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const loadMediaFolders = useCallback((result) => {
|
||||||
|
const mediaFolders = getItemsResult(result);
|
||||||
|
|
||||||
|
setMediaFoldersItems(mediaFolders);
|
||||||
|
|
||||||
|
const folderAccess = element?.current?.querySelector('.folderAccess');
|
||||||
|
folderAccess.dispatchEvent(new CustomEvent('create'));
|
||||||
|
|
||||||
|
element.current.querySelector('.chkEnableAllFolders').checked = false;
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const loadChannels = useCallback((result) => {
|
||||||
|
const channels = getItemsResult(result);
|
||||||
|
|
||||||
|
setChannelsItems(channels);
|
||||||
|
|
||||||
|
const channelAccess = element?.current?.querySelector('.channelAccess');
|
||||||
|
channelAccess.dispatchEvent(new CustomEvent('create'));
|
||||||
|
|
||||||
|
const channelAccessContainer = element?.current?.querySelector('.channelAccessContainer');
|
||||||
|
channels.length ? channelAccessContainer.classList.remove('hide') : channelAccessContainer.classList.add('hide');
|
||||||
|
|
||||||
|
element.current.querySelector('.chkEnableAllChannels').checked = false;
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const loadUser = useCallback(() => {
|
||||||
|
element.current.querySelector('#txtUsername').value = '';
|
||||||
|
element.current.querySelector('#txtPassword').value = '';
|
||||||
|
loading.show();
|
||||||
|
const promiseFolders = window.ApiClient.getJSON(window.ApiClient.getUrl('Library/MediaFolders', {
|
||||||
|
IsHidden: false
|
||||||
|
}));
|
||||||
|
const promiseChannels = window.ApiClient.getJSON(window.ApiClient.getUrl('Channels'));
|
||||||
|
// eslint-disable-next-line compat/compat
|
||||||
|
Promise.all([promiseFolders, promiseChannels]).then(function (responses) {
|
||||||
|
loadMediaFolders(responses[0].Items);
|
||||||
|
loadChannels(responses[1].Items);
|
||||||
|
loading.hide();
|
||||||
|
});
|
||||||
|
}, [loadChannels, loadMediaFolders]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
loadUser();
|
||||||
|
|
||||||
|
const saveUser = () => {
|
||||||
|
const userInput: userInput = {};
|
||||||
|
userInput.Name = element?.current?.querySelector('#txtUsername').value;
|
||||||
|
userInput.Password = element?.current?.querySelector('#txtPassword').value;
|
||||||
|
window.ApiClient.createUser(userInput).then(function (user) {
|
||||||
|
user.Policy.EnableAllFolders = element?.current?.querySelector('.chkEnableAllFolders').checked;
|
||||||
|
user.Policy.EnabledFolders = [];
|
||||||
|
|
||||||
|
if (!user.Policy.EnableAllFolders) {
|
||||||
|
user.Policy.EnabledFolders = Array.prototype.filter.call(element?.current?.querySelectorAll('.chkFolder'), function (i) {
|
||||||
|
return i.checked;
|
||||||
|
}).map(function (i) {
|
||||||
|
return i.getAttribute('data-id');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
user.Policy.EnableAllChannels = element?.current?.querySelector('.chkEnableAllChannels').checked;
|
||||||
|
user.Policy.EnabledChannels = [];
|
||||||
|
|
||||||
|
if (!user.Policy.EnableAllChannels) {
|
||||||
|
user.Policy.EnabledChannels = Array.prototype.filter.call(element?.current?.querySelectorAll('.chkChannel'), function (i) {
|
||||||
|
return i.checked;
|
||||||
|
}).map(function (i) {
|
||||||
|
return i.getAttribute('data-id');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
window.ApiClient.updateUserPolicy(user.Id, user.Policy).then(function () {
|
||||||
|
Dashboard.navigate('useredit.html?userId=' + user.Id);
|
||||||
|
});
|
||||||
|
}, function () {
|
||||||
|
toast(globalize.translate('ErrorDefault'));
|
||||||
|
loading.hide();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const onSubmit = (e) => {
|
||||||
|
loading.show();
|
||||||
|
saveUser();
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
return false;
|
||||||
|
};
|
||||||
|
|
||||||
|
element?.current?.querySelector('.chkEnableAllChannels').addEventListener('change', function (this: HTMLInputElement) {
|
||||||
|
const channelAccessListContainer = element?.current?.querySelector('.channelAccessListContainer');
|
||||||
|
this.checked ? channelAccessListContainer.classList.add('hide') : channelAccessListContainer.classList.remove('hide');
|
||||||
|
});
|
||||||
|
|
||||||
|
element?.current?.querySelector('.chkEnableAllFolders').addEventListener('change', function (this: HTMLInputElement) {
|
||||||
|
const folderAccessListContainer = element?.current?.querySelector('.folderAccessListContainer');
|
||||||
|
this.checked ? folderAccessListContainer.classList.add('hide') : folderAccessListContainer.classList.remove('hide');
|
||||||
|
});
|
||||||
|
|
||||||
|
element?.current?.querySelector('.newUserProfileForm').addEventListener('submit', onSubmit);
|
||||||
|
|
||||||
|
element?.current?.querySelector('.button-cancel').addEventListener('click', function() {
|
||||||
|
window.history.back();
|
||||||
|
});
|
||||||
|
}, [loadUser]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div ref={element}>
|
||||||
|
<div className='content-primary'>
|
||||||
|
<div className='verticalSection'>
|
||||||
|
<div className='sectionTitleContainer flex align-items-center'>
|
||||||
|
<h2 className='sectionTitle'>
|
||||||
|
{globalize.translate('ButtonAddUser')}
|
||||||
|
</h2>
|
||||||
|
<SectionTitleLinkElement
|
||||||
|
className='raised button-alt headerHelpButton'
|
||||||
|
title='Help'
|
||||||
|
url='https://docs.jellyfin.org/general/server/users/'
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<form className='newUserProfileForm'>
|
||||||
|
<div className='inputContainer'>
|
||||||
|
<InputElement
|
||||||
|
type='text'
|
||||||
|
id='txtUsername'
|
||||||
|
label='LabelName'
|
||||||
|
options={'required'}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className='inputContainer'>
|
||||||
|
<InputElement
|
||||||
|
type='password'
|
||||||
|
id='txtPassword'
|
||||||
|
label='LabelPassword'
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='folderAccessContainer'>
|
||||||
|
<h2>{globalize.translate('HeaderLibraryAccess')}</h2>
|
||||||
|
<CheckBoxElement
|
||||||
|
type='checkbox'
|
||||||
|
className='chkEnableAllFolders'
|
||||||
|
title='OptionEnableAccessToAllLibraries'
|
||||||
|
/>
|
||||||
|
<div className='folderAccessListContainer'>
|
||||||
|
<div className='folderAccess'>
|
||||||
|
<h3 className='checkboxListLabel'>
|
||||||
|
{globalize.translate('HeaderLibraries')}
|
||||||
|
</h3>
|
||||||
|
<div className='checkboxList paperList' style={{padding: '.5em 1em'}}>
|
||||||
|
{mediaFoldersItems.map(Item => (
|
||||||
|
<CheckBoxListItem
|
||||||
|
key={Item.Id}
|
||||||
|
className='chkFolder'
|
||||||
|
Id={Item.Id}
|
||||||
|
Name={Item.Name}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</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}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='fieldDescription'>
|
||||||
|
{globalize.translate('ChannelAccessHelp')}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<ButtonElement
|
||||||
|
type='submit'
|
||||||
|
className='raised button-submit block'
|
||||||
|
title='Save'
|
||||||
|
/>
|
||||||
|
<ButtonElement
|
||||||
|
type='button'
|
||||||
|
className='raised button-cancel block btnCancel'
|
||||||
|
title='ButtonCancel'
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default NewUserPage;
|
||||||
|
|
@ -1,62 +1,3 @@
|
||||||
<div id="newUserPage" data-role="page" class="page type-interior">
|
<div id="newUserPage" data-role="page" class="page type-interior">
|
||||||
<div>
|
|
||||||
<div class="content-primary">
|
|
||||||
<form class="newUserProfileForm">
|
|
||||||
<div class="verticalSection">
|
|
||||||
<div class="sectionTitleContainer flex align-items-center">
|
|
||||||
<h2 class="sectionTitle">${ButtonAddUser}</h2>
|
|
||||||
<a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt headerHelpButton" target="_blank" href="https://docs.jellyfin.org/general/server/users/">${Help}</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="inputContainer">
|
|
||||||
<input is="emby-input" id="txtUsername" required type="text" label="${LabelName}" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="inputContainer">
|
|
||||||
<input is="emby-input" id="txtPassword" type="password" label="${LabelPassword}" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="folderAccessContainer verticalSection">
|
|
||||||
<h2 class="sectionTitle">${HeaderLibraryAccess}</h2>
|
|
||||||
<div class="checkboxContainer checkboxContainer-withDescription">
|
|
||||||
<label>
|
|
||||||
<input type="checkbox" is="emby-checkbox" id="chkEnableAllFolders" />
|
|
||||||
<span>${OptionEnableAccessToAllLibraries}</span>
|
|
||||||
</label>
|
|
||||||
<div class="fieldDescription checkboxFieldDescription">${LibraryAccessHelp}</div>
|
|
||||||
</div>
|
|
||||||
<div class="folderAccessListContainer">
|
|
||||||
<div class="folderAccess">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="channelAccessContainer verticalSection verticalSection-extrabottompadding" style="display:none;">
|
|
||||||
<h2 class="sectionTitle">${HeaderChannelAccess}</h2>
|
|
||||||
<div class="checkboxContainer checkboxContainer-withDescription">
|
|
||||||
<label>
|
|
||||||
<input type="checkbox" is="emby-checkbox" id="chkEnableAllChannels" />
|
|
||||||
<span>${OptionEnableAccessToAllChannels}</span>
|
|
||||||
</label>
|
|
||||||
<div class="fieldDescription checkboxFieldDescription">${ChannelAccessHelp}</div>
|
|
||||||
</div>
|
|
||||||
<div class="channelAccessListContainer">
|
|
||||||
<div class="channelAccess">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<button is="emby-button" type="submit" class="raised button-submit block">
|
|
||||||
<span>${Save}</span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button is="emby-button" type="button" class="raised button-cancel block btnCancel" onclick="history.back();">
|
|
||||||
<span>${ButtonCancel}</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,130 +0,0 @@
|
||||||
import 'jquery';
|
|
||||||
import loading from '../../../components/loading/loading';
|
|
||||||
import globalize from '../../../scripts/globalize';
|
|
||||||
import '../../../elements/emby-checkbox/emby-checkbox';
|
|
||||||
import Dashboard from '../../../scripts/clientUtils';
|
|
||||||
import toast from '../../../components/toast/toast';
|
|
||||||
|
|
||||||
/* eslint-disable indent */
|
|
||||||
|
|
||||||
function loadMediaFolders(page, mediaFolders) {
|
|
||||||
let html = '';
|
|
||||||
html += '<h3 class="checkboxListLabel">' + globalize.translate('HeaderLibraries') + '</h3>';
|
|
||||||
html += '<div class="checkboxList paperList" style="padding:.5em 1em;">';
|
|
||||||
|
|
||||||
for (let i = 0; i < mediaFolders.length; i++) {
|
|
||||||
const folder = mediaFolders[i];
|
|
||||||
html += '<label><input type="checkbox" is="emby-checkbox" class="chkFolder" data-id="' + folder.Id + '"/><span>' + folder.Name + '</span></label>';
|
|
||||||
}
|
|
||||||
|
|
||||||
html += '</div>';
|
|
||||||
$('.folderAccess', page).html(html).trigger('create');
|
|
||||||
$('#chkEnableAllFolders', page).prop('checked', false);
|
|
||||||
}
|
|
||||||
|
|
||||||
function loadChannels(page, channels) {
|
|
||||||
let html = '';
|
|
||||||
html += '<h3 class="checkboxListLabel">' + globalize.translate('Channels') + '</h3>';
|
|
||||||
html += '<div class="checkboxList paperList" style="padding:.5em 1em;">';
|
|
||||||
|
|
||||||
for (let i = 0; i < channels.length; i++) {
|
|
||||||
const folder = channels[i];
|
|
||||||
html += '<label><input type="checkbox" is="emby-checkbox" class="chkChannel" data-id="' + folder.Id + '"/><span>' + folder.Name + '</span></label>';
|
|
||||||
}
|
|
||||||
|
|
||||||
html += '</div>';
|
|
||||||
$('.channelAccess', page).show().html(html).trigger('create');
|
|
||||||
|
|
||||||
if (channels.length) {
|
|
||||||
$('.channelAccessContainer', page).show();
|
|
||||||
} else {
|
|
||||||
$('.channelAccessContainer', page).hide();
|
|
||||||
}
|
|
||||||
|
|
||||||
$('#chkEnableAllChannels', page).prop('checked', false);
|
|
||||||
}
|
|
||||||
|
|
||||||
function loadUser(page) {
|
|
||||||
$('#txtUsername', page).val('');
|
|
||||||
$('#txtPassword', page).val('');
|
|
||||||
loading.show();
|
|
||||||
const promiseFolders = ApiClient.getJSON(ApiClient.getUrl('Library/MediaFolders', {
|
|
||||||
IsHidden: false
|
|
||||||
}));
|
|
||||||
const promiseChannels = ApiClient.getJSON(ApiClient.getUrl('Channels'));
|
|
||||||
Promise.all([promiseFolders, promiseChannels]).then(function (responses) {
|
|
||||||
loadMediaFolders(page, responses[0].Items);
|
|
||||||
loadChannels(page, responses[1].Items);
|
|
||||||
loading.hide();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function saveUser(page) {
|
|
||||||
const user = {};
|
|
||||||
user.Name = $('#txtUsername', page).val();
|
|
||||||
user.Password = $('#txtPassword', page).val();
|
|
||||||
ApiClient.createUser(user).then(function (user) {
|
|
||||||
user.Policy.EnableAllFolders = $('#chkEnableAllFolders', page).is(':checked');
|
|
||||||
user.Policy.EnabledFolders = [];
|
|
||||||
|
|
||||||
if (!user.Policy.EnableAllFolders) {
|
|
||||||
user.Policy.EnabledFolders = $('.chkFolder', page).get().filter(function (i) {
|
|
||||||
return i.checked;
|
|
||||||
}).map(function (i) {
|
|
||||||
return i.getAttribute('data-id');
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
user.Policy.EnableAllChannels = $('#chkEnableAllChannels', page).is(':checked');
|
|
||||||
user.Policy.EnabledChannels = [];
|
|
||||||
|
|
||||||
if (!user.Policy.EnableAllChannels) {
|
|
||||||
user.Policy.EnabledChannels = $('.chkChannel', page).get().filter(function (i) {
|
|
||||||
return i.checked;
|
|
||||||
}).map(function (i) {
|
|
||||||
return i.getAttribute('data-id');
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
ApiClient.updateUserPolicy(user.Id, user.Policy).then(function () {
|
|
||||||
Dashboard.navigate('useredit.html?userId=' + user.Id);
|
|
||||||
});
|
|
||||||
}, function () {
|
|
||||||
toast(globalize.translate('ErrorDefault'));
|
|
||||||
loading.hide();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function onSubmit() {
|
|
||||||
const page = $(this).parents('.page')[0];
|
|
||||||
loading.show();
|
|
||||||
saveUser(page);
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
function loadData(page) {
|
|
||||||
loadUser(page);
|
|
||||||
}
|
|
||||||
|
|
||||||
$(document).on('pageinit', '#newUserPage', function () {
|
|
||||||
const page = this;
|
|
||||||
$('#chkEnableAllChannels', page).on('change', function () {
|
|
||||||
if (this.checked) {
|
|
||||||
$('.channelAccessListContainer', page).hide();
|
|
||||||
} else {
|
|
||||||
$('.channelAccessListContainer', page).show();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
$('#chkEnableAllFolders', page).on('change', function () {
|
|
||||||
if (this.checked) {
|
|
||||||
$('.folderAccessListContainer', page).hide();
|
|
||||||
} else {
|
|
||||||
$('.folderAccessListContainer', page).show();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
$('.newUserProfileForm').off('submit', onSubmit).on('submit', onSubmit);
|
|
||||||
}).on('pageshow', '#newUserPage', function () {
|
|
||||||
loadData(this);
|
|
||||||
});
|
|
||||||
|
|
||||||
/* eslint-enable indent */
|
|
||||||
|
|
@ -456,7 +456,7 @@ import { appRouter } from '../components/appRouter';
|
||||||
path: 'dashboard/users/usernew.html',
|
path: 'dashboard/users/usernew.html',
|
||||||
autoFocus: false,
|
autoFocus: false,
|
||||||
roles: 'admin',
|
roles: 'admin',
|
||||||
controller: 'dashboard/users/usernew'
|
pageComponent: 'NewUserPage'
|
||||||
});
|
});
|
||||||
|
|
||||||
defineRoute({
|
defineRoute({
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue