@conduction/nextcloud-vue 0.1.0-beta.3 → 0.1.0-beta.5

package/src/components/CnWidgetWrapper/CnWidgetWrapper.vue

@@ -0,0 +1,211 @@
+<!--
+  CnWidgetWrapper — Container shell around a dashboard widget.
+
+  Provides header (icon + title), scrollable content area, and optional
+  footer with action buttons. Applies style configuration for borders,
+  backgrounds, and padding.
+-->
+<template>
+	<div class="cn-widget-wrapper" :style="wrapperStyles">
+		<!-- Header -->
+		<div v-if="showTitle" class="cn-widget-wrapper__header">
+			<div class="cn-widget-wrapper__header-left">
+				<img
+					v-if="iconUrl"
+					:src="iconUrl"
+					:alt="displayTitle"
+					class="cn-widget-wrapper__icon">
+				<span
+					v-else-if="iconClass"
+					:class="iconClass"
+					class="cn-widget-wrapper__icon" />
+				<h3 class="cn-widget-wrapper__title">
+					{{ displayTitle }}
+				</h3>
+			</div>
+			<div class="cn-widget-wrapper__actions">
+				<slot name="header-actions" />
+			</div>
+		</div>
+
+		<!-- Content -->
+		<div class="cn-widget-wrapper__content">
+			<slot />
+		</div>
+
+		<!-- Footer -->
+		<div v-if="$slots.footer || (buttons && buttons.length > 0)" class="cn-widget-wrapper__footer">
+			<slot name="footer">
+				<a
+					v-for="button in buttons"
+					:key="button.link"
+					:href="button.link"
+					class="cn-widget-wrapper__footer-link">
+					{{ button.text }}
+				</a>
+			</slot>
+		</div>
+	</div>
+</template>
+
+<script>
+/**
+ * CnWidgetWrapper — Widget container with header, content, and footer.
+ *
+ * @example
+ * <CnWidgetWrapper title="My Cases" :icon-url="casesIconUrl">
+ *   <MyCasesChart :data="chartData" />
+ * </CnWidgetWrapper>
+ *
+ * @example With NC widget object
+ * <CnWidgetWrapper
+ *   :title="widget.title"
+ *   :icon-url="widget.iconUrl"
+ *   :icon-class="widget.iconClass"
+ *   :buttons="widget.buttons">
+ *   <CnWidgetRenderer :widget="widget" />
+ * </CnWidgetWrapper>
+ */
+export default {
+	name: 'CnWidgetWrapper',
+
+	props: {
+		/** Widget title */
+		title: {
+			type: String,
+			default: 'Widget',
+		},
+		/** Whether to show the header with title */
+		showTitle: {
+			type: Boolean,
+			default: true,
+		},
+		/** Icon URL (image) */
+		iconUrl: {
+			type: String,
+			default: null,
+		},
+		/** Icon CSS class (e.g., Nextcloud icon class) */
+		iconClass: {
+			type: String,
+			default: null,
+		},
+		/** Footer action buttons: [{ text, link }] */
+		buttons: {
+			type: Array,
+			default: () => [],
+		},
+		/**
+		 * Style configuration for the wrapper.
+		 * @type {{ backgroundColor?: string, borderStyle?: string, borderWidth?: number, borderColor?: string, borderRadius?: number, padding?: { top: number, right: number, bottom: number, left: number } }}
+		 */
+		styleConfig: {
+			type: Object,
+			default: () => ({}),
+		},
+	},
+
+	computed: {
+		displayTitle() {
+			return this.title || 'Widget'
+		},
+
+		wrapperStyles() {
+			const styles = {}
+
+			if (this.styleConfig.backgroundColor) {
+				styles.backgroundColor = this.styleConfig.backgroundColor
+			}
+
+			if (this.styleConfig.borderStyle && this.styleConfig.borderStyle !== 'none') {
+				styles.border = `${this.styleConfig.borderWidth || 1}px ${this.styleConfig.borderStyle} ${this.styleConfig.borderColor || 'var(--color-border)'}`
+			}
+
+			if (this.styleConfig.borderRadius !== undefined) {
+				styles.borderRadius = `${this.styleConfig.borderRadius}px`
+			}
+
+			if (this.styleConfig.padding) {
+				const p = this.styleConfig.padding
+				styles.padding = `${p.top || 0}px ${p.right || 0}px ${p.bottom || 0}px ${p.left || 0}px`
+			}
+
+			return styles
+		},
+	},
+}
+</script>
+
+<style scoped>
+.cn-widget-wrapper {
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	background: var(--color-main-background);
+	border: 1px solid var(--color-border);
+	overflow: hidden;
+}
+
+.cn-widget-wrapper__header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 12px 16px;
+	border-bottom: 1px solid var(--color-border);
+	flex-shrink: 0;
+}
+
+.cn-widget-wrapper__header-left {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	min-width: 0;
+}
+
+.cn-widget-wrapper__icon {
+	width: 24px;
+	height: 24px;
+	flex-shrink: 0;
+}
+
+.cn-widget-wrapper__title {
+	font-weight: 600;
+	font-size: 14px;
+	margin: 0;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.cn-widget-wrapper__content {
+	flex: 1;
+	overflow: auto;
+	min-height: 0;
+	padding: 16px;
+}
+
+.cn-widget-wrapper__actions {
+	display: flex;
+	gap: 4px;
+	flex-shrink: 0;
+}
+
+.cn-widget-wrapper__footer {
+	display: flex;
+	justify-content: flex-end;
+	gap: 8px;
+	padding: 8px 16px;
+	border-top: 1px solid var(--color-border);
+	flex-shrink: 0;
+}
+
+.cn-widget-wrapper__footer-link {
+	font-size: 13px;
+	color: var(--color-primary-element);
+	text-decoration: none;
+}
+
+.cn-widget-wrapper__footer-link:hover {
+	text-decoration: underline;
+}
+</style>

package/src/components/CnWidgetWrapper/index.js

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

package/src/components/index.js

@@ -1,29 +1,43 @@
-export { CnDataTable } from './CnDataTable/index.js'
-export { CnFilterBar } from './CnFilterBar/index.js'
-export { CnStatusBadge } from './CnStatusBadge/index.js'
-export { CnPagination } from './CnPagination/index.js'
-export { CnSettingsCard } from './CnSettingsCard/index.js'
-export { CnSettingsSection } from './CnSettingsSection/index.js'
-export { CnStatsBlock } from './CnStatsBlock/index.js'
-export { CnConfigurationCard } from './CnConfigurationCard/index.js'
-export { CnVersionInfoCard } from './CnVersionInfoCard/index.js'
-export { CnCellRenderer } from './CnCellRenderer/index.js'
-export { CnObjectCard } from './CnObjectCard/index.js'
-export { CnCardGrid } from './CnCardGrid/index.js'
-export { CnFacetSidebar } from './CnFacetSidebar/index.js'
-export { CnRowActions } from './CnRowActions/index.js'
-export { CnIndexPage } from './CnIndexPage/index.js'
-export { CnMassActionBar } from './CnMassActionBar/index.js'
-export { CnDeleteDialog } from './CnDeleteDialog/index.js'
-export { CnCopyDialog } from './CnCopyDialog/index.js'
-export { CnFormDialog } from './CnFormDialog/index.js'
-export { CnMassDeleteDialog } from './CnMassDeleteDialog/index.js'
-export { CnMassCopyDialog } from './CnMassCopyDialog/index.js'
-export { CnKpiGrid } from './CnKpiGrid/index.js'
-export { CnMassExportDialog } from './CnMassExportDialog/index.js'
-export { CnMassImportDialog } from './CnMassImportDialog/index.js'
-export { CnIndexSidebar } from './CnIndexSidebar/index.js'
-export { CnRegisterMapping } from './CnRegisterMapping/index.js'
-export { CnIcon, ICON_MAP, registerIcons } from './CnIcon/index.js'
-export { CnPageHeader } from './CnPageHeader/index.js'
-export { CnActionsBar } from './CnActionsBar/index.js'
+export { CnDataTable } from './CnDataTable/index.js'
+export { CnFilterBar } from './CnFilterBar/index.js'
+export { CnStatusBadge } from './CnStatusBadge/index.js'
+export { CnPagination } from './CnPagination/index.js'
+export { CnSettingsCard } from './CnSettingsCard/index.js'
+export { CnSettingsSection } from './CnSettingsSection/index.js'
+export { CnStatsBlock } from './CnStatsBlock/index.js'
+export { CnConfigurationCard } from './CnConfigurationCard/index.js'
+export { CnVersionInfoCard } from './CnVersionInfoCard/index.js'
+export { CnCellRenderer } from './CnCellRenderer/index.js'
+export { CnObjectCard } from './CnObjectCard/index.js'
+export { CnCardGrid } from './CnCardGrid/index.js'
+export { CnFacetSidebar } from './CnFacetSidebar/index.js'
+export { CnRowActions } from './CnRowActions/index.js'
+export { CnIndexPage } from './CnIndexPage/index.js'
+export { CnMassActionBar } from './CnMassActionBar/index.js'
+export { CnDeleteDialog } from './CnDeleteDialog/index.js'
+export { CnCopyDialog } from './CnCopyDialog/index.js'
+export { CnFormDialog } from './CnFormDialog/index.js'
+export { CnAdvancedFormDialog } from './CnAdvancedFormDialog/index.js'
+export { CnMassDeleteDialog } from './CnMassDeleteDialog/index.js'
+export { CnMassCopyDialog } from './CnMassCopyDialog/index.js'
+export { CnKpiGrid } from './CnKpiGrid/index.js'
+export { CnMassExportDialog } from './CnMassExportDialog/index.js'
+export { CnMassImportDialog } from './CnMassImportDialog/index.js'
+export { CnIndexSidebar } from './CnIndexSidebar/index.js'
+export { CnRegisterMapping } from './CnRegisterMapping/index.js'
+export { CnIcon, ICON_MAP, registerIcons } from './CnIcon/index.js'
+export { CnPageHeader } from './CnPageHeader/index.js'
+export { CnActionsBar } from './CnActionsBar/index.js'
+export { CnDetailPage } from './CnDetailPage/index.js'
+export { CnDashboardPage } from './CnDashboardPage/index.js'
+export { CnDashboardGrid } from './CnDashboardGrid/index.js'
+export { CnWidgetWrapper } from './CnWidgetWrapper/index.js'
+export { CnWidgetRenderer } from './CnWidgetRenderer/index.js'
+export { CnTileWidget } from './CnTileWidget/index.js'
+export { CnItemCard } from './CnItemCard/index.js'
+export { CnSchemaFormDialog } from './CnSchemaFormDialog/index.js'
+export { CnTabbedFormDialog } from './CnTabbedFormDialog/index.js'
+export { CnTimelineStages } from './CnTimelineStages/index.js'
+export { CnUserActionMenu } from './CnUserActionMenu/index.js'
+export { CnNotesCard } from './CnNotesCard/index.js'
+export { CnTasksCard } from './CnTasksCard/index.js'

package/src/composables/index.js

@@ -1,3 +1,4 @@
-export { useListView } from './useListView.js'
-export { useDetailView } from './useDetailView.js'
-export { useSubResource } from './useSubResource.js'
+export { useListView } from './useListView.js'
+export { useDetailView } from './useDetailView.js'
+export { useSubResource } from './useSubResource.js'
+export { useDashboardView } from './useDashboardView.js'

package/src/composables/useDashboardView.js

@@ -0,0 +1,240 @@
+import { ref, computed, onMounted } from 'vue'
+import axios from '@nextcloud/axios'
+import { generateOcsUrl } from '@nextcloud/router'
+
+/**
+ * Composable for managing dashboard view state.
+ *
+ * Handles widget definition loading (including NC Dashboard API widgets),
+ * layout management, and edit mode. Apps provide their own widget
+ * definitions and persist layouts however they choose (app config,
+ * OpenRegister objects, etc.).
+ *
+ * @param {object} [options] Configuration options
+ * @param {Array} [options.widgets=[]] Static widget definitions from the app
+ * @param {Array} [options.defaultLayout=[]] Default layout if no saved layout exists
+ * @param {Function} [options.loadLayout] Async function that returns saved layout array, or null
+ * @param {Function} [options.saveLayout] Async function that persists layout: (layout) => Promise
+ * @param {boolean} [options.includeNcWidgets=false] Whether to also load NC Dashboard API widgets
+ * @param {number} [options.columns=12] Grid columns
+ * @return {object} Reactive state and methods for CnDashboardPage
+ *
+ * @example Basic usage with static widgets
+ * const { widgets, layout, loading, onLayoutChange } = useDashboardView({
+ *   widgets: [
+ *     { id: 'kpis', title: 'KPIs', type: 'custom' },
+ *     { id: 'chart', title: 'Status Chart', type: 'custom' },
+ *   ],
+ *   defaultLayout: [
+ *     { id: 1, widgetId: 'kpis', gridX: 0, gridY: 0, gridWidth: 12, gridHeight: 2 },
+ *     { id: 2, widgetId: 'chart', gridX: 0, gridY: 2, gridWidth: 6, gridHeight: 4 },
+ *   ],
+ * })
+ *
+ * @example With persistence and NC widgets
+ * const dashboard = useDashboardView({
+ *   widgets: myWidgets,
+ *   defaultLayout: defaultLayout,
+ *   loadLayout: () => fetch('/api/dashboard-layout').then(r => r.json()),
+ *   saveLayout: (layout) => fetch('/api/dashboard-layout', { method: 'PUT', body: JSON.stringify(layout) }),
+ *   includeNcWidgets: true,
+ * })
+ */
+export function useDashboardView(options = {}) {
+	const opts = {
+		widgets: [],
+		defaultLayout: [],
+		loadLayout: null,
+		saveLayout: null,
+		includeNcWidgets: false,
+		columns: 12,
+		...options,
+	}
+
+	// ── State ────────────────────────────────────────────────────────────
+	const appWidgets = ref(opts.widgets)
+	const ncWidgets = ref([])
+	const layout = ref([])
+	const loading = ref(false)
+	const saving = ref(false)
+	const isEditing = ref(false)
+
+	// ── Computed ─────────────────────────────────────────────────────────
+
+	/** All available widgets (app + NC Dashboard API) */
+	const widgets = computed(() => {
+		return [...appWidgets.value, ...ncWidgets.value]
+	})
+
+	/** Widget IDs currently on the dashboard */
+	const activeWidgetIds = computed(() => {
+		return layout.value.map(item => item.widgetId)
+	})
+
+	/** Widgets not yet placed on the dashboard */
+	const availableWidgets = computed(() => {
+		return widgets.value.filter(w => !activeWidgetIds.value.includes(w.id))
+	})
+
+	// ── Methods ──────────────────────────────────────────────────────────
+
+	/**
+	 * Load NC Dashboard API widgets from the OCS endpoint.
+	 */
+	async function loadNcWidgets() {
+		try {
+			const url = generateOcsUrl('/apps/dashboard/api/v1/widgets')
+			const response = await axios.get(url)
+			const data = response.data?.ocs?.data || {}
+
+			ncWidgets.value = Object.values(data).map(w => ({
+				id: w.id,
+				title: w.title,
+				iconClass: w.icon_class,
+				iconUrl: w.icon_url,
+				widgetUrl: w.widget_url,
+				itemApiVersions: w.item_api_versions || [],
+				itemIconsRound: w.item_icons_round || false,
+				reloadInterval: w.reload_interval || 0,
+				buttons: w.buttons || [],
+				type: 'nc-widget',
+			}))
+		} catch (error) {
+			console.error('[useDashboardView] Failed to load NC widgets:', error)
+			ncWidgets.value = []
+		}
+	}
+
+	/**
+	 * Initialize the dashboard: load layout and optionally NC widgets.
+	 */
+	async function init() {
+		loading.value = true
+		try {
+			const tasks = []
+
+			if (opts.includeNcWidgets) {
+				tasks.push(loadNcWidgets())
+			}
+
+			if (opts.loadLayout) {
+				tasks.push(
+					opts.loadLayout().then(saved => {
+						if (saved && saved.length > 0) {
+							layout.value = saved
+						} else {
+							layout.value = [...opts.defaultLayout]
+						}
+					}),
+				)
+			} else {
+				layout.value = [...opts.defaultLayout]
+			}
+
+			await Promise.all(tasks)
+		} catch (error) {
+			console.error('[useDashboardView] Init failed:', error)
+			layout.value = [...opts.defaultLayout]
+		} finally {
+			loading.value = false
+		}
+	}
+
+	/**
+	 * Handle layout change from the grid. Persists if saveLayout is provided.
+	 *
+	 * @param {Array} newLayout Updated layout array
+	 */
+	async function onLayoutChange(newLayout) {
+		layout.value = newLayout
+
+		if (opts.saveLayout) {
+			saving.value = true
+			try {
+				await opts.saveLayout(newLayout)
+			} catch (error) {
+				console.error('[useDashboardView] Failed to save layout:', error)
+			} finally {
+				saving.value = false
+			}
+		}
+	}
+
+	/**
+	 * Add a widget to the dashboard at the next available position.
+	 *
+	 * @param {string} widgetId Widget ID to add
+	 * @param {object} [position] Override position { gridX, gridY, gridWidth, gridHeight }
+	 */
+	function addWidget(widgetId, position = {}) {
+		const maxId = layout.value.reduce((max, item) => {
+			const num = typeof item.id === 'number' ? item.id : 0
+			return num > max ? num : max
+		}, 0)
+
+		const maxY = layout.value.reduce((max, item) => {
+			const bottom = (item.gridY || 0) + (item.gridHeight || 3)
+			return bottom > max ? bottom : max
+		}, 0)
+
+		const newItem = {
+			id: maxId + 1,
+			widgetId,
+			gridX: position.gridX ?? 0,
+			gridY: position.gridY ?? maxY,
+			gridWidth: position.gridWidth ?? 6,
+			gridHeight: position.gridHeight ?? 3,
+		}
+
+		const newLayout = [...layout.value, newItem]
+		onLayoutChange(newLayout)
+	}
+
+	/**
+	 * Remove a widget from the dashboard by layout item ID.
+	 *
+	 * @param {string|number} itemId Layout item ID to remove
+	 */
+	function removeWidget(itemId) {
+		const newLayout = layout.value.filter(item => item.id !== itemId)
+		onLayoutChange(newLayout)
+	}
+
+	/**
+	 * Update app widget definitions (e.g., when data changes).
+	 *
+	 * @param {Array} newWidgets Updated widget definitions
+	 */
+	function setWidgets(newWidgets) {
+		appWidgets.value = newWidgets
+	}
+
+	// ── Lifecycle ────────────────────────────────────────────────────────
+
+	onMounted(() => {
+		init()
+	})
+
+	// ── Return ───────────────────────────────────────────────────────────
+
+	return {
+		// State
+		widgets,
+		layout,
+		loading,
+		saving,
+		isEditing,
+
+		// Derived
+		activeWidgetIds,
+		availableWidgets,
+		ncWidgets,
+
+		// Methods
+		onLayoutChange,
+		addWidget,
+		removeWidget,
+		setWidgets,
+		init,
+	}
+}