TeaSpeak/TeaWeb
TeaSpeak/TeaWeb
1
0
Fork 0
Code Issues 1 Pull requests Activity

Fixed some minor permission editor bugs

Browse source
This commit is contained in:
WolverinDEV 2021-01-16 13:50:27 +01:00
parent db174831b4
commit 1bbad1e010
2 changed files with 33 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
shared/js/ui/modal/permission/ModalPermissionEditor.tsx
View file

@ -34,6 +34,7 @@ import {InternalModal} from "tc-shared/ui/react-elements/internal-modal/Controll
import {ErrorCode} from "tc-shared/connection/ErrorCode"; import {ErrorCode} from "tc-shared/connection/ErrorCode";
import {PermissionEditorTab} from "tc-shared/events/GlobalEvents"; import {PermissionEditorTab} from "tc-shared/events/GlobalEvents";
import {LogCategory, logError, logWarn} from "tc-shared/log"; import {LogCategory, logError, logWarn} from "tc-shared/log";
import {useTr} from "tc-shared/ui/react-elements/Helper";
const cssStyle = require("./ModalPermissionEditor.scss"); const cssStyle = require("./ModalPermissionEditor.scss");
@ -44,12 +45,12 @@ export type PermissionEditorSubject =
| "client" | "client"
| "client-channel" | "client-channel"
| "none"; | "none";
export const PermissionTabName: { [T in PermissionEditorTab]: { name: string, translated: string } } = { export const PermissionTabName: { [T in PermissionEditorTab]: { name: string, useTranslate: () => string, renderTranslate: () => React.ReactNode } } = {
"groups-server": {name: "Server Groups", translated: tr("Server Groups")}, "groups-server": {name: "Server Groups", useTranslate: () => useTr("Server Groups"), renderTranslate: () => <Translatable>Server Groups</Translatable>},
"groups-channel": {name: "Channel Groups", translated: tr("Channel Groups")}, "groups-channel": {name: "Channel Groups", useTranslate: () => useTr("Channel Groups"), renderTranslate: () => <Translatable>Channel Groups</Translatable>},
"channel": {name: "Channel Permissions", translated: tr("Channel Permissions")}, "channel": {name: "Channel Permissions", useTranslate: () => useTr("Channel Permissions"), renderTranslate: () => <Translatable>Channel Permissions</Translatable>},
"client": {name: "Client Permissions", translated: tr("Client Permissions")}, "client": {name: "Client Permissions", useTranslate: () => useTr("Client Permissions"), renderTranslate: () => <Translatable>Client Permissions</Translatable>},
"client-channel": {name: "Client Channel Permissions", translated: tr("Client Channel Permissions")}, "client-channel": {name: "Client Channel Permissions", useTranslate: () => useTr("Client Channel Permissions"), renderTranslate: () => <Translatable>Client Channel Permissions</Translatable>},
}; };
export type GroupProperties = { export type GroupProperties = {
@ -244,13 +245,15 @@ const ActiveTabInfo = (props: { events: Registry<PermissionModalEvents> }) => {
const [activeTab, setActiveTab] = useState<PermissionEditorTab>("groups-server"); const [activeTab, setActiveTab] = useState<PermissionEditorTab>("groups-server");
props.events.reactUse("action_activate_tab", event => setActiveTab(event.tab)); props.events.reactUse("action_activate_tab", event => setActiveTab(event.tab));
return <div className={cssStyle.header + " " + cssStyle.activeTabInfo}> return (
<div className={cssStyle.entry}> <div className={cssStyle.header + " " + cssStyle.activeTabInfo}>
<a title={PermissionTabName[activeTab].translated}> <div className={cssStyle.entry}>
<Translatable trIgnore={true}>{PermissionTabName[activeTab].name}</Translatable> <a title={PermissionTabName[activeTab].useTranslate()} key={"tab-" + activeTab}>
</a> {PermissionTabName[activeTab].renderTranslate()}
</a>
</div>
</div> </div>
</div> );
}; };
const TabSelectorEntry = (props: { events: Registry<PermissionModalEvents>, entry: PermissionEditorTab }) => { const TabSelectorEntry = (props: { events: Registry<PermissionModalEvents>, entry: PermissionEditorTab }) => {
@ -258,22 +261,26 @@ const TabSelectorEntry = (props: { events: Registry<PermissionModalEvents>, entr
props.events.reactUse("action_activate_tab", event => setActive(event.tab === props.entry)); props.events.reactUse("action_activate_tab", event => setActive(event.tab === props.entry));
return <div className={cssStyle.entry + " " + (active ? cssStyle.selected : "")} return (
onClick={() => !active && props.events.fire("action_activate_tab", {tab: props.entry})}> <div className={cssStyle.entry + " " + (active ? cssStyle.selected : "")}
<a title={PermissionTabName[props.entry].translated}> onClick={() => !active && props.events.fire("action_activate_tab", {tab: props.entry})}>
<Translatable trIgnore={true}>{PermissionTabName[props.entry].translated}</Translatable> <a title={PermissionTabName[props.entry].useTranslate()}>
</a> {PermissionTabName[props.entry].renderTranslate()}
</div>; </a>
</div>
);
}; };
const TabSelector = (props: { events: Registry<PermissionModalEvents> }) => { const TabSelector = (props: { events: Registry<PermissionModalEvents> }) => {
return <div className={cssStyle.header + " " + cssStyle.tabSelector}> return (
<TabSelectorEntry events={props.events} entry={"groups-server"}/> <div className={cssStyle.header + " " + cssStyle.tabSelector}>
<TabSelectorEntry events={props.events} entry={"groups-channel"}/> <TabSelectorEntry events={props.events} entry={"groups-server"}/>
<TabSelectorEntry events={props.events} entry={"channel"}/> <TabSelectorEntry events={props.events} entry={"groups-channel"}/>
<TabSelectorEntry events={props.events} entry={"client"}/> <TabSelectorEntry events={props.events} entry={"channel"}/>
<TabSelectorEntry events={props.events} entry={"client-channel"}/> <TabSelectorEntry events={props.events} entry={"client"}/>
</div>; <TabSelectorEntry events={props.events} entry={"client-channel"}/>
</div>
);
}; };
export type DefaultTabValues = { groupId?: number, channelId?: number, clientDatabaseId?: number }; export type DefaultTabValues = { groupId?: number, channelId?: number, clientDatabaseId?: number };

2
shared/js/ui/modal/permission/PermissionEditor.tsx
View file

@ -1354,7 +1354,7 @@ export class PermissionEditor extends React.Component<PermissionEditorProperties
<div key={"footer"} className={cssStyle.containerFooter}> <div key={"footer"} className={cssStyle.containerFooter}>
<RefreshButton events={this.props.events}/> <RefreshButton events={this.props.events}/>
</div> </div>
] ];
} }
componentDidMount(): void { componentDidMount(): void {