Implemented notification recipients endpoint

assets/js/src/core/modules/notifications/send-notification/components/notification-form/notification-form.tsx

@@ -0,0 +1,74 @@
+/**
+ * This source file is available under the terms of the
+ * Pimcore Open Core License (POCL)
+ * Full copyright and license information is available in
+ * LICENSE.md which is distributed with this source code.
+ *
+ *  @copyright  Copyright (c) Pimcore GmbH (https://www.pimcore.com)
+ *  @license    Pimcore Open Core License (POCL)
+ */
+
+import { Form, FormKit, Input, TextArea } from '@sdk/components'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { UserSelect } from '../user-select/user-select'
+import { ManyToOneRelation } from '@Pimcore/components/many-to-one-relation'
+import { type FormInstance } from 'antd'
+
+interface NotificationFormProps {
+  form: FormInstance
+}
+
+export const NotificationForm = ({ form }: NotificationFormProps): React.JSX.Element => {
+  const { t } = useTranslation()
+
+  return (
+    <FormKit
+      formProps={ {
+        form
+      } }
+    >
+      <Form.Item
+        label={ t('user-menu.notification.modal.to') }
+        name={ 'to' }
+        rules={ [{ required: true, message: t('user-menu.notification.modal.form.validation.provide-recipient') }] }
+      >
+        <UserSelect
+          onChange={ (value) => {
+            form.setFieldValue('to', value)
+          } }
+          optionFilterProp="label"
+          placeholder={ t('user-menu.notification.modal.select') }
+          showSearch
+        />
+      </Form.Item>
+      <Form.Item
+        label={ t('user-menu.notification.modal.title') }
+        name={ 'title' }
+        rules={ [{ required: true, message: t('user-menu.notification.modal.form.validation.provide-title') }] }
+      >
+        <Input />
+      </Form.Item>
+
+      <Form.Item
+        label={ t('user-menu.notification.modal.message') }
+        name={ 'message' }
+        rules={ [{ required: true, message: t('user-menu.notification.modal.form.validation.provide-message') }] }
+      >
+        <TextArea />
+      </Form.Item>
+
+      <Form.Item
+        label={ t('user-menu.notification.modal.add-an-attachment') }
+        name={ 'attachment' }
+      >
+        <ManyToOneRelation
+          allowToClearRelation
+          assetsAllowed
+          dataObjectsAllowed
+          documentsAllowed
+        />
+      </Form.Item>
+    </FormKit>
+  )
+}

assets/js/src/core/modules/notifications/send-notification/components/user-select/user-select.tsx

@@ -0,0 +1,32 @@
+/**
+ * This source file is available under the terms of the
+ * Pimcore Open Core License (POCL)
+ * Full copyright and license information is available in
+ * LICENSE.md which is distributed with this source code.
+ *
+ *  @copyright  Copyright (c) Pimcore GmbH (https://www.pimcore.com)
+ *  @license    Pimcore Open Core License (POCL)
+ */
+
+import { Select, type SelectProps } from '@Pimcore/components/select/select'
+import { useNotificationGetRecipientsQuery } from '@Pimcore/modules/notifications/notifications-slice.gen'
+import React from 'react'
+
+interface UserSelectProps extends SelectProps { }
+
+export const UserSelect = ({ ...selectProps }: UserSelectProps): React.JSX.Element => {
+  const { data, isLoading } = useNotificationGetRecipientsQuery()
+
+  const options = data?.items.map((user) => ({
+    label: user.recipientName,
+    value: user.id
+  })) ?? []
+
+  return (
+    <Select
+      loading={ isLoading }
+      options={ options }
+      { ...selectProps }
+    />
+  )
+}

assets/js/src/core/modules/notifications/send-notification/send-notification-modal.tsx

@@ -10,16 +10,13 @@
 
 import { Form } from '@Pimcore/components/form/form'
 import { WindowModal } from '@Pimcore/components/modal/window-modal/window-modal'
-import { ManyToOneRelation } from '@Pimcore/modules/element/dynamic-types/definitions/objects/data-related/components/many-to-one-relation/many-to-one-relation'
 import { FieldWidthProvider } from '@Pimcore/modules/element/dynamic-types/definitions/objects/data-related/providers/field-width/field-width-provider'
+import { Button, Flex, Icon, ModalFooter, useMessage } from '@sdk/components'
+import { GeneralError, trackError } from '@sdk/modules/app'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { useNotification } from '../hooks/use-send-notification'
-import { UserSelect } from '../../user/components/user-select/user-select'
-import { Input } from '@Pimcore/components/input/input'
-import { TextArea } from '@Pimcore/components/textarea/textarea'
-import { GeneralError, trackError } from '@sdk/modules/app'
-import { Button, Icon, ModalFooter, Flex, useMessage } from '@sdk/components'
+import { NotificationForm } from './components/notification-form/notification-form'
 
 interface SendNotificationModalProps {
   open: boolean
@@ -83,52 +80,7 @@ export const SendNotificationModal = ({ open, ...props }: SendNotificationModalP
       zIndex={ 1000 }
     >
       <FieldWidthProvider>
-        <Form
-          form={ form }
-          layout="vertical"
-        >
-          <Form.Item
-            label={ t('user-menu.notification.modal.to') }
-            name={ 'to' }
-            rules={ [{ required: true, message: t('user-menu.notification.modal.form.validation.provide-recipient') }] }
-          >
-            <UserSelect
-              onChange={ (value) => {
-                form.setFieldValue('to', value)
-              } }
-              optionFilterProp="label"
-              placeholder={ t('user-menu.notification.modal.select') }
-              showSearch
-            />
-          </Form.Item>
-          <Form.Item
-            label={ t('user-menu.notification.modal.title') }
-            name={ 'title' }
-            rules={ [{ required: true, message: t('user-menu.notification.modal.form.validation.provide-title') }] }
-          >
-            <Input />
-          </Form.Item>
-
-          <Form.Item
-            label={ t('user-menu.notification.modal.message') }
-            name={ 'message' }
-            rules={ [{ required: true, message: t('user-menu.notification.modal.form.validation.provide-message') }] }
-          >
-            <TextArea />
-          </Form.Item>
-
-          <Form.Item
-            label={ t('user-menu.notification.modal.add-an-attachment') }
-            name={ 'attachment' }
-          >
-            <ManyToOneRelation
-              allowToClearRelation
-              assetsAllowed
-              dataObjectsAllowed
-              documentsAllowed
-            />
-          </Form.Item>
-        </Form>
+        <NotificationForm form={ form } />
       </FieldWidthProvider>
     </WindowModal>
   )