fix: pages can be moved,reloads still bug

src/components/page/MovePageDialog.vue

@@ -8,7 +8,7 @@
       />
       <SpacerDiv />
       <Button
-        @click="movePage"
+        @click="onClick"
       >
         {{ $t('action.move') }}
       </Button>
@@ -17,9 +17,11 @@
 </template>
 
 <script lang="ts">
+import { useUxActions } from '@/composables/useUxActions'
+import { usePage } from '@/state/pages/usePage'
 import { useSite } from '@/state/site'
 import { useSites } from '@/state/sites'
-import { computed, defineComponent, ref } from 'vue'
+import { computed, defineComponent, onMounted, ref } from 'vue'
 import Button from '../form/Button.vue'
 import Select from '../form/Select.vue'
 import SpacerDiv from '../layout/SpacerDiv.vue'
@@ -38,6 +40,8 @@ export default defineComponent({
   setup (props, context) {
     const { site } = useSite()
     const { userSites } = useSites()
+    const { page, movePage } = usePage()
+    const { reroute } = useUxActions()
 
     const selected = ref(site.value.id)
 
@@ -50,12 +54,19 @@ export default defineComponent({
 
     const opts = computed(() => userSites.value.map(site => ([site.id, site.name])))
 
-    function movePage () {
+    const pageid = ref('')
+    onMounted(() => {
+      pageid.value = page.value.id
+    })
+
+    async function onClick () {
+      await movePage(selected.value)
       visible.value = false
+      reroute('/site/' + selected.value + '/page/' + pageid.value)
     }
 
     return {
-      movePage,
+      onClick,
       visible,
       opts,
       selected

src/state/pages/usePage.ts

@@ -1,5 +1,5 @@
 import { ref, computed, ComputedRef, Ref } from 'vue'
-import { serverTimestamp, addDoc, onSnapshot, doc, collection, getFirestore, updateDoc, deleteDoc, DocumentData } from '@firebase/firestore'
+import { serverTimestamp, addDoc, onSnapshot, doc, collection, getFirestore, updateDoc, deleteDoc, DocumentData, getDoc, setDoc } from '@firebase/firestore'
 import { useAuth } from '../authz'
 import { useSite } from '../site'
 import { Page, PageDoc, PageModel } from './Page'
@@ -37,25 +37,36 @@ export interface PageLogEntry {
   author: string
 }
 
+/**
+ * Patches a PageLofEntry to the last 5 entries table
+ */
+function patchEntry (pages: Array<PageLogEntry>, entry: PageLogEntry): Array<PageLogEntry> {
+  const index = pages.findIndex(p => p.id === entry.id)
+  if (index === -1) {
+    pages.pop()
+  } else {
+    pages.splice(index, 1)
+  }
+  return [entry, ...pages]
+}
+
 export async function savePage (updatedPage:PageModel): Promise<void> {
-  const { site } = useSite()
+  const { site, updateSite } = useSite()
   const { user } = useAuth()
 
   console.debug('site', site.value, 'page', updatedPage)
 
   // Adds an entry to site latest pages. This code might belong to cloud functions
-  let latestPages = site.value.latestPages || new Array<PageLogEntry>()
-  latestPages = latestPages.filter((page) => (page.id !== updatedPage.id))
-  if (latestPages.length > 2) latestPages.length = 2
-  latestPages.push({
+  const latest = patchEntry(site.value.latestPages, {
     id: updatedPage.id,
     name: updatedPage.name,
     author: user.value.uid
   })
-  latestPages.reverse()
   // End latest pages entry code, it's updated to site data below
 
-  const data = updatedPage.docData as DocumentData
+  const data = updatedPage.docData
+  // create timestamps are supported at release 12.3.0 and above
+  if (!data.created) data.created = serverTimestamp()
   data.updatedAt = serverTimestamp()
 
   await updateDoc(
@@ -68,14 +79,10 @@ export async function savePage (updatedPage:PageModel): Promise<void> {
     ),
     data
   )
-  return updateDoc(
-    doc(
-      getFirestore(),
-      'sites',
-      site.value.id),
+  return updateSite(
     {
       updatedAt: serverTimestamp(),
-      latestPages: latestPages
+      latestPages: latest
     }
   )
 }
@@ -97,6 +104,31 @@ async function deletePage (): Promise<void> {
   if (typeof unsub === 'function') unsub()
 }
 
+async function movePage (newSite:string): Promise<void> {
+  const { site } = useSite()
+  const { user } = useAuth()
+  const pageid = page.value.id
+
+  const pageDoc = await getDoc(doc(getFirestore(), 'sites', site.value.id, 'pages', pageid))
+  const dpage = new Page(pageid, pageDoc.data() as PageDoc)
+  const data = dpage.docData
+  data.updatedAt = serverTimestamp()
+  data.updatedBy = user.value.uid
+
+  await setDoc(
+    doc(getFirestore(), 'sites', newSite, 'pages', pageid), data
+  )
+  await updateDoc(
+    doc(getFirestore(), 'sites', newSite), { updatedAt: serverTimestamp() }
+  )
+  await deleteDoc(
+    doc(getFirestore(), 'sites', site.value.id, 'pages', pageid)
+  )
+  await updateDoc(
+    doc(getFirestore(), 'sites', site.value.id), { updatedAt: serverTimestamp() }
+  )
+}
+
 let unsub:undefined|CallableFunction
 
 /**
@@ -126,9 +158,10 @@ async function subscribeToPage (siteid:string, pageid:string) {
 export function usePage (siteid?:string, pageid?:string): {
   page: ComputedRef<PageModel>
   deletePage: () => Promise<void>
+  movePage: (newSite:string) => Promise<void>
   } {
   if (siteid && pageid) {
     subscribeToPage(siteid, pageid)
   }
-  return { page, deletePage }
+  return { page, deletePage, movePage }
 }