feature: schema selector field #2217

Author: hassanad94

apps/sensenet/src/components/dialogs/dialogs.tsx

@@ -24,7 +24,7 @@ const ChangePasswordDialog = lazy(() => import('./change-password'))
 const DateRangePicker = lazy(() => import('./date-range-picker'))
 const AddDeleteUserGroups = lazy(() => import('./add-delete-user-groups'))
 const ColumnSettings = lazy(() => import('./column-settings'))
-const Operations = lazy(() => import('./operations'))
+const Operations = lazy(() => import('./operations/operations'))
 
 function dialogRenderer(dialog: DialogWithProps) {
   switch (dialog.name) {

apps/sensenet/src/components/dialogs/index.ts

@@ -19,4 +19,4 @@ export * from './restore'
 export * from './save-query'
 export * from './add-delete-user-groups'
 export * from './column-settings'
-export * from './operations'
+export * from './operations/operations'

apps/sensenet/src/components/dialogs/operations/influenceField.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+
+export type TInfluenceField = {
+  name?: string
+  description?: string
+  radioOptions: Array<{ optionTitle: string; influencedFieldId: string; value: string }>
+}
+
+export const InfluenceField: React.FC<TInfluenceField> = ({ name, description, radioOptions }) => {
+  return (
+    <div className="input-container">
+      <h3>{name}</h3>
+      <p>{description}</p>
+
+      {radioOptions.map((option) => {
+        const { optionTitle, value, influencedFieldId } = option
+
+        return (
+          <>
+            <input
+              type="radio"
+              id={optionTitle}
+              name={name}
+              value={optionTitle}
+              onClick={() => {
+                const element = document.getElementById(influencedFieldId) as HTMLInputElement
+
+                if (!element) {
+                  return
+                }
+
+                element.value = value
+              }}
+            />
+            <label htmlFor={optionTitle}>{optionTitle}</label>
+          </>
+        )
+      })}
+    </div>
+  )
+}

…et/src/components/dialogs/operations.tsx …onents/dialogs/operations/operations.tsxapps/sensenet/src/components/dialogs/operations.tsx renamed to apps/sensenet/src/components/dialogs/operations/operations.tsx apps/sensenet/src/components/dialogs/operations.tsx renamed to apps/sensenet/src/components/dialogs/operations/operations.tsx

@@ -2,11 +2,12 @@ import { Button, createStyles, DialogActions, DialogContent, makeStyles, TextFie
 import { GenericContent } from '@sensenet/default-content-types'
 import { useLogger, useRepository } from '@sensenet/hooks-react'
 import React, { useEffect, useRef, useState } from 'react'
-import { useCurrentUser } from '../../context'
-import { useGlobalStyles } from '../../globalStyles'
-import { useLocalization } from '../../hooks'
-import { Icon } from '../Icon'
-import { DialogTitle, useDialog } from '.'
+import { DialogTitle, useDialog } from '..'
+import { useCurrentUser } from '../../../context'
+import { useGlobalStyles } from '../../../globalStyles'
+import { useLocalization } from '../../../hooks'
+import { Icon } from '../../Icon'
+import { InfluenceField, TInfluenceField } from './influenceField'
 
 export interface OperationsDialogProps {
   content: GenericContent
@@ -15,16 +16,23 @@ export interface OperationsDialogProps {
 /*Ezt itt jól ki kell dolgozni!!! nem végleges csak demora van egyszerűsítve
   Valószínüleg nem is itt lesz a végleges helye hanem ott ahol a GenericContent van
 */
-type UIDescription = {
+
+type baseDescriptionFields = {
   title?: string
   submitTitle?: string
-  elements: Array<{
-    name?: string
-    description?: string
-    inputProps: React.HTMLProps<HTMLInputElement>
-  }>
 }
 
+type simpleInputField = {
+  name?: string
+  description?: string
+  inputProps: React.HTMLProps<HTMLInputElement>
+}
+
+type UIDescription =
+  | baseDescriptionFields & {
+      elements: Array<simpleInputField | TInfluenceField>
+    }
+
 type OperationResult = {
   ToastMessage?: string
 }
@@ -133,6 +141,10 @@ export function OperationsDialog(props: OperationsDialogProps) {
               submitAction(e)
             }}>
             {UIDescription?.elements.map((field, index) => {
+              if ('radioOptions' in field) {
+                return <InfluenceField {...field} key={index} />
+              }
+
               const { inputProps, description, name } = field
 
               return (

package.json

@@ -45,7 +45,7 @@
   },
   "scripts": {
     "postinstall": "husky install",
-       "cy:run:dms": "cypress run --project ./examples/sn-dms-demo",
+    "cy:run:dms": "cypress run --project ./examples/sn-dms-demo",
     "start:dms:e2e": "cross-env NODE_OPTIONS=--openssl-legacy-provider yarn workspace sn-dms-demo start:e2e",
     "test:dms:e2e": "cross-env NODE_OPTIONS=--openssl-legacy-provider start-server-and-test start:dms:e2e http-get://localhost:3000 cy:run:dms",
     "snapp": "yarn workspace @app/sensenet",
@@ -78,5 +78,6 @@
       "prettier --write"
     ]
   },
-  "dependencies": {}
+  "dependencies": {},
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }