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

package/src/components/CnObjectSidebar/CnObjectSidebar.vue

@@ -0,0 +1,255 @@
+<!--
+  CnObjectSidebar — Right sidebar with standardized tabs for generic object functionality.
+
+  Provides Files, Notes, Tags, Tasks, and Audit Trail tabs that integrate with
+  OpenRegister API endpoints (which bridge to Nextcloud-native APIs).
+  All tabs are optional and overridable via props and slots.
+-->
+<template>
+	<NcAppSidebar
+		:name="sidebarTitle"
+		:title="sidebarTitle"
+		:subtitle="sidebarSubtitle"
+		:active.sync="activeTab"
+		@update:open="$emit('update:open', $event)"
+		@close="$emit('update:open', false)">
+		<!-- Files Tab -->
+		<NcAppSidebarTab
+			v-if="!isTabHidden('files')"
+			id="files"
+			:name="filesLabel"
+			:order="1">
+			<template #icon>
+				<Paperclip :size="20" />
+			</template>
+			<slot name="tab-files" :object-id="objectId" :object-type="objectType">
+				<CnFilesTab
+					:object-id="objectId"
+					:register="register"
+					:schema="schema"
+					:api-base="apiBase" />
+			</slot>
+		</NcAppSidebarTab>
+
+		<!-- Notes Tab -->
+		<NcAppSidebarTab
+			v-if="!isTabHidden('notes')"
+			id="notes"
+			:name="notesLabel"
+			:order="2">
+			<template #icon>
+				<CommentTextOutline :size="20" />
+			</template>
+			<slot name="tab-notes" :object-id="objectId" :object-type="objectType">
+				<CnNotesTab
+					:object-id="objectId"
+					:register="register"
+					:schema="schema"
+					:api-base="apiBase" />
+			</slot>
+		</NcAppSidebarTab>
+
+		<!-- Tags Tab -->
+		<NcAppSidebarTab
+			v-if="!isTabHidden('tags')"
+			id="tags"
+			:name="tagsLabel"
+			:order="3">
+			<template #icon>
+				<TagOutline :size="20" />
+			</template>
+			<slot name="tab-tags" :object-id="objectId" :object-type="objectType">
+				<CnTagsTab
+					:object-id="objectId"
+					:register="register"
+					:schema="schema"
+					:api-base="apiBase" />
+			</slot>
+		</NcAppSidebarTab>
+
+		<!-- Tasks Tab -->
+		<NcAppSidebarTab
+			v-if="!isTabHidden('tasks')"
+			id="tasks"
+			:name="tasksLabel"
+			:order="4">
+			<template #icon>
+				<CheckboxMarkedOutline :size="20" />
+			</template>
+			<slot name="tab-tasks" :object-id="objectId" :object-type="objectType">
+				<CnTasksTab
+					:object-id="objectId"
+					:register="register"
+					:schema="schema"
+					:api-base="apiBase" />
+			</slot>
+		</NcAppSidebarTab>
+
+		<!-- Audit Trail Tab -->
+		<NcAppSidebarTab
+			v-if="!isTabHidden('auditTrail')"
+			id="auditTrail"
+			:name="auditTrailLabel"
+			:order="5">
+			<template #icon>
+				<History :size="20" />
+			</template>
+			<slot name="tab-audit-trail" :object-id="objectId" :object-type="objectType">
+				<CnAuditTrailTab
+					:object-id="objectId"
+					:register="register"
+					:schema="schema"
+					:api-base="apiBase" />
+			</slot>
+		</NcAppSidebarTab>
+
+		<!-- Custom tabs slot -->
+		<slot name="extra-tabs" />
+	</NcAppSidebar>
+</template>
+
+<script>
+import { translate as t } from '@nextcloud/l10n'
+import { NcAppSidebar, NcAppSidebarTab } from '@nextcloud/vue'
+
+import Paperclip from 'vue-material-design-icons/Paperclip.vue'
+import CommentTextOutline from 'vue-material-design-icons/CommentTextOutline.vue'
+import TagOutline from 'vue-material-design-icons/TagOutline.vue'
+import CheckboxMarkedOutline from 'vue-material-design-icons/CheckboxMarkedOutline.vue'
+import History from 'vue-material-design-icons/History.vue'
+
+import CnFilesTab from './CnFilesTab.vue'
+import CnNotesTab from './CnNotesTab.vue'
+import CnTagsTab from './CnTagsTab.vue'
+import CnTasksTab from './CnTasksTab.vue'
+import CnAuditTrailTab from './CnAuditTrailTab.vue'
+
+/**
+ * CnObjectSidebar — Right sidebar for entity detail pages.
+ *
+ * Provides standardized tabs for generic object functionality (Files, Notes, Tags,
+ * Tasks, Audit Trail) that integrate with OpenRegister API endpoints bridging to
+ * Nextcloud-native APIs. Each tab is a self-contained component.
+ *
+ * @example Basic usage
+ * <CnObjectSidebar
+ *   object-type="pipelinq_lead"
+ *   :object-id="leadId"
+ *   :register="registerConfig.register"
+ *   :schema="registerConfig.schema" />
+ *
+ * @example Hide specific tabs
+ * <CnObjectSidebar
+ *   object-type="pipelinq_lead"
+ *   :object-id="leadId"
+ *   :hidden-tabs="['tasks', 'tags']" />
+ *
+ * @example Override a tab
+ * <CnObjectSidebar object-type="pipelinq_lead" :object-id="leadId">
+ *   <template #tab-notes="{ objectId }">
+ *     <MyCustomNotesComponent :id="objectId" />
+ *   </template>
+ * </CnObjectSidebar>
+ */
+export default {
+	name: 'CnObjectSidebar',
+
+	components: {
+		NcAppSidebar,
+		NcAppSidebarTab,
+		Paperclip,
+		CommentTextOutline,
+		TagOutline,
+		CheckboxMarkedOutline,
+		History,
+		CnFilesTab,
+		CnNotesTab,
+		CnTagsTab,
+		CnTasksTab,
+		CnAuditTrailTab,
+	},
+
+	props: {
+		/** The entity type (e.g., "pipelinq_lead", "procest_case") */
+		objectType: {
+			type: String,
+			required: true,
+		},
+		/** The object UUID */
+		objectId: {
+			type: String,
+			required: true,
+		},
+		/** OpenRegister register ID */
+		register: {
+			type: String,
+			default: '',
+		},
+		/** OpenRegister schema ID */
+		schema: {
+			type: String,
+			default: '',
+		},
+		/** Array of tab IDs to hide: 'files', 'notes', 'tags', 'tasks', 'auditTrail' */
+		hiddenTabs: {
+			type: Array,
+			default: () => [],
+		},
+		/** Whether the sidebar is open */
+		open: {
+			type: Boolean,
+			default: true,
+		},
+		/** Sidebar title (defaults to objectType) */
+		title: {
+			type: String,
+			default: '',
+		},
+		/** Sidebar subtitle */
+		subtitle: {
+			type: String,
+			default: '',
+		},
+		/** @deprecated Use subtitle instead */
+		subtitleProp: {
+			type: String,
+			default: '',
+		},
+		/** Base API URL for OpenRegister */
+		apiBase: {
+			type: String,
+			default: '/apps/openregister/api',
+		},
+
+		// --- Pre-translated labels ---
+		filesLabel: { type: String, default: () => t('nextcloud-vue', 'Files') },
+		notesLabel: { type: String, default: () => t('nextcloud-vue', 'Notes') },
+		tagsLabel: { type: String, default: () => t('nextcloud-vue', 'Tags') },
+		tasksLabel: { type: String, default: () => t('nextcloud-vue', 'Tasks') },
+		auditTrailLabel: { type: String, default: () => t('nextcloud-vue', 'Audit trail') },
+	},
+
+	emits: ['update:open'],
+
+	data() {
+		return {
+			activeTab: 'files',
+		}
+	},
+
+	computed: {
+		sidebarTitle() {
+			return this.title || this.objectType || 'Details'
+		},
+		sidebarSubtitle() {
+			return this.subtitle || this.subtitleProp || ''
+		},
+	},
+
+	methods: {
+		isTabHidden(tabId) {
+			return this.hiddenTabs.includes(tabId)
+		},
+	},
+}
+</script>

package/src/components/CnObjectSidebar/CnTagsTab.vue

@@ -0,0 +1,259 @@
+<template>
+	<div class="cn-sidebar-tab">
+		<!-- Add tag -->
+		<div class="cn-sidebar-tab__action">
+			<div class="cn-sidebar-tab__action--row">
+				<NcTextField
+					v-model="newTagName"
+					:label="addTagPlaceholder"
+					@input="filterSuggestions"
+					@keyup.enter="addTag"
+					@focus="showSuggestions = true" />
+				<NcButton
+					type="primary"
+					:disabled="!newTagName.trim() || saving"
+					@click="addTag">
+					<template #icon>
+						<Plus :size="20" />
+					</template>
+				</NcButton>
+			</div>
+			<!-- Tag suggestions dropdown -->
+			<div
+				v-if="showSuggestions && filtered.length > 0"
+				class="cn-sidebar-tab__tag-suggestions">
+				<button
+					v-for="suggestion in filtered"
+					:key="suggestion"
+					class="cn-sidebar-tab__tag-suggestion"
+					@mousedown.prevent="selectSuggestion(suggestion)">
+					<TagOutline :size="16" />
+					{{ suggestion }}
+				</button>
+			</div>
+		</div>
+
+		<!-- Tags list -->
+		<NcLoadingIcon v-if="loading" />
+		<div v-else-if="tags.length === 0" class="cn-sidebar-tab__empty">
+			{{ noTagsLabel }}
+		</div>
+		<div v-else class="cn-sidebar-tab__tags">
+			<span
+				v-for="tag in tags"
+				:key="tag"
+				class="cn-sidebar-tab__tag">
+				{{ tag }}
+				<button
+					class="cn-sidebar-tab__tag-remove"
+					:aria-label="'Remove ' + tag"
+					@click="removeTag(tag)">
+					<Close :size="14" />
+				</button>
+			</span>
+		</div>
+	</div>
+</template>
+
+<script>
+import { translate as t } from '@nextcloud/l10n'
+import { NcButton, NcTextField, NcLoadingIcon } from '@nextcloud/vue'
+import TagOutline from 'vue-material-design-icons/TagOutline.vue'
+import Plus from 'vue-material-design-icons/Plus.vue'
+import Close from 'vue-material-design-icons/Close.vue'
+import { buildHeaders } from '../../utils/index.js'
+
+export default {
+	name: 'CnTagsTab',
+
+	components: { NcButton, NcTextField, NcLoadingIcon, TagOutline, Plus, Close },
+
+	props: {
+		objectId: { type: String, required: true },
+		register: { type: String, default: '' },
+		schema: { type: String, default: '' },
+		apiBase: { type: String, default: '/apps/openregister/api' },
+		addTagPlaceholder: { type: String, default: () => t('nextcloud-vue', 'Add tag...') },
+		noTagsLabel: { type: String, default: () => t('nextcloud-vue', 'No tags') },
+	},
+
+	data() {
+		return {
+			tags: [],
+			loading: false,
+			newTagName: '',
+			saving: false,
+			availableTags: [],
+			filtered: [],
+			showSuggestions: false,
+		}
+	},
+
+	watch: {
+		objectId: {
+			immediate: true,
+			handler(id) {
+				if (id) {
+					this.fetchTags()
+					this.fetchAvailableTags()
+				}
+			},
+		},
+	},
+
+	methods: {
+		async fetchTags() {
+			if (!this.register || !this.schema) return
+			this.loading = true
+			try {
+				const response = await fetch(
+					`${this.apiBase}/objects/${this.register}/${this.schema}/${this.objectId}/tags`,
+					{ headers: buildHeaders() },
+				)
+				if (response.ok) {
+					this.tags = await response.json()
+				}
+			} catch (err) {
+				console.error('CnTagsTab: Failed to fetch tags', err)
+			} finally {
+				this.loading = false
+			}
+		},
+
+		async fetchAvailableTags() {
+			try {
+				const response = await fetch(`${this.apiBase}/tags`, { headers: buildHeaders() })
+				if (response.ok) {
+					this.availableTags = await response.json()
+				}
+			} catch (err) {
+				console.error('CnTagsTab: Failed to fetch available tags', err)
+			}
+		},
+
+		filterSuggestions() {
+			const query = this.newTagName.trim().toLowerCase()
+			if (!query) {
+				this.filtered = this.availableTags.filter(t => !this.tags.includes(t))
+				return
+			}
+			this.filtered = this.availableTags.filter(
+				t => t.toLowerCase().includes(query) && !this.tags.includes(t),
+			)
+		},
+
+		selectSuggestion(tagName) {
+			this.newTagName = tagName
+			this.showSuggestions = false
+			this.addTag()
+		},
+
+		async addTag() {
+			if (!this.newTagName.trim() || !this.register || !this.schema) return
+			this.saving = true
+			this.showSuggestions = false
+			try {
+				const response = await fetch(
+					`${this.apiBase}/objects/${this.register}/${this.schema}/${this.objectId}/tags`,
+					{
+						method: 'POST',
+						headers: buildHeaders(),
+						body: JSON.stringify({ tag: this.newTagName.trim() }),
+					},
+				)
+				if (response.ok) {
+					this.tags = await response.json()
+				}
+				this.newTagName = ''
+				this.fetchAvailableTags()
+			} catch (err) {
+				console.error('CnTagsTab: Failed to add tag', err)
+			} finally {
+				this.saving = false
+			}
+		},
+
+		async removeTag(tagName) {
+			if (!this.register || !this.schema) return
+			try {
+				const response = await fetch(
+					`${this.apiBase}/objects/${this.register}/${this.schema}/${this.objectId}/tags/${encodeURIComponent(tagName)}`,
+					{ method: 'DELETE', headers: buildHeaders() },
+				)
+				if (response.ok) {
+					this.tags = await response.json()
+				}
+			} catch (err) {
+				console.error('CnTagsTab: Failed to remove tag', err)
+			}
+		},
+	},
+}
+</script>
+
+<style scoped>
+.cn-sidebar-tab { padding: 12px; }
+.cn-sidebar-tab__action { margin-bottom: 16px; }
+.cn-sidebar-tab__action--row { display: flex; gap: 8px; align-items: flex-end; }
+
+.cn-sidebar-tab__empty {
+	text-align: center;
+	padding: 24px 12px;
+	color: var(--color-text-maxcontrast);
+	font-size: 13px;
+}
+
+.cn-sidebar-tab__tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0; }
+
+.cn-sidebar-tab__tag {
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+	padding: 3px 8px;
+	border-radius: var(--border-radius-pill, 16px);
+	background: var(--color-primary-element-light, rgba(0, 130, 201, 0.1));
+	color: var(--color-primary-element);
+	font-size: 12px;
+	font-weight: 500;
+}
+
+.cn-sidebar-tab__tag-remove {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: none;
+	border: none;
+	padding: 0;
+	cursor: pointer;
+	color: var(--color-primary-element);
+	opacity: 0.6;
+	border-radius: 50%;
+}
+
+.cn-sidebar-tab__tag-remove:hover { opacity: 1; background: rgba(0, 0, 0, 0.08); }
+
+.cn-sidebar-tab__tag-suggestions {
+	margin-top: 4px;
+	border: 1px solid var(--color-border);
+	border-radius: var(--border-radius);
+	background: var(--color-main-background);
+	max-height: 160px;
+	overflow-y: auto;
+}
+
+.cn-sidebar-tab__tag-suggestion {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	width: 100%;
+	padding: 6px 12px;
+	border: none;
+	background: none;
+	cursor: pointer;
+	font-size: 13px;
+	color: var(--color-main-text);
+	text-align: left;
+}
+
+.cn-sidebar-tab__tag-suggestion:hover { background: var(--color-background-hover); }
+</style>