@dartech/arsenal-ui 1.2.4 → 1.2.5

package/src/lib/Property/UpsertProperty/CreatePropertiesList.tsx

@@ -0,0 +1,148 @@
+import Grid from '@mui/material/Unstable_Grid2';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+import Accordion from '@mui/material/Accordion';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import AccordionDetails from '@mui/material/AccordionDetails';
+import AccordionActions from '@mui/material/AccordionActions';
+import { ExpandMore } from '@mui/icons-material';
+import CreatePropertyFormFields from './CreatePropertyFormFields';
+
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { useController, useFormContext, useWatch } from 'react-hook-form';
+import { removeArrayItem } from '../../../utils/common';
+import { CustomPropertyFieldProps } from '../../../interfaces';
+
+type Props = {
+  parentFieldName?: string;
+  hideAddButton?: boolean;
+  focusOnIndex?: number;
+  required?: boolean;
+  entityDefinition?: boolean;
+  globalParameter?: boolean;
+  customPropertyFields?: CustomPropertyFieldProps[];
+};
+
+const defaultPropertyValues = {
+  key: '',
+  propertyType: null,
+  name: '',
+  defaultValue: '',
+  defaultValues: [],
+  isRequired: true,
+  isMultiple: false,
+  sortOrder: 0,
+  isEnabled: true,
+  executeValue: '',
+  uiSettings: '',
+};
+
+export const CreatePropertiesList = ({
+  parentFieldName,
+  hideAddButton,
+  focusOnIndex,
+  required,
+  entityDefinition = false,
+  globalParameter = false,
+  customPropertyFields = [],
+}: Props) => {
+  const fieldName = useMemo(
+    () => (parentFieldName ? `${parentFieldName}.properties` : `properties`),
+    [parentFieldName]
+  );
+
+  const { setValue, clearErrors, control } = useFormContext();
+  const {
+    fieldState: { error },
+  } = useController({
+    control,
+    name: fieldName,
+    rules: { required: required && 'Please, add properties' },
+  });
+  const properties = useWatch({ control, name: fieldName });
+
+  const refs = useRef([]);
+
+  useEffect(() => {
+    if (typeof focusOnIndex === 'number' && refs.current[focusOnIndex]) {
+      refs.current[focusOnIndex].scrollIntoView({
+        behavior: 'smooth',
+        block: 'start',
+      });
+    }
+  }, [focusOnIndex, refs]);
+
+  const handleAddParameter = useCallback(() => {
+    if (properties) {
+      setValue(`${fieldName}.${properties.length}`, defaultPropertyValues);
+    } else {
+      setValue(fieldName, [defaultPropertyValues]);
+    }
+    clearErrors(fieldName);
+  }, [properties, fieldName, clearErrors, setValue]);
+
+  const handleRemoveParameter = useCallback(
+    (index) => {
+      setValue(`${fieldName}`, removeArrayItem(properties, index));
+    },
+    [properties, fieldName, setValue]
+  );
+
+  return (
+    <>
+      {error && error.message && (
+        <Grid sm={12}>
+          <Typography color="secondary">{error.message}</Typography>
+        </Grid>
+      )}
+      {properties &&
+        properties.map((property, index) => (
+          <Grid key={index} sm={12} ref={(ref) => (refs.current[index] = ref)}>
+            <Accordion defaultExpanded elevation={3}>
+              <AccordionSummary expandIcon={<ExpandMore />}>
+                <Typography
+                  color={error && error[index] ? 'secondary' : 'initial'}
+                  style={{ wordBreak: 'break-word' }}
+                >
+                  {property.name || `Property ${index + 1}`}
+                </Typography>
+              </AccordionSummary>
+              <AccordionDetails>
+                <CreatePropertyFormFields
+                  propertyFieldName={`${fieldName}.${index}`}
+                  entityDefinition={entityDefinition}
+                  globalParameter={globalParameter}
+                  customPropertyFields={customPropertyFields}
+                />
+              </AccordionDetails>
+              <AccordionActions>
+                <Button
+                  variant="contained"
+                  size="small"
+                  color="secondary"
+                  onClick={() => handleRemoveParameter(index)}
+                >
+                  Remove
+                </Button>
+              </AccordionActions>
+            </Accordion>
+          </Grid>
+        ))}
+
+      {!hideAddButton && (
+        <Grid xs={12}>
+          <Button
+            variant="contained"
+            size="small"
+            color="primary"
+            onClick={handleAddParameter}
+          >
+            Add property
+          </Button>
+        </Grid>
+      )}
+    </>
+  );
+};
+
+export default CreatePropertiesList;

package/src/lib/Property/UpsertProperty/CreatePropertyFormFields.tsx

@@ -0,0 +1,158 @@
+import Grid from '@mui/material/Unstable_Grid2';
+import {
+  ControlCheckbox,
+  ControlAutocomplete,
+  ControlNumberInput,
+  ControlAceEditor,
+  ControlDebouncedInput,
+} from '../../Forms';
+import { PropertyAdditionalFields } from './PropertyAdditionalFields';
+import { PropertyValueField } from '../PropertyValueField';
+import { PropertyValidator } from '../PropertyValidator';
+import CustomPropertyField from './CustomPropertyField';
+import { PropertyValidatorContext } from '../PropertyValidator/PropertyValidatorContext';
+import { useMemo, useEffect } from 'react';
+import { useFormContext, useWatch } from 'react-hook-form';
+import useCustomFields from './useCustomFields';
+
+import { CustomPropertyFieldProps, PropertyType } from '../../../interfaces';
+
+type Props = {
+  propertyFieldName: string;
+  entityDefinition?: boolean;
+  globalParameter?: boolean;
+  customPropertyFields?: CustomPropertyFieldProps[];
+};
+
+const propertyTypes = Object.values(PropertyType)
+  .sort((a, b) => a.localeCompare(b))
+  .map((propType) => ({
+    value: propType,
+    label: propType
+      .replace('_', ' ')
+      .toLowerCase()
+      .replace(/(^\w)|([-\s]\w)/g, (c) => c.toUpperCase()),
+  }));
+
+export const CreatePropertyFormFields = ({
+  propertyFieldName,
+  entityDefinition = false,
+  globalParameter = false,
+  customPropertyFields = [],
+}: Props) => {
+  const { control, setValue } = useFormContext();
+  const propertyType = useWatch({ control, name: `${propertyFieldName}.propertyType` });
+  const isMultiple = useWatch({ control, name: `${propertyFieldName}.isMultiple` });
+  const isRequired = useWatch({ control, name: `${propertyFieldName}.isRequired` });
+
+  const { customCheckboxes, customFields } = useCustomFields(customPropertyFields);
+
+  const valueLabel = useMemo(() => {
+    let label = globalParameter ? 'Value' : 'Default Value';
+    if (isMultiple) {
+      label += 's';
+    }
+    return label;
+  }, [globalParameter, isMultiple]);
+
+  const handlePropertyTypeChange = (_, value) => {
+    const fieldName = `${propertyFieldName}.propertyType`;
+    const valueFieldName = `${propertyFieldName}.${globalParameter ? 'value' : 'defaultValue'}`;
+    if (isMultiple) {
+      setValue(valueFieldName, []);
+    } else {
+      setValue(valueFieldName, null);
+    }
+    setValue(fieldName, value);
+  };
+
+  useEffect(() => {
+    if (propertyType && typeof propertyType === 'string') {
+      setValue(`${propertyFieldName}.propertyType`, propertyTypes.find(el => el.value === propertyType));
+    }
+  }, [propertyType, setValue, propertyFieldName])
+
+  return (
+    <Grid container direction="column" spacing={2}>
+      <Grid>
+        <ControlDebouncedInput required control={control} name={`${propertyFieldName}.key`} label="Key" />
+      </Grid>
+      <Grid>
+        <ControlDebouncedInput required control={control} name={`${propertyFieldName}.name`} label="Name" />
+      </Grid>
+      <Grid>
+        <ControlAutocomplete
+          required
+          control={control}
+          name={`${propertyFieldName}.propertyType`}
+          label="Type"
+          options={propertyTypes}
+          onChange={handlePropertyTypeChange}
+        />
+      </Grid>
+      <Grid>
+        <ControlNumberInput required control={control} name={`${propertyFieldName}.sortOrder`} label="Sort Order" />
+      </Grid>
+
+      <Grid>
+        <ControlAceEditor control={control} name={`${propertyFieldName}.uiSettings`} label="UI Settings" validateJson />
+      </Grid>
+      <Grid>
+        <ControlCheckbox control={control} name={`${propertyFieldName}.isMultiple`} label="Multiple" />
+        <ControlCheckbox control={control} name={`${propertyFieldName}.isEnabled`} label="Enabled" />
+        <ControlCheckbox control={control} name={`${propertyFieldName}.isRequired`} label="Required" />
+        {entityDefinition && (
+          <ControlCheckbox
+            control={control}
+            name={`${propertyFieldName}.isViewableInList`}
+            label="Is viewable in list"
+          />
+        )}
+        {customCheckboxes.length ? (
+          <>
+            {customCheckboxes.map((field, index) => (
+              <ControlCheckbox
+                key={index}
+                control={control}
+                name={`${propertyFieldName}.${field.name}`}
+                label={field.label}
+              />
+            ))}
+          </>
+        ) : null}
+      </Grid>
+      {propertyType && (
+        <>
+          <Grid>
+            <PropertyValidatorContext.Provider value={propertyType.value ?? propertyType}>
+              <PropertyValidator name={`${propertyFieldName}.validationNode`} />
+            </PropertyValidatorContext.Provider>
+          </Grid>
+          <PropertyAdditionalFields
+            propertyType={typeof propertyType === 'string' ? propertyType : propertyType.value}
+            propertyFieldName={propertyFieldName}
+            globalParameter={globalParameter}
+            entityDefinition={entityDefinition}
+          />
+          <PropertyValueField
+            propertyFieldName={propertyFieldName}
+            name={`${propertyFieldName}.${globalParameter ? 'value' : 'defaultValue'}`}
+            label={valueLabel}
+            required={globalParameter ? isRequired : false}
+          />
+        </>
+      )}
+      {customFields.length ? (
+        <>
+          {customFields.map((field, index) => (
+            <Grid key={index}>
+              <CustomPropertyField {...field} propertyFieldName={propertyFieldName} />
+            </Grid>
+          ))}
+        </>
+      ) : null}
+    </Grid>
+  );
+};
+
+export default CreatePropertyFormFields;

package/src/lib/Property/UpsertProperty/CustomPropertyField.tsx

@@ -0,0 +1,40 @@
+import { useMemo } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { CustomPropertyFieldProps } from '../../../interfaces';
+import { ControlAceEditor, ControlAutocomplete, ControlInput, ControlNumberInput, ControlSelect } from '../../Forms';
+
+type Props = CustomPropertyFieldProps & { propertyFieldName: string };
+
+export const CustomPropertyField = ({
+  name,
+  label = '',
+  propertyFieldName,
+  type,
+  decimal = false,
+  options = [],
+  required = false,
+}: Props) => {
+  const { control } = useFormContext();
+  const fieldName = useMemo(() => `${propertyFieldName}.${name}`, [name, propertyFieldName]);
+
+  switch (type) {
+    case 'text':
+      return <ControlInput control={control} name={fieldName} label={label} required={required} />;
+    case 'number':
+      return (
+        <ControlNumberInput control={control} name={fieldName} label={label} decimal={decimal} required={required} />
+      );
+    case 'select':
+      return <ControlSelect control={control} name={fieldName} label={label} options={options} required={required} />;
+    case 'autocomplete':
+      return (
+        <ControlAutocomplete control={control} name={fieldName} label={label} options={options} required={required} />
+      );
+    case 'json':
+      return <ControlAceEditor control={control} name={fieldName} label={label} mode="json" required={required} />;
+    default:
+      return null;
+  }
+};
+
+export default CustomPropertyField;

package/src/lib/Property/UpsertProperty/PropertyAdditionalFields/BigDecimalPropertyFields.tsx

@@ -0,0 +1,41 @@
+import Grid from '@mui/material/Unstable_Grid2';
+import { ControlNumberInput, ControlSelect } from '../../../Forms';
+import { RoundingMode } from '../../../../interfaces';
+
+import { useFormContext } from 'react-hook-form';
+
+type Props = {
+  propertyFieldName: string;
+};
+
+const roundingModes = Object.values(RoundingMode).sort((a, b) => a.localeCompare(b));
+
+const BigDecimalPropertyFields = ({ propertyFieldName }: Props) => {
+  const { control } = useFormContext();
+
+  return (
+    <>
+      <Grid>
+        <ControlNumberInput
+          required
+          control={control}
+          defaultValue={2}
+          name={`${propertyFieldName}.precisionScale`}
+          label="Precision Scale"
+        />
+      </Grid>
+      <Grid>
+        <ControlSelect
+          required
+          control={control}
+          name={`${propertyFieldName}.roundingMode`}
+          label="Rounding Mode"
+          defaultValue={RoundingMode.HALF_UP}
+          options={roundingModes}
+        />
+      </Grid>
+    </>
+  );
+};
+
+export default BigDecimalPropertyFields;

package/src/lib/Property/UpsertProperty/PropertyAdditionalFields/DateAdditionalFields.tsx

@@ -0,0 +1,27 @@
+import Grid from '@mui/material/Unstable_Grid2';
+import { ControlInput } from '../../../Forms';
+
+import { useFormContext } from 'react-hook-form';
+
+type Props = {
+  propertyFieldName: string;
+  defaultValue?: string;
+};
+
+const DateAdditionalFields = ({ propertyFieldName, defaultValue = '' }: Props) => {
+  const { control } = useFormContext();
+
+  return (
+    <Grid>
+      <ControlInput
+        required
+        control={control}
+        defaultValue={defaultValue}
+        name={`${propertyFieldName}.format`}
+        label="Format"
+      />
+    </Grid>
+  );
+};
+
+export default DateAdditionalFields;

package/src/lib/Property/UpsertProperty/PropertyAdditionalFields/EntityAdditionalFields.tsx

@@ -0,0 +1,133 @@
+import Grid from '@mui/material/Unstable_Grid2';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+import Dialog from '@mui/material/Dialog';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogContent from '@mui/material/DialogContent';
+import DialogActions from '@mui/material/DialogActions';
+import Stepper from '@mui/material/Stepper';
+import Step from '@mui/material/Step';
+import StepLabel from '@mui/material/StepLabel';
+import StepContent from '@mui/material/StepContent';
+import CreatePropertiesList from '../CreatePropertiesList';
+import EntityPropertiesShortView from '../../ViewProperty/EntityPropertiesShortView';
+
+import { useCallback, useState } from 'react';
+import { useFormContext, useWatch } from 'react-hook-form';
+import { useToggle } from '../../../../utils/hooks';
+
+type Props = {
+  parentPropertyFieldName: string;
+  entityDefinition?: boolean;
+  globalParameter?: boolean;
+};
+
+const defaultPropertyValues = {
+  key: '',
+  propertyType: '',
+  name: '',
+  defaultValue: '',
+  isRequired: true,
+  isMultiple: false,
+  sortOrder: 0,
+  isEnabled: true,
+};
+
+const EntityAdditionalFields = ({
+  parentPropertyFieldName,
+  entityDefinition = false,
+  globalParameter = false,
+}: Props) => {
+  const { control, setValue, getValues, trigger } = useFormContext();
+  const properties = useWatch({
+    control,
+    name: `${parentPropertyFieldName}.properties`,
+    defaultValue: getValues(`${parentPropertyFieldName}.properties`) || [],
+  });
+  const parentPropertyName = useWatch({ control, name: `${parentPropertyFieldName}.name` });
+
+  const parametersModal = useToggle();
+
+  const [focusedProperty, setFocusedProperty] = useState(0);
+
+  const handleAddParameter = useCallback(() => {
+    if (properties) {
+      const propertyIndex = properties.length;
+      setValue(`${parentPropertyFieldName}.properties.${propertyIndex}`, defaultPropertyValues);
+      setFocusedProperty(propertyIndex);
+    } else {
+      setValue(`${parentPropertyFieldName}.properties`, [defaultPropertyValues]);
+    }
+  }, [properties, parentPropertyFieldName, setValue]);
+
+  const handleStepperClick = (index) => setFocusedProperty(index);
+
+  const handleSubmitClick = async () => {
+    const isValid = await trigger(`${parentPropertyFieldName}.properties`);
+    if (isValid) {
+      parametersModal.onClose();
+    }
+  };
+
+  return (
+    <>
+      <Grid>
+        <Typography variant="h6">Properties</Typography>
+      </Grid>
+      <Grid>
+        <EntityPropertiesShortView properties={properties} />
+      </Grid>
+      <Grid>
+        <Button variant="contained" color="primary" onClick={parametersModal.onOpen}>
+          Edit properties
+        </Button>
+      </Grid>
+
+      <Dialog disableEscapeKeyDown open={parametersModal.open} onClose={handleSubmitClick} fullWidth maxWidth="md">
+        <DialogTitle>{parentPropertyName || 'Entity'} Properties</DialogTitle>
+        <DialogContent style={{ height: '500px', overflow: 'hidden' }}>
+          <Grid container direction="row" spacing={2} style={{ height: '100%' }}>
+            <Grid xs={3} style={{ backgroundColor: '#f9f9f9' }}>
+              <Stepper nonLinear activeStep={focusedProperty} orientation="vertical" style={{ paddingLeft: '4px' }}>
+                {properties.map((property, index) => (
+                  <Step key={index} onClick={() => handleStepperClick(index)} style={{ cursor: 'pointer' }}>
+                    <StepLabel StepIconProps={{ icon: '' }} style={{ wordBreak: 'break-word' }}>
+                      {property.name || '(no name)'}
+                    </StepLabel>
+                    <StepContent></StepContent>
+                  </Step>
+                ))}
+              </Stepper>
+              <Button variant="contained" size="small" color="primary" onClick={handleAddParameter}>
+                Add property
+              </Button>
+            </Grid>
+            <Grid              
+              container
+              wrap="nowrap"
+              direction="column"
+              xs={9}
+              spacing={2}
+              style={{ height: '100%', overflowY: 'auto' }}
+            >
+              <CreatePropertiesList
+                hideAddButton
+                parentFieldName={parentPropertyFieldName}
+                focusOnIndex={focusedProperty}
+                entityDefinition={entityDefinition}
+                globalParameter={globalParameter}
+              />
+            </Grid>
+          </Grid>
+        </DialogContent>
+        <DialogActions>
+          <Button variant="contained" color="primary" onClick={handleSubmitClick}>
+            Ok
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  );
+};
+
+export default EntityAdditionalFields;

package/src/lib/Property/UpsertProperty/PropertyAdditionalFields/EntityReferencePropertyFields.tsx

@@ -0,0 +1,46 @@
+import Grid from '@mui/material/Unstable_Grid2';
+import { ControlInput } from '../../../Forms';
+
+import { useFormContext } from 'react-hook-form';
+
+type Props = {
+  propertyFieldName: string;
+};
+
+const EntityReferencePropertyFields = ({ propertyFieldName }: Props) => {
+  const { control } = useFormContext();
+
+  return (
+    <>
+      <Grid>
+        <ControlInput required control={control} name={`${propertyFieldName}.definitionCode`} label="Definition Code" />
+      </Grid>
+      <Grid>
+        <ControlInput
+          required
+          control={control}
+          name={`${propertyFieldName}.definitionVersion`}
+          label="Definition Version"
+        />
+      </Grid>
+      <Grid>
+        <ControlInput
+          required
+          control={control}
+          name={`${propertyFieldName}.labelPropertyCode`}
+          label="Label Property Code"
+        />
+      </Grid>
+      <Grid>
+        <ControlInput
+          required
+          control={control}
+          name={`${propertyFieldName}.valuePropertyCode`}
+          label="Value Property Code"
+        />
+      </Grid>
+    </>
+  );
+};
+
+export default EntityReferencePropertyFields;

package/src/lib/Property/UpsertProperty/PropertyAdditionalFields/PropertyAdditionalFields.tsx

@@ -0,0 +1,52 @@
+import {
+  PropertyType,
+  DATE_DEFAULT_FORMAT,
+  DATE_TIME_DEFAULT_FORMAT,
+  TIME_DEFAULT_FORMAT,
+} from '../../../../interfaces';
+import BigDecimalPropertyFields from './BigDecimalPropertyFields';
+import DateAdditionalFields from './DateAdditionalFields';
+import EntityAdditionalFields from './EntityAdditionalFields';
+import EntityReferencePropertyFields from './EntityReferencePropertyFields';
+import StringPropertyFields from './StringPropertyFields';
+
+type Props = {
+  propertyType: PropertyType;
+  propertyFieldName: string;
+  entityDefinition?: boolean;
+  globalParameter?: boolean;
+};
+
+export const PropertyAdditionalFields = ({
+  propertyType,
+  propertyFieldName,
+  entityDefinition = false,
+  globalParameter = false,
+}: Props) => {
+  switch (propertyType) {
+    case PropertyType.STRING:
+      return <StringPropertyFields propertyFieldName={propertyFieldName} />;
+    case PropertyType.BIG_DECIMAL:
+      return <BigDecimalPropertyFields propertyFieldName={propertyFieldName} />;
+    case PropertyType.DATE:
+      return <DateAdditionalFields propertyFieldName={propertyFieldName} defaultValue={DATE_DEFAULT_FORMAT} />;
+    case PropertyType.TIME:
+      return <DateAdditionalFields propertyFieldName={propertyFieldName} defaultValue={TIME_DEFAULT_FORMAT} />;
+    case PropertyType.DATE_TIME:
+      return <DateAdditionalFields propertyFieldName={propertyFieldName} defaultValue={DATE_TIME_DEFAULT_FORMAT} />;
+    case PropertyType.ENTITY_REFERENCE:
+      return <EntityReferencePropertyFields propertyFieldName={propertyFieldName} />;
+    case PropertyType.ENTITY:
+      return (
+        <EntityAdditionalFields
+          parentPropertyFieldName={propertyFieldName}
+          globalParameter={globalParameter}
+          entityDefinition={entityDefinition}
+        />
+      );
+    default:
+      return null;
+  }
+};
+
+export default PropertyAdditionalFields;