💄 Enhance responsiveness

src/src/app/components/dashboard/dashboard.component.ts

@@ -39,6 +39,7 @@ import { Settings } from "../../types/settings";
 import { SelectItemGroup } from "primeng/api";
 import { YesNoModalComponent } from "../../modals/yes-no-modal/yes-no-modal.component";
 import { CategoryCreateModalComponent } from "../../modals/category-create-modal/category-create-modal.component";
+import { AuthService } from "../../services/auth.service";
 
 export interface ContextMenuItem {
   text: string;
@@ -107,6 +108,7 @@ export class DashboardComponent implements AfterViewInit {
 
   constructor(
     private apiService: ApiService,
+    private authService: AuthService,
     private utilsService: UtilsService,
     private dialogService: DialogService,
     private router: Router,
@@ -150,6 +152,10 @@ export class DashboardComponent implements AfterViewInit {
     });
   }
 
+  logout() {
+    this.authService.logout();
+  }
+
   closePlaceBox() {
     this.selectedPlace = undefined;
   }
@@ -308,10 +314,10 @@ export class DashboardComponent implements AfterViewInit {
         appendTo: "body",
         closable: true,
         dismissableMask: true,
-        width: "40vw",
+        width: "55vw",
         breakpoints: {
-          "960px": "60vw",
+          "1920px": "70vw",
-          "640px": "90vw",
+          "1260px": "90vw",
         },
         ...opts,
       },
@@ -343,10 +349,10 @@ export class DashboardComponent implements AfterViewInit {
         appendTo: "body",
         closable: true,
         dismissableMask: true,
-        width: "40vw",
+        width: "55vw",
         breakpoints: {
-          "960px": "60vw",
+          "1920px": "70vw",
-          "640px": "90vw",
+          "1260px": "90vw",
         },
       },
     );
@@ -488,17 +494,17 @@ export class DashboardComponent implements AfterViewInit {
         appendTo: "body",
         closable: true,
         dismissableMask: true,
-        width: "40vw",
+        width: "55vw",
+        breakpoints: {
+          "1920px": "70vw",
+          "1260px": "90vw",
+        },
         data: {
           place: {
             ...this.selectedPlace,
             category: this.selectedPlace.category.id,
           },
         },
-        breakpoints: {
-          "960px": "60vw",
-          "640px": "90vw",
-        },
       },
     );
 
@@ -647,9 +653,9 @@ export class DashboardComponent implements AfterViewInit {
         closable: true,
         dismissableMask: true,
         data: { category: c },
-        width: "20vw",
+        width: "40vw",
         breakpoints: {
-          "960px": "60vw",
+          "960px": "70vw",
           "640px": "90vw",
         },
       },
@@ -692,9 +698,9 @@ export class DashboardComponent implements AfterViewInit {
         appendTo: "body",
         closable: true,
         dismissableMask: true,
-        width: "20vw",
+        width: "40vw",
         breakpoints: {
-          "960px": "60vw",
+          "960px": "70vw",
           "640px": "90vw",
         },
       },

src/src/app/components/trip/trip.component.ts

@@ -213,7 +213,7 @@ export class TripComponent implements AfterViewInit {
 
     const stats = day.items.reduce(
       (acc, item) => {
-        acc.price += item.price || item.place?.price || 0;
+        acc.price += item.price || 0;
         if (item.place) acc.places += 1;
         return acc;
       },
@@ -261,7 +261,7 @@ export class TripComponent implements AfterViewInit {
           text: item.text,
           status: this.statusToTripStatus(item.status as string),
           comment: item.comment,
-          price: item.price || (item.place ? item.place.price : undefined),
+          price: item.price || undefined,
           day_id: item.day_id,
           place: item.place,
           lat: item.lat || (item.place ? item.place.lat : undefined),
@@ -566,11 +566,11 @@ export class TripComponent implements AfterViewInit {
         appendTo: "body",
         closable: true,
         dismissableMask: true,
-        width: "30vw",
+        width: "50vw",
-        data: { trip: this.trip },
         breakpoints: {
-          "640px": "90vw",
+          "640px": "80vw",
         },
+        data: { trip: this.trip },
       },
     );
 
@@ -621,10 +621,10 @@ export class TripComponent implements AfterViewInit {
         appendTo: "body",
         closable: true,
         dismissableMask: true,
-        width: "30vw",
+        width: "50vw",
         data: { days: this.trip?.days },
         breakpoints: {
-          "640px": "90vw",
+          "640px": "80vw",
         },
       },
     );
@@ -653,10 +653,10 @@ export class TripComponent implements AfterViewInit {
         appendTo: "body",
         closable: true,
         dismissableMask: true,
-        width: "30vw",
+        width: "50vw",
         data: { day: day, days: this.trip?.days },
         breakpoints: {
-          "640px": "90vw",
+          "640px": "80vw",
         },
       },
     );
@@ -722,9 +722,10 @@ export class TripComponent implements AfterViewInit {
         modal: true,
         appendTo: "body",
         closable: true,
-        width: "30vw",
+        width: "50vw",
         data: { places: this.places },
         breakpoints: {
+          "960px": "80vw",
           "640px": "90vw",
         },
       },
@@ -756,15 +757,15 @@ export class TripComponent implements AfterViewInit {
         appendTo: "body",
         closable: true,
         dismissableMask: true,
-        width: "40vw",
+        width: "75vw",
+        breakpoints: {
+          "1260px": "90vw",
+        },
         data: {
           places: this.places,
           days: this.trip?.days,
           selectedDay: day_id,
         },
-        breakpoints: {
-          "640px": "90vw",
-        },
       },
     );
 
@@ -788,6 +789,7 @@ export class TripComponent implements AfterViewInit {
               if (item.place?.id) {
                 this.placesUsedInTable.add(item.place.id);
                 this.setPlacesAndMarkers();
+                this.dayStatsCache.delete(item.day_id);
               }
             },
           });
@@ -804,7 +806,10 @@ export class TripComponent implements AfterViewInit {
         appendTo: "body",
         closable: true,
         dismissableMask: true,
-        width: "40vw",
+        width: "75vw",
+        breakpoints: {
+          "1260px": "90vw",
+        },
         data: {
           places: this.places,
           days: this.trip?.days,
@@ -813,9 +818,6 @@ export class TripComponent implements AfterViewInit {
             status: item.status ? (item.status as TripStatus).label : null,
           },
         },
-        breakpoints: {
-          "640px": "90vw",
-        },
       },
     );
 
@@ -896,6 +898,8 @@ export class TripComponent implements AfterViewInit {
                   );
                   if (item.place?.id) {
                     this.placesUsedInTable.delete(item.place.id);
+                    if (item.place.price)
+                      this.updateTotalPrice(-item.place.price);
                     this.setPlacesAndMarkers();
                   }
                   this.dayStatsCache.delete(item.day_id);
@@ -917,11 +921,11 @@ export class TripComponent implements AfterViewInit {
         appendTo: "body",
         closable: true,
         dismissableMask: true,
-        width: "40vw",
+        width: "75vw",
-        data: { days: this.trip?.days },
         breakpoints: {
-          "640px": "90vw",
+          "1260px": "90vw",
         },
+        data: { days: this.trip?.days },
       },
     );
 

src/src/app/components/trips/trips.component.ts

@@ -63,9 +63,9 @@ export class TripsComponent {
         appendTo: "body",
         closable: true,
         dismissableMask: true,
-        width: "30vw",
+        width: "50vw",
         breakpoints: {
-          "640px": "90vw",
+          "960px": "80vw",
         },
       },
     );

src/src/app/modals/place-create-modal/place-create-modal.component.html

@@ -15,7 +15,7 @@
       <label for="lng">Longitude</label>
     </p-floatlabel>
 
-    <p-inputgroup class="col-span-2 md:col-span-3">
+    <p-inputgroup class="col-span-2 lg:col-span-3">
       <p-floatlabel variant="in">
         <input id="place" formControlName="place" pInputText fluid placeholder="" />
         <label for="place">Place</label>
@@ -26,7 +26,7 @@
       </p-inputgroup-addon>
     </p-inputgroup>
 
-    <p-floatlabel variant="in" class="col-span-2 md:col-span-1">
+    <p-floatlabel variant="in" class="col-span-2 lg:col-span-1">
       <p-select [options]="(categories$ | async) || []" optionValue="id" optionLabel="name"
         [loading]="!(categories$ | async)?.length" inputId="category" id="category" formControlName="category"
         [checkmark]="true" class="capitalize" fluid>