@performant-software/user-defined-fields 0.6.2-beta.3

package/types/components/UserDefinedFieldOptions.js.flow

@@ -0,0 +1,112 @@
+// @flow
+
+import React, {
+  useCallback,
+  useEffect,
+  useState,
+  type ComponentType
+} from 'react';
+import { Button, Input, Label } from 'semantic-ui-react';
+import _ from 'underscore';
+import './UserDefinedFieldOptions.css';
+
+type Props = {
+  options: Array<string>,
+  onChange: (options: Array<string>) => void
+};
+
+const UserDefinedFieldOptions: ComponentType<any> = (props: Props) => {
+  const [options, setOptions] = useState(_.map(props.options, (option) => ({ value: option })));
+
+  /**
+   * Adds a new option to the list.
+   *
+   * @type {(function(): void)|*}
+   */
+  const onAddOption = useCallback(() => {
+    setOptions((prevOptions) => [...prevOptions, { new: true }]);
+  }, []);
+
+  /**
+   * Deletes the option at the passed index from the list.
+   *
+   * @type {(function(*): void)|*}
+   */
+  const onDeleteOption = useCallback((findIndex) => {
+    setOptions((prevOptions) => _.filter(prevOptions, (option, index) => index !== findIndex));
+  }, []);
+
+  /**
+   * Removes the "new" indicator from the option at the passed index.
+   *
+   * @type {(function(*): void)|*}
+   */
+  const onSaveOption = useCallback((findIndex) => {
+    setOptions((prevOptions) => _.map(
+      prevOptions,
+      (option, index) => (findIndex !== index ? option : ({ ...option, new: false }))
+    ));
+  }, [options]);
+
+  /**
+   * Updates the value of the option at the passed index.
+   *
+   * @type {(function(*, *, {value: *}): void)|*}
+   */
+  const onUpdateOption = useCallback((findIndex, e, { value }) => {
+    setOptions((prevOptions) => _.map(
+      prevOptions,
+      (option, index) => (index !== findIndex ? option : ({ ...option, value }))
+    ));
+  }, []);
+
+  /**
+   * Calls the onChange prop when the list of options changes.
+   */
+  useEffect(() => {
+    const savedOptions = _.filter(options, (option) => !option.new);
+    props.onChange(_.pluck(savedOptions, 'value'));
+  }, [options]);
+
+  return (
+    <div
+      className='user-defined-field-options'
+    >
+      <Button
+        basic
+        icon='plus'
+        onClick={onAddOption}
+        type='button'
+      />
+      { _.map(options, (option, index) => (
+        <>
+          { option.new && (
+            <Label>
+              <Input
+                autoFocus
+                onChange={onUpdateOption.bind(this, index)}
+                value={option.value}
+              />
+              <Button
+                basic
+                color='green'
+                icon='checkmark'
+                onClick={onSaveOption.bind(this, index)}
+                type='button'
+                size='tiny'
+              />
+            </Label>
+          )}
+          { !option.new && (
+            <Label
+              content={option.value}
+              onRemove={onDeleteOption.bind(this, index)}
+            />
+          )}
+        </>
+      ))}
+    </div>
+  );
+};
+
+export default UserDefinedFieldOptions;

package/types/components/UserDefinedFieldsEmbeddedList.js.flow

@@ -0,0 +1,44 @@
+// @flow
+
+import { BooleanIcon, EmbeddedList } from '@performant-software/semantic-components';
+import React from 'react';
+import i18n from '../i18n/i18n';
+import UserDefinedFieldModal from './UserDefinedFieldModal';
+
+type Props = {
+  items: Array<any>,
+  onDelete: (item: any) => Promise<any>,
+  onSave: (item: any) => Promise<any>
+};
+
+const UserDefinedFieldsEmbeddedList = (props: Props) => (
+  <EmbeddedList
+    actions={[{
+      name: 'edit'
+    }, {
+      name: 'delete'
+    }]}
+    columns={[{
+      name: 'table_name',
+      label: i18n.t('UserDefinedFieldsEmbeddedList.columns.table')
+    }, {
+      name: 'column_name',
+      label: i18n.t('UserDefinedFieldsEmbeddedList.columns.name')
+    }, {
+      name: 'data_type',
+      label: i18n.t('UserDefinedFieldsEmbeddedList.columns.dataType')
+    }, {
+      name: 'required',
+      label: i18n.t('UserDefinedFieldsEmbeddedList.columns.required'),
+      render: (udf) => <BooleanIcon value={udf.required} />
+    }]}
+    items={props.items}
+    modal={{
+      component: UserDefinedFieldModal
+    }}
+    onDelete={props.onDelete}
+    onSave={props.onSave}
+  />
+);
+
+export default UserDefinedFieldsEmbeddedList;

package/types/components/UserDefinedFieldsForm.js.flow

@@ -0,0 +1,209 @@
+// @flow
+
+import { DatePicker } from '@performant-software/semantic-components';
+import { RichTextArea, UserDefinedFieldsService } from '@performant-software/shared-components';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+  type ComponentType
+} from 'react';
+import { Form } from 'semantic-ui-react';
+import _ from 'underscore';
+
+type Props = {
+  defineableId?: number,
+  defineableType?: string,
+  isError: (key: string) => boolean,
+  item: any,
+  onChange: (obj: any) => void,
+  onClearValidationError: (...keys: Array<string>) => void
+};
+
+const DataTypes = {
+  boolean: 'Boolean',
+  date: 'Date',
+  number: 'Number',
+  richText: 'RichText',
+  select: 'Select',
+  string: 'String',
+  text: 'Text'
+};
+
+const UserDefinedFieldsForm: ComponentType<any> = (props: Props) => {
+  const [fields, setFields] = useState([]);
+
+  /**
+   * Sets the parsed value by parsing the JSON stored in the "user_defined" prop of the item.
+   *
+   * @type {unknown}
+   */
+  const parsedValue = useMemo(() => {
+    let value = {};
+
+    if (_.isString(props.item.user_defined)) {
+      value = JSON.parse(props.item.user_defined);
+    }
+
+    return value;
+  }, [props.item.user_defined]);
+
+  /**
+   * Returns the key for the passed field.
+   *
+   * @type {function(*): string}
+   */
+  const getFieldKey = useCallback((field) => `user_defined[${field.column_name}]`, []);
+
+  /**
+   * Returns true if an error exists on the state for the passed field.
+   *
+   * @type {function(*): *}
+   */
+  const isError = useCallback((field) => props.isError(getFieldKey(field)), [getFieldKey, props.isError]);
+
+  /**
+   * Changes the value for the passed item.
+   *
+   * @type {(function(*, *): void)|*}
+   */
+  const onChange = useCallback((field, value) => {
+    props.onChange(JSON.stringify({ ...parsedValue, [field.column_name]: value }));
+
+    // Clear the validation error if one exists
+    if (props.onClearValidationError) {
+      props.onClearValidationError(getFieldKey(field));
+    }
+  }, [getFieldKey, parsedValue, props.onChange, props.onClearValidationError]);
+
+  /**
+   * Renders the passed item.
+   *
+   * @type {function(*): *}
+   */
+  const renderItem = useCallback((field) => {
+    let rendered;
+
+    const fieldValue = parsedValue && parsedValue[field.column_name];
+
+    if (field.data_type === DataTypes.string) {
+      rendered = (
+        <Form.Input
+          error={isError(field)}
+          label={field.column_name}
+          required={field.required}
+          onChange={(e, { value }) => onChange(field, value)}
+          value={fieldValue}
+        />
+      );
+    }
+
+    if (field.data_type === DataTypes.number) {
+      rendered = (
+        <Form.Input
+          error={isError(field)}
+          label={field.column_name}
+          required={field.required}
+          onChange={(e, { value }) => onChange(field, value)}
+          value={fieldValue}
+          type='number'
+        />
+      );
+    }
+
+    if (field.data_type === DataTypes.select) {
+      rendered = (
+        <Form.Dropdown
+          clearable
+          error={isError(field)}
+          label={field.column_name}
+          multiple={field.allow_multiple}
+          required={field.required}
+          options={_.map(field.options, (option) => ({ key: option, value: option, text: option }))}
+          onChange={(e, { value }) => onChange(field, value)}
+          selectOnBlur={false}
+          selection
+          value={fieldValue}
+        />
+      );
+    }
+
+    if (field.data_type === DataTypes.text) {
+      rendered = (
+        <Form.TextArea
+          error={isError(field)}
+          label={field.column_name}
+          required={field.required}
+          onChange={(e, { value }) => onChange(field, value)}
+          value={fieldValue}
+        />
+      );
+    }
+
+    if (field.data_type === DataTypes.date) {
+      rendered = (
+        <Form.Input
+          error={isError(field)}
+          label={field.column_name}
+          required={field.required}
+        >
+          <DatePicker
+            onChange={(date) => onChange(field, date && date.toString())}
+            value={fieldValue && new Date(fieldValue)}
+          />
+        </Form.Input>
+      );
+    }
+
+    if (field.data_type === DataTypes.boolean) {
+      rendered = (
+        <Form.Checkbox
+          checked={!!fieldValue}
+          error={isError(field)}
+          label={field.column_name}
+          onChange={(e, { checked }) => onChange(field, checked)}
+        />
+      );
+    }
+
+    if (field.data_type === DataTypes.richText) {
+      rendered = (
+        <Form.Input
+          error={isError(field)}
+          label={field.column_name}
+          required={field.required}
+        >
+          <RichTextArea
+            onChange={(value) => onChange(field, value)}
+            value={fieldValue}
+          />
+        </Form.Input>
+      );
+    }
+
+    return rendered;
+  }, [parsedValue, isError, onChange]);
+
+  /**
+   * Fetches the user defined fields when the component mounts.
+   */
+  useEffect(() => {
+    const params = {
+      defineable_id: props.defineableId,
+      defineable_type: props.defineableType
+    };
+
+    UserDefinedFieldsService
+      .fetchAll(params)
+      .then(({ data }) => setFields(data.user_defined_fields));
+  }, []);
+
+  return (
+    <>
+      { _.map(fields, renderItem.bind(this)) }
+    </>
+  );
+};
+
+export default UserDefinedFieldsForm;

package/types/components/UserDefinedFieldsList.js.flow

@@ -0,0 +1,40 @@
+// @flow
+
+import { BooleanIcon, ListTable } from '@performant-software/semantic-components';
+import { UserDefinedFieldsService } from '@performant-software/shared-components';
+import React, { type ComponentType } from 'react';
+import i18n from '../i18n/i18n';
+import UserDefinedFieldModal from './UserDefinedFieldModal';
+
+const UserDefinedFieldsList: ComponentType<any> = () => (
+  <ListTable
+    actions={[{
+      name: 'edit'
+    }, {
+      name: 'delete'
+    }]}
+    columns={[{
+      name: 'table_name',
+      label: i18n.t('UserDefinedFieldsList.columns.table')
+    }, {
+      name: 'column_name',
+      label: i18n.t('UserDefinedFieldsList.columns.name')
+    }, {
+      name: 'data_type',
+      label: i18n.t('UserDefinedFieldsList.columns.dataType')
+    }, {
+      name: 'required',
+      label: i18n.t('UserDefinedFieldsList.columns.required'),
+      render: (udf) => <BooleanIcon value={udf.required} />
+    }]}
+    collectionName='user_defined_fields'
+    modal={{
+      component: UserDefinedFieldModal
+    }}
+    onLoad={(params) => UserDefinedFieldsService.fetchAll(params)}
+    onSave={(udf) => UserDefinedFieldsService.save(udf)}
+    onDelete={(udf) => UserDefinedFieldsService.delete(udf)}
+  />
+);
+
+export default UserDefinedFieldsList;

package/types/i18n/i18n.js.flow

@@ -0,0 +1,24 @@
+import i18next from 'i18next';
+
+import en from './en.json';
+
+const resources = {
+  en: {
+    translation: en
+  }
+};
+
+const i18n = i18next.createInstance();
+
+i18n
+  .init({
+    debug: true,
+    fallbackLng: 'en',
+    lng: 'en',
+    interpolation: {
+      escapeValue: false,
+    },
+    resources
+  });
+
+export default i18n;

package/types/index.js.flow

@@ -0,0 +1,18 @@
+// @flow
+
+// Components
+export { default as UserDefinedFieldModal } from './components/UserDefinedFieldModal';
+export { default as UserDefinedFieldOptions } from './components/UserDefinedFieldOptions';
+export { default as UserDefinedFieldsEmbeddedList } from './components/UserDefinedFieldsEmbeddedList';
+export { default as UserDefinedFieldsForm } from './components/UserDefinedFieldsForm';
+export { default as UserDefinedFieldsList } from './components/UserDefinedFieldsList';
+
+// Services
+export { default as UserDefinedFieldsService } from './services/UserDefinedFields';
+
+// Transforms
+export { default as UserDefinedFieldTransform } from './transforms/UserDefinedField';
+export { default as UserDefinedFieldsTransform } from './transforms/UserDefinedFields';
+
+// Utils
+export { default as UserDefinedFields } from './utils/UserDefinedFields';

package/types/services/UserDefinedFields.js.flow

@@ -0,0 +1,48 @@
+// @flow
+
+import { BaseService } from '@performant-software/shared-components';
+import UserDefinedField from '../transforms/UserDefinedField';
+
+/**
+ * Class responsible for handling all user defined field API requests.
+ */
+class UserDefinedFields extends BaseService {
+  /**
+   * Calls the /api/user_defined_fields/data_types API endpoint.
+   *
+   * @returns {Promise<AxiosResponse<any>>}
+   */
+  fetchDataTypes(): Promise<any> {
+    return this.getAxios().get('/user_defined_fields/data_types');
+  }
+
+  /**
+   * Calls the /api/user_defined_fields/tables API endpoint.
+   *
+   * @returns {Promise<AxiosResponse<any>>}
+   */
+  fetchTables(): Promise<any> {
+    return this.getAxios().get('/user_defined_fields/tables');
+  }
+
+  /**
+   * Returns the user defined fields base URL.
+   *
+   * @returns {string}
+   */
+  getBaseUrl(): string {
+    return '/user_defined_fields/user_defined_fields';
+  }
+
+  /**
+   * Returns the user defined fields transform object.
+   *
+   * @returns {UserDefinedField}
+   */
+  getTransform(): any {
+    return UserDefinedField;
+  }
+}
+
+const UserDefinedFieldsService: UserDefinedFields = new UserDefinedFields();
+export default UserDefinedFieldsService;

package/types/transforms/UserDefinedField.js.flow

@@ -0,0 +1,36 @@
+// @flow
+
+import { BaseTransform } from '@performant-software/shared-components';
+
+/**
+ * Class for transforming user defined field objects for PUT/POST requests.
+ */
+class UserDefinedField extends BaseTransform {
+  /**
+   * Returns the user defined field payload keys.
+   *
+   * @returns {string[]}
+   */
+  getPayloadKeys(): Array<string> {
+    return [
+      'table_name',
+      'column_name',
+      'data_type',
+      'required',
+      'allow_multiple',
+      'options'
+    ];
+  }
+
+  /**
+   * Returns the user defined field parameter name.
+   *
+   * @returns {string}
+   */
+  getParameterName(): string {
+    return 'user_defined_field';
+  }
+}
+
+const UserDefinedFieldTransform: UserDefinedField = new UserDefinedField();
+export default UserDefinedFieldTransform;

package/types/transforms/UserDefinedFields.js.flow

@@ -0,0 +1,55 @@
+// @flow
+
+import { NestedAttributesTransform } from '@performant-software/shared-components';
+
+/**
+ * Class for transforming user defined field nested objects for PUT/POST requests.
+ */
+class UserDefinedFields extends NestedAttributesTransform {
+  /**
+   * Returns the user defined field payload keys.
+   *
+   * @returns {string[]}
+   */
+  getPayloadKeys(): Array<string> {
+    return [
+      'id',
+      'table_name',
+      'column_name',
+      'data_type',
+      'required',
+      'allow_multiple',
+      'options',
+      '_destroy'
+    ];
+  }
+
+  /**
+   * Converts the user defined field collection for the passed object to form data to be sent on
+   * the request as nested attributes.
+   *
+   * @param formData
+   * @param prefix
+   * @param record
+   * @param collection
+   */
+  toFormData(formData: FormData, prefix: string, record: any, collection: string = 'user_defined_fields'): void {
+    return super.toFormData(formData, prefix, record, collection);
+  }
+
+  /**
+   * Converts the user defined field collection for the passed object to JSON to be sent on
+   * the request as nested attributes.
+   *
+   * @param record
+   * @param collectionName
+   *
+   * @returns {{[p: string]: *}}
+   */
+  toPayload(record: any, collectionName: string = 'user_defined_fields'): any {
+    return super.toPayload(record, collectionName);
+  }
+}
+
+const UserDefinedFieldsTransform: UserDefinedFields = new UserDefinedFields();
+export default UserDefinedFieldsTransform;

package/types/utils/UserDefinedFields.js.flow

@@ -0,0 +1,61 @@
+// @flow
+
+import _ from 'underscore';
+
+type Item = {
+  user_defined: ?string
+};
+
+type ErrorProps = {
+  key: string,
+  error: Array<string>
+};
+
+type ErrorReturn = {
+  [key: string]: string
+};
+
+const KEY_USER_DEFINED = 'user_defined';
+
+/**
+ * Returns the error for the passed user defined field.
+ *
+ * @param key
+ * @param error
+ *
+ * @returns {{}|{[p: string]: *}}
+ */
+const resolveError = ({ key, error }: ErrorProps): ErrorReturn => {
+  if (key !== KEY_USER_DEFINED || _.isEmpty(error)) {
+    return {};
+  }
+
+  const [field, message] = error;
+
+  return {
+    [`${KEY_USER_DEFINED}[${field}]`]: message
+  };
+};
+
+/**
+ * Returns the value for the user defined field at the passed key for the passed item.
+ *
+ * @param item
+ * @param key
+ *
+ * @returns {*}
+ */
+const resolveValue = (item: Item, key: string): string => {
+  let userDefined = {};
+
+  if (_.isString(item.user_defined)) {
+    userDefined = JSON.parse(item.user_defined || '{}');
+  }
+
+  return userDefined[key];
+};
+
+export default {
+  resolveError,
+  resolveValue
+};

package/webpack.config.js

@@ -0,0 +1,3 @@
+const { configure } = require('@performant-software/webpack-config');
+
+module.exports = configure(__dirname);