Skip to content

Commit f5343dd

Browse files
committed
add 'all data' button to download all data
1 parent cdca9c8 commit f5343dd

9 files changed

Lines changed: 145 additions & 39 deletions

File tree

README.md

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ All expenses are stored in the device's **LocalStorage** and reflected immediate
9595
Provides customization and utility options for better personalization:
9696

9797
* 🎨 **Theme Mode Toggle** (Dark / Light)
98-
* ⬇️ **Download Data** (export expenses data in pdf, json, excel formats. between the selected date range)
98+
* ⬇️ **Download Data**: Export your expenses in **PDF**, **JSON**, or **Excel** formats between the selected date range. Users can also choose **All Data** to export all expense records.
9999
* 📤 **Import Data** (upload expense data)
100100
***Add Category** (custom categories for better organization)
101101
***Delete Category** (remove unused or incorrect categories)
@@ -150,10 +150,10 @@ For developers and contributors, detailed code-level documentation is available
150150
justify-items: center;
151151
padding: 16px;
152152
">
153-
<img src="https://devnamdev2003.github.io/angular-expense-tracker/public/assets/appScreenshot/home.jpg" alt="home" style="width: 200px; border-radius: 8px;">
154-
<img src="https://devnamdev2003.github.io/angular-expense-tracker/public/assets/appScreenshot/add.jpg" alt="add" style="width: 200px; border-radius: 8px;">
155-
<img src="https://devnamdev2003.github.io/angular-expense-tracker/public/assets/appScreenshot/calendar.jpg" alt="calendar" style="width: 200px; border-radius: 8px;">
156-
<img src="https://devnamdev2003.github.io/angular-expense-tracker/public/assets/appScreenshot/settings.jpg" alt="settings" style="width: 200px; border-radius: 8px;">
157-
<img src="https://devnamdev2003.github.io/angular-expense-tracker/public/assets/appScreenshot/budget.jpg" alt="budget" style="width: 200px; border-radius: 8px;">
158-
<img src="https://devnamdev2003.github.io/angular-expense-tracker/public/assets/appScreenshot/list.jpg" alt="list" style="width: 200px; border-radius: 8px;">
153+
<img src="https://exwise.vercel.app/assets/appScreenshot/home.jpg" alt="home" style="width: 200px; border-radius: 8px;">
154+
<img src="https://exwise.vercel.app/assets/appScreenshot/add.jpg" alt="add" style="width: 200px; border-radius: 8px;">
155+
<img src="https://exwise.vercel.app/assets/appScreenshot/calendar.jpg" alt="calendar" style="width: 200px; border-radius: 8px;">
156+
<img src="https://exwise.vercel.app/assets/appScreenshot/settings.jpg" alt="settings" style="width: 200px; border-radius: 8px;">
157+
<img src="https://exwise.vercel.app/assets/appScreenshot/budget.jpg" alt="budget" style="width: 200px; border-radius: 8px;">
158+
<img src="https://exwise.vercel.app/assets/appScreenshot/list.jpg" alt="list" style="width: 200px; border-radius: 8px;">
159159
</div>

documentation/components/CalendarComponent.html

Lines changed: 4 additions & 3 deletions
Large diffs are not rendered by default.

documentation/components/DownloadComponentComponent.html

Lines changed: 73 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -247,6 +247,9 @@ <h6><b>Methods</b></h6>
247247
<li>
248248
<a href="#confirmAndDownload" >confirmAndDownload</a>
249249
</li>
250+
<li>
251+
<a href="#downloadAllData" >downloadAllData</a>
252+
</li>
250253
<li>
251254
<a href="#downloadData" >downloadData</a>
252255
</li>
@@ -494,6 +497,48 @@ <h3 id="methods">
494497
<td class="col-md-4">
495498
<div class="io-description"><p>Validates date range and triggers the appropriate
496499
export function (JSON, PDF, Excel) based on user selection.</p>
500+
</div>
501+
502+
<div class="io-description">
503+
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
504+
505+
</div>
506+
</td>
507+
</tr>
508+
</tbody>
509+
</table>
510+
<table class="table table-sm table-bordered">
511+
<tbody>
512+
<tr>
513+
<td class="col-md-4">
514+
<a name="downloadAllData"></a>
515+
<span class="name">
516+
<span ><b>downloadAllData</b></span>
517+
<a href="#downloadAllData"><span class="icon ion-ios-link"></span></a>
518+
</span>
519+
</td>
520+
</tr>
521+
<tr>
522+
<td class="col-md-4">
523+
<code>downloadAllData()</code>
524+
</td>
525+
</tr>
526+
527+
528+
<tr>
529+
<td class="col-md-4">
530+
<div class="io-line">Defined in <a href="" data-line="342"
531+
class="link-to-prism">src/app/component/settings-components/download-component/download-component.component.ts:342</a></div>
532+
</td>
533+
</tr>
534+
535+
536+
<tr>
537+
<td class="col-md-4">
538+
<div class="io-description"><p>Populates the date fields with the entire expense history range.</p>
539+
<p>Fetches all expenses, determines the earliest and latest expense dates,
540+
and sets the &#39;From Date&#39; and &#39;To Date&#39; fields in the form to cover
541+
the full date range of the user&#39;s data, defaulting the file type to JSON.</p>
497542
</div>
498543

499544
<div class="io-description">
@@ -1050,7 +1095,7 @@ <h3 id="inputs">
10501095

10511096
/** Category data */
10521097
categoryData: Category[] | [],
1053-
1098+
10541099
/** Budget data */
10551100
budgetData: Budget[] | []
10561101
};
@@ -1121,7 +1166,7 @@ <h3 id="inputs">
11211166
this.downloadDataForm &#x3D; this.fb.group({
11221167
fromDate: [&#x27;&#x27;, [Validators.required]],
11231168
toDate: [&#x27;&#x27;, [Validators.required]],
1124-
fileType: [&#x27;JSON&#x27;, [Validators.required]],
1169+
fileType: [&#x27;PDF&#x27;, [Validators.required]],
11251170
});
11261171
}
11271172

@@ -1174,7 +1219,7 @@ <h3 id="inputs">
11741219
expense_id: expense.expense_id,
11751220
isExtraSpending: expense.isExtraSpending
11761221
}));
1177-
1222+
11781223
// Prepare final data object
11791224
const finalData: UserData &#x3D; {
11801225
userData: userData || {},
@@ -1237,7 +1282,7 @@ <h3 id="inputs">
12371282
this.downloadDataForm.reset({
12381283
fromDate: &#x27;&#x27;,
12391284
toDate: &#x27;&#x27;,
1240-
fileType: &#x27;JSON&#x27;
1285+
fileType: &#x27;PDF&#x27;
12411286
});
12421287
this.downloadDataForm.markAsPristine();
12431288
this.downloadDataForm.markAsUntouched();
@@ -1358,6 +1403,26 @@ <h3 id="inputs">
13581403
XLSX.writeFile(workbook, filename);
13591404
}
13601405

1406+
/**
1407+
* Populates the date fields with the entire expense history range.
1408+
*
1409+
* Fetches all expenses, determines the earliest and latest expense dates,
1410+
* and sets the &#x27;From Date&#x27; and &#x27;To Date&#x27; fields in the form to cover
1411+
* the full date range of the user&#x27;s data, defaulting the file type to JSON.
1412+
*/
1413+
downloadAllData(): void {
1414+
const expenseData: Expense[] &#x3D; this.expenseService.getAll();
1415+
if (expenseData.length &gt; 0) {
1416+
expenseData.sort((a, b) &#x3D;&gt; new Date(b.date).getTime() - new Date(a.date).getTime());
1417+
const fromDate &#x3D; expenseData[expenseData.length - 1].date;
1418+
const toDate &#x3D; expenseData[0].date;
1419+
this.downloadDataForm.reset({
1420+
fromDate: fromDate,
1421+
toDate: toDate,
1422+
fileType: this.downloadDataForm.get(&#x27;fileType&#x27;)?.value || &#x27;PDF&#x27;
1423+
});
1424+
}
1425+
}
13611426
}
13621427
</code></pre>
13631428
</div>
@@ -1392,14 +1457,14 @@ <h3 id="inputs">
13921457
&lt;label class&#x3D;&quot;block mb-1 font-medium&quot;&gt;File Type&lt;/label&gt;
13931458
&lt;select formControlName&#x3D;&quot;fileType&quot;
13941459
class&#x3D;&quot;w-full p-2 rounded border text-[var(--input-text)] bg-[var(--input-bg)] border-[var(--input-border)] focus:outline-none focus:ring-2 focus:ring-[var(--theme-color)] transition-all duration-200&quot;&gt;
1395-
&lt;option value&#x3D;&quot;JSON&quot;&gt;JSON&lt;/option&gt;
13961460
&lt;option value&#x3D;&quot;PDF&quot;&gt;PDF&lt;/option&gt;
13971461
&lt;option value&#x3D;&quot;EXCEL&quot;&gt;EXCEL&lt;/option&gt;
1462+
&lt;option value&#x3D;&quot;JSON&quot;&gt;JSON&lt;/option&gt;
13981463
&lt;/select&gt;
13991464

14001465
&lt;div class&#x3D;&quot;flex justify-end mt-2&quot;&gt;
1401-
&lt;button type&#x3D;&quot;button&quot; (click)&#x3D;&quot;closeDownloadDataModal()&quot;
1402-
class&#x3D;&quot;mr-2 px-4 py-2 bg-[var(--color-gray-500)] text-white rounded&quot;&gt;Cancel&lt;/button&gt;
1466+
&lt;button type&#x3D;&quot;button&quot; (click)&#x3D;&quot;downloadAllData()&quot;
1467+
class&#x3D;&quot;mr-2 px-4 py-2 bg-[var(--color-gray-500)] text-white rounded&quot;&gt;All Data&lt;/button&gt;
14031468
&lt;button type&#x3D;&quot;submit&quot; class&#x3D;&quot;px-4 py-2 bg-[var(--color-accent)] text-white rounded&quot;&gt;Download&lt;/button&gt;
14041469
&lt;/div&gt;
14051470
&lt;/form&gt;
@@ -1432,7 +1497,7 @@ <h3 id="inputs">
14321497
<script src="../js/libs/htmlparser.js"></script>
14331498
<script src="../js/libs/deep-iterator.js"></script>
14341499
<script>
1435-
var COMPONENT_TEMPLATE = '<div><button (click)="openDownloadDataModal()" class="p-2 rounded-lg bg-[var(--color-accent)] hover:opacity-90 transition flex items-center justify-center"> <img src="assets/img/icon/icons8-download-48.png" alt="Download" class="w-5 h-5" style="filter: invert(100%);" /></button><app-form-model *ngIf="showDownloadDataModal" [label]="\'Download Data\'" (close)="closeDownloadDataModal()"> <form [formGroup]="downloadDataForm" (ngSubmit)="downloadData()"> <label class="block mb-1 font-medium">From Date</label> <input formControlName="fromDate" type="date" autocomplete="off" [max]="today" placeholder="From Date" class="w-full p-2 rounded border text-[var(--input-text)] bg-[var(--input-bg)] border-[var(--input-border)] focus:outline-none focus:ring-2 focus:ring-[var(--theme-color)] transition-all duration-200" /> <div class="error-message text-[var(--color-error)]" *ngIf="downloadDataForm.get(\'fromDate\')?.touched && downloadDataForm.get(\'fromDate\')?.errors?.[\'required\']"> From Date is required </div> <label class="block mb-1 font-medium">To Date</label> <input formControlName="toDate" type="date" autocomplete="off" [max]="today" [min]="downloadDataForm.get(\'fromDate\')?.value" placeholder="To Date" class="w-full p-2 rounded border text-[var(--input-text)] bg-[var(--input-bg)] border-[var(--input-border)] focus:outline-none focus:ring-2 focus:ring-[var(--theme-color)] transition-all duration-200" /> <div class="error-message text-[var(--color-error)]" *ngIf="downloadDataForm.get(\'toDate\')?.touched && downloadDataForm.get(\'toDate\')?.errors?.[\'required\']"> To Date is required </div> <label class="block mb-1 font-medium">File Type</label> <select formControlName="fileType" class="w-full p-2 rounded border text-[var(--input-text)] bg-[var(--input-bg)] border-[var(--input-border)] focus:outline-none focus:ring-2 focus:ring-[var(--theme-color)] transition-all duration-200"> <option value="JSON">JSON</option> <option value="PDF">PDF</option> <option value="EXCEL">EXCEL</option> </select> <div class="flex justify-end mt-2"> <button type="button" (click)="closeDownloadDataModal()" class="mr-2 px-4 py-2 bg-[var(--color-gray-500)] text-white rounded">Cancel</button> <button type="submit" class="px-4 py-2 bg-[var(--color-accent)] text-white rounded">Download</button> </div> </form></app-form-model></div>'
1500+
var COMPONENT_TEMPLATE = '<div><button (click)="openDownloadDataModal()" class="p-2 rounded-lg bg-[var(--color-accent)] hover:opacity-90 transition flex items-center justify-center"> <img src="assets/img/icon/icons8-download-48.png" alt="Download" class="w-5 h-5" style="filter: invert(100%);" /></button><app-form-model *ngIf="showDownloadDataModal" [label]="\'Download Data\'" (close)="closeDownloadDataModal()"> <form [formGroup]="downloadDataForm" (ngSubmit)="downloadData()"> <label class="block mb-1 font-medium">From Date</label> <input formControlName="fromDate" type="date" autocomplete="off" [max]="today" placeholder="From Date" class="w-full p-2 rounded border text-[var(--input-text)] bg-[var(--input-bg)] border-[var(--input-border)] focus:outline-none focus:ring-2 focus:ring-[var(--theme-color)] transition-all duration-200" /> <div class="error-message text-[var(--color-error)]" *ngIf="downloadDataForm.get(\'fromDate\')?.touched && downloadDataForm.get(\'fromDate\')?.errors?.[\'required\']"> From Date is required </div> <label class="block mb-1 font-medium">To Date</label> <input formControlName="toDate" type="date" autocomplete="off" [max]="today" [min]="downloadDataForm.get(\'fromDate\')?.value" placeholder="To Date" class="w-full p-2 rounded border text-[var(--input-text)] bg-[var(--input-bg)] border-[var(--input-border)] focus:outline-none focus:ring-2 focus:ring-[var(--theme-color)] transition-all duration-200" /> <div class="error-message text-[var(--color-error)]" *ngIf="downloadDataForm.get(\'toDate\')?.touched && downloadDataForm.get(\'toDate\')?.errors?.[\'required\']"> To Date is required </div> <label class="block mb-1 font-medium">File Type</label> <select formControlName="fileType" class="w-full p-2 rounded border text-[var(--input-text)] bg-[var(--input-bg)] border-[var(--input-border)] focus:outline-none focus:ring-2 focus:ring-[var(--theme-color)] transition-all duration-200"> <option value="PDF">PDF</option> <option value="EXCEL">EXCEL</option> <option value="JSON">JSON</option> </select> <div class="flex justify-end mt-2"> <button type="button" (click)="downloadAllData()" class="mr-2 px-4 py-2 bg-[var(--color-gray-500)] text-white rounded">All Data</button> <button type="submit" class="px-4 py-2 bg-[var(--color-accent)] text-white rounded">Download</button> </div> </form></app-form-model></div>'
14361501
var COMPONENTS = [{'name': 'AddExpenseComponent', 'selector': 'app-add-expense'},{'name': 'AiComponent', 'selector': 'app-ai'},{'name': 'AppComponent', 'selector': 'app-root'},{'name': 'BudgetComponent', 'selector': 'app-budget'},{'name': 'CalendarComponent', 'selector': 'app-calendar'},{'name': 'CategoryDropdownComponent', 'selector': 'app-category-dropdown'},{'name': 'DownloadComponentComponent', 'selector': 'app-download-component'},{'name': 'ExpenseDetailsModalComponent', 'selector': 'app-expense-details-modal'},{'name': 'ExpenseListComponent', 'selector': 'app-expense-list'},{'name': 'ExpenseWiseComponent', 'selector': 'app-expense-wise'},{'name': 'FooterComponent', 'selector': 'app-footer'},{'name': 'FormModelComponent', 'selector': 'app-form-model'},{'name': 'GlobalLoaderComponent', 'selector': 'app-global-loader'},{'name': 'GraphsComponent', 'selector': 'app-graphs'},{'name': 'HamburgerMenuComponent', 'selector': 'app-hamburger-menu'},{'name': 'HomeComponent', 'selector': 'app-home'},{'name': 'InstallAppPopupComponentComponent', 'selector': 'app-install-app-popup-component'},{'name': 'ListExpensesComponent', 'selector': 'app-list-expenses'},{'name': 'MusicComponent', 'selector': 'app-music'},{'name': 'NavbarComponent', 'selector': 'app-navbar'},{'name': 'PieChartComponent', 'selector': 'app-pie-chart'},{'name': 'PlaylistMusicComponent', 'selector': 'app-playlist-music'},{'name': 'SearchButtonComponent', 'selector': 'app-search-button'},{'name': 'SearchMusicComponent', 'selector': 'app-search-music'},{'name': 'SettingItemComponent', 'selector': 'app-setting-item'},{'name': 'SettingsComponent', 'selector': 'app-settings'},{'name': 'SidebarComponent', 'selector': 'app-sidebar'},{'name': 'TemplatePlaygroundComponent', 'selector': 'template-playground-root'},{'name': 'ToastComponent', 'selector': 'app-toast'}];
14371502
var DIRECTIVES = [];
14381503
var ACTUAL_COMPONENT = {'name': 'DownloadComponentComponent'};

documentation/coverage.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -445,7 +445,7 @@
445445
<td>DownloadComponentComponent</td>
446446
<td align="right" data-sort="100">
447447
<span class="coverage-percent">100 %</span>
448-
<span class="coverage-count">(13/13)</span>
448+
<span class="coverage-count">(14/14)</span>
449449
</td>
450450
</tr>
451451
<tr class="very-good">

documentation/index.html

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -213,7 +213,7 @@ <h3>6. <strong>Settings View</strong></h3>
213213
<p>Provides customization and utility options for better personalization:</p>
214214
<ul>
215215
<li>🎨 <strong>Theme Mode Toggle</strong> (Dark / Light)</li>
216-
<li>⬇️ <strong>Download Data</strong> (export expenses data in pdf, json, excel formats. between the selected date range)</li>
216+
<li>⬇️ <strong>Download Data</strong>: Export your expenses in <strong>PDF</strong>, <strong>JSON</strong>, or <strong>Excel</strong> formats between the selected date range. Users can also choose <strong>All Data</strong> to export all expense records.</li>
217217
<li>📤 <strong>Import Data</strong> (upload expense data)</li>
218218
<li><strong>Add Category</strong> (custom categories for better organization)</li>
219219
<li><strong>Delete Category</strong> (remove unused or incorrect categories)</li>
@@ -263,12 +263,12 @@ <h2>🖼️ Screenshots</h2>
263263
justify-items: center;
264264
padding: 16px;
265265
">
266-
<img src="https://devnamdev2003.github.io/angular-expense-tracker/public/assets/appScreenshot/home.jpg" alt="home" style="width: 200px; border-radius: 8px;">
267-
<img src="https://devnamdev2003.github.io/angular-expense-tracker/public/assets/appScreenshot/add.jpg" alt="add" style="width: 200px; border-radius: 8px;">
268-
<img src="https://devnamdev2003.github.io/angular-expense-tracker/public/assets/appScreenshot/calendar.jpg" alt="calendar" style="width: 200px; border-radius: 8px;">
269-
<img src="https://devnamdev2003.github.io/angular-expense-tracker/public/assets/appScreenshot/settings.jpg" alt="settings" style="width: 200px; border-radius: 8px;">
270-
<img src="https://devnamdev2003.github.io/angular-expense-tracker/public/assets/appScreenshot/budget.jpg" alt="budget" style="width: 200px; border-radius: 8px;">
271-
<img src="https://devnamdev2003.github.io/angular-expense-tracker/public/assets/appScreenshot/list.jpg" alt="list" style="width: 200px; border-radius: 8px;">
266+
<img src="https://exwise.vercel.app/assets/appScreenshot/home.jpg" alt="home" style="width: 200px; border-radius: 8px;">
267+
<img src="https://exwise.vercel.app/assets/appScreenshot/add.jpg" alt="add" style="width: 200px; border-radius: 8px;">
268+
<img src="https://exwise.vercel.app/assets/appScreenshot/calendar.jpg" alt="calendar" style="width: 200px; border-radius: 8px;">
269+
<img src="https://exwise.vercel.app/assets/appScreenshot/settings.jpg" alt="settings" style="width: 200px; border-radius: 8px;">
270+
<img src="https://exwise.vercel.app/assets/appScreenshot/budget.jpg" alt="budget" style="width: 200px; border-radius: 8px;">
271+
<img src="https://exwise.vercel.app/assets/appScreenshot/list.jpg" alt="list" style="width: 200px; border-radius: 8px;">
272272
</div>
273273

274274

0 commit comments

Comments
 (0)