More list view implementation

projects/budgetkey/src/app/common-components/components/header/bk-header.component.html

@@ -1,7 +1,7 @@
 <header>
     <a class="skip-to-content" [routerLink]="['.']" [fragment]='"main"' [queryParamsHandling]='"preserve"'>דלג לתוכן עיקרי</a>
     <div class="logo">
-      <a [href]="globalSettings.theme.siteUrl"  aria-label='homepage' [style.background-image]='"url(assets/common/img/" + globalSettings.theme.siteLogo + ")"'>
+      <a [routerLink]='["/"]'  aria-label='homepage' [style.background-image]='"url(assets/common/img/" + globalSettings.theme.siteLogo + ")"'>
       </a>
     </div>
     <div *ngIf="showSearchBar" class="search-div">

projects/budgetkey/src/app/common-components/components/modal/modal.component.less

@@ -1,4 +1,5 @@
-.bkmodal-bg {
+:host {
+  .bkmodal-bg {
     position: fixed;
     z-index: 10000;
     top: 0;
@@ -60,4 +61,5 @@
     .bkmodal-dialog {
       width: 100%;
     }
-  }
+  }
+}

projects/budgetkey/src/app/common-components/components/searchbar/bk-search-bar.component.html

@@ -66,6 +66,10 @@
 
 </div>
 
-<a class='search-box fake' *ngIf='fake' [href]='externalUrl' clickOnReturn>
+<a class='search-box fake' *ngIf='fake' 
+   [href]='externalUrlHref ? externalUrl : null'
+   [routerLink]='externalUrlHref ? null : ["/s"]'
+   queryParamsHandling='merge'
+   clickOnReturn>
     <span>חיפוש באתר...</span>
 </a>

projects/budgetkey/src/app/common-components/components/searchbar/bk-search-bar.component.ts

@@ -78,12 +78,16 @@ export class BkSearchBar implements OnChanges, AfterViewInit, OnInit {
   public dropdownOpen = false;
   public showSubscribe = false;
   public externalUrl: string;
+  public externalUrlHref: boolean;
   public forcedPlaceholder: string;
 
   constructor (public globalSettings: GlobalSettingsService, private ps: PlatformService) {
   }
 
-  public static buildExternalUrl(searchTerm: string, searchType: SearchBarType, extraUrlParams: string | null, theme: any | null, lang: string | null, hostname: string) {
+  public static buildExternalUrl(
+    searchTerm: string, searchType: SearchBarType, extraUrlParams: string | null, 
+    theme: any | null, lang: string | null, hostname: string
+  ): [string, boolean] {
     let urlParams =
     'q=' + encodeURIComponent(searchTerm) +
     '&dd=' + searchType.id;
@@ -100,9 +104,9 @@ export class BkSearchBar implements OnChanges, AfterViewInit, OnInit {
     urlParams = params.toString();
     const url = '/s/?' + urlParams;
     if (hostname !== 'next.obudget.org' && hostname.indexOf('localhost') !== 0 && hostname.indexOf('whiletrue') < 0) {
-      return 'https://next.obudget.org' + url;
+      return ['https://next.obudget.org' + url, true];
     } else {
-      return url;
+      return [url, false];
     }
   }
 
@@ -112,7 +116,7 @@ export class BkSearchBar implements OnChanges, AfterViewInit, OnInit {
 
   private calcExternalUrl() {
     if (this.selectedSearchType) {
-      this.externalUrl = BkSearchBar.buildExternalUrl(
+      [this.externalUrl, this.externalUrlHref] = BkSearchBar.buildExternalUrl(
         this.searchTerm,
         this.selectedSearchType,
         this.externalUrlParams,

projects/budgetkey/src/app/common-components/services/lists.service.ts

@@ -1,11 +1,11 @@
 /**
  * Created by adam on 18/12/2016.
  */
-import { Injectable, signal } from '@angular/core';
+import { Injectable, computed, signal } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { EMPTY, Observable, ReplaySubject, forkJoin, from, of } from 'rxjs';
 import { AuthService } from '../auth/auth.service';
-import { map, filter, switchMap, first } from 'rxjs/operators';
+import { map, filter, switchMap, first, tap } from 'rxjs/operators';
 
 export class ListItem {
   id?: number;
@@ -42,9 +42,36 @@ export class ListsService {
 
   public curatedLists = signal<Array<ListContents>>([]);
   public curatedItems = signal<Array<ListItem>>([]);
-  public curatedItemIds = signal<any>({});
+  public currentList = signal<ListContents | null>(null);
+  public currentListItemIds = computed<any>(() => {
+    const list = this.currentList();
+    console.log('COMPUTEDDD', list);
+    if (!list) {
+      return {};
+    }
+    const itemIds: any = {};
+    list.items?.forEach((item) => {
+      const doc_id = item.properties?.source.doc_id;
+      if (doc_id) {
+        itemIds[doc_id] = true;
+      }
+    });
+    console.log('LIST ITEM IDS', itemIds);
+    return itemIds;
+  });
   public hasCuratedLists = signal<boolean>(false);
 
+  public EMPTY_LIST: ListContents = {
+    id: 0,
+    name: '',
+    user_id: '',
+    url: null,
+    title: 'רשימה ללא שם',
+    properties: {description: 'תיאור הרשימה...'},
+    kind: 'curated',
+    items: []
+  };
+
   constructor(private http: HttpClient, private auth: AuthService) {
     this.auth.getJwt().pipe(
       switchMap((jwt) => {
@@ -72,14 +99,6 @@ export class ListsService {
       this.curatedItems.set(items);
       console.table(lists);
       console.table(items);
-      const itemIds: any = {};
-      items.forEach((item) => {
-        const doc_id = item.properties?.source.doc_id;
-        if (doc_id) {
-          itemIds[doc_id] = true;
-        }
-      });
-      this.curatedItemIds.set(itemIds);
       this.hasCuratedLists.set(enabled);
     });
   }
@@ -180,13 +199,14 @@ export class ListsService {
     );
   }
 
-  public testAdd(item: any) {
-    this.auth.getUser().pipe(
+  public addItemToList(listName: string, item: any) {
+    return this.auth.getUser().pipe(
       map((user) => {
         console.log('USER', user);
         return {
           name: user.profile?.name,
           avatar_url: user.profile?.avatar_url,
+          user_id: user.profile?.id,
         };
       }),
       switchMap((user_props) => {
@@ -195,21 +215,30 @@ export class ListsService {
           url: null,
           properties: {
             description: 'זו רשימה שנוצרה לטובת בדיקות של המערכת. כל התוכן פה הוא שרירותי ולא מעניין את אף אחד',
-            ...user_props
+            name: user_props.name,
+            avatar_url: user_props.avatar_url,
           },
           kind: 'curated',
           visibility: 1
-        })
+        }).pipe(
+          map(() => user_props.user_id)
+        )
       }),
       switchMap(() => {
-        return this.put('test-list', {
+        return this.put(listName, {
           title: item.source.page_title,
           url: '/i/' + item.source.doc_id,
           properties: item
         });
+      }),
+      switchMap(() => {
+        return this.get(listName);
+      }),
+      tap((list) => {
+        this.currentList.set(list);
       })
-    ).subscribe((item) => {
-      console.log('ITEM ADDED', item);
-    });
+    );
   }
+
+
 }

projects/budgetkey/src/app/list-components/add-widget-icon/add-to-list-icon.component.ts → projects/budgetkey/src/app/list-components/add-to-list-icon/add-to-list-icon.component.ts

@@ -1,6 +1,7 @@
 import { Component, Input, OnChanges, SimpleChanges, effect } from '@angular/core';
 import { UntilDestroy } from '@ngneat/until-destroy';
 import { ListsService } from '../../common-components/services/lists.service';
+import { ActivatedRoute, Router } from '@angular/router';
 
 @UntilDestroy()
 @Component({
@@ -14,8 +15,9 @@ export class AddToListIconComponent implements OnChanges {
   enabled = false;
   subscribed = false;
   itemIds: any = {};
+  tempListId: string = '';
 
-  constructor(public lists: ListsService) {
+  constructor(public lists: ListsService, private router: Router, private route: ActivatedRoute) {
     effect(() => this.update());
   }
 
@@ -25,12 +27,24 @@ export class AddToListIconComponent implements OnChanges {
 
   update() {
     this.enabled = this.lists.hasCuratedLists();
-    this.itemIds = this.lists.curatedItemIds();
+    this.itemIds = this.lists.currentListItemIds();
+    const list = this.lists.currentList();
+    if (list) {
+      this.tempListId = list.user_id + ':' + list.name;
+    } else {
+      this.tempListId = '';
+    }
     this.subscribed = this.item && this.item.source.doc_id && !!this.itemIds[this.item.source.doc_id];
   }
 
   add() {
-    this.lists.testAdd(this.item);
+    if (!this.subscribed) {
+      this.subscribed = true;
+      this.lists.addItemToList('test-list', this.item).subscribe((item) => {
+        console.log('ADDED TO LIST', this.tempListId);
+        this.router.navigate(['.'], { relativeTo: this.route, queryParams: { list: this.tempListId }, queryParamsHandling: 'merge' });
+      });
+    }
   }
 
 }

projects/budgetkey/src/app/list-components/app-container/app-container.component.html

@@ -7,8 +7,8 @@
         <div class='main' id='main'>
             <ng-content></ng-content>
         </div>
-        <div class='list' *ngIf='list && listSideView && layout.desktop'>
-            <app-list-view [list]="list"></app-list-view>
+        <div class='list' *ngIf='lists.currentList() && listSideView && layout.desktop'>
+            <app-list-view [list]="lists.currentList() || lists.EMPTY_LIST" [headerControls]='true'></app-list-view>
         </div>
     </div>
     <app-bk-footer *ngIf="showFooter" [helpWidget]='helpWidget'></app-bk-footer>

projects/budgetkey/src/app/list-components/app-container/app-container.component.ts

@@ -2,7 +2,7 @@ import { HttpClient } from '@angular/common/http';
 import {Component, ViewEncapsulation, Input} from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { GlobalSettingsService } from '../../common-components/global-settings.service';
-import { distinct, distinctUntilChanged, filter, map, switchMap } from 'rxjs';
+import { distinct, distinctUntilChanged, filter, map, switchMap, tap } from 'rxjs';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { PlatformService } from '../../common-components/platform.service';
 import { ListContents, ListsService } from '../../common-components/services/lists.service';
@@ -23,9 +23,8 @@ export class AppContainerComponent {
     @Input() listSideView = false;
 
     configured = false;
-    list: ListContents | null = null;
 
-    constructor(private route: ActivatedRoute, private globalSettings: GlobalSettingsService, private lists: ListsService, public layout: LayoutService) {
+    constructor(private route: ActivatedRoute, private globalSettings: GlobalSettingsService, public lists: ListsService, public layout: LayoutService) {
         this.globalSettings.ready.subscribe(() => {
             this.configured = true;
         });
@@ -34,11 +33,16 @@ export class AppContainerComponent {
             untilDestroyed(this),
             map((params) => params['list']),
             distinctUntilChanged(),
+            tap((list) => {
+                if (!list) {
+                    this.lists.currentList.set(null);
+                }
+            }),
             filter((list) => !!list),
-            map((list) => list.split('/')),
+            map((list) => list.split(':')),
             switchMap((parts) => this.lists.getAnonymous(parts[0], parts[1])),
         ).subscribe((list) => {
-            this.list = list;
+            this.lists.currentList.set(list);
         });
     }
 }

projects/budgetkey/src/app/list-components/list-components.module.ts

@@ -4,7 +4,7 @@ import { FormsModule } from '@angular/forms';
 
 import { HttpClientModule } from '@angular/common/http';
 import { RouterModule } from '@angular/router';
-import { AddToListIconComponent } from './add-widget-icon/add-to-list-icon.component';
+import { AddToListIconComponent } from './add-to-list-icon/add-to-list-icon.component';
 import { ListViewComponent } from './list-view/list-view.component';
 import { CommonComponentsModule } from '../common-components/common-components.module';
 import { SearchResultComponent } from './search-result/search-result.component';

projects/budgetkey/src/app/list-components/list-page/list-page.component.ts

@@ -33,10 +33,4 @@ export class ListPageComponent {
       this.list = list;
     });
   }
-
-  ngOnInit(): void {
-    this.globalSettings.ready.subscribe(() => {
-      // this.seo.setSeo(this.globalSettings.siteName + ' - חיפוש', `https://next.obudget.org/s`);
-    });
-  }
 }

projects/budgetkey/src/app/list-components/list-view/list-view.component.html

@@ -20,6 +20,10 @@ <h1 [editedContent]='editable()' (updated)='title = $event' #titleEl>{{title}}</
 
         </div>
     </div>
+    <div class='controls' *ngIf='headerControls'>
+        <a class='fullscreen-button' [routerLink]='["/l",  list.user_id, list.name]' [queryParams]='{list: null}' queryParamsHandling='merge' clickOnReturn></a>
+        <a class='close-button' [routerLink]='"."' [queryParams]='{list: null}' queryParamsHandling='merge' clickOnReturn></a>
+    </div>
 </div>
 <div class='list-contents'>
     <search-result [item]="item" [index]="i" [kind]="item.type" [bare]='false' [listable]='false'

projects/budgetkey/src/app/list-components/list-view/list-view.component.less

@@ -1,3 +1,5 @@
+@import '../../../common.less';
+
 @max-width: 750px + 2 * 32px;
 
 :host {
@@ -32,6 +34,7 @@
                 align-items: center;
                 gap: 8px;
                 .avatar {
+                    flex: 0 0 auto;
                     width: 28px;
                     height: 28px;
                     border-radius: 28px;
@@ -52,6 +55,9 @@
                 align-items: center;
                 gap: 8px;
                 .icon {
+                    flex: 0 0 auto;
+                    align-self: flex-start;
+                    margin-top: 4px;
                     width: 24px;
                     height: 24px;
                     margin-right: 2px;
@@ -85,6 +91,29 @@
                 font-weight: 300;
             }
         }
+        .controls {
+            display: flex;
+            flex-flow: row;
+            position: absolute;
+            top: 8px;
+            left: 8px;
+
+            .close-button, .fullscreen-button {
+                width: 32px;
+                height: 32px;
+                flex: 0 0 auto;
+                .background-image;
+                background-size: 16px;
+            }
+
+            .close-button {
+                background-image: url(../../../assets/lists/icon-close-gray-500.svg);
+            }
+
+            .fullscreen-button {
+                background-image: url(../../../assets/lists/icon-fullscreen-gray-500.svg);
+            }
+        }
     }
 
     .list-contents {

projects/budgetkey/src/app/list-components/list-view/list-view.component.ts

@@ -15,6 +15,7 @@ import { sign } from 'crypto';
 export class ListViewComponent implements OnChanges {
 
   @Input() list: ListContents;
+  @Input() headerControls = false;
 
   @ViewChild('titleEl') titleEl: ElementRef;
   @ViewChild('descriptionEl') descriptionEl: ElementRef;