feat: page TOC + refactor PageDataDialog to composition API

server/controllers/common.js

@@ -153,6 +153,11 @@ router.get(['/d', '/d/*'], async (req, res, next) => {
  */
 router.get(['/_edit', '/_edit/*'], async (req, res, next) => {
   const pageArgs = pageHelper.parsePath(req.path, { stripExt: true })
+  const site = await WIKI.db.sites.getSiteByHostname({ hostname: req.hostname })
+
+  if (!site) {
+    throw new Error('INVALID_SITE')
+  }
 
   if (pageArgs.path === '') {
     return res.redirect(`/_edit/home`)
@@ -175,10 +180,10 @@ router.get(['/_edit', '/_edit/*'], async (req, res, next) => {
 
   // -> Get page data from DB
   let page = await WIKI.db.pages.getPageFromDb({
+    siteId: site.id,
     path: pageArgs.path,
     locale: pageArgs.locale,
-    userId: req.user.id,
-    isPrivate: false
+    userId: req.user.id
   })
 
   pageArgs.tags = _.get(page, 'tags', [])
@@ -415,6 +420,11 @@ router.get('/*', async (req, res, next) => {
   const stripExt = _.some(WIKI.data.pageExtensions, ext => _.endsWith(req.path, `.${ext}`))
   const pageArgs = pageHelper.parsePath(req.path, { stripExt })
   const isPage = (stripExt || pageArgs.path.indexOf('.') === -1)
+  const site = await WIKI.db.sites.getSiteByHostname({ hostname: req.hostname })
+
+  if (!site) {
+    throw new Error('INVALID_SITE')
+  }
 
   if (isPage) {
     // if (WIKI.config.lang.namespacing && !pageArgs.explicitLocale) {
@@ -426,6 +436,7 @@ router.get('/*', async (req, res, next) => {
     try {
       // -> Get Page from cache
       const page = await WIKI.db.pages.getPage({
+        siteId: site.id,
         path: pageArgs.path,
         locale: pageArgs.locale,
         userId: req.user.id
@@ -470,67 +481,8 @@ router.get('/*', async (req, res, next) => {
           })
         }
 
-        // -> Build sidebar navigation
-        let sdi = 1
-        const sidebar = (await WIKI.db.navigation.getTree({ cache: true, locale: pageArgs.locale, groups: req.user.groups })).map(n => ({
-          i: `sdi-${sdi++}`,
-          k: n.kind,
-          l: n.label,
-          c: n.icon,
-          y: n.targetType,
-          t: n.target
-        }))
-
-        // -> Build theme code injection
-        const injectCode = {
-          css: '', // WIKI.config.theming.injectCSS,
-          head: '', // WIKI.config.theming.injectHead,
-          body: '' // WIKI.config.theming.injectBody
-        }
-
-        // Handle missing extra field
-        page.extra = page.extra || { css: '', js: '' }
-
-        if (!_.isEmpty(page.extra.css)) {
-          injectCode.css = `${injectCode.css}\n${page.extra.css}`
-        }
-
-        if (!_.isEmpty(page.extra.js)) {
-          injectCode.body = `${injectCode.body}\n${page.extra.js}`
-        }
-
-        // -> Convert page TOC
-        if (!_.isString(page.toc)) {
-          page.toc = JSON.stringify(page.toc)
-        }
-
-        // -> Inject comments variables
-        const commentTmpl = {
-          codeTemplate: '', // WIKI.data.commentProvider.codeTemplate,
-          head: '', // WIKI.data.commentProvider.head,
-          body: '', // WIKI.data.commentProvider.body,
-          main: '' // WIKI.data.commentProvider.main
-        }
-        if (false && WIKI.config.features.featurePageComments && WIKI.data.commentProvider.codeTemplate) {
-          [
-            { key: 'pageUrl', value: `${WIKI.config.host}/i/${page.id}` },
-            { key: 'pageId', value: page.id }
-          ].forEach((cfg) => {
-            commentTmpl.head = _.replace(commentTmpl.head, new RegExp(`{{${cfg.key}}}`, 'g'), cfg.value)
-            commentTmpl.body = _.replace(commentTmpl.body, new RegExp(`{{${cfg.key}}}`, 'g'), cfg.value)
-            commentTmpl.main = _.replace(commentTmpl.main, new RegExp(`{{${cfg.key}}}`, 'g'), cfg.value)
-          })
-        }
-
         // -> Render view
         res.sendFile(path.join(WIKI.ROOTPATH, 'assets/index.html'))
-        // res.render('page', {
-        //   page,
-        //   sidebar,
-        //   injectCode,
-        //   comments: commentTmpl,
-        //   effectivePermissions
-        // })
       } else if (pageArgs.path === 'home') {
         res.redirect('/_welcome')
       } else {

server/graph/resolvers/page.js

@@ -166,7 +166,10 @@ module.exports = {
      */
     async pageByPath (obj, args, context, info) {
       const pageArgs = pageHelper.parsePath(args.path)
-      let page = await WIKI.db.pages.getPageFromDb(pageArgs)
+      let page = await WIKI.db.pages.getPageFromDb({
+        ...pageArgs,
+        siteId: args.siteId
+      })
       if (page) {
         return {
           ...page,

server/graph/schemas/page.graphql

@@ -35,6 +35,7 @@ extend type Query {
   ): Page
 
   pageByPath(
+    siteId: UUID!
     path: String!
   ): Page
 
@@ -173,7 +174,7 @@ type Page {
   tags: [PageTag]
   content: String
   render: String
-  toc: String
+  toc: [JSON]
   contentType: String
   createdAt: Date
   updatedAt: Date

server/models/pages.js

@@ -1010,6 +1010,7 @@ module.exports = class Page extends Model {
         .where(queryModeID ? {
           'pages.id': opts
         } : {
+          'pages.siteId': opts.siteId,
           'pages.path': opts.path,
           'pages.localeCode': opts.locale
         })

server/tasks/workers/render-page.js

@@ -62,8 +62,8 @@ module.exports = async ({ payload }) => {
       $('.toc-anchor', el).remove()
 
       _.get(toc, leafPath).push({
-        title: _.trim($(el).text()),
-        anchor: leafSlug,
+        label: _.trim($(el).text()),
+        key: leafSlug.substring(1),
         children: []
       })
     })

ux/src/components/PageDataDialog.vue

 <template lang="pug">
 q-card.page-data-dialog(style='width: 750px;')
   q-toolbar.bg-primary.text-white.flex
-    .text-subtitle2 {{$t('editor.pageData.title')}}
+    .text-subtitle2 {{t('editor.pageData.title')}}
     q-space
     q-btn(
       icon='las la-times'
@@ -10,13 +10,13 @@ q-card.page-data-dialog(style='width: 750px;')
       v-close-popup
     )
   q-card-section.page-data-dialog-selector
-    //- .text-overline.text-white {{$t('editor.pageData.template')}}
+    //- .text-overline.text-white {{t('editor.pageData.template')}}
     .flex.q-gutter-sm
       q-select(
         dark
-        v-model='templateId'
-        :label='$t(`editor.pageData.template`)'
-        :aria-label='$t(`editor.pageData.template`)'
+        v-model='state.templateId'
+        :label='t(`editor.pageData.template`)'
+        :aria-label='t(`editor.pageData.template`)'
         :options='templates'
         option-value='id'
         map-options
@@ -28,14 +28,14 @@ q-card.page-data-dialog(style='width: 750px;')
       q-btn.acrylic-btn(
         dark
         icon='las la-pen'
-        :label='$t(`common.actions.manage`)'
+        :label='t(`common.actions.manage`)'
         unelevated
         no-caps
         color='deep-orange-9'
         @click='editTemplates'
       )
   q-tabs.alt-card(
-    v-model='mode'
+    v-model='state.mode'
     inline-label
     no-caps
     )
@@ -48,11 +48,11 @@ q-card.page-data-dialog(style='width: 750px;')
       label='YAML'
       )
   q-scroll-area(
-    :thumb-style='thumbStyle'
-    :bar-style='barStyle'
+    :thumb-style='siteStore.thumbStyle'
+    :bar-style='siteStore.barStyle'
     style='height: calc(100% - 50px - 75px - 48px);'
     )
-    q-card-section(v-if='mode === `visual`')
+    q-card-section(v-if='state.mode === `visual`')
       .q-gutter-sm
         q-input(
           label='Attribute Text'
@@ -76,60 +76,69 @@ q-card.page-data-dialog(style='width: 750px;')
             dense
             size='lg'
             )
-    q-no-ssr(v-else, :placeholder='$t(`common.loading`)')
+    q-no-ssr(v-else, :placeholder='t(`common.loading`)')
       codemirror.admin-theme-cm(
         ref='cmData'
-        v-model='content'
+        v-model='state.content'
         :options='{ mode: `text/yaml` }'
       )
 
   q-dialog(
-    v-model='showDataTemplateDialog'
+    v-model='state.showDataTemplateDialog'
     )
     page-data-template-dialog
 </template>
 
-<script>
-import { get } from 'vuex-pathify'
+<script setup>
+import { useI18n } from 'vue-i18n'
+import { useQuasar } from 'quasar'
+import { nextTick, onMounted, reactive, ref, watch } from 'vue'
 
 import PageDataTemplateDialog from './PageDataTemplateDialog.vue'
 
-export default {
-  components: {
-    PageDataTemplateDialog
-  },
-  data () {
-    return {
-      showDataTemplateDialog: false,
-      templateId: '',
-      content: '',
-      mode: 'visual'
-    }
-  },
-  computed: {
-    thumbStyle: get('site/thumbStyle', false),
-    barStyle: get('site/barStyle', false),
-    templates () {
-      return [
-        {
-          id: '',
-          label: 'None',
-          data: []
-        },
-        ...this.$store.get('site/pageDataTemplates'),
-        {
-          id: 'basic',
-          label: 'Basic',
-          data: []
-        }
-      ]
-    }
+import { usePageStore } from 'src/stores/page'
+import { useSiteStore } from 'src/stores/site'
+
+// QUASAR
+
+const $q = useQuasar()
+
+// STORES
+
+const pageStore = usePageStore()
+const siteStore = useSiteStore()
+
+// I18N
+
+const { t } = useI18n()
+
+// DATA
+
+const state = reactive({
+  showDataTemplateDialog: false,
+  templateId: '',
+  content: '',
+  mode: 'visual'
+})
+
+const templates = [
+  {
+    id: '',
+    label: 'None',
+    data: []
   },
-  methods: {
-    editTemplates () {
-      this.showDataTemplateDialog = !this.showDataTemplateDialog
-    }
+  ...siteStore.pageDataTemplates,
+  {
+    id: 'basic',
+    label: 'Basic',
+    data: []
   }
+]
+
+// METHODS
+
+function editTemplates () {
+  state.showDataTemplateDialog = !state.showDataTemplateDialog
 }
 </script>
 

ux/src/components/PagePropertiesDialog.vue

@@ -270,8 +270,6 @@ q-card.page-properties-dialog
 </template>
 
 <script setup>
-import { usePageStore } from 'src/stores/page'
-import { useSiteStore } from 'src/stores/site'
 import { useI18n } from 'vue-i18n'
 import { useQuasar } from 'quasar'
 import { nextTick, onMounted, reactive, ref, watch } from 'vue'
@@ -280,6 +278,9 @@ import PageRelationDialog from './PageRelationDialog.vue'
 import PageScriptsDialog from './PageScriptsDialog.vue'
 import PageTags from './PageTags.vue'
 
+import { usePageStore } from 'src/stores/page'
+import { useSiteStore } from 'src/stores/site'
+
 // QUASAR
 
 const $q = useQuasar()

ux/src/pages/Index.vue

@@ -141,9 +141,11 @@ q-page.column
           q-icon.q-mr-sm(name='las la-stream', color='grey')
           .text-caption.text-grey-7 Contents
         .q-px-md.q-pb-sm
-          q-tree(
-            :nodes='state.toc'
+          q-tree.page-toc(
+            :nodes='pageStore.toc'
+            icon='las la-caret-right'
             node-key='key'
+            dense
             v-model:expanded='state.tocExpanded'
             v-model:selected='state.tocSelected'
           )
@@ -287,6 +289,7 @@ q-page.column
     transition-show='jump-left'
     transition-hide='jump-right'
     class='floating-sidepanel'
+    no-shake
     )
     component(:is='sideDialogs[state.sideDialogComponent]')
 
@@ -354,54 +357,6 @@ const state = reactive({
   globalDialogComponent: null,
   showTagsEditBtn: false,
   tagEditMode: false,
-  toc: [
-    {
-      key: 'h1-0',
-      label: 'Introduction'
-    },
-    {
-      key: 'h1-1',
-      label: 'Planets',
-      children: [
-        {
-          key: 'h2-0',
-          label: 'Earth',
-          children: [
-            {
-              key: 'h3-0',
-              label: 'Countries',
-              children: [
-                {
-                  key: 'h4-0',
-                  label: 'Cities',
-                  children: [
-                    {
-                      key: 'h5-0',
-                      label: 'Montreal',
-                      children: [
-                        {
-                          key: 'h6-0',
-                          label: 'Districts'
-                        }
-                      ]
-                    }
-                  ]
-                }
-              ]
-            }
-          ]
-        },
-        {
-          key: 'h2-1',
-          label: 'Mars'
-        },
-        {
-          key: 'h2-2',
-          label: 'Jupiter'
-        }
-      ]
-    }
-  ],
   tocExpanded: ['h1-0', 'h1-1'],
   tocSelected: [],
   currentRating: 3
@@ -472,8 +427,8 @@ watch(() => route.path, async (newValue) => {
   }
 }, { immediate: true })
 
-watch(() => state.toc, refreshTocExpanded)
-watch(() => pageStore.tocDepth, refreshTocExpanded)
+watch(() => pageStore.toc, () => { refreshTocExpanded() }, { immediate: true })
+watch(() => pageStore.tocDepth, () => { refreshTocExpanded() })
 
 // METHODS
 
@@ -492,20 +447,22 @@ function savePage () {
   state.showGlobalDialog = true
 }
 
-function refreshTocExpanded (baseToc) {
+function refreshTocExpanded (baseToc, lvl) {
+  console.info(pageStore.tocDepth.min, lvl, pageStore.tocDepth.max)
   const toExpand = []
   let isRootNode = false
   if (!baseToc) {
-    baseToc = state.toc
+    baseToc = pageStore.toc
     isRootNode = true
+    lvl = 1
   }
   if (baseToc.length > 0) {
     for (const node of baseToc) {
-      if (node.key >= `h${pageStore.tocDepth.min}` && node.key <= `h${pageStore.tocDepth.max}`) {
+      if (lvl >= pageStore.tocDepth.min && lvl < pageStore.tocDepth.max) {
         toExpand.push(node.key)
       }
-      if (node.children?.length && node.key < `h${pageStore.tocDepth.max}`) {
-        toExpand.push(...refreshTocExpanded(node.children))
+      if (node.children?.length && lvl < pageStore.tocDepth.max - 1) {
+        toExpand.push(...refreshTocExpanded(node.children, lvl + 1))
       }
     }
   }
@@ -515,12 +472,6 @@ function refreshTocExpanded (baseToc) {
     return toExpand
   }
 }
-
-// MOUNTED
-
-onMounted(() => {
-  refreshTocExpanded()
-})
 </script>
 
 <style lang="scss">
@@ -691,4 +642,10 @@ onMounted(() => {
     background-color: $dark-3;
   }
 }
+
+.page-toc {
+  &.q-tree--dense .q-tree__node {
+    padding-bottom: 5px;
+  }
+}
 </style>

ux/src/stores/page.js

@@ -80,7 +80,8 @@ export const usePageStore = defineStore('page', {
     },
     commentsCount: 0,
     content: '',
-    render: ''
+    render: '',
+    toc: []
   }),
   getters: {},
   actions: {
@@ -93,9 +94,11 @@ export const usePageStore = defineStore('page', {
         const resp = await APOLLO_CLIENT.query({
           query: gql`
             query loadPage (
+              $siteId: UUID!
               $path: String!
             ) {
               pageByPath(
+                siteId: $siteId
                 path: $path
               ) {
                 id
@@ -105,10 +108,12 @@ export const usePageStore = defineStore('page', {
                 locale
                 updatedAt
                 render
+                toc
               }
             }
           `,
           variables: {
+            siteId: siteStore.id,
             path
           },
           fetchPolicy: 'network-only'