From a9784c34ea742702396b9ec10fd72c811eca95d4 Mon Sep 17 00:00:00 2001
From: NGPixel <github@ngpixel.com>
Date: Mon, 4 Sep 2023 03:49:53 +0000
Subject: [PATCH] feat: rerender page

---
 server/graph/resolvers/page.mjs          |  6 +-
 server/graph/schemas/page.graphql        |  4 +-
 server/locales/en.json                   |  2 +
 ux/src/components/PageActionsCol.vue     | 15 ++++-
 ux/src/components/RerenderPageDialog.vue | 81 ++++++++++++++++++++++++
 5 files changed, 101 insertions(+), 7 deletions(-)
 create mode 100644 ux/src/components/RerenderPageDialog.vue

diff --git a/server/graph/resolvers/page.mjs b/server/graph/resolvers/page.mjs
index 804b1f57..4d5f3a86 100644
--- a/server/graph/resolvers/page.mjs
+++ b/server/graph/resolvers/page.mjs
@@ -603,9 +603,9 @@ export default {
       }
     },
     /**
-     * RENDER PAGE
+     * RERENDER PAGE
      */
-    async renderPage (obj, args, context) {
+    async rerenderPage (obj, args, context) {
       try {
         const page = await WIKI.db.pages.query().findById(args.id)
         if (!page) {
@@ -613,7 +613,7 @@ export default {
         }
         await WIKI.db.pages.renderPage(page)
         return {
-          operation: generateSuccess('Page rendered successfully.')
+          operation: generateSuccess('Page rerendered successfully.')
         }
       } catch (err) {
         return generateError(err)
diff --git a/server/graph/schemas/page.graphql b/server/graph/schemas/page.graphql
index 433f4e2a..981c01f4 100644
--- a/server/graph/schemas/page.graphql
+++ b/server/graph/schemas/page.graphql
@@ -191,8 +191,8 @@ extend type Mutation {
 
   rebuildPageTree: DefaultResponse
 
-  renderPage(
-    id: Int!
+  rerenderPage(
+    id: UUID!
   ): DefaultResponse
 
   restorePage(
diff --git a/server/locales/en.json b/server/locales/en.json
index 22276f93..15f47cf3 100644
--- a/server/locales/en.json
+++ b/server/locales/en.json
@@ -1798,6 +1798,8 @@
   "profile.title": "Profile",
   "profile.uploadNewAvatar": "Upload New Image",
   "profile.viewPublicProfile": "View Public Profile",
+  "renderPageDialog.loading": "Rendering page...",
+  "renderPageDialog.success": "Page rerendered successfully.",
   "search.editorAny": "Any editor",
   "search.emptyQuery": "Enter a query in the search field above and press Enter.",
   "search.filterEditor": "Editor",
diff --git a/ux/src/components/PageActionsCol.vue b/ux/src/components/PageActionsCol.vue
index 218755d2..651ebfa5 100644
--- a/ux/src/components/PageActionsCol.vue
+++ b/ux/src/components/PageActionsCol.vue
@@ -100,11 +100,11 @@
               q-icon(color='deep-orange-9', name='las la-atom', size='sm')
             q-item-section
               q-item-label Convert Page
-          q-item(clickable, v-if='userStore.can(`edit:pages`)')
+          q-item(clickable, v-if='userStore.can(`edit:pages`)', @click='rerenderPage')
             q-item-section.items-center(avatar)
               q-icon(color='deep-orange-9', name='las la-magic', size='sm')
             q-item-section
-              q-item-label Re-render Page
+              q-item-label Rerender Page
           q-item(clickable)
             q-item-section.items-center(avatar)
               q-icon(color='deep-orange-9', name='las la-sun', size='sm')
@@ -204,6 +204,17 @@ function viewPageSource () {
   siteStore.$patch({ overlay: 'PageSource', overlayOpts: { } })
 }
 
+function rerenderPage () {
+  $q.dialog({
+    component: defineAsyncComponent(() => import('../components/RerenderPageDialog.vue')),
+    componentProps: {
+      id: pageStore.id
+    }
+  }).onOk(() => {
+    pageStore.pageLoad({ id: pageStore.id })
+  })
+}
+
 function duplicatePage () {
   $q.dialog({
     component: defineAsyncComponent(() => import('../components/TreeBrowserDialog.vue')),
diff --git a/ux/src/components/RerenderPageDialog.vue b/ux/src/components/RerenderPageDialog.vue
new file mode 100644
index 00000000..10116fcd
--- /dev/null
+++ b/ux/src/components/RerenderPageDialog.vue
@@ -0,0 +1,81 @@
+<template lang="pug">
+q-dialog(ref='dialogRef', @hide='onDialogHide' position='bottom', persistent)
+  q-card(style='width: 350px;')
+    q-linear-progress(query, color='page')
+    q-card-section.text-center {{ t('renderPageDialog.loading') }}
+</template>
+
+<script setup>
+import gql from 'graphql-tag'
+import { useI18n } from 'vue-i18n'
+import { useDialogPluginComponent, useQuasar } from 'quasar'
+import { computed, onMounted, reactive } from 'vue'
+import { usePageStore } from 'src/stores/page'
+
+// EMITS
+
+defineEmits([
+  ...useDialogPluginComponent.emits
+])
+
+// QUASAR
+
+const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } = useDialogPluginComponent()
+const $q = useQuasar()
+
+// STORES
+
+const pageStore = usePageStore()
+
+// I18N
+
+const { t } = useI18n()
+
+// METHODS
+
+async function rerenderPage () {
+  await new Promise(resolve => setTimeout(resolve, 1000)) // allow for dialog to show
+  try {
+    const resp = await APOLLO_CLIENT.mutate({
+      mutation: gql`
+        mutation rerenderPage(
+          $id: UUID!
+        ) {
+          rerenderPage (
+            id: $id
+          ) {
+            operation {
+              succeeded
+              message
+            }
+          }
+        }
+      `,
+      variables: {
+        id: pageStore.id
+      }
+    })
+    if (resp?.data?.rerenderPage?.operation?.succeeded) {
+      $q.notify({
+        type: 'positive',
+        message: t('renderPageDialog.success')
+      })
+      onDialogOK()
+    } else {
+      throw new Error(resp?.data?.rerenderPage?.operation?.message || 'An unexpected error occured.')
+    }
+  } catch (err) {
+    $q.notify({
+      type: 'negative',
+      message: err.message
+    })
+    onDialogCancel()
+  }
+}
+
+// MOUNTED
+
+onMounted(() => {
+  rerenderPage()
+})
+</script>