neo-cmp-cli 1.13.16 → 1.13.18

package/template/neo-pipeline-cmps/src/components/filterBar__c/index.tsx

@@ -0,0 +1,731 @@
+/**
+ * @file Filter Bar Component
+ * @description Supports multi-dimensional filtering by date range, owner (user entity), business type, etc.
+ */
+import * as React from 'react';
+import { DatePicker, Select, Spin } from 'antd';
+import moment, { Moment } from 'moment';
+// @ts-ignore
+import { request, xObject } from 'neo-open-api';
+// @ts-ignore
+import { BaseCmp, NeoEvent } from 'neo-ui-common';
+
+import { getDefaultOpportunityOwnerIds } from '../../utils/common';
+
+import {
+  defaultChangesSinceOptions,
+  momentRangeToTimestamps,
+  normalizeOptions,
+  parseBusinessTypes,
+  parseUserRecordsToOwnerOptions,
+  relativeCloseDateRangeFromCode,
+  resolveDefaultBusinessTypeValue,
+  type FilterOption,
+  type TimestampRange,
+} from '../../utils/filterBar';
+
+export type { FilterOption, TimestampRange } from '../../utils/filterBar';
+
+import './common.scss';
+import './style.scss';
+
+const { RangePicker } = DatePicker;
+
+const BUSI_TYPE_URL = '/rest/data/v2.0/xobjects/opportunity/busiType';
+
+/** Opportunity Owner personnel list: platform user entity */
+const USER_ENTITY_API_KEY = 'user';
+const USER_QUERY_FIELDS = [
+  'id',
+  'name',
+  'nickName',
+  'personalEmail',
+  'telephone',
+] as const;
+
+interface FilterBarEventData {
+  data: FilterBarChangePayload;
+}
+
+export interface FilterBarChangePayload {
+  closeDate: number | string;
+  closeDateCustomRange?: TimestampRange;
+  /** Opportunity Owner multi-select: personnel id list, empty array means none selected */
+  opportunityOwner: (number | string)[];
+  businessType: string | number;
+  /** Current business type display name (corresponding to businessType) */
+  businessTypeLabel?: string;
+  businessTypeApiKey?: string;
+  changesSince: string | number;
+  /** Changes Since Custom: selected date's midnight Unix millisecond timestamp */
+  changesSinceCustomTime?: number;
+}
+
+/** Designer / page-injected current logged-in user (consistent with __NeoCurrentUser) */
+interface NeoCurrentUser {
+  id: number;
+  name: string;
+  icon?: string;
+  departId?: number;
+  localCode?: string;
+  type?: number;
+  languageCode?: string;
+  currencyApiKey?: string;
+}
+
+interface FilterBarProps {
+  /** Close Date dropdown options (passed in from page / designer configuration) */
+  closeDateOptions?: FilterOption[];
+  /**
+   * Default business type: when matching the apiKey of an item returned by the API, use that item's id (or value) as the initial Business Type selection
+   */
+  defaultBusiType?: string;
+  className?: string;
+  style?: React.CSSProperties;
+  /** Coexists with NeoEvent: allows parent component to listen directly */
+  onValuesChange?: (payload: FilterBarChangePayload) => void;
+  /** Page data: contains __NeoCurrentUser, used to insert current user at the top of the owner list */
+  data?: { __NeoCurrentUser?: NeoCurrentUser };
+}
+
+interface FilterValues {
+  closeDate: number | string;
+  businessType: string | number;
+  changesSince: string | number;
+}
+
+interface FilterBarState {
+  closeDateOptions: FilterOption[];
+  changesSinceOptions: FilterOption[];
+  opportunityOwnerOptions: FilterOption[];
+  businessTypeOptions: FilterOption[];
+  values: FilterValues;
+  /** Opportunity Owner selected personnel ids (multi-select) */
+  opportunityOwner: (number | string)[];
+  /** Custom date range timestamps when Close Date is 'custom' */
+  closeDateCustomRange: TimestampRange | null;
+  /** Single time point when Changes Since is Custom (midnight, Unix ms) */
+  changesSinceCustomTime: number | null;
+  ownerLoading: boolean;
+  businessTypeLoading: boolean;
+}
+
+class FilterBar extends BaseCmp<FilterBarProps, FilterBarState> {
+  /** Initialize filter state and Close Date options */
+  constructor(props: FilterBarProps) {
+    super(props);
+    const closeOpts = normalizeOptions(
+      props.closeDateOptions && props.closeDateOptions.length > 0
+        ? props.closeDateOptions
+        : FilterBar.defaultCloseDateOptions(),
+    );
+    const csOpts = defaultChangesSinceOptions();
+    const initialClose = closeOpts[2]?.value ?? 401; // Default: this quarter
+    const initialRelativeRange = relativeCloseDateRangeFromCode(initialClose);
+    this.state = {
+      closeDateOptions: closeOpts,
+      changesSinceOptions: csOpts,
+      opportunityOwnerOptions: [],
+      businessTypeOptions: [],
+      values: {
+        closeDate: initialClose,
+        businessType: '',
+        changesSince: csOpts[0]?.value ?? '',
+      },
+      opportunityOwner: getDefaultOpportunityOwnerIds(props),
+      closeDateCustomRange: initialRelativeRange,
+      changesSinceCustomTime: initialRelativeRange?.start ?? null,
+      ownerLoading: false,
+      businessTypeLoading: false,
+    };
+
+    // Bind methods to this
+    this.syncDefaultBusinessTypeFromProps =
+      this.syncDefaultBusinessTypeFromProps.bind(this);
+    this.syncCloseDateOptionsFromProps =
+      this.syncCloseDateOptionsFromProps.bind(this);
+    this.buildPayload = this.buildPayload.bind(this);
+    this.emitChange = this.emitChange.bind(this);
+    this.loadOpportunityOwnerOptions =
+      this.loadOpportunityOwnerOptions.bind(this);
+    this.loadBusinessTypeOptions = this.loadBusinessTypeOptions.bind(this);
+    this.patchValues = this.patchValues.bind(this);
+    this.handleCloseDateChange = this.handleCloseDateChange.bind(this);
+    this.handleChangesSinceChange = this.handleChangesSinceChange.bind(this);
+    this.handleCloseDateRangeChange =
+      this.handleCloseDateRangeChange.bind(this);
+    this.handleChangesSinceTimeChange =
+      this.handleChangesSinceTimeChange.bind(this);
+    this.closeDateRangePickerValue = this.closeDateRangePickerValue.bind(this);
+    this.changesSinceDatePickerValue =
+      this.changesSinceDatePickerValue.bind(this);
+    this.getFilters = this.getFilters.bind(this);
+    this.resetFilters = this.resetFilters.bind(this);
+    this.renderCloseDateBlock = this.renderCloseDateBlock.bind(this);
+    this.renderOwnerBlock = this.renderOwnerBlock.bind(this);
+    this.renderBusinessTypeBlock = this.renderBusinessTypeBlock.bind(this);
+    this.renderChangesSinceBlock = this.renderChangesSinceBlock.bind(this);
+  }
+
+  /** Close Date built-in default options */
+  static defaultCloseDateOptions(): FilterOption[] {
+    return [
+      { value: 201, label: 'This Week' },
+      { value: 301, label: 'This Month' },
+      { value: 401, label: 'This Quarter' },
+      { value: 'custom', label: 'Custom' },
+    ];
+  }
+
+  /** Sync props options and fetch owner and business type data */
+  componentDidMount() {
+    this.syncCloseDateOptionsFromProps(this.props);
+    this.loadOpportunityOwnerOptions();
+    this.loadBusinessTypeOptions();
+  }
+
+  /** Sync local options when props.closeDateOptions changes */
+  componentWillReceiveProps(nextProps: FilterBarProps) {
+    if (nextProps.closeDateOptions !== this.props.closeDateOptions) {
+      this.syncCloseDateOptionsFromProps(nextProps);
+    }
+    if (nextProps.defaultBusiType !== this.props.defaultBusiType) {
+      this.syncDefaultBusinessTypeFromProps(nextProps);
+    }
+    const nextOwnerIds = getDefaultOpportunityOwnerIds(nextProps);
+    const prevUserId = this.props.data?.__NeoCurrentUser?.id;
+    const nextUserId = nextProps.data?.__NeoCurrentUser?.id;
+    if (
+      nextOwnerIds.length > 0 &&
+      prevUserId !== nextUserId &&
+      this.state.opportunityOwner.length === 0
+    ) {
+      this.setState({ opportunityOwner: nextOwnerIds }, () =>
+        this.emitChange(),
+      );
+    }
+  }
+
+  /** Re-match default business type from loaded dropdown data when defaultBusiType config changes */
+  syncDefaultBusinessTypeFromProps(props: FilterBarProps) {
+    const { businessTypeOptions } = this.state;
+    if (!businessTypeOptions.length) return;
+    const nextVal = resolveDefaultBusinessTypeValue(
+      businessTypeOptions,
+      props.defaultBusiType,
+    );
+    this.setState(
+      (prev) => ({
+        values: { ...prev.values, businessType: nextVal },
+      }),
+      () => this.emitChange(),
+    );
+  }
+
+  /** Update Close Date options from props and correct current selected value */
+  syncCloseDateOptionsFromProps(props: FilterBarProps) {
+    const next = normalizeOptions(
+      props.closeDateOptions && props.closeDateOptions.length > 0
+        ? props.closeDateOptions
+        : FilterBar.defaultCloseDateOptions(),
+    );
+    this.setState((prev) => {
+      const stillValid = next.some((o) => o.value === prev.values.closeDate);
+      const closeDate = stillValid
+        ? prev.values.closeDate
+        : next[0]?.value ?? '';
+      const isCustom = String(closeDate).toLowerCase() === 'custom';
+      const relativeRange = !isCustom
+        ? relativeCloseDateRangeFromCode(closeDate)
+        : null;
+      return {
+        closeDateOptions: next,
+        values: { ...prev.values, closeDate },
+        closeDateCustomRange: isCustom
+          ? prev.closeDateCustomRange
+          : relativeRange,
+        changesSinceCustomTime:
+          prev.values.changesSince === 'Custom'
+            ? prev.changesSinceCustomTime
+            : relativeRange?.start ?? null,
+      };
+    });
+  }
+
+  /** Build payload from state for external events / callbacks */
+  buildPayload(): FilterBarChangePayload {
+    const {
+      values,
+      opportunityOwner,
+      closeDateCustomRange,
+      changesSinceCustomTime,
+      businessTypeOptions,
+    } = this.state;
+    const closeCustom = String(values.closeDate).toLowerCase() === 'custom';
+    const changesCustom = values.changesSince === 'Custom';
+
+    const rangeResolved = closeCustom
+      ? closeDateCustomRange
+      : closeDateCustomRange ??
+        relativeCloseDateRangeFromCode(values.closeDate);
+
+    const curBusinessType =
+      values.businessType === '' || values.businessType == null
+        ? undefined
+        : businessTypeOptions.find((o) => o.value === values.businessType);
+
+    return {
+      closeDate: values.closeDate,
+      closeDateCustomRange: rangeResolved ?? undefined,
+      opportunityOwner,
+      businessType: values.businessType,
+      businessTypeLabel: curBusinessType?.label,
+      businessTypeApiKey: curBusinessType?.apiKey,
+      changesSince: values.changesSince,
+      changesSinceCustomTime: changesCustom
+        ? changesSinceCustomTime ?? undefined
+        : rangeResolved?.start != null
+        ? rangeResolved.start
+        : undefined,
+    };
+  }
+
+  /** Log, trigger onValuesChange and designer event */
+  emitChange() {
+    const payload = this.buildPayload();
+    console.log('[FilterBar__c] filters change', payload);
+    const { onValuesChange } = this.props;
+    if (onValuesChange) {
+      onValuesChange(payload);
+    }
+    this.onFiltersChange({
+      data: payload,
+    });
+
+    /*
+    console.log('Triggered a broadcast event updateFilterData:', payload);
+    NeoEvent.broadcast('updateFilterData', payload);
+    */
+  }
+
+  /** Designer event: filter conditions changed (including custom date range) */
+  @NeoEvent.dispatch
+  onFiltersChange(eventData?: FilterBarEventData) {}
+
+  /** Fetch user entity to populate Opportunity Owner dropdown */
+  async loadOpportunityOwnerOptions() {
+    this.setState({ ownerLoading: true });
+    const currentUser = Object.assign({}, this.props.data?.__NeoCurrentUser);
+    // Add marker to current user
+    if (
+      currentUser &&
+      currentUser.name &&
+      currentUser.name.indexOf('（CurrentUser）') === -1
+    ) {
+      currentUser.name = currentUser.name + '（CurrentUser）';
+    }
+    const currentUserRecords =
+      currentUser?.id != null &&
+      currentUser.name != null &&
+      String(currentUser.name).trim() !== ''
+        ? [currentUser]
+        : [];
+
+    try {
+      const result = await xObject.query({
+        xObjectApiKey: USER_ENTITY_API_KEY,
+        fields: [...USER_QUERY_FIELDS],
+        page: 1,
+        pageSize: 500,
+      });
+
+      let opportunityOwnerOptions: FilterOption[] = [];
+      if (result?.status) {
+        const records = Array.isArray(result.data) ? result.data : [];
+        opportunityOwnerOptions = parseUserRecordsToOwnerOptions([
+          ...currentUserRecords,
+          ...records,
+        ]);
+      } else {
+        console.warn(
+          'FilterBar xObject.query(user) not successful:',
+          result?.msg ?? result,
+        );
+        opportunityOwnerOptions =
+          parseUserRecordsToOwnerOptions(currentUserRecords);
+      }
+
+      const defaultOwnerIds = getDefaultOpportunityOwnerIds(this.props);
+      let appliedOwnerDefault = false;
+      this.setState(
+        (prev) => {
+          const shouldApply =
+            defaultOwnerIds.length > 0 && prev.opportunityOwner.length === 0;
+          if (shouldApply) appliedOwnerDefault = true;
+          return {
+            ownerLoading: false,
+            opportunityOwnerOptions,
+            opportunityOwner: shouldApply
+              ? defaultOwnerIds
+              : prev.opportunityOwner,
+          };
+        },
+        () => {
+          if (appliedOwnerDefault) this.emitChange();
+        },
+      );
+    } catch (e) {
+      console.error('FilterBar failed to load owner (user):', e);
+      const fallbackOptions =
+        parseUserRecordsToOwnerOptions(currentUserRecords);
+      const defaultOwnerIds = getDefaultOpportunityOwnerIds(this.props);
+      let appliedOwnerDefault = false;
+      this.setState(
+        (prev) => {
+          const shouldApply =
+            defaultOwnerIds.length > 0 && prev.opportunityOwner.length === 0;
+          if (shouldApply) appliedOwnerDefault = true;
+          return {
+            ownerLoading: false,
+            opportunityOwnerOptions: fallbackOptions,
+            opportunityOwner: shouldApply
+              ? defaultOwnerIds
+              : prev.opportunityOwner,
+          };
+        },
+        () => {
+          if (appliedOwnerDefault) this.emitChange();
+        },
+      );
+    }
+  }
+
+  /** Fetch opportunity business type API to populate Business Type dropdown */
+  async loadBusinessTypeOptions() {
+    this.setState({ businessTypeLoading: true });
+    try {
+      const res = await request({
+        url: BUSI_TYPE_URL,
+        method: 'GET',
+        data: {},
+      });
+      const businessTypeOptions = parseBusinessTypes(res);
+      const defaultBt = resolveDefaultBusinessTypeValue(
+        businessTypeOptions,
+        this.props.defaultBusiType,
+      );
+      this.setState(
+        (prev) => ({
+          businessTypeLoading: false,
+          businessTypeOptions,
+          values: {
+            ...prev.values,
+            businessType: defaultBt,
+          },
+        }),
+        () => {
+          if (defaultBt) this.emitChange();
+        },
+      );
+    } catch (e) {
+      console.error('FilterBar failed to load business types:', e);
+      this.setState({ businessTypeLoading: false, businessTypeOptions: [] });
+    }
+  }
+
+  /** Merge values subset and notify change */
+  patchValues(patch: Partial<FilterValues>) {
+    this.setState(
+      (prev) =>
+        ({
+          values: { ...prev.values, ...patch },
+        } as Pick<FilterBarState, 'values'>),
+      () => this.emitChange(),
+    );
+  }
+
+  /** Close Date dropdown change; for non-custom, write relative period start/end timestamps and start to changesSinceCustomTime */
+  handleCloseDateChange(value: number | string) {
+    if (String(value).toLowerCase() !== 'custom') {
+      const relativeRange = relativeCloseDateRangeFromCode(value);
+      this.setState(
+        (prev) =>
+          ({
+            values: { ...prev.values, closeDate: value },
+            closeDateCustomRange: relativeRange,
+            changesSinceCustomTime:
+              prev.values.changesSince === 'Custom'
+                ? prev.changesSinceCustomTime
+                : relativeRange?.start ?? null,
+          } as Pick<
+            FilterBarState,
+            'values' | 'closeDateCustomRange' | 'changesSinceCustomTime'
+          >),
+        () => this.emitChange(),
+      );
+      return;
+    }
+    this.setState(
+      (prev) => ({
+        values: { ...prev.values, closeDate: value },
+        closeDateCustomRange: null,
+        changesSinceCustomTime:
+          prev.values.changesSince === 'Custom'
+            ? prev.changesSinceCustomTime
+            : null,
+      }),
+      () => this.emitChange(),
+    );
+  }
+
+  /** Changes Since dropdown change; for non-Custom with relative Close Date period, sync start timestamp */
+  handleChangesSinceChange(value: string | number) {
+    if (value !== 'Custom') {
+      const closeDate = this.state.values.closeDate;
+      const closeCustom = String(closeDate).toLowerCase() === 'custom';
+      const relativeRange = !closeCustom
+        ? relativeCloseDateRangeFromCode(closeDate)
+        : null;
+      this.setState(
+        (prev) =>
+          ({
+            values: { ...prev.values, changesSince: value },
+            changesSinceCustomTime: relativeRange?.start ?? null,
+          } as Pick<FilterBarState, 'values' | 'changesSinceCustomTime'>),
+        () => this.emitChange(),
+      );
+      return;
+    }
+    this.setState(
+      (prev) => ({
+        values: { ...prev.values, changesSince: value },
+        changesSinceCustomTime: null,
+      }),
+      () => this.emitChange(),
+    );
+  }
+
+  /** Close Date custom RangePicker: write timestamp range */
+  handleCloseDateRangeChange(dates: any) {
+    const closeDateCustomRange = momentRangeToTimestamps(dates);
+    this.setState({ closeDateCustomRange }, () => this.emitChange());
+  }
+
+  /** Changes Since custom DatePicker: write midnight timestamp */
+  handleChangesSinceTimeChange(date: Moment | null) {
+    const changesSinceCustomTime =
+      date != null ? moment(date).startOf('day').valueOf() : null;
+    this.setState({ changesSinceCustomTime }, () => this.emitChange());
+  }
+
+  /** state.closeDateCustomRange -> RangePicker controlled value */
+  closeDateRangePickerValue(): [Moment | null, Moment | null] | null {
+    const r = this.state.closeDateCustomRange;
+    if (!r || (r.start == null && r.end == null)) return null;
+    return [
+      r.start != null ? moment(r.start) : null,
+      r.end != null ? moment(r.end) : null,
+    ];
+  }
+
+  /** state.changesSinceCustomTime -> DatePicker controlled value */
+  changesSinceDatePickerValue(): Moment | null {
+    const t = this.state.changesSinceCustomTime;
+    if (t == null) return null;
+    return moment(t);
+  }
+
+  /** Action flow / external call: return current filter snapshot */
+  @NeoEvent.function
+  getFilters(): FilterBarChangePayload {
+    return this.buildPayload();
+  }
+
+  /** Action flow: reset to defaults and clear custom ranges, then notify */
+  @NeoEvent.function
+  resetFilters() {
+    const { closeDateOptions, changesSinceOptions } = this.state;
+    const resetClose = closeDateOptions[0]?.value ?? '';
+    const resetCustom = String(resetClose).toLowerCase() === 'custom';
+    const resetRange = !resetCustom
+      ? relativeCloseDateRangeFromCode(resetClose)
+      : null;
+    this.setState(
+      {
+        values: {
+          closeDate: resetClose,
+          businessType: '',
+          changesSince: changesSinceOptions[0]?.value ?? '',
+        },
+        opportunityOwner: getDefaultOpportunityOwnerIds(this.props),
+        closeDateCustomRange: resetRange,
+        changesSinceCustomTime: resetRange?.start ?? null,
+      },
+      () => this.emitChange(),
+    );
+  }
+
+  /** Close Date + custom date range */
+  renderCloseDateBlock() {
+    const { closeDateOptions, values } = this.state;
+    const showCustom = String(values.closeDate).toLowerCase() === 'custom';
+
+    return (
+      <div className="filter-block" key="closeDate">
+        <div className="filter-field">
+          <label>Close Date</label>
+          <Select
+            className="filter-select"
+            value={values.closeDate || undefined}
+            onChange={(v) => this.handleCloseDateChange(v)}
+            options={closeDateOptions.map((o) => ({
+              value: o.value,
+              label: o.label,
+            }))}
+          />
+        </div>
+        {showCustom && (
+          <div className="filter-field filter-field-range">
+            <RangePicker
+              value={this.closeDateRangePickerValue()}
+              onChange={this.handleCloseDateRangeChange}
+              format="YYYY-MM-DD"
+            />
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  /** Opportunity Owner */
+  renderOwnerBlock() {
+    const { opportunityOwnerOptions, ownerLoading, opportunityOwner } =
+      this.state;
+
+    return (
+      <div className="filter-block" key="owner">
+        <div className="filter-field">
+          <label>Opportunity Owner</label>
+          <Spin spinning={ownerLoading}>
+            <div className="filter-select-spin-wrap">
+              <Select
+                className="filter-select filter-select-wide"
+                mode="multiple"
+                allowClear
+                showSearch
+                placeholder="Please select the owner"
+                value={opportunityOwner}
+                optionFilterProp="label"
+                maxTagCount={2}
+                maxTagPlaceholder={(omitted) => `+${omitted.length}`}
+                onChange={(v) =>
+                  this.setState({ opportunityOwner: v ?? [] }, () =>
+                    this.emitChange(),
+                  )
+                }
+                dropdownMatchSelectWidth={320}
+                options={opportunityOwnerOptions.map((o) => ({
+                  value: o.value,
+                  label: o.label,
+                }))}
+              />
+            </div>
+          </Spin>
+        </div>
+      </div>
+    );
+  }
+
+  /** Business Type */
+  renderBusinessTypeBlock() {
+    const { businessTypeOptions, businessTypeLoading, values } = this.state;
+
+    return (
+      <div className="filter-block" key="businessType">
+        <div className="filter-field">
+          <label>Business Type</label>
+          <Spin spinning={businessTypeLoading}>
+            <div className="filter-select-spin-wrap">
+              <Select
+                className="filter-select"
+                allowClear
+                showSearch
+                placeholder="Please select the business type"
+                value={values.businessType || undefined}
+                optionFilterProp="label"
+                onChange={(v) => this.patchValues({ businessType: v || '' })}
+                options={businessTypeOptions.map((o) => ({
+                  value: o.value,
+                  label: o.label,
+                }))}
+              />
+            </div>
+          </Spin>
+        </div>
+      </div>
+    );
+  }
+
+  /** Changes Since + single date when Custom */
+  renderChangesSinceBlock() {
+    const { changesSinceOptions, values } = this.state;
+    const showCustom = values.changesSince === 'Custom';
+
+    return (
+      <div className="filter-block" key="changesSince">
+        <div className="filter-field">
+          <label>
+            Changes Since
+            <span className="help-tip">
+              ?
+              <span className="help-tip-text">
+                Changes Since custom: start time relative to the report period;
+                select a date when Custom
+              </span>
+            </span>
+          </label>
+          <Select
+            className="filter-select"
+            value={values.changesSince || undefined}
+            onChange={(v) => this.handleChangesSinceChange(v)}
+            options={changesSinceOptions.map((o) => ({
+              value: o.value,
+              label: o.label,
+            }))}
+          />
+        </div>
+        {showCustom && (
+          <div className="filter-field filter-field-range">
+            <DatePicker
+              value={this.changesSinceDatePickerValue()}
+              onChange={this.handleChangesSinceTimeChange}
+              format="YYYY-MM-DD"
+              placeholder="Select date"
+            />
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  /** Filter bar root layout */
+  render() {
+    const { className, style } = this.props;
+    console.log('[FilterBar__c] render', this.props);
+
+    return (
+      <div
+        className={`filterBar__c ${className || ''}`}
+        style={style}
+        data-time="2026.4.17 01"
+      >
+        {this.renderCloseDateBlock()}
+        {this.renderOwnerBlock()}
+        {this.renderBusinessTypeBlock()}
+        {this.renderChangesSinceBlock()}
+      </div>
+    );
+  }
+}
+
+export default FilterBar;