Skip to content

Commit 29fa35c

Browse files
devnamdev2003devnamdev2003
committed
update code and fix issues
1 parent ce7c697 commit 29fa35c

16 files changed

Lines changed: 1068 additions & 415 deletions

File tree

‎documentation/components/ExpenseListComponent.html‎

Lines changed: 149 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -120,6 +120,16 @@ <h3>File</h3>
120120
</p>
121121

122122

123+
<p class="comment">
124+
<h3>Description</h3>
125+
</p>
126+
<p class="comment">
127+
<p>ExpenseListComponent</p>
128+
<p>Displays a list of expenses with formatted dates and emits
129+
events when an expense is selected. Also provides a utility
130+
to darken colors for styling purposes.</p>
131+
132+
</p>
123133

124134

125135

@@ -256,10 +266,17 @@ <h3 id="constructor">Constructor</h3>
256266
</tr>
257267
<tr>
258268
<td class="col-md-4">
259-
<div class="io-line">Defined in <a href="" data-line="15" class="link-to-prism">src/app/component/list-expenses/expense-list/expense-list.component.ts:15</a></div>
269+
<div class="io-line">Defined in <a href="" data-line="33" class="link-to-prism">src/app/component/list-expenses/expense-list/expense-list.component.ts:33</a></div>
260270
</td>
261271
</tr>
262272

273+
<tr>
274+
<td class="col-md-4">
275+
<div class="io-description"><p>Creates an instance of ExpenseListComponent.
276+
Initializes the currency to an empty string.</p>
277+
</div>
278+
</td>
279+
</tr>
263280
</tbody>
264281
</table>
265282
</section>
@@ -282,9 +299,15 @@ <h3 id="inputs">Inputs</h3>
282299
</tr>
283300
<tr>
284301
<td class="col-md-2" colspan="2">
285-
<div class="io-line">Defined in <a href="" data-line="14" class="link-to-prism">src/app/component/list-expenses/expense-list/expense-list.component.ts:14</a></div>
302+
<div class="io-line">Defined in <a href="" data-line="28" class="link-to-prism">src/app/component/list-expenses/expense-list/expense-list.component.ts:28</a></div>
286303
</td>
287304
</tr>
305+
<tr>
306+
<td class="col-md-4">
307+
<div class="io-description"><p>The currency symbol or code to display with expense amounts.</p>
308+
</div>
309+
</td>
310+
</tr>
288311
</tbody>
289312
</table>
290313
<table class="table table-sm table-bordered">
@@ -308,9 +331,16 @@ <h3 id="inputs">Inputs</h3>
308331
</tr>
309332
<tr>
310333
<td class="col-md-2" colspan="2">
311-
<div class="io-line">Defined in <a href="" data-line="13" class="link-to-prism">src/app/component/list-expenses/expense-list/expense-list.component.ts:13</a></div>
334+
<div class="io-line">Defined in <a href="" data-line="23" class="link-to-prism">src/app/component/list-expenses/expense-list/expense-list.component.ts:23</a></div>
312335
</td>
313336
</tr>
337+
<tr>
338+
<td class="col-md-4">
339+
<div class="io-description"><p>The list of expense objects to display.
340+
Each expense should contain at least a <code>date</code> field.</p>
341+
</div>
342+
</td>
343+
</tr>
314344
</tbody>
315345
</table>
316346
</section>
@@ -332,9 +362,15 @@ <h3 id="outputs">Outputs</h3>
332362
</tr>
333363
<tr>
334364
<td class="col-md-2" colspan="2">
335-
<div class="io-line">Defined in <a href="" data-line="15" class="link-to-prism">src/app/component/list-expenses/expense-list/expense-list.component.ts:15</a></div>
365+
<div class="io-line">Defined in <a href="" data-line="33" class="link-to-prism">src/app/component/list-expenses/expense-list/expense-list.component.ts:33</a></div>
336366
</td>
337367
</tr>
368+
<tr>
369+
<td class="col-md-4">
370+
<div class="io-description"><p>Event emitted when an expense is selected.</p>
371+
</div>
372+
</td>
373+
</tr>
338374
</tbody>
339375
</table>
340376
</section>
@@ -365,14 +401,17 @@ <h3 id="methods">
365401

366402
<tr>
367403
<td class="col-md-4">
368-
<div class="io-line">Defined in <a href="" data-line="32"
369-
class="link-to-prism">src/app/component/list-expenses/expense-list/expense-list.component.ts:32</a></div>
404+
<div class="io-line">Defined in <a href="" data-line="95"
405+
class="link-to-prism">src/app/component/list-expenses/expense-list/expense-list.component.ts:95</a></div>
370406
</td>
371407
</tr>
372408

373409

374410
<tr>
375411
<td class="col-md-4">
412+
<div class="io-description"><p>Darkens a given HEX color by a percentage.
413+
Converts the color to RGB and decreases brightness.</p>
414+
</div>
376415

377416
<div class="io-description">
378417
<b>Parameters :</b>
@@ -383,6 +422,7 @@ <h3 id="methods">
383422
<td>Name</td>
384423
<td>Type</td>
385424
<td>Optional</td>
425+
<td>Description</td>
386426
</tr>
387427
</thead>
388428
<tbody>
@@ -397,6 +437,10 @@ <h3 id="methods">
397437
</td>
398438

399439

440+
<td>
441+
<p>The HEX color string (e.g., <code>#FF0000</code>).</p>
442+
443+
</td>
400444
</tr>
401445
<tr>
402446
<td>percent</td>
@@ -409,6 +453,10 @@ <h3 id="methods">
409453
</td>
410454

411455

456+
<td>
457+
<p>The percentage (0–1) to darken the color.</p>
458+
459+
</td>
412460
</tr>
413461
</tbody>
414462
</table>
@@ -418,7 +466,8 @@ <h3 id="methods">
418466

419467
</div>
420468
<div class="io-description">
421-
469+
<p>The darkened color as an RGB string, or the original color on error.</p>
470+
422471
</div>
423472
</td>
424473
</tr>
@@ -444,14 +493,17 @@ <h3 id="methods">
444493

445494
<tr>
446495
<td class="col-md-4">
447-
<div class="io-line">Defined in <a href="" data-line="27"
448-
class="link-to-prism">src/app/component/list-expenses/expense-list/expense-list.component.ts:27</a></div>
496+
<div class="io-line">Defined in <a href="" data-line="60"
497+
class="link-to-prism">src/app/component/list-expenses/expense-list/expense-list.component.ts:60</a></div>
449498
</td>
450499
</tr>
451500

452501

453502
<tr>
454503
<td class="col-md-4">
504+
<div class="io-description"><p>Formats the date of an expense into a human-readable string.
505+
Example: <code>Mon 1st Mar 2025</code></p>
506+
</div>
455507

456508
<div class="io-description">
457509
<b>Parameters :</b>
@@ -462,6 +514,7 @@ <h3 id="methods">
462514
<td>Name</td>
463515
<td>Type</td>
464516
<td>Optional</td>
517+
<td>Description</td>
465518
</tr>
466519
</thead>
467520
<tbody>
@@ -476,6 +529,10 @@ <h3 id="methods">
476529
</td>
477530

478531

532+
<td>
533+
<p>The expense object containing a <code>date</code> field.</p>
534+
535+
</td>
479536
</tr>
480537
</tbody>
481538
</table>
@@ -485,7 +542,8 @@ <h3 id="methods">
485542

486543
</div>
487544
<div class="io-description">
488-
545+
<p>A formatted date string with day, suffix, month, and year.</p>
546+
489547
</div>
490548
</td>
491549
</tr>
@@ -511,14 +569,17 @@ <h3 id="methods">
511569

512570
<tr>
513571
<td class="col-md-4">
514-
<div class="io-line">Defined in <a href="" data-line="23"
515-
class="link-to-prism">src/app/component/list-expenses/expense-list/expense-list.component.ts:23</a></div>
572+
<div class="io-line">Defined in <a href="" data-line="49"
573+
class="link-to-prism">src/app/component/list-expenses/expense-list/expense-list.component.ts:49</a></div>
516574
</td>
517575
</tr>
518576

519577

520578
<tr>
521579
<td class="col-md-4">
580+
<div class="io-description"><p>Handles the selection of an expense.
581+
Emits the selected expense via the <code>expenseSelected</code> output.</p>
582+
</div>
522583

523584
<div class="io-description">
524585
<b>Parameters :</b>
@@ -529,6 +590,7 @@ <h3 id="methods">
529590
<td>Name</td>
530591
<td>Type</td>
531592
<td>Optional</td>
593+
<td>Description</td>
532594
</tr>
533595
</thead>
534596
<tbody>
@@ -543,6 +605,10 @@ <h3 id="methods">
543605
</td>
544606

545607

608+
<td>
609+
<p>The expense object that was selected.</p>
610+
611+
</td>
546612
</tr>
547613
</tbody>
548614
</table>
@@ -567,34 +633,97 @@ <h3 id="methods">
567633
<pre class="line-numbers compodoc-sourcecode"><code class="language-typescript">import { CommonModule } from &#x27;@angular/common&#x27;;
568634
import { Component, EventEmitter, Input, Output } from &#x27;@angular/core&#x27;;
569635

636+
/**
637+
* ExpenseListComponent
638+
*
639+
* Displays a list of expenses with formatted dates and emits
640+
* events when an expense is selected. Also provides a utility
641+
* to darken colors for styling purposes.
642+
*/
570643
@Component({
571644
selector: &#x27;app-expense-list&#x27;,
572645
standalone: true,
573646
imports: [CommonModule],
574647
templateUrl: &#x27;./expense-list.component.html&#x27;,
575648
styleUrl: &#x27;./expense-list.component.css&#x27;
576649
})
577-
578650
export class ExpenseListComponent {
651+
/**
652+
* The list of expense objects to display.
653+
* Each expense should contain at least a &#x60;date&#x60; field.
654+
*/
579655
@Input() expenses: any[] &#x3D; [];
656+
657+
/**
658+
* The currency symbol or code to display with expense amounts.
659+
*/
580660
@Input() currency: string | null;
661+
662+
/**
663+
* Event emitted when an expense is selected.
664+
*/
581665
@Output() expenseSelected &#x3D; new EventEmitter&lt;any&gt;();
582666

583-
constructor(
584-
) {
667+
/**
668+
* Creates an instance of ExpenseListComponent.
669+
* Initializes the currency to an empty string.
670+
*/
671+
constructor() {
585672
this.currency &#x3D; &#x27;&#x27;;
586-
587673
}
588674

589-
onSelect(expense: any) {
675+
/**
676+
* Handles the selection of an expense.
677+
* Emits the selected expense via the &#x60;expenseSelected&#x60; output.
678+
*
679+
* @param expense The expense object that was selected.
680+
*/
681+
onSelect(expense: any): void {
590682
this.expenseSelected.emit(expense);
591683
}
592684

685+
/**
686+
* Formats the date of an expense into a human-readable string.
687+
* Example: &#x60;Mon 1st Mar 2025&#x60;
688+
*
689+
* @param exp The expense object containing a &#x60;date&#x60; field.
690+
* @returns A formatted date string with day, suffix, month, and year.
691+
*/
593692
getFormattedDate(exp: any): string {
594693
const date &#x3D; new Date(exp.date);
595-
return date.toLocaleDateString();
694+
695+
const days &#x3D; [&quot;Sun&quot;, &quot;Mon&quot;, &quot;Tue&quot;, &quot;Wed&quot;, &quot;Thu&quot;, &quot;Fri&quot;, &quot;Sat&quot;];
696+
const months &#x3D; [
697+
&quot;Jan&quot;, &quot;Feb&quot;, &quot;Mar&quot;, &quot;Apr&quot;, &quot;May&quot;, &quot;Jun&quot;,
698+
&quot;Jul&quot;, &quot;Aug&quot;, &quot;Sep&quot;, &quot;Oct&quot;, &quot;Nov&quot;, &quot;Dec&quot;
699+
];
700+
701+
const dayName &#x3D; days[date.getDay()];
702+
const day &#x3D; date.getDate();
703+
const month &#x3D; months[date.getMonth()];
704+
const year &#x3D; date.getFullYear();
705+
706+
const suffix &#x3D; (d: number): string &#x3D;&gt; {
707+
if (d &gt; 3 &amp;&amp; d &lt; 21) return &quot;th&quot;;
708+
switch (d % 10) {
709+
case 1: return &quot;st&quot;;
710+
case 2: return &quot;nd&quot;;
711+
case 3: return &quot;rd&quot;;
712+
default: return &quot;th&quot;;
713+
}
714+
};
715+
716+
return &#x60;${dayName} ${day}${suffix(day)} ${month} ${year}&#x60;;
596717
}
597718

719+
/**
720+
* Darkens a given HEX color by a percentage.
721+
* Converts the color to RGB and decreases brightness.
722+
*
723+
* @param color The HEX color string (e.g., &#x60;#FF0000&#x60;).
724+
* @param percent The percentage (0–1) to darken the color.
725+
* @returns The darkened color as an RGB string, or the original color on error.
726+
*/
598727
darkenColor(color: string, percent: number): string {
599728
try {
600729
const num &#x3D; parseInt(color.replace(&#x27;#&#x27;, &#x27;&#x27;), 16);
@@ -608,7 +737,8 @@ <h3 id="methods">
608737
return color;
609738
}
610739
}
611-
}</code></pre>
740+
}
741+
</code></pre>
612742
</div>
613743

614744
<div class="tab-pane fade " id="templateData">

0 commit comments

Comments
 (0)