Skip to content

Commit a2f7346

Browse files
khannedykhannedy
committed
Add address listing functionality with dynamic rendering
- Implemented `addressList` function in `AddressApi.js` to fetch addresses via API. - Updated contact details page to dynamically render an address list using Svelte. - Replaced static address cards with a responsive `{#each}` loop for populated addresses. - Integrated error handling and user feedback using `alertError`.
1 parent 9cc177f commit a2f7346

File tree

2 files changed

+70
-88
lines changed

2 files changed

+70
-88
lines changed

‎src/lib/api/AddressApi.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,4 +14,14 @@ export const addressCreate = async (token, contactId, {street, city, province, c
1414
postal_code
1515
})
1616
})
17+
}
18+
19+
export const addressList = async (token, contactId) => {
20+
return await fetch(`${import.meta.env.VITE_URL_API}/contacts/${contactId}/addresses`, {
21+
method: 'GET',
22+
headers: {
23+
'Accept': 'application/json',
24+
'Authorization': token
25+
}
26+
})
1727
}

‎src/routes/(user)/dashboard/contacts/[id]/+page.svelte

Lines changed: 60 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
import {contactDetail} from "$lib/api/ContactApi.js";
44
import {alertError} from "$lib/alert.js";
55
import {onMount} from "svelte";
6+
import {addressList} from "$lib/api/AddressApi.js";
67
78
const token = localStorage.getItem('token');
89
const {id} = page.params;
@@ -15,6 +16,20 @@
1516
phone: ''
1617
})
1718
19+
let addresses = $state([]);
20+
21+
async function fetchAddresses() {
22+
const response = await addressList(token, id);
23+
const responseBody = await response.json();
24+
console.log(responseBody);
25+
26+
if (response.status === 200) {
27+
addresses = responseBody.data;
28+
} else {
29+
await alertError(responseBody.errors);
30+
}
31+
}
32+
1833
async function fetchContact() {
1934
const response = await contactDetail(token, id);
2035
const responseBody = await response.json();
@@ -29,6 +44,7 @@
2944
3045
onMount(async () => {
3146
await fetchContact();
47+
await fetchAddresses();
3248
})
3349
</script>
3450

@@ -108,97 +124,53 @@
108124
</a>
109125
</div>
110126

111-
<!-- Address Card 1 -->
112-
<div class="bg-gray-700 bg-opacity-50 p-5 rounded-lg shadow-md border border-gray-600 card-hover">
113-
<div class="flex items-center mb-3">
114-
<div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center mr-3 shadow-md">
115-
<i class="fas fa-home text-white"></i>
127+
{#each addresses as address (address.id)}
128+
<div class="bg-gray-700 bg-opacity-50 p-5 rounded-lg shadow-md border border-gray-600 card-hover">
129+
<div class="flex items-center mb-3">
130+
<div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center mr-3 shadow-md">
131+
<i class="fas fa-home text-white"></i>
132+
</div>
133+
<h4 class="text-lg font-semibold text-white">Address</h4>
116134
</div>
117-
<h4 class="text-lg font-semibold text-white">Home Address</h4>
118-
</div>
119-
<div class="space-y-3 text-gray-300 ml-2 mb-4">
120-
<p class="flex items-center">
121-
<i class="fas fa-road text-gray-500 w-6"></i>
122-
<span class="font-medium w-24">Street:</span>
123-
<span>123 Main St</span>
124-
</p>
125-
<p class="flex items-center">
126-
<i class="fas fa-city text-gray-500 w-6"></i>
127-
<span class="font-medium w-24">City:</span>
128-
<span>New York</span>
129-
</p>
130-
<p class="flex items-center">
131-
<i class="fas fa-map text-gray-500 w-6"></i>
132-
<span class="font-medium w-24">Province:</span>
133-
<span>NY</span>
134-
</p>
135-
<p class="flex items-center">
136-
<i class="fas fa-flag text-gray-500 w-6"></i>
137-
<span class="font-medium w-24">Country:</span>
138-
<span>USA</span>
139-
</p>
140-
<p class="flex items-center">
141-
<i class="fas fa-mailbox text-gray-500 w-6"></i>
142-
<span class="font-medium w-24">Postal Code:</span>
143-
<span>10001</span>
144-
</p>
145-
</div>
146-
<div class="flex justify-end space-x-3">
147-
<a href="edit_address.html"
148-
class="px-4 py-2 bg-gradient text-white rounded-lg hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-gray-800 transition-all duration-200 font-medium shadow-md flex items-center">
149-
<i class="fas fa-edit mr-2"></i> Edit
150-
</a>
151-
<button class="px-4 py-2 bg-gradient-to-r from-red-600 to-red-500 text-white rounded-lg hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:ring-offset-gray-800 transition-all duration-200 font-medium shadow-md flex items-center">
152-
<i class="fas fa-trash-alt mr-2"></i> Delete
153-
</button>
154-
</div>
155-
</div>
156-
157-
<!-- Address Card 2 -->
158-
<div class="bg-gray-700 bg-opacity-50 p-5 rounded-lg shadow-md border border-gray-600 card-hover">
159-
<div class="flex items-center mb-3">
160-
<div class="w-10 h-10 bg-purple-500 rounded-full flex items-center justify-center mr-3 shadow-md">
161-
<i class="fas fa-building text-white"></i>
135+
<div class="space-y-3 text-gray-300 ml-2 mb-4">
136+
<p class="flex items-center">
137+
<i class="fas fa-road text-gray-500 w-6"></i>
138+
<span class="font-medium w-24">Street:</span>
139+
<span>{address.street}</span>
140+
</p>
141+
<p class="flex items-center">
142+
<i class="fas fa-city text-gray-500 w-6"></i>
143+
<span class="font-medium w-24">City:</span>
144+
<span>{address.city}</span>
145+
</p>
146+
<p class="flex items-center">
147+
<i class="fas fa-map text-gray-500 w-6"></i>
148+
<span class="font-medium w-24">Province:</span>
149+
<span>{address.province}</span>
150+
</p>
151+
<p class="flex items-center">
152+
<i class="fas fa-flag text-gray-500 w-6"></i>
153+
<span class="font-medium w-24">Country:</span>
154+
<span>{address.country}</span>
155+
</p>
156+
<p class="flex items-center">
157+
<i class="fas fa-mailbox text-gray-500 w-6"></i>
158+
<span class="font-medium w-24">Postal Code:</span>
159+
<span>{address.postal_code}</span>
160+
</p>
161+
</div>
162+
<div class="flex justify-end space-x-3">
163+
<a href="/dashboard/contacts/{contact.id}/addresses/{address.id}/edit"
164+
class="px-4 py-2 bg-gradient text-white rounded-lg hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-gray-800 transition-all duration-200 font-medium shadow-md flex items-center">
165+
<i class="fas fa-edit mr-2"></i> Edit
166+
</a>
167+
<button class="px-4 py-2 bg-gradient-to-r from-red-600 to-red-500 text-white rounded-lg hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:ring-offset-gray-800 transition-all duration-200 font-medium shadow-md flex items-center">
168+
<i class="fas fa-trash-alt mr-2"></i> Delete
169+
</button>
162170
</div>
163-
<h4 class="text-lg font-semibold text-white">Work Address</h4>
164-
</div>
165-
<div class="space-y-3 text-gray-300 ml-2 mb-4">
166-
<p class="flex items-center">
167-
<i class="fas fa-road text-gray-500 w-6"></i>
168-
<span class="font-medium w-24">Street:</span>
169-
<span>456 Oak Ave</span>
170-
</p>
171-
<p class="flex items-center">
172-
<i class="fas fa-city text-gray-500 w-6"></i>
173-
<span class="font-medium w-24">City:</span>
174-
<span>San Francisco</span>
175-
</p>
176-
<p class="flex items-center">
177-
<i class="fas fa-map text-gray-500 w-6"></i>
178-
<span class="font-medium w-24">Province:</span>
179-
<span>CA</span>
180-
</p>
181-
<p class="flex items-center">
182-
<i class="fas fa-flag text-gray-500 w-6"></i>
183-
<span class="font-medium w-24">Country:</span>
184-
<span>USA</span>
185-
</p>
186-
<p class="flex items-center">
187-
<i class="fas fa-mailbox text-gray-500 w-6"></i>
188-
<span class="font-medium w-24">Postal Code:</span>
189-
<span>94102</span>
190-
</p>
191-
</div>
192-
<div class="flex justify-end space-x-3">
193-
<a href="edit_address.html"
194-
class="px-4 py-2 bg-gradient text-white rounded-lg hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-gray-800 transition-all duration-200 font-medium shadow-md flex items-center">
195-
<i class="fas fa-edit mr-2"></i> Edit
196-
</a>
197-
<button class="px-4 py-2 bg-gradient-to-r from-red-600 to-red-500 text-white rounded-lg hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:ring-offset-gray-800 transition-all duration-200 font-medium shadow-md flex items-center">
198-
<i class="fas fa-trash-alt mr-2"></i> Delete
199-
</button>
200171
</div>
201-
</div>
172+
{/each}
173+
202174
</div>
203175
</div>
204176

0 commit comments

Comments
 (0)