pages_core 3.12.4 → 3.12.5

data/app/javascript/components/PageDates.jsx

@@ -6,8 +6,8 @@ export default class PageDates extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      has_dates: (props.starts_at ? true : false),
-      all_day:   !!props.all_day
+      has_dates: props.starts_at ? true : false,
+      all_day: !!props.all_day
     };
 
     this.toggleAllDay = this.toggleAllDay.bind(this);
@@ -29,32 +29,37 @@ export default class PageDates extends React.Component {
   render() {
     return (
       <div className="page-dates field">
-        <input type="hidden"
-               name="page[all_day]"
-               value={(this.state.has_dates && this.state.all_day) ? "1" : "0"} />
-        <label>
-          Dates
-        </label>
+        <input
+          type="hidden"
+          name="page[all_day]"
+          value={this.state.has_dates && this.state.all_day ? "1" : "0"}
+        />
+        <label>Dates</label>
         <div className="toggles">
           <label className="has-dates-toggle">
-            <input type="checkbox"
-                   checked={this.state.has_dates}
-                   onChange={this.toggleHasDates} />
+            <input
+              type="checkbox"
+              checked={this.state.has_dates}
+              onChange={this.toggleHasDates}
+            />
             Enabled
           </label>
           <label className={!this.state.has_dates && "disabled"}>
-            <input type="checkbox"
-                   disabled={!this.state.has_dates}
-                   checked={this.state.all_day}
-                   onChange={this.toggleAllDay} />
+            <input
+              type="checkbox"
+              disabled={!this.state.has_dates}
+              checked={this.state.all_day}
+              onChange={this.toggleAllDay}
+            />
             All day event
           </label>
         </div>
-        <DateRangeSelect objectName="page"
-                         startsAt={this.props.starts_at}
-                         endsAt={this.props.ends_at}
-                         disabled={!this.state.has_dates}
-                         disableTime={this.state.all_day}
+        <DateRangeSelect
+          objectName="page"
+          startsAt={this.props.starts_at}
+          endsAt={this.props.ends_at}
+          disabled={!this.state.has_dates}
+          disableTime={this.state.all_day}
         />
       </div>
     );

data/app/javascript/components/PageFiles.jsx

@@ -6,11 +6,13 @@ export default class PageFiles extends React.Component {
   render() {
     return (
       <div className="page-files">
-        <Attachments attribute="page[page_files_attributes]"
-                     showEmbed={true}
-                     locale={this.props.locale}
-                     locales={this.props.locales}
-                     records={this.props.records} />
+        <Attachments
+          attribute="page[page_files_attributes]"
+          showEmbed={true}
+          locale={this.props.locale}
+          locales={this.props.locales}
+          records={this.props.records}
+        />
       </div>
     );
   }

data/app/javascript/components/PageImages.tsx

@@ -3,26 +3,28 @@ import { ImageResource, Locale } from "../types";
 import ImageGrid from "./ImageGrid";
 
 interface PageImage {
-  id: number | null,
-  image: ImageResource
+  id: number | null;
+  image: ImageResource;
 }
 
 interface PageImagesProps {
-  locale: string,
-  locales: { [index: string]: Locale },
-  records: PageImage[]
+  locale: string;
+  locales: { [index: string]: Locale };
+  records: PageImage[];
 }
 
 export default function PageImages(props: PageImagesProps) {
   return (
     <div className="page-images">
-      <ImageGrid attribute="page[page_images_attributes]"
+      <ImageGrid
+        attribute="page[page_images_attributes]"
         primaryAttribute="page[image_id]"
         enablePrimary={true}
         showEmbed={true}
         locale={props.locale}
         locales={props.locales}
-        records={props.records} />
+        records={props.records}
+      />
     </div>
   );
 }

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

@@ -31,32 +31,35 @@ import { Attributes, PageNode } from "./types";
 import Node from "./Node";
 
 interface DragState {
-  id: number | null,
-  x: number | null,
-  y: number | null,
-  w: number | null,
-  h: number | null,
-  scrollTop: number | null,
-  scrollLeft: number | null
+  id: number | null;
+  x: number | null;
+  y: number | null;
+  w: number | null;
+  h: number | null;
+  scrollTop: number | null;
+  scrollLeft: number | null;
 }
 
 interface DraggableProps {
-  addChild: (index: TreeIndex) => void,
-  dir: string,
-  locale: string,
-  movedPage: (id: TreeId) => void,
-  paddingLeft: number,
-  toggleCollapsed: (id: TreeId) => void,
-  tree: Tree<PageNode>,
-  updatePage: (id: TreeId, attributes: Attributes) => void,
-  updateTree: (Tree) => void
+  addChild: (index: TreeIndex) => void;
+  dir: string;
+  locale: string;
+  movedPage: (id: TreeId) => void;
+  paddingLeft: number;
+  toggleCollapsed: (id: TreeId) => void;
+  tree: Tree<PageNode>;
+  updatePage: (id: TreeId, attributes: Attributes) => void;
+  updateTree: (Tree) => void;
 }
 
 interface DraggableState {
-  dragging: DragState
+  dragging: DragState;
 }
 
-export default class Draggable extends Component<DraggableProps, DraggableState> {
+export default class Draggable extends Component<
+  DraggableProps,
+  DraggableState
+> {
   _dragListener: (evt: MouseEvent) => void;
   _dragEndListener: () => void;
   _startX: number;
@@ -98,9 +101,9 @@ export default class Draggable extends Component<DraggableProps, DraggableState>
       return (
         <div className="draggable" style={draggingStyles}>
           <Node
-              tree={tree}
-              index={draggingIndex}
-              paddingLeft={this.props.paddingLeft}
+            tree={tree}
+            index={draggingIndex}
+            paddingLeft={this.props.paddingLeft}
           />
         </div>
       );
@@ -114,11 +117,7 @@ export default class Draggable extends Component<DraggableProps, DraggableState>
     const dragging = this.state.dragging;
 
     if (!tree) {
-      return (
-        <div className="page-tree">
-          {this.getDraggingDom()}
-        </div>
-      );
+      return <div className="page-tree">{this.getDraggingDom()}</div>;
     } else {
       const root = tree.getIndex(1);
       return (
@@ -129,13 +128,14 @@ export default class Draggable extends Component<DraggableProps, DraggableState>
             index={root}
             key={root.id}
             paddingLeft={this.props.paddingLeft}
-            addChild={id => this.addChild(id)}
+            addChild={(id) => this.addChild(id)}
             onDragStart={(id, dom, e) => this.dragStart(id, dom, e)}
-            onCollapse={nodeId => this.toggleCollapse(nodeId)}
+            onCollapse={(nodeId) => this.toggleCollapse(nodeId)}
             updatePage={(idx, attrs) => this.updatePage(idx, attrs)}
             dragging={dragging && dragging.id}
             dir={dir}
-            locale={locale} />
+            locale={locale}
+          />
         </div>
       );
     }
@@ -171,7 +171,7 @@ export default class Draggable extends Component<DraggableProps, DraggableState>
       if (
         parentNodes.indexOf(pointer) == -1 &&
         !pointer.node.collapsed &&
-        pointer.node.children.filter(p => p.status != 4).length > 0
+        pointer.node.children.filter((p) => p.status != 4).length > 0
       ) {
         count += 1;
       }
@@ -191,8 +191,9 @@ export default class Draggable extends Component<DraggableProps, DraggableState>
 
   drag(e: MouseEvent) {
     if (this._start) {
-      const distance = Math.abs(e.clientX - this._offsetX) +
-                     Math.abs(e.clientY - this._offsetY);
+      const distance =
+        Math.abs(e.clientX - this._offsetX) +
+        Math.abs(e.clientY - this._offsetY);
       if (distance >= 15) {
         this.setState({
           dragging: this.dragging
@@ -222,8 +223,11 @@ export default class Draggable extends Component<DraggableProps, DraggableState>
     dragging.x = pos.x;
     dragging.y = pos.y;
 
-    const diffX = dragging.x - paddingLeft/2 - (index.left-2) * paddingLeft;
-    const diffY = dragging.y - dragging.h/2 - (index.top-2 + this.prevAddButtonCount(tree, index)) * dragging.h;
+    const diffX = dragging.x - paddingLeft / 2 - (index.left - 2) * paddingLeft;
+    const diffY =
+      dragging.y -
+      dragging.h / 2 -
+      (index.top - 2 + this.prevAddButtonCount(tree, index)) * dragging.h;
 
     if (diffX < 0) {
       // left
@@ -247,15 +251,15 @@ export default class Draggable extends Component<DraggableProps, DraggableState>
       dragging.id = newIndex.id;
     }
 
-    if (diffY < (0 - dragging.h * 0.5)) {
+    if (diffY < 0 - dragging.h * 0.5) {
       // up
-      const above = tree.getNodeByTop(index.top-1);
+      const above = tree.getNodeByTop(index.top - 1);
       newIndex = tree.move(index.id, above.id, "before");
     } else if (diffY > dragging.h * 1.5) {
       // down
-      const below = index.next ?
-                  tree.getIndex(index.next) :
-                  tree.getNodeByTop(index.top + index.height);
+      const below = index.next
+        ? tree.getIndex(index.next)
+        : tree.getNodeByTop(index.top + index.height);
 
       if (below && below.parent !== index.id) {
         if (below.children && below.children.length && !below.node.collapsed) {
@@ -296,7 +300,9 @@ export default class Draggable extends Component<DraggableProps, DraggableState>
     this._offsetY = e.clientY;
     this._start = true;
 
-    this._dragListener = (e: Event) => { this.drag(e); };
+    this._dragListener = (e: Event) => {
+      this.drag(e);
+    };
     this._dragEndListener = () => this.dragEnd();
 
     window.addEventListener("mousemove", this._dragListener);

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

@@ -30,26 +30,26 @@ 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
+  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
+  newName: string;
 }
 
 interface ButtonOptions {
-  icon: string,
-  className: string,
-  onClick: (evt: Event) => void
+  icon: string;
+  className: string;
+  onClick: (evt: Event) => void;
 }
 
 export default class Node extends Component<NodeProps, NodeState> {
@@ -62,13 +62,14 @@ export default class Node extends Component<NodeProps, NodeState> {
   }
 
   permitted(action: string): boolean {
-    return this.node().permissions &&
-           this.node().permissions.indexOf(action) != -1;
+    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";
+    const statusLabel = this.node().status != 2 ? "Publish" : "Hide";
+    const statusIcon = this.node().status != 2 ? "check" : "ban";
 
     if (this.node().editing) {
       return null;
@@ -77,9 +78,10 @@ export default class Node extends Component<NodeProps, NodeState> {
     if (this.props.index.id === 1) {
       return (
         <span className="actions">
-          <button type="button"
-                  className="add"
-                  onClick={() => this.props.addChild(this.props.index)}>
+          <button
+            type="button"
+            className="add"
+            onClick={() => this.props.addChild(this.props.index)}>
             <i className="fa-solid fa-plus icon" />
             Add child
           </button>
@@ -88,29 +90,33 @@ export default class Node extends Component<NodeProps, NodeState> {
     } 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()
-           })}
-
-          {this.permitted("edit") && this.button("Delete", {
-            className: "delete",
-            icon: "trash",
-            onClick: () => this.deletePage()
-           })}
-
-          {this.permitted("create") && this.button("Add child", {
-            className: "add",
-            icon: "plus",
-            onClick: () => this.props.addChild(this.props.index)
-           })}
+          {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()
+            })}
+
+          {this.permitted("edit") &&
+            this.button("Delete", {
+              className: "delete",
+              icon: "trash",
+              onClick: () => this.deletePage()
+            })}
+
+          {this.permitted("create") &&
+            this.button("Add child", {
+              className: "add",
+              icon: "plus",
+              onClick: () => this.props.addChild(this.props.index)
+            })}
         </span>
       );
     }
@@ -124,25 +130,26 @@ export default class Node extends Component<NodeProps, NodeState> {
       }
     };
 
-    if (!node.collapsed &&
-        this.permitted("create") &&
-        (node.root || this.visibleChildren().length > 0)) {
-      return (
-        this.button("Add page here", {
-          className: "add add-inline",
-          icon: "plus",
-          onClick: handleClick
-        })
-      );
+    if (
+      !node.collapsed &&
+      this.permitted("create") &&
+      (node.root || this.visibleChildren().length > 0)
+    ) {
+      return this.button("Add page here", {
+        className: "add add-inline",
+        icon: "plus",
+        onClick: handleClick
+      });
     }
   }
 
   button(label: string, options: ButtonOptions) {
     const icon = "fa-solid fa-" + options.icon + " icon";
     return (
-      <button type="button"
-              className={options.className}
-              onClick={options.onClick}>
+      <button
+        type="button"
+        className={options.className}
+        onClick={options.onClick}>
         <i className={icon} />
         {label}
       </button>
@@ -175,7 +182,8 @@ export default class Node extends Component<NodeProps, NodeState> {
                 onDragStart={this.props.onDragStart}
                 updatePage={this.props.updatePage}
                 dir={dir}
-                locale={locale} />
+                locale={locale}
+              />
             );
           })}
         </div>
@@ -212,9 +220,13 @@ export default class Node extends Component<NodeProps, NodeState> {
       }
 
       return (
-        <i className={classnames}
-           onMouseDown={function(e) {e.stopPropagation();}}
-           onClick={handleCollapse} />
+        <i
+          className={classnames}
+          onMouseDown={function (e) {
+            e.stopPropagation();
+          }}
+          onClick={handleCollapse}
+        />
       );
     }
 
@@ -222,10 +234,12 @@ export default class Node extends Component<NodeProps, NodeState> {
   }
 
   collapsedLabel() {
-    if (this.node().collapsed &&
-        this.node().children &&
-        this.node().children.length > 0) {
-      const pluralized = (this.node().children.length == 1) ? "item" : "items";
+    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})
@@ -238,16 +252,16 @@ export default class Node extends Component<NodeProps, NodeState> {
 
   deletePage() {
     if (confirm("Are you sure you want to delete this page?")) {
-      this.updatePage({status: 4});
+      this.updatePage({ status: 4 });
     }
   }
 
   edit() {
-    this.updatePage({editing: true});
+    this.updatePage({ editing: true });
   }
 
   editUrl(page: PageNode) {
-    return(`/admin/${page.locale}/pages/${page.param}/edit`);
+    return `/admin/${page.locale}/pages/${page.param}/edit`;
   }
 
   node(): PageNode {
@@ -257,9 +271,8 @@ export default class Node extends Component<NodeProps, NodeState> {
   pageName() {
     const name = this.node().name || <i className="untitled">Untitled</i>;
 
-    return(
-      <span dir={this.props.dir}
-            lang={this.props.locale}>
+    return (
+      <span dir={this.props.dir} lang={this.props.locale}>
         {name}
       </span>
     );
@@ -287,9 +300,10 @@ export default class Node extends Component<NodeProps, NodeState> {
     if (this.node().status != 4) {
       return (
         <div className={classnames}>
-          <div className="inner"
-               ref={this.innerRef}
-               onMouseDown={handleMouseDown}>
+          <div
+            className="inner"
+            ref={this.innerRef}
+            onMouseDown={handleMouseDown}>
             {this.collapseArrow()}
             {node}
           </div>
@@ -326,21 +340,23 @@ export default class Node extends Component<NodeProps, NodeState> {
       <div className="page edit">
         <i className="fa-regular fa-file icon"></i>
         <form onSubmit={performEdit}>
-          <input type="text"
-                 value={this.state.newName}
-                 dir={dir}
-                 lang={locale}
-                 autoFocus
-                 onChange={handleNameChange} />
+          <input
+            type="text"
+            value={this.state.newName}
+            dir={dir}
+            lang={locale}
+            autoFocus
+            onChange={handleNameChange}
+          />
           <button className="save" type="submit">
             <i className="fa-solid fa-cloud icon"></i>
             Save
           </button>
           {this.button("Cancel", {
-             className: "cancel",
-             icon: "ban",
-             onClick: cancelEdit
-           })}
+            className: "cancel",
+            icon: "ban",
+            onClick: cancelEdit
+          })}
         </form>
       </div>
     );
@@ -355,14 +371,16 @@ export default class Node extends Component<NodeProps, NodeState> {
 
     let iconClass = "fa-regular fa-file icon";
 
-    if (typeof(node.status) != "undefined") {
+    if (typeof node.status != "undefined") {
       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>;
+      pageName = (
+        <a href={this.editUrl(node)} className="name">
+          {this.pageName()}
+        </a>
+      );
     }
 
     if (node.news_page) {
@@ -384,11 +402,9 @@ export default class Node extends Component<NodeProps, NodeState> {
 
   statusLabel() {
     const labels = ["Draft", "Reviewed", "Published", "Hidden", "Deleted"];
-    if (typeof(this.node().status) != "undefined" && this.node().status != 2) {
+    if (typeof this.node().status != "undefined" && this.node().status != 2) {
       return (
-        <span className="status-label">
-          ({labels[this.node().status]})
-        </span>
+        <span className="status-label">({labels[this.node().status]})</span>
       );
     } else {
       return "";
@@ -397,9 +413,9 @@ export default class Node extends Component<NodeProps, NodeState> {
 
   toggleStatus() {
     if (this.node().status != 2) {
-      this.updatePage({status: 2});
+      this.updatePage({ status: 2 });
     } else {
-      this.updatePage({status: 3});
+      this.updatePage({ status: 3 });
     }
   }
 
@@ -411,7 +427,7 @@ export default class Node extends Component<NodeProps, NodeState> {
 
   visibleChildren(): PageNode[] {
     if (this.node().children) {
-      return this.node().children.filter(p => p.status != 4);
+      return this.node().children.filter((p) => p.status != 4);
     } else {
       return [];
     }

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

@@ -3,13 +3,13 @@ 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
+  id: number | null;
+  children: PageNode[];
+  editing: boolean;
+  locale: string;
+  name: string;
+  param: string;
+  permissions: string[];
+  published_at: string;
+  status: string;
 }