Watch query & tests

src/App/App.vue

@@ -10,7 +10,7 @@ import { useAppHead } from "./composables/useAppHead";
 import Panels from "../Panels/Panels.vue";
 import { useSidebarStore } from "@/Sidebar/sidebarStore";
 import { useKeyboardStore } from "@/Keyboard/keyboardStore";
-import QuickEditor from "@/QuickEditor/QuickEditor.vue";
+import { useQuerySetter } from "@/router/useQuerySetter";
 
 const appStore = useAppStore();
 const sidebarStore = useSidebarStore();
@@ -19,6 +19,7 @@ const editorOrchestrator = useEditorOrchestratorStore();
 usePageEffects();
 useAppHead();
 useKeyboardStore();
+useQuerySetter();
 
 const globalClass = computed(
  () =>

src/Drawer/PageButtons/PageButtons.vue

@@ -82,6 +82,7 @@ const moving = (pageIndex: number, translationAmount: number) => {
 
 <template>
  <div
+ id="pageButtons"
  class="flex flex-row overflow-x-scroll noScrollBar flex-grow"
  style="--webkit-overflow-scrolling: touch; scrollbar-width: none"
  >
@@ -97,6 +98,7 @@ const moving = (pageIndex: number, translationAmount: number) => {
  />
  <button
  v-if="editable"
+ title="Add new page"
  class="w-8 h-8 flex items-center justify-center transition bg-white hover:bg-indigo-50 dark:bg-slate-700 dark:hover:bg-slate-800 dark:border-slate-600 flex-shrink-0 print-hidden"
  @click="addPage"
  >

src/router/useQuerySetter.ts

@@ -1,25 +1,40 @@
 import { computed, watch } from "vue";
-import { useRoute } from "vue-router";
+import { useRoute, useRouter } from "vue-router";
 import { usePageStore } from "../Markwhen/pageStore";
 import { useViewStore } from "../Views/viewStore";
 import { useTransformStore } from "@/Markwhen/transformStore";
 
 export const useQuerySetter = () => {
  const route = useRoute();
+ const router = useRouter();
  const pageStore = usePageStore();
  const viewStore = useViewStore();
  const transformStore = useTransformStore();
 
  const currentViewName = computed(() => viewStore.currentView.name);
 
  const queryMap = computed(() => ({
- page: `${pageStore.pageIndex}`,
+ page: `${pageStore.pageIndex + 1}`,
  view: currentViewName.value,
  sort: transformStore.sort,
  filter: transformStore.filter.join(","),
  }));
 
- const computedQuery = computed(() => new URLSearchParams(queryMap.value));
+ const computedQuery = computed(() =>
+ new URLSearchParams(queryMap.value).toString()
+ );
 
- const currentQueryMap = computed(() => new URLSearchParams(route.query));
+ const currentQueryMap = computed(() =>
+ new URLSearchParams(route.query as Record<string, string>).toString()
+ );
+
+ let setterTimeout: any;
+ watch([computedQuery, currentQueryMap], ([computedQ, receivedQ]) => {
+ clearTimeout(setterTimeout as number);
+ setterTimeout = setTimeout(() => {
+ if (computedQ !== receivedQ) {
+ router.replace(route.path + route.hash + "?" + computedQ);
+ }
+ }, 200);
+ });
 };

src/router/useRouteWatcherStore.ts

@@ -2,8 +2,8 @@ import { useMarkwhenStore } from "@/Markwhen/markwhenStore";
 import { useTransformStore, type Sort } from "@/Markwhen/transformStore";
 import { useViewStore } from "@/Views/viewStore";
 import { defineStore } from "pinia";
-import { computed, ref, watchEffect } from "vue";
-import { useRoute, useRouter } from "vue-router";
+import { computed, ref, watch } from "vue";
+import { useRoute } from "vue-router";
 import { usePageStore } from "../Markwhen/pageStore";
 
 export type RouteWatchState = "idle" | "error" | "loading";
@@ -21,7 +21,6 @@ export const useRouteWatcherStore = defineStore("routeWatcher", () => {
  });
 
  const pageIndexFromQuery = (index: string) => {
- console.log("set page index", index);
  if (typeof index === "string") {
  const parsed = parseInt(index);
  if (isNaN(parsed)) {
@@ -30,47 +29,52 @@ export const useRouteWatcherStore = defineStore("routeWatcher", () => {
  return i;
  }
  }
- } else if (parsed >= 0 && parsed < pageTitles.value.length) {
- return parsed;
+ } else if (parsed >= 1 && parsed < pageTitles.value.length + 1) {
+ return parsed - 1;
  }
  } else if (
  typeof index === "number" &&
- index >= 0 &&
- index < pageTitles.value.length
+ index >= 1 &&
+ index < pageTitles.value.length + 1
  ) {
- return index;
+ return index - 1;
  }
  };
 
- // query
- watchEffect(() => {
- if (route.query.page) {
+ const setFromQuery = (query: Record<string, string>) => {
+ if (query.page) {
  const index = pageIndexFromQuery(route.query.page as string);
  if (typeof index === "number") {
  pageStore.setPageIndex(index);
  }
  }
- if (route.query.view) {
+ if (query.view) {
  for (let i = 0; i < viewStore.views.length; i++) {
  if (
- (route.query.view as string).toLowerCase() ===
+ (query.view as string).toLowerCase() ===
  viewStore.views[i].name.toLowerCase()
  ) {
  viewStore.setSelectedViewIndex(i);
  }
  }
  }
- const sort = (route.query.sort as string)?.toLowerCase();
+ const sort = (query.sort as string)?.toLowerCase();
  for (const s of ["none", "up", "down"] as Sort[]) {
  if (sort === s) {
  transformStore.setSort(sort);
  }
  }
- const filters = (route.query.filter as string)?.split(",") || [];
+ const filters = (query.filter as string)?.split(",") || [];
  for (const filter of filters) {
  transformStore.addFilterTag(filter);
  }
- });
+ };
+
+ watch(
+ () => route.query,
+ (query) => setFromQuery(query as Record<string, string>),
+ { immediate: true }
+ );
 
  return {
  watchState,

tests/pages.spec.ts

@@ -2,6 +2,12 @@ import { test, expect, Page } from "@playwright/test";
 
 const url = "http:https://localhost:5173/";
 
+const expectPageQuery = async (page: Page, pageQuery: string | number) => {
+ await page.waitForURL(/page/);
+ const pageUrl = new URL(page.url());
+ expect(pageUrl.searchParams.get("page")).toBe(`${pageQuery}`);
+};
+
 const goToPage = async (page: Page, pageWithTitle: string) => {
  const pageButton = await page.getByRole("button", {
  name: pageWithTitle,
@@ -22,7 +28,6 @@ const movePages = async (page: Page, fromTitle: string, toTitle: string) => {
 
  const page1LeftBefore = await page1Left();
  const page0LeftBefore = await page0Left();
-
  const movingLeft = page0LeftBefore! > page1LeftBefore!;
 
  await (await page1Button()).dragTo(await page0Button());
@@ -48,6 +53,7 @@ test("go to page", async ({ page }) => {
 test("move pages left", async ({ page }) => {
  await page.goto(url);
  await movePages(page, "Header", "Welcome to Markwhen 👋");
+ await expectPageQuery(page, 3);
 });
 
 test("move pages right", async ({ page }) => {
@@ -60,4 +66,53 @@ test("Move current page, is still selected", async ({ page }) => {
  await goToPage(page, "Events");
  await movePages(page, "Events", "Welcome to Markwhen 👋");
  await expect(page.getByText(`title: Events`)).toBeVisible();
+ await expectPageQuery(page, 3);
+});
+
+test("New page, is immediately selected", async ({ page }) => {
+ await page.goto(url);
+ const pageButtons = await page.locator("#pageButtons");
+ await pageButtons.evaluate((buttons) => {
+ buttons.scrollLeft = buttons.scrollWidth;
+ });
+ const newPageButton = await page.getByRole("button", {
+ name: "Add new page",
+ });
+ await newPageButton.scrollIntoViewIfNeeded();
+ await newPageButton.click();
+ await expect(page.getByText(`title: Page 10`)).toBeVisible();
+ await expectPageQuery(page, 10);
+});
+
+test("Route to page by page index, is selected", async ({ page }) => {
+ await page.goto(url + "?page=2");
+ await expect(page.getByText(`title: Header`)).toBeVisible();
+});
+
+test("Route to page by page title, is selected", async ({ page }) => {
+ await page.goto(url + "?page=" + encodeURIComponent("Groups and Sections"));
+ await expect(page.getByText(`title: Groups and Sections`)).toBeVisible();
+});
+
+test("Delete page, draft is updated", async ({ page }) => {
+ await page.goto(url);
+ const headerPageButtonLocator = async () =>
+ page.getByRole("button", { name: "Header" });
+ let headerPageButton = await headerPageButtonLocator();
+ await headerPageButton.hover();
+ const deletePageButton = await headerPageButton.getByRole("button");
+ await deletePageButton.click();
+ await page
+ .getByTitle("Saved to local storage")
+ .getByTitle("Pending save", { exact: true });
+ await page
+ .getByTitle("Saved to local storage")
+ .getByTitle("Saving", { exact: true });
+ await page
+ .getByTitle("Saved to local storage")
+ .getByTitle("Saved", { exact: true });
+
+ await page.waitForFunction(() => {
+ return JSON.parse(localStorage)
+ })
 });