@conduction/nextcloud-vue 0.1.0-beta.6 → 0.1.0-beta.8

package/src/store/useObjectStore.js

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia'
-import { buildHeaders, buildQueryString, prefixUrl } from '../utils/headers.js'
+import { buildHeaders, buildQueryString, prefixUrl, capitalize } from '../utils/headers.js'
 import { parseResponseError, networkError, genericError } from '../utils/errors.js'
 import { extractId } from '../utils/id.js'
 
@@ -26,16 +26,6 @@ import { extractId } from '../utils/id.js'
 const DEFAULT_STORE_ID = 'conduction-objects'
 const DEFAULT_BASE_URL = '/apps/openregister/api/objects'
 
-/**
- * Capitalize the first letter of a string.
- *
- * @param {string} str Input string
- * @return {string} Capitalized string
- */
-function capitalize(str) {
-	return str.charAt(0).toUpperCase() + str.slice(1)
-}
-
 /**
  * Merge plugin state factories into a single state object.
  *
@@ -123,49 +113,49 @@ function baseState(baseUrl = DEFAULT_BASE_URL) {
 const baseGetters = {
 	/**
 	 * Get all registered object type slugs.
-	 * @param state
+	 * @param {object} state Pinia state
 	 * @return {string[]}
 	 */
 	objectTypes: (state) => Object.keys(state.objectTypeRegistry),
 
 	/**
 	 * Get the collection array for a type.
-	 * @param state
+	 * @param {object} state Pinia state
 	 * @return {Function} (type: string) => Array
 	 */
 	getCollection: (state) => (type) => state.collections[type] || [],
 
 	/**
 	 * Get a single cached object by type and ID.
-	 * @param state
+	 * @param {object} state Pinia state
 	 * @return {Function} (type: string, id: string) => object|null
 	 */
 	getObject: (state) => (type, id) => state.objects[type]?.[id] || null,
 
 	/**
 	 * Alias for getObject — check cache without fetching.
-	 * @param state
+	 * @param {object} state Pinia state
 	 * @return {Function} (type: string, id: string) => object|null
 	 */
 	getCachedObject: (state) => (type, id) => state.objects[type]?.[id] || null,
 
 	/**
 	 * Check if a type is currently loading.
-	 * @param state
+	 * @param {object} state Pinia state
 	 * @return {Function} (type: string) => boolean
 	 */
 	isLoading: (state) => (type) => state.loading[type] || false,
 
 	/**
 	 * Get the current error for a type.
-	 * @param state
+	 * @param {object} state Pinia state
 	 * @return {Function} (type: string) => ApiError|null
 	 */
 	getError: (state) => (type) => state.errors[type] || null,
 
 	/**
 	 * Get pagination state for a type.
-	 * @param state
+	 * @param {object} state Pinia state
 	 * @return {Function} (type: string) => {total, page, pages, limit}
 	 */
 	getPagination: (state) => (type) =>
@@ -173,28 +163,28 @@ const baseGetters = {
 
 	/**
 	 * Get the current search term for a type.
-	 * @param state
+	 * @param {object} state Pinia state
 	 * @return {Function} (type: string) => string
 	 */
 	getSearchTerm: (state) => (type) => state.searchTerms[type] || '',
 
 	/**
 	 * Get a cached schema for a type.
-	 * @param state
+	 * @param {object} state Pinia state
 	 * @return {Function} (type: string) => object|null
 	 */
 	getSchema: (state) => (type) => state.schemas[type] || null,
 
 	/**
 	 * Get a cached register for a type.
-	 * @param state
+	 * @param {object} state Pinia state
 	 * @return {Function} (type: string) => object|null
 	 */
 	getRegister: (state) => (type) => state.registers[type] || null,
 
 	/**
 	 * Get facet data for a type (CnIndexSidebar-compatible format).
-	 * @param state
+	 * @param {object} state Pinia state
 	 * @return {Function} (type: string) => object
 	 */
 	getFacets: (state) => (type) => state.facets[type] || {},
@@ -256,16 +246,20 @@ const baseActions = {
 	 * @param {string} slug The type slug to unregister
 	 */
 	unregisterObjectType(slug) {
-		delete this.objectTypeRegistry[slug]
-		delete this.collections[slug]
-		delete this.objects[slug]
-		delete this.loading[slug]
-		delete this.errors[slug]
-		delete this.pagination[slug]
-		delete this.searchTerms[slug]
-		delete this.schemas[slug]
-		delete this.registers[slug]
-		delete this.facets[slug]
+		const omit = (obj, key) => {
+			const { [key]: _, ...rest } = obj
+			return rest
+		}
+		this.objectTypeRegistry = omit(this.objectTypeRegistry, slug)
+		this.collections = omit(this.collections, slug)
+		this.objects = omit(this.objects, slug)
+		this.loading = omit(this.loading, slug)
+		this.errors = omit(this.errors, slug)
+		this.pagination = omit(this.pagination, slug)
+		this.searchTerms = omit(this.searchTerms, slug)
+		this.schemas = omit(this.schemas, slug)
+		this.registers = omit(this.registers, slug)
+		this.facets = omit(this.facets, slug)
 	},
 
 	/**
@@ -343,7 +337,7 @@ const baseActions = {
 
 		try {
 			const response = await fetch(
-				`/apps/openregister/api/schemas/${config.schema}`,
+				prefixUrl(`/apps/openregister/api/schemas/${config.schema}`),
 				{ method: 'GET', headers: buildHeaders() },
 			)
 
@@ -373,7 +367,7 @@ const baseActions = {
 
 		try {
 			const response = await fetch(
-				`/apps/openregister/api/registers/${config.register}`,
+				prefixUrl(`/apps/openregister/api/registers/${config.register}`),
 				{ method: 'GET', headers: buildHeaders() },
 			)
 
@@ -693,7 +687,7 @@ const baseActions = {
 	 *
 	 * @param {string} type The registered type slug
 	 * @param {string[]} ids Array of object IDs to resolve
-	 * @return {Promise<Object<string, object>>} Map of id -> object
+	 * @return {Promise<{[key: string]: object}>} Map of id -> object
 	 */
 	async resolveReferences(type, ids) {
 		if (!ids || ids.length === 0) return {}
@@ -795,7 +789,7 @@ function defineObjectStore(storeId, plugins = [], baseUrl = DEFAULT_BASE_URL) {
  * import { useObjectStore } from '@conduction/nextcloud-vue'
  * const store = useObjectStore()
  */
-export const useObjectStore = defineObjectStore(DEFAULT_STORE_ID)
+export const useObjectStore = defineObjectStore(DEFAULT_STORE_ID, [], prefixUrl(DEFAULT_BASE_URL))
 
 /**
  * Factory function to create an object store with a custom Pinia store ID

package/src/utils/getTheme.js

@@ -0,0 +1,9 @@
+export const getTheme = () => {
+	if (document.body.hasAttribute('data-theme-light')) {
+		return 'light'
+	}
+	if (document.body.hasAttribute('data-theme-default')) {
+		return window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark'
+	}
+	return 'dark'
+}

package/src/utils/headers.js

@@ -27,7 +27,7 @@ export function prefixUrl(path) {
  */
 export function buildHeaders(contentType = 'application/json') {
 	const headers = {
-		requesttoken: OC.requestToken,
+		requesttoken: typeof OC !== 'undefined' ? OC.requestToken : '',
 		'OCS-APIREQUEST': 'true',
 	}
 	if (contentType) {
@@ -36,11 +36,21 @@ export function buildHeaders(contentType = 'application/json') {
 	return headers
 }
 
+/**
+ * Capitalize the first letter of a string.
+ *
+ * @param {string} str Input string
+ * @return {string} Capitalized string
+ */
+export function capitalize(str) {
+	return str.charAt(0).toUpperCase() + str.slice(1)
+}
+
 /**
  * Build a query string from a params object.
  *
- * Handles array values by appending each item separately, plain object values
- * by JSON-serializing them, and skips null/undefined/empty values.
+ * Handles _order serialization (JSON.stringify for objects) and skips
+ * null/undefined/empty values.
  *
  * @param {object} params Key-value pairs for query parameters
  * @return {string} Query string including leading '?' or empty string

package/src/utils/index.js

@@ -1,3 +1,4 @@
 export { buildHeaders, buildQueryString } from './headers.js'
 export { parseResponseError, networkError, genericError } from './errors.js'
 export { columnsFromSchema, formatValue, filtersFromSchema, fieldsFromSchema } from './schema.js'
+export { filterWidgetsByVisibility, isWidgetVisible, getCurrentUserId, getCurrentUserGroups, resetVisibilityCache } from './widgetVisibility.js'

package/src/utils/schema.js

@@ -116,7 +116,7 @@ export function columnsFromSchema(schema, options = {}) {
  * @param {*} value The raw value
  * @param {object} [property] The schema property definition `{ type, format, enum, items }`
  * @param {object} [options] Formatting options
- * @param {number} [options.truncate=100] Maximum string length before truncation
+ * @param {number} [options.truncate] Maximum string length before truncation
  * @return {string} Formatted display string
  */
 export function formatValue(value, property = {}, options = {}) {
@@ -301,7 +301,7 @@ function resolveWidget(prop) {
  * @param {string[]} [options.exclude] Property keys to exclude
  * @param {string[]} [options.include] Property keys to include (whitelist mode)
  * @param {object} [options.overrides] Per-key field overrides, e.g. `{ status: { widget: 'select' } }`
- * @param {boolean} [options.includeReadOnly=false] Whether to include readOnly properties
+ * @param {boolean} [options.includeReadOnly] Whether to include readOnly properties
  * @return {Array<{key: string, label: string, description: string, type: string, format: string|null, widget: string, required: boolean, readOnly: boolean, default: *, enum: Array|null, items: object|null, validation: object, order: number}>}
  */
 export function fieldsFromSchema(schema, options = {}) {
@@ -383,7 +383,7 @@ export function filtersFromSchema(schema) {
 	}
 
 	return Object.entries(schema.properties)
-		.filter(([key, prop]) => {
+		.filter(([, prop]) => {
 			if (prop.facetable !== true) return false
 			return true
 		})

package/src/utils/widgetVisibility.js

@@ -0,0 +1,162 @@
+import axios from '@nextcloud/axios'
+import { generateOcsUrl } from '@nextcloud/router'
+
+/**
+ * Cached user groups — fetched once per session and reused.
+ * @type {{ userId: string|null, groups: string[]|null, promise: Promise|null }}
+ */
+const _cache = {
+	userId: null,
+	groups: null,
+	promise: null,
+}
+
+/**
+ * Get the current Nextcloud user ID from OC.currentUser.
+ *
+ * @return {string|null} The current user ID, or null if not logged in
+ */
+export function getCurrentUserId() {
+	return window.OC?.currentUser?.uid
+		|| window.OC?.currentUser
+		|| null
+}
+
+/**
+ * Fetch the current user's Nextcloud groups. Results are cached so the
+ * OCS API is only called once per page load.
+ *
+ * @return {Promise<string[]>} Array of group IDs the current user belongs to
+ */
+export async function getCurrentUserGroups() {
+	const userId = getCurrentUserId()
+	if (!userId) {
+		return []
+	}
+
+	// Return cached result if we already fetched for this user
+	if (_cache.userId === userId && _cache.groups !== null) {
+		return _cache.groups
+	}
+
+	// If a fetch is already in progress for this user, await it
+	if (_cache.userId === userId && _cache.promise) {
+		return _cache.promise
+	}
+
+	_cache.userId = userId
+	_cache.promise = _fetchGroups(userId)
+
+	try {
+		_cache.groups = await _cache.promise
+	} catch {
+		_cache.groups = []
+	} finally {
+		_cache.promise = null
+	}
+
+	return _cache.groups
+}
+
+/**
+ * Internal: fetch groups from OCS API.
+ *
+ * @param {string} userId The user ID to look up
+ * @return {Promise<string[]>} Array of group IDs
+ */
+async function _fetchGroups(userId) {
+	try {
+		const url = generateOcsUrl('/cloud/users/{userId}/groups', { userId })
+		const response = await axios.get(url)
+		const groups = response.data?.ocs?.data?.groups || []
+		return groups
+	} catch (error) {
+		console.error('[widgetVisibility] Failed to fetch user groups:', error)
+		return []
+	}
+}
+
+/**
+ * Check whether a single widget is visible to the current user based on
+ * its `visibility` configuration.
+ *
+ * Visibility rules:
+ * - No `visibility` property -> visible to everyone
+ * - `visibility.users` contains the current user ID -> visible
+ * - `visibility.groups` overlaps with the user's groups -> visible
+ * - Both `users` and `groups` are specified -> either match grants access (OR logic)
+ * - Both are empty arrays -> visible to everyone
+ *
+ * @param {object} widget Widget definition object
+ * @param {object} [widget.visibility] Optional visibility configuration
+ * @param {string[]} [widget.visibility.users] User IDs who can see this widget
+ * @param {string[]} [widget.visibility.groups] Group names who can see this widget
+ * @param {string|null} userId Current user ID
+ * @param {string[]} userGroups Current user's group memberships
+ * @return {boolean} Whether the widget should be visible
+ */
+export function isWidgetVisible(widget, userId, userGroups) {
+	const visibility = widget?.visibility
+	if (!visibility) {
+		return true
+	}
+
+	const allowedUsers = visibility.users || []
+	const allowedGroups = visibility.groups || []
+
+	// If both are empty, visible to everyone
+	if (allowedUsers.length === 0 && allowedGroups.length === 0) {
+		return true
+	}
+
+	// Check user match
+	if (allowedUsers.length > 0 && userId && allowedUsers.includes(userId)) {
+		return true
+	}
+
+	// Check group match
+	if (allowedGroups.length > 0 && userGroups.length > 0) {
+		const hasGroupMatch = allowedGroups.some(group => userGroups.includes(group))
+		if (hasGroupMatch) {
+			return true
+		}
+	}
+
+	return false
+}
+
+/**
+ * Filter an array of widget definitions by visibility for the current user.
+ *
+ * This is an async function because it may need to fetch the user's groups
+ * from the OCS API (cached after first call).
+ *
+ * @param {Array} widgets Array of widget definition objects
+ * @return {Promise<Array>} Filtered array of visible widgets
+ */
+export async function filterWidgetsByVisibility(widgets) {
+	if (!widgets || widgets.length === 0) {
+		return []
+	}
+
+	// Quick path: if no widgets have visibility config, return all
+	const hasVisibilityConfig = widgets.some(w => w.visibility)
+	if (!hasVisibilityConfig) {
+		return widgets
+	}
+
+	const userId = getCurrentUserId()
+	const userGroups = await getCurrentUserGroups()
+
+	return widgets.filter(widget => isWidgetVisible(widget, userId, userGroups))
+}
+
+/**
+ * Reset the internal groups cache. Useful for testing or when user
+ * context changes.
+ */
+export function resetVisibilityCache() {
+	_cache.userId = null
+	_cache.groups = null
+	_cache.promise = null
+}

package/src/components/CnObjectCard/eslint-setup.md

@@ -1,235 +0,0 @@
-# ESLint Setup — How Red Lines and Auto-fix Work
-
-Exact files, exact settings, no guessing. This is the working setup in OpenRegister.
-
----
-
-## Required VSCode Extension
-
-**`dbaeumer.vscode-eslint`** (version 3.0.24)
-
-This is the only extension involved in linting and formatting `.vue` and `.js` files. It does two things:
-1. Runs ESLint in the background and draws red/yellow underlines (diagnostics)
-2. Acts as the formatter — fixes the code when you save
-
----
-
-## The 6 Files That Matter
-
-### 1. `.vscode/settings.json`
-
-Tells VSCode to use ESLint as the formatter for all files (including `.vue`) and to run it on save.
-
-```json
-{
-    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
-    "editor.formatOnSave": true,
-    "eslint.format.enable": true,
-
-    "[javascript]": {
-        "editor.defaultFormatter": "dbaeumer.vscode-eslint"
-    },
-    "[css]": {
-        "editor.defaultFormatter": "esbenp.prettier-vscode"
-    },
-    "[php]": {
-        "editor.defaultFormatter": "DEVSENSE.phptools-vscode"
-    }
-}
-```
-
-- No `[vue]` block exists. Vue falls back to the top-level `editor.defaultFormatter` = ESLint.
-- `eslint.format.enable: true` is what makes ESLint able to **fix** on save, not just show errors.
-- `editor.formatOnSave: true` triggers that fix every Ctrl+S.
-
----
-
-### 2. `eslint.config.js`
-
-The ESLint flat config entry point. The extension finds this automatically at the project root.
-
-```js
-const { defineConfig } = require('@eslint/config-helpers')
-const js = require('@eslint/js')
-const { FlatCompat } = require('@eslint/eslintrc')
-
-const compat = new FlatCompat({
-    baseDirectory: __dirname,
-    recommendedConfig: js.configs.recommended,
-    allConfig: js.configs.all,
-})
-
-module.exports = defineConfig([{
-    extends: compat.extends('@nextcloud'),
-
-    settings: {
-        'import/resolver': {
-            alias: {
-                map: [
-                    ['@', './src'],
-                    ['@floating-ui/dom-actual', './node_modules/@floating-ui/dom'],
-                    ['@conduction/nextcloud-vue', '../nextcloud-vue/src'],
-                ],
-                extensions: ['.js', '.ts', '.vue', '.json', '.css'],
-            },
-        },
-    },
-
-    rules: {
-        'no-unused-vars': ['error', { varsIgnorePattern: '^(t|n)$', argsIgnorePattern: '^_' }],
-        'jsdoc/require-jsdoc': 'off',
-        'vue/first-attribute-linebreak': 'off',
-        '@typescript-eslint/no-explicit-any': 'off',
-        'n/no-missing-import': 'off',
-        'import/namespace': 'off',
-        'import/default': 'off',
-        'import/no-named-as-default': 'off',
-        'import/no-named-as-default-member': 'off',
-    },
-}])
-```
-
-- Uses **flat config** format (ESLint 8.57.0).
-- Uses `FlatCompat` to bridge `@nextcloud/eslint-config` which is still in legacy format.
-- Works with `require()` because `package.json` has **no** `"type": "module"`.
-
----
-
-### 3. `.babelrc`
-
-The Babel config used by `@babel/eslint-parser` to parse `.js` and `.vue` `<script>` blocks. This is a **project-root** `.babelrc` file, not a `babel.config.js`.
-
-```json
-{
-  "presets": [
-    "@babel/preset-env",
-    "@babel/preset-typescript"
-  ],
-  "plugins": [
-    "@babel/plugin-transform-typescript"
-  ]
-}
-```
-
-- `@babel/preset-env` — handles modern JS syntax without a `targets` restriction, so it supports ES module syntax (`export default`, `import`, etc.).
-- `@babel/preset-typescript` + `@babel/plugin-transform-typescript` — allows TypeScript syntax in `.vue` `<script lang="ts">` blocks.
-- No `"type": "module"` in `package.json` means this `.babelrc` is loaded as JSON without any module format issues.
-
----
-
-### 4. `node_modules/@nextcloud/eslint-config/index.js` (v8.4.1)
-
-Loaded by `compat.extends('@nextcloud')`. Combines three parts:
-
-```js
-module.exports = {
-    ...base,           // parts/base.js
-    overrides: [
-        { ...typescriptOverrides },  // parts/typescript.js
-        { ...vueOverrides },         // parts/vue.js
-    ],
-}
-```
-
----
-
-### 5. `node_modules/@nextcloud/eslint-config/parts/base.js`
-
-Applies to all files. Contains the indent rules that cause **red lines in `<script>` blocks**.
-
-```js
-parser: '@babel/eslint-parser',
-parserOptions: {
-    requireConfigFile: false,  // won't crash if no babel config — but .babelrc IS present and IS used
-},
-
-rules: {
-    indent: ['error', 'tab'],                              // red line: spaces used instead of tabs
-    'no-tabs': ['error', { allowIndentationTabs: true }],  // red line: tabs used outside indentation
-    'no-mixed-spaces-and-tabs': ['error', 'smart-tabs'],   // red line: mixed
-    ...
-}
-```
-
-`'error'` = **red underline**. `'warn'` = yellow. Auto-fix on save corrects all of these.
-
----
-
-### 6. `node_modules/@nextcloud/eslint-config/parts/vue.js`
-
-Applies **only** to `**/*.vue` files. Contains the indent rule that causes **red lines in `<template>` blocks**.
-
-```js
-files: ['**/*.vue'],
-parser: 'vue-eslint-parser',        // parses the full .vue file structure
-parserOptions: {
-    parser: '@babel/eslint-parser', // delegates <script> parsing to Babel (picks up .babelrc)
-},
-extends: ['plugin:vue/recommended'],
-
-rules: {
-    'vue/html-indent': ['error', 'tab'],  // red line: wrong indentation in <template>
-    'vue/component-name-in-template-casing': ['error', 'PascalCase'],
-    'vue/html-closing-bracket-spacing': 'error',
-    'vue/html-closing-bracket-newline': ['error', { multiline: 'never' }],
-    'vue/max-attributes-per-line': ['error', { singleline: 3, multiline: 1 }],
-    'vue/multi-word-component-names': ['off'],
-    ...
-}
-```
-
-- `vue-eslint-parser` is what lets ESLint understand `<template>`, `<script>`, `<style>` as separate blocks.
-- `vue/html-indent: ['error', 'tab']` → red line on wrong indentation inside `<template>`.
-- `indent: ['error', 'tab']` from base.js → red line on wrong indentation inside `<script>`.
-
----
-
-## The Full Chain
-
-```
-You open a .vue file in VSCode
-        │
-        ▼
-dbaeumer.vscode-eslint extension starts
-  reads .vscode/settings.json
-  → editor.defaultFormatter = ESLint for .vue (no [vue] override, falls back to global)
-  → eslint.format.enable = true  (ESLint can fix, not just report)
-        │
-        ▼
-ESLint loads eslint.config.js
-  → FlatCompat bridges @nextcloud/eslint-config (legacy → flat)
-  → index.js loads base.js + vue.js
-        │
-        ▼
-For <template> block:
-  vue-eslint-parser handles the HTML
-  Rule: vue/html-indent ['error', 'tab']
-  Wrong indent → RED UNDERLINE
-
-For <script> block:
-  @babel/eslint-parser handles the JS
-  Picks up .babelrc (preset-env + preset-typescript)
-  Rule: indent ['error', 'tab']
-  Wrong indent → RED UNDERLINE
-        │
-        ▼
-You press Ctrl+S
-  editor.formatOnSave triggers ESLint formatter
-  ESLint runs --fix internally
-  → replaces wrong indentation with tabs in both blocks
-  → fixes bracket spacing, trailing commas, etc.
-  File saved with corrected formatting
-```
-
----
-
-## Key Reason This Works and nextcloud-vue Does Not
-
-| | OpenRegister | nextcloud-vue |
-|---|---|---|
-| `package.json` `"type"` field | not set (defaults to CommonJS) | `"type": "module"` |
-| `eslint.config.js` uses `require()` | works fine | **crashes** — `require` not defined in ES module scope |
-| Babel config file | `.babelrc` (JSON, no module issues) | `babel.config.js` (treated as ESM, crashes Babel sync load) |
-| ESLint server in VSCode | starts, lints, shows red lines | hangs on startup, times out, shows nothing |
-
-The fix for nextcloud-vue is to rename both files to `.cjs` so Node treats them as CommonJS regardless of `"type": "module"`, and ensure `babel.config.cjs` uses `module.exports` (not `export default`) with `sourceType: 'unambiguous'` at the top level.