Different approach for positioning the dialog

OpenBudget · Dec 23, 2023 · ddec19c · ddec19c
1 parent bdcee42
commit ddec19c
Show file tree

Hide file tree

Showing 15 changed files with 126 additions and 50 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/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/common-components/components/searchbar/bk-search-bar.component.ts b/projects/budgetkey/src/app/common-components/components/searchbar/bk-search-bar.component.ts
@@ -103,7 +103,7 @@ 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) {
+    if (hostname !== 'next.obudget.org' && hostname.indexOf('localhost') !== 0 && hostname.indexOf('whiletrue') < 0 && hostname.indexOf('127.0.0.1') !== 0) {
       return ['https://next.obudget.org' + url, true];
     } else {
       return [url, false];

diff --git a/...ts/budgetkey/src/app/list-components/add-to-list-dialog/add-to-list-dialog.component.html b/...ts/budgetkey/src/app/list-components/add-to-list-dialog/add-to-list-dialog.component.html
@@ -7,7 +7,7 @@
                 <h1>{{list.title}}</h1>
             </div>
             <div class='action'>
-                <a class='close-button' *ngIf='editing' (activated)='done()' clickOnReturn></a>
+                <a class='close-button' *ngIf='editing' (activated)='listDialog.close()' clickOnReturn></a>
                 <a class='select-list-button' *ngIf='!editing' (activated)='listSelectionMode = true' clickOnReturn></a>
             </div>
         </div>
@@ -35,7 +35,7 @@ <h1>{{list.title}}</h1>
                 <input [(ngModel)]='newList' placeholder='רשימה חדשה'/>
             </div>
             <div class='action'>
-                <a class='close-button' (activated)='done()' clickOnReturn></a>
+                <a class='close-button' (activated)='$event.stopPropagation(); listDialog.close()' clickOnReturn></a>
             </div>
         </div>
     </ng-container>

diff --git a/...ts/budgetkey/src/app/list-components/add-to-list-dialog/add-to-list-dialog.component.less b/...ts/budgetkey/src/app/list-components/add-to-list-dialog/add-to-list-dialog.component.less
@@ -1,6 +1,12 @@
 @import '../../../common.less';
 
 :host {
+    position: absolute;
+    top: 0;
+    right: 0;
+    transform: translateX(-100%);
+    z-index: 100;
+
     .dialog {
         width: 280px;
         min-height: 32px;

diff --git a/...ects/budgetkey/src/app/list-components/add-to-list-dialog/add-to-list-dialog.component.ts b/...ects/budgetkey/src/app/list-components/add-to-list-dialog/add-to-list-dialog.component.ts
@@ -1,30 +1,22 @@
-import { AfterViewInit, Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, effect, signal } from '@angular/core';
-import { EMPTY_LIST, ListContents, ListItem, ListsService } from '../../common-components/services/lists.service';
+import { AfterViewInit, Component, ElementRef, OnChanges, OnInit, effect, signal } from '@angular/core';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
-import { first, fromEvent, take, timer } from 'rxjs';
-import { DocResultEntry } from '../../common-components/search-models';
-import { sign } from 'crypto';
+import { fromEvent, take, timer } from 'rxjs';
+import { EMPTY_LIST, ListContents, ListItem, ListsService } from '../../common-components/services/lists.service';
+import { AddToListDialogCommand, ListDialogService } from '../list-dialog.service';
 
-export interface AddToListDialogCommand {
-  command: 'add-item' | 'remove-item' | 'open-list' | 'new-list';
-  list?: ListContents;
-  itemNotes?: string;
-  itemId?: number;
-  listTitle?: string;
-};
 
 @UntilDestroy()
 @Component({
   selector: 'app-add-to-list-dialog',
   templateUrl: './add-to-list-dialog.component.html',
-  styleUrls: ['./add-to-list-dialog.component.less']
+  styleUrls: ['./add-to-list-dialog.component.less'],
+  host: {
+    '[style.top]': 'listDialog.top() + "px"',
+    '[style.left]': 'listDialog.right() + "px"',
+  }
 })
 export class AddToListDialogComponent implements AfterViewInit, OnInit, OnChanges {
 
-  @Input() listSelection = false;
-  @Input() doc: DocResultEntry;
-  @Output() commands = new EventEmitter<AddToListDialogCommand[]>();
-
   ready = signal<boolean>(false);
 
   list: ListContents = EMPTY_LIST;
@@ -36,7 +28,7 @@ export class AddToListDialogComponent implements AfterViewInit, OnInit, OnChange
   itemNotes = '';
   newList: string | null = null;
 
-  constructor(private el: ElementRef, public lists: ListsService) {
+  constructor(private el: ElementRef, public lists: ListsService, public listDialog: ListDialogService) {
     effect(() => {
       if (!this.ready()) {
         return;
@@ -66,10 +58,16 @@ export class AddToListDialogComponent implements AfterViewInit, OnInit, OnChange
         this.list = list;
       }
     });
+    listDialog.closeQ.pipe(
+      take(1)
+    ).subscribe(() => {
+      this.done();
+    });
   }
 
   ngOnInit(): void {
-    this.listSelectionMode = this.listSelection;
+    this.listSelectionMode = this.listDialog.listSelection();
+    this.ready.set(true);
   }
 
   ngOnChanges(): void {
@@ -101,23 +99,24 @@ export class AddToListDialogComponent implements AfterViewInit, OnInit, OnChange
       untilDestroyed(this)
     ).subscribe(() => {
       if (!clicked) {
-        this.done();
+        this.listDialog.close();
       }
     });
     fromEvent(document, 'click').pipe(
       untilDestroyed(this),
       take(1),
     ).subscribe(() => {
-      this.done();
+      this.listDialog.close();
     });
   }
 
-  done() {
+  done(ev: Event | null = null) {
+    ev?.stopPropagation();
     const commands: AddToListDialogCommand[] = [];
     let toOpenList: ListContents | null = null;
     for (const list of this.lists.curatedLists()) {
       if (this.originalSubscriptionState[list.name] && !this.subscriptionState[list.name]) {
-        const itemId = (list.items || []).find((item: ListItem) => item.properties.source.doc_id === this.doc.source.doc_id)?.id;
+        const itemId = (list.items || []).find((item: ListItem) => item.properties.source.doc_id === this.listDialog.doc().source.doc_id)?.id;
         commands.push({command: 'remove-item', list, itemId});
       }
       if (!this.originalSubscriptionState[list.name] && this.subscriptionState[list.name]) {
@@ -133,11 +132,12 @@ export class AddToListDialogComponent implements AfterViewInit, OnInit, OnChange
     if (toOpenList) {
       commands.push({'command': 'open-list', 'list': toOpenList});
     }
-    this.commands.emit(commands);
+    this.listDialog.executeQ.next([this.listDialog.doc(), commands]);
+    this.listDialog.dialogOpen.set(false);
   }
 
   checkSubscribed(list: ListContents) {
-    return (list.items || []).map((item: ListItem) => item.properties.source.doc_id).indexOf(this.doc.source.doc_id) >= 0;
+    return (list.items || []).map((item: ListItem) => item.properties.source.doc_id).indexOf(this.listDialog.doc().source.doc_id) >= 0;
   }
 
   subscribed(list: ListContents) {
@@ -149,6 +149,6 @@ export class AddToListDialogComponent implements AfterViewInit, OnInit, OnChange
   }
 
   cancel() {
-    this.commands.emit([]);
+    this.listDialog.executeQ.next([this.listDialog.doc(), []]);
   }
 }
diff --git a/projects/budgetkey/src/app/list-components/add-to-list-icon/add-to-list-icon.component.html b/projects/budgetkey/src/app/list-components/add-to-list-icon/add-to-list-icon.component.html
@@ -5,5 +5,4 @@
     <div class='icon bk-tooltip-anchor' *ngIf='enabled()' [class.subscribed]='subscribed()' [class.processing]='processing()' clickOnReturn (activated)='click($event)'>
         <span *ngIf='tooltipText()' class='bk-tooltip bk-align-top bk-bigger' [innerHTML]='tooltipText()'></span>
     </div>
-    <app-add-to-list-dialog *ngIf='dialogOpen()' [doc]='doc' [listSelection]='subscribed()' (commands)='execute($event)'></app-add-to-list-dialog>
 </ng-container>
diff --git a/projects/budgetkey/src/app/list-components/add-to-list-icon/add-to-list-icon.component.ts b/projects/budgetkey/src/app/list-components/add-to-list-icon/add-to-list-icon.component.ts
@@ -1,10 +1,10 @@
-import { Component, Input, OnChanges, SimpleChanges, computed, effect, signal } from '@angular/core';
-import { UntilDestroy } from '@ngneat/until-destroy';
+import { Component, ElementRef, Input, OnChanges, SimpleChanges, computed, effect, signal } from '@angular/core';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { EMPTY_LIST, ListContents, ListsService } from '../../common-components/services/lists.service';
 import { ActivatedRoute, Router } from '@angular/router';
-import { AddToListDialogCommand } from '../add-to-list-dialog/add-to-list-dialog.component';
-import { EMPTY, forkJoin, from, map, of, switchMap, tap, timer } from 'rxjs';
+import { EMPTY, first, forkJoin, from, map, of, switchMap, tap, timer } from 'rxjs';
 import { DocResultEntry } from '../../common-components/search-models';
+import { AddToListDialogCommand, ListDialogService } from '../list-dialog.service';
 
 @UntilDestroy()
 @Component({
@@ -23,7 +23,7 @@ export class AddToListIconComponent implements OnChanges {
   });
   subscribed = signal(false);
   tooltipText = computed(() => {
-    if (this.dialogOpen()) {
+    if (this.listDialog.dialogOpen()) {
       return null;
     }
     if (!this.enabled()) {
@@ -37,9 +37,8 @@ export class AddToListIconComponent implements OnChanges {
   });
   itemIds: any = {};
   processing = signal(false);
-  dialogOpen = signal(false);
 
-  constructor(public lists: ListsService, private router: Router, private route: ActivatedRoute) {
+  constructor(public lists: ListsService, private router: Router, private route: ActivatedRoute, private listDialog: ListDialogService, private el: ElementRef) {
     effect(() => this.update(), {
       allowSignalWrites: true,
     });
@@ -63,17 +62,23 @@ export class AddToListIconComponent implements OnChanges {
     }
     ev.stopPropagation();
     ev.preventDefault();
-    this.dialogOpen.set(true);
+    this.listDialog.open(this.doc, this.subscribed(), this.el.nativeElement as HTMLElement);
     timer(50).subscribe(() => {
       this.subscribed.set(true);
     });
+    this.listDialog.executeQ.pipe(
+      untilDestroyed(this),
+      first(),
+    ).subscribe(([doc, commands]) => this.execute(doc, commands));
   }
 
   tooltip() {
   }
 
-  execute(commands: AddToListDialogCommand[]) {
-    this.dialogOpen.set(false);
+  execute(doc: DocResultEntry, commands: AddToListDialogCommand[]) {
+    if (doc !== this.doc) {
+      return;
+    }
     this.processing.set(true);
     this.update();
     if (commands.length === 0) {

diff --git a/projects/budgetkey/src/app/list-components/app-container/app-container.component.html b/projects/budgetkey/src/app/list-components/app-container/app-container.component.html
@@ -16,4 +16,5 @@
         </div>
         <app-bk-footer *ngIf="showFooter" [helpWidget]='helpWidget'></app-bk-footer>    
     </div>
+    <app-add-to-list-dialog *ngIf='listDialog.dialogOpen()'></app-add-to-list-dialog>
 </ng-container>
diff --git a/projects/budgetkey/src/app/list-components/app-container/app-container.component.ts b/projects/budgetkey/src/app/list-components/app-container/app-container.component.ts
@@ -7,6 +7,7 @@ import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { PlatformService } from '../../common-components/platform.service';
 import { ListContents, ListsService } from '../../common-components/services/lists.service';
 import { LayoutService } from '../../common-components/layout.service';
+import { ListDialogService } from '../list-dialog.service';
 
 @UntilDestroy()
 @Component({
@@ -43,7 +44,8 @@ export class AppContainerComponent implements AfterViewInit, OnChanges {
     });
     listKey = signal<string | null>(null);
 
-    constructor(private route: ActivatedRoute, private globalSettings: GlobalSettingsService, public lists: ListsService, public layout: LayoutService, private router: Router) {
+    constructor(private route: ActivatedRoute, private globalSettings: GlobalSettingsService, public lists: ListsService, 
+        public layout: LayoutService, private router: Router, public listDialog: ListDialogService) {
         this.globalSettings.ready.subscribe(() => {
             this.configured = true;
         });

diff --git a/projects/budgetkey/src/app/list-components/list-components.module.ts b/projects/budgetkey/src/app/list-components/list-components.module.ts
@@ -11,6 +11,7 @@ import { SearchResultComponent } from './search-result/search-result.component';
 import { EditedContentDirective } from './edited-content.directive';
 import { AppContainerComponent } from './app-container/app-container.component';
 import { AddToListDialogComponent } from './add-to-list-dialog/add-to-list-dialog.component';
+import { ListDialogService } from './list-dialog.service';
 
 /**
  * Created by adam on 27/12/2016.
@@ -32,12 +33,13 @@ import { AddToListDialogComponent } from './add-to-list-dialog/add-to-list-dialo
     AddToListDialogComponent,
   ],
   providers: [
+    ListDialogService,
   ],
   exports: [
     AddToListIconComponent,
     ListViewComponent,
     SearchResultComponent,
-    AppContainerComponent
+    AppContainerComponent,
   ]
 })
 export class ListComponentsModule { }
diff --git a/projects/budgetkey/src/app/list-components/list-dialog.service.ts b/projects/budgetkey/src/app/list-components/list-dialog.service.ts
@@ -0,0 +1,57 @@
+import { Injectable, signal } from '@angular/core';
+import { DocResultEntry } from '../common-components/search-models';
+import { ListContents } from '../common-components/services/lists.service';
+import { Subject, Subscription, animationFrameScheduler, interval, takeUntil, timer } from 'rxjs';
+
+export interface AddToListDialogCommand {
+  command: 'add-item' | 'remove-item' | 'open-list' | 'new-list';
+  list?: ListContents;
+  itemNotes?: string;
+  itemId?: number;
+  listTitle?: string;
+};
+
+@Injectable()
+export class ListDialogService {
+
+  dialogOpen = signal(false);
+  listSelection = signal(false);
+  doc: any = signal<DocResultEntry|null>(null);
+  top = signal(0);
+  right = signal(0);
+
+  executeQ = new Subject<[DocResultEntry, AddToListDialogCommand[]]>();
+  closeQ = new Subject<void>();
+  positionSub: Subscription | null = null;
+
+  constructor() { }
+
+  execute(commands: AddToListDialogCommand[]) {
+    this.executeQ.next([this.doc(), commands]);
+  }
+
+  open(doc: DocResultEntry, listSelection: boolean, el: HTMLElement) {
+    if (this.dialogOpen()) {
+      this.close();
+      timer(0).subscribe(() => this.open(doc, listSelection, el));
+    } else {
+      this.doc.set(doc);
+      this.listSelection.set(listSelection);
+      this.positionSub = interval(16, animationFrameScheduler).pipe(
+        takeUntil(this.closeQ),
+      ).subscribe(() => {
+        const rect = el.getBoundingClientRect();
+        this.top.set(rect.bottom);
+        this.right.set(rect.right);
+      });
+      this.dialogOpen.set(true);
+    }
+  }
+
+  close() {
+    console.log('closed');
+    this.positionSub?.unsubscribe();
+    this.positionSub = null;
+    this.closeQ.next();
+  }
+}
diff --git a/projects/budgetkey/src/app/list-components/list-view/list-view.component.less b/projects/budgetkey/src/app/list-components/list-view/list-view.component.less
@@ -231,6 +231,7 @@
             flex-flow: row;
             align-items: center;
             justify-content: flex-end;
+            z-index: 1;
 
             .share-button {
                 .list-button;

diff --git a/projects/budgetkey/src/app/list-components/search-result/search-result.component.less b/projects/budgetkey/src/app/list-components/search-result/search-result.component.less
@@ -6,27 +6,27 @@
     border-radius: 4px;
     box-shadow: 0 1px 2px 0 rgba(189, 189, 189, 0.6);
     border: solid 1px black;
-    position: relative;
+    // position: relative;
 
     * {
         pointer-events: none;
     }
 
     & > * {
-        z-index: 1;
-        position: relative;
+        // z-index: 1;
+        // position: relative;
         background-color: @color-white;
     }
 
     & > a {
-        position: absolute;
+        // position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         pointer-events: all;
         background: rgba(100,0,0,0.1);
-        z-index: 0;
+        // z-index: 0;
     }
 
     app-add-to-list-icon {