Add pages listing and load endpoing

src/pages/Editor.vue

@@ -339,7 +339,7 @@ const serialize = () => {
 }
 
 const editorPageId = ref<number|undefined>()
-const saveEditorPage = async () => {
+const saveEditorPage = async (close = false) => {
   const params = {
     serialData: JSON.stringify(serialize()),
   } as any
@@ -363,6 +363,9 @@ const saveEditorPage = async () => {
   }
 
   editorPageId.value = result.data.pageId
+  if ( close ) {
+    await router.push('/Listings')
+  }
 }
 
 const loadEditorPage = async () => {
@@ -398,6 +401,14 @@ onMounted(() => {
   if ( props.pageId ) {
     editorPageId.value = props.pageId
     loadEditorPage()
+    return
+  }
+
+  const paramPageId = router.currentRoute.value.params.pageId
+  if ( !Array.isArray(paramPageId) && !isNaN(parseInt(paramPageId, 10)) ) {
+    editorPageId.value = parseInt(paramPageId, 10)
+    loadEditorPage()
+    return
   }
 })
 
@@ -549,7 +560,11 @@ onMounted(() => {
       </q-dialog>
 
       <q-page-sticky position="top-right" :offset="[18, 18]">
-        <q-btn fab icon="save" color="primary" @click="() => saveEditorPage()"/>
+        <q-btn fab icon="save" title="Save" color="primary" @click="() => saveEditorPage()"/>
+      </q-page-sticky>
+
+      <q-page-sticky position="top-right" :offset="[18, 90]">
+        <q-btn fab icon="close" title="Save and close" color="primary" @click="() => saveEditorPage(true)"/>
       </q-page-sticky>
 
       <q-page-sticky position="bottom-right" :offset="[32, 32]">

src/pages/Listings.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import {onMounted, ref} from 'vue'
+import router from '../router'
+
+interface PageRecord {
+  pageId: number|string,
+  title: string,
+}
+
+const pages = ref<PageRecord[]>([])
+const columns = ref([
+  {
+    name: 'title',
+    field: 'title',
+    label: 'Title',
+  },
+])
+
+const loadPages = async () => {
+  const response = await fetch(`/api/editor/pages`, {
+    method: 'GET',
+    headers: {
+      'Accept': 'application/json',
+    },
+  })
+
+  const result = (await response.json()) as unknown as any
+  if ( !result.success ) {
+    alert('Unable to load pages: ' + result?.message)
+  }
+
+  pages.value = result.data.records.map((row: any) => {
+    return {
+      pageId: row.pageId,
+      title: JSON.parse(row.serialData).title || 'New Page',
+    }
+  })
+}
+
+onMounted(loadPages)
+
+const onRowClick = (_: unknown, row: PageRecord) => {
+  router.push({ path: `/Editor/${row.pageId}` })
+}
+
+const onNewPageClick = () => {
+  router.push('/Editor')
+}
+
+</script>
+
+<template>
+  <div style="width: 100%">
+    <q-btn icon="add" style="margin-bottom: 10px" @click="onNewPageClick">New Page</q-btn>
+    <q-table
+        style="width: 100%"
+        title="My Pages"
+        :columns="columns"
+        :rows="pages"
+        row-key="pageId"
+        hide-bottom
+        :pagination="{ rowsPerPage: 10000 }"
+        @row-click="onRowClick"
+    />
+  </div>
+</template>

src/router.ts

@@ -17,6 +17,10 @@ const routes = [
         name: 'Editor',
         component: () => import(/* webpackChunkName: "Editor" */ './pages/Editor.vue'),
     },
+    {
+        path: '/editor/:pageId',
+        component: () => import(/* webpackChunkName: "Editor" */ './pages/Editor.vue'),
+    },
     {
         path: '/listings',
         name: 'Listings',