Add a content crud view in CMS

Author: scriptype

src/cms/server/public/app/components/contentPanel/contentTree.js

@@ -0,0 +1,87 @@
+const flattenSubtree = (contentModel) => {
+  const nodes = []
+  const subtree = contentModel.subtree || contentModel
+
+  for (const collection of (subtree.collections || [])) {
+    nodes.push({
+      type: 'collection',
+      name: collection.title,
+      data: collection,
+      children: buildCollectionChildren(collection)
+    })
+  }
+
+  if (subtree.homepage) {
+    nodes.push({
+      type: 'homepage',
+      name: subtree.homepage.title || 'Homepage',
+      data: subtree.homepage
+    })
+  }
+
+  for (const subpage of (subtree.subpages || [])) {
+    nodes.push({
+      type: 'subpage',
+      name: subpage.title,
+      data: subpage
+    })
+  }
+
+  return nodes
+}
+
+const buildCollectionChildren = (collection) => {
+  const nodes = []
+  const subtree = collection.subtree || collection
+
+  const categories = (subtree.categories || [])
+    .filter(category => !category.isDefaultCategory)
+  for (const category of categories) {
+    nodes.push({
+      type: 'category',
+      name: category.title,
+      data: category,
+      children: buildCategoryChildren(category)
+    })
+  }
+
+  const posts = subtree.levelPosts || subtree.posts || []
+  for (const post of posts) {
+    nodes.push({
+      type: 'entry',
+      name: post.title,
+      data: post
+    })
+  }
+
+  return nodes
+}
+
+const buildCategoryChildren = (category) => {
+  const nodes = []
+  const subtree = category.subtree || category
+
+  const subcategories = (subtree.categories || [])
+    .filter(subcategory => !subcategory.isDefaultCategory)
+  for (const subcategory of subcategories) {
+    nodes.push({
+      type: 'category',
+      name: subcategory.title,
+      data: subcategory,
+      children: buildCategoryChildren(subcategory)
+    })
+  }
+
+  const posts = subtree.levelPosts || subtree.posts || []
+  for (const post of posts) {
+    nodes.push({
+      type: 'entry',
+      name: post.title,
+      data: post
+    })
+  }
+
+  return nodes
+}
+
+export { flattenSubtree }

src/cms/server/public/app/components/contentPanel/index.js

@@ -0,0 +1,125 @@
+import { createDOMNodeFromHTML } from '../../common.js'
+import api from '../../../api.js'
+import dialog from '../dialog.js'
+import defaultContentTypes from '../../defaultContentTypes.js'
+import { flattenSubtree } from './contentTree.js'
+import { template } from './template.js'
+
+const INITIAL_CONTENT_TYPES_SHOWN = 5
+
+const state = {
+  tree: [],
+  path: [],
+  showAllTypes: false
+}
+
+const resolveNodes = () => {
+  let nodes = state.tree
+  for (const step of state.path) {
+    nodes = nodes[step.index].children || []
+  }
+  return nodes
+}
+
+const getBreadcrumb = () => {
+  return ['Content', ...state.path.map(step => step.name)]
+    .join(' › ')
+}
+
+const getVisibleContentTypes = () => {
+  if (state.showAllTypes) {
+    return defaultContentTypes
+  }
+  const entryTypes = defaultContentTypes.filter(
+    contentType => contentType.model === 'entry'
+  )
+  return entryTypes.slice(0, INITIAL_CONTENT_TYPES_SHOWN)
+}
+
+const addListeners = ($panel, nodes) => {
+  const $back = $panel.querySelector('.content-panel-back-btn')
+  if ($back) {
+    $back.addEventListener('click', () => {
+      state.path.pop()
+      update()
+    })
+  }
+
+  $panel.querySelectorAll('[data-drill]').forEach($el => {
+    $el.addEventListener('click', () => {
+      const i = parseInt($el.dataset.drill, 10)
+      state.path.push({ index: i, name: nodes[i].name })
+      update()
+    })
+  })
+
+  $panel.querySelectorAll('[data-edit]').forEach($btn => {
+    $btn.addEventListener('click', () => {
+      const i = parseInt($btn.dataset.edit, 10)
+      const node = nodes[i]
+      console.log(
+        'Route to edit:', node.type, node.name,
+        node.data
+      )
+    })
+  })
+
+  $panel.querySelectorAll('[data-delete]').forEach($btn => {
+    $btn.addEventListener('click', () => {
+      const i = parseInt($btn.dataset.delete, 10)
+      const node = nodes[i]
+      console.log(
+        'Route to delete:', node.type, node.name,
+        node.data
+      )
+    })
+  })
+
+  $panel.querySelectorAll('[data-create-type]').forEach($btn => {
+    $btn.addEventListener('click', () => {
+      console.log(
+        'Route to create:',
+        $btn.dataset.createType,
+        'at', getBreadcrumb()
+      )
+    })
+  })
+
+  const $expand = $panel.querySelector('.content-panel-expand-btn')
+  if ($expand) {
+    $expand.addEventListener('click', () => {
+      state.showAllTypes = true
+      update()
+    })
+  }
+}
+
+const render = async () => {
+  dialog.textContent('Loading…').show()
+
+  const contentModel = await api.contentModel.get()
+  state.tree = flattenSubtree(contentModel)
+  state.path = []
+  state.showAllTypes = false
+
+  update()
+}
+
+const update = () => {
+  const nodes = resolveNodes()
+  const visibleContentTypes = getVisibleContentTypes()
+  const html = template({
+    breadcrumb: getBreadcrumb(),
+    nodes,
+    showBack: state.path.length > 0,
+    visibleContentTypes,
+    canExpand: visibleContentTypes.length <
+      defaultContentTypes.length
+  })
+  const $panel = createDOMNodeFromHTML(html)
+  addListeners($panel, nodes)
+  dialog.html('')
+  dialog.appendChild($panel)
+}
+
+export default { render }