diff --git a/src/components/pages/UserLibraryAccessPage.tsx b/src/components/pages/UserLibraryAccessPage.tsx
new file mode 100644
index 0000000000..819573abff
--- /dev/null
+++ b/src/components/pages/UserLibraryAccessPage.tsx
@@ -0,0 +1,355 @@
+import React, { FunctionComponent, useEffect, useState, useRef } from 'react';
+
+import loading from '../loading/loading';
+import libraryMenu from '../../scripts/libraryMenu';
+import globalize from '../../scripts/globalize';
+import toast from '../toast/toast';
+import { appRouter } from '../appRouter';
+import SectionTitleLinkElement from '../dashboard/users/SectionTitleLinkElement';
+import TabLinkElement from '../dashboard/users/TabLinkElement';
+import CheckBoxElement from '../dashboard/users/CheckBoxElement';
+import CheckBoxListItem from '../dashboard/users/CheckBoxListItem';
+import ButtonElement from '../dashboard/users/ButtonElement';
+import Dashboard from '../../scripts/clientUtils';
+
+type ItemsArr = {
+ Name?: string;
+ Id?: string;
+ AppName?: string;
+ checkedAttribute?: string
+}
+
+const UserLibraryAccessPage: FunctionComponent = () => {
+ const [ userName, setUserName ] = useState('');
+ const [channelsItems, setChannelsItems] = useState([]);
+ const [mediaFoldersItems, setMediaFoldersItems] = useState([]);
+ const [devicesItems, setDevicesItems] = useState([]);
+
+ const element = useRef(null);
+
+ useEffect(() => {
+ const loadData = () => {
+ loading.show();
+ const userId = appRouter.param('userId');
+ // eslint-disable-next-line compat/compat
+ const promise1 = userId ? window.ApiClient.getUser(userId) : Promise.resolve({ Configuration: {} });
+ const promise2 = window.ApiClient.getJSON(window.ApiClient.getUrl('Library/MediaFolders', {
+ IsHidden: false
+ }));
+ const promise3 = window.ApiClient.getJSON(window.ApiClient.getUrl('Channels'));
+ const promise4 = window.ApiClient.getJSON(window.ApiClient.getUrl('Devices'));
+ // eslint-disable-next-line compat/compat
+ Promise.all([promise1, promise2, promise3, promise4]).then(function (responses) {
+ loadUser(responses[0], responses[1].Items, responses[2].Items, responses[3].Items);
+ });
+ };
+
+ loadData();
+
+ const loadUser = (user, mediaFolders, channels, devices) => {
+ setUserName(user.Name);
+ libraryMenu.setTitle(user.Name);
+ loadChannels(user, channels);
+ loadMediaFolders(user, mediaFolders);
+ loadDevices(user, devices);
+ loading.hide();
+ };
+
+ const loadMediaFolders = (user, mediaFolders) => {
+ const itemsArr: ItemsArr[] = [];
+
+ for (const folder of mediaFolders) {
+ console.log('EnableAllFolders', user.Policy.EnableAllFolders);
+ const isChecked = user.Policy.EnableAllFolders || user.Policy.EnabledFolders.indexOf(folder.Id) != -1;
+ const checkedAttribute = isChecked ? ' checked="checked"' : '';
+ itemsArr.push({
+ Id: folder.Id,
+ Name: folder.Name,
+ checkedAttribute: checkedAttribute
+ });
+ }
+
+ setMediaFoldersItems(itemsArr);
+
+ const chkEnableAllFolders = element.current.querySelector('.chkEnableAllFolders');
+ chkEnableAllFolders.checked = user.Policy.EnableAllFolders;
+ triggerChange(chkEnableAllFolders);
+ };
+
+ const loadChannels = (user, channels) => {
+ const itemsArr: ItemsArr[] = [];
+
+ for (const folder of channels) {
+ console.log('EnableAllChannels', user.Policy.EnableAllChannels);
+ const isChecked = user.Policy.EnableAllChannels || user.Policy.EnabledChannels.indexOf(folder.Id) != -1;
+ const checkedAttribute = isChecked ? ' checked="checked"' : '';
+ itemsArr.push({
+ Id: folder.Id,
+ Name: folder.Name,
+ checkedAttribute: checkedAttribute
+ });
+ }
+
+ setChannelsItems(itemsArr);
+
+ if (channels.length) {
+ element?.current?.querySelector('.channelAccessContainer').classList.remove('hide');
+ } else {
+ element?.current?.querySelector('.channelAccessContainer').classList.add('hide');
+ }
+
+ const chkEnableAllChannels = element.current.querySelector('.chkEnableAllChannels');
+ chkEnableAllChannels.checked = user.Policy.EnableAllChannels;
+ triggerChange(chkEnableAllChannels);
+ };
+
+ const loadDevices = (user, devices) => {
+ const itemsArr: ItemsArr[] = [];
+
+ for (const device of devices) {
+ console.log('EnableAllDevices', user.Policy.EnableAllDevices);
+ const isChecked = user.Policy.EnableAllDevices || user.Policy.EnabledDevices.indexOf(device.Id) != -1;
+ const checkedAttribute = isChecked ? ' checked="checked"' : '';
+ itemsArr.push({
+ Id: device.Id,
+ Name: device.Name,
+ AppName : device.AppName,
+ checkedAttribute: checkedAttribute
+ });
+ }
+
+ setDevicesItems(itemsArr);
+
+ const chkEnableAllDevices = element.current.querySelector('.chkEnableAllDevices');
+ chkEnableAllDevices.checked = user.Policy.EnableAllDevices;
+ triggerChange(chkEnableAllDevices);
+
+ if (user.Policy.IsAdministrator) {
+ element?.current?.querySelector('.deviceAccessContainer').classList.add('hide');
+ } else {
+ element?.current?.querySelector('.deviceAccessContainer').classList.remove('hide');
+ }
+ };
+
+ const triggerChange = (select) => {
+ const evt = document.createEvent('HTMLEvents');
+ evt.initEvent('change', false, true);
+ select.dispatchEvent(evt);
+ };
+
+ const onSubmit = (e) => {
+ loading.show();
+ const userId = appRouter.param('userId');
+ window.ApiClient.getUser(userId).then(function (result) {
+ saveUser(result);
+ });
+ e.preventDefault();
+ e.stopPropagation();
+ return false;
+ };
+
+ const saveUser = (user) => {
+ user.Policy.EnableAllFolders = element?.current?.querySelector('.chkEnableAllFolders').checked;
+ user.Policy.EnabledFolders = user.Policy.EnableAllFolders ? [] : Array.prototype.filter.call(element?.current?.querySelectorAll('.chkFolder'), function (c) {
+ return c.checked;
+ }).map(function (c) {
+ return c.getAttribute('data-id');
+ });
+ user.Policy.EnableAllChannels = element?.current?.querySelector('.chkEnableAllChannels').checked;
+ user.Policy.EnabledChannels = user.Policy.EnableAllChannels ? [] : Array.prototype.filter.call(element?.current?.querySelectorAll('.chkChannel'), function (c) {
+ return c.checked;
+ }).map(function (c) {
+ return c.getAttribute('data-id');
+ });
+ user.Policy.EnableAllDevices = element?.current?.querySelector('.chkEnableAllDevices').checked;
+ user.Policy.EnabledDevices = user.Policy.EnableAllDevices ? [] : Array.prototype.filter.call(element?.current?.querySelectorAll('.chkDevice'), function (c) {
+ return c.checked;
+ }).map(function (c) {
+ return c.getAttribute('data-id');
+ });
+ user.Policy.BlockedChannels = null;
+ user.Policy.BlockedMediaFolders = null;
+ window.ApiClient.updateUserPolicy(user.Id, user.Policy).then(function () {
+ onSaveComplete();
+ });
+ };
+
+ const onSaveComplete = () => {
+ loading.hide();
+ toast(globalize.translate('SettingsSaved'));
+ };
+
+ element?.current?.querySelector('.chkEnableAllDevices').addEventListener('change', function (this: HTMLInputElement) {
+ if (this.checked) {
+ element?.current?.querySelector('.deviceAccessListContainer').classList.add('hide');
+ } else {
+ element?.current?.querySelector('.deviceAccessListContainer').classList.remove('hide');
+ }
+ });
+
+ element?.current?.querySelector('.chkEnableAllChannels').addEventListener('change', function (this: HTMLInputElement) {
+ if (this.checked) {
+ element?.current?.querySelector('.channelAccessListContainer').classList.add('hide');
+ } else {
+ element?.current?.querySelector('.channelAccessListContainer').classList.remove('hide');
+ }
+ });
+
+ element?.current?.querySelector('.chkEnableAllFolders').addEventListener('change', function (this: HTMLInputElement) {
+ if (this.checked) {
+ element?.current?.querySelector('.folderAccessListContainer').classList.add('hide');
+ } else {
+ element?.current?.querySelector('.folderAccessListContainer').classList.remove('hide');
+ }
+ });
+
+ element?.current?.querySelector('.userLibraryAccessForm').addEventListener('submit', onSubmit);
+ }, []);
+
+ return (
+
+
+
+
+ Dashboard.navigate('useredit.html', true)}
+ />
+ Dashboard.navigate('userlibraryaccess.html', true)}
+ />
+ Dashboard.navigate('userparentalcontrol.html', true)}
+ />
+ Dashboard.navigate('userpassword.html', true)}
+ />
+
+
+
+
' + globalize.translate('HeaderLibraries') + '
';
- html += '';
-
- for (let i = 0, length = mediaFolders.length; i < length; i++) {
- const folder = mediaFolders[i];
- const isChecked = user.Policy.EnableAllFolders || user.Policy.EnabledFolders.indexOf(folder.Id) != -1;
- const checkedAttribute = isChecked ? ' checked="checked"' : '';
- html += '';
- }
-
- html += '
';
- page.querySelector('.folderAccess').innerHTML = html;
- const chkEnableAllFolders = page.querySelector('#chkEnableAllFolders');
- chkEnableAllFolders.checked = user.Policy.EnableAllFolders;
- triggerChange(chkEnableAllFolders);
- }
-
- function loadChannels(page, user, channels) {
- let html = '';
- html += '' + globalize.translate('Channels') + '
';
- html += '';
-
- for (let i = 0, length = channels.length; i < length; i++) {
- const folder = channels[i];
- const isChecked = user.Policy.EnableAllChannels || user.Policy.EnabledChannels.indexOf(folder.Id) != -1;
- const checkedAttribute = isChecked ? ' checked="checked"' : '';
- html += '';
- }
-
- html += '
';
- $('.channelAccess', page).show().html(html);
-
- if (channels.length) {
- $('.channelAccessContainer', page).show();
- } else {
- $('.channelAccessContainer', page).hide();
- }
-
- const chkEnableAllChannels = page.querySelector('#chkEnableAllChannels');
- chkEnableAllChannels.checked = user.Policy.EnableAllChannels;
- triggerChange(chkEnableAllChannels);
- }
-
- function loadDevices(page, user, devices) {
- let html = '';
- html += '' + globalize.translate('HeaderDevices') + '
';
- html += '';
-
- for (let i = 0, length = devices.length; i < length; i++) {
- const device = devices[i];
- const checkedAttribute = user.Policy.EnableAllDevices || user.Policy.EnabledDevices.indexOf(device.Id) != -1 ? ' checked="checked"' : '';
- html += '';
- }
-
- html += '
';
- $('.deviceAccess', page).show().html(html);
- const chkEnableAllDevices = page.querySelector('#chkEnableAllDevices');
- chkEnableAllDevices.checked = user.Policy.EnableAllDevices;
- triggerChange(chkEnableAllDevices);
-
- if (user.Policy.IsAdministrator) {
- page.querySelector('.deviceAccessContainer').classList.add('hide');
- } else {
- page.querySelector('.deviceAccessContainer').classList.remove('hide');
- }
- }
-
- function loadUser(page, user, loggedInUser, mediaFolders, channels, devices) {
- page.querySelector('.username').innerHTML = user.Name;
- libraryMenu.setTitle(user.Name);
- loadChannels(page, user, channels);
- loadMediaFolders(page, user, mediaFolders);
- loadDevices(page, user, devices);
- loading.hide();
- }
-
- function onSaveComplete() {
- loading.hide();
- toast(globalize.translate('SettingsSaved'));
- }
-
- function saveUser(user, page) {
- user.Policy.EnableAllFolders = $('#chkEnableAllFolders', page).is(':checked');
- user.Policy.EnabledFolders = user.Policy.EnableAllFolders ? [] : $('.chkFolder', page).get().filter(function (c) {
- return c.checked;
- }).map(function (c) {
- return c.getAttribute('data-id');
- });
- user.Policy.EnableAllChannels = $('#chkEnableAllChannels', page).is(':checked');
- user.Policy.EnabledChannels = user.Policy.EnableAllChannels ? [] : $('.chkChannel', page).get().filter(function (c) {
- return c.checked;
- }).map(function (c) {
- return c.getAttribute('data-id');
- });
- user.Policy.EnableAllDevices = $('#chkEnableAllDevices', page).is(':checked');
- user.Policy.EnabledDevices = user.Policy.EnableAllDevices ? [] : $('.chkDevice', page).get().filter(function (c) {
- return c.checked;
- }).map(function (c) {
- return c.getAttribute('data-id');
- });
- user.Policy.BlockedChannels = null;
- user.Policy.BlockedMediaFolders = null;
- ApiClient.updateUserPolicy(user.Id, user.Policy).then(function () {
- onSaveComplete();
- });
- }
-
- function onSubmit() {
- const page = $(this).parents('.page');
- loading.show();
- const userId = getParameterByName('userId');
- ApiClient.getUser(userId).then(function (result) {
- saveUser(result, page);
- });
- return false;
- }
-
- $(document).on('pageinit', '#userLibraryAccessPage', function () {
- const page = this;
- $('#chkEnableAllDevices', page).on('change', function () {
- if (this.checked) {
- $('.deviceAccessListContainer', page).hide();
- } else {
- $('.deviceAccessListContainer', page).show();
- }
- });
- $('#chkEnableAllChannels', page).on('change', function () {
- if (this.checked) {
- $('.channelAccessListContainer', page).hide();
- } else {
- $('.channelAccessListContainer', page).show();
- }
- });
- page.querySelector('#chkEnableAllFolders').addEventListener('change', function () {
- if (this.checked) {
- page.querySelector('.folderAccessListContainer').classList.add('hide');
- } else {
- page.querySelector('.folderAccessListContainer').classList.remove('hide');
- }
- });
- $('.userLibraryAccessForm').off('submit', onSubmit).on('submit', onSubmit);
- }).on('pageshow', '#userLibraryAccessPage', function () {
- const page = this;
- loading.show();
- let promise1;
- const userId = getParameterByName('userId');
-
- if (userId) {
- promise1 = ApiClient.getUser(userId);
- } else {
- const deferred = $.Deferred();
- deferred.resolveWith(null, [{
- Configuration: {}
- }]);
- promise1 = deferred.promise();
- }
-
- const promise2 = Dashboard.getCurrentUser();
- const promise4 = ApiClient.getJSON(ApiClient.getUrl('Library/MediaFolders', {
- IsHidden: false
- }));
- const promise5 = ApiClient.getJSON(ApiClient.getUrl('Channels'));
- const promise6 = ApiClient.getJSON(ApiClient.getUrl('Devices'));
- Promise.all([promise1, promise2, promise4, promise5, promise6]).then(function (responses) {
- loadUser(page, responses[0], responses[1], responses[2].Items, responses[3].Items, responses[4].Items);
- });
- });
-
-/* eslint-enable indent */
diff --git a/src/scripts/routes.js b/src/scripts/routes.js
index 92453ff5bc..cab1287d20 100644
--- a/src/scripts/routes.js
+++ b/src/scripts/routes.js
@@ -448,7 +448,7 @@ import { appRouter } from '../components/appRouter';
path: 'dashboard/users/userlibraryaccess.html',
autoFocus: false,
roles: 'admin',
- controller: 'dashboard/users/userlibraryaccess'
+ pageComponent: 'UserLibraryAccessPage'
});
defineRoute({