...
Platform & Organisation News/Blog Feed - https://voluntarily.atlassian.net/browse/VP-654?searchSessionId=384bc591-ca8c-4be7-b91d-5d275e36f8c5&searchContainerId=10000&searchContentType=issue&searchObjectId=10674
Opportunity Q&A / Discussion page - https://voluntarily.atlassian.net/browse/VP-526
Activity Q&A / Discussion page - https://voluntarily.atlassian.net/browse/VP-937
To support these features we provide a forum engine. This consists of
Database collection for stories.
Story edit form and display components
Database collection for comments and threads
Comment edit form and display component
Q&A Pages are made possible allowing comment trees to have an opportunity or activity object as a parent.
Story Entity
A story consists of:
_id - storyID
name - the title of the story, single line shown as a heading
( we use name rather than title so that these items are consistent with other Card components)
imgUrl - the primary image illustrating the story.
subtitle - a short text that shows on a Card view of the story.
content - the rich text content
author - PersonID for the author
organisation - OrganisationID for story author originator
tags - array of tag strings, used to filter stories e.g. for landing page.
dateAdded, dateUpdated- automatic fields for creation and update dates
Stories intentionally have similar structure to Ops and Acts i.e. name, subtitle, imgUrl etc.
Change requestor to author across the board. This allows Opportunities and Activities to have comment threads that attach directly to the entity details page.
Comment Entity
Any entity with an ID can effectively have a comment stream.
A comment consists of
_id: comment ID
comment - rich text
author - personID of person writing the comment
dateAdded, dateUpdated- automatic fields for creation and update dates
forum: ObjectID - any entity, comment means reply otherwise it is the containing story, op, act etc. (Index) this is the forum that the comment thread belongs to.
parent: commentID - creates the tree structure of comment threads and replies.
When displaying a comment stream for an object search the collection for items with the matching owner id.
Story Display Components
StoryList
Container for a grid of StoryCards, sorted by date (or other).
StoryCard
Summary card for a story, Shows image, title and subtitle, click on the card to open page showing the story.
Subtitle can be a few lines of a summary of the content.
StoryDetail
Full page for a story
StoryHeader
Header section shows the main image, name, subtitle, post date, author and author’s organisation (if set)
StoryBody
The content section shows body content in A4 style page,
StoryComments
Comments section shows tree of comments associated with the story.
StoryForm
Edit form for a new or existing story.
fields for
name (labelled title)
subtitle (or extract)
content
tags list
publishedBy - listed from available memberships list of the author (as per opportunity). Note only people belonging to an org can create stories. AP, OP, OrgAdmins but not VPs.
Stories are listed under the organisation profile page or on the landing page and news feed if tagged appropriately.
Buttons for Save as Draft | Publish | Retire
Retire means keep the story in the archive but don’t list on feeds and org page. i.e same as draft.
Comment Display Components
Comment
Text block associated with avatar of the writer.
Extra details available on click/hover - date posted,
MyComment
A comment that I am the author of.
As for Comment but followed by a small links menu for edit, remove
Styled so I can see my comments (background colour)
AuthorComment
A comment that has been written by the author of the containing forum( op, act, story)
Styled differently so that readers can see the authoritative answers.
CommentTree
A page section displaying a tree of comments associated with the same story or entity.
Comments are ordered by date (or rank if ranked)
Top-level comments are those that have no parent id. These are displayed aligned left. with a slightly larger vertical margin between comments.
Child comments (replies) are those that have a parent Id. These are displayed immediately under and indented to their parent. Indentation stops after 4 levels to avoid going off to the right of the page.
Vertical margin is smaller so they are closely associated with the parent.
CommentForm
An inline component opened when someone clicks on a Comment or Reply link. Shows the standard rich text editor. with Save/cancel buttons.
This is a good time to test out the in-place editing.
We don’t need full-on Antd forms here. Just an input and button - use hooks. This because there’s no validation to do and only a single field.