Content
View differences
Updated by Kabiru Mwenja 6 months ago
**As** a user
**I want to** view and edit a real-time collaboration document
**Acceptance criteria**
* The document view is composed of
* Sidebar left with the document module's sub-menu
* A main content area containing the rich-text document, which contains
* A page header that contains
* Breadcrumb navigation (with Project name / Document name (shotened))
* Document title <mention class="mention" data-id="68941" data-type="work_package" data-text="##68941">##68941</mention>
* Type selector (hidden on mobile for now to save space)
* A list of avatars of users that are currently also viewing or editing that page (<mention class="mention" data-id="68764" data-type="work_package" data-text="##68764">##68764</mention>)
* An indicator when the document was last saved. (<mention class="mention" data-id="68939" data-type="work_package" data-text="##68939">##68939</mention>)
* A three-dots actions menu containing the following actions
* Rename document which triggers the edit in place from above.
* (Nice to have) Copy URL to clipboard
* (Nice to have) Duplicate
* Delete document (<mention class="mention" data-id="69080" data-type="work_package" data-text="##69080">##69080</mention>)
* The header does not have a "Save" button. Saving is done automatically.
* The document content
* Rendered in either show mode (<mention class="mention" data-id="68699" data-type="work_package" data-text="##68699">##68699</mention>) or edit mode (##, depending on the users permission
* Showing real-time edits and cursor positions of connected users
* even when the user only has the permission to view and not to edit.
* The document content is rendered and edited with a BlockNote editor.
* During loading of the content a skeleton is shown <mention class="mention" data-id="69016" data-type="work_package" data-text="##69016">##69016</mention>
* Header and document form a visual block inside the content area that gives it a document-like look and feel
* centered
* with a maximum width of (<mention class="mention" data-id="72513" data-type="user" data-text="@Parimal Satyal">@Parimal Satyal</mention>?) for improved readability
* they scroll together, on both, desktop and mobile
* A right panel
* (For now)
* Only lists the attachments
* Allows uploading attachments
* When viewed in tablet portrait mode or slimmer the right panel is rendered below the document content
* At a later point of time (out of scope for now)
* the right panel will hold multiple tabs, similar to a work package (Activity, Files, Relations, ...)
* Routes:
* `documents/<id>` (one route for both, read-only and write)
* Error state (https://community.openproject.org/projects/communicator-stream/work\_packages/67424/activity#comment-1542622)
* In the event the collaboration server is unreachable or disconnects, the editor is no longer visible an error banner is rendered with an error message and a "Try again" button that refreshes the page in an attempt to re-establish connection
* When connection is restored, a success flash message is displayed and the editor accessible once more.
**Out of scope**
* further information tabs such as activity, versions, relations, ...
**I want to** view and edit a real-time collaboration document
**Acceptance criteria**
* The document view is composed of
* Sidebar left with the document module's sub-menu
* A main content area containing the rich-text document, which contains
* A page header that contains
* Breadcrumb navigation (with Project name / Document name (shotened))
* Document title <mention class="mention" data-id="68941" data-type="work_package" data-text="##68941">##68941</mention>
* Type selector (hidden on mobile for now to save space)
* A list of avatars of users that are currently also viewing or editing that page (<mention class="mention" data-id="68764" data-type="work_package" data-text="##68764">##68764</mention>)
* An indicator when the document was last saved. (<mention class="mention" data-id="68939" data-type="work_package" data-text="##68939">##68939</mention>)
* A three-dots actions menu containing the following actions
* Rename document which triggers the edit in place from above.
* (Nice to have) Copy URL to clipboard
* (Nice to have) Duplicate
* Delete document (<mention class="mention" data-id="69080" data-type="work_package" data-text="##69080">##69080</mention>)
* The header does not have a "Save" button. Saving is done automatically.
* The document content
* Rendered in either show mode (<mention class="mention" data-id="68699" data-type="work_package" data-text="##68699">##68699</mention>) or edit mode (##, depending on the users permission
* Showing real-time edits and cursor positions of connected users
* even when the user only has the permission to view and not to edit.
* The document content is rendered and edited with a BlockNote editor.
* During loading of the content a skeleton is shown <mention class="mention" data-id="69016" data-type="work_package" data-text="##69016">##69016</mention>
* Header and document form a visual block inside the content area that gives it a document-like look and feel
* centered
* with a maximum width of (<mention class="mention" data-id="72513" data-type="user" data-text="@Parimal Satyal">@Parimal Satyal</mention>?) for improved readability
* they scroll together, on both, desktop and mobile
* A right panel
* (For now)
* Only lists the attachments
* Allows uploading attachments
* When viewed in tablet portrait mode or slimmer the right panel is rendered below the document content
* At a later point of time (out of scope for now)
* the right panel will hold multiple tabs, similar to a work package (Activity, Files, Relations, ...)
* Routes:
* `documents/<id>` (one route for both, read-only and write)
* Error state (https://community.openproject.org/projects/communicator-stream/work\_packages/67424/activity#comment-1542622)
* In the event the collaboration server is unreachable or disconnects, the editor is no longer visible an error banner is rendered with an error message and a "Try again" button that refreshes the page in an attempt to re-establish connection
* When connection is restored, a success flash message is displayed and the editor accessible once more.
**Out of scope**
* further information tabs such as activity, versions, relations, ...