pages_core 3.13.0 → 3.15.0

data/app/javascript/components/PageTree/Draggable.tsx

@@ -26,12 +26,15 @@
  */
 
 import React, { Component } from "react";
-import Tree, { TreeId, TreeIndex } from "../../lib/Tree";
-import { Attributes, PageNode } from "./types";
+
+import Tree from "../../lib/Tree";
+import * as Trees from "../../types/Trees";
+import * as Pages from "../../types/Pages";
+
 import Node from "./Node";
 
 interface DragState {
-  id: number | null;
+  id?: Trees.Id;
   x: number | null;
   y: number | null;
   w: number | null;
@@ -40,35 +43,35 @@ interface DragState {
   scrollLeft: number | null;
 }
 
-interface DraggableProps {
-  addChild: (index: TreeIndex) => void;
+interface Props {
+  addChild: (id: Trees.Id, attrs: Pages.TreeNode) => void;
   dir: string;
   locale: string;
-  movedPage: (id: TreeId) => void;
-  paddingLeft: number;
-  toggleCollapsed: (id: TreeId) => void;
-  tree: Tree<PageNode>;
-  updatePage: (id: TreeId, attributes: Attributes) => void;
+  movedPage: (id: Trees.Id) => void;
+  paddingLeft?: number;
+  toggleCollapsed: (id: Trees.Id) => void;
+  tree: Tree<Pages.TreeNode>;
+  updatePage: (id: Trees.Id, attributes: Partial<Pages.TreeItem>) => void;
   updateTree: (Tree) => void;
 }
 
-interface DraggableState {
+interface State {
   dragging: DragState;
 }
 
-export default class Draggable extends Component<
-  DraggableProps,
-  DraggableState
-> {
+const defaultPadding = 20;
+
+export default class Draggable extends Component<Props, State> {
   _dragListener: (evt: MouseEvent) => void;
   _dragEndListener: () => void;
+  _start: boolean;
   _startX: number;
   _startY: number;
   _offsetX: number;
   _offsetY: number;
   dragging: DragState;
 
-  constructor(props: DraggableProps) {
+  constructor(props: Props) {
     super(props);
     this.state = {
       dragging: this.initDragging()
@@ -103,7 +106,8 @@ export default class Draggable extends Component<
           <Node
             tree={tree}
             index={draggingIndex}
-            paddingLeft={this.props.paddingLeft}
+            locale={this.props.locale}
+            paddingLeft={this.props.paddingLeft || defaultPadding}
           />
         </div>
       );
@@ -127,9 +131,9 @@ export default class Draggable extends Component<
             tree={tree}
             index={root}
             key={root.id}
-            paddingLeft={this.props.paddingLeft}
-            addChild={(id) => this.addChild(id)}
-            onDragStart={(id, dom, e) => this.dragStart(id, dom, e)}
+            paddingLeft={this.props.paddingLeft || defaultPadding}
+            addChild={(idx: Trees.Index<Pages.TreeNode>) => this.addChild(idx)}
+            onDragStart={this.dragStart}
             onCollapse={(nodeId) => this.toggleCollapse(nodeId)}
             updatePage={(idx, attrs) => this.updatePage(idx, attrs)}
             dragging={dragging && dragging.id}
@@ -141,21 +145,21 @@ export default class Draggable extends Component<
     }
   }
 
-  addChild(parent: TreeIndex<PageNode>) {
-    const newNode = {
-      name: "",
+  addChild(parent: Trees.Index<Pages.TreeNode>) {
+    const newNode: Pages.TreeNode = {
+      blocks: { name: { [this.props.locale]: "" } },
       status: 0,
       editing: true,
       children: [],
       published_at: new Date(),
       pinned: false,
-      locale: parent.node.locale,
-      parent_page_id: parent.node.id
+      parent_page_id: parent.node.id,
+      collapsed: false
     };
     this.props.addChild(parent.id, newNode);
   }
 
-  prevAddButtonCount(tree: Tree, index: TreeIndex) {
+  prevAddButtonCount(tree: Tree, index: Trees.Index) {
     let count = 0;
     const parentNodes = [];
     let pointer = tree.getIndex(index.parent);
@@ -171,7 +175,8 @@ export default class Draggable extends Component<
       if (
         parentNodes.indexOf(pointer) == -1 &&
         !pointer.node.collapsed &&
-        pointer.node.children.filter((p) => p.status != 4).length > 0
+        pointer.node.children.filter((p: Pages.TreeNode) => p.status != 4)
+          .length > 0
       ) {
         count += 1;
       }
@@ -206,8 +211,8 @@ export default class Draggable extends Component<
 
     const tree = this.props.tree;
     const dragging = this.state.dragging;
-    const paddingLeft = this.props.paddingLeft;
-    let newIndex: TreeIndex = null;
+    const paddingLeft = this.props.paddingLeft || defaultPadding;
+    let newIndex: Trees.Index<Pages.TreeNode> = null;
     let index = tree.getIndex(dragging.id);
     const collapsed = index.node.collapsed;
 
@@ -239,7 +244,7 @@ export default class Draggable extends Component<
       if ("prev" in index) {
         const prev = tree.getIndex(index.prev);
 
-        if (!prev.node.leaf && !prev.node.collapsed) {
+        if (!prev.node.collapsed) {
           newIndex = tree.move(index.id, index.prev, "append");
         }
       }
@@ -278,7 +283,7 @@ export default class Draggable extends Component<
     this.setState({ dragging: dragging });
   }
 
-  dragStart(id: TreeId, dom: HTMLDivElement, e: MouseEvent) {
+  dragStart = (id: Trees.Id, dom: HTMLDivElement, e: React.MouseEvent) => {
     // Only drag on left click
     if (e.button !== 0) {
       return;
@@ -300,14 +305,14 @@ export default class Draggable extends Component<
     this._offsetY = e.clientY;
     this._start = true;
 
-    this._dragListener = (e: Event) => {
+    this._dragListener = (e: MouseEvent) => {
       this.drag(e);
     };
     this._dragEndListener = () => this.dragEnd();
 
     window.addEventListener("mousemove", this._dragListener);
     window.addEventListener("mouseup", this._dragEndListener);
-  }
+  };
 
   dragEnd() {
     if (!this._start) {
@@ -323,15 +328,11 @@ export default class Draggable extends Component<
     window.removeEventListener("mouseup", this._dragEndListener);
   }
 
-  toggleCollapse(nodeId: TreeId) {
+  toggleCollapse(nodeId: Trees.Id) {
     this.props.toggleCollapsed(nodeId);
   }
 
-  updatePage(index: TreeIndex, attributes: Attributes) {
+  updatePage(index: Trees.Index, attributes: Partial<Pages.TreeItem>) {
     this.props.updatePage(index.id, attributes);
   }
 }
-
-Draggable.defaultProps = {
-  paddingLeft: 15
-};

data/app/javascript/components/PageTree/Node.tsx

@@ -25,39 +25,54 @@
    SOFTWARE.
  */
 
-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;
+import React, {
+  createRef,
+  ChangeEvent,
+  Component,
+  CSSProperties,
+  FormEvent,
+  MouseEvent,
+  RefObject
+} from "react";
+
+import Tree from "../../lib/Tree";
+import * as Trees from "../../types/Trees";
+import * as Pages from "../../types/Pages";
+
+import PageName from "./PageName";
+
+interface Props {
+  index: Trees.Index<Pages.TreeNode>;
   paddingLeft: number;
-  tree: Tree<PageNode>;
-  updatePage: (index: TreeIndex, attributes: Attributes) => void;
+  tree: Tree<Pages.TreeNode>;
+  addChild?: (index: Trees.Index<Pages.TreeNode>) => void;
+  dir?: string;
+  dragging?: Trees.Id;
+  locale: string;
+  onCollapse?: (id: Trees.Id) => void;
+  onDragStart?: (id: number, element: HTMLDivElement, evt: MouseEvent) => void;
+  updatePage?: (
+    index: Trees.Index<Pages.TreeNode>,
+    attributes: Partial<Pages.TreeItem>
+  ) => void;
 }
 
-interface NodeState {
+interface State {
   newName: string;
 }
 
 interface ButtonOptions {
   icon: string;
   className: string;
-  onClick: (evt: Event) => void;
+  onClick: (evt: MouseEvent) => void;
 }
 
-export default class Node extends Component<NodeProps, NodeState> {
+export default class Node extends Component<Props, State> {
   innerRef: RefObject<HTMLDivElement>;
 
-  constructor(props: NodeProps) {
+  constructor(props: Props) {
     super(props);
-    this.state = { newName: props.index.node.name };
+    this.state = { newName: this.pageName() };
     this.innerRef = createRef<HTMLDivElement>();
   }
 
@@ -136,7 +151,7 @@ export default class Node extends Component<NodeProps, NodeState> {
       (node.root || this.visibleChildren().length > 0)
     ) {
       return this.button("Add page here", {
-        className: "add add-inline",
+        className: "add add-inline transparent",
         icon: "plus",
         onClick: handleClick
       });
@@ -160,7 +175,7 @@ export default class Node extends Component<NodeProps, NodeState> {
     const { index, tree, dragging, dir, locale } = this.props;
 
     if (index.children && index.children.length && !index.node.collapsed) {
-      const childrenStyles = {};
+      const childrenStyles: CSSProperties = {};
       if (index.node.collapsed) {
         childrenStyles.display = "none";
       }
@@ -201,7 +216,7 @@ export default class Node extends Component<NodeProps, NodeState> {
       return null;
     }
 
-    const handleCollapse = (e: Event) => {
+    const handleCollapse = (e: MouseEvent) => {
       e.stopPropagation();
       const nodeId = this.props.index.id;
       if (this.props.onCollapse) {
@@ -211,17 +226,17 @@ export default class Node extends Component<NodeProps, NodeState> {
 
     if (this.visibleChildren().length > 0) {
       const collapsed = index.node.collapsed;
-      let classnames = "";
+      const classnames = ["collapse fa-solid fa-caret-right"];
 
       if (collapsed) {
-        classnames = "collapse fa-solid fa-caret-right";
+        classnames.push("collapsed");
       } else {
-        classnames = "collapse fa-solid fa-caret-down";
+        classnames.push("open");
       }
 
       return (
         <i
-          className={classnames}
+          className={classnames.join(" ")}
           onMouseDown={function (e) {
             e.stopPropagation();
           }}
@@ -260,22 +275,16 @@ export default class Node extends Component<NodeProps, NodeState> {
     this.updatePage({ editing: true });
   }
 
-  editUrl(page: PageNode) {
-    return `/admin/${page.locale}/pages/${page.param}/edit`;
+  editUrl(page: Pages.TreeNode) {
+    return `/admin/${this.props.locale}/pages/${page.id}/edit`;
   }
 
-  node(): PageNode {
+  node(): Pages.TreeNode {
     return this.props.index.node;
   }
 
   pageName() {
-    const name = this.node().name || <i className="untitled">Untitled</i>;
-
-    return (
-      <span dir={this.props.dir} lang={this.props.locale}>
-        {name}
-      </span>
-    );
+    return this.node().blocks.name[this.props.locale];
   }
 
   render() {
@@ -291,7 +300,7 @@ export default class Node extends Component<NodeProps, NodeState> {
       classnames = "node placeholder";
     }
 
-    const handleMouseDown = (e: Event) => {
+    const handleMouseDown = (e: MouseEvent) => {
       if (this.permitted("edit") && !editing && props.onDragStart) {
         props.onDragStart(props.index.id, this.innerRef.current, e);
       }
@@ -323,24 +332,25 @@ export default class Node extends Component<NodeProps, NodeState> {
       this.setState({ newName: event.target.value });
     };
 
-    const performEdit = (event: Event) => {
+    const performEdit = (event: FormEvent) => {
       event.preventDefault();
       this.updatePage({
-        name: this.state.newName,
+        blocks: { name: { [locale]: this.state.newName } },
         editing: false
       });
     };
 
     const cancelEdit = () => {
-      this.setState({ newName: this.node().name });
+      this.setState({ newName: this.pageName() });
       this.updatePage({ editing: false });
     };
 
     return (
       <div className="page edit">
         <i className="fa-regular fa-file icon"></i>
-        <form onSubmit={performEdit}>
+        <form className="edit-name" onSubmit={performEdit}>
           <input
+            className="tight"
             type="text"
             value={this.state.newName}
             dir={dir}
@@ -348,7 +358,7 @@ export default class Node extends Component<NodeProps, NodeState> {
             autoFocus
             onChange={handleNameChange}
           />
-          <button className="save" type="submit">
+          <button className="save primary" type="submit">
             <i className="fa-solid fa-cloud icon"></i>
             Save
           </button>
@@ -366,7 +376,6 @@ export default class Node extends Component<NodeProps, NodeState> {
     const index = this.props.index;
     const node = index.node;
 
-    let pageName = <span className="name">{this.pageName()}</span>;
     let className = "page";
 
     let iconClass = "fa-regular fa-file icon";
@@ -375,24 +384,21 @@ export default class Node extends Component<NodeProps, NodeState> {
       className = `page status-${this.node().status}`;
     }
 
-    if (node.id && node.locale && this.permitted("edit")) {
-      pageName = (
-        <a href={this.editUrl(node)} className="name">
-          {this.pageName()}
-        </a>
-      );
-    }
-
     if (node.news_page) {
-      iconClass = "fa-regular fa-file-lines icon";
+      iconClass = "fa-regular fa-file-lines page-icon";
     } else if (node.pinned) {
-      iconClass = "fa-regular fa-flag icon";
+      iconClass = "fa-regular fa-flag page-icon";
     }
 
     return (
       <div className={className}>
         <i className={iconClass}></i>
-        {pageName}
+        <PageName
+          name={this.pageName()}
+          dir={this.props.dir}
+          locale={this.props.locale}
+          editUrl={node.id && this.permitted("edit") && this.editUrl(node)}
+        />
         {this.statusLabel()}
         {this.collapsedLabel()}
         {this.actions()}
@@ -419,13 +425,13 @@ export default class Node extends Component<NodeProps, NodeState> {
     }
   }
 
-  updatePage(attributes: Attributes) {
+  updatePage(attributes: Partial<Pages.TreeItem>) {
     if (this.props.updatePage) {
       return this.props.updatePage(this.props.index, attributes);
     }
   }
 
-  visibleChildren(): PageNode[] {
+  visibleChildren(): Pages.TreeNode[] {
     if (this.node().children) {
       return this.node().children.filter((p) => p.status != 4);
     } else {

data/app/javascript/components/PageTree/PageName.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+
+interface Props {
+  name: string;
+  locale: string;
+  dir?: string;
+  editUrl?: string;
+}
+
+export default function PageName(props: Props) {
+  const { name, locale, dir, editUrl } = props;
+
+  const span = (
+    <span dir={dir} lang={locale}>
+      {name || <i className="untitled">Untitled</i>}
+    </span>
+  );
+
+  if (editUrl) {
+    return (
+      <a href={editUrl} className="name">
+        {span}
+      </a>
+    );
+  } else {
+    return <span className="name">{span}</span>;
+  }
+}