fix: select field set as title field (#4703)

* fix: select field set as title field

* fix: select field set as title field

* fix: select field set as title field

* fix: select field set as title field

packages/plugins/@nocobase/plugin-calendar/src/client/calendar/Calendar.tsx

@@ -17,6 +17,7 @@ import {
   useCollectionParentRecordData,
   useProps,
   withDynamicSchemaProps,
+  getLabelFormatValue,
 } from '@nocobase/client';
 import { parseExpression } from 'cron-parser';
 import type { Dayjs } from 'dayjs';
@@ -62,6 +63,8 @@ function Toolbar(props: ToolbarProps) {
 
 const useEvents = (dataSource: any, fieldNames: any, date: Date, view: (typeof Weeks)[number]) => {
   const { t } = useTranslation();
+  const { fields } = useCollection();
+  const labelUiSchema = fields.find((v) => v.name === fieldNames?.title)?.uiSchema;
   return useMemo(() => {
     if (!Array.isArray(dataSource)) return [];
     const events = [];
@@ -105,10 +108,10 @@ const useEvents = (dataSource: any, fieldNames: any, date: Date, view: (typeof W
         });
 
         if (res) return out;
-
+        const title = getLabelFormatValue(labelUiSchema, get(item, fieldNames.title), true);
         const event = {
           id: get(item, fieldNames.id || 'id'),
-          title: get(item, fieldNames.title) || t('Untitle'),
+          title: title || t('Untitle'),
           start: eventStart.toDate(),
           end: eventStart.add(intervalTime, 'millisecond').toDate(),
         };

packages/plugins/@nocobase/plugin-gantt/src/client/GanttBlockProvider.tsx

@@ -15,6 +15,8 @@ import {
   useBlockRequestContext,
   TableBlockProvider,
   useTableBlockContext,
+  getLabelFormatValue,
+  useCollection,
 } from '@nocobase/client';
 import _ from 'lodash';
 export const GanttBlockContext = createContext<any>({});
@@ -28,15 +30,18 @@ const formatData = (
   hideChildren = false,
   checkPermassion?: (any) => boolean,
   primaryKey?: string,
+  labelUiSchema?: any,
 ) => {
   data.forEach((item: any) => {
     const disable = checkPermassion(item);
     const percent = parseFloat((item[fieldNames.progress] * 100).toFixed(2));
+    const title = getLabelFormatValue(labelUiSchema, item[fieldNames.title]);
+
     if (item.children && item.children.length) {
       tasks.push({
         start: new Date(item[fieldNames.start] ?? undefined),
         end: new Date(item[fieldNames.end] ?? undefined),
-        name: item[fieldNames.title],
+        name: title,
         id: item[primaryKey] + '',
         type: 'project',
         progress: percent > 100 ? 100 : percent || 0,
@@ -45,12 +50,21 @@ const formatData = (
         color: item.color,
         isDisabled: disable,
       });
-      formatData(item.children, fieldNames, tasks, item.id + '', hideChildren, checkPermassion, primaryKey);
+      formatData(
+        item.children,
+        fieldNames,
+        tasks,
+        item.id + '',
+        hideChildren,
+        checkPermassion,
+        primaryKey,
+        labelUiSchema,
+      );
     } else {
       tasks.push({
         start: item[fieldNames.start] ? new Date(item[fieldNames.start]) : undefined,
         end: new Date(item[fieldNames.end] || item[fieldNames.start]),
-        name: item[fieldNames.title],
+        name: title,
         id: item[primaryKey] + '',
         type: fieldNames.end ? 'task' : 'milestone',
         progress: percent > 100 ? 100 : percent || 0,
@@ -85,7 +99,7 @@ const InternalGanttBlockProvider = (props) => {
 };
 
 export const GanttBlockProvider = (props) => {
-  const params = { filter: props.params.filter, paginate: false, sort: ['id'] };
+  const params = { filter: props.params?.filter, paginate: false, sort: ['id'] };
   const collection = useCollection_deprecated();
 
   if (collection?.tree) {
@@ -107,12 +121,15 @@ export const useGanttBlockContext = () => {
 
 export const useGanttBlockProps = () => {
   const ctx = useGanttBlockContext();
+  const { fieldNames } = ctx;
   const [tasks, setTasks] = useState<any>([]);
   const { getPrimaryKey, name, template, writableView } = useCollection_deprecated();
   const { parseAction } = useACLRoleContext();
   const ctxBlock = useTableBlockContext();
   const [loading, setLoading] = useState(false);
   const primaryKey = getPrimaryKey();
+  const { fields } = useCollection();
+  const labelUiSchema = fields.find((v) => v.name === fieldNames?.title)?.uiSchema;
   const checkPermission = (record) => {
     const actionPath = `${name}:update`;
     const schema = {};
@@ -128,7 +145,16 @@ export const useGanttBlockProps = () => {
     ctx.field.data = tasksData;
   };
   const expandAndCollapseAll = (flag) => {
-    const data = formatData(ctx.service.data?.data, ctx.fieldNames, [], undefined, flag, checkPermission, primaryKey);
+    const data = formatData(
+      ctx.service.data?.data,
+      ctx.fieldNames,
+      [],
+      undefined,
+      flag,
+      checkPermission,
+      primaryKey,
+      labelUiSchema,
+    );
     setTasks(data);
     ctx.field.data = data;
   };
@@ -143,6 +169,7 @@ export const useGanttBlockProps = () => {
         false,
         checkPermission,
         primaryKey,
+        labelUiSchema,
       );
       setTasks(data);
       setLoading(false);

packages/plugins/@nocobase/plugin-map/src/client/components/AMap/Block.tsx

@@ -21,6 +21,7 @@ import {
   useCompile,
   useFilterAPI,
   useProps,
+  getLabelFormatValue,
 } from '@nocobase/client';
 import { useMemoizedFn } from 'ahooks';
 import { Button, Space } from 'antd';
@@ -48,7 +49,8 @@ export const AMapBlock = (props) => {
   const [, setPrevSelected] = useState<any>(null);
   const selectingModeRef = useRef(selectingMode);
   selectingModeRef.current = selectingMode;
-
+  const { fields } = useCollection();
+  const labelUiSchema = fields.find((v) => v.name === fieldNames?.marker)?.uiSchema;
   const setOverlayOptions = (overlay: AMap.Polygon | AMap.Marker, state?: boolean) => {
     const extData = overlay.getExtData();
     const selected = typeof state === 'undefined' ? extData.selected : !state;
@@ -133,6 +135,7 @@ export const AMapBlock = (props) => {
     const overlays = dataSource
       .map((item) => {
         const data = getSource(item, fieldNames?.field, cf?.interface)?.filter(Boolean);
+        const title = getLabelFormatValue(labelUiSchema, item[fieldNames.marker]);
         if (!data?.length) return [];
         return data.map((mapItem) => {
           const overlay = mapRef.current?.setOverlay(collectionField.type, mapItem, {
@@ -142,7 +145,7 @@ export const AMapBlock = (props) => {
             label: {
               direction: 'bottom',
               offset: [0, 5],
-              content: fieldNames?.marker ? compile(item[fieldNames.marker]) : undefined,
+              content: fieldNames?.marker ? compile(title) : undefined,
             },
             extData: {
               id: item[primaryKey],

packages/plugins/@nocobase/plugin-map/src/client/components/GoogleMaps/Block.tsx

@@ -21,6 +21,7 @@ import {
   useCompile,
   useFilterAPI,
   useProps,
+  getLabelFormatValue,
 } from '@nocobase/client';
 import { useMemoizedFn } from 'ahooks';
 import { Button, Space } from 'antd';
@@ -67,7 +68,8 @@ export const GoogleMapsBlock = (props) => {
   const selectionOverlayRef = useRef<google.maps.Polygon | null>(null);
   const overlaysRef = useRef<google.maps.MVCObject[]>([]);
   selectingModeRef.current = selectingMode;
-
+  const { fields } = useCollection();
+  const labelUiSchema = fields.find((v) => v.name === fieldNames?.marker)?.uiSchema;
   const { getCollectionJoinField } = useCollectionManager_deprecated();
 
   const setOverlayOptions = (overlay: google.maps.MVCObject, state?: boolean) => {
@@ -175,6 +177,7 @@ export const GoogleMapsBlock = (props) => {
     const overlays: google.maps.MVCObject[] = dataSource
       .map((item) => {
         const data = getSource(item, fieldNames?.field, cf?.interface);
+        const title = getLabelFormatValue(labelUiSchema, item[fieldNames.marker]);
         if (!data?.length) return [];
         return data?.filter(Boolean).map((mapItem) => {
           if (!data) return;
@@ -187,7 +190,7 @@ export const GoogleMapsBlock = (props) => {
               fontFamily: 'inherit',
               fontSize: '13px',
               color: '#333',
-              text: fieldNames?.marker ? compile(item[markerName]) : undefined,
+              text: fieldNames?.marker ? compile(title) : undefined,
             } as google.maps.MarkerLabel,
           });
           overlay?.set(OVERLAY_KEY, item[primaryKey]);