-
- {{ setupCheck.name }}
+
-
-
+
@@ -92,6 +83,14 @@ function parseRichObject(message: string, parameters?: IRichObjectParameters): s
flex-direction: column;
// align with icon
padding-top: calc((var(--default-clickable-area) - 1lh) / 2);
+ width: 100%;
+ }
+
+ &__header {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ gap: var(--default-grid-baseline);
}
&__description {
diff --git a/apps/settings/src/composables/useRichArguments.ts b/apps/settings/src/composables/useRichArguments.ts
new file mode 100644
index 0000000000000..95468d6419d7d
--- /dev/null
+++ b/apps/settings/src/composables/useRichArguments.ts
@@ -0,0 +1,76 @@
+/*
+ * SPDX-FileCopyrightText: Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import type { MaybeRefOrGetter } from '@vueuse/core'
+import type { Component } from 'vue'
+import type { IRichObjectParameter, IRichObjectParameters } from '../settings-types.ts'
+
+import { toValue } from '@vueuse/core'
+import { computed } from 'vue'
+import NcUserBubble from '@nextcloud/vue/components/NcUserBubble'
+import UnknownArgument from '../components/RichArguments/UnknownArgument.vue'
+
+export interface IRichArgument {
+ component: Component
+ props: Record
+}
+
+/**
+ * Map an collection of rich text objects to rich arguments for the RichText component
+ *
+ * @param richObjects The rich text object
+ */
+export function mapRichObjectsToRichArguments(richObjects: IRichObjectParameters) {
+ const args: Record = {}
+
+ for (const richObjectName in richObjects) {
+ args[richObjectName] = mapRichObjectToRichArgument(richObjects[richObjectName])
+ }
+
+ return args
+}
+
+/**
+ * Map rich text object to rich argument for the RichText component
+ *
+ * @param richObject - The rich text object
+ */
+export function mapRichObjectToRichArgument(richObject: IRichObjectParameter): IRichArgument | string {
+ switch (richObject.type) {
+ case 'user':
+ return {
+ component: NcUserBubble as Component,
+ props: {
+ displayName: richObject.name,
+ user: richObject.id,
+ url: richObject.link,
+ },
+ }
+ case 'group':
+ return {
+ component: NcUserBubble as Component,
+ props: {
+ avatarImage: 'icon-group',
+ displayName: richObject.name,
+ url: richObject.link,
+ primary: true,
+ },
+ }
+ default:
+ return {
+ component: UnknownArgument,
+ props: richObject,
+ }
+ }
+}
+
+/**
+ * Reactively map rich objects to rich arguments for use with NcRichText
+ *
+ * @param objects Map of RichObjects
+ */
+export function useRichArguments(objects: MaybeRefOrGetter) {
+ return computed(() => mapRichObjectsToRichArguments(toValue(objects)))
+}
diff --git a/apps/settings/src/settings-types.ts b/apps/settings/src/settings-types.ts
index 53cb321929aa5..752a9391cf65f 100644
--- a/apps/settings/src/settings-types.ts
+++ b/apps/settings/src/settings-types.ts
@@ -4,8 +4,23 @@
*/
export interface IRichObjectParameter {
- [index: string]: string
+ /**
+ * ID of the rich object
+ */
+ id: string | number
+ /**
+ * Name of the rich object
+ */
+ name: string
+ /**
+ * Type of the rich object
+ */
type: string
+
+ /**
+ * Additional rich object properties
+ */
+ [key: string]: unknown
}
export type IRichObjectParameters = Record