@performant-software/user-defined-fields 3.1.21 → 3.1.22-beta.10

package/src/components/UserDefinedFieldsForm.js

@@ -1,224 +0,0 @@
-// @flow
-
-import { DatePicker, FuzzyDate } from '@performant-software/semantic-components';
-import { FuzzyDateTransform, RichTextArea } from '@performant-software/shared-components';
-import React, {
-  useCallback,
-  useEffect,
-  useState,
-  type ComponentType
-} from 'react';
-import { Form } from 'semantic-ui-react';
-import _ from 'underscore';
-import { DataTypes } from '../constants/DataTypes';
-import UserDefinedFieldsService from '../services/UserDefinedFields';
-
-type Props = {
-  data: any,
-  defineableId?: number,
-  defineableType?: string,
-  fields?: Array,
-  isError: (key: string) => boolean,
-  onChange: (obj: any) => void,
-  onClearValidationError: (...keys: Array<string>) => void,
-  required?: boolean,
-  tableName?: string
-};
-
-const UserDefinedFieldsForm: ComponentType<any> = (props: Props) => {
-  const [fields, setFields] = useState(props.fields || []);
-
-  /**
-   * Returns the key for the passed field.
-   *
-   * @type {function(*): string}
-   */
-  const getFieldKey = useCallback((field) => `user_defined[${field.uuid}]`, []);
-
-  /**
-   * 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({ ...props.data, [field.uuid]: value });
-
-    // Clear the validation error if one exists
-    if (props.onClearValidationError) {
-      props.onClearValidationError(getFieldKey(field));
-    }
-  }, [getFieldKey, props.data, props.onChange, props.onClearValidationError]);
-
-  /**
-   * Renders the passed item.
-   *
-   * @type {function(*): *}
-   */
-  const renderItem = useCallback((field, index) => {
-    let rendered;
-
-    const fieldValue = props.data && props.data[field.uuid];
-
-    if (field.data_type === DataTypes.string) {
-      rendered = (
-        <Form.Input
-          error={isError(field)}
-          key={index}
-          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)}
-          key={index}
-          label={field.column_name}
-          required={field.required}
-          onChange={(e, { value }) => onChange(field, value)}
-          value={fieldValue || 0}
-          type='number'
-        />
-      );
-    }
-
-    if (field.data_type === DataTypes.select) {
-      rendered = (
-        <Form.Dropdown
-          clearable
-          error={isError(field)}
-          key={index}
-          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={field.allow_multiple
-            ? (fieldValue || [])
-            : (fieldValue || '')}
-        />
-      );
-    }
-
-    if (field.data_type === DataTypes.text) {
-      rendered = (
-        <Form.TextArea
-          error={isError(field)}
-          key={index}
-          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)}
-          key={index}
-          label={field.column_name}
-          required={field.required}
-        >
-          <DatePicker
-            onChange={(date) => onChange(field, date && date.toISOString())}
-            value={fieldValue && new Date(fieldValue)}
-          />
-        </Form.Input>
-      );
-    }
-
-    if (field.data_type === DataTypes.fuzzyDate) {
-      rendered = (
-        <Form.Input
-          error={isError(field)}
-          key={index}
-          label={field.column_name}
-          required={field.required}
-        >
-          <FuzzyDate
-            centered={false}
-            date={FuzzyDateTransform.toFuzzyDate(fieldValue) || {}}
-            onChange={(date) => onChange(field, FuzzyDateTransform.toData(date))}
-            title={field.column_name}
-          />
-        </Form.Input>
-      );
-    }
-
-    if (field.data_type === DataTypes.boolean) {
-      rendered = (
-        <Form.Checkbox
-          checked={!!fieldValue}
-          error={isError(field)}
-          key={index}
-          label={field.column_name}
-          onChange={(e, { checked }) => onChange(field, checked)}
-        />
-      );
-    }
-
-    if (field.data_type === DataTypes.richText) {
-      rendered = (
-        <Form.Input
-          error={isError(field)}
-          key={index}
-          label={field.column_name}
-          required={field.required}
-        >
-          <RichTextArea
-            onChange={(value) => onChange(field, value)}
-            value={fieldValue}
-          />
-        </Form.Input>
-      );
-    }
-
-    return rendered;
-  }, [props.data, isError, onChange]);
-
-  /**
-   * Fetches the user defined fields when the component mounts.
-   */
-  useEffect(() => {
-    // If the fields have been provided as a prop, there is no need to query them here.
-    if (props.fields) {
-      return;
-    }
-
-    const params = {
-      defineable_id: props.defineableId,
-      defineable_type: props.defineableType,
-      per_page: 0,
-      required: props.required,
-      sort_by: 'order',
-      table_name: props.tableName
-    };
-
-    UserDefinedFieldsService
-      .fetchAll(params)
-      .then(({ data }) => setFields(data.user_defined_fields));
-  }, []);
-
-  return (
-    <>
-      { _.map(fields, renderItem.bind(this)) }
-    </>
-  );
-};
-
-export default UserDefinedFieldsForm;

package/src/components/UserDefinedFieldsList.js

@@ -1,94 +0,0 @@
-// @flow
-
-import { BooleanIcon, ListTable } from '@performant-software/semantic-components';
-import type { ListTableProps } from '@performant-software/semantic-components/types';
-import React, { type ComponentType, useCallback } from 'react';
-import _ from 'underscore';
-import i18n from '../i18n/i18n';
-import UserDefinedFieldModal from './UserDefinedFieldModal';
-import UserDefinedFields from '../utils/UserDefinedFields';
-import UserDefinedFieldsService from '../services/UserDefinedFields';
-
-type Props = ListTableProps & {
-  defaults?: any,
-  excludeColumns?: Array<string>
-};
-
-const OMIT_PROPS = [
-  'collectionName',
-  'columns',
-  'defaults',
-  'excludeColumns',
-  'modal',
-  'onDelete',
-  'onLoad',
-  'onSave'
-];
-
-const DEFAULT_ORDER = 0;
-
-const UserDefinedFieldsList: ComponentType<any> = (props: Props) => {
-  /**
-   * Returns true if the passed column should be hidden by default.
-   *
-   * @type {function(*): *}
-   */
-  const isHidden = useCallback((column) => _.contains(props.excludeColumns, column), [props.excludeColumns]);
-
-  return (
-    <ListTable
-      {..._.omit(props, OMIT_PROPS)}
-      columns={[{
-        name: 'table_name',
-        label: i18n.t('UserDefinedFieldsList.columns.table'),
-        hidden: isHidden('table_name')
-      }, {
-        name: 'column_name',
-        label: i18n.t('UserDefinedFieldsList.columns.name'),
-        hidden: isHidden('column_name')
-      }, {
-        name: 'data_type',
-        label: i18n.t('UserDefinedFieldsList.columns.dataType'),
-        hidden: isHidden('data_type')
-      }, {
-        name: 'required',
-        label: i18n.t('UserDefinedFieldsList.columns.required'),
-        render: (udf) => <BooleanIcon value={udf.required} />,
-        hidden: isHidden('required')
-      }, {
-        name: 'order',
-        label: i18n.t('UserDefinedFieldsList.columns.order'),
-        hidden: isHidden('order')
-      }, {
-        name: 'uuid',
-        label: i18n.t('UserDefinedFieldsList.columns.uuid'),
-        hidden: isHidden('uuid')
-      }]}
-      collectionName='user_defined_fields'
-      modal={{
-        component: UserDefinedFieldModal,
-        props: {
-          defaults: {
-            order: DEFAULT_ORDER,
-            ...(props.defaults || {})
-          },
-          hideTable: isHidden('table_name'),
-          validate: UserDefinedFields.validateUserDefinedField.bind(this)
-        }
-      }}
-      onDelete={(udf) => UserDefinedFieldsService.delete(udf)}
-      onLoad={(params) => UserDefinedFieldsService.fetchAll(params)}
-      onSave={(udf) => UserDefinedFieldsService.save(udf)}
-    />
-  );
-};
-
-UserDefinedFieldsList.defaultProps = {
-  actions: [{
-    name: 'edit'
-  }, {
-    name: 'delete'
-  }]
-};
-
-export default UserDefinedFieldsList;

package/src/constants/DataTypes.js

@@ -1,9 +0,0 @@
-// @flow
-
-import { UserDefinedFields as UserDefinedFieldsUtils } from '@performant-software/shared-components';
-
-const { DataTypes } = UserDefinedFieldsUtils;
-
-export {
-  DataTypes
-};

package/src/hooks/UserDefinedFields.js

@@ -1,114 +0,0 @@
-// @flow
-
-import { BooleanIcon } from '@performant-software/semantic-components';
-import { Date as DateUtils, FuzzyDate as FuzzyDateUtils } from '@performant-software/shared-components';
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useState
-} from 'react';
-import _ from 'underscore';
-import { DataTypes } from '../constants/DataTypes';
-import UserDefinedFieldsService from '../services/UserDefinedFields';
-
-/**
- * Returns the loading state and list of user defined columns for the passed defineable ID and defineable type.
- *
- * @param defineableId
- * @param defineableType
- * @param options
- *
- * @returns {{userDefinedColumns: [], loading: boolean}}
- */
-const useUserDefinedColumns = (defineableId, defineableType, options = {}) => {
-  const [userDefinedFields, setUserDefinedFields] = useState([]);
-  const [loading, setLoading] = useState(false);
-
-  const { sortable = true } = options;
-
-  /**
-   * Resolves the user defined field value for the passed item.
-   *
-   * @type {(function(*, *): (null|*))|*}
-   */
-  const resolveValue = useCallback((item, field) => {
-    let record = item;
-
-    if (options.resolveRecord) {
-      record = options.resolveRecord(item);
-    }
-
-    if (!record.user_defined) {
-      return null;
-    }
-
-    return record.user_defined[field.uuid];
-  }, [options.resolveRecord]);
-
-  /**
-   * Memo-izes the columns.
-   *
-   * @type {[]}
-   */
-  const userDefinedColumns = useMemo(() => {
-    const columns = [];
-
-    _.each(userDefinedFields, (field) => {
-      const column = {
-        name: field.uuid,
-        label: field.column_name,
-        hidden: true,
-        sortable
-      };
-
-      if (field.data_type === DataTypes.boolean) {
-        columns.push({
-          ...column,
-          render: (item) => (
-            <BooleanIcon
-              value={resolveValue(item, field)}
-            />
-          )
-        });
-      } else if (field.data_type === DataTypes.date) {
-        columns.push({
-          ...column,
-          resolve: (item) => DateUtils.formatDate(resolveValue(item, field))
-        });
-      } else if (field.data_type === DataTypes.fuzzyDate) {
-        columns.push({
-          ...column,
-          resolve: (item) => FuzzyDateUtils.getDateView(resolveValue(item, field))
-        });
-      } else if (field.data_type !== DataTypes.richText) {
-        columns.push({
-          ...column,
-          resolve: (item) => resolveValue(item, field)
-        });
-      }
-    });
-
-    return columns;
-  }, [resolveValue, userDefinedFields]);
-
-  /**
-   * Fetches the user defined fields for the passed defineable ID and defineable type.
-   */
-  useEffect(() => {
-    setLoading(true);
-
-    UserDefinedFieldsService
-      .fetchAll({ defineable_id: defineableId, defineable_type: defineableType })
-      .then(({ data }) => setUserDefinedFields(data.user_defined_fields))
-      .finally(() => setLoading(false));
-  }, [defineableId, defineableId]);
-
-  return {
-    loading,
-    userDefinedColumns,
-    userDefinedFields
-  };
-};
-
-export default useUserDefinedColumns;

package/src/i18n/en.json

@@ -1,42 +0,0 @@
-{
-  "UserDefinedFieldModal": {
-    "labels": {
-      "allowMultiple": "Allow multiple",
-      "dataType": "Data type",
-      "name": "Name",
-      "order": "Order",
-      "required": "Required",
-      "searchable": "Searchable",
-      "table": "Table"
-    },
-    "title": {
-      "add": "Add User Defined Field",
-      "edit": "Edit User Defined Field"
-    }
-  },
-  "UserDefinedFields": {
-    "errors": {
-      "numeric": "{{name}} must be numeric"
-    }
-  },
-  "UserDefinedFieldsEmbeddedList": {
-    "columns": {
-      "dataType": "Data type",
-      "name": "Name",
-      "order": "Order",
-      "required": "Required",
-      "table": "Table",
-      "uuid": "Identifier"
-    }
-  },
-  "UserDefinedFieldsList": {
-    "columns": {
-      "dataType": "Data type",
-      "name": "Name",
-      "order": "Order",
-      "required": "Required",
-      "table": "Table",
-      "uuid": "Identifier"
-    }
-  }
-}

package/src/i18n/i18n.js

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

package/src/index.js

@@ -1,28 +0,0 @@
-// @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';
-
-// Constants
-export { DataTypes } from './constants/DataTypes';
-
-// Hooks
-export { default as useUserDefinedColumns } from './hooks/UserDefinedFields';
-
-// Services
-export { default as UserDefinedFieldsService } from './services/UserDefinedFields';
-
-// Transforms
-export { default as FieldableTransform } from './transforms/Fieldable';
-export { default as UserDefinedFieldTransform } from './transforms/UserDefinedField';
-export { default as UserDefinedFieldsTransform } from './transforms/UserDefinedFields';
-
-// Types
-export type { UserDefinedField } from './types/UserDefinedField';
-
-// Utils
-export { default as UserDefinedFields } from './utils/UserDefinedFields';

package/src/services/UserDefinedFields.js

@@ -1,48 +0,0 @@
-// @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/src/transforms/Fieldable.js

@@ -1,27 +0,0 @@
-// @flow
-
-import { Form as FormUtils } from '@performant-software/shared-components';
-import _ from 'underscore';
-
-/**
- * Class responsible for transforming fieldable data.
- */
-class Fieldable {
-  /**
-   * Converts the "user_defined" data for the passed fieldable item into form data.
-   *
-   * @param formData
-   * @param prefix
-   * @param item
-   */
-  toFormData(formData, prefix, item) {
-    const { user_defined: userDefined } = item;
-
-    _.each(_.keys(userDefined), (key) => {
-      FormUtils.setAttribute(formData, `${prefix}[user_defined]`, userDefined, key);
-    });
-  }
-}
-
-const FieldableTransform: Fieldable = new Fieldable();
-export default FieldableTransform;

package/src/transforms/UserDefinedField.js

@@ -1,38 +0,0 @@
-// @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',
-      'searchable',
-      'allow_multiple',
-      'options',
-      'order'
-    ];
-  }
-
-  /**
-   * Returns the user defined field parameter name.
-   *
-   * @returns {string}
-   */
-  getParameterName(): string {
-    return 'user_defined_field';
-  }
-}
-
-const UserDefinedFieldTransform: UserDefinedField = new UserDefinedField();
-export default UserDefinedFieldTransform;