From 9039a51786eef35c1c35c058423681210570f336 Mon Sep 17 00:00:00 2001 From: Adam Kariv Date: Thu, 28 Dec 2023 09:55:23 +0200 Subject: [PATCH] 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 --- .vscode/launch.json | 2 +- Dockerfile | 2 + angular.json | 5 +- .../budgetkey/src/app/about/about.module.ts | 2 + .../budgetkey/src/app/app-routing.module.ts | 2 + projects/budgetkey/src/app/app.module.ts | 7 +- .../chart-plotly/chart-plotly.component.ts | 1 - .../auth/auth.component.html | 5 +- .../auth/auth.component.less | 2 +- .../common-components/auth/auth.component.ts | 49 ++- .../common-components/auth/auth.service.ts | 36 +- .../src/app/common-components/bk-tooltip.less | 70 ++- .../common-components.module.ts | 11 +- .../src/app/common-components/common.less | 4 - .../app-container.component.html | 10 - .../app-container.component.less | 24 - .../app-container/app-container.component.ts | 30 -- .../header/bk-header.component.html | 36 +- .../header/bk-header.component.less | 133 ++++-- .../components/header/bk-header.component.ts | 100 +++-- .../components/modal/modal.component.html | 22 +- .../components/modal/modal.component.less | 19 +- .../components/modal/modal.component.ts | 2 +- .../searchbar/bk-search-bar.component.html | 6 +- .../searchbar/bk-search-bar.component.less | 13 +- .../searchbar/bk-search-bar.component.ts | 14 +- .../bk-subscription-manager.component.less | 58 +-- .../bk-subscription-manager.component.ts | 6 +- .../bk-subscribe-star.component.html | 3 +- .../bk-subscribe-star.component.less | 4 + .../app/common-components/layout.service.ts | 30 ++ .../search-models.ts} | 2 +- .../src/app/common-components/seo.service.ts | 37 +- .../services/lists.service.ts | 346 +++++++++++++-- .../app/common-components/window.service.ts | 15 + projects/budgetkey/src/app/format.ts | 13 +- .../item/item-page/item-page.component.html | 2 +- .../budgetkey/src/app/item/item.module.ts | 2 + .../item-social-service.component.ts | 1 - .../item-data-table.component.ts | 1 - .../app/item/questions/questions-manager.ts | 1 - .../add-to-list-dialog.component.html | 42 ++ .../add-to-list-dialog.component.less | 289 ++++++++++++ .../add-to-list-dialog.component.ts | 156 +++++++ .../add-to-list-icon.component.html | 8 + .../add-to-list-icon.component.less | 49 +++ .../add-to-list-icon.component.ts | 130 ++++++ .../app-container.component.html | 20 + .../app-container.component.less | 54 +++ .../app-container/app-container.component.ts | 94 ++++ .../edited-content.directive.ts | 65 +++ .../list-components/list-components.module.ts | 45 ++ .../list-components/list-dialog.service.ts | 57 +++ .../list-view/list-view.component.html | 100 +++++ .../list-view/list-view.component.less | 415 ++++++++++++++++++ .../list-view/list-view.component.ts | 122 +++++ .../search-result.component.html | 52 ++- .../search-result.component.less | 75 +++- .../search-result/search-result.component.ts | 38 +- .../src/app/list-page/list-page.module.ts | 23 + .../list-page/list-page.component.html | 6 + .../list-page/list-page.component.less | 6 + .../list-page/list-page.component.ts | 69 +++ .../src/app/list-page/list-routing.module.ts | 21 + .../user-lists-page.component.html | 30 ++ .../user-lists-page.component.less | 105 +++++ .../user-lists-page.component.ts | 74 ++++ .../src/app/main-page/hero/hero.component.ts | 45 +- .../app/main-page/main-page.component.less | 168 +++---- .../src/app/main-page/main-page.module.ts | 2 + .../page-not-found.component.html | 3 +- .../page-not-found.component.less | 9 +- .../page-not-found.component.ts | 1 - ...lete-all-subscription-items.component.html | 8 +- ...lete-all-subscription-items.component.less | 45 +- .../profile-page/profile-page.component.ts | 6 +- .../src/app/profile/profile.module.ts | 4 +- .../search/bare-page/bare-page.component.ts | 4 +- .../bare-search-bar.component.ts | 7 +- .../horizontal-results.component.html | 8 +- .../horizontal-results.component.less | 66 ++- .../horizontal-results.component.ts | 11 +- .../src/app/search/search-api.service.ts | 2 +- .../search-filter-menu-bar.component.less | 19 +- .../search/search-manager/search-manager.ts | 4 +- .../search-mode-selector.component.less | 3 + .../search-page/search-page.component.html | 4 +- .../search-page/search-page.component.less | 138 +++--- .../app/search/search-state/search-state.ts | 2 +- .../budgetkey/src/app/search/search.module.ts | 4 +- .../app/search/search/search.component.less | 6 + .../src/app/search/search/search.component.ts | 7 +- .../vertical-results.component.html | 4 +- .../vertical-results.component.less | 27 +- .../vertical-results.component.ts | 16 +- .../common/img/icon-share-facebook-hover.svg | 5 + .../assets/common/img/icon-share-facebook.svg | 4 + .../src/assets/common/img/icon-share-main.svg | 5 + .../img/icon-share-mobile-share-hover.svg | 5 + .../common/img/icon-share-mobile-share.svg | 4 + .../common/img/icon-share-twitter-hover.svg | 5 + .../assets/common/img/icon-share-twitter.svg | 4 + .../common/img/icon-share-whatsapp-hover.svg | 5 + .../assets/common/img/icon-share-whatsapp.svg | 4 + .../assets/fonts/gadi-almog-regular-aaa.eot | Bin 0 -> 13516 bytes .../assets/fonts/gadi-almog-regular-aaa.woff | Bin 0 -> 14004 bytes .../assets/fonts/gadi-almog-regular-aaa.woff2 | Bin 0 -> 12080 bytes .../src/assets/fonts/gadi-almog.less | 9 + projects/budgetkey/src/assets/img/404.png | Bin 0 -> 1201161 bytes projects/budgetkey/src/assets/img/og.png | Bin 0 -> 127172 bytes projects/budgetkey/src/assets/lists/bg.png | Bin 0 -> 2937 bytes .../src/assets/lists/icon-check-red.svg | 4 + .../lists/icon-chevron-down-grayish-blue.svg | 3 + .../src/assets/lists/icon-close-gray-500.svg | 3 + .../src/assets/lists/icon-complete-red.svg | 4 + .../assets/lists/icon-copy-to-clipboard.svg | 4 + .../src/assets/lists/icon-edit-gray-400.svg | 3 + .../budgetkey/src/assets/lists/icon-edit.svg | 3 + .../assets/lists/icon-fullscreen-gray-500.svg | 3 + .../assets/lists/icon-list-private-active.svg | 4 + .../lists/icon-list-private-inactive.svg | 4 + .../assets/lists/icon-list-public-active.svg | 11 + .../lists/icon-list-public-inactive.svg | 11 + .../src/assets/lists/icon-list-red.svg | 8 + .../lists/icon-lists-trash-grayish-blue.svg | 3 + .../src/assets/lists/icon-lists-trash-red.svg | 3 + .../assets/lists/icon-new-list-gray-500.svg | 3 + .../src/assets/lists/icon-not-subscribed.svg | 5 + .../src/assets/lists/icon-remove-list-red.svg | 12 + .../lists/icon-select-list-gray-400.svg | 13 + .../src/assets/lists/icon-subscribed.svg | 5 + .../src/assets/lists/logo-my-lists.svg | 15 + .../src/assets/themes/theme.budgetkey.am.json | 6 +- .../src/assets/themes/theme.budgetkey.ar.json | 6 +- .../src/assets/themes/theme.budgetkey.en.json | 6 +- .../src/assets/themes/theme.budgetkey.he.json | 6 +- .../src/assets/themes/theme.budgetkey.ru.json | 6 +- projects/budgetkey/src/common.less | 156 +++++++ .../budgetkey/src/environments/environment.ts | 2 +- projects/budgetkey/src/index.html | 10 +- projects/budgetkey/src/styles.less | 19 + themes/theme.budgetkey.he.json | 6 +- 142 files changed, 3655 insertions(+), 638 deletions(-) delete mode 100644 projects/budgetkey/src/app/common-components/common.less delete mode 100644 projects/budgetkey/src/app/common-components/components/app-container/app-container.component.html delete mode 100644 projects/budgetkey/src/app/common-components/components/app-container/app-container.component.less delete mode 100644 projects/budgetkey/src/app/common-components/components/app-container/app-container.component.ts create mode 100644 projects/budgetkey/src/app/common-components/layout.service.ts rename projects/budgetkey/src/app/{search/model.ts => common-components/search-models.ts} (93%) create mode 100644 projects/budgetkey/src/app/common-components/window.service.ts create mode 100644 projects/budgetkey/src/app/list-components/add-to-list-dialog/add-to-list-dialog.component.html create mode 100644 projects/budgetkey/src/app/list-components/add-to-list-dialog/add-to-list-dialog.component.less create mode 100644 projects/budgetkey/src/app/list-components/add-to-list-dialog/add-to-list-dialog.component.ts create mode 100644 projects/budgetkey/src/app/list-components/add-to-list-icon/add-to-list-icon.component.html create mode 100644 projects/budgetkey/src/app/list-components/add-to-list-icon/add-to-list-icon.component.less create mode 100644 projects/budgetkey/src/app/list-components/add-to-list-icon/add-to-list-icon.component.ts create mode 100644 projects/budgetkey/src/app/list-components/app-container/app-container.component.html create mode 100644 projects/budgetkey/src/app/list-components/app-container/app-container.component.less create mode 100644 projects/budgetkey/src/app/list-components/app-container/app-container.component.ts create mode 100644 projects/budgetkey/src/app/list-components/edited-content.directive.ts create mode 100644 projects/budgetkey/src/app/list-components/list-components.module.ts create mode 100644 projects/budgetkey/src/app/list-components/list-dialog.service.ts create mode 100644 projects/budgetkey/src/app/list-components/list-view/list-view.component.html create mode 100644 projects/budgetkey/src/app/list-components/list-view/list-view.component.less create mode 100644 projects/budgetkey/src/app/list-components/list-view/list-view.component.ts rename projects/budgetkey/src/app/{search => list-components}/search-result/search-result.component.html (65%) rename projects/budgetkey/src/app/{search => list-components}/search-result/search-result.component.less (74%) rename projects/budgetkey/src/app/{search => list-components}/search-result/search-result.component.ts (94%) create mode 100644 projects/budgetkey/src/app/list-page/list-page.module.ts create mode 100644 projects/budgetkey/src/app/list-page/list-page/list-page.component.html create mode 100644 projects/budgetkey/src/app/list-page/list-page/list-page.component.less create mode 100644 projects/budgetkey/src/app/list-page/list-page/list-page.component.ts create mode 100644 projects/budgetkey/src/app/list-page/list-routing.module.ts create mode 100644 projects/budgetkey/src/app/list-page/user-lists-page/user-lists-page.component.html create mode 100644 projects/budgetkey/src/app/list-page/user-lists-page/user-lists-page.component.less create mode 100644 projects/budgetkey/src/app/list-page/user-lists-page/user-lists-page.component.ts create mode 100644 projects/budgetkey/src/assets/common/img/icon-share-facebook-hover.svg create mode 100644 projects/budgetkey/src/assets/common/img/icon-share-facebook.svg create mode 100644 projects/budgetkey/src/assets/common/img/icon-share-main.svg create mode 100644 projects/budgetkey/src/assets/common/img/icon-share-mobile-share-hover.svg create mode 100644 projects/budgetkey/src/assets/common/img/icon-share-mobile-share.svg create mode 100644 projects/budgetkey/src/assets/common/img/icon-share-twitter-hover.svg create mode 100644 projects/budgetkey/src/assets/common/img/icon-share-twitter.svg create mode 100644 projects/budgetkey/src/assets/common/img/icon-share-whatsapp-hover.svg create mode 100644 projects/budgetkey/src/assets/common/img/icon-share-whatsapp.svg create mode 100644 projects/budgetkey/src/assets/fonts/gadi-almog-regular-aaa.eot create mode 100644 projects/budgetkey/src/assets/fonts/gadi-almog-regular-aaa.woff create mode 100644 projects/budgetkey/src/assets/fonts/gadi-almog-regular-aaa.woff2 create mode 100644 projects/budgetkey/src/assets/fonts/gadi-almog.less create mode 100644 projects/budgetkey/src/assets/img/404.png create mode 100644 projects/budgetkey/src/assets/img/og.png create mode 100644 projects/budgetkey/src/assets/lists/bg.png create mode 100644 projects/budgetkey/src/assets/lists/icon-check-red.svg create mode 100644 projects/budgetkey/src/assets/lists/icon-chevron-down-grayish-blue.svg create mode 100644 projects/budgetkey/src/assets/lists/icon-close-gray-500.svg create mode 100644 projects/budgetkey/src/assets/lists/icon-complete-red.svg create mode 100644 projects/budgetkey/src/assets/lists/icon-copy-to-clipboard.svg create mode 100644 projects/budgetkey/src/assets/lists/icon-edit-gray-400.svg create mode 100644 projects/budgetkey/src/assets/lists/icon-edit.svg create mode 100644 projects/budgetkey/src/assets/lists/icon-fullscreen-gray-500.svg create mode 100644 projects/budgetkey/src/assets/lists/icon-list-private-active.svg create mode 100644 projects/budgetkey/src/assets/lists/icon-list-private-inactive.svg create mode 100644 projects/budgetkey/src/assets/lists/icon-list-public-active.svg create mode 100644 projects/budgetkey/src/assets/lists/icon-list-public-inactive.svg create mode 100644 projects/budgetkey/src/assets/lists/icon-list-red.svg create mode 100644 projects/budgetkey/src/assets/lists/icon-lists-trash-grayish-blue.svg create mode 100644 projects/budgetkey/src/assets/lists/icon-lists-trash-red.svg create mode 100644 projects/budgetkey/src/assets/lists/icon-new-list-gray-500.svg create mode 100644 projects/budgetkey/src/assets/lists/icon-not-subscribed.svg create mode 100644 projects/budgetkey/src/assets/lists/icon-remove-list-red.svg create mode 100644 projects/budgetkey/src/assets/lists/icon-select-list-gray-400.svg create mode 100644 projects/budgetkey/src/assets/lists/icon-subscribed.svg create mode 100644 projects/budgetkey/src/assets/lists/logo-my-lists.svg create mode 100644 projects/budgetkey/src/common.less diff --git a/.vscode/launch.json b/.vscode/launch.json index 6545395..59da6a4 100644 --- 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 index 68740dd..0e644fc 100644 --- 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 index c842db9..dba615e 100644 --- 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 index e92cdb2..c7903d6 100644 --- 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 index f2fcac9..9fab5b6 100644 --- 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 index b802da8..956fe7f 100644 --- 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 index 6062054..4393768 100644 --- 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 index d1d2b74..a8f4aa3 100644 --- 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 @@ diff --git a/projects/budgetkey/src/app/common-components/auth/auth.component.less b/projects/budgetkey/src/app/common-components/auth/auth.component.less index deb48d1..36de826 100644 --- 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 index 27d6dff..5cf68c2 100644 --- a/projects/budgetkey/src/app/common-components/auth/auth.component.ts +++ b/projects/budgetkey/src/app/common-components/auth/auth.component.ts @@ -1,34 +1,36 @@ 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) { - o.subscribe((user: any) => { - this.user = user; + ngAfterViewInit() { + this.ps.browser(() => { + this.auth.check().subscribe(); }); } @@ -36,11 +38,10 @@ export class AuthComponent implements OnInit { 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 index aa9bb65..9899677 100644 --- 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(); private jwt = new ReplaySubject(); + 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 { + public getNext(): string | null { + return this.next; + } + + check(next_?: string): Observable { + 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 { + logout(): Observable { this.deleteToken(); - return this.check(next); + return this.check(); } permission(service: string): Observable { 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() ); } diff --git a/projects/budgetkey/src/app/common-components/bk-tooltip.less b/projects/budgetkey/src/app/common-components/bk-tooltip.less index 505e96b..dca9649 100644 --- a/projects/budgetkey/src/app/common-components/bk-tooltip.less +++ b/projects/budgetkey/src/app/common-components/bk-tooltip.less @@ -1,3 +1,5 @@ +@import '../../common.less'; + .bk-tooltip-anchor { position: relative; display: inline; @@ -8,21 +10,31 @@ span.bk-tooltip { position: absolute; display: none; - width: 300px; + width: max-content; + max-width: 300px; color: #FFFFFF; - background: #434343; + background: @color-gray-700; line-height: 18px; - text-align: center; visibility: hidden; - border-radius: 3px; + border-radius: 4px; + + text-align: right; font-size: 14px; + line-height: 17x; font-weight: 300; - padding: 10px; - text-align: justify; - font-family: "Abraham TRIAL", "Alef Hebrew", "Helvetica Neue", Helvetica, Arial, sans-serif !important; + + &.bk-bigger { + text-align: center; + font-size: 16px; + line-height: 20px; + font-weight: 400; + } + padding: 4px 8px; + + .font-abraham; @media only screen and (max-width: 600px) { - width: 150px; + max-width: 150px; font-size: 10px; line-height: 12px; padding: 5px; @@ -31,11 +43,10 @@ &:after { content: ''; position: absolute; - bottom: 100%; - left: 95%; - margin-left: -5px; + top: -5px; + right: 5px; width: 0; height: 0; - border-bottom: 5px solid #434343; + border-bottom: 5px solid @color-gray-700; border-right: 5px solid transparent; border-left: 5px solid transparent; @@ -46,26 +57,37 @@ &.bk-align-left { &:after { - left: 5%; + left: 5px; + right: auto; } } + &.bk-align-top { + &:after { + bottom: -5px; + top: auto; + transform: rotate(180deg); + } + } } &:hover .bk-tooltip { visibility: visible; display: inherit; - top: ~"calc(100% + 5px)"; - left: 50%; - margin-left: -280px; + bottom: -4px; + right: calc(50% ~'-' 10px); + transform: translateY(100%); z-index: 999; - @media only screen and (max-width: 600px) { - margin-left: -75px; + &.bk-align-left { + left: 4px; + right: auto; } - &.bk-align-left { - margin-left: -10px; + &.bk-align-top { + top: -4px; + bottom: auto; + transform: translateY(-100%); } } @@ -76,8 +98,8 @@ position: relative; } - &.img:hover .bk-tooltip { - top: ~"calc(100% + 0.75em)"; - left: ~"calc(50% - 0.32em)"; - } + // &.img:hover .bk-tooltip { + // top: ~"calc(100% + 0.75em)"; + // left: ~"calc(50% - 0.32em)"; + // } } \ No newline at end of file diff --git a/projects/budgetkey/src/app/common-components/common-components.module.ts b/projects/budgetkey/src/app/common-components/common-components.module.ts index 64fc633..a8bddf1 100644 --- a/projects/budgetkey/src/app/common-components/common-components.module.ts +++ b/projects/budgetkey/src/app/common-components/common-components.module.ts @@ -2,7 +2,6 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; -import { AppContainerComponent } from './components/app-container/app-container.component'; import { BkHeaderComponent } from './components/header/bk-header.component'; import { BkFooterComponent } from './components/footer/bk-footer.component'; import { BkSearchBar } from './components/searchbar/bk-search-bar.component'; @@ -20,6 +19,8 @@ import { AuthComponent } from './auth/auth.component'; import { AuthService } from './auth/auth.service'; import { RouterModule } from '@angular/router'; import { SeoService } from './seo.service'; +import { LayoutService } from './layout.service'; +import { WindowService } from './window.service'; /** * Created by adam on 27/12/2016. @@ -32,7 +33,6 @@ import { SeoService } from './seo.service'; RouterModule ], declarations: [ - AppContainerComponent, BkHeaderComponent, BkFooterComponent, BkSearchBar, @@ -41,17 +41,18 @@ import { SeoService } from './seo.service'; BkSubscriptionManager, ModalComponent, ClickOnReturnDirective, - AuthComponent + AuthComponent, ], providers: [ ListsService, GlobalSettingsService, PlatformService, AuthService, - SeoService + SeoService, + LayoutService, + WindowService ], exports: [ - AppContainerComponent, BkHeaderComponent, BkFooterComponent, BkSearchBar, diff --git a/projects/budgetkey/src/app/common-components/common.less b/projects/budgetkey/src/app/common-components/common.less deleted file mode 100644 index edd0169..0000000 --- a/projects/budgetkey/src/app/common-components/common.less +++ /dev/null @@ -1,4 +0,0 @@ -@headerHeight: 56px; -@footerHeight: 333px; - -@textColor: #3C4948; diff --git a/projects/budgetkey/src/app/common-components/components/app-container/app-container.component.html b/projects/budgetkey/src/app/common-components/components/app-container/app-container.component.html deleted file mode 100644 index 2dcb2f8..0000000 --- a/projects/budgetkey/src/app/common-components/components/app-container/app-container.component.html +++ /dev/null @@ -1,10 +0,0 @@ - - -
- -
- -
diff --git a/projects/budgetkey/src/app/common-components/components/app-container/app-container.component.less b/projects/budgetkey/src/app/common-components/components/app-container/app-container.component.less deleted file mode 100644 index 148268c..0000000 --- a/projects/budgetkey/src/app/common-components/components/app-container/app-container.component.less +++ /dev/null @@ -1,24 +0,0 @@ -@import '../../common.less'; - -:host { - display: flex; - flex-flow: column; - min-height: 100vh; - - app-bk-header { - flex: 0 0 auto; - } - - .app { - flex: 1 0 auto; - direction: rtl; - min-height: ~"calc(100vh - 333px - 64px)"; - margin-top: 9px; //calc(9 - @headerHeight); - margin-bottom: 6px; - width: 100%; - display: flex; - flex-flow: column; - align-items: center; - } - -} \ No newline at end of file diff --git a/projects/budgetkey/src/app/common-components/components/app-container/app-container.component.ts b/projects/budgetkey/src/app/common-components/components/app-container/app-container.component.ts deleted file mode 100644 index 5e6af6e..0000000 --- a/projects/budgetkey/src/app/common-components/components/app-container/app-container.component.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { HttpClient } from '@angular/common/http'; -import {Component, ViewEncapsulation, Input} from '@angular/core'; -import { ActivatedRoute } from '@angular/router'; -import { GlobalSettingsService } from '../../global-settings.service'; -import { distinct, distinctUntilChanged, map, switchMap } from 'rxjs'; -import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy'; -import { PlatformService } from '../../platform.service'; - -@UntilDestroy() -@Component({ - selector: 'app-container', - templateUrl: './app-container.component.html', - styleUrls: ['./app-container.component.less'], -}) -export class AppContainerComponent { - @Input() showHeader = true; - @Input() showFooter = true; - @Input() showSearchBar = false; - @Input() showLanguages = false; - @Input() helpWidget = true; - - configured = false; - - constructor(private http: HttpClient, private route: ActivatedRoute, private globalSettings: GlobalSettingsService, private ps: PlatformService) { - globalSettings.ready.subscribe(() => { - this.configured = true; - }); - globalSettings.init(this, route); - } -} diff --git a/projects/budgetkey/src/app/common-components/components/header/bk-header.component.html b/projects/budgetkey/src/app/common-components/components/header/bk-header.component.html index dea0f49..6b26e31 100644 --- a/projects/budgetkey/src/app/common-components/components/header/bk-header.component.html +++ b/projects/budgetkey/src/app/common-components/components/header/bk-header.component.html @@ -1,13 +1,14 @@
דלג לתוכן עיקרי -
+
-