Merge branch 'release/v2.0.4' of https://github.com/Worklenz/worklenz into fix/enhanced-board-sub-task-section
This commit is contained in:
shancds
295
worklenz-frontend/package-lock.json
generated
295
worklenz-frontend/package-lock.json
generated
@@ -69,11 +69,11 @@
|
||||
"@types/react-dom": "19.0.0",
|
||||
"@types/react-window": "^1.8.8",
|
||||
"@vitejs/plugin-react": "^4.3.4",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"autoprefixer": "^10.4.21",
|
||||
"postcss": "^8.5.2",
|
||||
"prettier-plugin-tailwindcss": "^0.6.8",
|
||||
"prettier-plugin-tailwindcss": "^0.6.13",
|
||||
"rollup": "^4.40.2",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"tailwindcss": "^3.4.15",
|
||||
"terser": "^5.39.0",
|
||||
"typescript": "^5.7.3",
|
||||
"vite": "^6.3.5",
|
||||
@@ -3652,6 +3652,18 @@
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/detect-libc": {
|
||||
"version": "2.0.4",
|
||||
"resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.4.tgz",
|
||||
"integrity": "sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==",
|
||||
"dev": true,
|
||||
"license": "Apache-2.0",
|
||||
"optional": true,
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/didyoumean": {
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
|
||||
@@ -4509,13 +4521,15 @@
|
||||
}
|
||||
},
|
||||
"node_modules/jiti": {
|
||||
"version": "1.21.7",
|
||||
"resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
|
||||
"integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
|
||||
"version": "2.4.2",
|
||||
"resolved": "https://registry.npmjs.org/jiti/-/jiti-2.4.2.tgz",
|
||||
"integrity": "sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"peer": true,
|
||||
"bin": {
|
||||
"jiti": "bin/jiti.js"
|
||||
"jiti": "lib/jiti-cli.mjs"
|
||||
}
|
||||
},
|
||||
"node_modules/js-tokens": {
|
||||
@@ -4582,6 +4596,257 @@
|
||||
"html2canvas": "^1.0.0-rc.5"
|
||||
}
|
||||
},
|
||||
"node_modules/lightningcss": {
|
||||
"version": "1.30.1",
|
||||
"resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.1.tgz",
|
||||
"integrity": "sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg==",
|
||||
"dev": true,
|
||||
"license": "MPL-2.0",
|
||||
"optional": true,
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"detect-libc": "^2.0.3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 12.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/parcel"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"lightningcss-darwin-arm64": "1.30.1",
|
||||
"lightningcss-darwin-x64": "1.30.1",
|
||||
"lightningcss-freebsd-x64": "1.30.1",
|
||||
"lightningcss-linux-arm-gnueabihf": "1.30.1",
|
||||
"lightningcss-linux-arm64-gnu": "1.30.1",
|
||||
"lightningcss-linux-arm64-musl": "1.30.1",
|
||||
"lightningcss-linux-x64-gnu": "1.30.1",
|
||||
"lightningcss-linux-x64-musl": "1.30.1",
|
||||
"lightningcss-win32-arm64-msvc": "1.30.1",
|
||||
"lightningcss-win32-x64-msvc": "1.30.1"
|
||||
}
|
||||
},
|
||||
"node_modules/lightningcss-darwin-arm64": {
|
||||
"version": "1.30.1",
|
||||
"resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.1.tgz",
|
||||
"integrity": "sha512-c8JK7hyE65X1MHMN+Viq9n11RRC7hgin3HhYKhrMyaXflk5GVplZ60IxyoVtzILeKr+xAJwg6zK6sjTBJ0FKYQ==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MPL-2.0",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">= 12.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/parcel"
|
||||
}
|
||||
},
|
||||
"node_modules/lightningcss-darwin-x64": {
|
||||
"version": "1.30.1",
|
||||
"resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.30.1.tgz",
|
||||
"integrity": "sha512-k1EvjakfumAQoTfcXUcHQZhSpLlkAuEkdMBsI/ivWw9hL+7FtilQc0Cy3hrx0AAQrVtQAbMI7YjCgYgvn37PzA==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MPL-2.0",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">= 12.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/parcel"
|
||||
}
|
||||
},
|
||||
"node_modules/lightningcss-freebsd-x64": {
|
||||
"version": "1.30.1",
|
||||
"resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.30.1.tgz",
|
||||
"integrity": "sha512-kmW6UGCGg2PcyUE59K5r0kWfKPAVy4SltVeut+umLCFoJ53RdCUWxcRDzO1eTaxf/7Q2H7LTquFHPL5R+Gjyig==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MPL-2.0",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"freebsd"
|
||||
],
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">= 12.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/parcel"
|
||||
}
|
||||
},
|
||||
"node_modules/lightningcss-linux-arm-gnueabihf": {
|
||||
"version": "1.30.1",
|
||||
"resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.30.1.tgz",
|
||||
"integrity": "sha512-MjxUShl1v8pit+6D/zSPq9S9dQ2NPFSQwGvxBCYaBYLPlCWuPh9/t1MRS8iUaR8i+a6w7aps+B4N0S1TYP/R+Q==",
|
||||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MPL-2.0",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">= 12.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/parcel"
|
||||
}
|
||||
},
|
||||
"node_modules/lightningcss-linux-arm64-gnu": {
|
||||
"version": "1.30.1",
|
||||
"resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.30.1.tgz",
|
||||
"integrity": "sha512-gB72maP8rmrKsnKYy8XUuXi/4OctJiuQjcuqWNlJQ6jZiWqtPvqFziskH3hnajfvKB27ynbVCucKSm2rkQp4Bw==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MPL-2.0",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">= 12.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/parcel"
|
||||
}
|
||||
},
|
||||
"node_modules/lightningcss-linux-arm64-musl": {
|
||||
"version": "1.30.1",
|
||||
"resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.30.1.tgz",
|
||||
"integrity": "sha512-jmUQVx4331m6LIX+0wUhBbmMX7TCfjF5FoOH6SD1CttzuYlGNVpA7QnrmLxrsub43ClTINfGSYyHe2HWeLl5CQ==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MPL-2.0",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">= 12.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/parcel"
|
||||
}
|
||||
},
|
||||
"node_modules/lightningcss-linux-x64-gnu": {
|
||||
"version": "1.30.1",
|
||||
"resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.30.1.tgz",
|
||||
"integrity": "sha512-piWx3z4wN8J8z3+O5kO74+yr6ze/dKmPnI7vLqfSqI8bccaTGY5xiSGVIJBDd5K5BHlvVLpUB3S2YCfelyJ1bw==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MPL-2.0",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">= 12.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/parcel"
|
||||
}
|
||||
},
|
||||
"node_modules/lightningcss-linux-x64-musl": {
|
||||
"version": "1.30.1",
|
||||
"resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.30.1.tgz",
|
||||
"integrity": "sha512-rRomAK7eIkL+tHY0YPxbc5Dra2gXlI63HL+v1Pdi1a3sC+tJTcFrHX+E86sulgAXeI7rSzDYhPSeHHjqFhqfeQ==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MPL-2.0",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">= 12.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/parcel"
|
||||
}
|
||||
},
|
||||
"node_modules/lightningcss-win32-arm64-msvc": {
|
||||
"version": "1.30.1",
|
||||
"resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.30.1.tgz",
|
||||
"integrity": "sha512-mSL4rqPi4iXq5YVqzSsJgMVFENoa4nGTT/GjO2c0Yl9OuQfPsIfncvLrEW6RbbB24WtZ3xP/2CCmI3tNkNV4oA==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MPL-2.0",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"win32"
|
||||
],
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">= 12.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/parcel"
|
||||
}
|
||||
},
|
||||
"node_modules/lightningcss-win32-x64-msvc": {
|
||||
"version": "1.30.1",
|
||||
"resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.30.1.tgz",
|
||||
"integrity": "sha512-PVqXh48wh4T53F/1CCu8PIPCxLzWyCnn/9T5W1Jpmdy5h9Cwd+0YQS6/LwhHXSafuc61/xg9Lv5OrCby6a++jg==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MPL-2.0",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"win32"
|
||||
],
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">= 12.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/parcel"
|
||||
}
|
||||
},
|
||||
"node_modules/lilconfig": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
|
||||
@@ -5255,9 +5520,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/prettier-plugin-tailwindcss": {
|
||||
"version": "0.6.11",
|
||||
"resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.6.11.tgz",
|
||||
"integrity": "sha512-YxaYSIvZPAqhrrEpRtonnrXdghZg1irNg4qrjboCXrpybLWVs55cW2N3juhspVJiO0JBvYJT8SYsJpc8OQSnsA==",
|
||||
"version": "0.6.13",
|
||||
"resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.6.13.tgz",
|
||||
"integrity": "sha512-uQ0asli1+ic8xrrSmIOaElDu0FacR4x69GynTh2oZjFY10JUt6EEumTQl5tB4fMeD6I1naKd+4rXQQ7esT2i1g==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
@@ -7019,6 +7284,16 @@
|
||||
"node": ">=14.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/tailwindcss/node_modules/jiti": {
|
||||
"version": "1.21.7",
|
||||
"resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
|
||||
"integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"bin": {
|
||||
"jiti": "bin/jiti.js"
|
||||
}
|
||||
},
|
||||
"node_modules/terser": {
|
||||
"version": "5.39.2",
|
||||
"resolved": "https://registry.npmjs.org/terser/-/terser-5.39.2.tgz",
|
||||
|
||||
@@ -73,11 +73,11 @@
|
||||
"@types/react-dom": "19.0.0",
|
||||
"@types/react-window": "^1.8.8",
|
||||
"@vitejs/plugin-react": "^4.3.4",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"autoprefixer": "^10.4.21",
|
||||
"postcss": "^8.5.2",
|
||||
"prettier-plugin-tailwindcss": "^0.6.8",
|
||||
"prettier-plugin-tailwindcss": "^0.6.13",
|
||||
"rollup": "^4.40.2",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"tailwindcss": "^3.4.15",
|
||||
"terser": "^5.39.0",
|
||||
"typescript": "^5.7.3",
|
||||
"vite": "^6.3.5",
|
||||
|
||||
@@ -227,7 +227,7 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
|
||||
<div
|
||||
ref={dropdownRef}
|
||||
className={`
|
||||
fixed z-[9999] w-72 rounded-md shadow-lg border
|
||||
fixed z-9999 w-72 rounded-md shadow-lg border
|
||||
${isDarkMode
|
||||
? 'bg-gray-800 border-gray-600'
|
||||
: 'bg-white border-gray-200'
|
||||
|
||||
@@ -24,7 +24,7 @@ const Button: React.FC<ButtonProps & React.ButtonHTMLAttributes<HTMLButtonElemen
|
||||
type = 'button',
|
||||
...props
|
||||
}) => {
|
||||
const baseClasses = `inline-flex items-center justify-center font-medium transition-colors duration-200 focus:outline-none focus:ring-2 ${isDarkMode ? 'focus:ring-blue-400' : 'focus:ring-blue-500'} focus:ring-offset-1 ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`;
|
||||
const baseClasses = `inline-flex items-center justify-center font-medium transition-colors duration-200 focus:outline-none focus:ring-2 ${isDarkMode ? 'focus:ring-blue-400' : 'focus:ring-blue-500'} focus:ring-offset-2 ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`;
|
||||
|
||||
const variantClasses = {
|
||||
text: isDarkMode
|
||||
@@ -42,7 +42,7 @@ const Button: React.FC<ButtonProps & React.ButtonHTMLAttributes<HTMLButtonElemen
|
||||
};
|
||||
|
||||
const sizeClasses = {
|
||||
small: 'px-2 py-1 text-xs rounded',
|
||||
small: 'px-2 py-1 text-xs rounded-sm',
|
||||
default: 'px-3 py-2 text-sm rounded-md',
|
||||
large: 'px-4 py-3 text-base rounded-lg'
|
||||
};
|
||||
|
||||
@@ -18,7 +18,7 @@ const CustomColordLabel: React.FC<CustomColordLabelProps> = ({
|
||||
return (
|
||||
<Tooltip title={label.name}>
|
||||
<span
|
||||
className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium text-white flex-shrink-0 max-w-[120px]"
|
||||
className="inline-flex items-center px-2 py-0.5 rounded-sm text-xs font-medium text-white shrink-0 max-w-[120px]"
|
||||
style={{ backgroundColor: label.color }}
|
||||
>
|
||||
<span className="truncate">{truncatedName}</span>
|
||||
|
||||
@@ -180,7 +180,7 @@ const LabelsSelector: React.FC<LabelsSelectorProps> = ({
|
||||
<div
|
||||
ref={dropdownRef}
|
||||
className={`
|
||||
fixed z-[9999] w-72 rounded-md shadow-lg border
|
||||
fixed z-9999 w-72 rounded-md shadow-lg border
|
||||
${isDarkMode
|
||||
? 'bg-gray-800 border-gray-600'
|
||||
: 'bg-white border-gray-200'
|
||||
@@ -230,7 +230,7 @@ const LabelsSelector: React.FC<LabelsSelectorProps> = ({
|
||||
/>
|
||||
|
||||
<div
|
||||
className="w-3 h-3 rounded-full flex-shrink-0"
|
||||
className="w-3 h-3 rounded-full shrink-0"
|
||||
style={{ backgroundColor: label.color_code }}
|
||||
/>
|
||||
|
||||
|
||||
@@ -24,7 +24,7 @@ const Tag: React.FC<TagProps> = ({
|
||||
default: 'px-2 py-1 text-xs'
|
||||
};
|
||||
|
||||
const baseClasses = `inline-flex items-center font-medium rounded ${sizeClasses[size]}`;
|
||||
const baseClasses = `inline-flex items-center font-medium rounded-sm ${sizeClasses[size]}`;
|
||||
|
||||
if (variant === 'outlined') {
|
||||
return (
|
||||
|
||||
@@ -25,7 +25,7 @@ const Tooltip: React.FC<TooltipProps> = ({
|
||||
return (
|
||||
<div className={`relative group ${className}`}>
|
||||
{children}
|
||||
<div className={`absolute ${placementClasses[placement]} px-2 py-1 text-xs text-white ${isDarkMode ? 'bg-gray-700' : 'bg-gray-900'} rounded shadow-lg opacity-0 group-hover:opacity-100 transition-opacity duration-200 z-50 pointer-events-none min-w-max`}>
|
||||
<div className={`absolute ${placementClasses[placement]} px-2 py-1 text-xs text-white ${isDarkMode ? 'bg-gray-700' : 'bg-gray-900'} rounded-sm shadow-lg opacity-0 group-hover:opacity-100 transition-opacity duration-200 z-50 pointer-events-none min-w-max`}>
|
||||
{title}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -72,6 +72,7 @@ const EnhancedKanbanBoard: React.FC<EnhancedKanbanBoardProps> = ({ projectId, cl
|
||||
const groupBy = useSelector((state: RootState) => state.enhancedKanbanReducer.groupBy);
|
||||
const project = useAppSelector((state: RootState) => state.projectReducer.project);
|
||||
const { statusCategories, status: existingStatuses } = useAppSelector((state) => state.taskStatusReducer);
|
||||
const themeMode = useAppSelector(state => state.themeReducer.mode);
|
||||
|
||||
// Load filter data
|
||||
useFilterDataLoader();
|
||||
@@ -445,18 +446,42 @@ const EnhancedKanbanBoard: React.FC<EnhancedKanbanBoardProps> = ({ projectId, cl
|
||||
|
||||
<DragOverlay>
|
||||
{activeTask && (
|
||||
<EnhancedKanbanTaskCard
|
||||
task={activeTask}
|
||||
sectionId={activeTask.status_id || ''}
|
||||
isDragOverlay={true}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
background: themeMode === 'dark' ? '#23272f' : '#fff',
|
||||
borderRadius: 8,
|
||||
boxShadow: '0 4px 16px rgba(0,0,0,0.12)',
|
||||
padding: '12px 20px',
|
||||
minWidth: 180,
|
||||
maxWidth: 340,
|
||||
opacity: 0.95,
|
||||
fontWeight: 600,
|
||||
fontSize: 16,
|
||||
color: themeMode === 'dark' ? '#fff' : '#23272f',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
{activeTask.name}
|
||||
</div>
|
||||
)}
|
||||
{activeGroup && (
|
||||
<div className="group-drag-overlay">
|
||||
<div className="group-header-content">
|
||||
<h3>{activeGroup.name}</h3>
|
||||
<span className="task-count">({activeGroup.tasks.length})</span>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
background: themeMode === 'dark' ? '#23272f' : '#fff',
|
||||
borderRadius: 8,
|
||||
boxShadow: '0 4px 16px rgba(0,0,0,0.12)',
|
||||
padding: '16px 24px',
|
||||
minWidth: 220,
|
||||
maxWidth: 320,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 12,
|
||||
opacity: 0.95,
|
||||
}}
|
||||
>
|
||||
<h3 style={{ margin: 0, fontWeight: 600, fontSize: 18 }}>{activeGroup.name}</h3>
|
||||
<span style={{ fontSize: 15, color: '#888' }}>({activeGroup.tasks.length})</span>
|
||||
</div>
|
||||
)}
|
||||
</DragOverlay>
|
||||
|
||||
@@ -128,7 +128,7 @@ const EnhancedKanbanCreateTaskCard: React.FC<EnhancedKanbanCreateTaskCardProps>
|
||||
marginBottom: 8,
|
||||
marginTop: 8,
|
||||
}}
|
||||
className={`outline-1 ${themeWiseColor('outline-[#edeae9]', 'outline-[#6a696a]', themeMode)} hover:outline`}
|
||||
className={`outline-1 ${themeWiseColor('outline-[#edeae9]', 'outline-[#6a696a]', themeMode)} hover:outline-solid`}
|
||||
>
|
||||
<Input
|
||||
ref={inputRef}
|
||||
|
||||
@@ -342,18 +342,6 @@ const EnhancedKanbanGroup: React.FC<EnhancedKanbanGroupProps> = React.memo(({
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
<Flex
|
||||
align="center"
|
||||
justify="center"
|
||||
style={{
|
||||
minWidth: 26,
|
||||
height: 26,
|
||||
borderRadius: 120,
|
||||
backgroundColor: themeWiseColor('white', '#1e1e1e', themeMode),
|
||||
}}
|
||||
>
|
||||
{group.tasks.length}
|
||||
</Flex>
|
||||
|
||||
{isLoading && <LoadingOutlined style={{ color: colors.darkGray }} />}
|
||||
{isEditable ? (
|
||||
@@ -403,7 +391,7 @@ const EnhancedKanbanGroup: React.FC<EnhancedKanbanGroupProps> = React.memo(({
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
{name}
|
||||
{name} ({group.tasks.length})
|
||||
</Typography.Text>
|
||||
</Tooltip>
|
||||
)}
|
||||
@@ -480,28 +468,36 @@ const EnhancedKanbanGroup: React.FC<EnhancedKanbanGroupProps> = React.memo(({
|
||||
<SortableContext items={taskIds} strategy={verticalListSortingStrategy}>
|
||||
{group.tasks.map((task, index) => (
|
||||
<React.Fragment key={task.id}>
|
||||
{/* Show drop indicator before task if this is the target position */}
|
||||
{shouldShowDropIndicators && overId === task.id && (
|
||||
<div className="drop-preview-indicator">
|
||||
<div className="drop-line"></div>
|
||||
</div>
|
||||
{/* Drop indicator before the card if this is the drop target */}
|
||||
{overId === task.id && (
|
||||
<div
|
||||
style={{
|
||||
height: 20,
|
||||
background: themeMode === 'dark' ? '#444' : '#e0e0e0',
|
||||
borderRadius: 4,
|
||||
margin: '4px 0',
|
||||
transition: 'background 0.2s',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
<EnhancedKanbanTaskCard
|
||||
task={task}
|
||||
sectionId={group.id}
|
||||
isActive={task.id === activeTaskId}
|
||||
isDropTarget={overId === task.id}
|
||||
/>
|
||||
|
||||
{/* Show drop indicator after last task if dropping at the end */}
|
||||
{shouldShowDropIndicators &&
|
||||
index === group.tasks.length - 1 &&
|
||||
overId === group.id && (
|
||||
<div className="drop-preview-indicator">
|
||||
<div className="drop-line"></div>
|
||||
</div>
|
||||
)}
|
||||
{/* Drop indicator at the end if dropping at the end of the group */}
|
||||
{index === group.tasks.length - 1 && overId === group.id && (
|
||||
<div
|
||||
style={{
|
||||
height: 12,
|
||||
background: themeMode === 'dark' ? '#444' : '#e0e0e0',
|
||||
borderRadius: 4,
|
||||
margin: '8px 0',
|
||||
transition: 'background 0.2s',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</SortableContext>
|
||||
|
||||
@@ -114,7 +114,7 @@ const GranttChart = React.forwardRef(({ type, date }: { type: string; date: Date
|
||||
style={{
|
||||
background: themeWiseColor('#fff', '#141414', themeMode),
|
||||
}}
|
||||
className={`after:content relative z-10 after:absolute after:-right-1 after:top-0 after:-z-10 after:h-full after:w-1.5 after:bg-transparent after:bg-gradient-to-r after:from-[rgba(0,0,0,0.12)] after:to-transparent`}
|
||||
className={`after:content relative z-10 after:absolute after:-right-1 after:top-0 after:-z-10 after:h-full after:w-1.5 after:bg-transparent after:bg-linear-to-r after:from-[rgba(0,0,0,0.12)] after:to-transparent`}
|
||||
>
|
||||
<GranttMembersTable
|
||||
members={teamData}
|
||||
@@ -266,7 +266,7 @@ const GranttChart = React.forwardRef(({ type, date }: { type: string; date: Date
|
||||
>
|
||||
<div
|
||||
style={{ width: '100%', height: '100%' }}
|
||||
className={`rounded-sm outline-1 hover:outline ${themeMode === 'dark' ? 'outline-white/10' : 'outline-black/10'}`}
|
||||
className={`rounded-xs outline-1 hover:outline-solid ${themeMode === 'dark' ? 'outline-white/10' : 'outline-black/10'}`}
|
||||
></div>
|
||||
</div>
|
||||
))
|
||||
|
||||
@@ -153,7 +153,7 @@ const PriorityDropdown = ({ task, teamId }: PriorityDropdownProps) => {
|
||||
// Fallback rendering for raw priority values or when priority list is not loaded
|
||||
return (
|
||||
<div
|
||||
className="px-2 py-1 text-xs rounded"
|
||||
className="px-2 py-1 text-xs rounded-sm"
|
||||
style={{
|
||||
backgroundColor: getPriorityColor(task.priority) + ALPHA_CHANNEL,
|
||||
borderRadius: 16,
|
||||
|
||||
@@ -128,7 +128,7 @@ const StatusDropdown = ({ task, teamId }: StatusDropdownProps) => {
|
||||
// Fallback rendering for raw status values or when status list is not loaded
|
||||
return (
|
||||
<div
|
||||
className="px-2 py-1 text-xs rounded"
|
||||
className="px-2 py-1 text-xs rounded-sm"
|
||||
style={{
|
||||
backgroundColor: getStatusColor(task.status),
|
||||
borderRadius: 16,
|
||||
|
||||
@@ -52,7 +52,7 @@ const TaskRowName = React.memo(
|
||||
return (
|
||||
<button
|
||||
onClick={() => handleToggleExpansion(taskId)}
|
||||
className="hover flex h-4 w-4 items-center justify-center rounded text-[12px] hover:border hover:border-[#5587f5] hover:bg-[#d0eefa54] transition duration-150"
|
||||
className="hover flex h-4 w-4 items-center justify-center rounded-sm text-[12px] hover:border hover:border-[#5587f5] hover:bg-[#d0eefa54] transition duration-150"
|
||||
>
|
||||
{expandedTasks.includes(taskId) ? <DownOutlined /> : <RightOutlined />}
|
||||
</button>
|
||||
|
||||
@@ -15,7 +15,7 @@ const HeavyAssigneeSelector = React.lazy(() =>
|
||||
new Promise<{ default: React.ComponentType }>((resolve) =>
|
||||
setTimeout(() => resolve({
|
||||
default: () => (
|
||||
<div className="p-4 border rounded bg-blue-50">
|
||||
<div className="p-4 border rounded-sm bg-blue-50">
|
||||
<Text strong>🚀 Heavy Assignee Selector Loaded!</Text>
|
||||
<br />
|
||||
<Text type="secondary">This component contains:</Text>
|
||||
@@ -36,7 +36,7 @@ const HeavyDatePicker = React.lazy(() =>
|
||||
new Promise<{ default: React.ComponentType }>((resolve) =>
|
||||
setTimeout(() => resolve({
|
||||
default: () => (
|
||||
<div className="p-4 border rounded bg-green-50">
|
||||
<div className="p-4 border rounded-sm bg-green-50">
|
||||
<Text strong>📅 Heavy Date Picker Loaded!</Text>
|
||||
<br />
|
||||
<Text type="secondary">This component contains:</Text>
|
||||
@@ -57,7 +57,7 @@ const HeavyPrioritySelector = React.lazy(() =>
|
||||
new Promise<{ default: React.ComponentType }>((resolve) =>
|
||||
setTimeout(() => resolve({
|
||||
default: () => (
|
||||
<div className="p-4 border rounded bg-orange-50">
|
||||
<div className="p-4 border rounded-sm bg-orange-50">
|
||||
<Text strong>🔥 Heavy Priority Selector Loaded!</Text>
|
||||
<br />
|
||||
<Text type="secondary">This component contains:</Text>
|
||||
@@ -78,7 +78,7 @@ const HeavyLabelsSelector = React.lazy(() =>
|
||||
new Promise<{ default: React.ComponentType }>((resolve) =>
|
||||
setTimeout(() => resolve({
|
||||
default: () => (
|
||||
<div className="p-4 border rounded bg-purple-50">
|
||||
<div className="p-4 border rounded-sm bg-purple-50">
|
||||
<Text strong>🏷️ Heavy Labels Selector Loaded!</Text>
|
||||
<br />
|
||||
<Text type="secondary">This component contains:</Text>
|
||||
@@ -163,7 +163,7 @@ const AsanaStyleLazyDemo: React.FC = () => {
|
||||
<Card className="max-w-4xl mx-auto">
|
||||
<Title level={3}>🎯 Asana-Style Lazy Loading Demo</Title>
|
||||
|
||||
<div className="mb-4 p-4 bg-gray-50 rounded">
|
||||
<div className="mb-4 p-4 bg-gray-50 rounded-sm">
|
||||
<Text strong>Performance Benefits:</Text>
|
||||
<ul className="mt-2 text-sm">
|
||||
<li>✅ <strong>Faster Initial Load:</strong> Only lightweight placeholders load initially</li>
|
||||
@@ -220,25 +220,25 @@ const AsanaStyleLazyDemo: React.FC = () => {
|
||||
|
||||
<div className="space-y-4">
|
||||
{showComponents.assignee && (
|
||||
<Suspense fallback={<div className="p-4 border rounded bg-gray-100">Loading assignee selector...</div>}>
|
||||
<Suspense fallback={<div className="p-4 border rounded-sm bg-gray-100">Loading assignee selector...</div>}>
|
||||
<HeavyAssigneeSelector />
|
||||
</Suspense>
|
||||
)}
|
||||
|
||||
{showComponents.date && (
|
||||
<Suspense fallback={<div className="p-4 border rounded bg-gray-100">Loading date picker...</div>}>
|
||||
<Suspense fallback={<div className="p-4 border rounded-sm bg-gray-100">Loading date picker...</div>}>
|
||||
<HeavyDatePicker />
|
||||
</Suspense>
|
||||
)}
|
||||
|
||||
{showComponents.priority && (
|
||||
<Suspense fallback={<div className="p-4 border rounded bg-gray-100">Loading priority selector...</div>}>
|
||||
<Suspense fallback={<div className="p-4 border rounded-sm bg-gray-100">Loading priority selector...</div>}>
|
||||
<HeavyPrioritySelector />
|
||||
</Suspense>
|
||||
)}
|
||||
|
||||
{showComponents.labels && (
|
||||
<Suspense fallback={<div className="p-4 border rounded bg-gray-100">Loading labels selector...</div>}>
|
||||
<Suspense fallback={<div className="p-4 border rounded-sm bg-gray-100">Loading labels selector...</div>}>
|
||||
<HeavyLabelsSelector />
|
||||
</Suspense>
|
||||
)}
|
||||
|
||||
@@ -146,7 +146,7 @@ const AssigneeDropdownContent: React.FC<AssigneeDropdownContentProps> = ({
|
||||
<div
|
||||
ref={dropdownRef}
|
||||
className={`
|
||||
fixed z-[9999] w-72 rounded-md shadow-lg border
|
||||
fixed z-9999 w-72 rounded-md shadow-lg border
|
||||
${isDarkMode
|
||||
? 'bg-gray-800 border-gray-600'
|
||||
: 'bg-white border-gray-200'
|
||||
|
||||
@@ -394,7 +394,7 @@ const FilterDropdown: React.FC<{
|
||||
? (isDarkMode ? 'bg-blue-600 text-white border-blue-500' : 'bg-blue-50 text-blue-800 border-blue-300 font-semibold')
|
||||
: `${themeClasses.buttonBg} ${themeClasses.buttonBorder} ${themeClasses.buttonText}`
|
||||
}
|
||||
hover:shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1
|
||||
hover:shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
|
||||
${isDarkMode ? 'focus:ring-offset-gray-900' : 'focus:ring-offset-white'}
|
||||
`}
|
||||
aria-expanded={isOpen}
|
||||
@@ -414,7 +414,7 @@ const FilterDropdown: React.FC<{
|
||||
|
||||
{/* Dropdown Panel */}
|
||||
{isOpen && (
|
||||
<div className={`absolute top-full left-0 z-50 mt-1 w-64 ${themeClasses.dropdownBg} rounded-md shadow-lg border ${themeClasses.dropdownBorder}`}>
|
||||
<div className={`absolute top-full left-0 z-50 mt-1 w-64 ${themeClasses.dropdownBg} rounded-md shadow-sm border ${themeClasses.dropdownBorder}`}>
|
||||
{/* Search Input */}
|
||||
{section.searchable && (
|
||||
<div className={`p-2 border-b ${themeClasses.dividerBorder}`}>
|
||||
@@ -546,7 +546,7 @@ const SearchFilter: React.FC<{
|
||||
{!isExpanded ? (
|
||||
<button
|
||||
onClick={handleToggle}
|
||||
className={`inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium rounded-md border transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 ${themeClasses.buttonBg} ${themeClasses.buttonBorder} ${themeClasses.buttonText} ${themeClasses.containerBg === 'bg-gray-800' ? 'focus:ring-offset-gray-900' : 'focus:ring-offset-white'
|
||||
className={`inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium rounded-md border transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 ${themeClasses.buttonBg} ${themeClasses.buttonBorder} ${themeClasses.buttonText} ${themeClasses.containerBg === 'bg-gray-800' ? 'focus:ring-offset-gray-900' : 'focus:ring-offset-white'
|
||||
}`}
|
||||
>
|
||||
<SearchOutlined className="w-3.5 h-3.5" />
|
||||
@@ -579,7 +579,7 @@ const SearchFilter: React.FC<{
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
className="px-2.5 py-1.5 text-xs font-medium text-white bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 transition-colors duration-200"
|
||||
className="px-2.5 py-1.5 text-xs font-medium text-white bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors duration-200"
|
||||
>
|
||||
Search
|
||||
</button>
|
||||
@@ -646,7 +646,7 @@ const FieldsDropdown: React.FC<{ themeClasses: any; isDarkMode: boolean }> = ({
|
||||
? (isDarkMode ? 'bg-blue-600 text-white border-blue-500' : 'bg-blue-50 text-blue-800 border-blue-300 font-semibold')
|
||||
: `${themeClasses.buttonBg} ${themeClasses.buttonBorder} ${themeClasses.buttonText}`
|
||||
}
|
||||
hover:shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1
|
||||
hover:shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
|
||||
${isDarkMode ? 'focus:ring-offset-gray-900' : 'focus:ring-offset-white'}
|
||||
`}
|
||||
aria-expanded={open}
|
||||
@@ -666,7 +666,7 @@ const FieldsDropdown: React.FC<{ themeClasses: any; isDarkMode: boolean }> = ({
|
||||
|
||||
{/* Dropdown Panel - matching FilterDropdown style */}
|
||||
{open && (
|
||||
<div className={`absolute top-full left-0 z-50 mt-1 w-64 ${themeClasses.dropdownBg} rounded-md shadow-lg border ${themeClasses.dropdownBorder}`}>
|
||||
<div className={`absolute top-full left-0 z-50 mt-1 w-64 ${themeClasses.dropdownBg} rounded-md shadow-sm border ${themeClasses.dropdownBorder}`}>
|
||||
{/* Options List */}
|
||||
<div className="max-h-48 overflow-y-auto">
|
||||
{sortedFields.length === 0 ? (
|
||||
|
||||
@@ -0,0 +1,253 @@
|
||||
/* Optimized Bulk Action Bar Styles */
|
||||
.optimized-bulk-action-bar {
|
||||
/* GPU acceleration for smooth animations */
|
||||
will-change: transform, opacity;
|
||||
transform: translateZ(0);
|
||||
|
||||
/* Smooth backdrop blur with fallback */
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
|
||||
/* Prevent layout shifts */
|
||||
contain: layout style paint;
|
||||
|
||||
/* Optimize for animations */
|
||||
animation-fill-mode: both;
|
||||
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* Entrance animation */
|
||||
@keyframes slideUpFadeIn {
|
||||
from {
|
||||
transform: translateX(-50%) translateY(20px);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
to {
|
||||
transform: translateX(-50%) translateY(0);
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
/* Exit animation */
|
||||
@keyframes slideDownFadeOut {
|
||||
from {
|
||||
transform: translateX(-50%) translateY(0);
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
to {
|
||||
transform: translateX(-50%) translateY(20px);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.optimized-bulk-action-bar.entering {
|
||||
animation: slideUpFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.optimized-bulk-action-bar.exiting {
|
||||
animation: slideDownFadeOut 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* Action button optimizations */
|
||||
.bulk-action-button {
|
||||
/* GPU acceleration */
|
||||
will-change: transform, background-color;
|
||||
transform: translateZ(0);
|
||||
|
||||
/* Smooth hover transitions */
|
||||
transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
/* Prevent text selection */
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
|
||||
/* Optimize for touch */
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
.bulk-action-button:hover {
|
||||
transform: translateZ(0) scale(1.05);
|
||||
}
|
||||
|
||||
.bulk-action-button:active {
|
||||
transform: translateZ(0) scale(0.95);
|
||||
transition-duration: 0.1s;
|
||||
}
|
||||
|
||||
/* Button loading state optimization */
|
||||
.bulk-action-button.loading {
|
||||
pointer-events: none;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* Danger button styling */
|
||||
.bulk-action-button.danger:hover {
|
||||
background-color: rgba(239, 68, 68, 0.1) !important;
|
||||
color: #ef4444 !important;
|
||||
}
|
||||
|
||||
/* Dark mode optimizations */
|
||||
.dark .bulk-action-button:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.dark .bulk-action-button.danger:hover {
|
||||
background-color: rgba(239, 68, 68, 0.1) !important;
|
||||
}
|
||||
|
||||
/* Divider styling for better visual separation */
|
||||
.bulk-action-divider {
|
||||
opacity: 0.6;
|
||||
transition: opacity 0.15s ease;
|
||||
}
|
||||
|
||||
/* Badge styling optimizations */
|
||||
.bulk-action-badge {
|
||||
/* Smooth scaling animation */
|
||||
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.bulk-action-badge.updating {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
/* Tooltip optimizations */
|
||||
.ant-tooltip {
|
||||
/* Faster tooltip animations */
|
||||
transition: opacity 0.1s ease !important;
|
||||
}
|
||||
|
||||
/* Dropdown optimizations */
|
||||
.bulk-action-dropdown {
|
||||
/* Smooth dropdown animations */
|
||||
animation-duration: 0.2s !important;
|
||||
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
|
||||
}
|
||||
|
||||
/* Mobile responsive optimizations */
|
||||
@media (max-width: 768px) {
|
||||
.optimized-bulk-action-bar {
|
||||
/* Adjust for mobile */
|
||||
bottom: 20px;
|
||||
left: 50%;
|
||||
right: auto;
|
||||
transform: translateX(-50%);
|
||||
max-width: calc(100vw - 32px);
|
||||
padding: 10px 16px;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.bulk-action-button {
|
||||
/* Smaller buttons on mobile */
|
||||
min-width: 28px;
|
||||
height: 28px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
/* Hide some actions on very small screens */
|
||||
.bulk-action-secondary {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.optimized-bulk-action-bar {
|
||||
/* Even more compact on small screens */
|
||||
bottom: 16px;
|
||||
padding: 8px 12px;
|
||||
gap: 1px;
|
||||
}
|
||||
|
||||
/* Show only essential actions */
|
||||
.bulk-action-tertiary {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* High contrast mode support */
|
||||
@media (prefers-contrast: high) {
|
||||
.optimized-bulk-action-bar {
|
||||
border: 2px solid currentColor;
|
||||
background: var(--background-color);
|
||||
backdrop-filter: none;
|
||||
-webkit-backdrop-filter: none;
|
||||
}
|
||||
|
||||
.bulk-action-button {
|
||||
border: 1px solid currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
/* Reduced motion support */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.optimized-bulk-action-bar,
|
||||
.bulk-action-button,
|
||||
.bulk-action-badge {
|
||||
transition: none !important;
|
||||
animation: none !important;
|
||||
will-change: auto !important;
|
||||
}
|
||||
|
||||
.bulk-action-button:hover {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Focus management for accessibility */
|
||||
.bulk-action-button:focus-visible {
|
||||
outline: 2px solid #2563eb;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.dark .bulk-action-button:focus-visible {
|
||||
outline-color: #3b82f6;
|
||||
}
|
||||
|
||||
/* Performance optimization classes */
|
||||
.bulk-action-gpu-accelerated {
|
||||
transform: translateZ(0);
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.bulk-action-contain-layout {
|
||||
contain: layout style paint;
|
||||
}
|
||||
|
||||
/* Loading spinner optimization */
|
||||
.bulk-action-loading-spinner {
|
||||
animation: spin 1s linear infinite;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Smooth color transitions for theme switching */
|
||||
.bulk-action-theme-transition {
|
||||
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
|
||||
}
|
||||
|
||||
/* Optimize for 60fps animations */
|
||||
.bulk-action-60fps {
|
||||
animation-duration: 0.25s;
|
||||
animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
}
|
||||
|
||||
/* Prevent layout thrashing during animations */
|
||||
.bulk-action-stable-layout {
|
||||
contain: layout;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
@@ -0,0 +1,498 @@
|
||||
import React, { useMemo, useCallback, useState, useRef, useEffect } from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
import {
|
||||
Button,
|
||||
Typography,
|
||||
Dropdown,
|
||||
Popconfirm,
|
||||
Tooltip,
|
||||
Space,
|
||||
Badge,
|
||||
Divider
|
||||
} from 'antd';
|
||||
import {
|
||||
DeleteOutlined,
|
||||
CloseOutlined,
|
||||
MoreOutlined,
|
||||
RetweetOutlined,
|
||||
UserAddOutlined,
|
||||
InboxOutlined,
|
||||
TagsOutlined,
|
||||
UsergroupAddOutlined,
|
||||
CheckOutlined,
|
||||
EditOutlined,
|
||||
CopyOutlined,
|
||||
ExportOutlined,
|
||||
CalendarOutlined,
|
||||
FlagOutlined,
|
||||
BulbOutlined
|
||||
} from '@ant-design/icons';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { RootState } from '@/app/store';
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
interface OptimizedBulkActionBarProps {
|
||||
selectedTaskIds: string[];
|
||||
totalSelected: number;
|
||||
projectId: string;
|
||||
onClearSelection?: () => void;
|
||||
onBulkStatusChange?: (statusId: string) => void;
|
||||
onBulkPriorityChange?: (priorityId: string) => void;
|
||||
onBulkPhaseChange?: (phaseId: string) => void;
|
||||
onBulkAssignToMe?: () => void;
|
||||
onBulkAssignMembers?: (memberIds: string[]) => void;
|
||||
onBulkAddLabels?: (labelIds: string[]) => void;
|
||||
onBulkArchive?: () => void;
|
||||
onBulkDelete?: () => void;
|
||||
onBulkDuplicate?: () => void;
|
||||
onBulkExport?: () => void;
|
||||
onBulkSetDueDate?: (date: string) => void;
|
||||
}
|
||||
|
||||
// Performance-optimized memoized action button component
|
||||
const ActionButton = React.memo<{
|
||||
icon: React.ReactNode;
|
||||
tooltip: string;
|
||||
onClick?: () => void;
|
||||
loading?: boolean;
|
||||
danger?: boolean;
|
||||
disabled?: boolean;
|
||||
isDarkMode: boolean;
|
||||
badge?: number;
|
||||
}>(({ icon, tooltip, onClick, loading = false, danger = false, disabled = false, isDarkMode, badge }) => {
|
||||
const buttonStyle = useMemo(() => ({
|
||||
background: 'transparent',
|
||||
color: isDarkMode ? '#e5e7eb' : '#374151',
|
||||
border: 'none',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
padding: '6px',
|
||||
height: '32px',
|
||||
width: '32px',
|
||||
fontSize: '14px',
|
||||
borderRadius: '6px',
|
||||
transition: 'all 0.15s cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
cursor: disabled ? 'not-allowed' : 'pointer',
|
||||
opacity: disabled ? 0.5 : 1,
|
||||
...(danger && {
|
||||
color: '#ef4444',
|
||||
}),
|
||||
}), [isDarkMode, danger, disabled]);
|
||||
|
||||
const hoverStyle = useMemo(() => ({
|
||||
backgroundColor: isDarkMode
|
||||
? (danger ? 'rgba(239, 68, 68, 0.1)' : 'rgba(255, 255, 255, 0.1)')
|
||||
: (danger ? 'rgba(239, 68, 68, 0.1)' : 'rgba(0, 0, 0, 0.05)'),
|
||||
transform: 'scale(1.05)',
|
||||
}), [isDarkMode, danger]);
|
||||
|
||||
const [isHovered, setIsHovered] = useState(false);
|
||||
|
||||
const combinedStyle = useMemo(() => ({
|
||||
...buttonStyle,
|
||||
...(isHovered && !disabled ? hoverStyle : {}),
|
||||
}), [buttonStyle, hoverStyle, isHovered, disabled]);
|
||||
|
||||
const ButtonComponent = (
|
||||
<Button
|
||||
icon={icon}
|
||||
style={combinedStyle}
|
||||
size="small"
|
||||
loading={loading}
|
||||
disabled={disabled}
|
||||
onClick={onClick}
|
||||
onMouseEnter={() => setIsHovered(true)}
|
||||
onMouseLeave={() => setIsHovered(false)}
|
||||
type="text"
|
||||
/>
|
||||
);
|
||||
|
||||
return (
|
||||
<Tooltip title={tooltip} placement="top">
|
||||
{badge && badge > 0 ? (
|
||||
<Badge count={badge} size="small" offset={[-2, 2]}>
|
||||
{ButtonComponent}
|
||||
</Badge>
|
||||
) : (
|
||||
ButtonComponent
|
||||
)}
|
||||
</Tooltip>
|
||||
);
|
||||
});
|
||||
|
||||
ActionButton.displayName = 'ActionButton';
|
||||
|
||||
// Performance-optimized main component
|
||||
const OptimizedBulkActionBarContent: React.FC<OptimizedBulkActionBarProps> = React.memo(({
|
||||
selectedTaskIds,
|
||||
totalSelected,
|
||||
projectId,
|
||||
onClearSelection,
|
||||
onBulkStatusChange,
|
||||
onBulkPriorityChange,
|
||||
onBulkPhaseChange,
|
||||
onBulkAssignToMe,
|
||||
onBulkAssignMembers,
|
||||
onBulkAddLabels,
|
||||
onBulkArchive,
|
||||
onBulkDelete,
|
||||
onBulkDuplicate,
|
||||
onBulkExport,
|
||||
onBulkSetDueDate,
|
||||
}) => {
|
||||
const { t } = useTranslation('task-management');
|
||||
const isDarkMode = useSelector((state: RootState) => state.themeReducer?.mode === 'dark');
|
||||
|
||||
// Performance state management
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
const [loadingStates, setLoadingStates] = useState({
|
||||
status: false,
|
||||
priority: false,
|
||||
phase: false,
|
||||
assignToMe: false,
|
||||
assignMembers: false,
|
||||
labels: false,
|
||||
archive: false,
|
||||
delete: false,
|
||||
duplicate: false,
|
||||
export: false,
|
||||
dueDate: false,
|
||||
});
|
||||
|
||||
// Smooth entrance animation
|
||||
useEffect(() => {
|
||||
if (totalSelected > 0) {
|
||||
// Micro-delay for smoother animation
|
||||
const timer = setTimeout(() => setIsVisible(true), 50);
|
||||
return () => clearTimeout(timer);
|
||||
} else {
|
||||
setIsVisible(false);
|
||||
}
|
||||
}, [totalSelected]);
|
||||
|
||||
// Optimized loading state updater
|
||||
const updateLoadingState = useCallback((action: keyof typeof loadingStates, loading: boolean) => {
|
||||
setLoadingStates(prev => ({ ...prev, [action]: loading }));
|
||||
}, []);
|
||||
|
||||
// Memoized handlers with loading states
|
||||
const handleStatusChange = useCallback(async () => {
|
||||
updateLoadingState('status', true);
|
||||
try {
|
||||
await onBulkStatusChange?.('new-status-id');
|
||||
} finally {
|
||||
updateLoadingState('status', false);
|
||||
}
|
||||
}, [onBulkStatusChange, updateLoadingState]);
|
||||
|
||||
const handlePriorityChange = useCallback(async () => {
|
||||
updateLoadingState('priority', true);
|
||||
try {
|
||||
await onBulkPriorityChange?.('new-priority-id');
|
||||
} finally {
|
||||
updateLoadingState('priority', false);
|
||||
}
|
||||
}, [onBulkPriorityChange, updateLoadingState]);
|
||||
|
||||
const handlePhaseChange = useCallback(async () => {
|
||||
updateLoadingState('phase', true);
|
||||
try {
|
||||
await onBulkPhaseChange?.('new-phase-id');
|
||||
} finally {
|
||||
updateLoadingState('phase', false);
|
||||
}
|
||||
}, [onBulkPhaseChange, updateLoadingState]);
|
||||
|
||||
const handleAssignToMe = useCallback(async () => {
|
||||
updateLoadingState('assignToMe', true);
|
||||
try {
|
||||
await onBulkAssignToMe?.();
|
||||
} finally {
|
||||
updateLoadingState('assignToMe', false);
|
||||
}
|
||||
}, [onBulkAssignToMe, updateLoadingState]);
|
||||
|
||||
const handleArchive = useCallback(async () => {
|
||||
updateLoadingState('archive', true);
|
||||
try {
|
||||
await onBulkArchive?.();
|
||||
} finally {
|
||||
updateLoadingState('archive', false);
|
||||
}
|
||||
}, [onBulkArchive, updateLoadingState]);
|
||||
|
||||
const handleDelete = useCallback(async () => {
|
||||
updateLoadingState('delete', true);
|
||||
try {
|
||||
await onBulkDelete?.();
|
||||
} finally {
|
||||
updateLoadingState('delete', false);
|
||||
}
|
||||
}, [onBulkDelete, updateLoadingState]);
|
||||
|
||||
const handleDuplicate = useCallback(async () => {
|
||||
updateLoadingState('duplicate', true);
|
||||
try {
|
||||
await onBulkDuplicate?.();
|
||||
} finally {
|
||||
updateLoadingState('duplicate', false);
|
||||
}
|
||||
}, [onBulkDuplicate, updateLoadingState]);
|
||||
|
||||
const handleExport = useCallback(async () => {
|
||||
updateLoadingState('export', true);
|
||||
try {
|
||||
await onBulkExport?.();
|
||||
} finally {
|
||||
updateLoadingState('export', false);
|
||||
}
|
||||
}, [onBulkExport, updateLoadingState]);
|
||||
|
||||
// Memoized styles for better performance
|
||||
const containerStyle = useMemo((): React.CSSProperties => ({
|
||||
position: 'fixed',
|
||||
bottom: '24px',
|
||||
left: '50%',
|
||||
transform: `translateX(-50%) translateY(${isVisible ? '0' : '20px'})`,
|
||||
zIndex: 1000,
|
||||
background: isDarkMode
|
||||
? 'rgba(31, 41, 55, 0.95)'
|
||||
: 'rgba(255, 255, 255, 0.95)',
|
||||
backdropFilter: 'blur(12px)',
|
||||
WebkitBackdropFilter: 'blur(12px)',
|
||||
borderRadius: '16px',
|
||||
padding: '12px 20px',
|
||||
boxShadow: isDarkMode
|
||||
? '0 10px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(55, 65, 81, 0.3)'
|
||||
: '0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.05)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '4px',
|
||||
minWidth: 'fit-content',
|
||||
maxWidth: '90vw',
|
||||
opacity: isVisible ? 1 : 0,
|
||||
visibility: isVisible ? 'visible' : 'hidden',
|
||||
transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
border: isDarkMode
|
||||
? '1px solid rgba(55, 65, 81, 0.3)'
|
||||
: '1px solid rgba(229, 231, 235, 0.8)',
|
||||
}), [isDarkMode, isVisible]);
|
||||
|
||||
const textStyle = useMemo(() => ({
|
||||
color: isDarkMode ? '#f3f4f6' : '#374151',
|
||||
fontSize: '14px',
|
||||
fontWeight: 500,
|
||||
marginRight: '12px',
|
||||
whiteSpace: 'nowrap' as const,
|
||||
}), [isDarkMode]);
|
||||
|
||||
// Quick actions dropdown menu
|
||||
const quickActionsMenu = useMemo(() => ({
|
||||
items: [
|
||||
{
|
||||
key: 'change-status',
|
||||
label: 'Change Status',
|
||||
icon: <RetweetOutlined />,
|
||||
onClick: handleStatusChange,
|
||||
},
|
||||
{
|
||||
key: 'change-priority',
|
||||
label: 'Change Priority',
|
||||
icon: <FlagOutlined />,
|
||||
onClick: handlePriorityChange,
|
||||
},
|
||||
{
|
||||
key: 'change-phase',
|
||||
label: 'Change Phase',
|
||||
icon: <RetweetOutlined />,
|
||||
onClick: handlePhaseChange,
|
||||
},
|
||||
{
|
||||
key: 'set-due-date',
|
||||
label: 'Set Due Date',
|
||||
icon: <CalendarOutlined />,
|
||||
onClick: () => onBulkSetDueDate?.(new Date().toISOString()),
|
||||
},
|
||||
{
|
||||
type: 'divider' as const,
|
||||
key: 'divider-1',
|
||||
},
|
||||
{
|
||||
key: 'duplicate',
|
||||
label: 'Duplicate Tasks',
|
||||
icon: <CopyOutlined />,
|
||||
onClick: handleDuplicate,
|
||||
},
|
||||
{
|
||||
key: 'export',
|
||||
label: 'Export Tasks',
|
||||
icon: <ExportOutlined />,
|
||||
onClick: handleExport,
|
||||
},
|
||||
],
|
||||
}), [handleStatusChange, handlePriorityChange, handlePhaseChange, handleDuplicate, handleExport, onBulkSetDueDate]);
|
||||
|
||||
// Don't render if no tasks selected
|
||||
if (totalSelected === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={containerStyle}>
|
||||
{/* Selection Count */}
|
||||
<Text style={textStyle}>
|
||||
<Badge
|
||||
count={totalSelected}
|
||||
style={{
|
||||
backgroundColor: isDarkMode ? '#3b82f6' : '#2563eb',
|
||||
color: 'white',
|
||||
fontSize: '11px',
|
||||
height: '18px',
|
||||
lineHeight: '18px',
|
||||
minWidth: '18px',
|
||||
marginRight: '6px'
|
||||
}}
|
||||
/>
|
||||
{totalSelected} {totalSelected === 1 ? 'task' : 'tasks'} selected
|
||||
</Text>
|
||||
|
||||
<Divider
|
||||
type="vertical"
|
||||
style={{
|
||||
height: '20px',
|
||||
margin: '0 8px',
|
||||
borderColor: isDarkMode ? 'rgba(55, 65, 81, 0.5)' : 'rgba(229, 231, 235, 0.8)'
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Actions in same order as original component */}
|
||||
<Space size={2}>
|
||||
{/* Change Status/Priority/Phase */}
|
||||
<Tooltip title="Change Status/Priority/Phase" placement="top">
|
||||
<Dropdown
|
||||
menu={quickActionsMenu}
|
||||
trigger={['click']}
|
||||
placement="top"
|
||||
arrow
|
||||
>
|
||||
<Button
|
||||
icon={<RetweetOutlined />}
|
||||
style={{
|
||||
background: 'transparent',
|
||||
color: isDarkMode ? '#e5e7eb' : '#374151',
|
||||
border: 'none',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
padding: '6px',
|
||||
height: '32px',
|
||||
width: '32px',
|
||||
fontSize: '14px',
|
||||
borderRadius: '6px',
|
||||
transition: 'all 0.15s cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
}}
|
||||
size="small"
|
||||
type="text"
|
||||
loading={loadingStates.status || loadingStates.priority || loadingStates.phase}
|
||||
/>
|
||||
</Dropdown>
|
||||
</Tooltip>
|
||||
|
||||
{/* Change Labels */}
|
||||
<ActionButton
|
||||
icon={<TagsOutlined />}
|
||||
tooltip="Add Labels"
|
||||
onClick={() => onBulkAddLabels?.([])}
|
||||
loading={loadingStates.labels}
|
||||
isDarkMode={isDarkMode}
|
||||
/>
|
||||
|
||||
{/* Assign to Me */}
|
||||
<ActionButton
|
||||
icon={<UserAddOutlined />}
|
||||
tooltip="Assign to Me"
|
||||
onClick={handleAssignToMe}
|
||||
loading={loadingStates.assignToMe}
|
||||
isDarkMode={isDarkMode}
|
||||
/>
|
||||
|
||||
{/* Change Assignees */}
|
||||
<ActionButton
|
||||
icon={<UsergroupAddOutlined />}
|
||||
tooltip="Assign Members"
|
||||
onClick={() => onBulkAssignMembers?.([])}
|
||||
loading={loadingStates.assignMembers}
|
||||
isDarkMode={isDarkMode}
|
||||
/>
|
||||
|
||||
{/* Archive */}
|
||||
<ActionButton
|
||||
icon={<InboxOutlined />}
|
||||
tooltip="Archive"
|
||||
onClick={handleArchive}
|
||||
loading={loadingStates.archive}
|
||||
isDarkMode={isDarkMode}
|
||||
/>
|
||||
|
||||
{/* Delete */}
|
||||
<Popconfirm
|
||||
title={`Delete ${totalSelected} ${totalSelected === 1 ? 'task' : 'tasks'}?`}
|
||||
description="This action cannot be undone."
|
||||
onConfirm={handleDelete}
|
||||
okText="Delete"
|
||||
cancelText="Cancel"
|
||||
okType="danger"
|
||||
placement="top"
|
||||
>
|
||||
<ActionButton
|
||||
icon={<DeleteOutlined />}
|
||||
tooltip="Delete"
|
||||
loading={loadingStates.delete}
|
||||
danger
|
||||
isDarkMode={isDarkMode}
|
||||
/>
|
||||
</Popconfirm>
|
||||
|
||||
<Divider
|
||||
type="vertical"
|
||||
style={{
|
||||
height: '20px',
|
||||
margin: '0 4px',
|
||||
borderColor: isDarkMode ? 'rgba(55, 65, 81, 0.5)' : 'rgba(229, 231, 235, 0.8)'
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Clear Selection */}
|
||||
<ActionButton
|
||||
icon={<CloseOutlined />}
|
||||
tooltip="Clear Selection"
|
||||
onClick={onClearSelection}
|
||||
isDarkMode={isDarkMode}
|
||||
/>
|
||||
</Space>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
OptimizedBulkActionBarContent.displayName = 'OptimizedBulkActionBarContent';
|
||||
|
||||
// Portal wrapper for performance isolation
|
||||
const OptimizedBulkActionBar: React.FC<OptimizedBulkActionBarProps> = React.memo((props) => {
|
||||
// Only render portal if tasks are selected for better performance
|
||||
if (props.totalSelected === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return createPortal(
|
||||
<OptimizedBulkActionBarContent {...props} />,
|
||||
document.body,
|
||||
'optimized-bulk-action-bar'
|
||||
);
|
||||
});
|
||||
|
||||
OptimizedBulkActionBar.displayName = 'OptimizedBulkActionBar';
|
||||
|
||||
export default OptimizedBulkActionBar;
|
||||
@@ -41,9 +41,38 @@ import { Task } from '@/types/task-management.types';
|
||||
import { useTaskSocketHandlers } from '@/hooks/useTaskSocketHandlers';
|
||||
import TaskRow from './task-row';
|
||||
// import BulkActionBar from './bulk-action-bar';
|
||||
import OptimizedBulkActionBar from './optimized-bulk-action-bar';
|
||||
import VirtualizedTaskList from './virtualized-task-list';
|
||||
import { AppDispatch } from '@/app/store';
|
||||
import { shallowEqual } from 'react-redux';
|
||||
import { deselectAll } from '@/features/projects/bulkActions/bulkActionSlice';
|
||||
import { taskListBulkActionsApiService } from '@/api/tasks/task-list-bulk-actions.api.service';
|
||||
import { useMixpanelTracking } from '@/hooks/useMixpanelTracking';
|
||||
import {
|
||||
evt_project_task_list_bulk_archive,
|
||||
evt_project_task_list_bulk_assign_me,
|
||||
evt_project_task_list_bulk_assign_members,
|
||||
evt_project_task_list_bulk_change_phase,
|
||||
evt_project_task_list_bulk_change_priority,
|
||||
evt_project_task_list_bulk_change_status,
|
||||
evt_project_task_list_bulk_delete,
|
||||
evt_project_task_list_bulk_update_labels,
|
||||
} from '@/shared/worklenz-analytics-events';
|
||||
import {
|
||||
IBulkTasksLabelsRequest,
|
||||
IBulkTasksPhaseChangeRequest,
|
||||
IBulkTasksPriorityChangeRequest,
|
||||
IBulkTasksStatusChangeRequest,
|
||||
} from '@/types/tasks/bulk-action-bar.types';
|
||||
import { ITaskStatus } from '@/types/tasks/taskStatus.types';
|
||||
import { ITaskPriority } from '@/types/tasks/taskPriority.types';
|
||||
import { ITaskPhase } from '@/types/tasks/taskPhase.types';
|
||||
import { ITaskLabel } from '@/types/tasks/taskLabel.types';
|
||||
import { ITeamMemberViewModel } from '@/types/teamMembers/teamMembersGetResponse.types';
|
||||
import { checkTaskDependencyStatus } from '@/utils/check-task-dependency-status';
|
||||
import alertService from '@/services/alerts/alertService';
|
||||
import logger from '@/utils/errorLogger';
|
||||
import { fetchLabels } from '@/features/taskAttributes/taskLabelSlice';
|
||||
import { performanceMonitor } from '@/utils/performance-monitor';
|
||||
import debugPerformance from '@/utils/debug-performance';
|
||||
|
||||
@@ -53,6 +82,7 @@ import PerformanceAnalysis from './performance-analysis';
|
||||
|
||||
// Import drag and drop performance optimizations
|
||||
import './drag-drop-optimized.css';
|
||||
import './optimized-bulk-action-bar.css';
|
||||
|
||||
interface TaskListBoardProps {
|
||||
projectId: string;
|
||||
@@ -91,6 +121,7 @@ const throttle = <T extends (...args: any[]) => void>(func: T, delay: number): T
|
||||
const TaskListBoard: React.FC<TaskListBoardProps> = ({ projectId, className = '' }) => {
|
||||
const dispatch = useDispatch<AppDispatch>();
|
||||
const { t } = useTranslation('task-management');
|
||||
const { trackMixpanelEvent } = useMixpanelTracking();
|
||||
const [dragState, setDragState] = useState<DragState>({
|
||||
activeTask: null,
|
||||
activeGroupId: null,
|
||||
@@ -119,6 +150,14 @@ const TaskListBoard: React.FC<TaskListBoardProps> = ({ projectId, className = ''
|
||||
const selectedTaskIds = useSelector(selectSelectedTaskIds);
|
||||
const loading = useSelector((state: RootState) => state.taskManagement.loading, shallowEqual);
|
||||
const error = useSelector((state: RootState) => state.taskManagement.error);
|
||||
|
||||
// Bulk action selectors
|
||||
const statusList = useSelector((state: RootState) => state.taskStatusReducer.status);
|
||||
const priorityList = useSelector((state: RootState) => state.priorityReducer.priorities);
|
||||
const phaseList = useSelector((state: RootState) => state.phaseReducer.phaseList);
|
||||
const labelsList = useSelector((state: RootState) => state.taskLabelsReducer.labels);
|
||||
const members = useSelector((state: RootState) => state.teamMembersReducer.teamMembers);
|
||||
const archived = useSelector((state: RootState) => state.taskReducer.archived);
|
||||
|
||||
// Get theme from Redux store
|
||||
const isDarkMode = useSelector((state: RootState) => state.themeReducer?.mode === 'dark');
|
||||
@@ -401,6 +440,221 @@ const TaskListBoard: React.FC<TaskListBoardProps> = ({ projectId, className = ''
|
||||
);
|
||||
}, [dragState.activeTask, dragState.activeGroupId, projectId, currentGrouping]);
|
||||
|
||||
// Bulk action handlers - implementing real functionality from task-list-bulk-actions-bar
|
||||
const handleClearSelection = useCallback(() => {
|
||||
dispatch(deselectAll());
|
||||
}, [dispatch]);
|
||||
|
||||
const handleBulkStatusChange = useCallback(async (statusId: string) => {
|
||||
if (!statusId || !projectId) return;
|
||||
try {
|
||||
// Find the status object
|
||||
const status = statusList.find(s => s.id === statusId);
|
||||
if (!status || !status.id) return;
|
||||
|
||||
const body: IBulkTasksStatusChangeRequest = {
|
||||
tasks: selectedTaskIds,
|
||||
status_id: status.id,
|
||||
};
|
||||
|
||||
// Check task dependencies first
|
||||
for (const taskId of selectedTaskIds) {
|
||||
const canContinue = await checkTaskDependencyStatus(taskId, status.id);
|
||||
if (!canContinue) {
|
||||
if (selectedTaskIds.length > 1) {
|
||||
alertService.warning(
|
||||
'Incomplete Dependencies!',
|
||||
'Some tasks were not updated. Please ensure all dependent tasks are completed before proceeding.'
|
||||
);
|
||||
} else {
|
||||
alertService.error(
|
||||
'Task is not completed',
|
||||
'Please complete the task dependencies before proceeding'
|
||||
);
|
||||
}
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const res = await taskListBulkActionsApiService.changeStatus(body, projectId);
|
||||
if (res.done) {
|
||||
trackMixpanelEvent(evt_project_task_list_bulk_change_status);
|
||||
dispatch(deselectAll());
|
||||
dispatch(fetchTasksV3(projectId));
|
||||
}
|
||||
} catch (error) {
|
||||
logger.error('Error changing status:', error);
|
||||
}
|
||||
}, [selectedTaskIds, statusList, projectId, trackMixpanelEvent, dispatch]);
|
||||
|
||||
const handleBulkPriorityChange = useCallback(async (priorityId: string) => {
|
||||
if (!priorityId || !projectId) return;
|
||||
try {
|
||||
const priority = priorityList.find(p => p.id === priorityId);
|
||||
if (!priority || !priority.id) return;
|
||||
|
||||
const body: IBulkTasksPriorityChangeRequest = {
|
||||
tasks: selectedTaskIds,
|
||||
priority_id: priority.id,
|
||||
};
|
||||
const res = await taskListBulkActionsApiService.changePriority(body, projectId);
|
||||
if (res.done) {
|
||||
trackMixpanelEvent(evt_project_task_list_bulk_change_priority);
|
||||
dispatch(deselectAll());
|
||||
dispatch(fetchTasksV3(projectId));
|
||||
}
|
||||
} catch (error) {
|
||||
logger.error('Error changing priority:', error);
|
||||
}
|
||||
}, [selectedTaskIds, priorityList, projectId, trackMixpanelEvent, dispatch]);
|
||||
|
||||
const handleBulkPhaseChange = useCallback(async (phaseId: string) => {
|
||||
if (!phaseId || !projectId) return;
|
||||
try {
|
||||
const phase = phaseList.find(p => p.id === phaseId);
|
||||
if (!phase || !phase.id) return;
|
||||
|
||||
const body: IBulkTasksPhaseChangeRequest = {
|
||||
tasks: selectedTaskIds,
|
||||
phase_id: phase.id,
|
||||
};
|
||||
const res = await taskListBulkActionsApiService.changePhase(body, projectId);
|
||||
if (res.done) {
|
||||
trackMixpanelEvent(evt_project_task_list_bulk_change_phase);
|
||||
dispatch(deselectAll());
|
||||
dispatch(fetchTasksV3(projectId));
|
||||
}
|
||||
} catch (error) {
|
||||
logger.error('Error changing phase:', error);
|
||||
}
|
||||
}, [selectedTaskIds, phaseList, projectId, trackMixpanelEvent, dispatch]);
|
||||
|
||||
const handleBulkAssignToMe = useCallback(async () => {
|
||||
if (!projectId) return;
|
||||
try {
|
||||
const body = {
|
||||
tasks: selectedTaskIds,
|
||||
project_id: projectId,
|
||||
};
|
||||
const res = await taskListBulkActionsApiService.assignToMe(body);
|
||||
if (res.done) {
|
||||
trackMixpanelEvent(evt_project_task_list_bulk_assign_me);
|
||||
dispatch(deselectAll());
|
||||
dispatch(fetchTasksV3(projectId));
|
||||
}
|
||||
} catch (error) {
|
||||
logger.error('Error assigning to me:', error);
|
||||
}
|
||||
}, [selectedTaskIds, projectId, trackMixpanelEvent, dispatch]);
|
||||
|
||||
const handleBulkAssignMembers = useCallback(async (memberIds: string[]) => {
|
||||
if (!projectId || !members?.data) return;
|
||||
try {
|
||||
// Convert memberIds to member objects with proper type checking
|
||||
const selectedMembers = members.data.filter(member =>
|
||||
member.id && memberIds.includes(member.id)
|
||||
);
|
||||
|
||||
const body = {
|
||||
tasks: selectedTaskIds,
|
||||
project_id: projectId,
|
||||
members: selectedMembers.map(member => ({
|
||||
id: member.id!,
|
||||
name: member.name || '',
|
||||
email: member.email || '',
|
||||
avatar_url: member.avatar_url || '',
|
||||
team_member_id: member.id!,
|
||||
project_member_id: member.id!,
|
||||
})),
|
||||
};
|
||||
const res = await taskListBulkActionsApiService.assignTasks(body);
|
||||
if (res.done) {
|
||||
trackMixpanelEvent(evt_project_task_list_bulk_assign_members);
|
||||
dispatch(deselectAll());
|
||||
dispatch(fetchTasksV3(projectId));
|
||||
}
|
||||
} catch (error) {
|
||||
logger.error('Error assigning tasks:', error);
|
||||
}
|
||||
}, [selectedTaskIds, projectId, members, trackMixpanelEvent, dispatch]);
|
||||
|
||||
const handleBulkAddLabels = useCallback(async (labelIds: string[]) => {
|
||||
if (!projectId) return;
|
||||
try {
|
||||
// Convert labelIds to label objects with proper type checking
|
||||
const selectedLabels = labelsList.filter(label =>
|
||||
label.id && labelIds.includes(label.id)
|
||||
);
|
||||
|
||||
const body: IBulkTasksLabelsRequest = {
|
||||
tasks: selectedTaskIds,
|
||||
labels: selectedLabels,
|
||||
text: null,
|
||||
};
|
||||
const res = await taskListBulkActionsApiService.assignLabels(body, projectId);
|
||||
if (res.done) {
|
||||
trackMixpanelEvent(evt_project_task_list_bulk_update_labels);
|
||||
dispatch(deselectAll());
|
||||
dispatch(fetchTasksV3(projectId));
|
||||
dispatch(fetchLabels());
|
||||
}
|
||||
} catch (error) {
|
||||
logger.error('Error updating labels:', error);
|
||||
}
|
||||
}, [selectedTaskIds, projectId, labelsList, trackMixpanelEvent, dispatch]);
|
||||
|
||||
const handleBulkArchive = useCallback(async () => {
|
||||
if (!projectId) return;
|
||||
try {
|
||||
const body = {
|
||||
tasks: selectedTaskIds,
|
||||
project_id: projectId,
|
||||
};
|
||||
const res = await taskListBulkActionsApiService.archiveTasks(body, archived);
|
||||
if (res.done) {
|
||||
trackMixpanelEvent(evt_project_task_list_bulk_archive);
|
||||
dispatch(deselectAll());
|
||||
dispatch(fetchTasksV3(projectId));
|
||||
}
|
||||
} catch (error) {
|
||||
logger.error('Error archiving tasks:', error);
|
||||
}
|
||||
}, [selectedTaskIds, projectId, archived, trackMixpanelEvent, dispatch]);
|
||||
|
||||
const handleBulkDelete = useCallback(async () => {
|
||||
if (!projectId) return;
|
||||
try {
|
||||
const body = {
|
||||
tasks: selectedTaskIds,
|
||||
project_id: projectId,
|
||||
};
|
||||
const res = await taskListBulkActionsApiService.deleteTasks(body, projectId);
|
||||
if (res.done) {
|
||||
trackMixpanelEvent(evt_project_task_list_bulk_delete);
|
||||
dispatch(deselectAll());
|
||||
dispatch(fetchTasksV3(projectId));
|
||||
}
|
||||
} catch (error) {
|
||||
logger.error('Error deleting tasks:', error);
|
||||
}
|
||||
}, [selectedTaskIds, projectId, trackMixpanelEvent, dispatch]);
|
||||
|
||||
// Additional handlers for new actions
|
||||
const handleBulkDuplicate = useCallback(async () => {
|
||||
// This would need to be implemented in the API service
|
||||
console.log('Bulk duplicate not yet implemented in API:', selectedTaskIds);
|
||||
}, [selectedTaskIds]);
|
||||
|
||||
const handleBulkExport = useCallback(async () => {
|
||||
// This would need to be implemented in the API service
|
||||
console.log('Bulk export not yet implemented in API:', selectedTaskIds);
|
||||
}, [selectedTaskIds]);
|
||||
|
||||
const handleBulkSetDueDate = useCallback(async (date: string) => {
|
||||
// This would need to be implemented in the API service
|
||||
console.log('Bulk set due date not yet implemented in API:', date, selectedTaskIds);
|
||||
}, [selectedTaskIds]);
|
||||
|
||||
// Cleanup effect
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
@@ -525,6 +779,25 @@ const TaskListBoard: React.FC<TaskListBoardProps> = ({ projectId, className = ''
|
||||
</DragOverlay>
|
||||
</DndContext>
|
||||
|
||||
{/* Optimized Bulk Action Bar */}
|
||||
<OptimizedBulkActionBar
|
||||
selectedTaskIds={selectedTaskIds}
|
||||
totalSelected={selectedTaskIds.length}
|
||||
projectId={projectId}
|
||||
onClearSelection={handleClearSelection}
|
||||
onBulkStatusChange={handleBulkStatusChange}
|
||||
onBulkPriorityChange={handleBulkPriorityChange}
|
||||
onBulkPhaseChange={handleBulkPhaseChange}
|
||||
onBulkAssignToMe={handleBulkAssignToMe}
|
||||
onBulkAssignMembers={handleBulkAssignMembers}
|
||||
onBulkAddLabels={handleBulkAddLabels}
|
||||
onBulkArchive={handleBulkArchive}
|
||||
onBulkDelete={handleBulkDelete}
|
||||
onBulkDuplicate={handleBulkDuplicate}
|
||||
onBulkExport={handleBulkExport}
|
||||
onBulkSetDueDate={handleBulkSetDueDate}
|
||||
/>
|
||||
|
||||
<style>{`
|
||||
/* Fixed height container - Asana style */
|
||||
.task-groups-container-fixed {
|
||||
|
||||
@@ -146,7 +146,7 @@ const TaskPhaseDropdown: React.FC<TaskPhaseDropdownProps> = ({
|
||||
ref={dropdownRef}
|
||||
className={`
|
||||
fixed min-w-[160px] max-w-[220px]
|
||||
rounded border backdrop-blur-sm z-[9999]
|
||||
rounded border backdrop-blur-xs z-9999
|
||||
${isDarkMode
|
||||
? 'bg-gray-900/95 border-gray-600 shadow-2xl shadow-black/50'
|
||||
: 'bg-white/95 border-gray-200 shadow-2xl shadow-gray-500/20'
|
||||
|
||||
@@ -147,7 +147,7 @@ const TaskPriorityDropdown: React.FC<TaskPriorityDropdownProps> = ({
|
||||
ref={dropdownRef}
|
||||
className={`
|
||||
fixed min-w-[160px] max-w-[220px]
|
||||
rounded border backdrop-blur-sm z-[9999]
|
||||
rounded border backdrop-blur-xs z-9999
|
||||
${isDarkMode
|
||||
? 'bg-gray-900/95 border-gray-600 shadow-2xl shadow-black/50'
|
||||
: 'bg-white/95 border-gray-200 shadow-2xl shadow-gray-500/20'
|
||||
|
||||
@@ -200,7 +200,7 @@ const AssigneePlaceholder = React.memo<{ isDarkMode: boolean; memberCount?: numb
|
||||
) : (
|
||||
<div className={`w-6 h-6 rounded-full ${isDarkMode ? 'bg-gray-600' : 'bg-gray-200'}`} />
|
||||
)}
|
||||
<div className={`w-4 h-4 rounded ${isDarkMode ? 'bg-gray-600' : 'bg-gray-200'}`} />
|
||||
<div className={`w-4 h-4 rounded-sm ${isDarkMode ? 'bg-gray-600' : 'bg-gray-200'}`} />
|
||||
</div>
|
||||
));
|
||||
|
||||
@@ -249,7 +249,7 @@ const LabelsPlaceholder = React.memo<{ labelCount?: number; isDarkMode: boolean
|
||||
/>
|
||||
))
|
||||
) : (
|
||||
<div className={`w-4 h-4 rounded ${isDarkMode ? 'bg-gray-600' : 'bg-gray-200'}`} />
|
||||
<div className={`w-4 h-4 rounded-sm ${isDarkMode ? 'bg-gray-600' : 'bg-gray-200'}`} />
|
||||
)}
|
||||
</div>
|
||||
));
|
||||
@@ -257,7 +257,7 @@ const LabelsPlaceholder = React.memo<{ labelCount?: number; isDarkMode: boolean
|
||||
// PERFORMANCE OPTIMIZATION: Simplified placeholders without animations under memory pressure
|
||||
const SimplePlaceholder = React.memo<{ width: number; height: number; isDarkMode: boolean }>(({ width, height, isDarkMode }) => (
|
||||
<div
|
||||
className={`rounded ${isDarkMode ? 'bg-gray-600' : 'bg-gray-200'}`}
|
||||
className={`rounded-sm ${isDarkMode ? 'bg-gray-600' : 'bg-gray-200'}`}
|
||||
style={{ width, height }}
|
||||
/>
|
||||
));
|
||||
@@ -614,7 +614,7 @@ const TaskRow: React.FC<TaskRowProps> = React.memo(({
|
||||
? (isDarkMode ? 'bg-blue-900/20' : 'bg-blue-50')
|
||||
: '';
|
||||
const overlay = isDragOverlay
|
||||
? `rounded shadow-lg border-2 ${isDarkMode ? 'border-gray-600 shadow-2xl' : 'border-gray-300 shadow-2xl'}`
|
||||
? `rounded-sm shadow-lg border-2 ${isDarkMode ? 'border-gray-600 shadow-2xl' : 'border-gray-300 shadow-2xl'}`
|
||||
: '';
|
||||
|
||||
return {
|
||||
@@ -643,7 +643,7 @@ const TaskRow: React.FC<TaskRowProps> = React.memo(({
|
||||
case 'drag':
|
||||
return (
|
||||
<div key={col.key} className={`flex items-center justify-center px-2 ${borderClasses}`} style={{ width: col.width }}>
|
||||
<div className="w-4 h-4 opacity-30 bg-gray-300 rounded"></div>
|
||||
<div className="w-4 h-4 opacity-30 bg-gray-300 rounded-sm"></div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -689,7 +689,7 @@ const TaskRow: React.FC<TaskRowProps> = React.memo(({
|
||||
// For non-essential columns, show minimal placeholder
|
||||
return (
|
||||
<div key={col.key} className={`flex items-center px-2 ${borderClasses}`} style={{ width: col.width }}>
|
||||
<div className={`w-6 h-3 rounded ${isDarkMode ? 'bg-gray-700' : 'bg-gray-200'}`}></div>
|
||||
<div className={`w-6 h-3 rounded-sm ${isDarkMode ? 'bg-gray-700' : 'bg-gray-200'}`}></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -144,7 +144,7 @@ const TaskStatusDropdown: React.FC<TaskStatusDropdownProps> = ({
|
||||
ref={dropdownRef}
|
||||
className={`
|
||||
fixed min-w-[160px] max-w-[220px]
|
||||
rounded border backdrop-blur-sm z-[9999]
|
||||
rounded border backdrop-blur-xs z-9999
|
||||
${isDarkMode
|
||||
? 'bg-gray-900/95 border-gray-600 shadow-2xl shadow-black/50'
|
||||
: 'bg-white/95 border-gray-200 shadow-2xl shadow-gray-500/20'
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
|
||||
@import url("./styles/customOverrides.css");
|
||||
@import url("./styles/task-management.css");
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
|
||||
@import url('./styles/customOverrides.css');
|
||||
@import url('./styles/task-management.css');
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
|
||||
@@ -21,7 +21,7 @@ const ProjectViewRoadmap = () => {
|
||||
|
||||
<Flex>
|
||||
{/* table */}
|
||||
<div className="after:content relative h-fit w-full max-w-[500px] after:absolute after:-right-3 after:top-0 after:z-10 after:min-h-full after:w-3 after:bg-gradient-to-r after:from-[rgba(0,0,0,0.12)] after:to-transparent">
|
||||
<div className="after:content relative h-fit w-full max-w-[500px] after:absolute after:-right-3 after:top-0 after:z-10 after:min-h-full after:w-3 after:bg-linear-to-r after:from-[rgba(0,0,0,0.12)] after:to-transparent">
|
||||
<RoadmapTable />
|
||||
</div>
|
||||
|
||||
|
||||
@@ -109,9 +109,9 @@ const RoadmapTable = () => {
|
||||
}));
|
||||
|
||||
// Layout styles for table and columns
|
||||
const customHeaderColumnStyles = `border px-2 h-[50px] text-left z-10 after:content after:absolute after:top-0 after:-right-1 after:-z-10 after:h-[42px] after:w-1.5 after:bg-transparent after:bg-gradient-to-r after:from-[rgba(0,0,0,0.12)] after:to-transparent ${themeMode === 'dark' ? 'bg-[#1d1d1d] border-[#303030]' : 'bg-[#fafafa]'}`;
|
||||
const customHeaderColumnStyles = `border px-2 h-[50px] text-left z-10 after:content after:absolute after:top-0 after:-right-1 after:-z-10 after:h-[42px] after:w-1.5 after:bg-transparent after:bg-linear-to-r after:from-[rgba(0,0,0,0.12)] after:to-transparent ${themeMode === 'dark' ? 'bg-[#1d1d1d] border-[#303030]' : 'bg-[#fafafa]'}`;
|
||||
|
||||
const customBodyColumnStyles = `border px-2 h-[50px] z-10 after:content after:absolute after:top-0 after:-right-1 after:-z-10 after:min-h-[40px] after:w-1.5 after:bg-transparent after:bg-gradient-to-r after:from-[rgba(0,0,0,0.12)] after:to-transparent ${themeMode === 'dark' ? 'bg-transparent border-[#303030]' : 'bg-transparent'}`;
|
||||
const customBodyColumnStyles = `border px-2 h-[50px] z-10 after:content after:absolute after:top-0 after:-right-1 after:-z-10 after:min-h-[40px] after:w-1.5 after:bg-transparent after:bg-linear-to-r after:from-[rgba(0,0,0,0.12)] after:to-transparent ${themeMode === 'dark' ? 'bg-transparent border-[#303030]' : 'bg-transparent'}`;
|
||||
|
||||
const rowBackgroundStyles =
|
||||
themeMode === 'dark' ? 'even:bg-[#1b1b1b] odd:bg-[#141414]' : 'even:bg-[#f4f4f4] odd:bg-white';
|
||||
|
||||
@@ -24,7 +24,7 @@ const RoadmapTaskCell = ({ task, isSubtask = false }: RoadmapTaskCellProps) => {
|
||||
return (
|
||||
<button
|
||||
onClick={() => dispatch(toggleTaskExpansion(id))}
|
||||
className="hover flex h-4 w-4 items-center justify-center rounded text-[12px] hover:border hover:border-[#5587f5] hover:bg-[#d0eefa54]"
|
||||
className="hover flex h-4 w-4 items-center justify-center rounded-sm text-[12px] hover:border hover:border-[#5587f5] hover:bg-[#d0eefa54]"
|
||||
>
|
||||
{task.isExpanded ? <DownOutlined /> : <RightOutlined />}
|
||||
</button>
|
||||
@@ -36,7 +36,7 @@ const RoadmapTaskCell = ({ task, isSubtask = false }: RoadmapTaskCellProps) => {
|
||||
return !isSubtask ? (
|
||||
<button
|
||||
onClick={() => dispatch(toggleTaskExpansion(id))}
|
||||
className="hover flex h-4 w-4 items-center justify-center rounded text-[12px] hover:border hover:border-[#5587f5] hover:bg-[#d0eefa54]"
|
||||
className="hover flex h-4 w-4 items-center justify-center rounded-sm text-[12px] hover:border hover:border-[#5587f5] hover:bg-[#d0eefa54]"
|
||||
>
|
||||
{task.isExpanded ? <DownOutlined /> : <RightOutlined />}
|
||||
</button>
|
||||
|
||||
@@ -323,7 +323,7 @@ const TaskListTable = ({
|
||||
}}
|
||||
>
|
||||
{activeTask && (
|
||||
<div className="bg-white dark:bg-gray-800 shadow-lg rounded border">
|
||||
<div className="bg-white dark:bg-gray-800 shadow-lg rounded-sm border">
|
||||
<DraggableRow
|
||||
task={activeTask}
|
||||
visibleColumns={visibleColumns}
|
||||
|
||||
@@ -131,7 +131,7 @@ const TaskListInstantTaskInput = ({
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`border-t border-b-[1px] border-r-[1px]`}
|
||||
className={`border-t border-b border-r`}
|
||||
style={{ borderColor: token.colorBorderSecondary }}
|
||||
>
|
||||
{isEdit ? (
|
||||
|
||||
@@ -149,10 +149,10 @@ const TaskListTable = ({
|
||||
const customBorderColor = themeMode === 'dark' && ' border-[#303030]';
|
||||
|
||||
const customHeaderColumnStyles = (key: string) =>
|
||||
`border px-2 text-left ${key === 'selector' && 'sticky left-0 z-10'} ${key === 'task' && `sticky left-[33px] z-10 after:content after:absolute after:top-0 after:-right-1 after:-z-10 after:h-[42px] after:w-1.5 after:bg-transparent ${scrollingTables[tableId] ? 'after:bg-gradient-to-r after:from-[rgba(0,0,0,0.12)] after:to-transparent' : ''}`} ${themeMode === 'dark' ? 'bg-[#1d1d1d] border-[#303030]' : 'bg-[#fafafa]'}`;
|
||||
`border px-2 text-left ${key === 'selector' && 'sticky left-0 z-10'} ${key === 'task' && `sticky left-[33px] z-10 after:content after:absolute after:top-0 after:-right-1 after:-z-10 after:h-[42px] after:w-1.5 after:bg-transparent ${scrollingTables[tableId] ? 'after:bg-linear-to-r after:from-[rgba(0,0,0,0.12)] after:to-transparent' : ''}`} ${themeMode === 'dark' ? 'bg-[#1d1d1d] border-[#303030]' : 'bg-[#fafafa]'}`;
|
||||
|
||||
const customBodyColumnStyles = (key: string) =>
|
||||
`border px-2 ${key === 'selector' && 'sticky left-0 z-10'} ${key === 'task' && `sticky left-[33px] z-10 after:content after:absolute after:top-0 after:-right-1 after:-z-10 after:min-h-[40px] after:w-1.5 after:bg-transparent ${scrollingTables[tableId] ? 'after:bg-gradient-to-r after:from-[rgba(0,0,0,0.12)] after:to-transparent' : ''}`} ${themeMode === 'dark' ? 'bg-[#141414] border-[#303030]' : 'bg-white'}`;
|
||||
`border px-2 ${key === 'selector' && 'sticky left-0 z-10'} ${key === 'task' && `sticky left-[33px] z-10 after:content after:absolute after:top-0 after:-right-1 after:-z-10 after:min-h-[40px] after:w-1.5 after:bg-transparent ${scrollingTables[tableId] ? 'after:bg-linear-to-r after:from-[rgba(0,0,0,0.12)] after:to-transparent' : ''}`} ${themeMode === 'dark' ? 'bg-[#141414] border-[#303030]' : 'bg-white'}`;
|
||||
|
||||
// function to render the column content based on column key
|
||||
const renderColumnContent = (
|
||||
|
||||
@@ -185,7 +185,7 @@ const TaskListTableWrapper = ({
|
||||
</Flex>
|
||||
<Collapse
|
||||
collapsible="header"
|
||||
className="border-l-[4px]"
|
||||
className="border-l-4"
|
||||
bordered={false}
|
||||
ghost={true}
|
||||
expandIcon={() => null}
|
||||
|
||||
@@ -47,10 +47,10 @@ const StatusGroupTables = ({ group }: { group: ITaskListGroup }) => {
|
||||
{/* bulk action container ==> used tailwind to recreate the animation */}
|
||||
{createPortal(
|
||||
<div
|
||||
className={`absolute bottom-0 left-1/2 z-20 -translate-x-1/2 ${selectedTaskIdsList.length > 0 ? 'overflow-visible' : 'h-[1px] overflow-hidden'}`}
|
||||
className={`absolute bottom-0 left-1/2 z-20 -translate-x-1/2 ${selectedTaskIdsList.length > 0 ? 'overflow-visible' : 'h-px overflow-hidden'}`}
|
||||
>
|
||||
<div
|
||||
className={`${selectedTaskIdsList.length > 0 ? 'bottom-4' : 'bottom-0'} absolute left-1/2 z-[999] -translate-x-1/2 transition-all duration-300`}
|
||||
className={`${selectedTaskIdsList.length > 0 ? 'bottom-4' : 'bottom-0'} absolute left-1/2 z-999 -translate-x-1/2 transition-all duration-300`}
|
||||
>
|
||||
<BulkTasksActionContainer
|
||||
selectedTaskIds={selectedTaskIdsList}
|
||||
|
||||
@@ -133,10 +133,10 @@ const TaskListTable = ({
|
||||
const customBorderColor = themeMode === 'dark' && ' border-[#303030]';
|
||||
|
||||
const customHeaderColumnStyles = (key: string) =>
|
||||
`border px-2 text-left ${key === 'selector' && 'sticky left-0 z-10'} ${key === 'task' && `sticky left-[33px] z-10 after:content after:absolute after:top-0 after:-right-1 after:-z-10 after:h-[42px] after:w-1.5 after:bg-transparent ${scrollingTables[tableId] ? 'after:bg-gradient-to-r after:from-[rgba(0,0,0,0.12)] after:to-transparent' : ''}`} ${themeMode === 'dark' ? 'bg-[#1d1d1d] border-[#303030]' : 'bg-[#fafafa]'}`;
|
||||
`border px-2 text-left ${key === 'selector' && 'sticky left-0 z-10'} ${key === 'task' && `sticky left-[33px] z-10 after:content after:absolute after:top-0 after:-right-1 after:-z-10 after:h-[42px] after:w-1.5 after:bg-transparent ${scrollingTables[tableId] ? 'after:bg-linear-to-r after:from-[rgba(0,0,0,0.12)] after:to-transparent' : ''}`} ${themeMode === 'dark' ? 'bg-[#1d1d1d] border-[#303030]' : 'bg-[#fafafa]'}`;
|
||||
|
||||
const customBodyColumnStyles = (key: string) =>
|
||||
`border px-2 ${key === 'selector' && 'sticky left-0 z-10'} ${key === 'task' && `sticky left-[33px] z-10 after:content after:absolute after:top-0 after:-right-1 after:-z-10 after:min-h-[40px] after:w-1.5 after:bg-transparent ${scrollingTables[tableId] ? 'after:bg-gradient-to-r after:from-[rgba(0,0,0,0.12)] after:to-transparent' : ''}`} ${themeMode === 'dark' ? 'bg-[#141414] border-[#303030]' : 'bg-white'}`;
|
||||
`border px-2 ${key === 'selector' && 'sticky left-0 z-10'} ${key === 'task' && `sticky left-[33px] z-10 after:content after:absolute after:top-0 after:-right-1 after:-z-10 after:min-h-[40px] after:w-1.5 after:bg-transparent ${scrollingTables[tableId] ? 'after:bg-linear-to-r after:from-[rgba(0,0,0,0.12)] after:to-transparent' : ''}`} ${themeMode === 'dark' ? 'bg-[#141414] border-[#303030]' : 'bg-white'}`;
|
||||
|
||||
// function to render the column content based on column key
|
||||
const renderColumnContent = (
|
||||
|
||||
@@ -194,7 +194,7 @@ const TaskListTableWrapper = ({
|
||||
</Flex>
|
||||
<Collapse
|
||||
collapsible="header"
|
||||
className="border-l-[4px]"
|
||||
className="border-l-4"
|
||||
bordered={false}
|
||||
ghost={true}
|
||||
expandIcon={() => null}
|
||||
|
||||
@@ -39,7 +39,7 @@ const TaskCell = ({
|
||||
return (
|
||||
<button
|
||||
onClick={() => toggleTaskExpansion(taskId)}
|
||||
className="hover flex h-4 w-4 items-center justify-center rounded text-[12px] hover:border hover:border-[#5587f5] hover:bg-[#d0eefa54]"
|
||||
className="hover flex h-4 w-4 items-center justify-center rounded-sm text-[12px] hover:border hover:border-[#5587f5] hover:bg-[#d0eefa54]"
|
||||
>
|
||||
{expandedTasks.includes(taskId) ? <DownOutlined /> : <RightOutlined />}
|
||||
</button>
|
||||
@@ -51,7 +51,7 @@ const TaskCell = ({
|
||||
return !isSubTask ? (
|
||||
<button
|
||||
onClick={() => toggleTaskExpansion(taskId)}
|
||||
className="hover flex h-4 w-4 items-center justify-center rounded text-[12px] hover:border hover:border-[#5587f5] hover:bg-[#d0eefa54]"
|
||||
className="hover flex h-4 w-4 items-center justify-center rounded-sm text-[12px] hover:border hover:border-[#5587f5] hover:bg-[#d0eefa54]"
|
||||
>
|
||||
{expandedTasks.includes(taskId) ? <DownOutlined /> : <RightOutlined />}
|
||||
</button>
|
||||
|
||||
@@ -99,7 +99,7 @@ const BoardSectionCardContainer = ({
|
||||
<Flex
|
||||
gap={16}
|
||||
align="flex-start"
|
||||
className="max-w-screen max-h-[620px] min-h-[620px] overflow-x-scroll p-[1px]"
|
||||
className="max-w-screen max-h-[620px] min-h-[620px] overflow-x-scroll p-px"
|
||||
>
|
||||
<SortableContext
|
||||
items={datasource?.map((section: any) => section.id)}
|
||||
|
||||
@@ -148,7 +148,7 @@ const BoardCreateSubtaskCard = ({
|
||||
cursor: 'pointer',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
className={`outline-1 ${themeWiseColor('outline-[#edeae9]', 'outline-[#6a696a]', themeMode)} hover:outline`}
|
||||
className={`outline-1 ${themeWiseColor('outline-[#edeae9]', 'outline-[#6a696a]', themeMode)} hover:outline-solid`}
|
||||
onBlur={handleCancelNewCard}
|
||||
>
|
||||
<Input
|
||||
|
||||
@@ -207,7 +207,7 @@ const BoardViewCreateTaskCard = ({
|
||||
cursor: 'pointer',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
className={`outline-1 ${themeWiseColor('outline-[#edeae9]', 'outline-[#6a696a]', themeMode)} hover:outline`}
|
||||
className={`outline-1 ${themeWiseColor('outline-[#edeae9]', 'outline-[#6a696a]', themeMode)} hover:outline-solid`}
|
||||
onBlur={handleCancelNewCard}
|
||||
>
|
||||
<Input
|
||||
|
||||
@@ -271,7 +271,7 @@ const BoardViewTaskCard = ({ task, sectionId }: IBoardViewTaskCardProps) => {
|
||||
cursor: 'grab',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
className={`group outline-1 ${themeWiseColor('outline-[#edeae9]', 'outline-[#6a696a]', themeMode)} hover:outline board-task-card`}
|
||||
className={`group outline-1 ${themeWiseColor('outline-[#edeae9]', 'outline-[#6a696a]', themeMode)} hover:outline-solid board-task-card`}
|
||||
data-id={task.id}
|
||||
data-dragging={isDragging ? "true" : "false"}
|
||||
>
|
||||
|
||||
@@ -103,7 +103,7 @@ const TaskByMembersTable = () => {
|
||||
|
||||
return (
|
||||
<div className="memberList-container min-h-0 max-w-full overflow-x-auto">
|
||||
<table className="w-full min-w-max border-collapse rounded">
|
||||
<table className="w-full min-w-max border-collapse rounded-sm">
|
||||
<thead
|
||||
style={{
|
||||
height: 42,
|
||||
|
||||
@@ -74,7 +74,7 @@ const TaskListTaskCell = ({
|
||||
return (
|
||||
<button
|
||||
onClick={() => handleToggleExpansion(taskId)}
|
||||
className="hover flex h-4 w-4 items-center justify-center rounded text-[12px] hover:border hover:border-[#5587f5] hover:bg-[#d0eefa54]"
|
||||
className="hover flex h-4 w-4 items-center justify-center rounded-sm text-[12px] hover:border hover:border-[#5587f5] hover:bg-[#d0eefa54]"
|
||||
>
|
||||
{task.show_sub_tasks ? <DownOutlined /> : <RightOutlined />}
|
||||
</button>
|
||||
@@ -90,7 +90,7 @@ const TaskListTaskCell = ({
|
||||
return (
|
||||
<button
|
||||
onClick={() => handleToggleExpansion(taskId)}
|
||||
className="hover flex h-4 w-4 items-center justify-center rounded text-[12px] hover:border hover:border-[#5587f5] hover:bg-[#d0eefa54]"
|
||||
className="hover flex h-4 w-4 items-center justify-center rounded-sm text-[12px] hover:border hover:border-[#5587f5] hover:bg-[#d0eefa54]"
|
||||
>
|
||||
{task.show_sub_tasks ? <DownOutlined /> : <RightOutlined />}
|
||||
</button>
|
||||
@@ -100,7 +100,7 @@ const TaskListTaskCell = ({
|
||||
return !isSubTask ? (
|
||||
<button
|
||||
onClick={() => handleToggleExpansion(taskId)}
|
||||
className="hover flex h-4 w-4 items-center justify-center rounded text-[12px] hover:border hover:border-[#5587f5] hover:bg-[#d0eefa54] open-task-button"
|
||||
className="hover flex h-4 w-4 items-center justify-center rounded-sm text-[12px] hover:border hover:border-[#5587f5] hover:bg-[#d0eefa54] open-task-button"
|
||||
>
|
||||
{task.show_sub_tasks ? <DownOutlined /> : <RightOutlined />}
|
||||
</button>
|
||||
|
||||
@@ -178,13 +178,13 @@ const CustomCell = React.memo(({
|
||||
switch (column.key) {
|
||||
case 'STATUS':
|
||||
return (
|
||||
<div className="px-2 py-1 text-xs rounded bg-gray-100 text-gray-600">
|
||||
<div className="px-2 py-1 text-xs rounded-sm bg-gray-100 text-gray-600">
|
||||
{task.status_name || task.status || 'To Do'}
|
||||
</div>
|
||||
);
|
||||
case 'PRIORITY':
|
||||
return (
|
||||
<div className="px-2 py-1 text-xs rounded bg-gray-100 text-gray-600">
|
||||
<div className="px-2 py-1 text-xs rounded-sm bg-gray-100 text-gray-600">
|
||||
{task.priority_name || task.priority || 'Medium'}
|
||||
</div>
|
||||
);
|
||||
@@ -213,13 +213,13 @@ const CustomCell = React.memo(({
|
||||
switch (column.key) {
|
||||
case 'STATUS':
|
||||
return (
|
||||
<div className="px-2 py-1 text-xs rounded bg-red-100 text-red-600">
|
||||
<div className="px-2 py-1 text-xs rounded-sm bg-red-100 text-red-600">
|
||||
{task.status_name || task.status || 'Error'}
|
||||
</div>
|
||||
);
|
||||
case 'PRIORITY':
|
||||
return (
|
||||
<div className="px-2 py-1 text-xs rounded bg-red-100 text-red-600">
|
||||
<div className="px-2 py-1 text-xs rounded-sm bg-red-100 text-red-600">
|
||||
{task.priority_name || task.priority || 'Error'}
|
||||
</div>
|
||||
);
|
||||
@@ -1483,7 +1483,7 @@ const TaskListTable: React.FC<TaskListTableProps> = ({ taskList, tableId, active
|
||||
case 'TASK':
|
||||
return `sticky left-[48px] z-10 after:content after:absolute after:top-0 after:-right-1 after:h-full after:-z-10 after:w-1.5 after:bg-transparent ${
|
||||
scrollingTables[tableId]
|
||||
? 'after:bg-gradient-to-r after:from-[rgba(0,0,0,0.12)] after:to-transparent'
|
||||
? 'after:bg-linear-to-r after:from-[rgba(0,0,0,0.12)] after:to-transparent'
|
||||
: ''
|
||||
}`;
|
||||
default:
|
||||
@@ -1886,7 +1886,7 @@ const TaskListTable: React.FC<TaskListTableProps> = ({ taskList, tableId, active
|
||||
dropAnimation={null} // Disable drop animation
|
||||
>
|
||||
{dragActiveId ? (
|
||||
<div className="bg-white dark:bg-gray-800 shadow-lg rounded border p-2 opacity-90">
|
||||
<div className="bg-white dark:bg-gray-800 shadow-lg rounded-sm border p-2 opacity-90">
|
||||
<span className="text-sm font-medium">Moving task...</span>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
@@ -409,7 +409,7 @@
|
||||
// i >= startOffset &&
|
||||
// i < startOffset + projectDuration
|
||||
// ? 'empty-cell-hide'
|
||||
// : `empty-cell rounded-sm outline-1 hover:outline ${themeMode === 'dark' ? 'outline-white/25' : 'outline-black/25'}`
|
||||
// : `empty-cell rounded-xs outline-1 hover:outline-solid ${themeMode === 'dark' ? 'outline-white/25' : 'outline-black/25'}`
|
||||
// }
|
||||
// key={i}
|
||||
// style={{
|
||||
@@ -687,7 +687,7 @@ export default Grant;
|
||||
// style={{
|
||||
// background: themeWiseColor('#fff', '#141414', themeMode),
|
||||
// }}
|
||||
// className={`after:content relative z-10 after:absolute after:-right-1 after:top-0 after:-z-10 after:h-full after:w-1.5 after:bg-transparent after:bg-gradient-to-r after:from-[rgba(0,0,0,0.12)] after:to-transparent`}
|
||||
// className={`after:content relative z-10 after:absolute after:-right-1 after:top-0 after:-z-10 after:h-full after:w-1.5 after:bg-transparent after:bg-linear-to-r after:from-[rgba(0,0,0,0.12)] after:to-transparent`}
|
||||
// >
|
||||
// <GranttMembersTable
|
||||
// members={members}
|
||||
@@ -874,7 +874,7 @@ export default Grant;
|
||||
// i >= startOffset &&
|
||||
// i < startOffset + projectDuration
|
||||
// ? 'empty-cell-hide'
|
||||
// : `empty-cell rounded-sm outline-1 hover:outline ${themeMode === 'dark' ? 'outline-white/10' : 'outline-black/10'}`
|
||||
// : `empty-cell rounded-xs outline-1 hover:outline-solid ${themeMode === 'dark' ? 'outline-white/10' : 'outline-black/10'}`
|
||||
// }
|
||||
// key={i}
|
||||
// style={{
|
||||
|
||||
@@ -1,8 +1,29 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ['./src/**/*.{js,jsx,ts,tsx}'],
|
||||
content: [
|
||||
"./src/**/*.{js,jsx,ts,tsx}",
|
||||
"./public/index.html"
|
||||
],
|
||||
theme: {
|
||||
extend: {},
|
||||
extend: {
|
||||
fontFamily: {
|
||||
sans: [
|
||||
'-apple-system',
|
||||
'BlinkMacSystemFont',
|
||||
'"Inter"',
|
||||
'Roboto',
|
||||
'"Helvetica Neue"',
|
||||
'Arial',
|
||||
'"Noto Sans"',
|
||||
'sans-serif',
|
||||
'"Apple Color Emoji"',
|
||||
'"Segoe UI Emoji"',
|
||||
'"Segoe UI Symbol"',
|
||||
'"Noto Color Emoji"'
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
darkMode: 'class',
|
||||
}
|
||||
Reference in New Issue
Block a user