pages_core 3.12.1 → 3.12.2

data/app/javascript/components/{PageTreeNode.jsx → PageTree/Node.tsx}

@@ -25,24 +25,50 @@
    SOFTWARE.
  */
 
-import React from "react";
-import PropTypes from "prop-types";
+import React, { createRef, ChangeEvent, Component, RefObject } from "react";
+import Tree, { TreeId, TreeIndex } from "../../lib/Tree";
+import { Attributes, PageNode } from "./types";
+
+interface NodeProps {
+  addChild: (index: TreeIndex) => void,
+  dir: string,
+  dragging: number,
+  index: TreeIndex<PageNode>,
+  locale: string,
+  onCollapse: (id: TreeId) => void,
+  onDragStart: (id: number, element: HTMLDivElement, evt: Event) => void,
+  paddingLeft: number,
+  tree: Tree<PageNode>,
+  updatePage: (index: TreeIndex, attributes: Attributes) => void
+}
+
+interface NodeState {
+  newName: string
+}
 
-export default class PageTreeNode extends React.Component {
-  constructor(props) {
+interface ButtonOptions {
+  icon: string,
+  className: string,
+  onClick: (evt: Event) => void
+}
+
+export default class Node extends Component<NodeProps, NodeState> {
+  innerRef: RefObject<HTMLDivElement>;
+
+  constructor(props: NodeProps) {
     super(props);
     this.state = { newName: props.index.node.name };
-    this.innerRef = React.createRef();
+    this.innerRef = createRef<HTMLDivElement>();
   }
 
-  permitted(action) {
+  permitted(action: string): boolean {
     return this.node().permissions &&
            this.node().permissions.indexOf(action) != -1;
   }
 
   actions() {
-    let statusLabel = (this.node().status != 2) ? "Publish" : "Hide";
-    let statusIcon = (this.node().status != 2) ? "check" : "ban";
+    const statusLabel = (this.node().status != 2) ? "Publish" : "Hide";
+    const statusIcon = (this.node().status != 2) ? "check" : "ban";
 
     if (this.node().editing) {
       return null;
@@ -91,11 +117,10 @@ export default class PageTreeNode extends React.Component {
   }
 
   addButton() {
-    let self = this;
-    let node = this.node();
-    let handleClick = function () {
-      if (self.props.addChild) {
-        self.props.addChild(self.props.index);
+    const node = this.node();
+    const handleClick = () => {
+      if (this.props.addChild) {
+        this.props.addChild(this.props.index);
       }
     };
 
@@ -112,8 +137,8 @@ export default class PageTreeNode extends React.Component {
     }
   }
 
-  button(label, options) {
-    let icon = "fa-solid fa-" + options.icon + " icon";
+  button(label: string, options: ButtonOptions) {
+    const icon = "fa-solid fa-" + options.icon + " icon";
     return (
       <button type="button"
               className={options.className}
@@ -128,18 +153,18 @@ export default class PageTreeNode extends React.Component {
     const { index, tree, dragging, dir, locale } = this.props;
 
     if (index.children && index.children.length && !index.node.collapsed) {
-      var childrenStyles = {};
+      const childrenStyles = {};
       if (index.node.collapsed) {
         childrenStyles.display = "none";
       }
-      childrenStyles["paddingLeft"] = this.props.paddingLeft + "px";
+      childrenStyles["paddingLeft"] = `${this.props.paddingLeft}px`;
 
       return (
         <div className="children" style={childrenStyles}>
           {index.children.map((child) => {
-            var childIndex = tree.getIndex(child);
+            const childIndex = tree.getIndex(child);
             return (
-              <PageTreeNode
+              <Node
                 tree={tree}
                 index={childIndex}
                 key={childIndex.id}
@@ -161,25 +186,24 @@ export default class PageTreeNode extends React.Component {
   }
 
   collapseArrow() {
-    let index = this.props.index;
-    let self = this;
+    const index = this.props.index;
 
     // Don't collapse the root node
     if (!index.parent) {
       return null;
     }
 
-    let handleCollapse = function (e) {
+    const handleCollapse = (e: Event) => {
       e.stopPropagation();
-      let nodeId = self.props.index.id;
-      if (self.props.onCollapse) {
-        self.props.onCollapse(nodeId);
+      const nodeId = this.props.index.id;
+      if (this.props.onCollapse) {
+        this.props.onCollapse(nodeId);
       }
     };
 
     if (this.visibleChildren().length > 0) {
-      let collapsed = index.node.collapsed;
-      var classnames = null;
+      const collapsed = index.node.collapsed;
+      let classnames = "";
 
       if (collapsed) {
         classnames = "collapse fa-solid fa-caret-right";
@@ -201,7 +225,7 @@ export default class PageTreeNode extends React.Component {
     if (this.node().collapsed &&
         this.node().children &&
         this.node().children.length > 0) {
-      let pluralized = (this.node().children.length == 1) ? "item" : "items";
+      const pluralized = (this.node().children.length == 1) ? "item" : "items";
       return (
         <span className="collapsed-label">
           ({this.node().children.length} {pluralized})
@@ -222,11 +246,11 @@ export default class PageTreeNode extends React.Component {
     this.updatePage({editing: true});
   }
 
-  editUrl(page) {
+  editUrl(page: PageNode) {
     return(`/admin/${page.locale}/pages/${page.param}/edit`);
   }
 
-  node() {
+  node(): PageNode {
     return this.props.index.node;
   }
 
@@ -242,22 +266,21 @@ export default class PageTreeNode extends React.Component {
   }
 
   render() {
-    let self = this;
-    let props = this.props;
-    let index = props.index;
-    let dragging = props.dragging;
-    let editing = this.node().editing;
-    var classnames = "node";
+    const props = this.props;
+    const index = props.index;
+    const dragging = props.dragging;
+    const editing = this.node().editing;
+    let classnames = "node";
 
-    var node = editing ? this.renderEditNode() : this.renderNode();
+    const node = editing ? this.renderEditNode() : this.renderNode();
 
     if (index.id === dragging) {
       classnames = "node placeholder";
     }
 
-    let handleMouseDown = function (e) {
-      if (self.permitted("edit") && !editing && props.onDragStart) {
-        props.onDragStart(props.index.id, self.innerRef.current, e);
+    const handleMouseDown = (e: Event) => {
+      if (this.permitted("edit") && !editing && props.onDragStart) {
+        props.onDragStart(props.index.id, this.innerRef.current, e);
       }
     };
 
@@ -281,23 +304,22 @@ export default class PageTreeNode extends React.Component {
 
   renderEditNode() {
     const { dir, locale } = this.props;
-    let self = this;
 
-    let handleNameChange = function(event) {
-      self.setState({newName: event.target.value});
+    const handleNameChange = (event: ChangeEvent<HTMLInputElement>) => {
+      this.setState({ newName: event.target.value });
     };
 
-    let performEdit = function(event) {
+    const performEdit = (event: Event) => {
       event.preventDefault();
-      self.updatePage({
-        name: self.state.newName,
+      this.updatePage({
+        name: this.state.newName,
         editing: false
       });
     };
 
-    let cancelEdit = function() {
-      self.setState({newName: self.node().name});
-      self.updatePage({editing: false});
+    const cancelEdit = () => {
+      this.setState({ newName: this.node().name });
+      this.updatePage({ editing: false });
     };
 
     return (
@@ -325,13 +347,13 @@ export default class PageTreeNode extends React.Component {
   }
 
   renderNode() {
-    let index = this.props.index;
-    let node = index.node;
+    const index = this.props.index;
+    const node = index.node;
 
-    var pageName = <span className="name">{this.pageName()}</span>;
-    var className = "page";
+    let pageName = <span className="name">{this.pageName()}</span>;
+    let className = "page";
 
-    var iconClass = "fa-regular fa-file icon";
+    let iconClass = "fa-regular fa-file icon";
 
     if (typeof(node.status) != "undefined") {
       className = `page status-${this.node().status}`;
@@ -361,7 +383,7 @@ export default class PageTreeNode extends React.Component {
   }
 
   statusLabel() {
-    let labels = ["Draft", "Reviewed", "Published", "Hidden", "Deleted"];
+    const labels = ["Draft", "Reviewed", "Published", "Hidden", "Deleted"];
     if (typeof(this.node().status) != "undefined" && this.node().status != 2) {
       return (
         <span className="status-label">
@@ -381,13 +403,13 @@ export default class PageTreeNode extends React.Component {
     }
   }
 
-  updatePage(attributes) {
+  updatePage(attributes: Attributes) {
     if (this.props.updatePage) {
       return this.props.updatePage(this.props.index, attributes);
     }
   }
 
-  visibleChildren() {
+  visibleChildren(): PageNode[] {
     if (this.node().children) {
       return this.node().children.filter(p => p.status != 4);
     } else {
@@ -395,16 +417,3 @@ export default class PageTreeNode extends React.Component {
     }
   }
 }
-
-PageTreeNode.propTypes = {
-  addChild: PropTypes.func,
-  dragging: PropTypes.number,
-  index: PropTypes.object,
-  onCollapse: PropTypes.func,
-  onDragStart: PropTypes.func,
-  paddingLeft: PropTypes.number,
-  tree: PropTypes.object,
-  updatePage: PropTypes.func,
-  locale: PropTypes.string,
-  dir: PropTypes.string,
-};

data/app/javascript/components/PageTree/types.ts

@@ -0,0 +1,15 @@
+import { TreeNode } from "../../lib/Tree";
+
+export type Attributes = Record<string, unknown>;
+
+export interface PageNode extends TreeNode {
+  id: number | null,
+  children: PageNode[],
+  editing: boolean,
+  locale: string,
+  name: string,
+  param: string,
+  permissions: string[],
+  published_at: string,
+  status: string
+}

data/app/javascript/components/PageTree.tsx

@@ -0,0 +1,206 @@
+import React, { Component } from "react";
+import Tree, { TreeId, TreeIndex } from "../lib/Tree";
+import { postJson, putJson } from "../lib/request";
+import { Attributes, PageNode } from "./PageTree/types";
+import Draggable from "./PageTree/Draggable";
+
+interface Page extends Record<string, unknown> {
+  parent_page_id: number | null
+}
+
+type CollapsedState = Record<number, boolean>;
+
+interface ParentMap {
+  [index: number]: Page[]
+}
+
+interface PageTreeProps {
+  dir: string,
+  locale: string,
+  pages: Page[],
+  permissions: string[]
+}
+
+interface PageTreeState {
+  tree: Tree<PageNode>
+}
+
+function collapsedState(): CollapsedState {
+  if (window && window.localStorage &&
+    typeof(window.localStorage.collapsedPages) != "undefined") {
+      return JSON.parse(window.localStorage.getItem("collapsedPages")) as CollapsedState;
+    }
+  return {};
+}
+
+export default class PageTree extends Component<PageTreeProps, PageTreeState> {
+  constructor(props: PageTreeProps) {
+    super(props);
+
+    this.state = { tree: this.buildTree(props.pages) };
+  }
+
+  applyCollapsed(tree: Tree<PageNode>) {
+    const depth = (t: Tree, index: TreeIndex) => {
+      let depth = 0;
+      let pointer = t.getIndex(index.parent);
+      while (pointer) {
+        depth += 1;
+        pointer = t.getIndex(pointer.parent);
+      }
+      return depth;
+    };
+
+    const walk = (id: TreeId) => {
+      const index = tree.getIndex(id);
+      const node = index.node;
+      if (node.id && node.id in collapsedState()) {
+        node.collapsed = collapsedState()[node.id];
+      } else if (node.news_page) {
+        node.collapsed = true;
+      } else if (depth(tree, index) > 1) {
+        node.collapsed = true;
+      }
+      if (index.children && index.children.length) {
+        index.children.forEach(c => walk(c));
+      }
+    };
+    walk(1);
+  }
+
+  createPage(index: TreeIndex<PageNode>, attributes: Attributes) {
+    void postJson(`/admin/${index.node.locale}/pages.json`, { page: attributes })
+      .then((response: Attributes) => this.updateNode(index, response));
+  }
+
+  buildTree(pages: Page[]) {
+    // Build tree
+    const parentMap: ParentMap = pages.reduce((m: ParentMap, page: Page) => {
+      const id = page.parent_page_id || 0;
+      m[id] = [...(m[id] || []), page];
+      return m;
+    }, {});
+
+    pages.forEach((p: Page) => { p.children = parentMap[p.id] || []; });
+
+    const tree = new Tree({
+      name: "All Pages",
+      locale: this.props.locale,
+      permissions: this.props.permissions,
+      root: true,
+      children: parentMap[0]
+    });
+    this.applyCollapsed(tree);
+    tree.updateNodesPosition();
+    return tree;
+  }
+
+  movePage(index: TreeIndex<PageNode>, parent: TreeIndex<PageNode>, position: number) {
+    const data = {
+      parent_id: parent.node.id,
+      position: position
+    };
+    const url = `/admin/${index.node.locale}/pages/${index.node.id}/move.json`;
+    this.performUpdate(index, url, data);
+  }
+
+  performUpdate(index: TreeIndex, url: string, data: Attributes) {
+    void putJson(url, data)
+      .then((response: Page) => this.updateNode(index, response));
+  }
+
+  render() {
+    const addChild = (id: TreeId, attributes: Attributes) => {
+      const tree = this.state.tree;
+      const index = tree.append(attributes, id);
+      this.reorderChildren(id);
+      this.setCollapsed(id, false);
+      this.createPage(index, attributes);
+      this.setState({tree: tree});
+    };
+
+    const movedPage = (id: TreeId) => {
+      const tree = this.state.tree;
+      const index = tree.getIndex(id);
+      this.reorderChildren(index.parent);
+
+      const parent = tree.getIndex(index.parent);
+      const position = parent.children.indexOf(id) + 1;
+
+      this.movePage(index, parent, position);
+      this.setState({ tree: tree });
+    };
+
+    const toggleCollapsed = (id: TreeId) => {
+      const tree = this.state.tree;
+      const node = tree.getIndex(id).node;
+      this.setCollapsed(id, !node.collapsed);
+      this.setState({tree: tree});
+    };
+
+    const updatePage = (id: TreeId, attributes: Attributes) => {
+      const tree = this.state.tree;
+      const index = tree.getIndex(id);
+      const url = `/admin/${index.node.locale}/pages/${index.node.id}.json`;
+      this.updateNode(index, attributes);
+      this.performUpdate(index, url, { page: attributes });
+    };
+
+    const updateTree = (tree: Tree) => {
+      this.setState({ tree: tree });
+    };
+
+    return(
+      <Draggable tree={this.state.tree}
+                 addChild={addChild}
+                 movedPage={movedPage}
+                 toggleCollapsed={toggleCollapsed}
+                 updatePage={updatePage}
+                 updateTree={updateTree}
+                 locale={this.props.locale}
+                 dir={this.props.dir} />
+    );
+  }
+
+  reorderChildren(id: TreeId) {
+    const tree = this.state.tree;
+    const index = this.state.tree.getIndex(id);
+    const node = index.node;
+    if (!node.news_page) {
+      return;
+    }
+    index.children = index.children.sort(function (a, b) {
+      const aNode = tree.getIndex(a).node;
+      const bNode = tree.getIndex(b).node;
+      if (aNode.pinned == bNode.pinned) {
+        return new Date(bNode.published_at) - new Date(aNode.published_at);
+      } else {
+        return aNode.pinned ? -1 : 1;
+      }
+    });
+    tree.updateNodesPosition();
+  }
+
+  setCollapsed(id: TreeId, value: boolean) {
+    const node = this.state.tree.getIndex(id).node;
+    node.collapsed = value;
+    this.storeCollapsed(id, node.collapsed);
+    this.state.tree.updateNodesPosition();
+  }
+
+  storeCollapsed(id: TreeId, newState: boolean) {
+    const node = this.state.tree.getIndex(id).node;
+    const store = collapsedState();
+    store[node.id] = newState;
+    window.localStorage.collapsedPages = JSON.stringify(store);
+  }
+
+  updateNode(index: TreeIndex, attributes: Attributes) {
+    for (const attr in attributes) {
+      if (Object.prototype.hasOwnProperty.call(attributes, attr)) {
+        index.node[attr] = attributes[attr];
+      }
+    }
+    this.setState({ tree: this.state.tree });
+  }
+}

data/app/javascript/components/RichTextToolbarButton.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+
+interface RichTextToolbarButtonProps {
+  className: string,
+  name: string,
+  onClick: (evt: Event) => void
+}
+
+export default function RichTextToolbarButton(props: RichTextToolbarButtonProps) {
+  return (
+    <a title={props.name}
+      className={"button " + props.className}
+      onClick={props.onClick}>
+      <i className={"fa-solid fa-" + props.className} />
+    </a>
+  );
+}

data/app/javascript/components/TagEditor/{AddTagForm.jsx → AddTagForm.tsx}

@@ -1,22 +1,25 @@
-import React, { useState } from "react";
-import PropTypes from "prop-types";
+import React, { ChangeEvent, useState } from "react";
 
-export default function AddTagForm(props) {
+interface AddTagFormProps {
+  addTag: (string) => void
+}
+
+export default function AddTagForm(props: AddTagFormProps) {
   const [tag, setTag] = useState("");
 
-  const submit = (evt) => {
+  const submit = (evt: Event) => {
     evt.preventDefault();
     props.addTag(tag);
     setTag("");
   };
 
-  const handleKeyDown = (evt) => {
+  const handleKeyDown = (evt: Event) => {
     if (evt.which === 13) {
       submit(evt);
     }
   };
 
-  const handleChange = (evt) => {
+  const handleChange = (evt: ChangeEvent<HTMLInputElement>) => {
     setTag(evt.target.value);
   };
 
@@ -36,7 +39,3 @@ export default function AddTagForm(props) {
     </div>
   );
 }
-
-AddTagForm.propTypes = {
-  addTag: PropTypes.func
-};

data/app/javascript/components/TagEditor/{Tag.jsx → Tag.tsx}

@@ -1,12 +1,17 @@
 import React from "react";
-import PropTypes from "prop-types";
 
-export default function Tag(props) {
+interface TagProps {
+  enabled: boolean,
+  tag: string,
+  toggleEnabled: (string) => void
+}
+
+export default function Tag(props: TagProps): JSX.Element {
   const handleChange = () => {
     props.toggleEnabled(props.tag);
   };
 
-  let classes = ["tag"];
+  const classes = ["tag"];
   if (props.enabled) {
     classes.push("enabled");
   }
@@ -24,9 +29,3 @@ export default function Tag(props) {
     </span>
   );
 }
-
-Tag.propTypes = {
-  enabled: PropTypes.bool,
-  tag: PropTypes.string,
-  toggleEnabled: PropTypes.func
-};

data/app/javascript/components/{TagEditor.jsx → TagEditor.tsx}

@@ -1,30 +1,35 @@
 import React, { useState } from "react";
-import PropTypes from "prop-types";
 
 import AddTagForm from "./TagEditor/AddTagForm";
 import Tag from "./TagEditor/Tag";
 
-function onlyUnique(value, index, self) {
+interface TagEditorProps {
+  name: string,
+  enabled: string[],
+  tags: string[]
+}
+
+function onlyUnique(value: string, index: number, self: string[]): number {
   return self.indexOf(value) === index;
 }
 
-export default function TagEditor(props) {
+export default function TagEditor(props: TagEditorProps) {
   const [tags, setTags] = useState(props.tags);
   const [enabled, setEnabled] = useState(props.enabled);
 
   const tagList = [...tags, ...enabled].filter(onlyUnique);
 
-  const normalize = (tag) => {
+  const normalize = (tag: string): string => {
     return (
       tagList.filter(t => t.toLowerCase() == tag.toLowerCase())[0] || tag
     );
   };
 
-  const tagEnabled = (tag) => {
+  const tagEnabled = (tag: string): boolean => {
     return enabled.map(t => t.toLowerCase()).indexOf(tag.toLowerCase()) !== -1;
   };
 
-  const toggleEnabled = (tag) => {
+  const toggleEnabled = (tag: string) => {
     const normalized = normalize(tag);
 
     if (tagEnabled(normalized)) {
@@ -34,7 +39,7 @@ export default function TagEditor(props) {
     }
   };
 
-  const addTag = (tag) => {
+  const addTag = (tag: string) => {
     const normalized = normalize(tag);
 
     setTags([...tags, normalized].filter(onlyUnique));
@@ -53,9 +58,3 @@ export default function TagEditor(props) {
     </div>
   );
 }
-
-TagEditor.propTypes = {
-  name: PropTypes.string,
-  enabled: PropTypes.array,
-  tags: PropTypes.array
-};