ikoncomponents 1.2.2 → 1.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/styles.css
CHANGED
|
@@ -719,9 +719,6 @@
|
|
|
719
719
|
.w-12 {
|
|
720
720
|
width: calc(var(--spacing) * 12);
|
|
721
721
|
}
|
|
722
|
-
.w-20 {
|
|
723
|
-
width: calc(var(--spacing) * 20);
|
|
724
|
-
}
|
|
725
722
|
.w-32 {
|
|
726
723
|
width: calc(var(--spacing) * 32);
|
|
727
724
|
}
|
|
@@ -752,15 +749,9 @@
|
|
|
752
749
|
.w-\[100px\] {
|
|
753
750
|
width: 100px;
|
|
754
751
|
}
|
|
755
|
-
.w-\[200px\] {
|
|
756
|
-
width: 200px;
|
|
757
|
-
}
|
|
758
752
|
.w-\[220px\] {
|
|
759
753
|
width: 220px;
|
|
760
754
|
}
|
|
761
|
-
.w-\[300px\] {
|
|
762
|
-
width: 300px;
|
|
763
|
-
}
|
|
764
755
|
.w-auto {
|
|
765
756
|
width: auto;
|
|
766
757
|
}
|
|
@@ -1488,9 +1479,6 @@
|
|
|
1488
1479
|
.py-4 {
|
|
1489
1480
|
padding-block: calc(var(--spacing) * 4);
|
|
1490
1481
|
}
|
|
1491
|
-
.py-5 {
|
|
1492
|
-
padding-block: calc(var(--spacing) * 5);
|
|
1493
|
-
}
|
|
1494
1482
|
.py-6 {
|
|
1495
1483
|
padding-block: calc(var(--spacing) * 6);
|
|
1496
1484
|
}
|
|
@@ -2543,16 +2531,6 @@
|
|
|
2543
2531
|
}
|
|
2544
2532
|
}
|
|
2545
2533
|
}
|
|
2546
|
-
.hover\:bg-muted\/30 {
|
|
2547
|
-
&:hover {
|
|
2548
|
-
@media (hover: hover) {
|
|
2549
|
-
background-color: var(--muted);
|
|
2550
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
2551
|
-
background-color: color-mix(in oklab, var(--muted) 30%, transparent);
|
|
2552
|
-
}
|
|
2553
|
-
}
|
|
2554
|
-
}
|
|
2555
|
-
}
|
|
2556
2534
|
.hover\:bg-muted\/50 {
|
|
2557
2535
|
&:hover {
|
|
2558
2536
|
@media (hover: hover) {
|
|
@@ -2874,11 +2852,6 @@
|
|
|
2874
2852
|
opacity: 50%;
|
|
2875
2853
|
}
|
|
2876
2854
|
}
|
|
2877
|
-
.disabled\:opacity-100 {
|
|
2878
|
-
&:disabled {
|
|
2879
|
-
opacity: 100%;
|
|
2880
|
-
}
|
|
2881
|
-
}
|
|
2882
2855
|
.in-data-\[side\=left\]\:cursor-w-resize {
|
|
2883
2856
|
:where(*[data-side="left"]) & {
|
|
2884
2857
|
cursor: w-resize;
|
package/package.json
CHANGED
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
export interface ResourceTableProps {
|
|
3
|
-
resourceDataWithAllocation: any[];
|
|
4
|
-
userMaps: {
|
|
5
|
-
userDetailsMap: {
|
|
6
|
-
[key: string]: {
|
|
7
|
-
name: string;
|
|
8
|
-
};
|
|
9
|
-
};
|
|
10
|
-
rolesMap: {
|
|
11
|
-
[key: string]: {
|
|
12
|
-
roleId: string;
|
|
13
|
-
roleName: string;
|
|
14
|
-
};
|
|
15
|
-
};
|
|
16
|
-
};
|
|
17
|
-
monthsRange: string[];
|
|
18
|
-
}
|
|
19
|
-
export declare const ResourceTable: React.FC<ResourceTableProps>;
|
|
@@ -1,89 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
/* eslint-disable react-hooks/preserve-manual-memoization */
|
|
3
|
-
import React, { useMemo } from 'react';
|
|
4
|
-
import { Button } from "../../shadcn/button";
|
|
5
|
-
import { Plus, Trash2 } from 'lucide-react';
|
|
6
|
-
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../shadcn/select";
|
|
7
|
-
import { Input } from "../../shadcn/input";
|
|
8
|
-
import { DataTable } from '../data-table';
|
|
9
|
-
export const ResourceTable = ({ resourceDataWithAllocation, userMaps, monthsRange, }) => {
|
|
10
|
-
const [data, setData] = React.useState(resourceDataWithAllocation);
|
|
11
|
-
const calculateTotalFTE = (row) => {
|
|
12
|
-
if (!row.detailedAllocation)
|
|
13
|
-
return 0;
|
|
14
|
-
return Object.values(row.detailedAllocation).reduce((sum, value) => sum + (parseFloat(value) || 0), 0);
|
|
15
|
-
};
|
|
16
|
-
const handleAddResource = (taskId) => {
|
|
17
|
-
var _a;
|
|
18
|
-
const newResource = {
|
|
19
|
-
id: `new-${Date.now()}`,
|
|
20
|
-
taskId,
|
|
21
|
-
taskName: ((_a = data.find(r => r.taskId === taskId)) === null || _a === void 0 ? void 0 : _a.taskName) || '',
|
|
22
|
-
userId: '',
|
|
23
|
-
roleId: '',
|
|
24
|
-
detailedAllocation: monthsRange.reduce((acc, month) => (Object.assign(Object.assign({}, acc), { [month]: 0 })), {}),
|
|
25
|
-
};
|
|
26
|
-
setData([...data, newResource]);
|
|
27
|
-
};
|
|
28
|
-
const handleDeleteResource = (resourceId) => {
|
|
29
|
-
setData(data.filter(resource => resource.id !== resourceId));
|
|
30
|
-
};
|
|
31
|
-
const handleUpdateAllocation = (resourceId, month, value) => {
|
|
32
|
-
setData(data.map(resource => {
|
|
33
|
-
if (resource.id === resourceId) {
|
|
34
|
-
return Object.assign(Object.assign({}, resource), { detailedAllocation: Object.assign(Object.assign({}, resource.detailedAllocation), { [month]: parseFloat(value) || 0 }) });
|
|
35
|
-
}
|
|
36
|
-
return resource;
|
|
37
|
-
}));
|
|
38
|
-
};
|
|
39
|
-
const columns = useMemo(() => [
|
|
40
|
-
{
|
|
41
|
-
accessorKey: "taskName",
|
|
42
|
-
header: "Task Name",
|
|
43
|
-
cell: ({ row }) => row.original.taskName,
|
|
44
|
-
},
|
|
45
|
-
{
|
|
46
|
-
accessorKey: "userId",
|
|
47
|
-
header: "Employee Name",
|
|
48
|
-
cell: ({ row }) => {
|
|
49
|
-
var _a;
|
|
50
|
-
return (_jsxs(Select, { value: row.original.userId, onValueChange: (value) => {
|
|
51
|
-
setData(data.map(resource => resource.id === row.original.id
|
|
52
|
-
? Object.assign(Object.assign({}, resource), { userId: value }) : resource));
|
|
53
|
-
}, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Select employee", children: ((_a = userMaps.userDetailsMap[row.original.userId]) === null || _a === void 0 ? void 0 : _a.name) || "Select employee" }) }), _jsx(SelectContent, { children: Object.entries(userMaps.userDetailsMap).map(([id, user]) => (_jsx(SelectItem, { value: id, children: user.name }, id))) })] }));
|
|
54
|
-
},
|
|
55
|
-
},
|
|
56
|
-
{
|
|
57
|
-
accessorKey: "roleId",
|
|
58
|
-
header: "Role",
|
|
59
|
-
cell: ({ row }) => {
|
|
60
|
-
var _a;
|
|
61
|
-
return (_jsxs(Select, { value: row.original.roleId, onValueChange: (value) => {
|
|
62
|
-
setData(data.map(resource => resource.id === row.original.id
|
|
63
|
-
? Object.assign(Object.assign({}, resource), { roleId: value }) : resource));
|
|
64
|
-
}, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Select role", children: ((_a = userMaps.rolesMap[row.original.roleId]) === null || _a === void 0 ? void 0 : _a.roleName) || "Select role" }) }), _jsx(SelectContent, { children: Object.entries(userMaps.rolesMap).map(([id, role]) => (_jsx(SelectItem, { value: id, children: role.roleName }, id))) })] }));
|
|
65
|
-
},
|
|
66
|
-
},
|
|
67
|
-
{
|
|
68
|
-
accessorKey: "totalFTE",
|
|
69
|
-
header: "Total FTE",
|
|
70
|
-
cell: ({ row }) => calculateTotalFTE(row.original).toFixed(2),
|
|
71
|
-
},
|
|
72
|
-
...monthsRange.map(month => ({
|
|
73
|
-
accessorKey: `detailedAllocation.${month}`,
|
|
74
|
-
header: month.replace('_', ' '),
|
|
75
|
-
cell: ({ row }) => (_jsx(Input, { type: "number", min: "0", max: "1", step: "0.1", value: row.original.detailedAllocation[month] || 0, onChange: (e) => handleUpdateAllocation(row.original.id, month, e.target.value), className: "w-20" })),
|
|
76
|
-
})),
|
|
77
|
-
{
|
|
78
|
-
id: "actions",
|
|
79
|
-
cell: ({ row }) => (_jsxs("div", { className: "flex gap-2 justify-end", children: [_jsx(Button, { variant: "ghost", size: "icon", onClick: () => handleAddResource(row.original.taskId), children: _jsx(Plus, { className: "h-4 w-4" }) }), _jsx(Button, { variant: "ghost", size: "icon", onClick: () => handleDeleteResource(row.original.id), children: _jsx(Trash2, { className: "h-4 w-4" }) })] })),
|
|
80
|
-
},
|
|
81
|
-
], [data, monthsRange, userMaps]);
|
|
82
|
-
return (_jsx(DataTable, { columns: columns, data: data, extraParams: {
|
|
83
|
-
defaultGroups: ["taskName"],
|
|
84
|
-
grouping: true,
|
|
85
|
-
sorting: true,
|
|
86
|
-
header: true,
|
|
87
|
-
paginationBar: true,
|
|
88
|
-
} }));
|
|
89
|
-
};
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
interface ResourceTableProps {
|
|
3
|
-
resourceDataWithAllocation: any[];
|
|
4
|
-
userMaps: UserMaps;
|
|
5
|
-
monthsRange: string[];
|
|
6
|
-
}
|
|
7
|
-
interface UserMaps {
|
|
8
|
-
userDetailsMap: {
|
|
9
|
-
[key: string]: {
|
|
10
|
-
name: string;
|
|
11
|
-
};
|
|
12
|
-
};
|
|
13
|
-
rolesMap: {
|
|
14
|
-
[key: string]: {
|
|
15
|
-
roleId: string;
|
|
16
|
-
roleName: string;
|
|
17
|
-
};
|
|
18
|
-
};
|
|
19
|
-
}
|
|
20
|
-
export declare const ResourceTable: React.FC<ResourceTableProps>;
|
|
21
|
-
export {};
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { Card, CardContent } from "../../shadcn/card";
|
|
3
|
-
import { Input } from "../../shadcn/input";
|
|
4
|
-
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../shadcn/select";
|
|
5
|
-
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../shadcn/table";
|
|
6
|
-
import { ChevronDown, ChevronRight } from "lucide-react";
|
|
7
|
-
import * as React from "react";
|
|
8
|
-
import { useFormContext } from "react-hook-form";
|
|
9
|
-
const groupResourcesByTask = (resources) => {
|
|
10
|
-
const groupedMap = resources.reduce((acc, resource) => {
|
|
11
|
-
const taskId = resource.taskId;
|
|
12
|
-
if (!acc.has(taskId)) {
|
|
13
|
-
acc.set(taskId, {
|
|
14
|
-
taskId,
|
|
15
|
-
taskName: resource.taskName,
|
|
16
|
-
resources: []
|
|
17
|
-
});
|
|
18
|
-
}
|
|
19
|
-
acc.get(taskId).resources.push(resource);
|
|
20
|
-
return acc;
|
|
21
|
-
}, new Map());
|
|
22
|
-
return Array.from(groupedMap.values());
|
|
23
|
-
};
|
|
24
|
-
export const ResourceTable = ({ resourceDataWithAllocation, userMaps, monthsRange }) => {
|
|
25
|
-
const { setValue } = useFormContext();
|
|
26
|
-
const [expandedTasks, setExpandedTasks] = React.useState(new Set());
|
|
27
|
-
const groupedResources = groupResourcesByTask(resourceDataWithAllocation);
|
|
28
|
-
const toggleTask = (taskId) => {
|
|
29
|
-
setExpandedTasks((prev) => {
|
|
30
|
-
const newSet = new Set(prev);
|
|
31
|
-
newSet.has(taskId) ? newSet.delete(taskId) : newSet.add(taskId);
|
|
32
|
-
return newSet;
|
|
33
|
-
});
|
|
34
|
-
};
|
|
35
|
-
return (_jsx(Card, { className: "p-0 bg-background", children: _jsx(CardContent, { className: "p-0", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { className: "w-[300px] py-5", children: "Task Name" }), _jsx(TableHead, { className: "w-[200px] py-5", children: "Employee Name" }), _jsx(TableHead, { className: "w-[200px] py-5", children: "Role" }), monthsRange.map((month) => (_jsx(TableHead, { className: "w-[100px] py-5", children: month.replace("_", " ") }, month)))] }) }), _jsx(TableBody, { children: groupedResources.map((group) => (_jsxs(React.Fragment, { children: [_jsx(TableRow, { className: "cursor-pointer hover:bg-accent", onClick: () => toggleTask(group.taskId), children: _jsx(TableCell, { colSpan: 3 + monthsRange.length, children: _jsxs("div", { className: "flex items-center gap-2", children: [expandedTasks.has(group.taskId) ? _jsx(ChevronDown, { className: "h-4 w-4 text-primary" }) : _jsx(ChevronRight, { className: "h-4 w-4 text-primary" }), _jsx("span", { className: "font-medium", children: group.taskName })] }) }) }), expandedTasks.has(group.taskId) && group.resources.map((resource) => (_jsxs(TableRow, { className: "hover:bg-muted/30", children: [_jsx(TableCell, { className: "pl-8", children: _jsx(Input, { value: resource.taskName, disabled: true, className: "w-full bg-transparent border-0 px-0 disabled:opacity-100" }) }), _jsx(TableCell, { children: _jsxs(Select, { defaultValue: resource.resourceId, children: [_jsx(SelectTrigger, { className: "w-full bg-secondary dark:bg-secondary", children: _jsx(SelectValue, { placeholder: "Select employee" }) }), _jsx(SelectContent, { children: Object.entries(userMaps.userDetailsMap).map(([id, user]) => (_jsx(SelectItem, { value: id, children: user.name }, id))) })] }) }), _jsx(TableCell, { children: _jsxs(Select, { defaultValue: resource.gradeId.toString(), children: [_jsx(SelectTrigger, { className: "w-full bg-secondary dark:bg-secondary", children: _jsx(SelectValue, { placeholder: "Select role" }) }), _jsx(SelectContent, { children: Object.entries(userMaps.rolesMap).map(([id, role]) => (_jsx(SelectItem, { value: id, children: role.roleName }, id))) })] }) }), monthsRange.map((month) => (_jsx(TableCell, { children: _jsx(Input, { type: "number", min: "0", max: "1", step: "0.01", defaultValue: resource.allocation[month] || 0, className: "w-20" }) }, month)))] }, `${resource.taskId}-${resource.resourceId}`)))] }, group.taskId))) })] }) }) }));
|
|
36
|
-
};
|