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

package/src/components/CnTableWidget/CnTableWidget.vue

@@ -0,0 +1,332 @@
+<!--
+  CnTableWidget — Data table widget with card wrapper and dual data sourcing.
+
+  Wraps CnDataTable in a card container with a title header, optional "View all"
+  footer link, and loading/empty states. Supports two data modes:
+  1. External: `rows` prop provided (no API calls)
+  2. Self-fetch: `register` + `schemaId` provided (fetches from OpenRegister API)
+
+  Used in dashboard and detail page grid layouts for displaying related data tables.
+-->
+<template>
+	<div class="cn-table-widget">
+		<!-- Header -->
+		<div v-if="title" class="cn-table-widget__header">
+			<h3 class="cn-table-widget__title">
+				{{ title }}
+			</h3>
+			<span v-if="totalCount > 0" class="cn-table-widget__count">
+				{{ totalCount }}
+			</span>
+		</div>
+
+		<!-- Loading state -->
+		<NcLoadingIcon v-if="isLoading" class="cn-table-widget__loading" :size="32" />
+
+		<!-- Empty state -->
+		<p v-else-if="displayRows.length === 0" class="cn-table-widget__empty">
+			{{ emptyText }}
+		</p>
+
+		<!-- Data table -->
+		<CnDataTable
+			v-else
+			:rows="displayRows"
+			:columns="columns"
+			:loading="false"
+			:selectable="false"
+			@row-click="onRowClick" />
+
+		<!-- Footer with view all link -->
+		<div
+			v-if="viewAllRoute && totalCount > limitedCount"
+			class="cn-table-widget__footer">
+			<a
+				class="cn-table-widget__view-all"
+				@click.prevent="$router.push(viewAllRoute)">
+				{{ viewAllLabel }}
+			</a>
+		</div>
+	</div>
+</template>
+
+<script>
+import { NcLoadingIcon } from '@nextcloud/vue'
+import CnDataTable from '../CnDataTable/CnDataTable.vue'
+
+/**
+ * CnTableWidget — Data table widget with card wrapper and dual data sourcing.
+ *
+ * @example External data mode
+ * <CnTableWidget
+ *   title="Related Skills"
+ *   :rows="skillRows"
+ *   :columns="skillColumns"
+ *   :view-all-route="{ name: 'Skills' }" />
+ *
+ * @example Self-fetch mode
+ * <CnTableWidget
+ *   title="Documents"
+ *   register="9"
+ *   schema-id="42"
+ *   :limit="5" />
+ */
+export default {
+	name: 'CnTableWidget',
+
+	components: {
+		NcLoadingIcon,
+		CnDataTable,
+	},
+
+	props: {
+		/** Widget title shown in the header. */
+		title: {
+			type: String,
+			default: '',
+		},
+		/**
+		 * External row data. When provided, no API calls are made.
+		 *
+		 * @type {object[]}
+		 */
+		rows: {
+			type: Array,
+			default: null,
+		},
+		/**
+		 * Column definitions for CnDataTable.
+		 *
+		 * @type {{ key: string, label: string, sortable?: boolean }[]}
+		 */
+		columns: {
+			type: Array,
+			default: () => [],
+		},
+		/**
+		 * OpenRegister register ID for self-fetch mode.
+		 *
+		 * @type {string|number}
+		 */
+		register: {
+			type: [String, Number],
+			default: null,
+		},
+		/**
+		 * OpenRegister schema ID for self-fetch mode.
+		 *
+		 * @type {string|number}
+		 */
+		schemaId: {
+			type: [String, Number],
+			default: null,
+		},
+		/**
+		 * Maximum number of rows to display. When total exceeds this,
+		 * a "View all" link appears.
+		 *
+		 * @type {number}
+		 */
+		limit: {
+			type: Number,
+			default: 0,
+		},
+		/**
+		 * Vue Router route for the "View all" link.
+		 *
+		 * @type {object}
+		 */
+		viewAllRoute: {
+			type: Object,
+			default: null,
+		},
+		/**
+		 * Function that returns a route object for row click navigation.
+		 * Receives the row data as argument.
+		 *
+		 * @type {Function}
+		 */
+		rowClickRoute: {
+			type: Function,
+			default: null,
+		},
+		/** Pre-translated "View all" label. */
+		viewAllLabel: {
+			type: String,
+			default: 'View all',
+		},
+		/** Pre-translated empty state text. */
+		emptyText: {
+			type: String,
+			default: 'No data available',
+		},
+	},
+
+	data() {
+		return {
+			fetchedRows: [],
+			loading: false,
+		}
+	},
+
+	computed: {
+		/**
+		 * Whether data is currently loading.
+		 *
+		 * @return {boolean}
+		 */
+		isLoading() {
+			return this.loading
+		},
+
+		/**
+		 * All rows (external or fetched).
+		 *
+		 * @return {object[]}
+		 */
+		allRows() {
+			return this.rows || this.fetchedRows
+		},
+
+		/**
+		 * Rows limited to the configured limit.
+		 *
+		 * @return {object[]}
+		 */
+		displayRows() {
+			if (this.limit > 0) {
+				return this.allRows.slice(0, this.limit)
+			}
+			return this.allRows
+		},
+
+		/**
+		 * Total count of all rows (before limiting).
+		 *
+		 * @return {number}
+		 */
+		totalCount() {
+			return this.allRows.length
+		},
+
+		/**
+		 * Count of displayed rows (after limiting).
+		 *
+		 * @return {number}
+		 */
+		limitedCount() {
+			return this.displayRows.length
+		},
+	},
+
+	mounted() {
+		if (this.rows === null && this.register && this.schemaId) {
+			this.fetchData()
+		}
+	},
+
+	methods: {
+		/**
+		 * Fetch data from the OpenRegister API.
+		 *
+		 * @return {Promise<void>}
+		 */
+		async fetchData() {
+			this.loading = true
+			try {
+				const url = `/index.php/apps/openregister/api/objects/${this.register}/${this.schemaId}`
+				const response = await fetch(url, {
+					headers: {
+						'Content-Type': 'application/json',
+						'OCS-APIREQUEST': 'true',
+					},
+				})
+				if (response.ok) {
+					const data = await response.json()
+					this.fetchedRows = data.results || data || []
+				}
+			} catch (error) {
+				console.error('CnTableWidget: Failed to fetch data', error)
+			} finally {
+				this.loading = false
+			}
+		},
+
+		/**
+		 * Handle row click events. Navigates if rowClickRoute is configured.
+		 *
+		 * @param {object} row - The clicked row data.
+		 */
+		onRowClick(row) {
+			if (this.rowClickRoute) {
+				const route = this.rowClickRoute(row)
+				if (route) {
+					this.$router.push(route)
+				}
+			}
+		},
+	},
+}
+</script>
+
+<style scoped>
+.cn-table-widget {
+	background: var(--color-main-background);
+	border: 1px solid var(--color-border);
+	border-radius: var(--border-radius-large, 16px);
+	overflow: hidden;
+}
+
+.cn-table-widget__header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 12px 16px;
+	border-bottom: 1px solid var(--color-border);
+}
+
+.cn-table-widget__title {
+	margin: 0;
+	font-size: 14px;
+	font-weight: 600;
+}
+
+.cn-table-widget__count {
+	font-size: 12px;
+	color: var(--color-text-maxcontrast);
+	background: var(--color-background-dark);
+	padding: 2px 8px;
+	border-radius: 10px;
+}
+
+.cn-table-widget__loading {
+	padding: 32px 0;
+	display: flex;
+	justify-content: center;
+}
+
+.cn-table-widget__empty {
+	padding: 24px 16px;
+	text-align: center;
+	color: var(--color-text-maxcontrast);
+	font-size: 14px;
+	margin: 0;
+}
+
+.cn-table-widget__footer {
+	padding: 8px 16px;
+	border-top: 1px solid var(--color-border);
+	text-align: center;
+}
+
+.cn-table-widget__view-all {
+	font-size: 13px;
+	color: var(--color-primary-element);
+	cursor: pointer;
+	text-decoration: none;
+}
+
+.cn-table-widget__view-all:hover {
+	text-decoration: underline;
+}
+</style>

package/src/components/CnTableWidget/index.js

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

package/src/components/CnTasksCard/CnTasksCard.vue

@@ -0,0 +1,373 @@
+<!--
+  CnTasksCard — Inline tasks card for detail pages.
+
+  Displays up to 5 tasks with status indicators, assignee, and due date.
+  Integrates CnUserActionMenu on assignee names. Highlights overdue tasks.
+  Wraps CnDetailCard for consistent styling.
+-->
+<template>
+	<CnDetailCard :title="titleLabel" :icon="CheckboxMarkedOutline" :collapsible="collapsible">
+		<div class="cn-tasks-card">
+			<!-- Loading state -->
+			<NcLoadingIcon v-if="loading" />
+
+			<!-- Empty state -->
+			<div v-else-if="allTasks.length === 0" class="cn-tasks-card__empty">
+				{{ noTasksLabel }}
+			</div>
+
+			<!-- Tasks list -->
+			<div v-else class="cn-tasks-card__list">
+				<div
+					v-for="task in displayedTasks"
+					:key="task.id"
+					class="cn-tasks-card__task">
+					<!-- Status icon -->
+					<div class="cn-tasks-card__status-icon">
+						<CheckboxMarkedOutline
+							v-if="task.status === 'completed'"
+							:size="20"
+							class="cn-tasks-card__icon--completed" />
+						<ProgressClock
+							v-else-if="task.status === 'active' || task.status === 'in-process'"
+							:size="20"
+							class="cn-tasks-card__icon--active" />
+						<CloseCircleOutline
+							v-else-if="task.status === 'terminated'"
+							:size="20"
+							class="cn-tasks-card__icon--terminated" />
+						<CheckboxBlankOutline
+							v-else
+							:size="20"
+							class="cn-tasks-card__icon--available" />
+					</div>
+
+					<!-- Task content -->
+					<div class="cn-tasks-card__content">
+						<span class="cn-tasks-card__title">{{ task.title || task.name }}</span>
+						<div class="cn-tasks-card__meta">
+							<!-- Assignee -->
+							<span v-if="hasAssignee(task)" class="cn-tasks-card__assignee">
+								<CnUserActionMenu
+									v-if="!isCurrentUser(task.assignee)"
+									:user-id="task.assignee"
+									:display-name="task.assignee">
+									<span class="cn-tasks-card__assignee-name">{{ task.assignee }}</span>
+								</CnUserActionMenu>
+								<span v-else class="cn-tasks-card__assignee-name cn-tasks-card__assignee-name--self">
+									{{ task.assignee }}
+								</span>
+							</span>
+							<span v-else class="cn-tasks-card__unassigned">
+								{{ unassignedLabel }}
+							</span>
+
+							<!-- Due date -->
+							<span
+								v-if="task.dueDate"
+								class="cn-tasks-card__due-date"
+								:class="{ 'cn-tasks-card__due-date--overdue': isOverdue(task) }">
+								{{ formatDate(task.dueDate) }}
+							</span>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<!-- Footer: "Show all" link -->
+		<template v-if="allTasks.length > maxDisplay" #footer>
+			<button
+				class="cn-tasks-card__show-all"
+				@click="$emit('show-all')">
+				{{ showAllLabel }} ({{ allTasks.length }})
+			</button>
+		</template>
+	</CnDetailCard>
+</template>
+
+<script>
+import { NcLoadingIcon } from '@nextcloud/vue'
+import CheckboxMarkedOutline from 'vue-material-design-icons/CheckboxMarkedOutline.vue'
+import CheckboxBlankOutline from 'vue-material-design-icons/CheckboxBlankOutline.vue'
+import ProgressClock from 'vue-material-design-icons/ProgressClock.vue'
+import CloseCircleOutline from 'vue-material-design-icons/CloseCircleOutline.vue'
+
+import CnDetailCard from '../CnDetailCard/CnDetailCard.vue'
+import CnUserActionMenu from '../CnUserActionMenu/CnUserActionMenu.vue'
+import { buildHeaders } from '../../utils/index.js'
+
+/**
+ * CnTasksCard — Inline tasks widget for detail pages.
+ *
+ * Shows up to 5 tasks sorted by due date with status indicators.
+ * Highlights overdue tasks and integrates CnUserActionMenu on assignees.
+ *
+ * @example Basic usage
+ * <CnTasksCard
+ *   register-id="uuid-register"
+ *   schema-id="uuid-schema"
+ *   object-id="uuid-object" />
+ *
+ * @example With sidebar sync
+ * <CnTasksCard
+ *   register-id="reg"
+ *   schema-id="schema"
+ *   object-id="obj"
+ *   @show-all="openSidebarTasksTab" />
+ */
+export default {
+	name: 'CnTasksCard',
+
+	components: {
+		CnDetailCard,
+		CnUserActionMenu,
+		NcLoadingIcon,
+		CheckboxMarkedOutline,
+		CheckboxBlankOutline,
+		ProgressClock,
+		CloseCircleOutline,
+	},
+
+	props: {
+		/** OpenRegister register ID */
+		registerId: {
+			type: String,
+			required: true,
+		},
+		/** OpenRegister schema ID */
+		schemaId: {
+			type: String,
+			required: true,
+		},
+		/** Object UUID */
+		objectId: {
+			type: String,
+			required: true,
+		},
+		/** Base API URL for OpenRegister */
+		apiBase: {
+			type: String,
+			default: '/apps/openregister/api',
+		},
+		/** Maximum number of tasks to display */
+		maxDisplay: {
+			type: Number,
+			default: 5,
+		},
+		/** Whether the card is collapsible */
+		collapsible: {
+			type: Boolean,
+			default: false,
+		},
+
+		// --- Pre-translated labels ---
+		titleLabel: { type: String, default: 'Tasks' },
+		noTasksLabel: { type: String, default: 'No tasks' },
+		showAllLabel: { type: String, default: 'Show all' },
+		unassignedLabel: { type: String, default: 'Unassigned' },
+	},
+
+	emits: ['show-all'],
+
+	data() {
+		return {
+			CheckboxMarkedOutline,
+			allTasks: [],
+			loading: false,
+		}
+	},
+
+	computed: {
+		displayedTasks() {
+			// Sort by due date (soonest first), then limit
+			const sorted = [...this.allTasks].sort((a, b) => {
+				const dateA = a.dueDate ? new Date(a.dueDate) : new Date('9999-12-31')
+				const dateB = b.dueDate ? new Date(b.dueDate) : new Date('9999-12-31')
+				return dateA - dateB
+			})
+			return sorted.slice(0, this.maxDisplay)
+		},
+	},
+
+	watch: {
+		objectId: {
+			immediate: true,
+			handler(newId) {
+				if (newId && this.registerId && this.schemaId) {
+					this.fetchTasks()
+				}
+			},
+		},
+	},
+
+	methods: {
+		hasAssignee(task) {
+			return task.assignee && task.assignee.trim() !== ''
+		},
+
+		isCurrentUser(userId) {
+			const currentUser = typeof OC !== 'undefined' ? OC?.currentUser : null
+			return userId === currentUser
+		},
+
+		isOverdue(task) {
+			if (!task.dueDate || task.status === 'completed') return false
+			try {
+				return new Date(task.dueDate) < new Date()
+			} catch {
+				return false
+			}
+		},
+
+		async fetchTasks() {
+			if (!this.registerId || !this.schemaId || !this.objectId) return
+			this.loading = true
+			try {
+				const url = `${this.apiBase}/objects/${this.registerId}/${this.schemaId}/${this.objectId}/tasks`
+				const response = await fetch(url, { headers: buildHeaders() })
+				if (response.ok) {
+					const data = await response.json()
+					this.allTasks = data.results || data || []
+				}
+			} catch (err) {
+				console.error('CnTasksCard: Failed to fetch tasks', err)
+			} finally {
+				this.loading = false
+			}
+		},
+
+		formatDate(dateStr) {
+			if (!dateStr) return ''
+			try {
+				return new Date(dateStr).toLocaleDateString(undefined, {
+					year: 'numeric',
+					month: 'short',
+					day: 'numeric',
+				})
+			} catch {
+				return dateStr
+			}
+		},
+	},
+}
+</script>
+
+<style scoped>
+.cn-tasks-card__empty {
+	text-align: center;
+	padding: 16px 12px;
+	color: var(--color-text-maxcontrast);
+	font-size: 13px;
+}
+
+.cn-tasks-card__list {
+	display: flex;
+	flex-direction: column;
+}
+
+.cn-tasks-card__task {
+	display: flex;
+	align-items: flex-start;
+	gap: 10px;
+	padding: 8px 0;
+	border-bottom: 1px solid var(--color-border);
+}
+
+.cn-tasks-card__task:last-child {
+	border-bottom: none;
+}
+
+.cn-tasks-card__status-icon {
+	flex-shrink: 0;
+	padding-top: 1px;
+}
+
+.cn-tasks-card__icon--completed {
+	color: var(--color-success);
+}
+
+.cn-tasks-card__icon--active {
+	color: var(--color-primary-element);
+}
+
+.cn-tasks-card__icon--terminated {
+	color: var(--color-error);
+}
+
+.cn-tasks-card__icon--available {
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-tasks-card__content {
+	flex: 1;
+	min-width: 0;
+}
+
+.cn-tasks-card__title {
+	display: block;
+	font-size: 13px;
+	font-weight: 500;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.cn-tasks-card__meta {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	margin-top: 2px;
+	font-size: 12px;
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-tasks-card__assignee-name {
+	color: var(--color-primary-element);
+	font-weight: 500;
+	cursor: pointer;
+}
+
+.cn-tasks-card__assignee-name:hover {
+	text-decoration: underline;
+}
+
+.cn-tasks-card__assignee-name--self {
+	color: var(--color-text-maxcontrast);
+	cursor: default;
+}
+
+.cn-tasks-card__assignee-name--self:hover {
+	text-decoration: none;
+}
+
+.cn-tasks-card__unassigned {
+	font-style: italic;
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-tasks-card__due-date {
+	white-space: nowrap;
+}
+
+.cn-tasks-card__due-date--overdue {
+	color: var(--color-error);
+	font-weight: 500;
+}
+
+.cn-tasks-card__show-all {
+	background: none;
+	border: none;
+	color: var(--color-primary-element);
+	font-size: 13px;
+	font-weight: 500;
+	cursor: pointer;
+	padding: 0;
+	width: 100%;
+	text-align: center;
+}
+
+.cn-tasks-card__show-all:hover {
+	text-decoration: underline;
+}
+</style>

package/src/components/CnTasksCard/index.js

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