@conduction/nextcloud-vue 0.1.0-beta.1

package/src/components/CnMassDeleteDialog/CnMassDeleteDialog.vue

@@ -0,0 +1,238 @@
+<template>
+	<NcDialog
+		:name="dialogTitle"
+		size="normal"
+		:can-close="!loading"
+		@closing="$emit('close')">
+		<!-- Review phase -->
+		<div v-if="result === null" class="cn-mass-delete__review">
+			<NcNoteCard type="warning">
+				{{ warningText }}
+			</NcNoteCard>
+
+			<div class="cn-mass-delete__list">
+				<div
+					v-for="item in localItems"
+					:key="item.id"
+					class="cn-mass-delete__item">
+					<span class="cn-mass-delete__item-name">
+						{{ getItemName(item) }}
+					</span>
+					<NcButton
+						type="tertiary"
+						:aria-label="removeLabel"
+						@click="removeItem(item.id)">
+						<template #icon>
+							<Close :size="16" />
+						</template>
+					</NcButton>
+				</div>
+			</div>
+
+			<p v-if="localItems.length === 0" class="cn-mass-delete__empty">
+				{{ emptyText }}
+			</p>
+		</div>
+
+		<!-- Result phase -->
+		<div v-else class="cn-mass-delete__result">
+			<NcNoteCard v-if="result.success" type="success">
+				{{ successText }}
+			</NcNoteCard>
+			<NcNoteCard v-if="result.error" type="error">
+				{{ result.error }}
+			</NcNoteCard>
+		</div>
+
+		<template #actions>
+			<NcButton @click="$emit('close')">
+				{{ result === null ? cancelLabel : closeLabel }}
+			</NcButton>
+			<NcButton
+				v-if="result === null"
+				type="error"
+				:disabled="loading || localItems.length === 0"
+				@click="executeDelete">
+				<template #icon>
+					<NcLoadingIcon v-if="loading" :size="20" />
+					<TrashCanOutline v-else :size="20" />
+				</template>
+				{{ confirmLabel }}
+			</NcButton>
+		</template>
+	</NcDialog>
+</template>
+
+<script>
+import { NcDialog, NcButton, NcNoteCard, NcLoadingIcon } from '@nextcloud/vue'
+import TrashCanOutline from 'vue-material-design-icons/TrashCanOutline.vue'
+import Close from 'vue-material-design-icons/Close.vue'
+
+/**
+ * CnMassDeleteDialog — Two-phase mass delete confirmation dialog.
+ *
+ * Phase 1 (review): Shows the items to be deleted with the ability to remove
+ * individual items before confirming. Phase 2 (result): Shows success or error.
+ *
+ * The dialog does NOT perform the delete itself — it emits a `confirm` event
+ * with the item IDs. The parent component performs the actual API call and
+ * calls `setResult()` via a ref.
+ *
+ * @example
+ * <CnMassDeleteDialog
+ *   v-if="showDeleteDialog"
+ *   :items="selectedObjects"
+ *   :name-field="'title'"
+ *   @confirm="onDeleteConfirm"
+ *   @close="showDeleteDialog = false" />
+ *
+ * // In methods:
+ * async onDeleteConfirm(ids) {
+ *   try {
+ *     await store.massDelete(ids)
+ *     this.$refs.deleteDialog.setResult({ success: true })
+ *   } catch (e) {
+ *     this.$refs.deleteDialog.setResult({ error: e.message })
+ *   }
+ * }
+ */
+export default {
+	name: 'CnMassDeleteDialog',
+
+	components: {
+		NcDialog,
+		NcButton,
+		NcNoteCard,
+		NcLoadingIcon,
+		TrashCanOutline,
+		Close,
+	},
+
+	props: {
+		/** Items to delete. Each must have an `id` property. */
+		items: {
+			type: Array,
+			required: true,
+		},
+		/** Property name used for display (e.g., 'title', 'name') */
+		nameField: {
+			type: String,
+			default: 'title',
+		},
+		/** Dialog title */
+		dialogTitle: {
+			type: String,
+			default: 'Delete Items',
+		},
+		/** Warning text shown above the item list */
+		warningText: {
+			type: String,
+			default: 'The following items will be permanently deleted. Remove any items you want to keep.',
+		},
+		/** Text when all items removed from list */
+		emptyText: {
+			type: String,
+			default: 'No items selected for deletion.',
+		},
+		/** Success message */
+		successText: {
+			type: String,
+			default: 'Items successfully deleted.',
+		},
+		cancelLabel: { type: String, default: 'Cancel' },
+		closeLabel: { type: String, default: 'Close' },
+		confirmLabel: { type: String, default: 'Delete' },
+		removeLabel: { type: String, default: 'Remove from list' },
+	},
+
+	data() {
+		return {
+			localItems: [...this.items],
+			loading: false,
+			result: null,
+			closeTimeout: null,
+		}
+	},
+
+	watch: {
+		items(val) {
+			this.localItems = [...val]
+		},
+	},
+
+	beforeDestroy() {
+		if (this.closeTimeout) clearTimeout(this.closeTimeout)
+	},
+
+	methods: {
+		getItemName(item) {
+			return item[this.nameField] || item.name || item.title || item.id
+		},
+
+		removeItem(id) {
+			this.localItems = this.localItems.filter((i) => i.id !== id)
+		},
+
+		executeDelete() {
+			this.loading = true
+			const ids = this.localItems.map((i) => i.id)
+			/**
+			 * @event confirm Emitted when the user confirms deletion.
+			 * Payload: array of item IDs to delete.
+			 */
+			this.$emit('confirm', ids)
+		},
+
+		/**
+		 * Set the result of the delete operation. Call this from the parent
+		 * after the API call completes.
+		 *
+		 * @param {{ success?: boolean, error?: string }} resultData
+		 * @public
+		 */
+		setResult(resultData) {
+			this.loading = false
+			this.result = resultData
+			if (resultData.success) {
+				this.closeTimeout = setTimeout(() => {
+					this.$emit('close')
+				}, 2000)
+			}
+		},
+	},
+}
+</script>
+
+<style scoped>
+.cn-mass-delete__list {
+	max-height: 300px;
+	overflow-y: auto;
+	margin-top: 12px;
+}
+
+.cn-mass-delete__item {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 8px 12px;
+	border-bottom: 1px solid var(--color-border);
+}
+
+.cn-mass-delete__item:last-child {
+	border-bottom: none;
+}
+
+.cn-mass-delete__item-name {
+	font-weight: 500;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.cn-mass-delete__empty {
+	text-align: center;
+	color: var(--color-text-maxcontrast);
+	font-style: italic;
+	padding: 20px;
+}
+</style>

package/src/components/CnMassDeleteDialog/index.js

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

package/src/components/CnMassExportDialog/CnMassExportDialog.vue

@@ -0,0 +1,190 @@
+<template>
+	<NcDialog
+		:name="dialogTitle"
+		size="small"
+		:can-close="!loading"
+		@closing="$emit('close')">
+		<!-- Result phase -->
+		<div v-if="result !== null" class="cn-mass-export__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-mass-export__form">
+			<p v-if="description" class="cn-mass-export__description">
+				{{ description }}
+			</p>
+
+			<div class="cn-mass-export__field">
+				<label for="cn-mass-export-format">{{ formatLabel }}</label>
+				<NcSelect
+					input-id="cn-mass-export-format"
+					:options="formatOptions"
+					:value="selectedFormat"
+					:clearable="false"
+					@input="selectedFormat = $event" />
+			</div>
+		</div>
+
+		<template #actions>
+			<NcButton @click="$emit('close')">
+				{{ result !== null ? closeLabel : cancelLabel }}
+			</NcButton>
+			<NcButton
+				v-if="result === null"
+				type="primary"
+				:disabled="loading"
+				@click="executeExport">
+				<template #icon>
+					<NcLoadingIcon v-if="loading" :size="20" />
+					<ExportIcon v-else :size="20" />
+				</template>
+				{{ confirmLabel }}
+			</NcButton>
+		</template>
+	</NcDialog>
+</template>
+
+<script>
+import { NcDialog, NcButton, NcNoteCard, NcLoadingIcon, NcSelect } from '@nextcloud/vue'
+import ExportIcon from 'vue-material-design-icons/Export.vue'
+
+/**
+ * CnMassExportDialog — Export dialog with format selection.
+ *
+ * Allows users to select an export format and triggers the export.
+ * The parent handles the actual download. Based on the OpenRegister
+ * ExportRegister pattern.
+ *
+ * @example
+ * <CnMassExportDialog
+ *   v-if="showExportDialog"
+ *   ref="exportDialog"
+ *   description="Export 42 objects from Cases"
+ *   @confirm="onExportConfirm"
+ *   @close="showExportDialog = false" />
+ *
+ * // In methods:
+ * async onExportConfirm({ format }) {
+ *   try {
+ *     const response = await axios({
+ *       url: `/api/objects/export`,
+ *       method: 'GET',
+ *       params: { type: format },
+ *       responseType: 'blob',
+ *     })
+ *     // Trigger download...
+ *     this.$refs.exportDialog.setResult({ success: true })
+ *   } catch (e) {
+ *     this.$refs.exportDialog.setResult({ error: e.message })
+ *   }
+ * }
+ */
+export default {
+	name: 'CnMassExportDialog',
+
+	components: {
+		NcDialog,
+		NcButton,
+		NcNoteCard,
+		NcLoadingIcon,
+		NcSelect,
+		ExportIcon,
+	},
+
+	props: {
+		/** Dialog title */
+		dialogTitle: {
+			type: String,
+			default: 'Export Objects',
+		},
+		/** Description text shown above the format selector */
+		description: {
+			type: String,
+			default: '',
+		},
+		/** Available export formats */
+		formats: {
+			type: Array,
+			default: () => [
+				{ id: 'excel', label: 'Excel (.xlsx)' },
+				{ id: 'csv', label: 'CSV (.csv)' },
+			],
+		},
+		/** Default selected format ID */
+		defaultFormat: {
+			type: String,
+			default: 'excel',
+		},
+		/** Success message */
+		successText: {
+			type: String,
+			default: 'Export completed successfully.',
+		},
+		formatLabel: { type: String, default: 'Export format' },
+		cancelLabel: { type: String, default: 'Cancel' },
+		closeLabel: { type: String, default: 'Close' },
+		confirmLabel: { type: String, default: 'Export' },
+	},
+
+	data() {
+		const defaultOption = this.formats.find((f) => f.id === this.defaultFormat) || this.formats[0]
+		return {
+			selectedFormat: defaultOption,
+			loading: false,
+			result: null,
+			closeTimeout: null,
+		}
+	},
+
+	beforeDestroy() {
+		if (this.closeTimeout) clearTimeout(this.closeTimeout)
+	},
+
+	methods: {
+		executeExport() {
+			this.loading = true
+			this.$emit('confirm', {
+				format: this.selectedFormat.id,
+			})
+		},
+
+		/**
+		 * Set the result of the export operation.
+		 * @param {{ success?: boolean, error?: string }} resultData
+		 * @public
+		 */
+		setResult(resultData) {
+			this.loading = false
+			this.result = resultData
+			if (resultData.success) {
+				this.closeTimeout = setTimeout(() => {
+					this.$emit('close')
+				}, 2000)
+			}
+		},
+	},
+}
+</script>
+
+<style scoped>
+.cn-mass-export__description {
+	margin-bottom: 16px;
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-mass-export__field {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+}
+
+.cn-mass-export__field label {
+	font-weight: 600;
+}
+</style>

package/src/components/CnMassExportDialog/index.js

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