@conduction/nextcloud-vue 0.1.0-beta.1

package/src/components/CnVersionInfoCard/CnVersionInfoCard.vue

@@ -0,0 +1,312 @@
+<template>
+	<CnSettingsSection
+		:name="title"
+		:description="description"
+		:doc-url="docUrl"
+		:loading="loading"
+		loading-message="Loading version information...">
+		<!-- Actions slot -->
+		<template #actions>
+			<!-- Update Button -->
+			<NcButton
+				v-if="showUpdateButton"
+				:type="updateButtonType"
+				:disabled="updateButtonDisabled"
+				@click="handleUpdateClick">
+				<template #icon>
+					<NcLoadingIcon v-if="updating" :size="20" />
+					<Check v-else-if="isUpToDate" :size="20" />
+					<Update v-else :size="20" />
+				</template>
+				{{ updateButtonText }}
+			</NcButton>
+
+			<!-- Additional Actions (slot) -->
+			<slot name="actions" />
+		</template>
+
+		<!-- Main content (only shown when not loading) -->
+		<div v-if="!loading" class="cn-version-info">
+			<!-- Version card with gray background -->
+			<div class="cn-version-info__card">
+				<h4>{{ cardTitle }}</h4>
+				<div class="cn-version-info__details">
+					<!-- Application Name -->
+					<div class="cn-version-info__item">
+						<span class="cn-version-info__label">{{ labels.appName }}:</span>
+						<span class="cn-version-info__value">{{ appName }}</span>
+					</div>
+
+					<!-- Version -->
+					<div class="cn-version-info__item">
+						<span class="cn-version-info__label">{{ labels.version }}:</span>
+						<span class="cn-version-info__value">{{ appVersion }}</span>
+					</div>
+
+					<!-- Configured Version (if provided) -->
+					<div v-if="configuredVersion" class="cn-version-info__item">
+						<span class="cn-version-info__label">{{ labels.configuredVersion }}:</span>
+						<span class="cn-version-info__value">{{ configuredVersion }}</span>
+					</div>
+
+					<!-- Additional items -->
+					<div v-for="item in additionalItems" :key="item.label" class="cn-version-info__item">
+						<span class="cn-version-info__label">{{ item.label }}:</span>
+						<span class="cn-version-info__value" :class="item.statusClass">{{ item.value }}</span>
+					</div>
+
+					<!-- Optional additional items slot -->
+					<slot name="additional-items" />
+				</div>
+
+				<!-- Optional footer slot -->
+				<slot name="footer" />
+			</div>
+
+			<!-- Optional extra cards slot -->
+			<slot name="extra-cards" />
+		</div>
+	</CnSettingsSection>
+</template>
+
+<script>
+import { CnSettingsSection } from '../CnSettingsSection/index.js'
+import { NcLoadingIcon, NcButton } from '@nextcloud/vue'
+import Check from 'vue-material-design-icons/Check.vue'
+import Update from 'vue-material-design-icons/Update.vue'
+
+/**
+ * CnVersionInfoCard - App version information card for admin settings pages.
+ *
+ * Displays application name, version, and optional configured version with an
+ * update button. Wraps CnSettingsSection for consistent admin settings layout.
+ *
+ * Every Conduction Nextcloud app should show this as the first section on its
+ * admin settings page.
+ *
+ * @example Basic usage
+ * <CnVersionInfoCard app-name="Open Register" app-version="0.2.3" />
+ *
+ * @example With update button
+ * <CnVersionInfoCard
+ *   app-name="Open Register"
+ *   app-version="0.2.3"
+ *   configured-version="0.2.2"
+ *   :is-up-to-date="false"
+ *   :show-update-button="true"
+ *   :updating="isUpdating"
+ *   @update="runUpdate" />
+ *
+ * @example With additional items and actions
+ * <CnVersionInfoCard
+ *   app-name="Pipelinq"
+ *   app-version="0.1.7"
+ *   :additional-items="[{ label: 'Database', value: 'Connected', statusClass: 'cn-version-info__status--ok' }]">
+ *   <template #actions>
+ *     <NcButton @click="clearCache">Clear App Store Cache</NcButton>
+ *   </template>
+ * </CnVersionInfoCard>
+ */
+export default {
+	name: 'CnVersionInfoCard',
+
+	components: {
+		CnSettingsSection,
+		NcLoadingIcon,
+		NcButton,
+		Check,
+		Update,
+	},
+
+	props: {
+		/** Section title */
+		title: {
+			type: String,
+			default: 'Version Information',
+		},
+		/** Section description */
+		description: {
+			type: String,
+			default: 'Information about the current application installation',
+		},
+		/** Documentation URL (shows info icon next to title) */
+		docUrl: {
+			type: String,
+			default: '',
+		},
+		/** Card heading text */
+		cardTitle: {
+			type: String,
+			default: 'Application Information',
+		},
+		/** Application name to display */
+		appName: {
+			type: String,
+			required: true,
+		},
+		/** Application version string */
+		appVersion: {
+			type: String,
+			required: true,
+		},
+		/** Configured version (optional, for apps that track configuration versions separately) */
+		configuredVersion: {
+			type: String,
+			default: '',
+		},
+		/** Whether the app configuration is up to date */
+		isUpToDate: {
+			type: Boolean,
+			default: true,
+		},
+		/** Whether to show the update button */
+		showUpdateButton: {
+			type: Boolean,
+			default: false,
+		},
+		/** Whether an update is currently in progress */
+		updating: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Additional key-value items to display.
+		 * Format: [{ label: 'Label', value: 'Value', statusClass: 'cn-version-info__status--ok' }]
+		 */
+		additionalItems: {
+			type: Array,
+			default: () => [],
+		},
+		/** Whether version info is loading */
+		loading: {
+			type: Boolean,
+			default: false,
+		},
+		/** Custom labels for the standard fields */
+		labels: {
+			type: Object,
+			default: () => ({
+				appName: 'Application Name',
+				version: 'Version',
+				configuredVersion: 'Configured Version',
+			}),
+		},
+	},
+
+	emits: ['update'],
+
+	computed: {
+		/** @return {string} Button type based on update status */
+		updateButtonType() {
+			if (this.isUpToDate) {
+				return 'success'
+			}
+			return 'error'
+		},
+
+		/** @return {boolean} Whether the update button should be disabled */
+		updateButtonDisabled() {
+			return this.isUpToDate || this.updating
+		},
+
+		/** @return {string} Update button label text */
+		updateButtonText() {
+			if (this.updating) {
+				return 'Updating...'
+			}
+			if (this.isUpToDate) {
+				return 'Up to date'
+			}
+			return 'Update'
+		},
+	},
+
+	methods: {
+		handleUpdateClick() {
+			if (!this.updateButtonDisabled) {
+				this.$emit('update')
+			}
+		},
+	},
+}
+</script>
+
+<style scoped>
+.cn-version-info__card {
+	background: var(--color-background-hover);
+	border: 1px solid var(--color-border);
+	border-radius: var(--border-radius-large);
+	padding: 20px;
+	margin-bottom: 20px;
+}
+
+.cn-version-info__card h4 {
+	margin: 0 0 16px 0;
+	font-size: 16px;
+	font-weight: 600;
+	color: var(--color-main-text);
+}
+
+.cn-version-info__details {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+}
+
+.cn-version-info__item {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 8px 0;
+	border-bottom: 1px solid var(--color-border);
+}
+
+.cn-version-info__item:last-child {
+	border-bottom: none;
+}
+
+.cn-version-info__label {
+	font-weight: 500;
+	color: var(--color-text-maxcontrast);
+	font-size: 14px;
+}
+
+.cn-version-info__value {
+	font-family: 'Courier New', Courier, monospace;
+	font-weight: 600;
+	color: var(--color-main-text);
+	font-size: 14px;
+}
+
+/* Status classes for values */
+.cn-version-info__status--ok {
+	color: var(--color-success);
+	font-weight: 600;
+}
+
+.cn-version-info__status--warning {
+	color: var(--color-warning);
+	font-weight: 600;
+}
+
+.cn-version-info__status--error {
+	color: var(--color-error);
+	font-weight: 600;
+}
+
+@media (max-width: 768px) {
+	.cn-version-info__item {
+		flex-direction: column;
+		align-items: flex-start;
+		gap: 4px;
+	}
+
+	.cn-version-info__label {
+		font-weight: 600;
+	}
+
+	.cn-version-info__value {
+		word-break: break-all;
+	}
+}
+</style>

package/src/components/CnVersionInfoCard/index.js

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

package/src/components/CnViewModeToggle/CnViewModeToggle.vue

@@ -0,0 +1,77 @@
+<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

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

package/src/components/index.js

@@ -0,0 +1,25 @@
+export { CnDataTable } from './CnDataTable/index.js'
+export { CnFilterBar } from './CnFilterBar/index.js'
+export { CnListViewLayout } from './CnListViewLayout/index.js'
+export { CnDetailViewLayout } from './CnDetailViewLayout/index.js'
+export { CnStatusBadge } from './CnStatusBadge/index.js'
+export { CnEmptyState } from './CnEmptyState/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 { CnViewModeToggle } from './CnViewModeToggle/index.js'
+export { CnRowActions } from './CnRowActions/index.js'
+export { CnIndexPage } from './CnIndexPage/index.js'
+export { CnMassActionBar } from './CnMassActionBar/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'

package/src/composables/index.js

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

package/src/composables/useDetailView.js

@@ -0,0 +1,132 @@
+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,
+	}
+}

package/src/composables/useListView.js

@@ -0,0 +1,153 @@
+import { ref, onBeforeUnmount } from 'vue'
+
+/**
+ * Composable for managing list view state: search, filters, sorting, pagination.
+ *
+ * Extracts the search-debounce + filter + sort + pagination pattern
+ * found in every list view across Pipelinq and Procest.
+ *
+ * @param {object} options Configuration options
+ * @param {string} options.objectType The registered object type slug
+ * @param {Function} options.fetchFn Function to call: (type, params) => Promise<Array>
+ * @param {number} [options.debounceMs=300] Search debounce in milliseconds
+ * @param {number} [options.pageSize=20] Default page size
+ * @param {object} [options.defaultSort] Default sort: { key: string, order: 'asc'|'desc' }
+ * @return {object} Reactive state and methods
+ *
+ * @example
+ * import { useListView } from '@conduction/nextcloud-vue'
+ *
+ * const { searchTerm, sortKey, sortOrder, currentPage, onSearchInput, toggleSort, fetch } = useListView({
+ *   objectType: 'client',
+ *   fetchFn: (type, params) => objectStore.fetchCollection(type, params),
+ *   defaultSort: { key: 'name', order: 'asc' },
+ * })
+ */
+export function useListView(options) {
+	const searchTerm = ref('')
+	const filters = ref({})
+	const sortKey = ref(options.defaultSort?.key || null)
+	const sortOrder = ref(options.defaultSort?.order || 'asc')
+	const currentPage = ref(1)
+	const pageSize = ref(options.pageSize || 20)
+
+	let searchTimeout = null
+
+	/**
+	 * Build fetch parameters from current state.
+	 * @return {object} Parameters for the fetch function
+	 */
+	function buildFetchParams() {
+		const params = {
+			_limit: pageSize.value,
+			_page: currentPage.value,
+		}
+
+		if (searchTerm.value) {
+			params._search = searchTerm.value
+		}
+
+		if (sortKey.value) {
+			params._order = { [sortKey.value]: sortOrder.value }
+		}
+
+		// Merge active filters
+		for (const [key, value] of Object.entries(filters.value)) {
+			if (value !== null && value !== '' && value !== false) {
+				params[key] = value
+			}
+		}
+
+		return params
+	}
+
+	/**
+	 * Execute a fetch with current state.
+	 * @param {number} [page] Optional page override
+	 * @return {Promise<Array>} Fetched results
+	 */
+	async function fetchData(page) {
+		if (page !== undefined) {
+			currentPage.value = page
+		}
+		const params = buildFetchParams()
+		return options.fetchFn(options.objectType, params)
+	}
+
+	/**
+	 * Handle search input with debouncing.
+	 * @param {string} value New search value
+	 */
+	function onSearchInput(value) {
+		searchTerm.value = value
+		clearTimeout(searchTimeout)
+		searchTimeout = setTimeout(() => fetchData(1), options.debounceMs || 300)
+	}
+
+	/**
+	 * Toggle sort on a column. Cycles: asc -> desc -> null.
+	 * @param {string} key Column key
+	 */
+	function toggleSort(key) {
+		if (sortKey.value === key) {
+			if (sortOrder.value === 'asc') {
+				sortOrder.value = 'desc'
+			} else {
+				sortKey.value = null
+				sortOrder.value = 'asc'
+			}
+		} else {
+			sortKey.value = key
+			sortOrder.value = 'asc'
+		}
+		fetchData(1)
+	}
+
+	/**
+	 * Set a filter value and re-fetch.
+	 * @param {string} key Filter key
+	 * @param {*} value Filter value
+	 */
+	function setFilter(key, value) {
+		filters.value = { ...filters.value, [key]: value }
+		fetchData(1)
+	}
+
+	/**
+	 * Clear all filters and search, then re-fetch.
+	 */
+	function clearAllFilters() {
+		searchTerm.value = ''
+		filters.value = {}
+		sortKey.value = options.defaultSort?.key || null
+		sortOrder.value = options.defaultSort?.order || 'asc'
+		fetchData(1)
+	}
+
+	/**
+	 * Navigate to a specific page.
+	 * @param {number} page Page number
+	 */
+	function goToPage(page) {
+		currentPage.value = page
+		fetchData()
+	}
+
+	onBeforeUnmount(() => clearTimeout(searchTimeout))
+
+	return {
+		searchTerm,
+		filters,
+		sortKey,
+		sortOrder,
+		currentPage,
+		pageSize,
+		onSearchInput,
+		toggleSort,
+		setFilter,
+		clearAllFilters,
+		goToPage,
+		fetch: fetchData,
+		buildFetchParams,
+	}
+}