pages_core 3.15.3 → 3.15.5

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

@@ -1,441 +1,171 @@
-/*
-   Based on react-ui-tree
-   https://github.com/pqx/react-ui-tree
+import { Fragment, useRef } from "react";
 
-   The MIT License (MIT)
-
-   Copyright (c) 2015 pqx Limited
-
-   Permission is hereby granted, free of charge, to any person obtaining a copy
-   of this software and associated documentation files (the "Software"), to deal
-   in the Software without restriction, including without limitation the rights
-   to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-   copies of the Software, and to permit persons to whom the Software is
-   furnished to do so, subject to the following conditions:
-
-   The above copyright notice and this permission notice shall be included in all
-   copies or substantial portions of the Software.
-
-   THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-   IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-   FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-   AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-   LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-   SOFTWARE.
- */
-
-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 usePageTreeContext from "./usePageTreeContext";
+import * as Tree from "./tree";
 
+import { addChild, updatePage, visibleChildNodes } from "./usePageTree";
+import Button from "./Button";
+import CollapseArrow from "./CollapseArrow";
+import CollapsedLabel from "./CollapsedLabel";
 import PageName from "./PageName";
+import StatusLabel from "./StatusLabel";
+import EditPageName from "./EditPageName";
 
-interface Props {
-  index: Trees.Index<Pages.TreeNode>;
-  paddingLeft: number;
-  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 State {
-  newName: string;
-}
-
-interface ButtonOptions {
-  icon: string;
-  className: string;
-  onClick: (evt: MouseEvent) => void;
-}
-
-export default class Node extends Component<Props, State> {
-  innerRef: RefObject<HTMLDivElement>;
-
-  constructor(props: Props) {
-    super(props);
-    this.state = { newName: this.pageName() };
-    this.innerRef = createRef<HTMLDivElement>();
-  }
-
-  permitted(action: string): boolean {
-    return (
-      this.node().permissions && this.node().permissions.indexOf(action) != -1
-    );
-  }
-
-  actions() {
-    const statusLabel = this.node().status != 2 ? "Publish" : "Hide";
-    const statusIcon = this.node().status != 2 ? "check" : "ban";
-
-    if (this.node().editing) {
-      return null;
-    }
-
-    if (this.props.index.id === 1) {
-      return (
-        <span className="actions">
-          <button
-            type="button"
-            className="add"
-            onClick={() => this.props.addChild(this.props.index)}>
-            <i className="fa-solid fa-plus icon" />
-            Add child
-          </button>
-        </span>
-      );
-    } else {
-      return (
-        <span className="actions">
-          {this.permitted("edit") &&
-            this.button(statusLabel, {
-              className: "toggle-status",
-              icon: statusIcon,
-              onClick: () => this.toggleStatus()
-            })}
-
-          {this.permitted("edit") &&
-            this.button("Rename", {
-              className: "edit",
-              icon: "pencil",
-              onClick: () => this.edit()
-            })}
+type Props = {
+  id: Tree.Id;
 
-          {this.permitted("edit") &&
-            this.button("Delete", {
-              className: "delete",
-              icon: "trash",
-              onClick: () => this.deletePage()
-            })}
+  dragging?: Tree.Id;
+  onDragStart?: (
+    id: number,
+    element: HTMLDivElement,
+    evt: React.MouseEvent | React.TouchEvent
+  ) => void;
+};
 
-          {this.permitted("create") &&
-            this.button("Add child", {
-              className: "add",
-              icon: "plus",
-              onClick: () => this.props.addChild(this.props.index)
-            })}
-        </span>
-      );
-    }
-  }
+export const paddingLeft = 20;
 
-  addButton() {
-    const node = this.node();
-    const handleClick = () => {
-      if (this.props.addChild) {
-        this.props.addChild(this.props.index);
-      }
-    };
+export default function Node(props: Props) {
+  const { state, dispatch } = usePageTreeContext();
+  const { id, dragging, onDragStart } = props;
+  const { dir, locale } = state;
+  const node = state.nodes[id];
+  const page = node.record;
+  const name = page.blocks.name[locale];
 
-    if (
-      !node.collapsed &&
-      this.permitted("create") &&
-      (node.root || this.visibleChildren().length > 0)
-    ) {
-      return this.button("Add page here", {
-        className: "add add-inline transparent",
-        icon: "plus",
-        onClick: handleClick
-      });
-    }
-  }
+  const innerRef = useRef<HTMLDivElement>();
 
-  button(label: string, options: ButtonOptions) {
-    const icon = "fa-solid fa-" + options.icon + " icon";
-    return (
-      <button
-        type="button"
-        className={options.className}
-        onClick={options.onClick}>
-        <i className={icon} />
-        {label}
-      </button>
-    );
+  const classNames = ["node"];
+  if (id === dragging) {
+    classNames.push("placeholder");
   }
 
-  childNodes() {
-    const { index, tree, dragging, dir, locale } = this.props;
-
-    if (index.children && index.children.length && !index.node.collapsed) {
-      const childrenStyles: CSSProperties = {};
-      if (index.node.collapsed) {
-        childrenStyles.display = "none";
-      }
-      childrenStyles["paddingLeft"] = `${this.props.paddingLeft}px`;
+  const pageClassNames = ["page"];
+  let iconClass = "fa-regular fa-file icon";
 
-      return (
-        <div className="children" style={childrenStyles}>
-          {index.children.map((child) => {
-            const childIndex = tree.getIndex(child);
-            return (
-              <Node
-                tree={tree}
-                index={childIndex}
-                key={childIndex.id}
-                dragging={dragging}
-                paddingLeft={this.props.paddingLeft}
-                addChild={this.props.addChild}
-                onCollapse={this.props.onCollapse}
-                onDragStart={this.props.onDragStart}
-                updatePage={this.props.updatePage}
-                dir={dir}
-                locale={locale}
-              />
-            );
-          })}
-        </div>
-      );
+  if (!("root" in page)) {
+    pageClassNames.push(`status-${page.status}`);
+    if (page.news_page) {
+      iconClass = "fa-regular fa-file-lines page-icon";
+    } else if (page.pinned) {
+      iconClass = "fa-regular fa-flag page-icon";
     }
-
-    return null;
   }
 
-  collapseArrow() {
-    const index = this.props.index;
+  const permitted = (action: string): boolean => {
+    return page.permissions && page.permissions.indexOf(action) !== -1;
+  };
 
-    // Don't collapse the root node
-    if (!index.parent) {
-      return null;
-    }
-
-    const handleCollapse = (e: MouseEvent) => {
-      e.stopPropagation();
-      const nodeId = this.props.index.id;
-      if (this.props.onCollapse) {
-        this.props.onCollapse(nodeId);
-      }
-    };
-
-    if (this.visibleChildren().length > 0) {
-      const collapsed = index.node.collapsed;
-      const classnames = ["collapse fa-solid fa-caret-right"];
-
-      if (collapsed) {
-        classnames.push("collapsed");
-      } else {
-        classnames.push("open");
-      }
-
-      return (
-        <i
-          className={classnames.join(" ")}
-          onMouseDown={function (e) {
-            e.stopPropagation();
-          }}
-          onClick={handleCollapse}
-        />
-      );
-    }
+  const handleAddChild = () => {
+    addChild(state, id, dispatch);
+  };
 
-    return null;
-  }
-
-  collapsedLabel() {
-    if (
-      this.node().collapsed &&
-      this.node().children &&
-      this.node().children.length > 0
-    ) {
-      const pluralized = this.node().children.length == 1 ? "item" : "items";
-      return (
-        <span className="collapsed-label">
-          ({this.node().children.length} {pluralized})
-        </span>
-      );
-    } else {
-      return null;
+  const handleDragStart = (evt: React.MouseEvent | React.TouchEvent) => {
+    if (permitted("edit") && !page.editing && onDragStart) {
+      onDragStart(id, innerRef.current, evt);
     }
-  }
+  };
 
-  deletePage() {
+  const handleDelete = () => {
     if (confirm("Are you sure you want to delete this page?")) {
-      this.updatePage({ status: 4 });
-    }
-  }
-
-  edit() {
-    this.updatePage({ editing: true });
-  }
-
-  editUrl(page: Pages.TreeNode) {
-    return `/admin/${this.props.locale}/pages/${page.id}/edit`;
-  }
-
-  node(): Pages.TreeNode {
-    return this.props.index.node;
-  }
-
-  pageName() {
-    return this.node().blocks.name[this.props.locale];
-  }
-
-  render() {
-    const props = this.props;
-    const index = props.index;
-    const dragging = props.dragging;
-    const editing = this.node().editing;
-    let classnames = "node";
-
-    const node = editing ? this.renderEditNode() : this.renderNode();
-
-    if (index.id === dragging) {
-      classnames = "node placeholder";
+      updatePage(state, id, dispatch, { status: 4 });
     }
+  };
 
-    const handleMouseDown = (e: MouseEvent) => {
-      if (this.permitted("edit") && !editing && props.onDragStart) {
-        props.onDragStart(props.index.id, this.innerRef.current, e);
-      }
-    };
+  const handleEdit = () => {
+    dispatch({ type: "update", id: id, payload: { editing: true } });
+  };
 
-    if (this.node().status != 4) {
-      return (
-        <div className={classnames}>
-          <div
-            className="inner"
-            ref={this.innerRef}
-            onMouseDown={handleMouseDown}>
-            {this.collapseArrow()}
-            {node}
-          </div>
-          {this.childNodes()}
-          {this.addButton()}
-        </div>
-      );
+  const handleToggleStatus = () => {
+    if ("status" in page && page.status != 2) {
+      updatePage(state, id, dispatch, { status: 2 });
     } else {
-      return null;
-    }
-  }
-
-  renderEditNode() {
-    const { dir, locale } = this.props;
-
-    const handleNameChange = (event: ChangeEvent<HTMLInputElement>) => {
-      this.setState({ newName: event.target.value });
-    };
-
-    const performEdit = (event: FormEvent) => {
-      event.preventDefault();
-      this.updatePage({
-        blocks: { name: { [locale]: this.state.newName } },
-        editing: false
-      });
-    };
-
-    const cancelEdit = () => {
-      this.setState({ newName: this.pageName() });
-      this.updatePage({ editing: false });
-    };
-
-    return (
-      <div className="page edit">
-        <i className="fa-regular fa-file icon"></i>
-        <form className="edit-name" onSubmit={performEdit}>
-          <input
-            className="tight"
-            type="text"
-            value={this.state.newName}
-            dir={dir}
-            lang={locale}
-            autoFocus
-            onChange={handleNameChange}
-          />
-          <button className="save primary" type="submit">
-            <i className="fa-solid fa-cloud icon"></i>
-            Save
-          </button>
-          {this.button("Cancel", {
-            className: "cancel",
-            icon: "ban",
-            onClick: cancelEdit
-          })}
-        </form>
-      </div>
-    );
-  }
-
-  renderNode() {
-    const index = this.props.index;
-    const node = index.node;
-
-    let className = "page";
-
-    let iconClass = "fa-regular fa-file icon";
-
-    if (typeof node.status != "undefined") {
-      className = `page status-${this.node().status}`;
-    }
-
-    if (node.news_page) {
-      iconClass = "fa-regular fa-file-lines page-icon";
-    } else if (node.pinned) {
-      iconClass = "fa-regular fa-flag page-icon";
-    }
+      updatePage(state, id, dispatch, { status: 3 });
+    }
+  };
+
+  return (
+    <div className={classNames.join(" ")}>
+      <div className="inner" ref={innerRef} onMouseDown={handleDragStart}>
+        <CollapseArrow id={id} />
+
+        {!page.editing && (
+          <div className={pageClassNames.join(" ")}>
+            <i className={iconClass}></i>
+            <PageName
+              name={name}
+              dir={dir}
+              locale={locale}
+              editUrl={
+                "id" in page &&
+                permitted("edit") &&
+                `/admin/${locale}/pages/${page.id}/edit`
+              }
+            />
+            {"status" in page && <StatusLabel status={page.status} />}
+            <CollapsedLabel id={id} />
+            <span className="actions">
+              {!("root" in page) && (
+                <Fragment>
+                  {permitted("edit") && (
+                    <Button
+                      label={page.status != 2 ? "Publish" : "Hide"}
+                      className="toggle-status"
+                      icon={page.status != 2 ? "check" : "ban"}
+                      onClick={handleToggleStatus}
+                    />
+                  )}
+
+                  {permitted("edit") && (
+                    <Button
+                      label="Rename"
+                      className="edit"
+                      icon="pencil"
+                      onClick={handleEdit}
+                    />
+                  )}
+
+                  {permitted("edit") && (
+                    <Button
+                      label="Delete"
+                      className="delete"
+                      icon="trash"
+                      onClick={handleDelete}
+                    />
+                  )}
+                </Fragment>
+              )}
+              {permitted("create") && (
+                <Button
+                  label="Add child"
+                  className="add"
+                  icon="plus"
+                  onClick={handleAddChild}
+                />
+              )}
+            </span>
+          </div>
+        )}
 
-    return (
-      <div className={className}>
-        <i className={iconClass}></i>
-        <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()}
+        {page.editing && <EditPageName id={id} />}
       </div>
-    );
-  }
-
-  statusLabel() {
-    const labels = ["Draft", "Reviewed", "Published", "Hidden", "Deleted"];
-    if (typeof this.node().status != "undefined" && this.node().status != 2) {
-      return (
-        <span className="status-label">({labels[this.node().status]})</span>
-      );
-    } else {
-      return "";
-    }
-  }
 
-  toggleStatus() {
-    if (this.node().status != 2) {
-      this.updatePage({ status: 2 });
-    } else {
-      this.updatePage({ status: 3 });
-    }
-  }
-
-  updatePage(attributes: Partial<Pages.TreeItem>) {
-    if (this.props.updatePage) {
-      return this.props.updatePage(this.props.index, attributes);
-    }
-  }
-
-  visibleChildren(): Pages.TreeNode[] {
-    if (this.node().children) {
-      return this.node().children.filter((p) => p.status != 4);
-    } else {
-      return [];
-    }
-  }
+      {!node.collapsed && visibleChildNodes(state, id).length > 0 && (
+        <Fragment>
+          <div className="children" style={{ paddingLeft: `${paddingLeft}px` }}>
+            {visibleChildNodes(state, id).map((childId) => {
+              return <Node {...props} id={childId} key={childId} />;
+            })}
+          </div>
+          {permitted("create") && (
+            <Button
+              label="Add page here"
+              className="add add-inline transparent"
+              icon="plus"
+              onClick={handleAddChild}
+            />
+          )}
+        </Fragment>
+      )}
+    </div>
+  );
 }

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

@@ -1,6 +1,4 @@
-import React from "react";
-
-interface Props {
+type Props = {
   name: string;
   locale: string;
   dir?: string;
@@ -16,9 +14,13 @@ export default function PageName(props: Props) {
     </span>
   );
 
+  const preventDrag = (evt: React.MouseEvent) => {
+    evt.preventDefault();
+  };
+
   if (editUrl) {
     return (
-      <a href={editUrl} className="name">
+      <a href={editUrl} className="name" onDragStart={preventDrag}>
         {span}
       </a>
     );

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

@@ -0,0 +1,10 @@
+type Props = {
+  status: number;
+}
+
+export default function StatusLabel({ status }: Props) {
+  const labels = ["Draft", "Reviewed", "Published", "Hidden", "Deleted"];
+  if (status != 2) {
+    return <span className="status-label">({labels[status]})</span>;
+  }
+}