@conduction/nextcloud-vue 0.1.0-beta.1 → 0.1.0-beta.11

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/CnDetailViewLayout/CnDetailViewLayout.vue

@@ -1,88 +0,0 @@
-<template>
-	<div class="cn-detail-layout">
-		<!-- Header -->
-		<div class="cn-detail-layout__header">
-			<NcButton @click="$emit('back')">
-				<template #icon>
-					<ArrowLeft :size="20" />
-				</template>
-				{{ backLabel }}
-			</NcButton>
-
-			<h2 class="cn-detail-layout__title">
-				<slot name="title">{{ title }}</slot>
-			</h2>
-
-			<div class="cn-detail-layout__actions">
-				<slot name="actions" />
-			</div>
-		</div>
-
-		<!-- Loading state -->
-		<div v-if="loading" class="cn-loading-container">
-			<NcLoadingIcon :size="32" />
-		</div>
-
-		<!-- Main content -->
-		<div v-else class="cn-detail-layout__content">
-			<slot />
-		</div>
-
-		<!-- Delete confirmation dialog -->
-		<slot name="dialogs" />
-	</div>
-</template>
-
-<script>
-import { NcButton, NcLoadingIcon } from '@nextcloud/vue'
-import ArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'
-
-/**
- * CnDetailViewLayout — Detail page layout with back button, title, actions, and content.
- *
- * Provides the standard structure for detail/edit views: back navigation,
- * page title, action buttons, and a content area. Supports loading state
- * and a dialogs slot for modals.
- *
- * @example
- * <CnDetailViewLayout
- *   title="Client: Acme Corp"
- *   :loading="isLoading"
- *   @back="goBack">
- *   <template #actions>
- *     <NcButton @click="edit">Edit</NcButton>
- *     <NcButton type="error" @click="confirmDelete">Delete</NcButton>
- *   </template>
- *   <div class="cn-detail-grid">
- *     <div class="cn-detail-item">...</div>
- *   </div>
- * </CnDetailViewLayout>
- */
-export default {
-	name: 'CnDetailViewLayout',
-
-	components: {
-		NcButton,
-		NcLoadingIcon,
-		ArrowLeft,
-	},
-
-	props: {
-		/** Page title */
-		title: {
-			type: String,
-			default: '',
-		},
-		/** Whether data is loading */
-		loading: {
-			type: Boolean,
-			default: false,
-		},
-		/** Back button label */
-		backLabel: {
-			type: String,
-			default: 'Back',
-		},
-	},
-}
-</script>

package/src/components/CnDetailViewLayout/index.js

@@ -1 +0,0 @@
-export { default as CnDetailViewLayout } from './CnDetailViewLayout.vue'

package/src/components/CnEmptyState/CnEmptyState.vue

@@ -1,78 +0,0 @@
-<template>
-	<NcEmptyContent :name="title" :description="description">
-		<template #icon>
-			<slot name="icon">
-				<component :is="icon" v-if="icon" :size="64" />
-			</slot>
-		</template>
-		<template v-if="actionLabel" #action>
-			<slot name="action">
-				<NcButton :type="actionType" @click="$emit('action')">
-					{{ actionLabel }}
-				</NcButton>
-			</slot>
-		</template>
-	</NcEmptyContent>
-</template>
-
-<script>
-import { NcEmptyContent, NcButton } from '@nextcloud/vue'
-
-/**
- * CnEmptyState — Consistent empty state display wrapping NcEmptyContent.
- *
- * Provides a unified empty state pattern with icon, title, description,
- * and optional action button. Used across all list views.
- *
- * @example
- * <CnEmptyState
- *   title="No clients yet"
- *   description="Create your first client to get started"
- *   action-label="New Client"
- *   @action="createClient" />
- *
- * @example
- * <!-- With custom icon -->
- * <CnEmptyState title="No results">
- *   <template #icon>
- *     <Magnify :size="64" />
- *   </template>
- * </CnEmptyState>
- */
-export default {
-	name: 'CnEmptyState',
-
-	components: {
-		NcEmptyContent,
-		NcButton,
-	},
-
-	props: {
-		/** Main title text */
-		title: {
-			type: String,
-			required: true,
-		},
-		/** Description text below the title */
-		description: {
-			type: String,
-			default: '',
-		},
-		/** Vue component for the icon (e.g., imported material design icon) */
-		icon: {
-			type: [Object, null],
-			default: null,
-		},
-		/** Action button label. If empty, no button is shown. */
-		actionLabel: {
-			type: String,
-			default: '',
-		},
-		/** NcButton type for the action button */
-		actionType: {
-			type: String,
-			default: 'primary',
-		},
-	},
-}
-</script>

package/src/components/CnEmptyState/index.js

@@ -1 +0,0 @@
-export { default as CnEmptyState } from './CnEmptyState.vue'

package/src/components/CnListViewLayout/CnListViewLayout.vue

@@ -1,80 +0,0 @@
-<template>
-	<div class="cn-list-layout">
-		<!-- Header -->
-		<div class="cn-list-layout__header">
-			<div class="cn-list-layout__title">
-				<h2>{{ title }}</h2>
-				<span v-if="totalItems > 0" class="cn-list-layout__count">({{ totalItems }})</span>
-			</div>
-			<div class="cn-list-layout__actions">
-				<slot name="actions" />
-			</div>
-		</div>
-
-		<!-- Filters slot -->
-		<slot name="filters" />
-
-		<!-- Loading state -->
-		<div v-if="loading" class="cn-loading-container">
-			<NcLoadingIcon :size="32" />
-		</div>
-
-		<!-- Main content (table area) -->
-		<template v-else>
-			<slot />
-		</template>
-
-		<!-- Pagination slot -->
-		<slot name="pagination" />
-	</div>
-</template>
-
-<script>
-import { NcLoadingIcon } from '@nextcloud/vue'
-
-/**
- * CnListViewLayout — Full list page layout wrapping header, filters, table, and pagination.
- *
- * Provides the standard page structure used by every list view: a header with
- * title + action buttons, a filter/search area, the main content (table), and pagination.
- *
- * @example
- * <CnListViewLayout title="Clients" :total-items="clients.length" :loading="isLoading">
- *   <template #actions>
- *     <NcButton type="primary" @click="createClient">New client</NcButton>
- *   </template>
- *   <template #filters>
- *     <CnFilterBar ... />
- *   </template>
- *   <CnDataTable :columns="columns" :rows="clients" />
- *   <template #pagination>
- *     <CnPagination ... />
- *   </template>
- * </CnListViewLayout>
- */
-export default {
-	name: 'CnListViewLayout',
-
-	components: {
-		NcLoadingIcon,
-	},
-
-	props: {
-		/** Page title */
-		title: {
-			type: String,
-			required: true,
-		},
-		/** Total items count (shown next to title) */
-		totalItems: {
-			type: Number,
-			default: 0,
-		},
-		/** Whether data is loading */
-		loading: {
-			type: Boolean,
-			default: false,
-		},
-	},
-}
-</script>

package/src/components/CnListViewLayout/index.js

@@ -1 +0,0 @@
-export { default as CnListViewLayout } from './CnListViewLayout.vue'

package/src/components/CnViewModeToggle/CnViewModeToggle.vue

@@ -1,77 +0,0 @@
-<template>
-	<div class="cn-view-mode-toggle" role="group" :aria-label="ariaLabel">
-		<NcButton
-			:type="value === 'cards' ? 'primary' : 'secondary'"
-			:aria-pressed="String(value === 'cards')"
-			@click="$emit('input', 'cards')">
-			<template #icon>
-				<ViewGrid :size="20" />
-			</template>
-			{{ cardsLabel }}
-		</NcButton>
-		<NcButton
-			:type="value === 'table' ? 'primary' : 'secondary'"
-			:aria-pressed="String(value === 'table')"
-			@click="$emit('input', 'table')">
-			<template #icon>
-				<ViewList :size="20" />
-			</template>
-			{{ tableLabel }}
-		</NcButton>
-	</div>
-</template>
-
-<script>
-import { NcButton } from '@nextcloud/vue'
-import ViewGrid from 'vue-material-design-icons/ViewGrid.vue'
-import ViewList from 'vue-material-design-icons/ViewList.vue'
-
-/**
- * CnViewModeToggle — Cards/Table view mode toggle.
- *
- * @example
- * <CnViewModeToggle v-model="viewMode" />
- */
-export default {
-	name: 'CnViewModeToggle',
-
-	components: {
-		NcButton,
-		ViewGrid,
-		ViewList,
-	},
-
-	props: {
-		/** Current view mode: 'cards' or 'table' */
-		value: {
-			type: String,
-			default: 'table',
-			validator: (v) => ['cards', 'table'].includes(v),
-		},
-		/** Label for cards button */
-		cardsLabel: {
-			type: String,
-			default: 'Cards',
-		},
-		/** Label for table button */
-		tableLabel: {
-			type: String,
-			default: 'Table',
-		},
-		/** Aria label for the toggle group */
-		ariaLabel: {
-			type: String,
-			default: 'View mode',
-		},
-	},
-}
-</script>
-
-<style scoped>
-.cn-view-mode-toggle {
-	display: inline-flex;
-	gap: 0;
-	border-radius: var(--border-radius-pill, 20px);
-	overflow: hidden;
-}
-</style>

package/src/components/CnViewModeToggle/index.js

@@ -1 +0,0 @@
-export { default as CnViewModeToggle } from './CnViewModeToggle.vue'