feat: add dashboard-form.component

src/app/app.config.ts

@@ -13,11 +13,13 @@ import { reportReducer } from './reports/data-access/report.reducers';
 import { ReportEffects } from './reports/data-access/report.effects';
 import { provideRouterStore, routerReducer } from '@ngrx/router-store';
 import { provideStoreDevtools } from '@ngrx/store-devtools';
+import { provideNativeDateAdapter } from '@angular/material/core';
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideRouter(routes),
     provideHttpClient(withInterceptors([authInterceptor])),
+    provideNativeDateAdapter(),
     provideAnimationsAsync(),
     provideStore({ report: reportReducer, router: routerReducer }),
     provideEffects([ReportEffects]),

src/app/reports/data-access/report.selectors.ts

@@ -13,6 +13,16 @@ export interface AppState {
   report: ReportState;
 }
 
+export const selectReportAccounts = (state: AppState) => {
+  return state.report.accounts.filter((account) => !account.deleted);
+};
+
+export const selectReportCategories = (state: AppState) => {
+  return state.report.categoryGroups
+    .flatMap((categoryGroup) => categoryGroup?.categories)
+    .filter((category) => category !== undefined);
+};
+
 export const selectReportTransactions = (state: AppState) => {
   return {
     categoryGroups: state.report.categoryGroups,

src/app/reports/feature/dashboard/dashboard.component.html

@@ -1,2 +1,2 @@
-<!-- TODO: Display the form -->
+<app-reports-dashboard-form></app-reports-dashboard-form>
 <router-outlet></router-outlet>

src/app/reports/feature/dashboard/dashboard.component.ts

@@ -1,15 +1,15 @@
 import { Component, OnInit, inject } from '@angular/core';
-import { ChartsBarVerticalComponent } from './charts/bar-vertical/bar-vertical.component';
 import { RouterOutlet } from '@angular/router';
 import { Store } from '@ngrx/store';
 import { ReportActions } from '../../data-access/report.actions';
+import { DashboardFormComponent } from './reports-form/dashboard-form.component';
 
 @Component({
   selector: 'app-dashboard',
   templateUrl: './dashboard.component.html',
   styleUrl: './dashboard.component.css',
   standalone: true,
-  imports: [ChartsBarVerticalComponent, RouterOutlet],
+  imports: [RouterOutlet, DashboardFormComponent],
 })
 export class DashboardComponent implements OnInit {
   store = inject(Store);

src/app/reports/feature/dashboard/reports-form/dashboard-form.component.html

@@ -0,0 +1,65 @@
+<form [formGroup]="dashboardForm">
+  <mat-form-field>
+    <mat-label>Enter a date range</mat-label>
+    <mat-date-range-input [rangePicker]="picker">
+      <input matStartDate placeholder="Start date" />
+      <input matEndDate placeholder="End date" />
+    </mat-date-range-input>
+    <mat-hint>MM/DD/YYYY – MM/DD/YYYY</mat-hint>
+    <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
+    <mat-date-range-picker #picker></mat-date-range-picker>
+  </mat-form-field>
+
+  <mat-form-field>
+    <mat-label>Sorting</mat-label>
+    <mat-select formControlName="sort">
+      <mat-option value="desc">Descending</mat-option>
+      <mat-option value="asc">Ascending</mat-option>
+      <mat-option value="none">None</mat-option>
+    </mat-select>
+  </mat-form-field>
+
+  <mat-form-field>
+    <mat-label>Accounts</mat-label>
+    <mat-select formControlName="account" multiple>
+      <!-- TODO: Display 'All Accounts' if all accounts are selected -->
+      <!-- TODO: Display 'Some Accounts' if at least one account is selected -->
+      <!-- TODO: Display 'No Accounts' if no accounts are selected -->
+      <!-- TODO: Allow the account group to be selected with accounts as sub selections  -->
+      <!-- <mat-select-trigger>
+        {{ account.value?.[0] || '' }}
+        @if ((account.value?.length || 0) > 1) {
+          <span class="example-additional-selection">
+            (+{{ (account.value?.length || 0) - 1 }}
+            {{ account.value?.length === 2 ? 'other' : 'others' }})
+          </span>
+        }
+      </mat-select-trigger> -->
+      @for (account of accounts$ | async; track account.id) {
+        <mat-option [value]="account.id">{{ account.name }}</mat-option>
+      }
+    </mat-select>
+  </mat-form-field>
+
+  <!-- TODO: Display 'All Categories' if all categories are selected -->
+  <!-- TODO: Display 'Some Categories' if at least one category is selected -->
+  <!-- TODO: Display 'No Categories' if no category are selected -->
+  <!-- TODO: Allow the category group to be selected with categories as sub selections  -->
+  <mat-form-field>
+    <mat-label>Categories</mat-label>
+    <mat-select formControlName="category" multiple>
+      <!-- <mat-select-trigger>
+        {{ category.value?.[0] || '' }}
+        @if ((category.value?.length || 0) > 1) {
+          <span class="example-additional-selection">
+            (+{{ (category.value?.length || 0) - 1 }}
+            {{ category.value?.length === 2 ? 'other' : 'others' }})
+          </span>
+        }
+      </mat-select-trigger> -->
+      @for (category of categories$ | async; track category?.id) {
+        <mat-option [value]="category?.id">{{ category?.name }}</mat-option>
+      }
+    </mat-select>
+  </mat-form-field>
+</form>

src/app/reports/feature/dashboard/reports-form/dashboard-form.component.ts

@@ -0,0 +1,47 @@
+import { Component, inject, OnInit } from '@angular/core';
+import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { Store } from '@ngrx/store';
+import {
+  selectReportAccounts,
+  selectReportCategories,
+} from '../../../data-access/report.selectors';
+import { Observable } from 'rxjs';
+import { Category } from '../../../../shared/services/ynab/interfaces/categories/category';
+import { MatSelectModule } from '@angular/material/select';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { AsyncPipe } from '@angular/common';
+import { Account } from '../../../../shared/services/ynab/interfaces/accounts/account';
+
+@Component({
+  selector: 'app-reports-dashboard-form',
+  standalone: true,
+  templateUrl: './dashboard-form.component.html',
+  styleUrl: './dashboard-form.component.scss',
+  imports: [
+    MatSelectModule,
+    MatFormFieldModule,
+    MatDatepickerModule,
+    ReactiveFormsModule,
+    AsyncPipe,
+  ],
+})
+export class DashboardFormComponent implements OnInit {
+  store = inject(Store);
+
+  dashboardForm!: FormGroup;
+
+  categories$!: Observable<(Category | undefined)[]>;
+  accounts$!: Observable<Account[]>;
+
+  ngOnInit(): void {
+    this.dashboardForm = new FormGroup({
+      sort: new FormControl('desc'),
+      category: new FormControl([]),
+      account: new FormControl([]),
+    });
+
+    this.categories$ = this.store.select(selectReportCategories);
+    this.accounts$ = this.store.select(selectReportAccounts);
+  }
+}