cleanup frontend (#5)

there are new formatting rules ):
M1chaCH · Jan 7, 2024 · 8dbbbe2 · 8dbbbe2
1 parent 0355528
commit 8dbbbe2
Show file tree

Hide file tree

Showing 134 changed files with 2,399 additions and 2,152 deletions.
diff --git a/README.md b/README.md
@@ -21,6 +21,7 @@ _should be publicly available at: 01.08.2024_
     - change only for this transaction and automatically remove matching keyword. bulk changes can be made in configuration page.
   - [ ] implement transaction splitting
     - you can split a transaction into multiple tags, this way, f.e. cash retrieval can be split into the actual tags. 
+  - [ ] fix / cleanup import behaviour
 
 ### Configuration Page
 - [ ] CRUD for tags, including bulk changes into the past
@@ -69,7 +70,7 @@ _should be publicly available at: 01.08.2024_
   - one db connection per request
   - limit max requests handled at the same time (maybe make "getConnection" blocking if no "slot" is open)
 - [x] one db transaction per request, if one statement fails rollback all changes from request
-- [ ] fix page transitions
+- [x] fix page transitions
   - page WAS positioned absolutely, removing this broke transitions
 - [ ] allow opening dialog in dialog
 - [ ] TODOs all over the project for improvements
@@ -79,6 +80,8 @@ _should be publicly available at: 01.08.2024_
 - [ ] add support for more banks
   - post, migros. NAB, UBS, ZKB, CS
 - [x] fronted: handle unauthorized response (send to login)
+- [x] frontend: generalize zindex 
+- [ ] frontend: and debounce times
 
 (GPT finance adviser)
 - create a custom GPT that knows how SwissBudget works and knows how the datastructures is built

diff --git a/frontend/angular.json b/frontend/angular.json
@@ -7,7 +7,9 @@
       "projectType": "application",
       "schematics": {
         "@schematics/angular:component": {
-          "style": "scss"
+          "style": "scss",
+          "standalone": false,
+          "skipTests": true
         }
       },
       "root": "",

diff --git a/frontend/src/app/animations.ts b/frontend/src/app/animations.ts
@@ -1,110 +1,129 @@
-import {animate, animateChild, group, query, state, style, transition, trigger} from "@angular/animations";
-import {Directive, Input, TemplateRef, ViewContainerRef} from "@angular/core";
+import {animate, animateChild, group, query, state, style, transition, trigger} from '@angular/animations';
+import {Directive, Input, TemplateRef, ViewContainerRef} from '@angular/core';
 
 
 export const fadePageTransition =
-    trigger('routeChangeTrigger', [
-      transition('* <=> *', [
-        query(":enter", [ // initial style for entering child
-          style({
-            opacity: 0,
-          })
-        ], {optional: true}),
-        query(":leave", animateChild(), {optional: true}), // run all animations in leaving child comp.
-        group([
-          query(":leave", animate("250ms ease-in-out", style({
-            opacity: 0,
-          })), {optional: true}),
-          query(":enter", animate("250ms 150ms ease-in-out", style({
-            opacity: 1,
-          })), {optional: true}),
-        ]),
-      ])
-    ]);
+  trigger('routeChangeTrigger', [
+    transition('* <=> *', [
+      query(':enter', [ // initial style for entering child
+        style({
+                opacity: 0,
+                position: 'absolute',
+                top: '0',
+                right: '0',
+                bottom: '0',
+                left: '0',
+              }),
+      ], {optional: true}),
+      query(':leave', animateChild(), {optional: true}), // run all animations in leaving child comp.
+      group([
+              query(':leave', animate('500ms ease-in-out', style({
+                                                                   opacity: 0,
+                                                                 })), {optional: true}),
+              query(':enter', animate('500ms 200ms ease-in-out', style({
+                                                                         opacity: 1,
+                                                                       })), {optional: true}),
+            ]),
+    ]),
+  ]);
 
 export const switchAnimation =
-    trigger('switchAnimation', [
-      transition('* <=> *', [
-        query(':enter', [
-          style({
-            opacity: 0,
-            transform: 'translateX(-150px)',
-          })
-        ], {optional: true}),
-        query(':leave', animateChild(), {optional: true}),
-        group([
-          query(':leave', animate('250ms ease-out', style({
-            opacity: 0,
-            transform: 'translateX(150px)',
-          })), {optional: true}),
-          query(':enter', animate('250ms ease-out', style({
-            opacity: 1,
-            transform: 'translateX(0)',
-          })), {optional: true}),
-        ]),
-      ])
-    ]);
+  trigger('switchAnimation', [
+    transition('* <=> *', [
+      query(':enter', [
+        style({
+                opacity: 0,
+                transform: 'translateX(-150px)',
+              }),
+      ], {optional: true}),
+      query(':leave', animateChild(), {optional: true}),
+      group([
+              query(':leave', animate('250ms ease-out', style({
+                                                                opacity: 0,
+                                                                transform: 'translateX(150px)',
+                                                              })), {optional: true}),
+              query(':enter', animate('250ms ease-out', style({
+                                                                opacity: 1,
+                                                                transform: 'translateX(0)',
+                                                              })), {optional: true}),
+            ]),
+    ]),
+  ]);
 
 export const stepSliderAnimation =
-    trigger("stepSliderAnimation", [
-      transition(":increment", group([
-        query(":leave", [
-          style({transform: "translateX(0)"}),
-          animate("300ms ease-in-out", style({transform: "translateX(-100%)"}))
-        ]),
-        query(":enter", [
-          style({transform: "translateX(100%)"}),
-          animate("300ms ease-in-out", style({transform: "translateX(0)"}))
-        ]),
-      ])),
+  trigger('stepSliderAnimation', [
+    transition(':increment', group([
+                                     query(':leave', [
+                                       style({transform: 'translateX(0)'}),
+                                       animate('300ms ease-out', style({transform: 'translateX(-100%)'})),
+                                     ]),
+                                     query(':enter', [
+                                       style({
+                                               transform: 'translateX(100%)',
+                                               position: 'absolute',
+                                               top: '0',
+                                               right: '0',
+                                               bottom: '0',
+                                               left: '0',
+                                             }),
+                                       animate('300ms 50ms ease-out', style({transform: 'translateX(0)'})),
+                                     ]),
+                                   ])),
 
-      transition(":decrement", group([
-        query(":leave", [
-          style({transform: "translateX(0)"}),
-          animate("300ms ease-in-out", style({transform: "translateX(100%)"}))
-        ]),
-        query(":enter", [
-          style({transform: "translateX(-100%)"}),
-          animate("300ms ease-in-out", style({transform: "translateX(0)"}))
-        ]),
-      ])),
-    ]);
+    transition(':decrement', group([
+                                     query(':leave', [
+                                       style({transform: 'translateX(0)'}),
+                                       animate('300ms ease-out', style({transform: 'translateX(100%)'})),
+                                     ]),
+                                     query(':enter', [
+                                       style({
+                                               transform: 'translateX(-100%)',
+                                               position: 'absolute',
+                                               top: '0',
+                                               right: '0',
+                                               bottom: '0',
+                                               left: '0',
+                                             }),
+                                       animate('300ms 50ms ease-out', style({transform: 'translateX(0)'})),
+                                     ]),
+                                   ])),
+  ]);
 
 export const openCloseAnimation =
-    trigger("openClose", [
-      state("open", style({
-        height: "*",
-        opacity: 1,
-      })),
-      state("closed", style({
-        height: "0px",
-        opacity: 0.6,
-        padding: 0,
-        margin: 0,
-      })),
-      transition("open => closed", [
-        animate("100ms ease-in"),
-      ]),
-      transition("closed => open", [
-        animate("150ms ease-out"),
-      ]),
-    ]);
+  trigger('openClose', [
+    state('open', style({
+                          height: '*',
+                          opacity: 1,
+                        })),
+    state('closed', style({
+                            height: '0px',
+                            opacity: 0.6,
+                            padding: 0,
+                            margin: 0,
+                          })),
+    transition('open => closed', [
+      animate('100ms ease-in'),
+    ]),
+    transition('closed => open', [
+      animate('150ms ease-out'),
+    ]),
+  ]);
 
 
 // util for angular, if I replace the text content of a h1 f.ex. then it won't register a new
 // entry / leave element it will just change the content, therefore, the queries in the animation
 // don't work. this directive manually deletes the old element and creates a new element
 // 🤦‍♂️
 @Directive({
-  selector: '[contentReplacer]'
-})
+             selector: '[contentReplacer]',
+           })
 export class ContentReplacerDirective {
   private currentValue: any;
   private hasView = false;
 
   constructor(
-      private viewContainer: ViewContainerRef,
-      private templateRef: TemplateRef<any>
+    private viewContainer: ViewContainerRef,
+    private templateRef: TemplateRef<any>,
   ) {
   }
 

diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts
@@ -1,41 +1,41 @@
-import {NgModule} from "@angular/core";
-import {RouterModule, Routes} from "@angular/router";
-import {BudgetPageComponent} from "./pages/budget.page/budget.page.component";
-import {ConfigurationPageComponent} from "./pages/configuration.page/configuration.page.component";
-import {HelpPageComponent} from "./pages/help.page/help.page.component";
-import {HomePageComponent} from "./pages/home.page/home.page.component";
-import {TransactionPageComponent} from "./pages/transaction.page/transaction.page.component";
-import {LoginPageComponent} from "./pages/welcome.page/login.page.component";
-import {MfaSubpageComponent} from "./pages/welcome.page/mfa.subpage/mfa.subpage.component";
-import {SetupSubpageComponent} from "./pages/welcome.page/setup.subpage/setup.subpage.component";
-import {authenticationGuard} from "./services/auth.service";
+import {NgModule} from '@angular/core';
+import {RouterModule, Routes} from '@angular/router';
+import {BudgetPageComponent} from './pages/budget.page/budget.page.component';
+import {ConfigurationPageComponent} from './pages/configuration.page/configuration.page.component';
+import {HelpPageComponent} from './pages/help.page/help.page.component';
+import {HomePageComponent} from './pages/home.page/home.page.component';
+import {LoginPageComponent} from './pages/login.page/login.page.component';
+import {MfaSubpageComponent} from './pages/login.page/mfa.subpage/mfa.subpage.component';
+import {SetupSubpageComponent} from './pages/login.page/setup.subpage/setup.subpage.component';
+import {TransactionPageComponent} from './pages/transaction.page/transaction.page.component';
+import {authenticationGuard} from './services/auth.service';
 
 export const pages = {
-  LOGIN: "login",
+  LOGIN: 'login',
   login: {
-    SETUP: "setup",
-    MFA: "mfa",
+    SETUP: 'setup',
+    MFA: 'mfa',
   },
-  HOME: "home",
-  BUDGET: "budget",
-  TRANSACTIONS: "transactions",
-  SAVE: "save",
-  CONFIGURATION: "configuration",
-  PROFILE: "profile",
-  HELP: "help",
-}
+  HOME: 'home',
+  BUDGET: 'budget',
+  TRANSACTIONS: 'transactions',
+  SAVE: 'save',
+  CONFIGURATION: 'configuration',
+  PROFILE: 'profile',
+  HELP: 'help',
+};
 
-export const APP_ROOT = "app"
+export const APP_ROOT = 'app';
 
 const routes: Routes = [
-  {path: APP_ROOT, redirectTo: pages.HOME, pathMatch: "full"},
+  {path: APP_ROOT, redirectTo: pages.HOME, pathMatch: 'full'},
   {
     path: pages.LOGIN,
     component: LoginPageComponent,
     children: [
       {path: pages.login.SETUP, component: SetupSubpageComponent},
       {path: pages.login.MFA, component: MfaSubpageComponent},
-    ]
+    ],
   },
   {
     path: APP_ROOT,
@@ -45,15 +45,15 @@ const routes: Routes = [
       {path: pages.BUDGET, component: BudgetPageComponent},
       {path: pages.TRANSACTIONS, component: TransactionPageComponent},
       {path: pages.CONFIGURATION, component: ConfigurationPageComponent},
-    ]
+    ],
   },
   {path: `${APP_ROOT}/${pages.HELP}`, component: HelpPageComponent},
-  {path: "**", redirectTo: `${APP_ROOT}/${pages.HOME}`, pathMatch: "full"},
+  {path: '**', redirectTo: `${APP_ROOT}/${pages.HOME}`, pathMatch: 'full'},
 ];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes)],
-  exports: [RouterModule]
-})
+            imports: [RouterModule.forRoot(routes)],
+            exports: [RouterModule],
+          })
 export class AppRoutingModule {
 }