Developing

Here's some stuff good to know as an developer for this app.

General

Setup

GitHub Codespaces / VS Code devcontainer

This was added with version 0.5.1.

• Open code spaces or the repository in VS Code to start the dev container
• The container will automatically install all dependencies and build the app
• Nextcloud will be installed from the master development branch and be available on a port exposed by the container

Column types

The tables can define their own structure by adding columns. Columns always have a column type and there are two layer of column types: First we have the main type this indicates a kind of technical category. There might be individual fields for this type that are explicit stored in the db. Second we have a subtype, that always belongs to a main type. This can make use of the individual fields from the main type, but don't have own properties (except for inline props stored in the main type props). This way we can have components that handle all subtypes for a main type, if possible. Or we need individual components for each subtype, depending on the use case.

Example would be the main type text, which has several subtypes as line, link or rich.

Mostly we use the combined type joined with a dash (-), so we get:

• text-long
• text-link
• ...

It is not necessary to have a subtype, for example for numbers number. The combined column type is also number in that case.

Following column-types are known:

• text-line
• text-long depricated since v0.5.0 and NC >= 26
• text-rich new since v0.5.0 and NC26
• text-link
• number
• number-stars
• number-progress
• selection
• selection-multi
• selection-check
• datetime
• datetime-date
• datetime-time

You can fetch all served column-types from the capabilities (since v0.5.0): curl http://admin:admin@nextcloud.local/ocs/v1.php/cloud/capabilities\?format\=json -H 'OCS-APIRequest: true' | jq .ocs.data.capabilities.tables.column_types

Formats

Date & time

The tables app uses a default internal format to store data. This look like the following (related to the php DateTime class):

• Date Y-m-d example '2023-12-24'
• Time H:i example '09:00'
• Datetime Y-m-d H:i example '2023-12-24 12:00'

You should use this format. For imports and we also support iso date string (example 2019-09-07T15:50:00+01:00).

Frontend

VUE - Folders and their usage

src

shared

Some components could be useful over the whole project. They don't have any dependencies.

components This components could also be in the NcVue library.

ncTable
- NcTable 
- partials
    - TableHeader
    - TableRow
    - TableCell* {Html, Progress, Stars, ...} [RENDER TABLE CELL]

ncBox | NcCard
- NcBox


**mixins**
*Generic mixins, could be injected where needed.*
- Formatting
- TablePermissions?

**modals**
*Generic modals, will be loaded everywhere.*
- DialogConfirmation

**API**
*API library to inject where needed.*
- Share
- Table
- ...

modules

These are business scopes that handle their business. Communication via eventBus.

**navigation**
- Navigation
- sections
    - TableList
    - Filter
    - Modals
- partials
    - NavigationTableItem

**main**
- TableContent
- sections
    - OptionsBar
    - TableViewMode -> use NcTable
    - BoxViewMode -> use NcBox
    - BlogViewMode
    - Modals [newRow -> FORM FOR TABLE CELL]
- partials
    - BlogItem

**sidebar**
- Sidebar
- sections
    - Sharing

**charts**
.. maybe one day

pages

Pages are the layout for the main content part.

• DefaultContentView
• Startpage

Store

• store {activeTableId, ...}
  • tables
  • rows
  • viewConfig

Manage:

• tables list
• active table ID
• rows for active table (view)
• view config

EventBus

Events:

• addedNewShare

General consideration

• Every store has its own loading state.