Skip to content

Commit 50a1fc9

Browse files
nrkruknrkruk
authored
test: example lwc code + apex controller (#426)
1 parent 506bc1b commit 50a1fc9

File tree

6 files changed

+467
-0
lines changed

6 files changed

+467
-0
lines changed

‎test/projects/sfdx-lwc-project/force-app/main/default/classes/AccountCardController.cls‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
public with sharing class AccountCardController {
2+
@AuraEnabled(cacheable=true)
3+
public static List<Contact> getAccountContacts(Id accountId) {
4+
if (accountId == null) {
5+
return new List<Contact>();
6+
}
7+
try {
8+
return [
9+
SELECT Id, Name, Email, Phone, Title, Department
10+
FROM Contact
11+
WHERE AccountId = :accountId
12+
AND IsDeleted = false
13+
ORDER BY CreatedDate DESC
14+
LIMIT 2
15+
];
16+
} catch (Exception e) {
17+
throw new AuraHandledException('Error retrieving contacts: ' + e.getMessage());
18+
}
19+
}
20+
}

‎test/projects/sfdx-lwc-project/force-app/main/default/classes/AccountCardController.cls-meta.xml‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<ApexClass xmlns="http://soap.sforce.com/2006/04/metadata">
3+
<apiVersion>65.0</apiVersion>
4+
<status>Active</status>
5+
</ApexClass>

‎test/projects/sfdx-lwc-project/force-app/main/default/lwc/accountCard/accountCard.css‎

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
.card-container {
2+
background: white;
3+
border-radius: 8px;
4+
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
5+
padding: 1.5rem;
6+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
7+
}
8+
9+
.header {
10+
display: flex;
11+
justify-content: space-between;
12+
align-items: flex-start;
13+
margin-bottom: 1.5rem;
14+
}
15+
16+
.company-name {
17+
font-size: 1.3rem;
18+
font-weight: 600;
19+
color: #0b5cab;
20+
margin: 0 0 0.25rem 0;
21+
padding-right: 2rem;
22+
}
23+
24+
.subtitle {
25+
color: #6a6a6a;
26+
font-size: 0.9rem;
27+
}
28+
29+
.dot {
30+
margin: 0 0.3rem;
31+
}
32+
33+
.edit-button {
34+
display: flex;
35+
align-items: center;
36+
background-color: #0070d2;
37+
color: white;
38+
border: none;
39+
border-radius: 4px;
40+
padding: 0.5rem 1rem;
41+
font-weight: 500;
42+
cursor: pointer;
43+
--slds-c-icon-color-foreground-default: white;
44+
}
45+
46+
.edit-icon {
47+
margin-right: 0.3rem;
48+
}
49+
50+
.metrics-grid {
51+
display: grid;
52+
grid-template-columns: 1fr;
53+
gap: 0.75rem;
54+
margin-bottom: 1.5rem;
55+
}
56+
57+
@media (min-width: 480px) {
58+
.metrics-grid {
59+
grid-template-columns: repeat(2, 1fr);
60+
}
61+
}
62+
63+
.metric-box {
64+
background-color: #f5f5f5;
65+
border-radius: 4px;
66+
padding: 1rem;
67+
}
68+
69+
.metric-label {
70+
color: #6a6a6a;
71+
font-size: 0.85rem;
72+
margin-bottom: 0.5rem;
73+
}
74+
75+
.metric-value {
76+
color: #0b5cab;
77+
font-size: 1.25rem;
78+
font-weight: 600;
79+
}
80+
81+
.status-container {
82+
display: flex;
83+
align-items: center;
84+
}
85+
86+
.status-dot-active {
87+
height: 8px;
88+
width: 8px;
89+
background-color: #45c65a;
90+
border-radius: 50%;
91+
display: inline-block;
92+
margin-right: 0.5rem;
93+
}
94+
95+
.status-dot-inactive {
96+
height: 8px;
97+
width: 8px;
98+
background-color: #ffbf00;
99+
border-radius: 50%;
100+
display: inline-block;
101+
margin-right: 0.5rem;
102+
}
103+
104+
.contacts-section {
105+
border-top: 1px solid #f5f5f5;
106+
padding-top: 1.5rem;
107+
}
108+
109+
.contacts-header {
110+
color: #0b5cab;
111+
font-size: 1.1rem;
112+
font-weight: 600;
113+
margin-bottom: 1rem;
114+
}
115+
116+
.contacts-list {
117+
display: flex;
118+
flex-direction: column;
119+
gap: 1rem;
120+
}
121+
122+
.contact-item {
123+
display: flex;
124+
justify-content: space-between;
125+
align-items: center;
126+
padding: 0.5rem;
127+
}
128+
129+
.contact-left {
130+
display: flex;
131+
align-items: center;
132+
}
133+
134+
.contact-avatar {
135+
display: flex;
136+
align-items: center;
137+
justify-content: center;
138+
width: 40px;
139+
height: 40px;
140+
background-color: #e8f3ff;
141+
color: #0070d2;
142+
border-radius: 50%;
143+
font-weight: 500;
144+
margin-right: 1rem;
145+
}
146+
147+
.contact-name {
148+
color: #0b5cab;
149+
font-weight: 500;
150+
font-size: 1rem;
151+
}
152+
153+
.contact-title {
154+
color: #6a6a6a;
155+
font-size: 0.85rem;
156+
}
157+
158+
.contact-actions {
159+
display: flex;
160+
gap: 0.5rem;
161+
}
162+
163+
.icon-button {
164+
background: none;
165+
border: none;
166+
color: #0070d2;
167+
cursor: pointer;
168+
padding: 0.4rem;
169+
}
170+
171+
.icon-button:hover {
172+
background-color: #f5f5f5;
173+
border-radius: 4px;
174+
}

‎test/projects/sfdx-lwc-project/force-app/main/default/lwc/accountCard/accountCard.html‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
<template>
2+
<div class="card-container">
3+
<template if:true="{isLoading}">
4+
<lightning-spinner alternative-text="Loading" size="small"></lightning-spinner>
5+
</template>
6+
7+
<template if:true="{hasError}">
8+
<div class="slds-p-around_medium slds-text-color_error">
9+
An error occurred while loading the account information.
10+
</div>
11+
</template>
12+
13+
<template if:true="{accountData}">
14+
<!-- Card Header -->
15+
<div class="header">
16+
<div class="header-left">
17+
<h2 class="company-name">{name}</h2>
18+
<div class="subtitle">
19+
<span>{website}</span>
20+
<span class="dot">•</span>
21+
<span>{location}</span>
22+
</div>
23+
</div>
24+
<div class="header-right">
25+
<button class="edit-button" onclick="{handleEdit}">
26+
<lightning-icon icon-name="utility:edit" size="x-small" class="edit-icon"></lightning-icon>
27+
Edit
28+
</button>
29+
</div>
30+
</div>
31+
32+
<!-- Key Metrics -->
33+
<div class="metrics-grid">
34+
<div class="metric-box">
35+
<div class="metric-label">Annual Revenue</div>
36+
<div class="metric-value">{annualRevenue}</div>
37+
</div>
38+
<div class="metric-box">
39+
<div class="metric-label">Employees</div>
40+
<div class="metric-value">{employees}</div>
41+
</div>
42+
<div class="metric-box">
43+
<div class="metric-label">Industry</div>
44+
<div class="metric-value">{industry}</div>
45+
</div>
46+
<div class="metric-box">
47+
<div class="metric-label">Account Status</div>
48+
<div class="status-container">
49+
<span class="{statusDotClass}"></span>
50+
<span class="metric-value">{status}</span>
51+
</div>
52+
</div>
53+
</div>
54+
55+
<!-- Contacts Section -->
56+
<div class="contacts-section">
57+
<h3 class="contacts-header">Key Contacts</h3>
58+
59+
<div class="contacts-list">
60+
<template if:true="{hasContacts}">
61+
<template for:each="{contacts}" for:item="contact">
62+
<div key="{contact.Id}" class="contact-item">
63+
<div class="contact-left">
64+
<div class="contact-avatar">{contact.Initials}</div>
65+
<div class="contact-info">
66+
<div class="contact-name">{contact.Name}</div>
67+
<div class="contact-title">{contact.Title}</div>
68+
</div>
69+
</div>
70+
<div class="contact-actions">
71+
<button class="icon-button" data-id="{contact.Id}" onclick="{handleCall}">
72+
<lightning-icon icon-name="utility:call" size="x-small"></lightning-icon>
73+
</button>
74+
<button class="icon-button" data-id="{contact.Id}" onclick="{handleEmail}">
75+
<lightning-icon icon-name="utility:email" size="x-small"></lightning-icon>
76+
</button>
77+
</div>
78+
</div>
79+
</template>
80+
</template>
81+
<template if:false="{hasContacts}">
82+
<div class="no-contacts-message">{noContactsMessage}</div>
83+
</template>
84+
</div>
85+
</div>
86+
</template>
87+
</div>
88+
</template>

0 commit comments

Comments
 (0)