neo-cmp-cli 1.13.16 → 1.13.18

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

@@ -0,0 +1,667 @@
+/**
+ * @file XObject data table component (simplified version)
+ * @description XObject entity data table component based on the Neo platform, supports data display only
+ */
+import * as React from 'react';
+import { Table, Spin, Empty, Popover } from 'antd';
+// @ts-ignore
+import { xObject } from 'neo-open-api'; // Neo Open API
+// @ts-ignore
+import isEqual from 'lodash/isEqual';
+
+// Neo Open API// Import neo-ui-common / BaseCmp
+// @ts-ignore
+import { BaseCmp } from 'neo-ui-common';
+
+// Import neo-ui-common / NeoEvent
+// @ts-ignore
+import { NeoEvent } from 'neo-ui-common';
+
+import queryByCustomSQL from '../../utils/queryByCustomSQL';
+import {
+  closeRangeFromFilter,
+  entityTypeIdForWhere,
+  normalizeOwnerIdsForWhere,
+  getDefaultFilterByProps,
+} from '../../utils/common';
+import {
+  buildHistoryMap,
+  closeDateChangeTooltipTitle,
+  closeDateTrend,
+  formatActivityDateTime,
+  formatCloseDate,
+  formatMoneyCell,
+  formatMoneySummaryAmount,
+  formatPercentCell,
+  isMoneyField,
+  moneyChangeTooltipTitle,
+  moneyTrend,
+  renderOppHealthAssessmentLevel,
+  renderTrendCell,
+  renderWinRateHoverCard,
+  sumMoneyRows,
+  type FieldInfo,
+  type HistoryOppSnap,
+} from '../../utils/simpleTable';
+
+import ShowHealthResult from '../showHealthResult__c';
+
+import './common.scss';
+import './style.scss';
+
+export type { HistoryOppSnap } from '../../utils/simpleTable';
+
+/** Opportunity detail page hash route (consistent with platform neoweb) */
+function buildOpportunityDetailUrl(id: string, objectApiKey: string): string {
+  const q = new URLSearchParams({
+    objectApiKey,
+    recordId: id,
+  });
+  return `/bff/neoweb#/entityDetail/opportunity/${id}?${q.toString()}`;
+}
+
+/** Fields not displayed in the table (can still be fetched via xObjectDataApi.fields, used for hover cards / tooltips) */
+const HIDDEN_TABLE_COLUMN_KEYS = new Set([
+  'customItem244__c',
+  'customItem241__c',
+  'customItem242__c',
+  'customItem246__c',
+  'customItem247__c',
+  'customItem245__c',
+  // 'objectId', // Needed for navigating to detail page
+  // 'businessTypeId' // Needed for navigating to detail page
+]);
+
+/** Historical opportunity SQL consistent with stageSwitch; field order must match query fields (array rows parsed by column index) */
+const HISTORY_OPPORTUNITY_BI_KEY = 'biCustomModel_397169_20260401104916618';
+const HISTORY_QUERY_FIELDS = [
+  // 'id', // Historical version ID
+  'opportunity_1__id', // Opportunity ID
+  'opportunity_1_closeDate',
+  'opportunity_1_opportunityName',
+  'opportunity_1_saleStageId',
+  'opportunity_1_money',
+] as const;
+
+const defaultXObjectDataApi = {
+  xObjectApiKey: 'opportunity',
+  fields: [
+    'opportunityName', // OpportunityStageName Opportunity Name
+    'money', // Amount
+    'closeDate', // Close Date
+    'customItem248__c', // Stage
+    // 'oppHealthAssessmentScore',
+    'recentActivityRecordTime',
+    'oppHealthAssessmentLevel', // 1.AI Score; hover card: calls opportunity health assessment API
+    'customItem239__c', // 2.AI Win Rate: 3 fields shown in hover card (baseline, positiveFactors, negativeFactors)
+    'customItem244__c', // baseline
+    'customItem241__c', // positiveFactors
+    'customItem242__c', // negativeFactors
+    'customItem246__c', // AmoutChanged
+    'customItem247__c', // ClosedDateChanged
+    'customItem245__c', // StageChanged
+    // 'objectId', // Needed for navigating to detail page
+    // 'businessTypeId' // Needed for navigating to detail page
+  ],
+  page: 1,
+  pageSize: 50,
+};
+/**
+ * Component props interface
+ */
+interface SimpleTableProps {
+  /** XObject entity API Key, used to identify the data object to operate on */
+  xObjectDataApi: {
+    xObjectApiKey: string;
+    fields: string[];
+    fieldDescList?: any[];
+    autoFetchData?: boolean;
+  };
+  /** Neo platform data, including system information */
+  data?: any;
+  entityData?: any; // Entity data automatically fetched by Neo platform
+  /** Whether it is a custom entity object */
+  custom?: boolean;
+  /** Component class name */
+  className?: string;
+  /** Table title, takes priority */
+  title?: string;
+  /** Description text below the title */
+  description?: string;
+  /** Currently active sales stage */
+  activeStage?: string;
+}
+
+/**
+ * Component state interface
+ */
+interface SimpleTableState {
+  /** Table title */
+  title?: string;
+  fieldList: FieldInfo[];
+  /** Table data source */
+  dataSource: any[];
+  /** Loading state */
+  loading: boolean;
+  /** Error message */
+  error: string | null;
+  activeStage: string; // Currently active sales stage
+  /**
+   * Consistent with FilterBar event payload (closeDateCustomRange / opportunityOwner / businessType, etc.);
+   * Default value is defaultFilter, getFilterWhere only reads from it
+   */
+  filter: any;
+}
+
+/**
+ * XObject data table component (simplified version)
+ * Supports data display only, does not support CRUD operations
+ */
+export default class SimpleTable extends BaseCmp<
+  SimpleTableProps,
+  SimpleTableState
+> {
+  constructor(props: SimpleTableProps) {
+    super(props);
+
+    // Initialize component state
+    this.state = {
+      fieldList: [],
+      dataSource: [],
+      loading: false,
+      error: null,
+      activeStage: props.activeStage || 'Prospecting',
+      filter: getDefaultFilterByProps(props),
+    };
+
+    this.loadData = this.loadData.bind(this);
+    this.loadFieldList = this.loadFieldList.bind(this);
+    this.getCurFieldList = this.getCurFieldList.bind(this);
+    this.getMoneyFieldApiKey = this.getMoneyFieldApiKey.bind(this);
+    this.generateColumns = this.generateColumns.bind(this);
+    this.getFilterWhere = this.getFilterWhere.bind(this);
+    this.setFilter = this.setFilter.bind(this);
+    this.updateActiveStage = this.updateActiveStage.bind(this);
+  }
+
+  componentDidMount() {
+    // const { xObjectDataApi } = this.props;
+    // const { xObjectApiKey } = xObjectDataApi || {};
+    const { xObjectApiKey } = defaultXObjectDataApi;
+
+    if (xObjectApiKey) {
+      // Initialize field list and load data
+      this.loadFieldList();
+      this.loadData();
+    }
+
+    /*
+    // Broadcast event: update FilterBar filter
+    NeoEvent.listen('updateFilterData', (filterData: any) => {
+      console.log('SimpleTable received a broadcast event updateFilterData: ', filterData);
+      this.setFilter(filterData);
+    });
+
+    // Broadcast event: update the currently active sales stage
+    NeoEvent.listen('updateActiveStage', (activeStage: string) => {
+      console.log('SimpleTable received a broadcast event updateActiveStage: ', activeStage);
+      this.updateActiveStage(activeStage);
+    });
+    */
+  }
+
+  /**
+   * Load field list
+   * Fetch XObject field description information from the Neo platform
+   */
+  async loadFieldList() {
+    const xObjectDataApi: any = defaultXObjectDataApi;
+
+    // Method 1: Get field descriptions directly from props.xObjectDetailApi
+    if (xObjectDataApi && xObjectDataApi.fieldDescList) {
+      this.setState({ fieldList: xObjectDataApi.fieldDescList });
+    } else {
+      // Method 2: Fetch field descriptions via OpenAPI SDK
+      if (!xObjectDataApi.xObjectApiKey) return;
+      try {
+        const resultData = await xObject.getDesc(xObjectDataApi.xObjectApiKey);
+        if (resultData && resultData.status) {
+          const result = resultData.data || {};
+          const fieldList = result.fields || [];
+          this.setState({ fieldList, title: result.label });
+        }
+      } catch (error) {
+        console.error('Failed to get field list:', error);
+      }
+    }
+  }
+
+  /**
+   * Current visible field list for the table (consistent with column configuration)
+   */
+  getCurFieldList(): FieldInfo[] {
+    // const { xObjectDataApi } = this.props;
+    const xObjectDataApi: any = defaultXObjectDataApi;
+    const { fieldList } = this.state;
+    const { fields, fieldDescList } = xObjectDataApi || {};
+    let curFieldList =
+      fieldDescList && fieldDescList.length > 0 ? fieldDescList : fieldList;
+
+    if (fields && fields.length > 0) {
+      curFieldList = curFieldList.filter((field: FieldInfo) =>
+        fields.includes(field.apiKey),
+      );
+    }
+    return curFieldList;
+  }
+
+  /**
+   * Money field apiKey for summary (consistent with the money column, takes the first currency field)
+   */
+  getMoneyFieldApiKey(): string | null {
+    const moneyField = this.getCurFieldList().find((f) => isMoneyField(f));
+    return moneyField?.apiKey ?? null;
+  }
+
+  /**
+   * Generate table column configuration
+   * @returns Array of table column configurations
+   */
+  generateColumns() {
+    const xObjectDataApi: any = defaultXObjectDataApi;
+
+    const curFieldList = this.getCurFieldList().filter(
+      (field) => !HIDDEN_TABLE_COLUMN_KEYS.has(field.apiKey),
+    );
+
+    // Generate base column configuration from field list
+    const columns: any[] = curFieldList.map((field) => {
+      const col: any = {
+        title: field.label,
+        dataIndex: field.apiKey,
+        key: field.apiKey,
+        ellipsis: true,
+      };
+      if (
+        field.apiKey === 'oppHealthAssessmentLevel' ||
+        field.apiKey === 'customItem239__c'
+      ) {
+        col.title = (
+          <span className="simpleTable-th-title-with-ai-icon">
+            <span className="simpleTable-th-ai-icon" />
+            <span>{field.label}</span>
+          </span>
+        );
+      }
+      if (field.apiKey === 'closeDate') {
+        col.render = (text: unknown, record: any) => {
+          const display = formatCloseDate(text);
+          const trend = closeDateTrend(text, record?.historyData);
+          if (trend !== 'up' && trend !== 'down') {
+            return display;
+          }
+          return renderTrendCell({
+            displayText: display,
+            trend,
+            tooltip: closeDateChangeTooltipTitle(record, text),
+          });
+        };
+      } else if (field.apiKey === 'opportunityName') {
+        col.render = (text: unknown, record: any) => {
+          const display = text == null || text === '' ? '—' : String(text);
+          const id =
+            record?.id != null && record.id !== '' ? String(record.id) : '';
+          const objectApiKey = xObjectDataApi?.xObjectApiKey;
+          if (!id || !objectApiKey) {
+            return display;
+          }
+          const url = buildOpportunityDetailUrl(id, objectApiKey);
+          return (
+            <a
+              className="simpleTable-opp-name-link"
+              href={url}
+              target="_blank"
+              /*
+              onClick={(e) => {
+                e.preventDefault();
+                window.location.assign(url);
+              }}
+              */
+            >
+              {display}
+            </a>
+          );
+        };
+      } else if (field.apiKey === 'recentActivityRecordTime') {
+        col.render = (text: unknown) => formatActivityDateTime(text);
+      } else if (field.apiKey === 'oppHealthAssessmentLevel') {
+        col.render = (text: unknown, record: any) => {
+          const cell = renderOppHealthAssessmentLevel(text);
+          const id =
+            record?.id != null && record.id !== '' ? String(record.id) : '';
+          const xObjectApiKey = xObjectDataApi?.xObjectApiKey;
+          if (!id || !xObjectApiKey) {
+            return cell;
+          }
+          return (
+            <Popover
+              content={
+                <div className="simpleTable-health-popover-body">
+                  <ShowHealthResult id={id} xObjectApiKey={xObjectApiKey} />
+                </div>
+              }
+              trigger="hover"
+              placement="topLeft"
+              overlayClassName="simpleTable-health-popover-overlay"
+              mouseEnterDelay={0.08}
+            >
+              <span className="simpleTable-health-popover-trigger">{cell}</span>
+            </Popover>
+          );
+        };
+      } else if (field.apiKey === 'customItem239__c') {
+        col.align = 'center';
+        col.render = (_text: unknown, record: any) => (
+          <Popover
+            content={renderWinRateHoverCard(record)}
+            trigger="hover"
+            placement="topLeft"
+            overlayClassName="simpleTable-winrate-popover"
+            mouseEnterDelay={0.08}
+          >
+            <span className="simpleTable-winrate-trigger">
+              {formatPercentCell(record?.customItem239__c)}
+            </span>
+          </Popover>
+        );
+      } else if (isMoneyField(field)) {
+        // col.align = 'right';
+        col.render = (text: unknown, record: any) => {
+          const display = formatMoneyCell(text);
+          const trend = moneyTrend(text, record?.historyData);
+          if (trend !== 'up' && trend !== 'down') {
+            return display;
+          }
+          return renderTrendCell({
+            displayText: display,
+            trend,
+            tooltip: moneyChangeTooltipTitle(record, text),
+          });
+        };
+      }
+      return col;
+    });
+
+    return columns;
+  }
+
+  /**
+   * Convert FilterBar structured filter to xObject.query where string array (consistent with stageSwitch, SDK concatenates with AND in order)
+   */
+  getFilterWhere(): string[] {
+    const raw = this.state.filter;
+    if (!raw || typeof raw !== 'object' || Array.isArray(raw)) {
+      return [];
+    }
+    const curFilter = raw as Record<string, unknown>;
+    const where: string[] = [];
+
+    const range = closeRangeFromFilter(curFilter.closeDateCustomRange);
+    if (range) {
+      where.push(`closeDate >= ${range.start} and closeDate <= ${range.end}`);
+    }
+
+    const ownerIds = normalizeOwnerIdsForWhere(curFilter.opportunityOwner);
+    if (ownerIds.length === 1) {
+      where.push(`ownerId = ${ownerIds[0]}`);
+    } else if (ownerIds.length > 1) {
+      where.push(`ownerId in (${ownerIds.join(', ')})`);
+    }
+
+    const entityTypeId = entityTypeIdForWhere(curFilter.businessType);
+    if (entityTypeId != null) {
+      where.push(`entityType = ${entityTypeId}`);
+    }
+
+    /*
+    // If activeStage exists, add stage filter condition
+    if (this.state.activeStage) {
+      // customItem248__c is the sales stage field
+      where.push(`customItem248__c = '${this.state.activeStage}'`);
+    }
+    */
+
+    return where;
+  }
+
+  /** Consistent with stageSwitch: historical opportunity custom SQL where (opportunity_1_* fields) */
+  getHistoryOpportunityQueryFilter(): string[] {
+    const raw = this.state.filter;
+    const defaultFilter = getDefaultFilterByProps(this.props);
+
+    const curFilter: Record<string, unknown> =
+      raw && typeof raw === 'object' && !Array.isArray(raw)
+        ? Object.keys(raw as object).length > 0
+          ? (raw as Record<string, unknown>)
+          : defaultFilter
+        : defaultFilter;
+
+    const where: string[] = [];
+
+    const range = closeRangeFromFilter(curFilter.closeDateCustomRange);
+    if (range) {
+      where.push(
+        `opportunity_1_closeDate >= ${range.start} and opportunity_1_closeDate <= ${range.end}`,
+      );
+    }
+
+    const ownerIds = normalizeOwnerIdsForWhere(curFilter.opportunityOwner);
+    if (ownerIds.length === 1) {
+      where.push(`opportunity_1_ownerId = ${ownerIds[0]}`);
+    } else if (ownerIds.length > 1) {
+      where.push(`opportunity_1_ownerId in (${ownerIds.join(', ')})`);
+    }
+
+    const entityTypeId = entityTypeIdForWhere(curFilter.businessType);
+    if (entityTypeId != null) {
+      where.push(`opportunity_1_entityType = ${entityTypeId}`);
+    }
+
+    if (curFilter.changesSinceCustomTime) {
+      where.push(`version = ${curFilter.changesSinceCustomTime}`);
+    }
+
+    return where;
+  }
+
+  /** Query historical opportunity list for the period (same source as stageSwitch.fetchHistoryOpportunityList, fields extended as needed) */
+  async fetchHistoryOpportunityList(): Promise<unknown[]> {
+    const result = await queryByCustomSQL({
+      xObjectApiKey: HISTORY_OPPORTUNITY_BI_KEY,
+      fields: [...HISTORY_QUERY_FIELDS],
+      page: 1,
+      pageSize: 1000,
+      where: this.getHistoryOpportunityQueryFilter(),
+    });
+
+    return result?.status ? result.data ?? [] : [];
+  }
+
+  /**
+   * Load table data
+   */
+  @NeoEvent.function
+  async loadData() {
+    // const api = this.props.xObjectDataApi || {};
+    const api: any = defaultXObjectDataApi;
+    const { xObjectApiKey } = api;
+    if (!xObjectApiKey) return;
+
+    this.setState({ loading: true, error: null });
+
+    try {
+      const rawWhere = (api as { where?: unknown }).where;
+      const baseWhere: string[] = Array.isArray(rawWhere)
+        ? rawWhere.filter((w): w is string => typeof w === 'string')
+        : typeof rawWhere === 'string' && rawWhere
+        ? [rawWhere]
+        : [];
+      const filterWhere =
+        xObjectApiKey === 'opportunity' ? this.getFilterWhere() : [];
+      const [result, historyRows] = await Promise.all([
+        xObject.query({
+          ...api,
+          where: [...baseWhere, ...filterWhere],
+        }),
+        this.fetchHistoryOpportunityList(),
+      ]);
+
+      if (result && result.status) {
+        let records = result.data || [];
+
+        console.log('[SimpleTable__c] records:', records, historyRows);
+
+        // Filter data by stage
+        if (this.state.activeStage) {
+          records = records.filter((record: any) => {
+            return record.customItem248__c === this.state.activeStage;
+          });
+        }
+
+        const historyMap =
+          xObjectApiKey === 'opportunity'
+            ? buildHistoryMap(historyRows)
+            : new Map<string, HistoryOppSnap>();
+
+        const merged = records.map((r: any) => {
+          const id = r?.id != null ? String(r.id) : '';
+          const historyData = id ? historyMap.get(id) ?? null : null;
+          return { ...r, historyData };
+        });
+
+        this.setState({
+          dataSource: merged,
+          loading: false,
+        });
+      } else {
+        this.setState({
+          error: result?.msg || 'Failed to fetch data',
+          loading: false,
+        });
+      }
+    } catch (error: any) {
+      this.setState({
+        error: error.message || 'Failed to fetch data',
+        loading: false,
+      });
+    }
+  }
+
+  /**
+   * Consistent with stageSwitch: update FilterBar filter and re-fetch table data.
+   */
+  @NeoEvent.function
+  setFilter(filter?: any) {
+    if (isEqual(filter, this.state.filter)) {
+      return;
+    }
+    console.log('[SimpleTable__c] setFilter:', filter);
+    this.setState({ filter }, () => {
+      this.loadData();
+    });
+  }
+
+  /**
+   * Update the currently active sales stage
+   */
+  @NeoEvent.function
+  updateActiveStage(activeStage?: string) {
+    if (isEqual(activeStage, this.state.activeStage)) {
+      return;
+    }
+    console.log('[SimpleTable__c] updateActiveStage:', activeStage);
+    this.setState({ activeStage: activeStage || '' }, () => {
+      this.loadData();
+    });
+  }
+
+  /**
+   * Render component
+   * @returns Component JSX element
+   */
+  render() {
+    const { title: stateTitle, dataSource, loading, error } = this.state;
+    const { className, title: propsTitle, description } = this.props;
+    // const { xObjectApiKey } = this.props.xObjectDataApi || {};
+    const { xObjectApiKey } = defaultXObjectDataApi;
+    const columns = this.generateColumns();
+
+    // Use props.title first, then state.title, and finally the default value
+    const displayTitle = propsTitle || stateTitle || 'Data Table';
+
+    const moneyKey = this.getMoneyFieldApiKey();
+    const totalAmount = moneyKey ? sumMoneyRows(dataSource, moneyKey) : 0;
+    const oppCount = dataSource.length;
+    const oppWord = oppCount === 1 ? 'opportunity' : 'opportunities';
+    const summaryText = `Total: ${formatMoneySummaryAmount(
+      totalAmount,
+    )} · ${oppCount} ${oppWord}`;
+
+    console.log(
+      'simpleTable__c / dataSource:',
+      dataSource,
+      this.props,
+      this.state,
+    );
+
+    return (
+      <div className={`simpleTable__c ${className}`} data-time="2026.4.17 01">
+        <div className="table-wrapper">
+          <div className="panel-header">
+            <div className="panel-header-text">
+              <h3>
+                {displayTitle} - {this.state.activeStage}
+              </h3>
+              {description ? (
+                <p className="panel-header-description">{description}</p>
+              ) : null}
+            </div>
+            <div className="panel-header-summary" title={summaryText}>
+              Total:{' '}
+              <span className="summary-amount">
+                {formatMoneySummaryAmount(totalAmount)}
+              </span>
+              {' · '}
+              <span className="summary-amount">{oppCount}</span> {oppWord}
+            </div>
+          </div>
+          <div className="table-container">
+            <Spin spinning={loading} tip="Loading data...">
+              {error ? (
+                <Empty
+                  image={Empty.PRESENTED_IMAGE_SIMPLE}
+                  description={
+                    <div>
+                      <div style={{ color: '#ff4d4f', marginBottom: 8 }}>
+                        {error}
+                      </div>
+                    </div>
+                  }
+                />
+              ) : (
+                <Table
+                  key={`${xObjectApiKey}-${columns.length}`}
+                  columns={columns}
+                  dataSource={dataSource}
+                  rowKey="id"
+                  pagination={false}
+                  scroll={{ x: 'max-content' }}
+                />
+              )}
+            </Spin>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}