wilw/treadl
wilw/treadl
3
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Some UI components

Browse Source
This commit is contained in:
Will Webberley 2024-10-24 22:09:37 +01:00
parent 5692258cc1
commit 8c1145e54f
8 changed files with 165 additions and 14 deletions

7
api/api/groups.py
View File

@ -42,6 +42,9 @@ def create(user, data):
"postNoticeboard",
"viewProjects",
"postProjects",
"viewForumTopics",
"postForumTopics",
"postForumTopicReplies",
],
}
result = db.groups.insert_one(group)
@ -495,7 +498,7 @@ def create_forum_topic(user, id, data):
group = db.groups.find_one({"_id": id})
if not group:
raise util.errors.NotFound("Group not found")
if not has_group_permission(user, group, "createForumTopics"):
if not has_group_permission(user, group, "postForumTopics"):
raise util.errors.Forbidden("You don't have permission to create a topic")
topic = {
"createdAt": datetime.datetime.now(),
@ -528,7 +531,7 @@ def crete_forum_topic_reply(user, id, topic_id, data):
topic = db.groupForumTopics.find_one({"_id": topic_id})
if not topic or topic.get("group") != id:
raise util.errors.NotFound("Topic not found")
if not has_group_permission(user, group, "createForumTopicReplies"):
if not has_group_permission(user, group, "postForumTopicReplies"):
raise util.errors.Forbidden("You don't have permission to create a reply")
reply = {
"createdAt": datetime.datetime.now(),

20
web/src/actions/groups.js
View File

@ -20,6 +20,10 @@ export default {
DELETE_ENTRY: 'DELETE_ENTRY',
UPDATE_REPLYING_TO_ENTRY: 'UPDATE_REPLYING_TO_ENTRY',
UPDATE_PROJECT_FILTER: 'UPDATE_PROJECT_FILTER',
RECEIVE_TOPICS: 'RECEIVE_TOPICS',
DELETE_TOPIC: 'DELETE_TOPIC',
RECEIVE_TOPIC_REPLIES: 'RECEIVE_TOPIC_REPLIES',
DELETE_TOPIC_REPLY: 'DELETE_TOPIC_REPLY',
updateNewGroupName (name) {
return { type: this.UPDATE_NEW_GROUP_NAME, name }
@ -97,6 +101,22 @@ export default {
updateProjectFilter (projectFilter) {
return { type: this.UPDATE_PROJECT_FILTER, projectFilter }
},
receiveTopics (topics) {
return { type: this.RECEIVE_TOPICS, topics }
},
deleteTopic (topicId) {
return { type: this.DELETE_TOPIC, topicId }
},
receiveTopicReplies (replies) {
return { type: this.RECEIVE_TOPIC_REPLIES, replies }
},
deleteTopicReply (replyId) {
return { type: this.DELETE_TOPIC_REPLY, replyId }
}
}

63
web/src/components/main/groups/Forum.jsx Normal file
View File

@ -0,0 +1,63 @@
import React, { useState, useEffect } from 'react'
import { Input, Divider, Loader, Segment, Card, Dropdown, Button } from 'semantic-ui-react'
import { useSelector, useDispatch } from 'react-redux'
import { useParams } from 'react-router-dom'
import { toast } from 'react-toastify'
import actions from '../../../actions'
import api from '../../../api'
export default function Forum () {
const [loadingTopics, setLoadingTopics] = useState(false)
const dispatch = useDispatch()
const { id } = useParams()
const { group, topics } = useSelector(state => {
const group = state.groups.groups?.filter(g => g._id === id)[0]
const topics = state.groups.topics.filter(t => t.groupId === id)
const user = state.users.users.filter(u => state.auth.currentUserId === u._id)[0]
return { user, group, topics }
})
useEffect(() => {
setLoadingTopics(true)
api.groups.getForumTopics(group._id, topics => {
setLoadingTopics(false)
dispatch(actions.groups.receiveTopics(topics))
}, err => {
toast.error(err.message)
setLoadingTopics(false)
})
}, [group._id])
return (
<div>
<h1>Forum</h1>
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
<Input placeholder='Search topics...' />
<Button primary>New Topic</Button>
</div>
{loadingTopics
? <Loader active />
: (
<Card.Group>
{topics.map(topic => (
<Card key={topic._id}>
<Card.Content>
<Card.Header>{topic.title}</Card.Header>
<Card.Meta>{topic.user.name}</Card.Meta>
<Card.Description>{topic.body}</Card.Description>
</Card.Content>
<Card.Content extra>
<Dropdown text='Actions'>
<Dropdown.Menu>
<Dropdown.Item>Edit</Dropdown.Item>
<Dropdown.Item>Delete</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</Card.Content>
</Card>
))}
</Card.Group>)}
</div>
)
}

40
web/src/components/main/groups/ForumTopic.jsx Normal file
View File

@ -0,0 +1,40 @@
import React, { useState, useEffect } from 'react'
import { Input, Divider, Loader, Segment, Card, Dropdown, Button } from 'semantic-ui-react'
import { useSelector, useDispatch } from 'react-redux'
import { useParams } from 'react-router-dom'
import { toast } from 'react-toastify'
import actions from '../../../actions'
import api from '../../../api'
export default function ForumTopic () {
const [topics, setTopics] = useState([])
const [loadingTopics, setLoadingTopics] = useState(false)
const dispatch = useDispatch()
const { id } = useParams()
const { group } = useSelector(state => {
let group
state.groups.groups.forEach((g) => {
if (g._id === id) group = g
})
const user = state.users.users.filter(u => state.auth.currentUserId === u._id)[0]
return { user, group }
})
useEffect(() => {
setLoadingTopics(true)
api.groups.getForumTopics(group._id, ({ topics }) => {
setLoadingTopics(false)
setTopics(topics)
}, err => {
toast.error(err.message)
setLoadingTopics(false)
})
}, [group._id])
return (
<div>
</div>
)
}

19
web/src/components/main/groups/Group.jsx
View File

@ -109,16 +109,15 @@ function Group () {
{utils.isInGroup(user, group._id) &&
<Menu fluid vertical>
<Menu.Item active={utils.activePath('^/groups/[a-zA-Z0-9]+$')} as={Link} to={`/groups/${group._id}`} icon='chat' content='Notice Board' />
{utils.isInGroup(user, group._id) &&
<>
{utils.hasGroupPermission(user, group, 'viewMembers') &&
<Menu.Item active={utils.activePath('members')} as={Link} to={`/groups/${group._id}/members`} icon='user' content='Members' />}
{utils.hasGroupPermission(user, group, 'viewProjects') &&
<Menu.Item active={utils.activePath('projects')} as={Link} to={`/groups/${group._id}/projects`} icon='book' content='Projects' />}
{utils.isGroupAdmin(user, group) &&
<Menu.Item active={utils.activePath('settings')} as={Link} to={`/groups/${group._id}/settings`} icon='settings' content='Settings' />}
</>}
<Menu.Item active={utils.activePath('^/groups/[a-zA-Z0-9]+$')} as={Link} to={`/groups/${group._id}`} icon='bullhorn' content='Notice Board' />
{utils.hasGroupPermission(user, group, 'viewForumTopics') &&
<Menu.Item active={utils.activePath('forum')} as={Link} to={`/groups/${group._id}/forum`} icon='comments' content='Forum' />}
{utils.hasGroupPermission(user, group, 'viewMembers') &&
<Menu.Item active={utils.activePath('members')} as={Link} to={`/groups/${group._id}/members`} icon='user' content='Members' />}
{utils.hasGroupPermission(user, group, 'viewProjects') &&
<Menu.Item active={utils.activePath('projects')} as={Link} to={`/groups/${group._id}/projects`} icon='book' content='Projects' />}
{utils.isGroupAdmin(user, group) &&
<Menu.Item active={utils.activePath('settings')} as={Link} to={`/groups/${group._id}/settings`} icon='settings' content='Settings' />}
</Menu>}
<Card fluid color='yellow'>

5
web/src/components/main/groups/Settings.jsx
View File

@ -12,7 +12,10 @@ const PERMISSIONS = [
{ name: 'viewMembers', label: 'Allow members to view other members' },
{ name: 'viewNoticeboard', label: 'Allow members to view the noticeboard' },
{ name: 'postNoticeboard', label: 'Allow members to post to the noticeboard' },
{ name: 'viewProjects', label: 'Allow members to view projects linked to the group' }
{ name: 'viewProjects', label: 'Allow members to view projects linked to the group' },
{ name: 'viewForumTopics', label: 'Allow members to view forum topics' },
{ name: 'postForumTopics', label: 'Allow members to post new topics to the forum' },
{ name: 'postForumTopicReplies', label: 'Allow members to reply to forum topics' },
]
function Settings () {

5
web/src/index.jsx
View File

@ -40,6 +40,8 @@ import ObjectList from './components/main/projects/ObjectList'
import NewGroup from './components/main/groups/New'
import Group from './components/main/groups/Group'
import GroupFeed from './components/main/groups/Feed'
import GroupForum from './components/main/groups/Forum'
import GroupForumTopic from './components/main/groups/ForumTopic'
import GroupMembers from './components/main/groups/Members'
import GroupProjects from './components/main/groups/Projects'
import GroupSettings from './components/main/groups/Settings'
@ -99,6 +101,9 @@ const router = createBrowserRouter([
element: <Group />,
children: [
{ path: 'feed', element: <GroupFeed />, errorElement: <ErrorElement /> },
{ path: 'forum', element: <GroupForum />, errorElement: <ErrorElement />, children: [
{ path: 'topics/:topic', element: <GroupForumTopic /> },
] },
{ path: 'members', element: <GroupMembers />, errorElement: <ErrorElement /> },
{ path: 'projects', element: <GroupProjects />, errorElement: <ErrorElement /> },
{ path: 'settings', element: <GroupSettings />, errorElement: <ErrorElement /> },

20
web/src/reducers/groups.js
View File

@ -14,7 +14,9 @@ const initialState = {
replyingToEntry: '',
projectFilter: '',
groups: [],
entries: []
entries: [],
topics: [],
topicReplies: []
}
function groups (state = initialState, action) {
@ -137,6 +139,22 @@ function groups (state = initialState, action) {
return Object.assign({}, state, { entries: state.entries.filter(e => e._id !== action.entryId) })
}
case actions.groups.RECEIVE_TOPICS: {
return Object.assign({}, state, { topics: action.topics })
}
case actions.groups.DELETE_TOPIC: {
return Object.assign({}, state, { topics: state.topics.filter(t => t._id !== action.topicId) })
}
case actions.groups.RECEIVE_TOPIC_REPLIES: {
return Object.assign({}, state, { topicReplies: action.replies })
}
case actions.groups.DELETE_TOPIC_REPLY: {
return Object.assign({}, state, { topicReplies: state.topicReplies.filter(r => r._id !== action.replyId) })
}
default: {
return state
}