From 01d29bcf111597e1fd8af59c5a3a13f8bcef1d4d Mon Sep 17 00:00:00 2001 From: grafixeyehero <32230989+grafixeyehero@users.noreply.github.com> Date: Wed, 5 Jan 2022 21:53:15 +0300 Subject: [PATCH 1/6] =?UTF-8?q?=EF=BB=BFmove=20SectionTitleContainer=20int?= =?UTF-8?q?o=20its=20own=20Components?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../dashboard/users/SectionTitleContainer.tsx | 25 +++++++++++++++++++ src/components/pages/NewUserPage.tsx | 16 ++---------- src/components/pages/UserEditPage.tsx | 15 ++--------- .../pages/UserLibraryAccessPage.tsx | 17 +++---------- src/components/pages/UserParentalControl.tsx | 15 ++--------- src/components/pages/UserPasswordPage.tsx | 15 ++--------- 6 files changed, 36 insertions(+), 67 deletions(-) create mode 100644 src/components/dashboard/users/SectionTitleContainer.tsx diff --git a/src/components/dashboard/users/SectionTitleContainer.tsx b/src/components/dashboard/users/SectionTitleContainer.tsx new file mode 100644 index 0000000000..2347fac8f7 --- /dev/null +++ b/src/components/dashboard/users/SectionTitleContainer.tsx @@ -0,0 +1,25 @@ +import React, { FunctionComponent } from 'react'; +import SectionTitleLinkElement from './SectionTitleLinkElement'; + +type IProps = { + title: string; +} + +const SectionTitleContainer: FunctionComponent = ({title}: IProps) => { + return ( +
+
+

+ {title} +

+ +
+
+ ); +}; + +export default SectionTitleContainer; diff --git a/src/components/pages/NewUserPage.tsx b/src/components/pages/NewUserPage.tsx index 9c8110310c..f35e80a286 100644 --- a/src/components/pages/NewUserPage.tsx +++ b/src/components/pages/NewUserPage.tsx @@ -4,8 +4,7 @@ import Dashboard from '../../utils/dashboard'; import globalize from '../../scripts/globalize'; import loading from '../loading/loading'; import toast from '../toast/toast'; - -import SectionTitleLinkElement from '../dashboard/users/SectionTitleLinkElement'; +import SectionTitleContainer from '../dashboard/users/SectionTitleContainer'; import InputElement from '../dashboard/users/InputElement'; import CheckBoxElement from '../dashboard/users/CheckBoxElement'; import CheckBoxListItem from '../dashboard/users/CheckBoxListItem'; @@ -178,18 +177,7 @@ const NewUserPage: FunctionComponent = () => { return (
-
-
-

- {globalize.translate('ButtonAddUser')} -

- -
-
+
{ return (
-
-
-

- {userName} -

- -
-
+
{ itemsArr.push({ Id: device.Id, Name: device.Name, - AppName : device.AppName, + AppName: device.AppName, checkedAttribute: checkedAttribute }); } @@ -228,18 +228,7 @@ const UserLibraryAccessPage: FunctionComponent = () => { return (
-
-
-

- {userName} -

- -
-
+
diff --git a/src/components/pages/UserParentalControl.tsx b/src/components/pages/UserParentalControl.tsx index 8c9c6b66b8..8774ccee1d 100644 --- a/src/components/pages/UserParentalControl.tsx +++ b/src/components/pages/UserParentalControl.tsx @@ -7,7 +7,7 @@ import BlockedTagList from '../dashboard/users/BlockedTagList'; import ButtonElement from '../dashboard/users/ButtonElement'; import CheckBoxListItem from '../dashboard/users/CheckBoxListItem'; import SectionTitleButtonElement from '../dashboard/users/SectionTitleButtonElement'; -import SectionTitleLinkElement from '../dashboard/users/SectionTitleLinkElement'; +import SectionTitleContainer from '../dashboard/users/SectionTitleContainer'; import SelectMaxParentalRating from '../dashboard/users/SelectMaxParentalRating'; import SectionTabs from '../dashboard/users/SectionTabs'; import loading from '../loading/loading'; @@ -319,18 +319,7 @@ const UserParentalControl: FunctionComponent = () => { return (
-
-
-

- {userName} -

- -
-
+
diff --git a/src/components/pages/UserPasswordPage.tsx b/src/components/pages/UserPasswordPage.tsx index 2eba530ae2..ef8bd3ca33 100644 --- a/src/components/pages/UserPasswordPage.tsx +++ b/src/components/pages/UserPasswordPage.tsx @@ -1,8 +1,8 @@ import React, { FunctionComponent, useCallback, useEffect, useState } from 'react'; -import SectionTitleLinkElement from '../dashboard/users/SectionTitleLinkElement'; import SectionTabs from '../dashboard/users/SectionTabs'; import UserPasswordForm from '../dashboard/users/UserPasswordForm'; import { getParameterByName } from '../../utils/url'; +import SectionTitleContainer from '../dashboard/users/SectionTitleContainer'; const UserPasswordPage: FunctionComponent = () => { const userId = getParameterByName('userId'); @@ -23,18 +23,7 @@ const UserPasswordPage: FunctionComponent = () => { return (
-
-
-

- {userName} -

- -
-
+
Date: Sat, 7 May 2022 22:10:01 +0300 Subject: [PATCH 2/6] move AccessContainer into its own Components --- .../dashboard/users/AccessContainer.tsx | 41 +++++ src/components/pages/NewUserPage.tsx | 99 +++++------ .../pages/UserLibraryAccessPage.tsx | 159 +++++++----------- 3 files changed, 146 insertions(+), 153 deletions(-) create mode 100644 src/components/dashboard/users/AccessContainer.tsx diff --git a/src/components/dashboard/users/AccessContainer.tsx b/src/components/dashboard/users/AccessContainer.tsx new file mode 100644 index 0000000000..7c3cda360e --- /dev/null +++ b/src/components/dashboard/users/AccessContainer.tsx @@ -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 = ({ContainerClassName, HeaderTitle, CheckBoxClassName, CheckBoxTitle, ListContainerClassName, AccessClassName, ListTitle, Description, children }: IProps) => { + return ( +
+

{globalize.translate(HeaderTitle)}

+ +
+
+

+ {globalize.translate(ListTitle)} +

+
+ {children} +
+
+
+ {globalize.translate(Description)} +
+
+
+ ); +}; + +export default AccessContainer; diff --git a/src/components/pages/NewUserPage.tsx b/src/components/pages/NewUserPage.tsx index f35e80a286..139bc4cc33 100644 --- a/src/components/pages/NewUserPage.tsx +++ b/src/components/pages/NewUserPage.tsx @@ -9,6 +9,7 @@ import InputElement from '../dashboard/users/InputElement'; import CheckBoxElement from '../dashboard/users/CheckBoxElement'; import CheckBoxListItem from '../dashboard/users/CheckBoxListItem'; import ButtonElement from '../dashboard/users/ButtonElement'; +import AccessContainer from '../dashboard/users/AccessContainer'; type userInput = { Name?: string; @@ -194,65 +195,47 @@ const NewUserPage: FunctionComponent = () => { label='LabelPassword' />
+ + {mediaFoldersItems.map(Item => ( + + ))} + -
-

{globalize.translate('HeaderLibraryAccess')}

- -
-
-

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

-
- {mediaFoldersItems.map(Item => ( - - ))} -
-
-
- {globalize.translate('LibraryAccessHelp')} -
-
-
-
-

{globalize.translate('HeaderChannelAccess')}

- -
-
-

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

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

{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')} -
-
-
-
+ + {mediaFoldersItems.map(Item => ( + + ))} + + + + {channelsItems.map(Item => ( + + ))} + + + + {devicesItems.map(Item => ( + + ))} +
Date: Sat, 7 May 2022 22:12:21 +0300 Subject: [PATCH 3/6] clean up --- src/components/pages/NewUserPage.tsx | 1 - src/components/pages/UserLibraryAccessPage.tsx | 1 - 2 files changed, 2 deletions(-) diff --git a/src/components/pages/NewUserPage.tsx b/src/components/pages/NewUserPage.tsx index 139bc4cc33..8d42140885 100644 --- a/src/components/pages/NewUserPage.tsx +++ b/src/components/pages/NewUserPage.tsx @@ -6,7 +6,6 @@ import loading from '../loading/loading'; import toast from '../toast/toast'; import SectionTitleContainer from '../dashboard/users/SectionTitleContainer'; import InputElement from '../dashboard/users/InputElement'; -import CheckBoxElement from '../dashboard/users/CheckBoxElement'; import CheckBoxListItem from '../dashboard/users/CheckBoxListItem'; import ButtonElement from '../dashboard/users/ButtonElement'; import AccessContainer from '../dashboard/users/AccessContainer'; diff --git a/src/components/pages/UserLibraryAccessPage.tsx b/src/components/pages/UserLibraryAccessPage.tsx index b4ad45490a..aadb3bc2f7 100644 --- a/src/components/pages/UserLibraryAccessPage.tsx +++ b/src/components/pages/UserLibraryAccessPage.tsx @@ -6,7 +6,6 @@ import libraryMenu from '../../scripts/libraryMenu'; import globalize from '../../scripts/globalize'; import toast from '../toast/toast'; 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 { getParameterByName } from '../../utils/url'; From 2fc9741d57446f0156506e7245654d8c6ab492e6 Mon Sep 17 00:00:00 2001 From: grafixeyehero Date: Sat, 7 May 2022 23:27:33 +0300 Subject: [PATCH 4/6] Add SectionTitleContainer in UserProfilesPage --- .../dashboard/users/SectionTitleContainer.tsx | 14 ++++++- src/components/pages/NewUserPage.tsx | 6 ++- src/components/pages/UserEditPage.tsx | 6 ++- .../pages/UserLibraryAccessPage.tsx | 6 ++- src/components/pages/UserParentalControl.tsx | 6 ++- src/components/pages/UserPasswordPage.tsx | 6 ++- src/components/pages/UserProfilesPage.tsx | 37 ++++++------------- 7 files changed, 48 insertions(+), 33 deletions(-) diff --git a/src/components/dashboard/users/SectionTitleContainer.tsx b/src/components/dashboard/users/SectionTitleContainer.tsx index 2347fac8f7..03d6478c2f 100644 --- a/src/components/dashboard/users/SectionTitleContainer.tsx +++ b/src/components/dashboard/users/SectionTitleContainer.tsx @@ -1,21 +1,31 @@ import React, { FunctionComponent } from 'react'; +import SectionTitleButtonElement from './SectionTitleButtonElement'; import SectionTitleLinkElement from './SectionTitleLinkElement'; type IProps = { title: string; + isBtnVisible?: boolean; + titleLink?: string; } -const SectionTitleContainer: FunctionComponent = ({title}: IProps) => { +const SectionTitleContainer: FunctionComponent = ({title, isBtnVisible, titleLink}: IProps) => { return (

{title}

+ + {isBtnVisible && } +
diff --git a/src/components/pages/NewUserPage.tsx b/src/components/pages/NewUserPage.tsx index 8d42140885..9642e29856 100644 --- a/src/components/pages/NewUserPage.tsx +++ b/src/components/pages/NewUserPage.tsx @@ -177,7 +177,11 @@ const NewUserPage: FunctionComponent = () => { return (
- +
{ return (
- +
{ return (
- + { return (
- +
diff --git a/src/components/pages/UserPasswordPage.tsx b/src/components/pages/UserPasswordPage.tsx index ef8bd3ca33..91e7898c1f 100644 --- a/src/components/pages/UserPasswordPage.tsx +++ b/src/components/pages/UserPasswordPage.tsx @@ -23,7 +23,11 @@ const UserPasswordPage: FunctionComponent = () => { return (
- +
{ return (
-
-
-

- {globalize.translate('HeaderUsers')} -

- - -
-
- {users.map(user => { - return ; - })} -
+ + +
+ {users.map(user => { + return ; + })}
From 0a881d6f6f1c87efb1a5330499b676d9991461c2 Mon Sep 17 00:00:00 2001 From: grafixeyehero Date: Mon, 9 May 2022 20:11:47 +0300 Subject: [PATCH 5/6] use camelCase for props --- .../dashboard/users/AccessContainer.tsx | 32 ++++++------- src/components/pages/NewUserPage.tsx | 32 ++++++------- .../pages/UserLibraryAccessPage.tsx | 48 +++++++++---------- 3 files changed, 56 insertions(+), 56 deletions(-) diff --git a/src/components/dashboard/users/AccessContainer.tsx b/src/components/dashboard/users/AccessContainer.tsx index 7c3cda360e..5c0d6341b7 100644 --- a/src/components/dashboard/users/AccessContainer.tsx +++ b/src/components/dashboard/users/AccessContainer.tsx @@ -3,26 +3,26 @@ 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; + containerClassName?: string; + headerTitle?: string; + checkBoxClassName?: string; + checkBoxTitle?: string; + listContainerClassName?: string; + accessClassName?: string; + listTitle?: string; + description?: string; children?: React.ReactNode } -const AccessContainer: FunctionComponent = ({ContainerClassName, HeaderTitle, CheckBoxClassName, CheckBoxTitle, ListContainerClassName, AccessClassName, ListTitle, Description, children }: IProps) => { +const AccessContainer: FunctionComponent = ({containerClassName, headerTitle, checkBoxClassName, checkBoxTitle, listContainerClassName, accessClassName, listTitle, description, children }: IProps) => { return ( -
-

{globalize.translate(HeaderTitle)}

- -
-
+
+

{globalize.translate(headerTitle)}

+ +
+

- {globalize.translate(ListTitle)} + {globalize.translate(listTitle)}

= ({ContainerClassName, HeaderT
- {globalize.translate(Description)} + {globalize.translate(description)}
diff --git a/src/components/pages/NewUserPage.tsx b/src/components/pages/NewUserPage.tsx index 9642e29856..bd8dc289c5 100644 --- a/src/components/pages/NewUserPage.tsx +++ b/src/components/pages/NewUserPage.tsx @@ -199,14 +199,14 @@ const NewUserPage: FunctionComponent = () => { />
{mediaFoldersItems.map(Item => ( { {channelsItems.map(Item => ( { {mediaFoldersItems.map(Item => ( { {channelsItems.map(Item => ( { {devicesItems.map(Item => ( Date: Mon, 9 May 2022 20:35:08 +0300 Subject: [PATCH 6/6] add default isBtnVisible to false --- src/components/dashboard/users/SectionTitleContainer.tsx | 2 +- src/components/pages/NewUserPage.tsx | 1 - src/components/pages/UserEditPage.tsx | 1 - src/components/pages/UserLibraryAccessPage.tsx | 1 - src/components/pages/UserParentalControl.tsx | 1 - src/components/pages/UserPasswordPage.tsx | 1 - 6 files changed, 1 insertion(+), 6 deletions(-) diff --git a/src/components/dashboard/users/SectionTitleContainer.tsx b/src/components/dashboard/users/SectionTitleContainer.tsx index 03d6478c2f..e5e4b8952a 100644 --- a/src/components/dashboard/users/SectionTitleContainer.tsx +++ b/src/components/dashboard/users/SectionTitleContainer.tsx @@ -8,7 +8,7 @@ type IProps = { titleLink?: string; } -const SectionTitleContainer: FunctionComponent = ({title, isBtnVisible, titleLink}: IProps) => { +const SectionTitleContainer: FunctionComponent = ({title, isBtnVisible = false, titleLink}: IProps) => { return (
diff --git a/src/components/pages/NewUserPage.tsx b/src/components/pages/NewUserPage.tsx index bd8dc289c5..3f94055dae 100644 --- a/src/components/pages/NewUserPage.tsx +++ b/src/components/pages/NewUserPage.tsx @@ -179,7 +179,6 @@ const NewUserPage: FunctionComponent = () => {
diff --git a/src/components/pages/UserEditPage.tsx b/src/components/pages/UserEditPage.tsx index 967d0de421..dce189c696 100644 --- a/src/components/pages/UserEditPage.tsx +++ b/src/components/pages/UserEditPage.tsx @@ -280,7 +280,6 @@ const UserEditPage: FunctionComponent = () => {
diff --git a/src/components/pages/UserLibraryAccessPage.tsx b/src/components/pages/UserLibraryAccessPage.tsx index a1bfd571df..0ffea1565f 100644 --- a/src/components/pages/UserLibraryAccessPage.tsx +++ b/src/components/pages/UserLibraryAccessPage.tsx @@ -230,7 +230,6 @@ const UserLibraryAccessPage: FunctionComponent = () => {
diff --git a/src/components/pages/UserParentalControl.tsx b/src/components/pages/UserParentalControl.tsx index 9bc84dc131..7744d790b2 100644 --- a/src/components/pages/UserParentalControl.tsx +++ b/src/components/pages/UserParentalControl.tsx @@ -321,7 +321,6 @@ const UserParentalControl: FunctionComponent = () => {
diff --git a/src/components/pages/UserPasswordPage.tsx b/src/components/pages/UserPasswordPage.tsx index 91e7898c1f..305e8a4422 100644 --- a/src/components/pages/UserPasswordPage.tsx +++ b/src/components/pages/UserPasswordPage.tsx @@ -25,7 +25,6 @@ const UserPasswordPage: FunctionComponent = () => {