feat: change shopping list category order (#1932)

Author: julianpoy

package-lock.json

@@ -8,8 +8,8 @@
   },
   "private": true,
   "dependencies": {
-    "@ai-sdk/anthropic": "^3.0.0-beta.54",
-    "@ai-sdk/openai": "^3.0.0-beta.63",
+    "@ai-sdk/anthropic": "^3.0.0-beta.71",
+    "@ai-sdk/openai": "^3.0.0-beta.81",
     "@angular/common": "20.3.10",
     "@angular/core": "20.3.10",
     "@angular/forms": "20.3.10",
@@ -44,7 +44,7 @@
     "@types/jsdom": "^21.1.7",
     "accept-language": "^3.0.20",
     "ahocorasick": "^1.0.2",
-    "ai": "^6.0.0-beta.99",
+    "ai": "^6.0.0-beta.130",
     "axios": "^1.8.4",
     "body-parser": "~2.2.1",
     "commander": "14.0.1",

package.json

@@ -134,6 +134,7 @@ export const printShoppingListHandler = defineHandler(
       itemSummariesTranslated,
       req.query.sortBy || ShoppingListSortOptions.TitleDesc,
       categoryTitlesToi18n.uncategorized,
+      shoppingList.categoryOrder,
     );
 
     res.render("shoppinglist-default", {

packages/express/src/routes/print/printShoppingList.ts

@@ -0,0 +1,41 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title
+      >{{ 'pages.shoppingListCategoryOrderModal.title' | translate }}</ion-title
+    >
+
+    <ion-buttons slot="end">
+      <ion-button (click)="close()">
+        <ion-icon name="close" slot="icon-only"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content class="ion-padding">
+  <ion-item class="ion-no-padding">
+    <ion-label class="ion-text-wrap">
+      {{ 'pages.shoppingListCategoryOrderModal.description' | translate }}
+
+      <p>
+        {{ 'pages.shoppingListCategoryOrderModal.instructions' | translate }}
+      </p>
+    </ion-label>
+  </ion-item>
+
+  <ion-textarea
+    label="{{ 'pages.shoppingListCategoryOrderModal.label' | translate }}"
+    labelPlacement="stacked"
+    placeholder="{{ 'pages.shoppingListCategoryOrderModal.placeholder' | translate }}"
+    [(ngModel)]="categoryOrder"
+    rows="8"
+    auto-grow="true"
+  ></ion-textarea>
+</ion-content>
+
+<ion-footer class="ion-padding">
+  <ion-button expand="block" (click)="save()">
+    <ion-icon name="save" slot="start"></ion-icon>
+    <ion-label> {{ 'generic.save' | translate }} </ion-label>
+  </ion-button>
+</ion-footer>

packages/frontend/src/app/pages/shopping-list-components/shopping-list-category-order-modal/shopping-list-category-order-modal.page.html

@@ -0,0 +1,40 @@
+import { Component, inject, Input } from "@angular/core";
+import { ModalController } from "@ionic/angular";
+
+import { SHARED_UI_IMPORTS } from "../../../providers/shared-ui.provider";
+import { TRPCService } from "../../../services/trpc.service";
+
+@Component({
+  selector: "page-shopping-list-category-order-modal",
+  templateUrl: "shopping-list-category-order-modal.page.html",
+  styleUrls: ["shopping-list-category-order-modal.page.scss"],
+  imports: [...SHARED_UI_IMPORTS],
+})
+export class ShoppingListCategoryOrderModalPage {
+  private modalCtrl = inject(ModalController);
+  private trpcService = inject(TRPCService);
+
+  @Input({
+    required: true,
+  })
+  shoppingListId!: string;
+
+  @Input({
+    required: true,
+  })
+  categoryOrder: string | undefined;
+
+  async save() {
+    await this.trpcService.handle(
+      this.trpcService.trpc.shoppingLists.updateShoppingList.mutate({
+        id: this.shoppingListId,
+        categoryOrder: this.categoryOrder,
+      }),
+    );
+    this.close();
+  }
+
+  close() {
+    this.modalCtrl.dismiss();
+  }
+}

packages/frontend/src/app/pages/shopping-list-components/shopping-list-category-order-modal/shopping-list-category-order-modal.page.scss

@@ -16,11 +16,7 @@
   <ion-item class="ion-no-padding">
     <ion-label class="ion-text-wrap">
       {{ 'pages.shoppingListIgnoreModal.description' | translate }}
-    </ion-label>
-  </ion-item>
-  <ion-item class="ion-no-padding">
-    <ion-label class="ion-text-wrap">
-      {{ 'pages.shoppingListIgnoreModal.instructions' | translate }}
+      <p>{{ 'pages.shoppingListIgnoreModal.instructions' | translate }}</p>
     </ion-label>
   </ion-item>
 

packages/frontend/src/app/pages/shopping-list-components/shopping-list-category-order-modal/shopping-list-category-order-modal.page.ts

@@ -108,6 +108,16 @@
     {{ 'pages.shoppingListPopover.update' | translate }}
   </ion-button>
 
+  <ion-button
+    (click)="showCategoryOrderModal()"
+    expand="block"
+    size="small"
+    class="ion-margin"
+  >
+    <ion-icon name="reorder-three" slot="start"></ion-icon>
+    {{ 'pages.shoppingListPopover.categoryOrder' | translate }}
+  </ion-button>
+
   <ion-list-header>
     {{ 'pages.shoppingListPopover.dangerZone.title' | translate }}
   </ion-list-header>

packages/frontend/src/app/pages/shopping-list-components/shopping-list-ignore-modal/shopping-list-ignore-modal.page.html

@@ -22,6 +22,7 @@ import {
   ShoppingListSummary,
 } from "@recipesage/prisma";
 import { TRPCService } from "../../../services/trpc.service";
+import { ShoppingListCategoryOrderModalPage } from "../shopping-list-category-order-modal/shopping-list-category-order-modal.page";
 
 @Component({
   selector: "page-shopping-list-popover",
@@ -192,4 +193,18 @@ export class ShoppingListPopoverPage {
 
     this.dismiss();
   }
+
+  async showCategoryOrderModal() {
+    const modal = await this.modalCtrl.create({
+      component: ShoppingListCategoryOrderModalPage,
+      componentProps: {
+        shoppingListId: this.shoppingListId,
+        categoryOrder: this.shoppingList.categoryOrder,
+      },
+    });
+    await modal.present();
+    await modal.onDidDismiss();
+
+    this.dismiss();
+  }
 }

packages/frontend/src/app/pages/shopping-list-components/shopping-list-popover/shopping-list-popover.page.html

@@ -145,7 +145,10 @@ export class ShoppingListPage {
     this.me = me;
   }
 
-  async processList(_items: ShoppingListItemSummary[]) {
+  async processList(
+    _items: ShoppingListItemSummary[],
+    categoryOrder: string | null,
+  ) {
     const items = _items
       .filter((item) => !item.completed)
       .map((el) => {
@@ -190,6 +193,7 @@ export class ShoppingListPage {
       items,
       this.preferences[ShoppingListPreferenceKey.SortBy],
       this.parseCategoryTitle("::uncategorized"),
+      categoryOrder,
     );
 
     this.items = sortedItems;
@@ -203,6 +207,7 @@ export class ShoppingListPage {
       completedItems,
       this.preferences[ShoppingListPreferenceKey.SortBy],
       this.parseCategoryTitle("::uncategorized"),
+      categoryOrder,
     );
 
     this.completedItems = sortedCompletedItems;
@@ -232,7 +237,7 @@ export class ShoppingListPage {
       .toPromise();
     this.titleService.setTitle(title);
 
-    this.processList(shoppingListItems);
+    this.processList(shoppingListItems, shoppingList.categoryOrder);
   }
 
   async completeItems(items: ShoppingListItemSummary[], completed: boolean) {