@performant-software/user-defined-fields 3.1.22-beta.1 → 3.1.22-beta.11

package/types/components/UserDefinedFieldModal.js.flow

@@ -1,137 +0,0 @@
-// @flow
-
-import type { EditContainerProps } from '@performant-software/shared-components/types';
-import React, {
-  useCallback,
-  useEffect,
-  useState,
-  type ComponentType
-} from 'react';
-import { Form, Modal } from 'semantic-ui-react';
-import _ from 'underscore';
-import i18n from '../i18n/i18n';
-import UserDefinedFieldOptions from './UserDefinedFieldOptions';
-import UserDefinedFieldsService from '../services/UserDefinedFields';
-
-type Props = EditContainerProps & {
-  hideTable?: boolean
-};
-
-const DataTypes = {
-  select: 'Select'
-};
-
-const UserDefinedFieldModal: ComponentType<any> = (props: Props) => {
-  const [dataTypeOptions, setDataTypeOptions] = useState([]);
-  const [tableOptions, setTableOptions] = useState([]);
-
-  /**
-   * Transforms the passed array of items into a Semantic UI option object.
-   *
-   * @type {function(*): *}
-   */
-  const transformOptions = useCallback((items) => (
-    _.map(items, (item) => ({ key: item, value: item, text: item }))
-  ), []);
-
-  /**
-   * Fetch the available tables and data types.
-   */
-  useEffect(() => {
-    if (!props.hideTable) {
-      UserDefinedFieldsService
-        .fetchTables()
-        .then(({ data }) => setTableOptions(transformOptions(data.tables)));
-    }
-
-    UserDefinedFieldsService
-      .fetchDataTypes()
-      .then(({ data }) => setDataTypeOptions(transformOptions(data.data_types)));
-  }, []);
-
-  return (
-    <Modal
-      as={Form}
-      centered={false}
-      open
-    >
-      <Modal.Header
-        content={props.item.id
-          ? i18n.t('UserDefinedFieldModal.title.edit')
-          : i18n.t('UserDefinedFieldModal.title.add')}
-      />
-      <Modal.Content>
-        { !props.hideTable && (
-          <Form.Dropdown
-            clearable
-            error={props.isError('table_name')}
-            label={i18n.t('UserDefinedFieldModal.labels.table')}
-            onChange={props.onTextInputChange.bind(this, 'table_name')}
-            options={tableOptions}
-            required={props.isRequired('table_name')}
-            selection
-            selectOnBlur={false}
-            value={props.item.table_name || ''}
-          />
-        )}
-        <Form.Input
-          error={props.isError('column_name')}
-          label={i18n.t('UserDefinedFieldModal.labels.name')}
-          onChange={props.onTextInputChange.bind(this, 'column_name')}
-          required={props.isRequired('column_name')}
-          value={props.item.column_name || ''}
-        />
-        <Form.Dropdown
-          clearable
-          error={props.isError('data_type')}
-          label={i18n.t('UserDefinedFieldModal.labels.dataType')}
-          onChange={props.onTextInputChange.bind(this, 'data_type')}
-          options={dataTypeOptions}
-          required={props.isRequired('data_type')}
-          selection
-          selectOnBlur={false}
-          value={props.item.data_type || ''}
-        />
-        <Form.Input
-          error={props.isError('order')}
-          label={i18n.t('UserDefinedFieldModal.labels.order')}
-          onChange={props.onTextInputChange.bind(this, 'order')}
-          required={props.isRequired('oder')}
-          value={props.item.order || 0}
-          type='number'
-        />
-        <Form.Group>
-          <Form.Checkbox
-            error={props.isError('required')}
-            checked={props.item.required}
-            label={i18n.t('UserDefinedFieldModal.labels.required')}
-            onChange={props.onCheckboxInputChange.bind(this, 'required')}
-          />
-          <Form.Checkbox
-            error={props.isError('searchable')}
-            checked={props.item.searchable}
-            label={i18n.t('UserDefinedFieldModal.labels.searchable')}
-            onChange={props.onCheckboxInputChange.bind(this, 'searchable')}
-          />
-          { props.item.data_type === DataTypes.select && (
-            <Form.Checkbox
-              error={props.isError('allow_multiple')}
-              checked={props.item.allow_multiple}
-              label={i18n.t('UserDefinedFieldModal.labels.allowMultiple')}
-              onChange={props.onCheckboxInputChange.bind(this, 'allow_multiple')}
-            />
-          )}
-        </Form.Group>
-        { props.item.data_type === DataTypes.select && (
-          <UserDefinedFieldOptions
-            options={props.item.options}
-            onChange={(options) => props.onSetState({ options })}
-          />
-        )}
-      </Modal.Content>
-      { props.children }
-    </Modal>
-  );
-};
-
-export default UserDefinedFieldModal;

package/types/components/UserDefinedFieldOptions.js.flow

@@ -1,112 +0,0 @@
-// @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

@@ -1,86 +0,0 @@
-// @flow
-
-import { BooleanIcon, EmbeddedList } from '@performant-software/semantic-components';
-import type { EmbeddedListProps } from '@performant-software/semantic-components/types';
-import React, { useCallback } from 'react';
-import _ from 'underscore';
-import i18n from '../i18n/i18n';
-import UserDefinedFieldModal from './UserDefinedFieldModal';
-import UserDefinedFields from '../utils/UserDefinedFields';
-
-type Props = EmbeddedListProps & {
-  actions?: Array<any>,
-  defaults: any,
-  excludeColumns?: Array<string>
-};
-
-const OMIT_PROPS = [
-  'columns',
-  'defaults',
-  'excludeColumns',
-  'modal'
-];
-
-const DEFAULT_ORDER = 0;
-
-const UserDefinedFieldsEmbeddedList = (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 (
-    <EmbeddedList
-      {..._.omit(props, OMIT_PROPS)}
-      columns={[{
-        name: 'table_name',
-        label: i18n.t('UserDefinedFieldsEmbeddedList.columns.table'),
-        hidden: isHidden('table_name')
-      }, {
-        name: 'column_name',
-        label: i18n.t('UserDefinedFieldsEmbeddedList.columns.name'),
-        hidden: isHidden('column_name')
-      }, {
-        name: 'data_type',
-        label: i18n.t('UserDefinedFieldsEmbeddedList.columns.dataType'),
-        hidden: isHidden('data_type')
-      }, {
-        name: 'required',
-        label: i18n.t('UserDefinedFieldsEmbeddedList.columns.required'),
-        render: (udf) => <BooleanIcon value={udf.required} />,
-        hidden: isHidden('required')
-      }, {
-        name: 'order',
-        label: i18n.t('UserDefinedFieldsEmbeddedList.columns.order'),
-        hidden: isHidden('order')
-      }, {
-        name: 'uuid',
-        label: i18n.t('UserDefinedFieldsEmbeddedList.columns.uuid'),
-        hidden: isHidden('uuid')
-      }]}
-      modal={{
-        component: UserDefinedFieldModal,
-        props: {
-          defaults: {
-            order: DEFAULT_ORDER,
-            ...(props.defaults || {})
-          },
-          hideTable: isHidden('table_name'),
-          validate: UserDefinedFields.validateUserDefinedField.bind(this)
-        }
-      }}
-    />
-  );
-};
-
-UserDefinedFieldsEmbeddedList.defaultProps = {
-  actions: [{
-    name: 'edit'
-  }, {
-    name: 'delete'
-  }]
-};
-
-export default UserDefinedFieldsEmbeddedList;

package/types/components/UserDefinedFieldsForm.js.flow

@@ -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/types/components/UserDefinedFieldsList.js.flow

@@ -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/types/constants/DataTypes.js.flow

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