Skip to content

feat: office overview page#5644

Draft
elzody wants to merge 29 commits into
mainfrom
feat/office-overview
Draft

feat: office overview page#5644
elzody wants to merge 29 commits into
mainfrom
feat/office-overview

Conversation

@elzody
Copy link
Copy Markdown
Collaborator

@elzody elzody commented May 8, 2026

Summary

Adds a new "Office" app visible in the app menu that provides an overview of documents, spreadsheets, presentations, and diagrams. You can open them for editing, search for a specific file, or create a new one either from a template for a blank file.

Limitations

Sidebar

The Files sidebar is not available since the Files app is not mounted. The sidebar relies on this, as it needs access to the Pinia store the Files app itself provides. This means that the following sidebar features are not available:

  • Sharing
  • File versions
  • Comments

An alternative is that we can register our own sidebar tabs, but we'd need to re-implement a lot of the desired logic.

File Grid

Because this feature resides in Nextcloud Office (richdocuments) and uses Vue 2 without Pinia, we are unable to re-use the existing file grid components defined in the Files app. It would also likely be sloppy even if we could use them, as it would mean we're using components from another app. A new component was needed, which is FileCard.vue.

Checklist

  • Code is properly formatted
  • Sign-off message is added to all commits
  • Documentation (manuals or wiki) has been updated or is not required

@elzody elzody requested a review from emberfiend May 8, 2026 18:32
@elzody elzody added the 2. developing Work in progress label May 8, 2026
@elzody elzody force-pushed the feat/office-overview branch 2 times, most recently from 381358d to 13aef68 Compare May 14, 2026 19:00
elzody added 24 commits May 15, 2026 15:08
Adds the office overview page to the application bar, and the appropriate route, controller, and template

Signed-off-by: Elizabeth Danzberger <elizabeth@elzody.dev>
Adds the OfficeOverview Vue component and renders it

Signed-off-by: Elizabeth Danzberger <elizabeth@elzody.dev>
These template response parameters are used to determine where the app navigation and content are, so that keyboard users can jump to them easily

Signed-off-by: Elizabeth Danzberger <elizabeth@elzody.dev>
The OfficeOverview Vue component needs to be rendered directly to `#content` else it results in a weird double-margin visual bug. It causes some styles to be applied twice. This is also consistent with other apps.

Signed-off-by: Elizabeth Danzberger <elizabeth@elzody.dev>
We had imported material design icons for the office file type icons in the navigation bar, but it might be best to re-use the icons we are using in the rest of the richdocuments app now for consistency.

Signed-off-by: Elizabeth Danzberger <elizabeth@elzody.dev>
Signed-off-by: Elizabeth Danzberger <elizabeth@elzody.dev>
Adds some basic Cypress and PHP unit tests to have some tests in place already

Signed-off-by: Elizabeth Danzberger <elizabeth@elzody.dev>
Fetch files via WebDAV and cache them, and using the entries in the navigation bar to filter them. Unfortunately we cannot use the files entry grid from the Files app, so we have to use a somewhat custom Vue component.

Signed-off-by: Elizabeth Danzberger <elizabeth@elzody.dev>
Previously, fileid was used, but I learned that it is deprecated and snowflake IDs (node.id) should be used instead

Signed-off-by: Elizabeth Danzberger <elizabeth@elzody.dev>
In order for the viewer to be initiated and usable for opening documents, we need to dispatch this event. Previously, `LoadAdditionalScripts` was used, but it actually does not do what is necessary. It is unrelated.

Signed-off-by: Elizabeth Danzberger <elizabeth@elzody.dev>
Switch to using the event dispatcher instead of the service locator pattern. This also fixes a PHP Unit test

Signed-off-by: Elizabeth Danzberger <elizabeth@elzody.dev>
Turns out CI does not load the viewer app, and even stubs won't work; it keeps throwing errors. So, we don't check that the event is dispatched now. We can test this in other ways, naturally, via E2E tests

Signed-off-by: Elizabeth Danzberger <elizabeth@elzody.dev>
Seemed like a lot of extra steps to get the viewer loaded in the CI environment for the PHP tests, so we can just check if the class exists and gracefully skip it. The tests don't need it for now, and in a real scenario or E2E tests it will get dispatched just fine.

Signed-off-by: Elizabeth Danzberger <elizabeth@elzody.dev>
Signed-off-by: Elizabeth Danzberger <elizabeth@elzody.dev>
For right now, I want to focus solely on traditional office file types. Later on it will be easy to add other types.

Signed-off-by: Elizabeth Danzberger <elizabeth@elzody.dev>
Move to a custom Vue component for displaying the document cards.

Signed-off-by: Elizabeth Danzberger <elizabeth@elzody.dev>
We can get rid of the OfficeFileEntry component because it was just acting as a wrapper around each FileCard. We can just use FileCard directly and move those methods to the OfficeOverview component

Signed-off-by: Elizabeth Danzberger <elizabeth@elzody.dev>
Signed-off-by: Elizabeth Danzberger <elizabeth@elzody.dev>
Inject an initial state that determines whether file previews should be shown or not, based on either core settings (enable_previews) or richdocuments settings.

Signed-off-by: Elizabeth Danzberger <elizabeth@elzody.dev>
When previews are disabled, swap to using the file type icons instead.

Signed-off-by: Elizabeth Danzberger <elizabeth@elzody.dev>
Signed-off-by: Elizabeth Danzberger <elizabeth@elzody.dev>
Add Cypress assertion to check if the preview exists, and a PHP unit test to make sure the initial state is set correctly.

Signed-off-by: Elizabeth Danzberger <elizabeth@elzody.dev>
A lot of the logic was redundant, so we can use a setup method to not have to redefine the mocked objects

Signed-off-by: Elizabeth Danzberger <elizabeth@elzody.dev>
Make them more like file entry grid by removing the center alignment of the text.

Signed-off-by: Elizabeth Danzberger <elizabeth@elzody.dev>
elzody added 5 commits May 15, 2026 15:08
This was missing and is an office type, so should be added.

Signed-off-by: Elizabeth Danzberger <elizabeth@elzody.dev>
Adds a search bar so that the current view can be searched to easily find files

Signed-off-by: Elizabeth Danzberger <elizabeth@elzody.dev>
Adds tests for the search functionality

Signed-off-by: Elizabeth Danzberger <elizabeth@elzody.dev>
The card should give the impression that it is "clickable"

Signed-off-by: Elizabeth Danzberger <elizabeth@elzody.dev>
DAV search finds documents that are not only in the root folder but also recursively in subdirectories. It was specified that it should be used in the feature spec anyway.

Signed-off-by: Elizabeth Danzberger <elizabeth@elzody.dev>
@elzody elzody force-pushed the feat/office-overview branch from 2fe21ed to 6605e52 Compare May 15, 2026 19:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

2. developing Work in progress

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants