Feat/design improvements (#29)

openartcoded · Oct 1, 2022 · f728094 · f728094
1 parent 780a88a
commit f728094
Show file tree

Hide file tree

Showing 11 changed files with 63 additions and 48 deletions.
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -87,6 +87,7 @@ import {
   faListOl,
   faItalic,
   faWarning,
+  faCalendar,
 } from '@fortawesome/free-solid-svg-icons';
 import { faGithub, faLinkedin } from '@fortawesome/free-brands-svg-icons';
 import { ServiceWorkerModule } from '@angular/service-worker';
@@ -149,6 +150,7 @@ export class AppModule {
       faBold,
       faListOl,
       faItalic,
+      faCalendar,
       faPhone,
       faBirthdayCake,
       faMailBulk,
@@ -163,6 +165,7 @@ export class AppModule {
       faDollarSign,
       faTasks,
       faInfoCircle,
+      faCalendar,
       faQuestionCircle,
       faMoneyBill,
       faEnvelope,

diff --git a/src/app/core/models/invoice.ts b/src/app/core/models/invoice.ts
@@ -5,11 +5,15 @@ import { RateType } from './common';
 export interface InvoiceSummary {
   graphs: PlotlyGraph[];
   totalAmountOfWork: number;
-  totalInvoicesThisYear: number;
-  totalAmountOfWorkThisYear: number;
   totalExclVat: number;
-  totalExclVatThisYear: number;
-  numberOfInvoicesThisYear: number;
+  totalInvoices: number;
+  invoicesGroupByYear: Map<number, InvoicePerYearSummary>
+}
+
+export interface InvoicePerYearSummary {
+  totalAmountOfWork:number;
+   totalExclVat: number;
+   numberOfInvoices: number;
 }
 
 export interface Invoice {

diff --git a/...features/administrative-document/document-search-form/document-search-form.component.html b/...features/administrative-document/document-search-form/document-search-form.component.html
@@ -27,16 +27,16 @@
           </div>
       </div>
       <div class="mb-1 row">
-        <label class="col-sm-2 col-form-label" for="dateBefore">Before</label>
+        <label class="col-sm-2 col-form-label" for="dateAfter">From</label>
         <div class="col-sm-10">
-          <input type="datetime-local" class="form-control" id="dateBefore" formControlName="dateBefore"
-          >
+          <input type="datetime-local" class="form-control" id="dateAfter" formControlName="dateAfter">
         </div>
       </div>
       <div class="mb-1 row">
-        <label class="col-sm-2 col-form-label" for="dateAfter">After</label>
+        <label class="col-sm-2 col-form-label" for="dateBefore">To</label>
         <div class="col-sm-10">
-          <input type="datetime-local" class="form-control" id="dateAfter" formControlName="dateAfter">
+          <input type="datetime-local" class="form-control" id="dateBefore" formControlName="dateBefore"
+          >
         </div>
       </div>
       <hr>

diff --git a/src/app/features/fee/fee-search-form/fee-search-form.component.html b/src/app/features/fee/fee-search-form/fee-search-form.component.html
@@ -41,15 +41,15 @@
           </div>
         </div>
         <div class="mb-1 row">
-          <label class="col-sm-2 col-form-label" for="feeDateBefore">Before</label>
+          <label class="col-sm-2 col-form-label" for="feeDateAfter">From</label>
           <div class="col-sm-10">
-            <input type="datetime-local" class="form-control" id="feeDateBefore" formControlName="feeDateBefore" />
+            <input type="datetime-local" class="form-control" id="feeDateAfter" formControlName="feeDateAfter" />
           </div>
         </div>
         <div class="mb-1 row">
-          <label class="col-sm-2 col-form-label" for="feeDateAfter">After</label>
+          <label class="col-sm-2 col-form-label" for="feeDateBefore">To</label>
           <div class="col-sm-10">
-            <input type="datetime-local" class="form-control" id="feeDateAfter" formControlName="feeDateAfter" />
+            <input type="datetime-local" class="form-control" id="feeDateBefore" formControlName="feeDateBefore" />
           </div>
         </div>
         <div class="d-flex justify-content-end">

diff --git a/src/app/features/file-upload/file-upload-search-form/file-upload-search-form.component.html b/src/app/features/file-upload/file-upload-search-form/file-upload-search-form.component.html
@@ -14,16 +14,16 @@
         </div>
       </div>
       <div class="mb-1 row">
-        <label class="col-sm-2 col-form-label" for="dateBefore">Before</label>
+        <label class="col-sm-2 col-form-label" for="dateAfter">From</label>
         <div class="col-sm-10">
-          <input type="datetime-local" class="form-control" id="dateBefore" formControlName="dateBefore"
-          >
+          <input type="datetime-local" class="form-control" id="dateAfter" formControlName="dateAfter">
         </div>
       </div>
       <div class="mb-1 row">
-        <label class="col-sm-2 col-form-label" for="dateAfter">After</label>
+        <label class="col-sm-2 col-form-label" for="dateBefore">To</label>
         <div class="col-sm-10">
-          <input type="datetime-local" class="form-control" id="dateAfter" formControlName="dateAfter">
+          <input type="datetime-local" class="form-control" id="dateBefore" formControlName="dateBefore"
+          >
         </div>
       </div>
       <div class="mb-1 row">

diff --git a/src/app/features/file-upload/file-upload.module.ts b/src/app/features/file-upload/file-upload.module.ts
@@ -4,10 +4,9 @@ import { FileUploadTableComponent } from './file-upload-table/file-upload-table.
 import { SharedModule } from '@shared/shared.module';
 import { FileUploadRoutingModule } from './file-upload-routing.module';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import { NgbCollapseModule, NgbDropdownModule, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgbCollapseModule, NgbDropdownModule, NgbPaginationModule,  } from '@ng-bootstrap/ng-bootstrap';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { FileUploadSearchFormComponent } from './file-upload-search-form/file-upload-search-form.component';
-
 @NgModule({
   declarations: [FileUploadTableComponent, FileUploadSearchFormComponent],
   imports: [

diff --git a/src/app/features/user-area/home/home.component.html b/src/app/features/user-area/home/home.component.html
@@ -2,7 +2,7 @@
 
 <ng-container *ngIf="loaded">
 
-  <div class="d-lg-flex  align-items-stretch">
+  <div class="d-lg-flex justify-content-between">
     <div class="col col-lg-3 me-2">
       <app-company-stamp></app-company-stamp>
       <app-todo-list></app-todo-list>
@@ -12,7 +12,7 @@
       <app-dossier-summary></app-dossier-summary>
       <app-memo-date></app-memo-date>
     </div>
-    <div class="col me-2">
+    <div class="col">
       <app-invoice-summary></app-invoice-summary>
     </div>
   </div>

diff --git a/src/app/features/user-area/invoice-summary/invoice-summary.component.html b/src/app/features/user-area/invoice-summary/invoice-summary.component.html
@@ -10,24 +10,26 @@
 
     <ul class="mb-1 list-group">
       <li class="list-group-item bg-light">
-        <strong class="text-uppercase text-secondary">This year</strong>
+        <select [(ngModel)]="selectedYear" class="form-select">
+          <option *ngFor="let summaryPerYear of summary.invoicesGroupByYear | keyvalue" [ngValue]="summaryPerYear.key">{{summaryPerYear.key}}</option>
+        </select>
       </li>
-      <li class="list-group-item">
+      <li class="list-group-item" *ngIf="selectedYear">
         <div class="d-flex justify-content-between">
           <strong class="text-uppercase text-break">Number of Invoices</strong>
-          <strong>{{ summary.numberOfInvoicesThisYear }}</strong>
+          <strong>{{ summary.invoicesGroupByYear?.get(selectedYear)?.numberOfInvoices || 0 }}</strong>
         </div>
       </li>
       <li class="list-group-item">
         <div class="d-flex justify-content-between">
           <strong class="text-uppercase">Total worked (days)</strong>
-          <strong class="text-uppercase">{{ summary.totalAmountOfWorkThisYear | number: '1.2-2' }}</strong>
+          <strong class="text-uppercase">{{ (summary.invoicesGroupByYear?.get(selectedYear)?.totalAmountOfWork || 0) | number: '1.2-2' }}</strong>
         </div>
       </li>
       <li class="list-group-item">
         <div class="d-flex justify-content-between">
           <strong class="text-uppercase">Total excl. VAT</strong>
-          <strong class="text-uppercase">{{ summary.totalExclVatThisYear | currency: '€' }}</strong>
+          <strong class="text-uppercase">{{ (summary.invoicesGroupByYear?.get(selectedYear)?.totalExclVat || 0) | currency: '€'  }}</strong>
         </div>
       </li>
       <li class="list-group-item bg-light">
@@ -36,7 +38,7 @@
       <li class="list-group-item">
         <div class="d-flex justify-content-between">
           <strong class="text-uppercase">Number of Invoices</strong>
-          <strong>{{ summary.totalInvoicesThisYear }}</strong>
+          <strong>{{ summary.totalInvoices }}</strong>
         </div>
       </li>
       <li class="list-group-item">

diff --git a/src/app/features/user-area/invoice-summary/invoice-summary.component.ts b/src/app/features/user-area/invoice-summary/invoice-summary.component.ts
@@ -13,7 +13,8 @@ import { DateUtils } from '@core/utils/date-utils';
 })
 export class InvoiceSummaryComponent implements OnInit, OnDestroy {
   summary$: Observable<InvoiceSummary>;
-
+  selectedYear: number = DateUtils.getCurrentYear();
+
   constructor(
     private invoiceService: InvoiceService,
     @Inject(PLATFORM_ID) private platformId: any
@@ -84,17 +85,27 @@ export class InvoiceSummaryComponent implements OnInit, OnDestroy {
         const data = [average, amountWorked];
         const graphs = [{ data: data, config: config, layout: layout('Earnings/Working days') }];
 
-        const invoicesThisYear = invoicesOrderedByDateAsc.filter((i) => i.invoiceTable?.some(this.filterByYear));
+        const invoicesGroupByYear = invoicesOrderedByDateAsc.reduce((group, invoice) => {
+          const dateOfInvoice = new Date(invoice.dateOfInvoice);
+          const year = dateOfInvoice.getFullYear();
+          const { totalAmountOfWork, totalExclVat,numberOfInvoices} = group.get(year) || {
+            totalAmountOfWork: 0,
+            totalExclVat: 0,
+            numberOfInvoices: 0
+          };
+
+          group.set(year, {
+            totalAmountOfWork: totalAmountOfWork + this.findAmount(invoice),
+            totalExclVat: totalExclVat + invoice.subTotal,
+            numberOfInvoices: numberOfInvoices + 1,
+          });
+          return group;
+        }, new Map());
+
         return {
-          graphs: graphs,
-          totalInvoicesThisYear: invoicesOrderedByDateAsc.length,
-          totalAmountOfWorkThisYear: invoicesThisYear
-            .map(this.findAmount)
-            .reduce((previousValue, currentValue) => previousValue + currentValue, 0),
-          totalExclVatThisYear: invoicesThisYear
-            .map((i) => i.subTotal)
-            .reduce((previousValue, currentValue) => previousValue + currentValue, 0),
-          numberOfInvoicesThisYear: invoicesThisYear.length,
+          invoicesGroupByYear,
+          graphs,
+          totalInvoices: invoicesOrderedByDateAsc.length,
           totalAmountOfWork: invoicesOrderedByDateAsc
             .map(this.findAmount)
             .reduce((previousValue, currentValue) => previousValue + currentValue, 0),
@@ -127,12 +138,6 @@ export class InvoiceSummaryComponent implements OnInit, OnDestroy {
     return 0;
   }
 
-  filterByYear(invoice) {
-    let currentYear = DateUtils.getCurrentYear().toString();
-    const year = invoice.period?.split('/')[1];
-    return year === currentYear;
-  }
-
   generateGraphData(invoicesOrderedByDateAsc: Invoice[]): GraphData[] {
     const graphInvoices = invoicesOrderedByDateAsc
       .map((invoice) => {

diff --git a/src/app/features/user-area/user-area.module.ts b/src/app/features/user-area/user-area.module.ts
@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import { ReactiveFormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { HomeComponent } from './home/home.component';
 import { SharedModule } from '@shared/shared.module';
 import { UserAreaRoutingModule } from './user-area-routing.module';
@@ -42,6 +42,7 @@ import { CompanyStampComponent } from './company-stamp/company-stamp.component';
     SharedModule,
     FontAwesomeModule,
     NgbCollapseModule,
+    FormsModule,
     PlotlyUniversalModule,
     NgbAccordionModule,
     AutosizeModule,

diff --git a/src/app/shared/title/title.component.html b/src/app/shared/title/title.component.html
@@ -1,4 +1,5 @@
-<div [class.pt-3]="!noPaddingTop">
+<div [class.pt-3]="!noPaddingTop" class=" text-dark opacity-50">
   <span [class]="titleClass" [class.text-uppercase]="uppercase">{{ title }}</span>
 </div>
-<hr />
+  <hr class="mt-1 pt-0 mb-2 border border-primary border-2 opacity-50">
+