Skip to content

Commit b042307

Browse files
edunzeredunzer
authored
Merge pull request #5 from edunzer/2.0.0
2.0.0
2 parents ce83a28 + d6cd8e3 commit b042307

File tree

3 files changed

+99
-134
lines changed

3 files changed

+99
-134
lines changed

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

Lines changed: 4 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,11 @@
11
/* ideaListViewComponent.css */
22

3-
/* Remove border from the lightning card (main border around the list view) */
3+
/* Custom styles for the lightning-card */
44
.lightning-card {
5-
border: none;
6-
box-shadow: none; /* Remove any box-shadow that might appear as a border */
75
max-width: 100%; /* Ensure the card does not exceed its container */
86
overflow-x: auto; /* Allow horizontal scrolling if content overflows */
97
}
108

11-
/* Controlled table layout to handle long content */
12-
.slds-table {
13-
border: none; /* Remove border around the table */
14-
border-collapse: collapse; /* Ensure no gaps between cells */
15-
outline: none; /* Remove outline that might appear as a border */
16-
box-shadow: none; /* Remove any box-shadow that might appear as a border */
17-
table-layout: auto; /* Allow table to adjust column widths based on content */
18-
width: 100%; /* Make sure the table takes up the full width of its container */
19-
max-width: 100%; /* Prevent the table from exceeding its container */
20-
overflow-x: auto; /* Allow horizontal scrolling if content overflows */
21-
}
22-
23-
/* Ensure table cells wrap text and prevent overflow */
24-
.slds-table th, .slds-table td {
25-
border: none;
26-
word-wrap: break-word; /* Force text to wrap within the cell */
27-
white-space: normal; /* Allow wrapping within the cell */
28-
overflow: hidden; /* Hide any overflowing content */
29-
text-overflow: ellipsis; /* Add ellipsis (...) for overflowing text */
30-
padding: 8px; /* Add some padding for better readability */
31-
min-width: 10px; /* Set a minimum width for columns */
32-
max-width: 300px; /* Set a maximum width for columns to prevent overflow */
33-
}
34-
35-
/* Add border only to the bottom of the thead */
36-
.slds-table thead {
37-
border-bottom: 2px solid #DDDDDD;
38-
}
39-
40-
/* Add border under each row in tbody */
41-
.slds-table tbody td {
42-
border-bottom: 1px solid #DDDDDD;
43-
}
44-
45-
/* Optionally, remove the last row's bottom border */
46-
.slds-table tbody tr:last-child td {
47-
border-bottom: none;
48-
}
49-
509
/* Style the title of the lightning-card */
5110
.lightning-card__header {
5211
background-color: transparent; /* Remove background color */
@@ -56,9 +15,7 @@
5615
padding: 0; /* Adjust padding */
5716
}
5817

59-
/* Add margin to the span following the lightning-button-icon inside the same td */
60-
td > lightning-button-icon + span {
61-
margin-left: 8px; /* Adjust the spacing as needed */
62-
font-weight: bold; /* Optional: Make the count bold for better visibility */
18+
/* Optionally, you can add some margin or padding to the datatable if needed */
19+
.lightning-datatable {
20+
margin-top: 10px; /* Example of adding some margin above the table */
6321
}
64-

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

Lines changed: 9 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,76 +1,15 @@
1-
<!-- sldsValidatorIgnore -->
2-
<!-- sldsValidatorIgnore -->
31
<template>
42
<lightning-card title={title}>
53
<template if:true={ideas}>
6-
<table class="slds-table slds-table_bordered slds-table_cell-buffer">
7-
<thead>
8-
<tr class="slds-line-height_reset">
9-
<th scope="col">
10-
<div class="slds-truncate">Idea Name</div>
11-
</th>
12-
<th scope="col">
13-
<div class="slds-truncate">Product Tag</div>
14-
</th>
15-
<th scope="col">
16-
<div class="slds-truncate">Status</div>
17-
</th>
18-
<th scope="col">
19-
<div class="slds-truncate">Subject</div>
20-
</th>
21-
<th scope="col">
22-
<div class="slds-truncate">Up Vote</div>
23-
</th>
24-
<th scope="col">
25-
<div class="slds-truncate">Down Vote</div>
26-
</th>
27-
</tr>
28-
</thead>
29-
<tbody>
30-
<template for:each={ideas} for:item="ideaWrapper">
31-
<tr key={ideaWrapper.idea.Id}>
32-
<td>
33-
<a href={ideaWrapper.ideaUrl}>
34-
<div class="slds-truncate">{ideaWrapper.idea.Name}</div>
35-
</a>
36-
</td>
37-
<td>
38-
<a href={ideaWrapper.productTagUrl}>
39-
<div class="slds-truncate">{ideaWrapper.idea.Product_Tag__r.Name}</div>
40-
</a>
41-
</td>
42-
<td>
43-
<div class="slds-truncate">{ideaWrapper.idea.Status__c}</div>
44-
</td>
45-
<td>
46-
<div class="slds-truncate">{ideaWrapper.idea.Subject__c}</div>
47-
</td>
48-
<td>
49-
<lightning-button-icon
50-
icon-name="utility:like"
51-
alternative-text="Up Vote"
52-
title="Up Vote"
53-
variant={ideaWrapper.upVoteVariant}
54-
onclick={handleUpVote}
55-
data-id={ideaWrapper.idea.Id}>
56-
</lightning-button-icon>
57-
<span>{ideaWrapper.idea.Up__c}</span> <!-- Directly reference Up__c -->
58-
</td>
59-
<td>
60-
<lightning-button-icon
61-
icon-name="utility:dislike"
62-
alternative-text="Down Vote"
63-
title="Down Vote"
64-
variant={ideaWrapper.downVoteVariant}
65-
onclick={handleDownVote}
66-
data-id={ideaWrapper.idea.Id}>
67-
</lightning-button-icon>
68-
<span>{ideaWrapper.idea.Down__c}</span> <!-- Directly reference Down__c -->
69-
</td>
70-
</tr>
71-
</template>
72-
</tbody>
73-
</table>
4+
<lightning-datatable
5+
data={ideas}
6+
columns={columns}
7+
key-field="ideaId"
8+
onrowaction={handleRowAction}
9+
hide-checkbox-column="true"
10+
resize-column-disabled
11+
>
12+
</lightning-datatable>
7413
</template>
7514
<template if:true={error}>
7615
<div class="slds-text-color_error">

‎force-app/main/default/lwc/ideaListViewComponent/ideaListViewComponent.js‎

Lines changed: 86 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,65 @@ import handleDownVote from '@salesforce/apex/IdeaListViewComponentController.han
55
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
66
import { refreshApex } from '@salesforce/apex';
77

8+
const columns = [
9+
{
10+
label: 'Subject',
11+
fieldName: 'ideaUrl',
12+
type: 'url',
13+
typeAttributes: {
14+
label: { fieldName: 'subject' },
15+
},
16+
initialWidth: 380, // Adjust the width as needed
17+
},
18+
{
19+
label: 'Product',
20+
fieldName: 'productTagUrl',
21+
type: 'url',
22+
typeAttributes: {
23+
label: { fieldName: 'productTagName' },
24+
},
25+
},
26+
{ label: 'Status', fieldName: 'status', type: 'text' },
27+
{
28+
label: '',
29+
fieldName: 'upVoteCount',
30+
type: 'number',
31+
initialWidth: 10, // Adjust the width as needed
32+
cellAttributes: { alignment: 'center' }
33+
},
34+
{
35+
label: 'Up',
36+
type: 'button-icon',
37+
initialWidth: 60, // Adjust the width as needed
38+
typeAttributes: {
39+
iconName: 'utility:like',
40+
variant: { fieldName: 'upVoteVariant' },
41+
name: 'upvote',
42+
alternativeText: 'Up Vote',
43+
title: 'Up Vote',
44+
},
45+
},
46+
{
47+
label: '',
48+
fieldName: 'downVoteCount',
49+
type: 'number',
50+
initialWidth: 10, // Adjust the width as needed
51+
cellAttributes: { alignment: 'center' }
52+
},
53+
{
54+
label: 'Down',
55+
type: 'button-icon',
56+
initialWidth: 60, // Adjust the width as needed
57+
typeAttributes: {
58+
iconName: 'utility:dislike',
59+
variant: { fieldName: 'downVoteVariant' },
60+
name: 'downvote',
61+
alternativeText: 'Down Vote',
62+
title: 'Down Vote',
63+
},
64+
},
65+
];
66+
867
export default class IdeaListViewComponent extends LightningElement {
968
@api title = 'Most Popular Ideas'; // Title set from the property in the .js-meta.xml
1069
@api sourceType = 'All'; // Default to showing all ideas
@@ -13,6 +72,7 @@ export default class IdeaListViewComponent extends LightningElement {
1372
@api statusFilter = ''; // New status filter property
1473

1574
ideas = [];
75+
columns = columns;
1676
error;
1777
wiredIdeasResult;
1878

@@ -37,17 +97,17 @@ export default class IdeaListViewComponent extends LightningElement {
3797
}
3898
}
3999

40-
const ideaId = ideaWrapper.idea.Id;
41-
const productTagId = ideaWrapper.idea.Product_Tag__c;
42-
const submittedById = ideaWrapper.idea.Submitted_By__c;
43-
44100
return {
45-
...ideaWrapper,
101+
ideaId: ideaWrapper.idea.Id,
102+
ideaUrl: `/ideaexchange/s/idea/${ideaWrapper.idea.Id}`,
103+
productTagName: ideaWrapper.idea.Product_Tag__r.Name,
104+
productTagUrl: `/ideaexchange/s/adm-product-tag/${ideaWrapper.idea.Product_Tag__c}`,
105+
status: ideaWrapper.idea.Status__c,
106+
subject: ideaWrapper.idea.Subject__c, // Use subject as label for the URL
107+
upVoteCount: ideaWrapper.idea.Up__c, // Add upvote count
108+
downVoteCount: ideaWrapper.idea.Down__c, // Add downvote count
46109
upVoteVariant,
47110
downVoteVariant,
48-
ideaUrl: `/ideaexchange/s/idea/${ideaId}`,
49-
productTagUrl: `/ideaexchange/s/adm-product-tag/${productTagId}`,
50-
submittedByUrl: `/ideaexchange/s/profile/${submittedById}`
51111
};
52112
});
53113

@@ -60,10 +120,20 @@ export default class IdeaListViewComponent extends LightningElement {
60120
}
61121
}
62122

63-
handleUpVote(event) {
64-
const ideaId = event.currentTarget.dataset.id;
123+
handleRowAction(event) {
124+
const actionName = event.detail.action.name;
125+
const ideaId = event.detail.row.ideaId;
126+
127+
if (actionName === 'upvote') {
128+
this.handleUpVote(ideaId);
129+
} else if (actionName === 'downvote') {
130+
this.handleDownVote(ideaId);
131+
}
132+
}
133+
134+
handleUpVote(ideaId) {
65135
console.log('Upvote button clicked for Idea ID:', ideaId);
66-
const ideaWrapper = this.ideas.find(idea => idea.idea.Id === ideaId);
136+
const ideaWrapper = this.ideas.find(idea => idea.ideaId === ideaId);
67137
const initialVoteType = ideaWrapper && ideaWrapper.userVote ? ideaWrapper.userVote.Type__c : null;
68138

69139
handleUpVote({ ideaId })
@@ -88,10 +158,9 @@ export default class IdeaListViewComponent extends LightningElement {
88158
});
89159
}
90160

91-
handleDownVote(event) {
92-
const ideaId = event.currentTarget.dataset.id;
161+
handleDownVote(ideaId) {
93162
console.log('Downvote button clicked for Idea ID:', ideaId);
94-
const ideaWrapper = this.ideas.find(idea => idea.idea.Id === ideaId);
163+
const ideaWrapper = this.ideas.find(idea => idea.ideaId === ideaId);
95164
const initialVoteType = ideaWrapper && ideaWrapper.userVote ? ideaWrapper.userVote.Type__c : null;
96165

97166
handleDownVote({ ideaId })
@@ -119,9 +188,9 @@ export default class IdeaListViewComponent extends LightningElement {
119188
showToast(title, message, variant) {
120189
console.log('Show toast:', title, message, variant);
121190
const event = new ShowToastEvent({
122-
title: title,
123-
message: message,
124-
variant: variant,
191+
title,
192+
message,
193+
variant,
125194
});
126195
this.dispatchEvent(event);
127196
}

0 commit comments

Comments
 (0)