@conduction/nextcloud-vue 0.1.0-beta.4 → 0.1.0-beta.5

package/src/components/CnWidgetRenderer/CnWidgetRenderer.vue

@@ -1,180 +1,180 @@
-<!--
-  CnWidgetRenderer — Renders Nextcloud Dashboard API widgets (v1/v2).
-
-  Loads widget items from the Nextcloud widget API and displays them
-  using NcDashboardWidget. Supports auto-refresh for widgets that
-  define a reload interval.
--->
-<template>
-	<div class="cn-widget-renderer">
-		<!-- API Widget V1 or V2 -->
-		<NcDashboardWidget
-			v-if="isApiWidget"
-			:items="widgetItems"
-			:show-more-url="widget.widgetUrl"
-			:loading="loading"
-			:item-menu="false"
-			:round-icons="widget.itemIconsRound">
-			<template #empty-content>
-				<NcEmptyContent
-					v-if="emptyMessage"
-					:description="emptyMessage">
-					<template #icon>
-						<span v-if="widget.iconClass" :class="widget.iconClass" />
-					</template>
-				</NcEmptyContent>
-			</template>
-		</NcDashboardWidget>
-
-		<!-- Loading state -->
-		<div v-else-if="loading" class="cn-widget-renderer__loading">
-			<NcLoadingIcon :size="32" />
-		</div>
-
-		<!-- Fallback for unknown widget types -->
-		<NcEmptyContent
-			v-else
-			:description="unavailableText">
-			<template #icon>
-				<AlertCircleOutline :size="48" />
-			</template>
-		</NcEmptyContent>
-	</div>
-</template>
-
-<script>
-import { NcDashboardWidget, NcEmptyContent, NcLoadingIcon } from '@nextcloud/vue'
-import AlertCircleOutline from 'vue-material-design-icons/AlertCircleOutline.vue'
-import axios from '@nextcloud/axios'
-import { generateOcsUrl } from '@nextcloud/router'
-
-/**
- * CnWidgetRenderer — Renders Nextcloud Dashboard API widgets.
- *
- * Fetches widget items from the OCS Dashboard API and displays them
- * using the standard NcDashboardWidget component.
- *
- * @example
- * <CnWidgetRenderer :widget="ncWidget" />
- */
-export default {
-	name: 'CnWidgetRenderer',
-
-	components: {
-		NcDashboardWidget,
-		NcEmptyContent,
-		NcLoadingIcon,
-		AlertCircleOutline,
-	},
-
-	props: {
-		/**
-		 * Nextcloud widget object from the Dashboard API.
-		 * @type {{ id: string, title: string, iconClass?: string, iconUrl?: string, widgetUrl?: string, itemIconsRound?: boolean, itemApiVersions?: number[], reloadInterval?: number, buttons?: Array }}
-		 */
-		widget: {
-			type: Object,
-			required: true,
-		},
-		/** Text shown when widget is not available */
-		unavailableText: {
-			type: String,
-			default: 'Widget not available',
-		},
-	},
-
-	data() {
-		return {
-			loading: false,
-			items: [],
-			emptyMessage: '',
-			refreshInterval: null,
-		}
-	},
-
-	computed: {
-		isApiWidgetV2() {
-			return this.widget?.itemApiVersions?.includes(2)
-		},
-
-		isApiWidgetV1() {
-			return this.widget?.itemApiVersions?.includes(1)
-		},
-
-		isApiWidget() {
-			return this.isApiWidgetV1 || this.isApiWidgetV2
-		},
-
-		widgetItems() {
-			return this.items.map(item => ({
-				id: item.sinceId || item.id || String(Math.random()),
-				targetUrl: item.link || item.targetUrl || '',
-				avatarUrl: item.iconUrl || item.avatarUrl || '',
-				avatarUsername: item.avatarUsername || '',
-				overlayIconUrl: item.overlayIconUrl || '',
-				mainText: item.title || item.mainText || '',
-				subText: item.subtitle || item.subText || '',
-			}))
-		},
-	},
-
-	async mounted() {
-		if (this.isApiWidget) {
-			await this.loadItems()
-
-			if (this.widget.reloadInterval && this.widget.reloadInterval > 0) {
-				this.refreshInterval = setInterval(
-					() => this.loadItems(),
-					this.widget.reloadInterval * 1000,
-				)
-			}
-		}
-	},
-
-	beforeDestroy() {
-		if (this.refreshInterval) {
-			clearInterval(this.refreshInterval)
-		}
-	},
-
-	methods: {
-		async loadItems() {
-			this.loading = true
-			try {
-				const version = this.isApiWidgetV2 ? 2 : 1
-				const url = generateOcsUrl(
-					`/apps/dashboard/api/v${version}/widget-items`,
-				)
-				const response = await axios.get(url, {
-					params: { widgets: [this.widget.id] },
-				})
-
-				const data = response.data?.ocs?.data
-				if (data && data[this.widget.id]) {
-					const widgetData = data[this.widget.id]
-					this.items = widgetData.items || widgetData || []
-					this.emptyMessage = widgetData.emptyContentMessage || ''
-				}
-			} catch (error) {
-				console.error(`[CnWidgetRenderer] Failed to load items for ${this.widget.id}:`, error)
-			} finally {
-				this.loading = false
-			}
-		},
-	},
-}
-</script>
-
-<style scoped>
-.cn-widget-renderer {
-	height: 100%;
-	padding: 8px;
-}
-
-.cn-widget-renderer__loading {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	height: 100%;
-}
-</style>
+<!--
+  CnWidgetRenderer — Renders Nextcloud Dashboard API widgets (v1/v2).
+
+  Loads widget items from the Nextcloud widget API and displays them
+  using NcDashboardWidget. Supports auto-refresh for widgets that
+  define a reload interval.
+-->
+<template>
+	<div class="cn-widget-renderer">
+		<!-- API Widget V1 or V2 -->
+		<NcDashboardWidget
+			v-if="isApiWidget"
+			:items="widgetItems"
+			:show-more-url="widget.widgetUrl"
+			:loading="loading"
+			:item-menu="false"
+			:round-icons="widget.itemIconsRound">
+			<template #empty-content>
+				<NcEmptyContent
+					v-if="emptyMessage"
+					:description="emptyMessage">
+					<template #icon>
+						<span v-if="widget.iconClass" :class="widget.iconClass" />
+					</template>
+				</NcEmptyContent>
+			</template>
+		</NcDashboardWidget>
+
+		<!-- Loading state -->
+		<div v-else-if="loading" class="cn-widget-renderer__loading">
+			<NcLoadingIcon :size="32" />
+		</div>
+
+		<!-- Fallback for unknown widget types -->
+		<NcEmptyContent
+			v-else
+			:description="unavailableText">
+			<template #icon>
+				<AlertCircleOutline :size="48" />
+			</template>
+		</NcEmptyContent>
+	</div>
+</template>
+
+<script>
+import { NcDashboardWidget, NcEmptyContent, NcLoadingIcon } from '@nextcloud/vue'
+import AlertCircleOutline from 'vue-material-design-icons/AlertCircleOutline.vue'
+import axios from '@nextcloud/axios'
+import { generateOcsUrl } from '@nextcloud/router'
+
+/**
+ * CnWidgetRenderer — Renders Nextcloud Dashboard API widgets.
+ *
+ * Fetches widget items from the OCS Dashboard API and displays them
+ * using the standard NcDashboardWidget component.
+ *
+ * @example
+ * <CnWidgetRenderer :widget="ncWidget" />
+ */
+export default {
+	name: 'CnWidgetRenderer',
+
+	components: {
+		NcDashboardWidget,
+		NcEmptyContent,
+		NcLoadingIcon,
+		AlertCircleOutline,
+	},
+
+	props: {
+		/**
+		 * Nextcloud widget object from the Dashboard API.
+		 * @type {{ id: string, title: string, iconClass?: string, iconUrl?: string, widgetUrl?: string, itemIconsRound?: boolean, itemApiVersions?: number[], reloadInterval?: number, buttons?: Array }}
+		 */
+		widget: {
+			type: Object,
+			required: true,
+		},
+		/** Text shown when widget is not available */
+		unavailableText: {
+			type: String,
+			default: 'Widget not available',
+		},
+	},
+
+	data() {
+		return {
+			loading: false,
+			items: [],
+			emptyMessage: '',
+			refreshInterval: null,
+		}
+	},
+
+	computed: {
+		isApiWidgetV2() {
+			return this.widget?.itemApiVersions?.includes(2)
+		},
+
+		isApiWidgetV1() {
+			return this.widget?.itemApiVersions?.includes(1)
+		},
+
+		isApiWidget() {
+			return this.isApiWidgetV1 || this.isApiWidgetV2
+		},
+
+		widgetItems() {
+			return this.items.map(item => ({
+				id: item.sinceId || item.id || String(Math.random()),
+				targetUrl: item.link || item.targetUrl || '',
+				avatarUrl: item.iconUrl || item.avatarUrl || '',
+				avatarUsername: item.avatarUsername || '',
+				overlayIconUrl: item.overlayIconUrl || '',
+				mainText: item.title || item.mainText || '',
+				subText: item.subtitle || item.subText || '',
+			}))
+		},
+	},
+
+	async mounted() {
+		if (this.isApiWidget) {
+			await this.loadItems()
+
+			if (this.widget.reloadInterval && this.widget.reloadInterval > 0) {
+				this.refreshInterval = setInterval(
+					() => this.loadItems(),
+					this.widget.reloadInterval * 1000,
+				)
+			}
+		}
+	},
+
+	beforeDestroy() {
+		if (this.refreshInterval) {
+			clearInterval(this.refreshInterval)
+		}
+	},
+
+	methods: {
+		async loadItems() {
+			this.loading = true
+			try {
+				const version = this.isApiWidgetV2 ? 2 : 1
+				const url = generateOcsUrl(
+					`/apps/dashboard/api/v${version}/widget-items`,
+				)
+				const response = await axios.get(url, {
+					params: { widgets: [this.widget.id] },
+				})
+
+				const data = response.data?.ocs?.data
+				if (data && data[this.widget.id]) {
+					const widgetData = data[this.widget.id]
+					this.items = widgetData.items || widgetData || []
+					this.emptyMessage = widgetData.emptyContentMessage || ''
+				}
+			} catch (error) {
+				console.error(`[CnWidgetRenderer] Failed to load items for ${this.widget.id}:`, error)
+			} finally {
+				this.loading = false
+			}
+		},
+	},
+}
+</script>
+
+<style scoped>
+.cn-widget-renderer {
+	height: 100%;
+	padding: 8px;
+}
+
+.cn-widget-renderer__loading {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: 100%;
+}
+</style>