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

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,
+	}
+}

package/src/composables/useDetailView.js

@@ -1,132 +1,289 @@
-import { ref } from 'vue'
-
-/**
- * Composable for managing detail view state: loading, editing, deleting.
- *
- * Extracts the load/edit/delete pattern found in every detail view
- * across Pipelinq and Procest.
- *
- * @param {object} options Configuration options
- * @param {string} options.objectType The registered object type slug
- * @param {Function} options.fetchFn (type, id) => Promise<object>
- * @param {Function} options.saveFn (type, data) => Promise<object>
- * @param {Function} options.deleteFn (type, id) => Promise<boolean>
- * @param {Function} [options.onSaved] Callback after successful save
- * @param {Function} [options.onDeleted] Callback after successful delete
- * @return {object} Reactive state and methods
- *
- * @example
- * import { useDetailView } from '@conduction/nextcloud-vue'
- *
- * const { objectData, editing, loading, showDeleteDialog, load, save, confirmDelete, executeDelete } = useDetailView({
- *   objectType: 'client',
- *   fetchFn: (type, id) => objectStore.fetchObject(type, id),
- *   saveFn: (type, data) => objectStore.saveObject(type, data),
- *   deleteFn: (type, id) => objectStore.deleteObject(type, id),
- *   onSaved: (result) => router.push(`/clients/${result.id}`),
- *   onDeleted: () => router.push('/clients'),
- * })
- */
-export function useDetailView(options) {
-	const objectData = ref({})
-	const editing = ref(false)
-	const loading = ref(false)
-	const saving = ref(false)
-	const showDeleteDialog = ref(false)
-	const error = ref(null)
-
-	/**
-	 * Load an object by ID.
-	 * @param {string} id Object ID
-	 * @return {Promise<object|null>}
-	 */
-	async function load(id) {
-		loading.value = true
-		error.value = null
-		try {
-			const result = await options.fetchFn(options.objectType, id)
-			if (result) {
-				objectData.value = { ...result }
-			}
-			return result
-		} catch (err) {
-			error.value = err.message || 'Failed to load'
-			return null
-		} finally {
-			loading.value = false
-		}
-	}
-
-	/**
-	 * Save the current object data (create or update).
-	 * @param {object} [formData] Optional form data override (defaults to objectData)
-	 * @return {Promise<object|null>}
-	 */
-	async function save(formData) {
-		saving.value = true
-		error.value = null
-		try {
-			const data = formData || objectData.value
-			const result = await options.saveFn(options.objectType, data)
-			if (result) {
-				objectData.value = { ...result }
-				editing.value = false
-				if (options.onSaved) {
-					options.onSaved(result)
-				}
-			}
-			return result
-		} catch (err) {
-			error.value = err.message || 'Failed to save'
-			return null
-		} finally {
-			saving.value = false
-		}
-	}
-
-	/**
-	 * Show the delete confirmation dialog.
-	 */
-	function confirmDelete() {
-		showDeleteDialog.value = true
-	}
-
-	/**
-	 * Execute the delete operation.
-	 * @param {string} [id] Object ID (defaults to objectData.id)
-	 * @return {Promise<boolean>}
-	 */
-	async function executeDelete(id) {
-		const deleteId = id || objectData.value.id
-		loading.value = true
-		error.value = null
-		try {
-			const success = await options.deleteFn(options.objectType, deleteId)
-			if (success) {
-				showDeleteDialog.value = false
-				if (options.onDeleted) {
-					options.onDeleted()
-				}
-			}
-			return success
-		} catch (err) {
-			error.value = err.message || 'Failed to delete'
-			return false
-		} finally {
-			loading.value = false
-		}
-	}
-
-	return {
-		objectData,
-		editing,
-		loading,
-		saving,
-		showDeleteDialog,
-		error,
-		load,
-		save,
-		confirmDelete,
-		executeDelete,
-	}
-}
+import { ref, computed, isRef, watch, onMounted } from 'vue'
+import { useObjectStore } from '../store/index.js'
+
+/**
+ * Composable for managing detail view state with full objectStore integration.
+ *
+ * When called with `objectType` and `id`, connects to the objectStore and handles
+ * fetching on mount, re-fetching on `id` changes, save/delete operations, and
+ * optional router navigation — eliminating boilerplate from every detail-view component.
+ *
+ * Backward-compatible: existing `useDetailView(options)` and `useDetailView()` calls
+ * continue to work without modification.
+ *
+ * @param {string|object} [objectTypeOrOptions] Object type slug (new API) or legacy options object
+ * @param {string|import('vue').Ref<string>} [id] Object ID or `'new'` for a new object
+ * @param {object} [options] Options (new API only)
+ * @param {object|null} [options.router] Vue Router instance — enables post-save/delete navigation
+ * @param {string|null} [options.listRouteName] Route name to navigate to after successful delete
+ * @param {string|null} [options.detailRouteName] Route name to navigate to after successful create
+ * @param {string} [options.nameField='title'] Field shown in error messages
+ * @return {object} Reactive state and operation functions
+ *
+ * @example
+ * // New API
+ * const { object, isNew, loading, saving, editing,
+ *         onSave, confirmDelete, showDeleteDialog } = useDetailView('client', props.id, {
+ *   router: useRouter(),
+ *   listRouteName: 'ClientList',
+ *   detailRouteName: 'ClientDetail',
+ * })
+ *
+ * @example
+ * // Legacy API — still works
+ * const { objectData, editing, load, save, confirmDelete } = useDetailView({
+ *   objectType: 'client',
+ *   fetchFn: (type, id) => objectStore.fetchObject(type, id),
+ *   saveFn: (type, data) => objectStore.saveObject(type, data),
+ *   deleteFn: (type, id) => objectStore.deleteObject(type, id),
+ * })
+ */
+export function useDetailView(objectTypeOrOptions, id, options) {
+	// Backward compat: if first arg is an object or absent, delegate to legacy implementation
+	if (!objectTypeOrOptions || typeof objectTypeOrOptions === 'object') {
+		return useLegacyDetailView(objectTypeOrOptions || {})
+	}
+
+	// ── New API ──────────────────────────────────────────────────────────
+	const objectType = objectTypeOrOptions
+	const opts = options || {}
+	const router = opts.router || null
+	const listRouteName = opts.listRouteName || null
+	const detailRouteName = opts.detailRouteName || null
+
+	// Normalise `id` to a ref so we can watch it
+	const idRef = isRef(id) ? id : ref(id)
+
+	const objectStore = useObjectStore()
+
+	// ── State refs ───────────────────────────────────────────────────────
+	const editing = ref(false)
+	const saving = ref(false)
+	const showDeleteDialog = ref(false)
+	const error = ref(null)
+	const validationErrors = ref(null)
+
+	// ── Computed refs from the store ─────────────────────────────────────
+
+	const isNew = computed(() => !idRef.value || idRef.value === 'new')
+
+	const object = computed(() => {
+		if (isNew.value) return {}
+		return objectStore.getObject(objectType, idRef.value) || {}
+	})
+
+	const loading = computed(() => objectStore.loading[objectType] || false)
+
+	// ── Operations ───────────────────────────────────────────────────────
+
+	/**
+	 * Save the object. Handles create (POST) and update (PUT) branches.
+	 * On 422 validation error the `validationErrors` ref is populated.
+	 * On successful create with `detailRouteName` set, the router navigates to the detail route.
+	 * On successful update, `editing` is set to false and the object is re-fetched.
+	 *
+	 * @param {object} formData Data to save
+	 * @return {Promise<object|null>} Saved object or null on error
+	 */
+	async function onSave(formData) {
+		saving.value = true
+		error.value = null
+		validationErrors.value = null
+
+		try {
+			const dataToSave = isNew.value ? formData : { ...formData, id: idRef.value }
+			const result = await objectStore.saveObject(objectType, dataToSave)
+
+			if (!result) {
+				// Store already set error; surface it
+				error.value = objectStore.errors[objectType]?.message || 'Failed to save'
+				return null
+			}
+
+			if (isNew.value && router && detailRouteName) {
+				router.push({ name: detailRouteName, params: { id: result.id } })
+			} else {
+				editing.value = false
+				await objectStore.fetchObject(objectType, idRef.value)
+			}
+
+			return result
+		} catch (err) {
+			if (err?.response?.status === 422 || err?.status === 422) {
+				const data = err?.response?.data || err?.data || {}
+				validationErrors.value = data.errors || data
+			} else {
+				error.value = err.message || 'Failed to save'
+			}
+			return null
+		} finally {
+			saving.value = false
+		}
+	}
+
+	/**
+	 * Delete the current object. On success, navigate to `listRouteName` if configured.
+	 * On failure, `error` ref is set.
+	 *
+	 * @return {Promise<boolean>} True if deleted successfully
+	 */
+	async function confirmDelete() {
+		error.value = null
+		try {
+			const success = await objectStore.deleteObject(objectType, idRef.value)
+			if (success) {
+				showDeleteDialog.value = false
+				if (router && listRouteName) {
+					router.push({ name: listRouteName })
+				}
+			} else {
+				error.value = objectStore.errors[objectType]?.message || 'Failed to delete'
+			}
+			return success
+		} catch (err) {
+			error.value = err.message || 'Failed to delete'
+			return false
+		}
+	}
+
+	// ── Lifecycle ────────────────────────────────────────────────────────
+
+	async function fetchIfNeeded(currentId) {
+		if (!currentId || currentId === 'new') return
+		await objectStore.fetchObject(objectType, currentId)
+	}
+
+	onMounted(() => {
+		fetchIfNeeded(idRef.value)
+	})
+
+	watch(idRef, (newId) => {
+		fetchIfNeeded(newId)
+	})
+
+	// ── Return value ─────────────────────────────────────────────────────
+
+	return {
+		// Store-derived
+		object,
+		loading,
+		// Computed state
+		isNew,
+		// Local state
+		editing,
+		saving,
+		showDeleteDialog,
+		error,
+		validationErrors,
+		// Operations
+		onSave,
+		confirmDelete,
+	}
+}
+
+// ── Legacy implementation ─────────────────────────────────────────────────────
+
+/**
+ * Legacy `useDetailView(options)` implementation.
+ * Preserved verbatim for backward compatibility.
+ *
+ * @param {object} options Legacy options object
+ * @param {string} [options.objectType] The registered object type slug
+ * @param {Function} [options.fetchFn] (type, id) => Promise<object>
+ * @param {Function} [options.saveFn] (type, data) => Promise<object>
+ * @param {Function} [options.deleteFn] (type, id) => Promise<boolean>
+ * @param {Function} [options.onSaved] Callback after successful save
+ * @param {Function} [options.onDeleted] Callback after successful delete
+ * @return {object} Reactive state and methods
+ */
+function useLegacyDetailView(options) {
+	const objectData = ref({})
+	const editing = ref(false)
+	const loading = ref(false)
+	const saving = ref(false)
+	const showDeleteDialog = ref(false)
+	const error = ref(null)
+
+	async function load(id) {
+		loading.value = true
+		error.value = null
+		try {
+			const result = options.fetchFn
+				? await options.fetchFn(options.objectType, id)
+				: null
+			if (result) {
+				objectData.value = { ...result }
+			}
+			return result
+		} catch (err) {
+			error.value = err.message || 'Failed to load'
+			return null
+		} finally {
+			loading.value = false
+		}
+	}
+
+	async function save(formData) {
+		saving.value = true
+		error.value = null
+		try {
+			const data = formData || objectData.value
+			const result = options.saveFn
+				? await options.saveFn(options.objectType, data)
+				: null
+			if (result) {
+				objectData.value = { ...result }
+				editing.value = false
+				if (options.onSaved) {
+					options.onSaved(result)
+				}
+			}
+			return result
+		} catch (err) {
+			error.value = err.message || 'Failed to save'
+			return null
+		} finally {
+			saving.value = false
+		}
+	}
+
+	function confirmDelete() {
+		showDeleteDialog.value = true
+	}
+
+	async function executeDelete(id) {
+		const deleteId = id || objectData.value.id
+		loading.value = true
+		error.value = null
+		try {
+			const success = options.deleteFn
+				? await options.deleteFn(options.objectType, deleteId)
+				: false
+			if (success) {
+				showDeleteDialog.value = false
+				if (options.onDeleted) {
+					options.onDeleted()
+				}
+			}
+			return success
+		} catch (err) {
+			error.value = err.message || 'Failed to delete'
+			return false
+		} finally {
+			loading.value = false
+		}
+	}
+
+	return {
+		objectData,
+		editing,
+		loading,
+		saving,
+		showDeleteDialog,
+		error,
+		load,
+		save,
+		confirmDelete,
+		executeDelete,
+	}
+}