Adding lists (#5)

* ENV NODE_ENV=production * Initial list-view and a bit of restructuring * List view + list view edit + list view in app container * Some style fixes, search results use routerlink * More list view implementation * Many fixes to the item addition flow * More work on share dynamics * Delete list and other small fixes * less logs * Fixes re #2 * A different approach for making cards clickable (re #2) * Fixes for result card * Different approach for positioning the dialog * Modal layout * Restore search result interaction * Mobile layout fixes * Share + more mobile tweaks * visual qa * Public lists * Fix seo for lists page * Restore main page tutorial * Slightly improve the sharing interface + og image
OpenBudget · Dec 28, 2023 · 9039a51 · 9039a51
1 parent 6e00755
commit 9039a51
Show file tree

Hide file tree

Showing 142 changed files with 3,655 additions and 638 deletions.
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -6,7 +6,7 @@
             "type": "firefox",
             "request": "launch",
             "reAttach": true,
-            "url": "http://localhost:4200/",
+            "url": "http://127.0.0.1:4200/",
             "pathMappings": [
                 {
                     "url": "webpack:///projects/budgetkey/src/",

diff --git a/Dockerfile b/Dockerfile
@@ -21,4 +21,6 @@ RUN npm install
 
 COPY  --from=build /app/dist dist
 
+ENV NODE_ENV=production
+
 ENTRYPOINT [ "node", "/app/dist/budgetkey/server/main.js" ]
diff --git a/angular.json b/angular.json
@@ -89,7 +89,10 @@
               "browserTarget": "budgetkey:build:development"
             }
           },
-          "defaultConfiguration": "development"
+          "defaultConfiguration": "development",
+          "options": {
+            "host": "127.0.0.1"
+          }
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",

diff --git a/projects/budgetkey/src/app/about/about.module.ts b/projects/budgetkey/src/app/about/about.module.ts
@@ -5,6 +5,7 @@ import { AboutRoutingModule } from './about-routing.module';
 import { AboutPageComponent } from './about-page/about-page.component';
 import { CommonComponentsModule } from '../common-components/common-components.module';
 import { HttpClientModule } from '@angular/common/http';
+import { ListComponentsModule } from '../list-components/list-components.module';
 
 
 @NgModule({
@@ -14,6 +15,7 @@ import { HttpClientModule } from '@angular/common/http';
   imports: [
     CommonModule,
     CommonComponentsModule,
+    ListComponentsModule,
     HttpClientModule,
     AboutRoutingModule
   ]

diff --git a/projects/budgetkey/src/app/app-routing.module.ts b/projects/budgetkey/src/app/app-routing.module.ts
@@ -8,6 +8,7 @@ const routes: Routes = [
   { path: 'i', loadChildren: () => import('./item/item.module').then(m => m.ItemModule) },
   { path: 'about', loadChildren: () => import('./about/about.module').then(m => m.AboutModule) },
   { path: 'p', loadChildren: () => import('./profile/profile.module').then(m => m.ProfileModule) },
+  { path: 'l', loadChildren: () => import('./list-page/list-page.module').then(m => m.ListPageModule) },
   { path: 'not-found', component: PageNotFoundComponent },
   { path: '**', pathMatch: 'full', component: PageNotFoundComponent },
 ];
@@ -16,6 +17,7 @@ const routes: Routes = [
   imports: [RouterModule.forRoot(routes, {
     initialNavigation: 'enabledBlocking',
     anchorScrolling: 'enabled',
+    // enableTracing: true,
 })],
   exports: [RouterModule]
 })

diff --git a/projects/budgetkey/src/app/app.module.ts b/projects/budgetkey/src/app/app.module.ts
@@ -7,6 +7,9 @@ import { CommonComponentsModule } from './common-components/common-components.mo
 import { NGX_SEO_CONFIG_TOKEN, NgxSeoModule } from '@avivharuzi/ngx-seo';
 import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
 import { AppErrorHandler } from './app-error-handler';
+import { ListComponentsModule } from './list-components/list-components.module';
+import { provideRouter, withDebugTracing } from '@angular/router';
+import { ListPageModule } from './list-page/list-page.module';
 
 @NgModule({
   declarations: [
@@ -17,11 +20,13 @@ import { AppErrorHandler } from './app-error-handler';
     BrowserModule,
     AppRoutingModule,
     CommonComponentsModule,
+    ListComponentsModule,
     NgxSeoModule.forRoot(),
+    ListPageModule,
   ],
   providers: [
     provideClientHydration(),
-    {provide: ErrorHandler, useClass: AppErrorHandler},
+    // {provide: ErrorHandler, useClass: AppErrorHandler},
     {provide: NGX_SEO_CONFIG_TOKEN, useValue: {
       changeTitle: (title: any) => title,
       preserve: true,

diff --git a/projects/budgetkey/src/app/charts/chart-plotly/chart-plotly.component.ts b/projects/budgetkey/src/app/charts/chart-plotly/chart-plotly.component.ts
@@ -60,7 +60,6 @@ export class ChartPlotlyComponent implements OnChanges, AfterViewInit {
     }
 
     el.innerHTML = '';
-    console.log('plotly new plot', this.data, layout, this.config);
     this.plotly.newPlot(el, this.data, layout, Object.assign({responsive: true}, this.config));
     el.querySelectorAll('svg').forEach((svg) => {
       svg.setAttribute('alt', this.data.title || 'diagram');

diff --git a/projects/budgetkey/src/app/common-components/auth/auth.component.html b/projects/budgetkey/src/app/common-components/auth/auth.component.html
@@ -16,8 +16,9 @@
             </svg>
         </div>
         <div *ngIf="user && user.authenticated" class='menu'>
-            <a class='menu-line' (activated)="profile()" clickOnReturn>התראות שמורות</a>
-            <a class='menu-line' (activated)="profile()" clickOnReturn>פרופיל אישי</a>
+            <a class='menu-line' (activated)="profile()" *ngIf='hasProfile' clickOnReturn>התראות שמורות</a>
+            <a class='menu-line' (activated)="myLists()" clickOnReturn *ngIf='lists.curatedLists().length > 0'>הרשימות שלי</a>
+            <!-- <a class='menu-line' (activated)="profile()" clickOnReturn>פרופיל אישי</a> -->
             <a class='menu-line' (activated)="logout()" clickOnReturn>התנתקות</a>
         </div>
 </div>
diff --git a/projects/budgetkey/src/app/common-components/auth/auth.component.less b/projects/budgetkey/src/app/common-components/auth/auth.component.less
@@ -46,7 +46,7 @@
     background-color: #FFFFFF;
     box-shadow: 0 2px 10px 0 rgba(0,0,0,0.1);
     display: none;
-    z-index: 10;
+    z-index: 100;
 }
 
 .widget:hover .menu, .widget:focus-within .menu {

diff --git a/projects/budgetkey/src/app/common-components/auth/auth.component.ts b/projects/budgetkey/src/app/common-components/auth/auth.component.ts
@@ -1,46 +1,47 @@
 import {
+    AfterViewInit,
   Component, Input, OnInit
 } from '@angular/core';
 import { AuthService } from './auth.service';
 import { Observable } from 'rxjs';
 import { PlatformService } from '../platform.service';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { Router } from '@angular/router';
+import { ListsService } from '../services/lists.service';
 
-
+@UntilDestroy()
 @Component({
     selector: 'app-auth',
     templateUrl: './auth.component.html',
     styleUrls: ['./auth.component.less']
 })
-export class AuthComponent implements OnInit {
+export class AuthComponent implements AfterViewInit {
     public user: any;
-    private next: string;
 
     @Input() theme: any;
 
-    constructor(private auth: AuthService, private ps: PlatformService) {}
-
-    ngOnInit() {
-        this.ps.browser(() => {
-            this.next = document.location.href;
-            this.setUser(this.auth.check(this.next));
+    constructor(private auth: AuthService, private ps: PlatformService, private router: Router, public lists: ListsService) {
+        this.auth.getUser().pipe(
+            untilDestroyed(this)
+        ).subscribe((user) => {
+            this.user = user;
         });
     }
 
-    setUser(o: Observable<any>) {
-        o.subscribe((user: any) => {
-            this.user = user;
+    ngAfterViewInit() {
+        this.ps.browser(() => {
+            this.auth.check().subscribe();
         });
     }
 
     login() {
         if (this.user && this.user.providers) {
             const href = this.user.providers.google || this.user.providers.github;
             if (href && href.url) {
-                if (document.location.href === this.next) {
+                if (document.location.href === this.auth.getNext()) {
                     window.location.href = href.url;
                 } else {
-                    this.next = document.location.href;
-                    this.auth.check(this.next)
+                    this.auth.check()
                         .subscribe((user) => {
                             this.user = user;
                             this.login();
@@ -51,16 +52,22 @@ export class AuthComponent implements OnInit {
     }
 
     logout() {
-        this.auth.logout(document.location.href);
+        this.auth.logout().subscribe((user) => {
+            console.log('logged out!');
+        });
     }
 
+    get hasProfile() {
+        return this.auth?.authConfig?.profilePagePath || null;
+    }
+
     profile() {
         if (this.auth.authConfig.profilePagePath) {
-            let params = '';
-            if (this.theme && this.theme.themeId) {
-                params = '?theme=' + this.theme.themeId;
-            }
-            window.location.href = this.auth.authConfig.profilePagePath + params;
+            this.router.navigate(this.auth.authConfig.profilePagePath, { queryParamsHandling: 'preserve' });
         }
     }
+
+    myLists() {
+        this.router.navigate(['/l', this.user.profile.id], { queryParamsHandling: 'preserve' });
+    }
 }
diff --git a/projects/budgetkey/src/app/common-components/auth/auth.service.ts b/projects/budgetkey/src/app/common-components/auth/auth.service.ts
@@ -1,7 +1,9 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
-import { Observable, ReplaySubject, tap } from 'rxjs';
+import { Observable, ReplaySubject, tap, timer } from 'rxjs';
 import { filter, first, switchMap } from 'rxjs/operators';
+import { Location } from '@angular/common';
+import { PlatformService } from '../platform.service';
 
 @Injectable()
 export class AuthService {
@@ -10,15 +12,16 @@ export class AuthService {
     private jwtQueryParam: string;
     private user = new ReplaySubject<any>();
     private jwt = new ReplaySubject<any>();
+    private next: string | null = null;
 
     public authConfig = {
         authServerUrl: 'https://next.obudget.org',
         jwtLocalStorageKey: 'jwt',
         jwtQueryParam: 'jwt',
-        profilePagePath: '/p/'
+        profilePagePath: ['/p']
     };    
 
-    constructor(private http: HttpClient) {
+    constructor(private http: HttpClient, private platform: PlatformService) {
         this.authServerUrl = this.authConfig.authServerUrl;
         this.jwtLocalStorageKey = this.authConfig.jwtLocalStorageKey;
         this.jwtQueryParam = this.authConfig.jwtQueryParam;
@@ -78,30 +81,41 @@ export class AuthService {
         return this.jwt;
     }
 
-    check(next: string): Observable<any> {
+    public getNext(): string | null {
+        return this.next;
+    }
+
+    check(next_?: string): Observable<any> {
+        const next = next_ || window.location.href;
         const jwt = this.resolveToken();
+        const headers: any = {};
         if (jwt) {
             this.setToken(jwt);
+            headers['auth-token'] = jwt;
         }
         return this.http
-            .get(this.authServerUrl + '/auth/check?jwt=' + (jwt ? jwt : '') + '&next=' + encodeURIComponent(next))
+            .get(`${this.authServerUrl}/auth/check?next=${encodeURIComponent(next)}`, { headers })
             .pipe(
-                tap((user) => this.user.next(user)),
+                tap((user) => {
+                    this.next = next;
+                    this.user.next(user);
+                }),
             );
     }
 
-    logout(next: string): Observable<any> {
+    logout(): Observable<any> {
         this.deleteToken();
-        return this.check(next);
+        return this.check();
     }
 
     permission(service: string): Observable<any> {
         return this.jwt
             .pipe(
                 filter((token) => token !== null),
-                switchMap((token) =>
-                   this.http.get(this.authServerUrl + '/auth/authorize?service=' + service + '&jwt=' + token)
-                ),
+                switchMap((token) => {
+                    const headers = { 'auth-token': token };
+                    return this.http.get(`${this.authServerUrl}/auth/authorize?service=${service}`, { headers });
+                }),
                 first()
             );
     }
Original file line number	Diff line number	Diff line change
Expand Up		@@ -21,4 +21,6 @@ RUN npm install

		COPY --from=build /app/dist dist

		ENV NODE_ENV=production

		ENTRYPOINT [ "node", "/app/dist/budgetkey/server/main.js" ]