⭐ Start the forum framework

2026-06-19 23:16:21 +00:00 · 2026-03-28 08:36:11 +01:00
parent bbb81dac87
commit a959bdce04
12 changed files with 988 additions and 7 deletions
@@ -0,0 +1,113 @@
+import { UpdateForumSettingsMessageComposer } from '@nitrots/nitro-renderer';
+import { FC, useCallback, useState } from 'react';
+import { LocalizeText, SendMessageComposer } from '../../../../api';
+import { Button, Column, Flex, Text } from '../../../../common';
+import { ExtendedForumData } from '@nitrots/nitro-renderer';
+
+// Permission levels: 0 = EVERYONE, 1 = MEMBERS, 2 = ADMINS, 3 = OWNER
+const PERMISSION_EVERYONE = 0;
+const PERMISSION_MEMBERS = 1;
+const PERMISSION_ADMINS = 2;
+const PERMISSION_OWNER = 3;
+
+interface GroupForumSettingsViewProps
+{
+    groupId: number;
+    forumData: ExtendedForumData;
+    onBack: () => void;
+}
+
+export const GroupForumSettingsView: FC<GroupForumSettingsViewProps> = props =>
+{
+    const { groupId = 0, forumData = null, onBack = null } = props;
+    const effectiveGroupId = forumData?.groupId || groupId;
+    const [ readPermission, setReadPermission ] = useState<number>(forumData?.readPermissions ?? PERMISSION_EVERYONE);
+    const [ postMessagePermission, setPostMessagePermission ] = useState<number>(forumData?.postMessagePermissions ?? PERMISSION_MEMBERS);
+    const [ postThreadPermission, setPostThreadPermission ] = useState<number>(forumData?.postThreadPermissions ?? PERMISSION_MEMBERS);
+    const [ moderatePermission, setModeratePermission ] = useState<number>(forumData?.moderatePermissions ?? PERMISSION_ADMINS);
+
+    const saveSettings = useCallback(() =>
+    {
+        SendMessageComposer(new UpdateForumSettingsMessageComposer(
+            effectiveGroupId,
+            readPermission,
+            postMessagePermission,
+            postThreadPermission,
+            moderatePermission
+        ));
+
+        onBack();
+    }, [ effectiveGroupId, readPermission, postMessagePermission, postThreadPermission, moderatePermission, onBack ]);
+
+    const getPermissionOptions = (includeOwner: boolean = false) =>
+    {
+        const options = [
+            { value: PERMISSION_EVERYONE, label: LocalizeText('groupforum.permissions.option_all') },
+            { value: PERMISSION_MEMBERS, label: LocalizeText('groupforum.permissions.option_group_members') },
+            { value: PERMISSION_ADMINS, label: LocalizeText('groupforum.permissions.option_group_admins') }
+        ];
+
+        if(includeOwner)
+        {
+            options.push({ value: PERMISSION_OWNER, label: LocalizeText('groupforum.permissions.option_owner') });
+        }
+
+        return options;
+    };
+
+    return (
+        <Column className="h-full p-3" gap={ 3 }>
+            <Flex gap={ 2 } alignItems="center">
+                <Text pointer underline onClick={ onBack }>
+                    &laquo; { LocalizeText('groupforum.view.back') }
+                </Text>
+            </Flex>
+            <Text bold>{ LocalizeText('groupforum.settings.window_title') }</Text>
+            <Column gap={ 2 }>
+                <Column gap={ 1 }>
+                    <Text bold small>{ LocalizeText('groupforum.permissions.read_label') }</Text>
+                    <select className="form-select form-select-sm" value={ readPermission } onChange={ e => setReadPermission(parseInt(e.target.value)) }>
+                        { getPermissionOptions().map(opt => (
+                            <option key={ opt.value } value={ opt.value }>{ opt.label }</option>
+                        )) }
+                    </select>
+                </Column>
+                <Column gap={ 1 }>
+                    <Text bold small>{ LocalizeText('groupforum.permissions.post_message_label') }</Text>
+                    <select className="form-select form-select-sm" value={ postMessagePermission } onChange={ e => setPostMessagePermission(parseInt(e.target.value)) }>
+                        { getPermissionOptions(true).map(opt => (
+                            <option key={ opt.value } value={ opt.value }>{ opt.label }</option>
+                        )) }
+                    </select>
+                </Column>
+                <Column gap={ 1 }>
+                    <Text bold small>{ LocalizeText('groupforum.permissions.post_thread_label') }</Text>
+                    <select className="form-select form-select-sm" value={ postThreadPermission } onChange={ e => setPostThreadPermission(parseInt(e.target.value)) }>
+                        { getPermissionOptions(true).map(opt => (
+                            <option key={ opt.value } value={ opt.value }>{ opt.label }</option>
+                        )) }
+                    </select>
+                </Column>
+                <Column gap={ 1 }>
+                    <Text bold small>{ LocalizeText('groupforum.permissions.moderate_label') }</Text>
+                    <select className="form-select form-select-sm" value={ moderatePermission } onChange={ e => setModeratePermission(parseInt(e.target.value)) }>
+                        { [
+                            { value: PERMISSION_ADMINS, label: LocalizeText('groupforum.permissions.option_group_admins') },
+                            { value: PERMISSION_OWNER, label: LocalizeText('groupforum.permissions.option_owner') }
+                        ].map(opt => (
+                            <option key={ opt.value } value={ opt.value }>{ opt.label }</option>
+                        )) }
+                    </select>
+                </Column>
+            </Column>
+            <Flex className="mt-auto" gap={ 2 } justifyContent="end">
+                <Button variant="secondary" className="btn-sm" onClick={ onBack }>
+                    { LocalizeText('generic.cancel') }
+                </Button>
+                <Button variant="primary" className="btn-sm" onClick={ saveSettings }>
+                    { LocalizeText('groupforum.settings.ok') }
+                </Button>
+            </Flex>
+        </Column>
+    );
+};