fix(gantt): update permission check in gantt block (#1701)

* fix: view collection can  update in gantt

* fix: gantt update without acl check

* style: style improve

* style: style improve

* style: style improve

* style: style improve

packages/core/client/src/block-provider/GanttBlockProvider.tsx

@@ -2,6 +2,8 @@ import { useField } from '@formily/react';
 import React, { createContext, useContext, useEffect, useState } from 'react';
 import { BlockProvider, useBlockRequestContext } from './BlockProvider';
 import { TableBlockProvider } from './TableBlockProvider';
+import { useACLRoleContext } from '../acl/ACLProvider';
+import { useCollection } from '../collection-manager/hooks';
 
 export const GanttBlockContext = createContext<any>({});
 
@@ -11,9 +13,11 @@ const formatData = (
   tasks: any[] = [],
   projectId: any = undefined,
   hideChildren: boolean = false,
+  checkPermassion?: Function,
 ) => {
   data.forEach((item: any) => {
-    const percent=item[fieldNames.progress] * 100;
+    const disable = checkPermassion(item);
+    const percent = item[fieldNames.progress] * 100;
     if (item.children && item.children.length) {
       tasks.push({
         start: new Date(item[fieldNames.start]),
@@ -21,12 +25,13 @@ const formatData = (
         name: item[fieldNames.title],
         id: item.id + '',
         type: 'project',
-        progress: percent>100?100:percent || 0,
+        progress: percent > 100 ? 100 : percent || 0,
         hideChildren: hideChildren,
         project: projectId,
         color: item.color,
+        isDisabled: disable,
       });
-      formatData(item.children, fieldNames, tasks, item.id + '', hideChildren);
+      formatData(item.children, fieldNames, tasks, item.id + '', hideChildren, checkPermassion);
     } else {
       tasks.push({
         start: item[fieldNames.start] ? new Date(item[fieldNames.start]) : undefined,
@@ -34,9 +39,10 @@ const formatData = (
         name: item[fieldNames.title],
         id: item.id + '',
         type: fieldNames.end ? 'task' : 'milestone',
-        progress: percent>100?100:percent || 0,
+        progress: percent > 100 ? 100 : percent || 0,
         project: projectId,
         color: item.color,
+        isDisabled: disable,
       });
     }
   });
@@ -66,8 +72,8 @@ const InternalGanttBlockProvider = (props) => {
 
 export const GanttBlockProvider = (props) => {
   return (
-    <BlockProvider {...props} params={{ tree:true, paginate: false, sort: props.fieldNames.start }}>
+    <BlockProvider {...props} params={{ tree: true, paginate: false, sort: props.fieldNames.start }}>
-      <TableBlockProvider {...props} params={{ tree:true, paginate: false, sort: props.fieldNames.start }}>
+      <TableBlockProvider {...props} params={{ tree: true, paginate: false, sort: props.fieldNames.start }}>
         <InternalGanttBlockProvider {...props} />
       </TableBlockProvider>
     </BlockProvider>
@@ -81,6 +87,17 @@ export const useGanttBlockContext = () => {
 export const useGanttBlockProps = () => {
   const ctx = useGanttBlockContext();
   const [tasks, setTasks] = useState<any>([]);
+  const { getPrimaryKey, name, template } = useCollection();
+  const { parseAction } = useACLRoleContext();
+  const primaryKey = getPrimaryKey();
+  const checkPermassion = (record) => {
+    const actionPath = `${name}:update`;
+    const schema = {};
+    const recordPkValue = record?.[primaryKey];
+    const params = parseAction(actionPath, { schema, recordPkValue });
+    return template === 'view' || !params;
+  };
+
   const onExpanderClick = (task: any) => {
     const data = ctx.field.data;
     const tasksData = data.map((t: any) => (t.id === task.id ? task : t));
@@ -88,13 +105,13 @@ export const useGanttBlockProps = () => {
     ctx.field.data = tasksData;
   };
   const expandAndCollapseAll = (flag) => {
-    const data = formatData(ctx.service.data?.data, ctx.fieldNames, [], undefined, flag);
+    const data = formatData(ctx.service.data?.data, ctx.fieldNames, [], undefined, flag, checkPermassion);
     setTasks(data);
     ctx.field.data = data;
   };
   useEffect(() => {
     if (!ctx?.service?.loading) {
-      const data = formatData(ctx.service.data?.data, ctx.fieldNames);
+      const data = formatData(ctx.service.data?.data, ctx.fieldNames, [], undefined, false, checkPermassion);
       setTasks(data);
       ctx.field.data = data;
     }

packages/core/client/src/schema-component/antd/gantt/components/gantt/gantt.tsx

@@ -56,10 +56,11 @@ const GanttRecordViewer = (props) => {
 export const Gantt: any = (props: any) => {
   const { designable } = useDesignable();
   const currentTheme = localStorage.getItem('NOCOBASE_THEME');
+  const tableRowHeight = currentTheme === 'compact' ? 45 : 55.56;
   const {
     headerHeight = currentTheme === 'compact' ? (designable ? 53 : 45) : designable ? 65 : 55,
     listCellWidth = '155px',
-    rowHeight = currentTheme === 'compact' ? 45 : 55.56,
+    rowHeight = tableRowHeight,
     ganttHeight = 0,
     preStepsCount = 1,
     barFill = 60,
@@ -490,6 +491,9 @@ export const Gantt: any = (props: any) => {
           .ant-table-container::after {
             box-shadow: none !important;
           }
+          .ant-table-row {
+            height: ${tableRowHeight}px;
+          }
         `}
       >
         <GanttRecordViewer visible={visible} setVisible={setVisible} record={record} />

packages/core/client/src/schema-component/antd/gantt/components/gantt/style.tsx

@@ -5,7 +5,7 @@ export const ganttVerticalContainer = css`
   font-size: 0;
   margin: 0;
   padding: 0;
-  // width:100%;
+  width:100%;
   border-left: 2px solid #f4f2f2;
 `;
 

packages/core/client/src/schema-component/antd/gantt/components/other/style.tsx

@@ -23,7 +23,7 @@ export const scrollWrapper = css`
     background-clip: padding-box;
   }
   &::-webkit-scrollbar-thumb:hover {
-    border: 3px solid transparent;
+    border: 4px solid transparent;
     background: #5c5858bd;
     background-clip: padding-box;
   }