From a2e908a4dea4943daa8d589ac4d0f18bfc382489 Mon Sep 17 00:00:00 2001 From: grafixeyehero <32230989+grafixeyehero@users.noreply.github.com> Date: Sat, 16 Oct 2021 00:26:31 +0300 Subject: [PATCH 1/4] Convert userLibraryAccessPage to react --- .../pages/UserLibraryAccessPage.tsx | 355 ++++++++++++++++++ .../dashboard/users/userlibraryaccess.html | 65 ---- .../dashboard/users/userlibraryaccess.js | 186 --------- src/scripts/routes.js | 2 +- 4 files changed, 356 insertions(+), 252 deletions(-) create mode 100644 src/components/pages/UserLibraryAccessPage.tsx delete mode 100644 src/controllers/dashboard/users/userlibraryaccess.js diff --git a/src/components/pages/UserLibraryAccessPage.tsx b/src/components/pages/UserLibraryAccessPage.tsx new file mode 100644 index 000000000..819573abf --- /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 ( +
+
+
+
+

+ {userName} +

+ +
+
+
+ Dashboard.navigate('useredit.html', true)} + /> + Dashboard.navigate('userlibraryaccess.html', true)} + /> + Dashboard.navigate('userparentalcontrol.html', true)} + /> + Dashboard.navigate('userpassword.html', true)} + /> +
+
+
+

{globalize.translate('HeaderLibraryAccess')}

+ +
+
+

+ {globalize.translate('HeaderLibraries')} +

+
+ {mediaFoldersItems.map(Item => { + return ( + + ); + })} +
+
+
+ {globalize.translate('LibraryAccessHelp')} +
+
+
+
+

{globalize.translate('HeaderChannelAccess')}

+ +
+
+

+ {globalize.translate('Channels')} +

+
+ {channelsItems.map(Item => ( + + ))} +
+
+
+ {globalize.translate('ChannelAccessHelp')} +
+
+
+
+
+

{globalize.translate('HeaderDeviceAccess')}

+ +
+
+

+ {globalize.translate('HeaderDevices')} +

+
+ {devicesItems.map(Item => ( + + ))} +
+
+
+ {globalize.translate('DeviceAccessHelp')} +
+
+
+
+
+
+ +
+
+
+
+ ); +}; + +export default UserLibraryAccessPage; diff --git a/src/controllers/dashboard/users/userlibraryaccess.html b/src/controllers/dashboard/users/userlibraryaccess.html index 6c80d23d7..abcbfaf10 100644 --- a/src/controllers/dashboard/users/userlibraryaccess.html +++ b/src/controllers/dashboard/users/userlibraryaccess.html @@ -1,68 +1,3 @@
-
-
- -
-
-

- ${Help} -
-
- -
- ${Profile} - ${TabAccess} - ${TabParentalControl} - ${HeaderPassword} -
-
- -
-

${HeaderLibraryAccess}

- -
-
-
-
${LibraryAccessHelp}
-
-
- -
-
-

${HeaderDeviceAccess}

- -
-
-
-
${DeviceAccessHelp}
-
-
-
-
-
- -
-
-
-
diff --git a/src/controllers/dashboard/users/userlibraryaccess.js b/src/controllers/dashboard/users/userlibraryaccess.js deleted file mode 100644 index 0f68133d8..000000000 --- a/src/controllers/dashboard/users/userlibraryaccess.js +++ /dev/null @@ -1,186 +0,0 @@ -import 'jquery'; -import loading from '../../../components/loading/loading'; -import libraryMenu from '../../../scripts/libraryMenu'; -import globalize from '../../../scripts/globalize'; -import Dashboard from '../../../scripts/clientUtils'; -import toast from '../../../components/toast/toast'; - -/* eslint-disable indent */ - - function triggerChange(select) { - const evt = document.createEvent('HTMLEvents'); - evt.initEvent('change', false, true); - select.dispatchEvent(evt); - } - - function loadMediaFolders(page, user, mediaFolders) { - let html = ''; - html += '

' + 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 92453ff5b..cab1287d2 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({ From a72fa2e999297f06a210539a2d642e9cee2fc743 Mon Sep 17 00:00:00 2001 From: grafixeyehero <32230989+grafixeyehero@users.noreply.github.com> Date: Sat, 13 Nov 2021 22:10:34 +0300 Subject: [PATCH 2/4] useCallback hook --- .../pages/UserLibraryAccessPage.tsx | 216 +++++++++--------- 1 file changed, 108 insertions(+), 108 deletions(-) diff --git a/src/components/pages/UserLibraryAccessPage.tsx b/src/components/pages/UserLibraryAccessPage.tsx index 819573abf..f16d9b5ca 100644 --- a/src/components/pages/UserLibraryAccessPage.tsx +++ b/src/components/pages/UserLibraryAccessPage.tsx @@ -1,4 +1,4 @@ -import React, { FunctionComponent, useEffect, useState, useRef } from 'react'; +import React, { FunctionComponent, useCallback, useEffect, useState, useRef } from 'react'; import loading from '../loading/loading'; import libraryMenu from '../../scripts/libraryMenu'; @@ -27,116 +27,116 @@ const UserLibraryAccessPage: FunctionComponent = () => { 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); + const triggerChange = (select) => { + const evt = document.createEvent('HTMLEvents'); + evt.initEvent('change', false, true); + select.dispatchEvent(evt); + }; + + const loadMediaFolders = useCallback((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 = useCallback((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 = useCallback((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 loadUser = useCallback((user, mediaFolders, channels, devices) => { + setUserName(user.Name); + libraryMenu.setTitle(user.Name); + loadChannels(user, channels); + loadMediaFolders(user, mediaFolders); + loadDevices(user, devices); + loading.hide(); + }, [loadChannels, loadDevices, loadMediaFolders]); + + const loadData = useCallback(() => { + 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); + }); + }, [loadUser]); + + useEffect(() => { 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'); @@ -204,7 +204,7 @@ const UserLibraryAccessPage: FunctionComponent = () => { }); element?.current?.querySelector('.userLibraryAccessForm').addEventListener('submit', onSubmit); - }, []); + }, [loadData]); return (
From f2a14f453cc61bcde7f1b400577160a0cbd1243a Mon Sep 17 00:00:00 2001 From: grafixeyehero <32230989+grafixeyehero@users.noreply.github.com> Date: Sun, 2 Jan 2022 05:04:08 +0300 Subject: [PATCH 3/4] replace TabLinkElement with SectionTabs Components --- .../pages/UserLibraryAccessPage.tsx | 33 ++++--------------- 1 file changed, 6 insertions(+), 27 deletions(-) diff --git a/src/components/pages/UserLibraryAccessPage.tsx b/src/components/pages/UserLibraryAccessPage.tsx index f16d9b5ca..fe9cf71ef 100644 --- a/src/components/pages/UserLibraryAccessPage.tsx +++ b/src/components/pages/UserLibraryAccessPage.tsx @@ -6,11 +6,10 @@ 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 SectionTabs from '../dashboard/users/SectionTabs'; 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; @@ -221,34 +220,12 @@ const UserLibraryAccessPage: FunctionComponent = () => { />
-
- Dashboard.navigate('useredit.html', true)} - /> - Dashboard.navigate('userlibraryaccess.html', true)} - /> - Dashboard.navigate('userparentalcontrol.html', true)} - /> - Dashboard.navigate('userpassword.html', true)} - /> -
+

{globalize.translate('HeaderLibraryAccess')}

{

{globalize.translate('HeaderLibraries')}

-
+
{mediaFoldersItems.map(Item => { return ( {

{globalize.translate('HeaderChannelAccess')}

{

{globalize.translate('HeaderDeviceAccess')}

Date: Fri, 7 Jan 2022 03:33:25 +0300 Subject: [PATCH 4/4] apply suggestions --- .../pages/UserLibraryAccessPage.tsx | 21 +++---------------- 1 file changed, 3 insertions(+), 18 deletions(-) diff --git a/src/components/pages/UserLibraryAccessPage.tsx b/src/components/pages/UserLibraryAccessPage.tsx index fe9cf71ef..f2fc33b5e 100644 --- a/src/components/pages/UserLibraryAccessPage.tsx +++ b/src/components/pages/UserLibraryAccessPage.tsx @@ -36,7 +36,6 @@ const UserLibraryAccessPage: FunctionComponent = () => { 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({ @@ -57,7 +56,6 @@ const UserLibraryAccessPage: FunctionComponent = () => { 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({ @@ -84,7 +82,6 @@ const UserLibraryAccessPage: FunctionComponent = () => { 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({ @@ -179,27 +176,15 @@ const UserLibraryAccessPage: FunctionComponent = () => { }; 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('.deviceAccessListContainer').classList.toggle('hide', this.checked); }); 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('.channelAccessListContainer').classList.toggle('hide', this.checked); }); 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('.folderAccessListContainer').classList.toggle('hide', this.checked); }); element?.current?.querySelector('.userLibraryAccessForm').addEventListener('submit', onSubmit);