Add a menu option on trip page and move edit option into it

src/cockpit/cache/TripCache.ts

@@ -2,7 +2,12 @@ import HTTPReq from "@/shared/HTTPReq";
 import PWAUtils from "@/shared/PWAUtils";
 import TripObj from "@/wings/TripObj";
 import { WingsStructUtil } from "wings-ts-util";
-import { Cache, CacheStorage, FetchedObj } from "./CacheStorage";
+import {
+  Cache,
+  CacheStorage,
+  CacheStorageName,
+  FetchedObj,
+} from "./CacheStorage";
 
 class TripStorage extends CacheStorage<TripObj> {
   public static fromJSON(obj: Record<string, unknown>): TripStorage {
@@ -17,7 +22,7 @@ class TripStorage extends CacheStorage<TripObj> {
 export class FetchedTripObj extends FetchedObj<TripObj> {}
 
 export class TripCache extends Cache<TripObj, FetchedTripObj, TripStorage> {
-  protected storage = "trip";
+  protected storage: CacheStorageName = "trip";
   protected storeCount = 10;
 
   protected async genFetch(id: string): Promise<TripObj | null> {

src/cockpit/cache/UserCache.ts

@@ -2,7 +2,12 @@ import HTTPReq from "@/shared/HTTPReq";
 import PWAUtils from "@/shared/PWAUtils";
 import UserObj from "@/wings/UserObj";
 import { WingsStructUtil } from "wings-ts-util";
-import { Cache, CacheStorage, FetchedObj } from "./CacheStorage";
+import {
+  Cache,
+  CacheStorage,
+  CacheStorageName,
+  FetchedObj,
+} from "./CacheStorage";
 
 class UserStorage extends CacheStorage<UserObj> {
   public static fromJSON(obj: Record<string, unknown>): UserStorage {
@@ -17,7 +22,7 @@ class UserStorage extends CacheStorage<UserObj> {
 export class FetchedUserObj extends FetchedObj<UserObj> {}
 
 export class UserCache extends Cache<UserObj, FetchedUserObj, UserStorage> {
-  protected storage = "user";
+  protected storage: CacheStorageName = "user";
   protected storeCount = 10;
 
   protected async genFetch(username: string): Promise<UserObj | null> {

src/cockpit/cache/UsernameCache.ts

@@ -1,6 +1,11 @@
 import HTTPReq from "@/shared/HTTPReq";
 import PWAUtils from "@/shared/PWAUtils";
-import { Cache, CacheStorage, FetchedObj } from "./CacheStorage";
+import {
+  Cache,
+  CacheStorage,
+  CacheStorageName,
+  FetchedObj,
+} from "./CacheStorage";
 
 class UsernameStorage extends CacheStorage<string> {
   public static fromJSON(obj: Record<string, unknown>): UsernameStorage {
@@ -20,7 +25,7 @@ export class UsernameCache extends Cache<
   FetchedUsername,
   UsernameStorage
 > {
-  protected storage = "username";
+  protected storage: CacheStorageName = "username";
   protected storeCount = 20;
 
   protected async genFetch(id: string): Promise<string | null> {

src/cockpit/components/CViewTrip.vue

@@ -7,6 +7,16 @@
       type="info"
     ) Only you can see this trip.
     h2.tripName.left_col {{ trip.details.name }}
+    n-dropdown(
+      v-if="menuOptions.length > 0"
+      trigger="click"
+      :options="menuOptions"
+      :show-arrow="true"
+      @select="handleSelectMenu"
+    )
+      n-button.right_col.tripMenu
+        n-icon
+          ellipsis-horizontal-outline
     p.tripDescription(
       v-if="trip.details.description !== ''"
     ) {{ trip.details.description }}
@@ -17,10 +27,7 @@
     p.tripCreatedDate Created on: {{ created }}
     div.tripCities
       n-tag.tripCity(v-for="city in cities" type="info") {{ city }}
-    CShare.left_col(:shareURL="shareURL")
-    n-button.right_col(
-      v-if="editable" @click="enableEditMode"
-    ) Edit
+    CShare(:shareURL="shareURL")
   .viewDays
     n-card.viewDayCard(
       v-for="day in days"
@@ -40,17 +47,27 @@ import CShare from "./CShare.vue";
 import { DataDay } from "@/shared/DataProps";
 import Day from "@/wings/Day";
 import TripObj from "@/wings/TripObj";
-import { NAlert, NButton, NCard, NTag } from "naive-ui";
+import { NAlert, NButton, NCard, NDropdown, NIcon, NTag } from "naive-ui";
+import { EllipsisHorizontalOutline } from "@vicons/ionicons5";
 import HTTPReq from "@/shared/HTTPReq";
 import Routes from "@/routes";
 import General from "@/shared/General";
 
+type MenuList = "edit" | "bookmark";
+
+interface MenuListOption {
+  label: string;
+  key: MenuList;
+  disabled?: boolean;
+}
+
 interface Data {
   days: DataDay[];
   cities: string[];
   shareURL: string;
   created: string;
   lastUpdated: string;
+  menuOptions: MenuListOption[];
 }
 
 export default defineComponent({
@@ -59,9 +76,12 @@ export default defineComponent({
     CLink,
     CPlaces,
     CShare,
+    EllipsisHorizontalOutline,
     NAlert,
     NButton,
     NCard,
+    NDropdown,
+    NIcon,
     NTag,
   },
   props: {
@@ -82,6 +102,12 @@ export default defineComponent({
     shareURL: "",
     created: "",
     lastUpdated: "",
+    menuOptions: [
+      // {
+      //   label: "Bookmark",
+      //   key: "bookmark",
+      // },
+    ],
   }),
   beforeMount(): void {
     this.$data.cities = [];
@@ -101,11 +127,26 @@ export default defineComponent({
     this.$data.lastUpdated = General.getDisplayDate(
       this.$props.trip.lastUpdated,
     );
+    if (this.$props.editable) {
+      this.$data.menuOptions.push({
+        label: "Edit",
+        key: "edit",
+      });
+    }
   },
   methods: {
+    handleSelectMenu(key: MenuList) {
+      switch (key) {
+        case "bookmark":
+          return this.save();
+        case "edit":
+          return this.enableEditMode();
+      }
+    },
     enableEditMode(): void {
       this.$emit("enableEditMode");
     },
+    save(): void {},
   },
 });
 </script>
@@ -124,6 +165,10 @@ export default defineComponent({
   margin: 5px 5px 0 0;
 }
 
+.tripMenu {
+  padding: 0 5px 0 8px;
+}
+
 .dayTitle {
   margin: 0;
 }

src/cockpit/components/CViewUser.vue

@@ -13,7 +13,7 @@
       ) {{ user.details.link }}
     .userInfoButtonGroups(v-if="self")
       CShare.left_col( :shareURL="shareURL" :onClick="onShare")
-      n-button.right_col(
+      n-button.myAccountEdit.right_col(
         type="default" ref="edit" @click="toggleEdit"
       ) Edit
   n-divider.viewUserDivider

src/cockpit/configs/vitest_playwright.config.ts

@@ -3,7 +3,7 @@ import baseConfig from "./vite_base_config";
 
 const config = baseConfig(true);
 config.test.include = ["tests/playwright/**/*_vitest.{test,spec}.ts"];
-config.test.testTimeout = 10000;
+config.test.testTimeout = 20000;
 
 if (config.test.coverage !== undefined) {
   config.test.coverage.reportsDirectory = "playwright_coverage";

src/cockpit/tests/playwright/__snapshots__/trip_vitest.test.ts.snap

@@ -555,18 +555,17 @@ exports[`Trips > user 2 can't see private trip 1`] = `
             </div>
           </div>
         </div>
-        <div role="menuitem"
-             class="n-menu-item"
+        <div class="n-submenu"
+             role="menuitem"
+             aria-expanded="true"
         >
           <div role="none"
                class="n-menu-item-content"
           >
             <div class="n-menu-item-content-header"
                  role="none"
             >
-              <a href="/user/testuser2">
-                My Account
-              </a>
+              My Account ▾
             </div>
           </div>
         </div>

src/cockpit/tests/playwright/playwrightHelper.ts

@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
+import Routes from "@/routes";
 import { Browser, BrowserContext, chromium, Page } from "playwright-core";
 import { expect } from "vitest";
 
@@ -162,8 +163,11 @@ export async function genLogin(
 }
 
 export async function genLogout(page: Page) {
-  await page.goto("/myaccount");
-  await page.locator(".myAccountLogout").click();
+  await page.goto(Routes.Logout);
+  await page
+    .locator(".n-dialog__action")
+    .locator(".n-button--error-type")
+    .click();
   await page.waitForURL(BASE_URL);
 }
 
@@ -173,14 +177,14 @@ export async function genTryLogout(page: Page) {
     .locator(".main_menu")
     .locator(".n-menu-item")
     .allInnerTexts();
-  if (menubar.includes("My Account")) {
+  if (!menubar.includes("Register")) {
     await genLogout(page);
   }
 }
 
 export async function genDeleteAccount(page: Page) {
-  await page.goto("/myaccount");
-  await page.locator(".myAccountEdit").click();
+  await page.goto(Routes.MyAccount);
+  await page.locator(".userInfoButtonGroups").locator(".myAccountEdit").click();
   await page.locator(".myAccountDelete").click();
   await page.locator(".n-button--warning-type").click();
   await page.waitForURL(BASE_URL);
@@ -193,7 +197,6 @@ export async function genIsLoggedOut(page: Page) {
     .allInnerTexts();
   expect(menubar).toContain("Register");
   expect(menubar).toContain("Login");
-  expect(menubar).not.toContain("My Account");
 }
 
 export async function genIsLoggedIn(page: Page) {
@@ -203,5 +206,4 @@ export async function genIsLoggedIn(page: Page) {
     .allInnerTexts();
   expect(menubar).not.toContain("Register");
   expect(menubar).not.toContain("Login");
-  expect(menubar).toContain("My Account");
 }

src/cockpit/tests/playwright/trip_vitest.test.ts

@@ -103,7 +103,8 @@ describe("Trips", async () => {
     await genLogin(page, email1, password1);
     await goTo(page, newTripURL);
 
-    await page.locator(".editTripButton").click();
+    await page.locator(".tripMenu").click();
+    await page.getByText("Edit").click();
     await page
       .locator(".editTripPrivacy")
       .locator(".editPrivacyToggle")
@@ -167,7 +168,8 @@ describe("Trips", async () => {
     await genLogin(page, email1, password1);
     await goTo(page, newTripURL);
 
-    await page.locator(".editTripButton").click();
+    await page.locator(".tripMenu").click();
+    await page.getByText("Edit").click();
     await page.locator(".deleteTrip").click();
     await page.locator("text=Confirm").click();