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

package/src/components/CnCopyDialog/CnCopyDialog.vue

@@ -0,0 +1,266 @@
+<template>
+	<NcDialog
+		:name="dialogTitle"
+		size="small"
+		:can-close="!loading"
+		@closing="$emit('close')">
+		<!-- Result phase -->
+		<div v-if="result !== null" class="cn-copy__result">
+			<NcNoteCard v-if="result.success" type="success">
+				{{ successText }}
+			</NcNoteCard>
+			<NcNoteCard v-if="result.error" type="error">
+				{{ result.error }}
+			</NcNoteCard>
+		</div>
+
+		<!-- Form phase -->
+		<div v-else class="cn-copy__form">
+			<div class="cn-copy__pattern">
+				<label for="cn-copy-pattern">{{ patternLabel }}</label>
+				<NcSelect
+					input-id="cn-copy-pattern"
+					:options="patternOptions"
+					:value="selectedPattern"
+					:clearable="false"
+					@input="selectedPattern = $event" />
+			</div>
+
+			<div class="cn-copy__preview">
+				<div class="cn-copy__preview-row">
+					<span class="cn-copy__preview-original">{{ itemName }}</span>
+					<span class="cn-copy__preview-arrow">&rarr;</span>
+					<span class="cn-copy__preview-new">{{ newName }}</span>
+				</div>
+			</div>
+		</div>
+
+		<template #actions>
+			<NcButton @click="$emit('close')">
+				{{ result !== null ? closeLabel : cancelLabel }}
+			</NcButton>
+			<NcButton
+				v-if="result === null"
+				type="primary"
+				:disabled="loading"
+				@click="executeCopy">
+				<template #icon>
+					<NcLoadingIcon v-if="loading" :size="20" />
+					<ContentCopy v-else :size="20" />
+				</template>
+				{{ confirmLabel }}
+			</NcButton>
+		</template>
+	</NcDialog>
+</template>
+
+<script>
+import { translate as t } from '@nextcloud/l10n'
+import { NcDialog, NcButton, NcNoteCard, NcLoadingIcon, NcSelect } from '@nextcloud/vue'
+import ContentCopy from 'vue-material-design-icons/ContentCopy.vue'
+
+/**
+ * CnCopyDialog — Single-item copy confirmation dialog with naming pattern.
+ *
+ * Two-phase UI: form (with name preview) then result. The dialog does NOT
+ * perform the copy itself — it emits a `confirm` event with the item ID
+ * and the new name. The parent performs the actual API call and calls
+ * `setResult()` via a ref.
+ *
+ * @example
+ * <CnCopyDialog
+ *   v-if="showCopyDialog"
+ *   ref="copyDialog"
+ *   :item="itemToCopy"
+ *   @confirm="onCopyConfirm"
+ *   @close="showCopyDialog = false" />
+ *
+ * // In methods:
+ * async onCopyConfirm({ id, newName }) {
+ *   try {
+ *     await store.copyItem(id, { title: newName })
+ *     this.$refs.copyDialog.setResult({ success: true })
+ *   } catch (e) {
+ *     this.$refs.copyDialog.setResult({ error: e.message })
+ *   }
+ * }
+ */
+export default {
+	name: 'CnCopyDialog',
+
+	components: {
+		NcDialog,
+		NcButton,
+		NcNoteCard,
+		NcLoadingIcon,
+		NcSelect,
+		ContentCopy,
+	},
+
+	props: {
+		/** The item to copy. Must have an `id` property. */
+		item: {
+			type: Object,
+			required: true,
+		},
+		/** Property name used for display (e.g., 'title', 'name') */
+		nameField: {
+			type: String,
+			default: 'title',
+		},
+		/** Optional function to format the item name. Receives the item, returns a string. Overrides nameField when provided. */
+		nameFormatter: {
+			type: Function,
+			default: null,
+		},
+		/** Dialog title */
+		dialogTitle: {
+			type: String,
+			default: () => t('nextcloud-vue', 'Copy item'),
+		},
+		/** Label for the naming pattern selector */
+		patternLabel: {
+			type: String,
+			default: () => t('nextcloud-vue', 'Naming pattern'),
+		},
+		/** Success message */
+		successText: {
+			type: String,
+			default: () => t('nextcloud-vue', 'Item successfully copied.'),
+		},
+		cancelLabel: { type: String, default: () => t('nextcloud-vue', 'Cancel') },
+		closeLabel: { type: String, default: () => t('nextcloud-vue', 'Close') },
+		confirmLabel: { type: String, default: () => t('nextcloud-vue', 'Copy') },
+	},
+
+	data() {
+		return {
+			loading: false,
+			result: null,
+			closeTimeout: null,
+			selectedPatternId: 'copy-of',
+		}
+	},
+
+	computed: {
+		itemName() {
+			if (this.nameFormatter) return this.nameFormatter(this.item)
+			return this.item[this.nameField] || this.item.name || this.item.title || this.item.id
+		},
+
+		patternOptions() {
+			return [
+				{ id: 'copy-of', label: t('nextcloud-vue', 'Copy of {name}') },
+				{ id: 'name-copy', label: t('nextcloud-vue', '{name} - Copy') },
+				{ id: 'name-parens', label: t('nextcloud-vue', '{name} (Copy)') },
+			]
+		},
+
+		selectedPattern: {
+			get() {
+				return this.patternOptions.find((p) => p.id === this.selectedPatternId) || this.patternOptions[0]
+			},
+			set(pattern) {
+				this.selectedPatternId = pattern ? pattern.id : 'copy-of'
+			},
+		},
+
+		newName() {
+			return this.applyPattern(this.itemName, this.selectedPatternId)
+		},
+	},
+
+	beforeDestroy() {
+		if (this.closeTimeout) clearTimeout(this.closeTimeout)
+	},
+
+	/**
+	 * @event confirm Emitted when the user confirms copying. Payload: `{ id, newName }`.
+	 * @event close Emitted when the dialog should be closed (cancel, close button, or auto-close after success).
+	 */
+
+	methods: {
+		applyPattern(name, patternId) {
+			switch (patternId) {
+			case 'copy-of':
+				return t('nextcloud-vue', 'Copy of {name}', { name })
+			case 'name-copy':
+				return t('nextcloud-vue', '{name} - Copy', { name })
+			case 'name-parens':
+				return t('nextcloud-vue', '{name} (Copy)', { name })
+			default:
+				return t('nextcloud-vue', 'Copy of {name}', { name })
+			}
+		},
+
+		executeCopy() {
+			this.loading = true
+			this.$emit('confirm', {
+				id: this.item.id,
+				newName: this.newName,
+			})
+		},
+
+		/**
+		 * Set the result of the copy operation. Call this from the parent
+		 * after the API call completes.
+		 *
+		 * @param {{ success?: boolean, error?: string }} resultData - Result data to pass to the dialog
+		 * @public
+		 */
+		setResult(resultData) {
+			this.loading = false
+			this.result = resultData
+			if (resultData.success) {
+				this.closeTimeout = setTimeout(() => {
+					this.$emit('close')
+				}, 2000)
+			}
+		},
+	},
+}
+</script>
+
+<style scoped>
+.cn-copy__pattern {
+	margin-bottom: 16px;
+}
+
+.cn-copy__pattern label {
+	display: block;
+	font-weight: 600;
+	margin-bottom: 4px;
+}
+
+.cn-copy__preview {
+	margin-top: 12px;
+}
+
+.cn-copy__preview-row {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 8px 12px;
+	background-color: var(--color-background-hover);
+	border-radius: var(--border-radius);
+}
+
+.cn-copy__preview-original {
+	color: var(--color-text-maxcontrast);
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.cn-copy__preview-arrow {
+	flex-shrink: 0;
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-copy__preview-new {
+	font-weight: 500;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+</style>

package/src/components/CnCopyDialog/index.js

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

package/src/components/CnDashboardGrid/CnDashboardGrid.vue

@@ -0,0 +1,229 @@
+<!--
+  CnDashboardGrid — GridStack-powered drag-and-drop dashboard grid.
+
+  Renders widgets in a configurable grid layout. Supports drag, resize,
+  and dynamic item addition/removal. Emits layout changes for persistence.
+-->
+<template>
+	<div ref="gridContainer" class="cn-dashboard-grid">
+		<div class="grid-stack">
+			<div
+				v-for="item in layout"
+				:key="item.id"
+				class="grid-stack-item"
+				:gs-id="item.id"
+				:gs-x="item.gridX"
+				:gs-y="item.gridY"
+				:gs-w="item.gridWidth"
+				:gs-h="item.gridHeight"
+				:gs-min-w="minWidth"
+				:gs-min-h="minHeight">
+				<div class="grid-stack-item-content">
+					<slot name="widget" :item="item">
+						<!-- Default: render nothing; CnDashboardPage provides content -->
+					</slot>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import { GridStack } from 'gridstack'
+import 'gridstack/dist/gridstack.min.css'
+
+/**
+ * CnDashboardGrid — Low-level grid layout engine powered by GridStack.
+ *
+ * Manages the drag-and-drop grid, syncs positions, and emits layout
+ * changes. Does NOT handle widget rendering — that's done by the parent
+ * via the `#widget` scoped slot.
+ *
+ * @example
+ * <CnDashboardGrid
+ *   :layout="placements"
+ *   :editable="isEditing"
+ *   @layout-change="onLayoutChange">
+ *   <template #widget="{ item }">
+ *     <MyWidget :config="item" />
+ *   </template>
+ * </CnDashboardGrid>
+ */
+export default {
+	name: 'CnDashboardGrid',
+
+	props: {
+		/** Array of layout items: { id, gridX, gridY, gridWidth, gridHeight, ...extra } */
+		layout: {
+			type: Array,
+			required: true,
+		},
+		/** Whether drag and resize are enabled */
+		editable: {
+			type: Boolean,
+			default: false,
+		},
+		/** Number of grid columns */
+		columns: {
+			type: Number,
+			default: 12,
+		},
+		/** Cell height in pixels */
+		cellHeight: {
+			type: Number,
+			default: 80,
+		},
+		/** Grid margin in pixels */
+		margin: {
+			type: Number,
+			default: 12,
+		},
+		/** Minimum widget width in grid units */
+		minWidth: {
+			type: Number,
+			default: 2,
+		},
+		/** Minimum widget height in grid units */
+		minHeight: {
+			type: Number,
+			default: 2,
+		},
+	},
+
+	emits: ['layout-change'],
+
+	data() {
+		return {
+			grid: null,
+		}
+	},
+
+	watch: {
+		editable(val) {
+			if (!this.grid) return
+			if (val) {
+				this.grid.enable()
+			} else {
+				this.grid.disable()
+			}
+		},
+
+		layout: {
+			deep: true,
+			handler(newLayout) {
+				if (this.grid) {
+					this.syncGridItems(newLayout)
+				}
+			},
+		},
+	},
+
+	mounted() {
+		this.initGrid()
+	},
+
+	beforeDestroy() {
+		if (this.grid) {
+			this.grid.destroy(false)
+		}
+	},
+
+	methods: {
+		initGrid() {
+			const el = this.$refs.gridContainer.querySelector('.grid-stack')
+			this.grid = GridStack.init({
+				column: this.columns,
+				cellHeight: this.cellHeight,
+				margin: this.margin,
+				float: true,
+				animate: true,
+				disableDrag: !this.editable,
+				disableResize: !this.editable,
+				removable: false,
+			}, el)
+
+			this.grid.on('change', (_event, items) => {
+				this.handleGridChange(items)
+			})
+		},
+
+		handleGridChange(items) {
+			if (!items || items.length === 0) return
+
+			const updated = this.layout.map(item => {
+				const gridItem = items.find(gi => String(gi.id) === String(item.id))
+				if (gridItem) {
+					return {
+						...item,
+						gridX: gridItem.x,
+						gridY: gridItem.y,
+						gridWidth: gridItem.w,
+						gridHeight: gridItem.h,
+					}
+				}
+				return item
+			})
+
+			this.$emit('layout-change', updated)
+		},
+
+		syncGridItems(newLayout) {
+			// Add items that don't exist in grid yet
+			for (const item of newLayout) {
+				const exists = this.grid.engine.nodes.find(
+					n => String(n.id) === String(item.id),
+				)
+				if (!exists) {
+					this.$nextTick(() => {
+						const el = this.$refs.gridContainer.querySelector(`[gs-id="${item.id}"]`)
+						if (el) {
+							this.grid.makeWidget(el)
+						}
+					})
+				}
+			}
+
+			// Remove items no longer in layout
+			const ids = newLayout.map(i => String(i.id))
+			const toRemove = this.grid.engine.nodes.filter(
+				n => !ids.includes(String(n.id)),
+			)
+			for (const node of toRemove) {
+				const el = this.$refs.gridContainer.querySelector(`[gs-id="${node.id}"]`)
+				if (el) {
+					this.grid.removeWidget(el, false)
+				}
+			}
+		},
+	},
+}
+</script>
+
+<style scoped>
+.cn-dashboard-grid {
+	width: 100%;
+	min-height: 200px;
+}
+
+.grid-stack {
+	background: transparent;
+}
+
+:deep(.grid-stack-item-content) {
+	background: var(--color-main-background);
+	border-radius: 0;
+	border: none;
+	box-shadow: none;
+	overflow: hidden;
+}
+
+:deep(.grid-stack-item-content:has(.cn-widget-wrapper--borderless)) {
+	background: transparent;
+}
+
+:deep(.grid-stack-placeholder > .placeholder-content) {
+	background: var(--color-primary-element-light);
+	border: 2px dashed var(--color-primary-element);
+	border-radius: var(--border-radius-large);
+}
+</style>

package/src/components/CnDashboardGrid/index.js

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