Skip to content

Commit 29ba229

Browse files
xxeisenbergC4illin
authored andcommitted
feat: improve job details interaction and accessibility
- Enhanced job details toggle functionality by adding event listeners to job detail elements. - Updated job detail rows to use data attributes for better accessibility and maintainability. - Improved the rendering of file information with unique keys for each file entry.
1 parent 50725ed commit 29ba229

File tree

1 file changed

+62
-45
lines changed

1 file changed

+62
-45
lines changed

src/index.tsx

Lines changed: 62 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1169,7 +1169,9 @@ const app = new Elysia({
11691169
px-2 py-2
11701170
sm:px-4
11711171
`}
1172-
/>
1172+
>
1173+
<span class="sr-only">Expand details</span>
1174+
</th>
11731175
<th
11741176
class={`
11751177
px-2 py-2
@@ -1216,10 +1218,10 @@ const app = new Elysia({
12161218
<tbody>
12171219
{userJobs.map((job) => (
12181220
<>
1219-
<tr id={`job-row-${job.id}`}>
1221+
<tr key={`job-${job.id}` as any} id={`job-row-${job.id}`}>
12201222
<td
1221-
class="cursor-pointer"
1222-
onclick={`toggleJobDetails(${job.id})`}
1223+
class="job-details-toggle cursor-pointer"
1224+
data-job-id={job.id}
12231225
>
12241226
<svg
12251227
id={`arrow-${job.id}`}
@@ -1261,36 +1263,41 @@ const app = new Elysia({
12611263
<div class="mb-1 font-semibold">
12621264
Detailed File Information:
12631265
</div>
1264-
{job.files_detailed.map((file: Filename) => (
1265-
<div class="flex items-center">
1266-
<span
1267-
class="w-5/12 truncate"
1268-
title={file.file_name}
1269-
safe
1266+
{job.files_detailed.map(
1267+
(file: Filename, index: number) => (
1268+
<div
1269+
key={String(file.id) as any}
1270+
class="flex items-center"
12701271
>
1271-
{file.file_name}
1272-
</span>
1273-
<svg
1274-
xmlns="http://www.w3.org/2000/svg"
1275-
viewBox="0 0 20 20"
1276-
fill="currentColor"
1277-
class="w-4 h-4 inline-block mx-2 text-neutral-500"
1278-
>
1279-
<path
1280-
fill-rule="evenodd"
1281-
d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
1282-
clip-rule="evenodd"
1283-
/>
1284-
</svg>
1285-
<span
1286-
class="w-5/12 truncate"
1287-
title={file.output_file_name}
1288-
safe
1289-
>
1290-
{file.output_file_name}
1291-
</span>
1292-
</div>
1293-
))}
1272+
<span
1273+
class="w-5/12 truncate"
1274+
title={file.file_name}
1275+
safe
1276+
>
1277+
{file.file_name}
1278+
</span>
1279+
<svg
1280+
xmlns="http://www.w3.org/2000/svg"
1281+
viewBox="0 0 20 20"
1282+
fill="currentColor"
1283+
class="w-4 h-4 inline-block mx-2 text-neutral-500"
1284+
>
1285+
<path
1286+
fill-rule="evenodd"
1287+
d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
1288+
clip-rule="evenodd"
1289+
/>
1290+
</svg>
1291+
<span
1292+
class="w-5/12 truncate"
1293+
title={file.output_file_name}
1294+
safe
1295+
>
1296+
{file.output_file_name}
1297+
</span>
1298+
</div>
1299+
),
1300+
)}
12941301
</div>
12951302
</td>
12961303
</tr>
@@ -1302,18 +1309,28 @@ const app = new Elysia({
13021309
</main>
13031310
<script>
13041311
{`
1305-
function toggleJobDetails(jobId) {
1306-
const detailsRow = document.getElementById(\`details-\${jobId}\`);
1307-
const arrow = document.getElementById(\`arrow-\${jobId}\`);
1308-
if (detailsRow && arrow) {
1309-
detailsRow.classList.toggle("hidden");
1310-
if (detailsRow.classList.contains("hidden")) {
1311-
arrow.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />';
1312-
} else {
1313-
arrow.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />';
1314-
}
1315-
}
1316-
}
1312+
document.addEventListener('DOMContentLoaded', () => {
1313+
const toggles = document.querySelectorAll('.job-details-toggle');
1314+
toggles.forEach(toggle => {
1315+
toggle.addEventListener('click', function() {
1316+
const jobId = this.dataset.jobId;
1317+
const detailsRow = document.getElementById(\`details-\${jobId}\`);
1318+
// The arrow SVG itself has the ID arrow-\${jobId}
1319+
const arrow = document.getElementById(\`arrow-\${jobId}\`);
1320+
1321+
if (detailsRow && arrow) {
1322+
detailsRow.classList.toggle("hidden");
1323+
if (detailsRow.classList.contains("hidden")) {
1324+
// Right-facing arrow (collapsed)
1325+
arrow.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />';
1326+
} else {
1327+
// Down-facing arrow (expanded)
1328+
arrow.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />';
1329+
}
1330+
}
1331+
});
1332+
});
1333+
});
13171334
`}
13181335
</script>
13191336
</>

0 commit comments

Comments
 (0)