Office

A Nextcloud app that provides a dedicated hub for office documents. Users can browse, filter, search, and create Documents, Spreadsheets, Presentations, and Diagrams from a single page — without going through the Files app.

---

Features

• Overview page at /apps/office — categorised file list with sidebar navigation
• Filters — All / Mine / Shared with me
• Search — within the active category, with an "Open in Files" escape hatch
• View toggle — Grid (thumbnail previews) or List, persisted per user
• Template creator — create new files from editor-provided templates
• Editor integration — opens files directly in the configured office editor

---

Local development

Requirements

• nextcloud-docker-dev
• NC ≥ 33
• Node 24 / npm 11

1. Mount the app into the container

Add to nextcloud-docker-dev/docker-compose.override.yml:

services:
  nextcloud:
    volumes:
      - /path/to/office:/var/www/html/apps-extra/office

Restart the container after saving.

2. Enable the app

docker exec -u www-data nextcloud-docker-dev-nextcloud-1 \
  php occ app:enable office

3. Build the frontend

npm ci
npm run build      # one-off build
npm run watch      # rebuild on file changes

Always build with npm ci (not npm install) so your local bundle matches the committed package-lock.json. npm install can pull newer transitive deps and make a trivial change churn unrelated @nextcloud/vue CSS.

4. Running tests

nvm use             # pins Node 24 — Node 25's native localStorage global
                     # silently breaks jsdom under Vitest
npm run test:unit         # one-off run
npm run test:unit:watch   # watch mode

Vitest + @vue/test-utils + jsdom, configured in vitest.config.ts (standalone from vite.config.ts — no shared build config to keep in sync). vitest.setup.ts provides shared mocks for the Nextcloud globals every component needs outside a running NC page (@nextcloud/l10n/auth/initial-state/router) plus a ResizeObserver stub. src/test-utils/fixtures.ts has makeNode()/makeCreator() factories for building test data. CI runs the suite on PRs via test-unit.yml.

5. Committing changes

Commit source only (src/, lib/, …) — do not commit the built js/+css/ bundle. npm run build/watch regenerates those locally for testing; leave them uncommitted (git add src/…, then git restore js css when you're done). A pre-commit hook (.githooks/pre-commit, wired via the prepare npm script — run npm install/npm ci at least once to activate it) blocks staged js//css/ changes locally as a safety net.

CI (npm-build) will fail your PR with "Please recompile and commit the assets" — that's expected for a source-only PR. A maintainer then comments /compile on the PR and the nextcloud-command bot builds and pushes the recompiled assets as a chore(assets): Recompile assets commit.

---

Editor integration

The overview opens files via NC's file shortlink (/f/{fileid}), which redirects to the Files app and triggers the default file action for the installed office editor.

To inject a custom editor URL, a backend component can call provideInitialState('office', 'editor-url', $url) before the page renders. The frontend reads this via loadState('office', 'editor-url', null) and, when present, navigates directly to that URL instead of /f/{fileid}.

---

Architecture

/apps/office
└── PageController::index()       Renders the SPA shell
    └── App.vue
        └── OfficeOverview.vue    Rendering states + wiring (the "launchpad")
            ├── TemplateSection.vue   Template picker, scrollable card list
            ├── FileCard.vue          Grid-view file card
            ├── officeFiles.ts        WebDAV file listing via @nextcloud/files
            ├── templates.ts          Template discovery and file creation
            ├── config.ts             User preference persistence (grid/list view)
            └── utils/
                ├── fileFilters.ts     Mine/shared/all + search + sort (pure)
                ├── fileCategories.ts  Mime → category mapping (pure)
                └── validateFilename.ts