Skip to content

Commit 94cc20b

Browse files
edunzeredunzer
authored
Merge pull request #12 from edunzer/10-add-collapsible-filter-side-panel
10 add collapsible filter side panel
2 parents b9ef5da + 7fc545b commit 94cc20b

File tree

4 files changed

+224
-102
lines changed

4 files changed

+224
-102
lines changed

‎force-app/main/default/classes/ganttChart.cls‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
public with sharing class ganttChart {
22
@AuraEnabled
3-
public static Map<String, Object> getChartData(String recordId, String startTime, String endTime, Integer slotSize, List<String> filterProjects) {
3+
public static Map<String, Object> getChartData(String resourceId, String projectId, String startTime, String endTime, Integer slotSize) {
44
Map<String, Object> data = new Map<String, Object>();
55
try {
66
// Parse date ranges
@@ -13,12 +13,12 @@ public with sharing class ganttChart {
1313
'FROM Allocation__c WHERE Start_Date__c <= :endDate AND End_Date__c >= :startDate';
1414

1515
// Add filters dynamically
16-
if (!String.isEmpty(recordId)) {
17-
baseQuery += ' AND (Project__c = :recordId OR Resource__c = :recordId)';
18-
}
19-
if (filterProjects != null && !filterProjects.isEmpty()) {
20-
baseQuery += ' AND Project__c IN :filterProjects';
16+
if (!String.isEmpty(resourceId)) {
17+
baseQuery += ' AND Resource__c = :resourceId';
2118
}
19+
if (!String.isEmpty(projectId)) {
20+
baseQuery += ' AND Project__c = :projectId';
21+
}
2222

2323
// Add sorting and limit
2424
baseQuery += ' ORDER BY Resource__r.Name, Project__r.Name, Start_Date__c LIMIT 500';

‎force-app/main/default/lwc/gantt_chart/gantt_chart.css‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,18 @@
1+
.lwc-main-content {
2+
flex: 1;
3+
}
4+
5+
.lwc-filter-panel {
6+
width: 15%;
7+
transition: transform 0.3s ease;
8+
background: #f4f6f9;
9+
border-left: 1px solid #dddbda;
10+
}
11+
12+
.lwc-filter-panel-collapsed {
13+
display: none; /* Hide the panel when collapsed */
14+
}
15+
116
.lwc-datepicker {
217
display: inline-block;
318
}

‎force-app/main/default/lwc/gantt_chart/gantt_chart.html‎

Lines changed: 110 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<!-- Header Bar -->
55
<div class="slds-p-around_medium slds-border_bottom">
66
<div class="slds-grid slds-grid_align-spread slds-grid_vertical-align-center">
7-
7+
<!-- View Select, Date Range, Navigation -->
88
<!-- View Select (Far Left) -->
99
<div class="slds-col slds-grow-none">
1010
<lightning-combobox
@@ -16,7 +16,6 @@
1616
</lightning-combobox>
1717
</div>
1818
<!-- /View Select -->
19-
2019
<!-- Title (Date Range, Centered) -->
2120
<div class="slds-col slds-text-align_center slds-grid slds-grid_align-center slds-grid_vertical-align-center">
2221
<div class="slds-box slds-p-horizontal_small slds-m-right_small" style="border: 1px solid #747474; border-radius: 0.25rem; padding: 0 8px; line-height: 2rem;">
@@ -28,7 +27,6 @@
2827
</div>
2928
</div>
3029
<!-- /Title (Date Range) -->
31-
3230
<!-- Date Navigation (Far Right) -->
3331
<div class="slds-col slds-grow-none slds-grid slds-grid_align-end">
3432
<div class="slds-show_inline-block slds-m-right_small">
@@ -49,7 +47,7 @@
4947
</lightning-button-icon>
5048
</lightning-button-group>
5149
</div>
52-
<div class="slds-show_inline-block">
50+
<div class="slds-show_inline-block slds-m-right_small">
5351
<lightning-input
5452
label="Date"
5553
type="date"
@@ -60,85 +58,132 @@
6058
onchange={navigateToDay}>
6159
</lightning-input>
6260
</div>
61+
<div class="slds-show_inline-block slds-m-right_small">
62+
<lightning-button-icon
63+
icon-name="utility:filterList"
64+
variant="border-filled"
65+
onclick={toggleFilterPanel}>
66+
</lightning-button-icon>
67+
</div>
6368
</div>
6469
<!-- /Date Navigation -->
65-
6670
</div>
6771
</div>
6872
<!-- /Header Bar -->
69-
70-
<!-- Gantt Chart -->
71-
<div class="slds-scrollable_x">
72-
<div class="slds-p-around_medium lwc-chart_container">
73-
<!-- Timeline -->
74-
<div class="slds-grid lwc-timeline">
75-
<div
76-
if:false={isResourceView}
77-
class="slds-col slds-size_1-of-6 slds-align-bottom">
78-
<div class="slds-text-heading_medium slds-p-around_small">
79-
Resources
80-
</div>
81-
</div>
82-
<div class="slds-col">
83-
<div class="slds-grid">
84-
<template for:each={dates} for:item="date">
85-
<div
86-
key={date}
87-
class="slds-col lwc-timeline_month-container"
88-
style={date.style}>
89-
<div class="slds-grid">
90-
<div class="slds-col slds-has-flexi-truncate">
91-
<div
92-
class="lwc-timeline_month slds-p-around_xx-small slds-theme_shade slds-text-align_center slds-text-color_weak slds-text-body_small slds-m-horizontal_x-small slds-truncate">
93-
{date.name}
73+
<div class="slds-grid">
74+
<!-- Main Content (Gantt Chart) -->
75+
<div class="slds-col lwc-main-content">
76+
<div class="slds-scrollable_x">
77+
<div class="slds-p-around_medium lwc-chart_container">
78+
<!-- Timeline, Allocation Table -->
79+
<!-- Timeline -->
80+
<div class="slds-grid lwc-timeline">
81+
<div
82+
if:false={isResourceView}
83+
class="slds-col slds-size_1-of-6 slds-align-bottom">
84+
<div class="slds-text-heading_medium slds-p-around_small">
85+
Resources
86+
</div>
87+
</div>
88+
<div class="slds-col">
89+
<div class="slds-grid">
90+
<template for:each={dates} for:item="date">
91+
<div key={date} class="slds-col lwc-timeline_month-container" style={date.style}>
92+
<div class="slds-grid">
93+
<div class="slds-col slds-has-flexi-truncate">
94+
<div
95+
class="lwc-timeline_month slds-p-around_xx-small slds-theme_shade slds-text-align_center slds-text-color_weak slds-text-body_small slds-m-horizontal_x-small slds-truncate">
96+
{date.name}
97+
</div>
98+
</div>
9499
</div>
95-
</div>
96-
</div>
97-
<div class="slds-grid">
98-
<template for:each={date.days} for:item="day">
99-
<div key={day} class={day.class}>
100-
<div if:true={day.dayName}>{day.dayName}</div>
101-
<div>{day.label}</div>
100+
<div class="slds-grid">
101+
<template for:each={date.days} for:item="day">
102+
<div key={day} class={day.class}>
103+
<div if:true={day.dayName}>{day.dayName}</div>
104+
<div>{day.label}</div>
105+
</div>
106+
</template>
102107
</div>
103-
</template>
104-
</div>
108+
</div>
109+
</template>
105110
</div>
111+
</div>
112+
</div>
113+
<!-- /Timeline -->
114+
<!-- Allocation Table -->
115+
<!-- Resource Rows -->
116+
<template if:true={resources.length}>
117+
<template for:each={resources} for:item="resource">
118+
<c-gantt_chart_resource
119+
key={resource.Id}
120+
class="lwc-resource-component"
121+
is-resource-view={isResourceView}
122+
resource={resource}
123+
project-id={projectId}
124+
date-increment={view.slotSize}
125+
start-date={startDate}
126+
end-date={endDate}
127+
onrefresh={handleRefresh}>
128+
</c-gantt_chart_resource>
106129
</template>
130+
</template>
131+
<!-- /Resource Rows -->
132+
<!-- Empty State -->
133+
<div
134+
if:false={resources.length}
135+
class="slds-text-align_center slds-p-around_medium">
136+
<span class="slds-text-color_weak">No Resources to Show</span>
107137
</div>
138+
<!-- /Empty State -->
139+
<!-- /Allocation Table -->
108140
</div>
109141
</div>
110-
<!-- /Timeline -->
142+
</div>
143+
<!-- /Main Content -->
144+
<!-- Filter Panel -->
145+
<div if:true={isFilterPanelOpen} class="lwc-filter-panel">
146+
<div class="slds-p-around_medium slds-border_left">
147+
<h3 class="slds-text-heading_small slds-m-bottom_medium slds-m-top_medium">Filters</h3>
148+
149+
<!-- Resource Filter -->
150+
<template if:false={isResourceView}>
151+
<lightning-record-picker
152+
data-id="resourcePicker"
153+
label="Resource"
154+
placeholder="Search Resources..."
155+
object-api-name="Resource__c"
156+
onchange={handleResourceChange}>
157+
</lightning-record-picker>
158+
</template>
111159

112-
<!-- Allocation Table -->
113-
<!-- Resource Rows -->
114-
<template if:true={resources.length}>
115-
<template for:each={resources} for:item="resource">
116-
<c-gantt_chart_resource
117-
key={resource.Id}
118-
class="lwc-resource-component"
119-
is-resource-view={isResourceView}
120-
resource={resource}
121-
project-id={projectId}
122-
date-increment={view.slotSize}
123-
start-date={startDate}
124-
end-date={endDate}
125-
onrefresh={handleRefresh}>
126-
</c-gantt_chart_resource>
160+
<!-- Project Filter -->
161+
<template if:false={isProjectView}>
162+
<lightning-record-picker
163+
data-id="projectPicker"
164+
label="Project"
165+
placeholder="Search Projects..."
166+
object-api-name="Project__c"
167+
onchange={handleProjectChange}>
168+
</lightning-record-picker>
127169
</template>
128-
</template>
129-
<!-- /Resource Rows -->
130170

131-
<!-- Empty State -->
132-
<div
133-
if:false={resources.length}
134-
class="slds-text-align_center slds-p-around_medium">
135-
<span class="slds-text-color_weak">No Resources to Show</span>
171+
<lightning-button-group class="slds-m-top_medium">
172+
<lightning-button
173+
label="Apply Filters"
174+
variant="brand"
175+
onclick={applyFilters}>
176+
</lightning-button>
177+
<lightning-button
178+
label="Clear Filters"
179+
variant="neutral"
180+
onclick={clearFilters}>
181+
</lightning-button>
182+
</lightning-button-group>
136183
</div>
137-
<!-- /Empty State -->
138-
<!-- /Allocation Table -->
139184
</div>
185+
<!-- /Filter Panel -->
140186
</div>
141-
<!-- /Gantt Chart -->
142187
</div>
143188
</div>
144189
</template>

0 commit comments

Comments
 (0)