Skip to content

Office Overview Part 3/5 - List view, view toggle and grid preference#5685

Draft
moodyjmz wants to merge 42 commits into
feat/office-overview-v2from
feat/overview-pr4-list-view
Draft

Office Overview Part 3/5 - List view, view toggle and grid preference#5685
moodyjmz wants to merge 42 commits into
feat/office-overview-v2from
feat/overview-pr4-list-view

Conversation

@moodyjmz
Copy link
Copy Markdown
Contributor

Part of the Office Overview feature — merge into feat/office-overview-v2.

  • List view alongside existing grid view using NcListItem
  • Toggle button to switch between grid and list
  • Persist grid/list preference via user config endpoint

elzody added 29 commits May 20, 2026 18:50
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>
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>
@moodyjmz moodyjmz force-pushed the feat/overview-pr4-list-view branch from 1e7b7f6 to b1684ce Compare May 20, 2026 20:16
moodyjmz and others added 13 commits May 21, 2026 09:23
Uses sortNodes from @nextcloud/files with sortFavoritesFirst and
mtime descending so the most recently edited files appear first with
starred items pinned to the top.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Signed-off-by: James Manuel <moodyjmz@users.noreply.github.com>
Signed-off-by: James Manuel <moodyjmz@users.noreply.github.com>
… list as parameter

Signed-off-by: James Manuel <moodyjmz@users.noreply.github.com>
…rrel imports

Nav items are now driven by whatever TemplateFileCreator objects are
registered with the NC Files API, so installing or removing an office
suite automatically updates the sidebar. Uses a single fetch on mount
for both the category list and the MIME filter for DAV SEARCH.

Shows NcEmptyContent when no providers are installed rather than
displaying an empty nav with no files.

Signed-off-by: James Manuel <moodyjmz@users.noreply.github.com>
… cards

Signed-off-by: James Manuel <moodyjmz@users.noreply.github.com>
…dialog

Signed-off-by: James Manuel <moodyjmz@users.noreply.github.com>
…e creator and duplicate error

Signed-off-by: James Manuel <moodyjmz@users.noreply.github.com>
Adds PUT /apps/richdocuments/settings/overview/grid_view endpoint to
persist the overview view mode per user. OverviewController injects the
saved preference as initial state so the frontend reads it on mount.

Signed-off-by: James Manuel <moodyjmz@users.noreply.github.com>
List view is now the default. A toggle in the toolbar switches between
list and grid. List rows use NcListItem with mtime subname and a star
indicator for favourites. The chosen mode persists via the new
settings/overview/grid_view endpoint.

Signed-off-by: James Manuel <moodyjmz@users.noreply.github.com>
…le toggle, a11y fixes

- Center search bar; move view toggle into a files section header alongside
  a "Recent {category}" h2 heading
- Toggle is now a single button switching icon based on current mode
- TemplateSection gets a subtle background (--color-background-hover) and
  uses h2 + aria-labelledby for correct heading hierarchy
- FileCard changed from div to button for keyboard accessibility;
  adds focus-visible outline

Signed-off-by: James Manuel <moodyjmz@users.noreply.github.com>
Blank card was taller than template cards because min-height and
padding-bottom combined. Replaced flex centering with absolute
positioning for the icon so height is driven by padding-bottom alone.

Template preview URLs were null from the API despite hasPreview: true.
Generate from fileid using /core/preview (mirrors TemplatePreview.vue).

File grid preview URLs now include etag version param and mimeFallback=1
so broken previews degrade to MIME icons rather than broken img elements.

Signed-off-by: James Manuel <moodyjmz@users.noreply.github.com>
Guard setOverviewGridView() against a null userId by returning 401
rather than writing to an empty-string uid. Mirror the same null guard
in OverviewController::index() when reading the stored grid-view pref.

Also rename the initial state key from 'config' to 'overview_config' to
avoid colliding with any existing config state provided by other parts
of the app.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Signed-off-by: James Manuel <moodyjmz@users.noreply.github.com>
…meFallback param

Replace the ratio-based padding-bottom trick in TemplateSection with a
fixed 2/3 aspect-ratio so all categories (docs, sheets, presentations)
render at the same height. Switch .template-card__preview to flex
centering, removing the now-redundant absolute-position rule on the
blank card icon.

Add an @error handler that sets failedPreviews[fileid] so a broken
image falls back to the file-type icon without a broken-image glitch.
Use template.previewUrl when the API provides it, otherwise derive the
URL from the fileid.

In OfficeOverview, fix the preview URL to use mimeFallback=true
(boolean string) instead of mimeFallback=1, and update the loadState
key to match the renamed initial state ('overview_config').

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Signed-off-by: James Manuel <moodyjmz@users.noreply.github.com>
@moodyjmz moodyjmz force-pushed the feat/overview-pr4-list-view branch from b1684ce to 4162edc Compare May 21, 2026 08:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants