Delete list and other small fixes

Author: akariv

projects/budgetkey/src/app/common-components/auth/auth.component.html

@@ -17,7 +17,7 @@
         </div>
         <div *ngIf="user && user.authenticated" class='menu'>
             <a class='menu-line' (activated)="profile()" *ngIf='hasProfile' clickOnReturn>התראות שמורות</a>
-            <a class='menu-line' (activated)="myLists()" clickOnReturn *ngIf='lists.hasCuratedLists()'>הרשימות שלי</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>

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

@@ -34,6 +34,7 @@ export class ListContents extends ListProperties {
   name: string;
   user_id: string;
   items?: Array<ListItem>;
+  success?: boolean;
 }
 
 export const CURATED_KIND = 'curated';
@@ -43,7 +44,7 @@ export const EMPTY_LIST: ListContents = {
   name: '',
   user_id: '',
   url: null,
-  title: 'רשימה ללא שם',
+  title: 'הרשימה שלי',
   properties: {description: 'תיאור הרשימה...'},
   kind: 'curated',
   items: [],
@@ -190,15 +191,15 @@ export class ListsService {
     );
   }
 
-  public getAnonymous(user_id: string, list: string): Observable<ListContents> {
+  public getAnonymous(user_id: string, list: string): Observable<ListContents | null> {
     const params = {
       list, user_id, items: true
     };
     return (this.http.get<ListContents>('https://next.obudget.org/lists/', {params}))
       .pipe(
         tap((resp: ListContents) => {
           resp.items = resp.items?.sort((a: ListItem, b: ListItem) => (b.create_time || '').localeCompare(a.create_time || ''));
-        })
+        }),
       );
   }
 
@@ -277,6 +278,7 @@ export class ListsService {
               }
             } else {
               curatedList.items = [];
+              curatedLists.splice(listIndex, 1);
             }
             this.curatedLists.set([...curatedLists]);
           }

projects/budgetkey/src/app/list-components/add-to-list-dialog/add-to-list-dialog.component.ts

@@ -41,21 +41,28 @@ export class AddToListDialogComponent implements AfterViewInit, OnChanges {
         return;
       }
       const currentList = this.lists.currentList();
-      if (currentList) {
-        this.list = currentList;
+      let list: ListContents | null = null;
+      if (currentList && currentList.success !== false) {
+        list = currentList;
       } else {
         const lists = (this.lists.curatedLists() || []).sort((a, b) => (b.update_time || '').localeCompare(a.update_time || ''));
         if (lists.length > 0) {
-          this.list = lists[0];
+          list = lists[0];
         }
       }
-      this.lists.curatedLists()?.forEach((list) => {
-        this.originalSubscriptionState[list.name] = this.checkSubscribed(list);
-        this.subscriptionState[list.name] = this.originalSubscriptionState[list.name];
+      this.lists.curatedLists()?.forEach((list_) => {
+        this.originalSubscriptionState[list_.name] = this.checkSubscribed(list_);
+        this.subscriptionState[list_.name] = this.originalSubscriptionState[list_.name];
       });
-      if (this.list && !this.listSelection) {
-        this.originalSubscriptionState[this.list.name] = false;
-        this.subscriptionState[this.list.name] = true;
+      if (list && !this.listSelection) {
+        this.originalSubscriptionState[list.name] = false;
+        this.subscriptionState[list.name] = true;
+      }
+      if (!list) {
+        this.list = this.lists.emptyList;
+        this.newList = this.list.title;
+      } else {
+        this.list = list;
       }
     });
   }

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

@@ -9,7 +9,9 @@
                 <ng-content></ng-content>
             </div>
             <div class='list' *ngIf='showListView()'>
-                <app-list-view [list]="lists.currentList() || lists.emptyList" [headerControls]='true'></app-list-view>
+                <app-list-view [list]="lists.currentList() || lists.emptyList" [headerControls]='true'
+                    (deleted)='onDeleted()'
+                ></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.less

@@ -25,7 +25,7 @@
       max-width: 100%;
       display: flex;
       flex-flow: row;
-      align-items: flex-start;
+      align-items: stretch;
 
       .list {
         flex: 0 0 auto;
@@ -43,6 +43,7 @@
       .main {
         flex: 0 1 auto;
         width: 100%;
+        min-height: 100%;
         display: flex;
         flex-flow: column;
         align-items: center;  

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

@@ -1,6 +1,6 @@
 import { HttpClient } from '@angular/common/http';
 import {Component, ViewEncapsulation, Input, signal, AfterViewInit, effect, computed} from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { GlobalSettingsService } from '../../common-components/global-settings.service';
 import { distinct, distinctUntilChanged, filter, map, switchMap, tap } from 'rxjs';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
@@ -25,9 +25,26 @@ export class AppContainerComponent {
     configured = false;
 
     maxWidth = signal<number>(0);
-    showListView = computed(() => !!this.lists.currentList() && this.listSideView && this.layout.desktop);
+    hasListView = computed(() => {
+        console.log('SHOW LIST VIEW', this.layout.desktop, this.listSideView, this.lists.currentList(), this.listKey());
+        const list = this.lists.currentList();
+        if (!list) {
+            return false;
+        }
+        if (list.success === false) {
+            return false;
+        }
+        if (!this.listKey()) {
+            return false;
+        }
+        if (this.listKey() !== `${list?.user_id}:${list?.name}`) {
+            return false;
+        }
+        return true;
+    });
+    listKey = signal<string | null>(null);
 
-    constructor(private route: ActivatedRoute, private globalSettings: GlobalSettingsService, public lists: ListsService, public layout: LayoutService) {
+    constructor(private route: ActivatedRoute, private globalSettings: GlobalSettingsService, public lists: ListsService, public layout: LayoutService, private router: Router) {
         this.globalSettings.ready.subscribe(() => {
             this.configured = true;
         });
@@ -39,7 +56,8 @@ export class AppContainerComponent {
             distinctUntilChanged(),
         ).subscribe((list) => {
             console.log('SET LIST', list);
-            this.lists.currentListId.set(list);
+            this.listKey.set(list);
+            this.lists.currentListId.set(this.listKey());
         });
         effect(() => {
             let maxWidth = this.layout.width();
@@ -52,4 +70,12 @@ export class AppContainerComponent {
             this.maxWidth.set(maxWidth);
         }, { allowSignalWrites: true});
     }
+
+    showListView() {
+        return this.layout.desktop && this.listSideView && this.hasListView();
+    }
+    
+    onDeleted() {
+        this.router.navigate(['.'], { relativeTo: this.route, queryParams: { list: null }, queryParamsHandling: 'merge', replaceUrl: true});
+    }
 }

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

@@ -25,7 +25,10 @@ <h1 [editedContent]='editable()' (updated)='title = $event' #titleEl>{{title}}</
         <a class='close-button' [routerLink]='"."' [queryParams]='{list: null}' queryParamsHandling='merge' clickOnReturn></a>
     </div>
     <div class='edit-controls' *ngIf='editable()'>
-        <a class='delete-button' (activated)='deleteDialog.set(true)' clickOnReturn>מחיקת רשימה</a>
+        <a class='delete-button' (activated)='deleteDialog.set(true)' clickOnReturn>
+            <span class='icon'></span>
+            מחיקת רשימה
+        </a>
     </div>
 </div>
 <div class='list-contents'>
@@ -62,3 +65,22 @@ <h1 [editedContent]='editable()' (updated)='title = $event' #titleEl>{{title}}</
         <button class='done-button' clickOnReturn (activated)='shareDialog.set(false)'>אישור</button>
     </div>
 </app-modal>
+
+<app-modal [standardLayout]='false'
+    *ngIf='deleteDialog()'
+    (close)='deleteDialog.set(false)'
+>
+    <div class='dialog-header'>
+        <span>מחיקת הרשימה:</span>
+        <div class='title'>{{list.title}}</div>
+    </div>
+    <div class='dialog-explanation'>
+        <span>לא ניתן לבטל פעולה זו.</span><br/>
+    </div>
+    <div class='dialog-done'>
+        <button class='cancel-button' clickOnReturn (activated)='deleteDialog.set(false)'>
+            ביטול
+        </button>
+        <button class='done-button' clickOnReturn (activated)='deleteSelf()'>מחיקה</button>
+    </div>
+</app-modal>

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

@@ -149,12 +149,52 @@
                 background-image: url(../../../assets/lists/icon-fullscreen-gray-500.svg);
             }
         }
+
         .edit-controls {
             display: flex;
             flex-flow: row;
             position: absolute;
             top: 8px;
             right: 8px;
+
+            .delete-button {
+                appearance: none;
+                border: none;
+                display: flex;
+                flex-flow: row;
+                align-items: center;
+                justify-content: center;
+                gap: 2px;
+                padding: 2px 4px 2px 12px;
+                border-radius: 4px;
+                border: 1px solid @color-lists-light-blue;
+                background: @color-white;
+                                
+                color: @color-lists-grayish-blue;
+                .font-abraham;
+                font-size: 16px;
+                font-weight: 400;
+                line-height: 28px;
+                text-decoration: none;
+
+                .icon {
+                    .background-image;
+                    background-image: url(../../../assets/lists/icon-lists-trash-grayish-blue.svg);
+                    display: inline-block;
+                    width: 24px;
+                    height: 24px;
+                }
+
+                &:hover {
+                    border: 1px solid @color-fill-lead;
+                    background: @color-fill-lead-lighter;
+                    color: @color-fill-lead;
+
+                    .icon {
+                        background-image: url(../../../assets/lists/icon-lists-trash-red.svg);
+                    }    
+                }
+            }
         }
     }
 
@@ -229,7 +269,7 @@
 
     .dialog-explanation {
         width: 100%;
-        padding: 16px 24px;
+        padding: 16px 32px;
         color: @color-gray-800;
         text-align: right;
         .font-abraham;
@@ -277,6 +317,22 @@
             }
         }
 
+        .cancel-button {
+            appearance: none;
+            border: none;
+            display: flex;
+            flex-flow: row;
+            align-items: center;
+            justify-content: center;
+            color: @color-gray-500;
+            background-color: white;
+            padding: 0 24px;
+
+            &:hover {
+                color: @color-gray-800;
+            }
+        }
+
         .done-button {
             margin-right: auto;
             .list-button;

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

@@ -1,4 +1,4 @@
-import { Component, ElementRef, Input, OnChanges, OnInit, SimpleChanges, ViewChild, computed, signal } from '@angular/core';
+import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild, computed, signal } from '@angular/core';
 import { ListContents, ListsService } from '../../common-components/services/lists.service';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { Format } from '../../format';
@@ -17,6 +17,8 @@ export class ListViewComponent implements OnChanges {
   @Input() list: ListContents;
   @Input() headerControls = false;
 
+  @Output() deleted = new EventEmitter<void>();
+
   @ViewChild('titleEl') titleEl: ElementRef;
   @ViewChild('descriptionEl') descriptionEl: ElementRef;
 
@@ -106,4 +108,12 @@ export class ListViewComponent implements OnChanges {
     document.body.removeChild(el);
     this.copied = true;
   }
+
+  deleteSelf() {
+    this.lists.delete(this.list.name, null).subscribe((success) => {
+      console.log('DELETED LIST', success);
+      this.deleted.emit();
+      this.deleteDialog.set(false);
+    });
+  }
 }

projects/budgetkey/src/app/list-page/list-page/list-page.component.html

@@ -1,6 +1,6 @@
-<app-container>
+<app-container [showHeader]="true" [showSearchBar]="true" [listSideView]='false'>
     <div *ngIf='init && list'>
-        <app-list-view [list]='list'></app-list-view>
+        <app-list-view [list]='list' (deleted)='onDeleted()'></app-list-view>
     </div>
 </app-container>