@evenicanpm/admin-integrate 1.8.0 → 2.0.0

package/documents/ProcessTask/fragments.ts

@@ -232,6 +232,8 @@ export const PROCESS_TASK_FRAGMENT_XL = gql`
             helpText
             validationRegex
             queryName
+            validationQueryOnCheck
+            validationQueryOnSubmit
             created
             modified
             schemas {
@@ -243,7 +245,9 @@ export const PROCESS_TASK_FRAGMENT_XL = gql`
               validationRegex
               options {
                 id
+                sort
                 label
+                optionValue
               }
               sort
               isRequired

package/documents/ProcessTemplate/fragments.ts

@@ -24,6 +24,8 @@ export const PROCESS_TEMPLATE_FRAGMENT = gql`
         helpText
         validationRegex
         queryName
+        validationQueryOnCheck
+        validationQueryOnSubmit
         created
         modified
         defaultValue
@@ -36,7 +38,9 @@ export const PROCESS_TEMPLATE_FRAGMENT = gql`
           validationRegex
           options {
             id
+            sort
             label
+            optionValue
           }
           sort
           isRequired
@@ -72,3 +76,29 @@ export const PROCESS_TEMPLATE_GROUP_FRAGMENT = gql`
     isActive
   }
 `;
+
+export const WIZARD_FIELD_VALIDATION_FRAGMENT = gql`
+  fragment WizardFieldValidationFragment on WizardFieldValidationResult {
+    fieldName
+    isValid
+    message
+  }
+`;
+
+export const FIELD_VALUE_FRAGMENT = gql`
+  fragment FieldValueFragment on FieldValue {
+    name
+    value
+  }
+`;
+
+export const FIELD_VALUE_RESULT_FRAGMENT = gql`
+  ${FIELD_VALUE_FRAGMENT}
+  fragment FieldValueResultFragment on FieldValueResult {
+    fieldName
+    message
+    values {
+      ...FieldValueFragment
+    }
+  }
+`;

package/documents/ProcessTemplate/list.ts

@@ -1,9 +1,11 @@
 import { gql } from "graphql-request";
 
 import {
+	FIELD_VALUE_RESULT_FRAGMENT,
 	PROCESS_TEMPLATE_FRAGMENT_XS,
 	PROCESS_TEMPLATE_GROUP_FRAGMENT,
 	PROCESS_TEMPLATE_RECORD_FRAGMENT,
+	WIZARD_FIELD_VALIDATION_FRAGMENT,
 } from "./fragments";
 
 const _GetProcessTemplateRecords = gql`
@@ -65,3 +67,30 @@ const _GetProcessTemplates = gql`
     }
   }
 `;
+
+export const VALIDATE_FIELD_ON_CHECK = gql`
+  ${WIZARD_FIELD_VALIDATION_FRAGMENT}
+  query ValidateFieldOnCheck($input: WizardFieldCheckValidationInput) {
+    validateFieldOnCheck(input: $input) {
+      ...WizardFieldValidationFragment
+    }
+  }
+`;
+
+export const VALIDATE_FIELD_ON_SUBMIT = gql`
+  ${WIZARD_FIELD_VALIDATION_FRAGMENT}
+  query ValidateFieldOnSubmit($input: [WizardFieldValidationInput]) {
+    validateFieldOnSubmit(input: $input) {
+      ...WizardFieldValidationFragment
+    }
+  }
+`;
+
+export const GET_FIELD_VALUES = gql`
+  ${FIELD_VALUE_RESULT_FRAGMENT}
+  query GetFieldValues($input: WizardFieldValidationInput) {
+    getFieldValues(input: $input) {
+      ...FieldValueResultFragment
+    }
+  }
+`;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@evenicanpm/admin-integrate",
-	"version": "1.8.0",
+	"version": "2.0.0",
 	"description": "e4Integrate Admin Panel",
 	"type": "module",
 	"scripts": {
@@ -21,5 +21,5 @@
 		"elkjs": "^0.10.0",
 		"lodash": "^4.17.21"
 	},
-	"gitHead": "485f77c5cce7c36849fb9d416d1e503d0f9299a3"
+	"gitHead": "7552c1e700a0027b8a65506c77cb10dae092fdfb"
 }

package/src/api/process-config/mutation/process-config-import.mutation.ts

@@ -1,7 +1,7 @@
 import type { ConfigurationImportMutationVariables } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { queryFn } from "./process-config-import.server";
 import { buildConfigurationExportQueryKey } from "../../../api/configuration/queries/configuration-export.query";
+import { queryFn } from "./process-config-import.server";
 
 export const buildProcessScheduleGroupDetailsQueryKey = {
 	all: () => ["configurationImport"] as const,

package/src/api/templates/queries/get-field-values.query.ts

@@ -0,0 +1,48 @@
+import type { GetFieldValuesQueryVariables } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+import {
+	type QueryClient,
+	type UseQueryOptions,
+	useQuery,
+} from "@tanstack/react-query";
+import { queryFn } from "./get-field-values.server";
+
+export const buildGetFieldValuesQueryKey = {
+	all: () => ["getFieldValues"] as const,
+	byInput: (variables?: GetFieldValuesQueryVariables) => [
+		"getFieldValues",
+		variables,
+	],
+};
+
+export const getFieldValues = {
+	queryKey: buildGetFieldValuesQueryKey.all(),
+
+	prefetch: (
+		queryClient: QueryClient,
+		variables: GetFieldValuesQueryVariables,
+	) =>
+		queryClient.prefetchQuery({
+			queryKey: buildGetFieldValuesQueryKey.byInput(variables),
+			queryFn: () => queryFn(variables),
+		}),
+
+	fetchData: async (
+		queryClient: QueryClient,
+		variables: GetFieldValuesQueryVariables,
+	) => {
+		return await queryClient.fetchQuery({
+			queryKey: buildGetFieldValuesQueryKey.byInput(variables),
+			queryFn: () => queryFn(variables),
+		});
+	},
+
+	useData: (
+		variables: GetFieldValuesQueryVariables,
+		options?: UseQueryOptions,
+	) =>
+		useQuery({
+			queryKey: buildGetFieldValuesQueryKey.byInput(variables),
+			queryFn: () => queryFn(variables),
+			...options,
+		}),
+};

package/src/api/templates/queries/get-field-values.server.ts

@@ -0,0 +1,9 @@
+"use server";
+import type { GetFieldValuesQueryVariables } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+import createGraphqlclient from "@evenicanpm/admin-core/api/sdk/graphqlClient.client";
+
+export const queryFn = async (variables: GetFieldValuesQueryVariables) => {
+	const sdk = await createGraphqlclient();
+	const { data } = await sdk.GetFieldValues(variables);
+	return data;
+};

package/src/api/templates/queries/index.ts

@@ -1,3 +1,7 @@
+export {
+	buildGetFieldValuesQueryKey,
+	getFieldValues,
+} from "./get-field-values.query";
 export { getProcessTemplate } from "./get-process-template.query";
 export { getProcessTemplateGroups } from "./get-process-template-groups.query";
 export { getProcessTemplateRecords } from "./get-process-template-records.query";

package/src/api/templates/queries/types.ts

@@ -1,10 +1,10 @@
 import type {
+	CheckUniqueIdentifierQuery,
+	CheckUniqueIdentifierQueryVariables,
 	GetDataDescriptionsQuery,
 	GetDataDescriptionsQueryVariables,
 	GetSourceEndpointsQuery,
 	GetSourceEndpointsQueryVariables,
-	CheckUniqueIdentifierQuery,
-	CheckUniqueIdentifierQueryVariables,
 } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
 
 export type TemplateInputSearchQueryVariables =

package/src/api/templates/queries/validate-field-on-check.query.ts

@@ -0,0 +1,22 @@
+import type {
+	WizardFieldCheckValidationInput,
+	WizardFieldValidationResult,
+} from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+import { type UseQueryOptions, useQuery } from "@tanstack/react-query";
+import { queryFn } from "./validate-field-on-check.server";
+
+export const buildValidateFieldOnCheckQueryKey = (
+	variables: WizardFieldCheckValidationInput,
+) => ["validateFieldOnCheck", variables] as const;
+
+export const validateFieldOnCheckQuery = {
+	useData: (
+		variables: WizardFieldCheckValidationInput,
+		options?: UseQueryOptions<WizardFieldValidationResult | null>,
+	) =>
+		useQuery({
+			queryKey: buildValidateFieldOnCheckQueryKey(variables),
+			queryFn: () => queryFn(variables),
+			...options,
+		}),
+};

package/src/api/templates/queries/validate-field-on-check.server.ts

@@ -0,0 +1,30 @@
+"use server";
+
+import type {
+	ValidateFieldOnCheckQueryVariables,
+	WizardFieldCheckValidationInput,
+	WizardFieldValidationResult,
+} from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+import createGraphqlclient from "@evenicanpm/admin-core/api/sdk/graphqlClient.client";
+
+export const queryFn = async (
+	variables: WizardFieldCheckValidationInput,
+): Promise<WizardFieldValidationResult | null> => {
+	const sdk = await createGraphqlclient();
+	const { data } = await sdk.ValidateFieldOnCheck({
+		input: {
+			fieldId: variables.fieldId,
+			fieldName: variables.fieldName,
+			value: variables.value,
+		},
+	});
+	return data?.validateFieldOnCheck ?? null;
+};
+
+export async function validateFieldOnCheck(
+	payload: ValidateFieldOnCheckQueryVariables,
+): Promise<WizardFieldValidationResult | null> {
+	const sdk = await createGraphqlclient();
+	const { data } = await sdk.ValidateFieldOnCheck(payload);
+	return data?.validateFieldOnCheck ?? null;
+}

package/src/api/templates/queries/validate-field-on-submit.server.ts

@@ -0,0 +1,18 @@
+"use server";
+
+import type {
+	WizardFieldValidationInput,
+	WizardFieldValidationResult,
+} from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+import createGraphqlclient from "@evenicanpm/admin-core/api/sdk/graphqlClient.client";
+
+export type ValidateFieldOnSubmitInput = WizardFieldValidationInput;
+
+export async function validateFieldOnSubmit(
+	input: WizardFieldValidationInput[],
+): Promise<WizardFieldValidationResult[]> {
+	const sdk = await createGraphqlclient();
+	const { data } = await sdk.ValidateFieldOnSubmit({ input });
+	const results = data?.validateFieldOnSubmit ?? [];
+	return results.filter((r): r is WizardFieldValidationResult => r != null);
+}

package/src/components/data-table/table-row.tsx

@@ -24,4 +24,4 @@ const StyledIconButton = styled(IconButton)(({ theme }) => ({
 	":hover": { color: theme.palette.info.main },
 }));
 
-export { StyledTableCell, StyledTableRow, StyledIconButton };
+export { StyledIconButton, StyledTableCell, StyledTableRow };

package/src/components/icons/up-down.tsx

@@ -2,6 +2,7 @@ import createSvgIcon from "@mui/material/utils/createSvgIcon";
 
 const UpDown = createSvgIcon(
 	<svg viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<title>Sort ascending and descending</title>
 		<path
 			d="M8.64847 6.88354H3.35158C3.04454 6.88354 2.86173 7.2269 3.03517 7.4812L5.68362 11.3824C5.83596 11.6062 6.16526 11.6062 6.3176 11.3824L8.96605 7.4812C9.13714 7.2269 8.9555 6.88354 8.64847 6.88354Z"
 			fill="currentColor"

package/src/components/integration-view/integration-view.tsx

@@ -22,6 +22,7 @@ import {
 	useNodesState,
 	useReactFlow,
 } from "@xyflow/react";
+import _ from "lodash";
 import type {
 	ConfigExport,
 	ProcessExecutionDetails,
@@ -31,15 +32,13 @@ import type {
 } from "../../../../admin-core/src/api/e4/graphqlRequestSdk";
 import { layoutOptions as elkOptions } from "./elk-layout-options";
 import type { ElkExtendedEdgeWithFlow, ElkNodeWithFlow } from "./elk-types";
-
-import _ from "lodash";
 import { edgeTypes, nodeTypes } from "./flow-types";
 
 import {
-	mapToCamelCase,
 	mapEmptyNodesAndEdges,
 	mapProcessConfigToNodesAndEdges,
 	mapProcessTasksToNodesAndEdges,
+	mapToCamelCase,
 } from "./utils/mapping";
 
 const elk = new ELK();
@@ -200,9 +199,9 @@ const IntegrationView: React.FC<Props> = ({
 	const onConnect = useCallback(() => {}, []);
 	const onLayout = useCallback(
 		(processInput: any) => {
-			let tasks;
+			let tasks: any;
 
-			if (variant == "process") {
+			if (variant === "process") {
 				tasks = processInput?.Processes[0]?.ProcessTasks?.map(
 					(processTask: ProcessTaskExport) => mapToCamelCase(processTask),
 				);
@@ -220,7 +219,7 @@ const IntegrationView: React.FC<Props> = ({
 				);
 
 				const mapped =
-					variant == "process"
+					variant === "process"
 						? mapProcessConfigToNodesAndEdges(
 								processInput,
 								width,
@@ -333,10 +332,8 @@ const IntegrationView: React.FC<Props> = ({
 	}, [configInput, processExecutionInput]);
 
 	useLayoutEffect(() => {
-		let data = globalThis.structuredClone(nodes);
-
-		data = data.map((node: any) => {
-			return {
+		setNodes((prevNodes: any[]) =>
+			prevNodes.map((node: any) => ({
 				...node,
 				data: {
 					...node.data,
@@ -345,10 +342,8 @@ const IntegrationView: React.FC<Props> = ({
 						selectedProcessTaskId === node.data?.processTask?.id ||
 						selectedProcessTaskId === node.data?.processTaskExecution?.id,
 				},
-			};
-		});
-
-		setNodes(data);
+			})),
+		);
 	}, [drawerOpen, selectedProcessTaskId]);
 
 	const handleNodeDragStart = (_e: ReactMouseEvent, node: Node): any => {
@@ -392,7 +387,7 @@ const IntegrationView: React.FC<Props> = ({
 				!edge.id.includes((node?.data?.processTask as ProcessTask)?.id),
 		);
 
-		let nodesFiltered = nodes.filter(
+		const nodesFiltered = nodes.filter(
 			(node: any) => !nodeIds.includes(node?.id),
 		);
 

package/src/components/integration-view/nodes/task-node.tsx

@@ -3,8 +3,8 @@ import {
 	Box,
 	Card,
 	CardContent,
-	Typography,
 	IconButton,
+	Typography,
 	useTheme,
 } from "@mui/material";
 import { Handle, type NodeProps, Position } from "@xyflow/react";

package/src/components/integration-view/utils/mapping.ts

@@ -1,21 +1,21 @@
-import {
-	ProcessExecutionDetails,
+import type {
 	ConfigExport,
+	ProcessExecutionDetails,
 	ProcessExport,
 	ProcessTask,
-	ProcessTaskExport,
 	ProcessTaskExecution,
+	ProcessTaskExport,
 } from "@evenicanpm/admin-core/src/api/e4/graphqlRequestSdk";
-import { Process } from "../../../../../admin-core/src/api/e4/graphqlRequestSdk";
-import {
+import { MarkerType } from "@xyflow/react";
+import _ from "lodash";
+import type { Process } from "../../../../../admin-core/src/api/e4/graphqlRequestSdk";
+import type {
 	ElkExtendedEdgeWithFlow,
 	ElkNodeWithFlow,
 	GroupNode,
 	// ProcessTaskExecutionNode,
 	// ProcessTaskNode,
 } from "../elk-types";
-import { MarkerType } from "@xyflow/react";
-import _ from "lodash";
 
 const markerEnd = {
 	type: MarkerType.ArrowClosed,
@@ -24,10 +24,10 @@ const markerEnd = {
 };
 
 export function mapToCamelCase(processTask: ProcessTaskExport): ProcessTask {
-	let key,
-		keys = Object.keys(processTask);
+	let key: string;
+	const keys = Object.keys(processTask);
 	let n = keys.length;
-	let newobj: { [key: string]: any } = {};
+	const newobj: { [key: string]: any } = {};
 	while (n--) {
 		key = keys[n];
 		newobj[key.substring(0, 1).toLowerCase() + key.substring(1)] =
@@ -296,7 +296,6 @@ export const mapProcessConfigToNodesAndEdges = (
 				processTask: mapToCamelCase(task as ProcessTaskExport) || undefined,
 				label: task?.Name as string,
 				isLast: onAdd ? index === partitionLen - 1 : false,
-				onAdd: index === partitionLen - 1 ? onAdd : undefined,
 			},
 			position: { x: 0, y: 0 },
 			type: variant === "process" ? "task-node" : "execution-task-node",

package/src/components/list-filter/list-filter.tsx

@@ -293,6 +293,8 @@ const ListFilter = function ListFilter<FilterShape extends Filters>(
 															onError={(e) => updateFilterErrors(name, e)}
 														/>
 													);
+												default:
+													return null;
 											}
 										})}
 									<Box sx={styles.buttonRow}>

package/src/components/templatesV2/inputs/FormikPageBody.tsx

@@ -0,0 +1,191 @@
+"use client";
+
+import { Box } from "@mui/material";
+import { useFormikContext } from "formik";
+import * as React from "react";
+import type {
+	ErrorState,
+	FieldValue,
+	FormState,
+	ProcessTemplateInput,
+	ProcessTemplatePage,
+} from "../types";
+import { templateFieldKey } from "../types";
+import { FormModeProvider } from "./context/FormModeContext";
+import { TemplateProvider } from "./context/TemplateContext";
+import { ReservedFieldName } from "./field-names";
+import { InputType } from "./input-type";
+import { renderFormControl } from "./renderers/renderFormControl";
+import { arrangeInputs } from "./utils/arrangeInputs";
+
+function isHiddenInput(input: ProcessTemplateInput | null): boolean {
+	return (
+		input?.inputType === InputType.HIDDEN ||
+		input?.inputType === InputType.HIDDEN_NUMBER ||
+		input?.inputType === InputType.HIDDEN_NUMBER_OR_NULL
+	);
+}
+
+function getDefaultHiddenFieldValue(
+	input: ProcessTemplateInput | null,
+): FieldValue {
+	if (input?.inputType === InputType.HIDDEN_NUMBER) return 0 as FieldValue;
+	if (input?.inputType === InputType.HIDDEN_NUMBER_OR_NULL) return null;
+	return "" as FieldValue;
+}
+
+export function FormikPageBody({
+	templateId,
+	page,
+	clearTemplateFields,
+	readOnly,
+	isEditMode,
+	isCreateMode,
+	disabledFields,
+	setFieldsDisabled,
+	templateConfig,
+	setFieldValidationInProgress,
+	submitValidationResults,
+}: Readonly<{
+	templateId: string;
+	page: ProcessTemplatePage;
+	clearTemplateFields: (templateId: string) => void;
+	readOnly?: boolean;
+	isEditMode?: boolean;
+	isCreateMode?: boolean;
+	disabledFields?: Set<string>;
+	setFieldsDisabled?: (
+		templateId: string,
+		fieldNames: string[],
+		disabled: boolean,
+	) => void;
+	templateConfig?: string;
+	setFieldValidationInProgress?: (inProgress: boolean) => void;
+	submitValidationResults?: Record<
+		string,
+		{ isValid: boolean; message: string }
+	>;
+}>) {
+	const {
+		values,
+		errors,
+		touched,
+		setFieldValue,
+		setFieldTouched,
+		validateField,
+		validateForm,
+	} = useFormikContext<FormState>();
+
+	React.useEffect(() => {
+		const hiddenInputs = page.inputs?.filter(isHiddenInput) ?? [];
+
+		for (const input of hiddenInputs) {
+			const key = templateFieldKey(templateId, input?.fieldName ?? "");
+			if (values[key] != null) continue;
+
+			if (input?.fieldName === ReservedFieldName.ProcessTemplateId) {
+				setFieldValue(key, Number(templateId));
+				continue;
+			}
+			setFieldValue(key, getDefaultHiddenFieldValue(input));
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [templateId, page.id, page.inputs]);
+
+	const rows = React.useMemo(() => {
+		const inputs = (page.inputs ?? []).filter(
+			(inp): inp is ProcessTemplateInput => inp != null,
+		) as ProcessTemplateInput[];
+		return arrangeInputs(inputs);
+	}, [page.inputs]);
+
+	const handleFieldChange = (
+		tId: string,
+		fieldName: string,
+		value: FieldValue,
+	) => {
+		setFieldValue(templateFieldKey(tId, fieldName), value);
+	};
+
+	const errorsNormalized: ErrorState = React.useMemo(() => {
+		const out: Record<string, string | null> = {};
+		for (const key of Object.keys(errors ?? {})) {
+			const v = (errors as Record<string, unknown>)[key];
+			if (v == null) {
+				out[key] = null;
+			} else if (typeof v === "string") {
+				out[key] = v;
+			} else if (typeof v === "object") {
+				out[key] = "";
+			} else if (typeof v === "number" || typeof v === "boolean") {
+				out[key] = String(v);
+			} else {
+				out[key] = "";
+			}
+		}
+		return out;
+	}, [errors]);
+
+	const touchedNormalized: Record<string, boolean> = React.useMemo(() => {
+		const t = touched ?? {};
+		const out: Record<string, boolean> = {};
+		for (const key of Object.keys(t)) {
+			out[key] = (t as Record<string, unknown>)[key] === true;
+		}
+		return out;
+	}, [touched]);
+
+	const formControlProps = {
+		templateId,
+		values,
+		errors: errorsNormalized,
+		touched: touchedNormalized,
+		handleFieldChange,
+		setFieldTouched,
+		validateField,
+		validateForm,
+		readOnly,
+		disabledFields,
+		setFieldValidationInProgress,
+		submitValidationResults,
+	};
+
+	const renderRow = (
+		row: (typeof rows)[number],
+		idx: number,
+	): React.ReactNode => {
+		if (row.type === "pair") {
+			const [a, b] = row.items;
+			return (
+				<Box key={idx} sx={{ display: "flex", gap: 2, marginTop: 2 }}>
+					{renderFormControl({ ...formControlProps, input: a })}
+					{renderFormControl({ ...formControlProps, input: b })}
+				</Box>
+			);
+		}
+		if (row.type === "full") {
+			return (
+				<Box key={idx} sx={{ mb: 2, marginTop: 2 }}>
+					{renderFormControl({ ...formControlProps, input: row.item })}
+				</Box>
+			);
+		}
+		return null;
+	};
+
+	return (
+		<FormModeProvider value={{ readOnly, isEditMode, isCreateMode }}>
+			<TemplateProvider
+				value={{
+					templateId,
+					templateConfig,
+					disabledFields,
+					setFieldsDisabled,
+					clearTemplateFields,
+				}}
+			>
+				<Box>{rows.map(renderRow)}</Box>
+			</TemplateProvider>
+		</FormModeProvider>
+	);
+}

package/src/components/templatesV2/inputs/context/FormModeContext.tsx

@@ -0,0 +1,31 @@
+import * as React from "react";
+
+type FormMode = {
+	readOnly?: boolean;
+	isEditMode?: boolean;
+	isCreateMode?: boolean;
+};
+
+const FormModeContext = React.createContext<FormMode | null>(null);
+
+export function FormModeProvider({
+	value,
+	children,
+}: Readonly<{
+	value: FormMode;
+	children: React.ReactNode;
+}>) {
+	return (
+		<FormModeContext.Provider value={value}>
+			{children}
+		</FormModeContext.Provider>
+	);
+}
+
+export function useFormMode() {
+	const ctx = React.useContext(FormModeContext);
+	if (!ctx) {
+		throw new Error("useFormMode must be used inside FormModeProvider");
+	}
+	return ctx;
+}