pages_core 3.15.3 → 3.15.5

data/app/javascript/components/PageForm.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 
 import { putJson, postJson } from "../lib/request";
 import useToastStore from "../stores/useToastStore";
@@ -11,6 +11,7 @@ import useAttachments from "./Attachments/useAttachments";
 import useImageGrid from "./ImageGrid/useImageGrid";
 import useTags from "./TagEditor/useTags";
 import usePage from "./PageForm/usePage";
+import { PageFormContext } from "./PageForm/usePageFormContext";
 import useTabs from "./PageForm/useTabs";
 import pageParams from "./PageForm/pageParams";
 import Content from "./PageForm/Content";
@@ -24,14 +25,14 @@ import TabPanel from "./PageForm/TabPanel";
 import Files from "./PageForm/Files";
 import Images from "./PageForm/Images";
 
-interface Props {
+type Props = {
   locale: string;
   locales: { [index: string]: Locale };
   page: Pages.SerializedResource;
   templates: Template.Config[];
   authors: Pages.Author[];
   statuses: Pages.StatusLabels;
-}
+};
 
 export default function PageForm(props: Props) {
   const [state, dispatch] = usePage({
@@ -72,7 +73,7 @@ export default function PageForm(props: Props) {
     if (history) {
       history.replaceState(null, "", pageUrl);
     }
-  }, [page.id, locale, tab]);
+  }, [page.id, page.parent_page_id, locale, tab]);
 
   const handlePreview = (evt: React.MouseEvent) => {
     evt.preventDefault();
@@ -107,6 +108,13 @@ export default function PageForm(props: Props) {
         } else {
           filesState.update(response.page_files);
           imagesState.update(response.page_images);
+          tagsDispatch({
+            type: "update",
+            payload: {
+              tags: response.tags_and_suggestions,
+              enabled: response.enabled_tags
+            }
+          });
           noticeToast("Your changes were saved");
         }
       })
@@ -116,50 +124,46 @@ export default function PageForm(props: Props) {
   };
 
   return (
-    <Form state={state}>
-      <main>
-        <PageDescription state={state} dispatch={dispatch}>
-          <Tabs tabs={tabs} tab={tab} setTab={setTab} />
-        </PageDescription>
-        <div className="content">
-          <TabPanel active={tab == "content"}>
-            <Content
-              state={state}
-              dispatch={dispatch}
-              tagsState={tagsState}
-              tagsDispatch={tagsDispatch}
-            />
-          </TabPanel>
-          <TabPanel active={tab == "unconfigured-content"}>
-            <UnconfiguredContent state={state} dispatch={dispatch} />
-          </TabPanel>
-          <TabPanel active={tab == "images"}>
-            <Images locale={locale} locales={locales} state={imagesState} />
-          </TabPanel>
-          <TabPanel active={tab == "files"}>
-            <Files locale={locale} locales={locales} state={filesState} />
-          </TabPanel>
-          <TabPanel active={tab == "metadata"}>
-            <Metadata state={state} dispatch={dispatch} />
-          </TabPanel>
-          <div className="buttons">
-            <button type="button" onClick={handlePreview}>
-              Preview
-            </button>
-            <button type="submit" onClick={handleSubmit}>
-              Save
-            </button>
+    <PageFormContext.Provider
+      value={{
+        state: state,
+        dispatch: dispatch
+      }}>
+      <Form>
+        <main>
+          <PageDescription>
+            <Tabs tabs={tabs} tab={tab} setTab={setTab} />
+          </PageDescription>
+          <div className="content">
+            <TabPanel active={tab == "content"}>
+              <Content tagsState={tagsState} tagsDispatch={tagsDispatch} />
+            </TabPanel>
+            <TabPanel active={tab == "unconfigured-content"}>
+              <UnconfiguredContent />
+            </TabPanel>
+            <TabPanel active={tab == "images"}>
+              <Images locale={locale} locales={locales} state={imagesState} />
+            </TabPanel>
+            <TabPanel active={tab == "files"}>
+              <Files locale={locale} locales={locales} state={filesState} />
+            </TabPanel>
+            <TabPanel active={tab == "metadata"}>
+              <Metadata />
+            </TabPanel>
+            <div className="buttons">
+              <button type="button" onClick={handlePreview}>
+                Preview
+              </button>
+              <button type="submit" onClick={handleSubmit}>
+                Save
+              </button>
+            </div>
           </div>
-        </div>
-      </main>
-      <aside className="sidebar">
-        <Options
-          state={state}
-          dispatch={dispatch}
-          authors={props.authors}
-          statuses={props.statuses}
-        />
-      </aside>
-    </Form>
+        </main>
+        <aside className="sidebar">
+          <Options authors={props.authors} statuses={props.statuses} />
+        </aside>
+      </Form>
+    </PageFormContext.Provider>
   );
 }

data/app/javascript/components/PageImages.tsx

@@ -1,11 +1,9 @@
-import React from "react";
-
 import * as Images from "../types/Images";
 import { Locale } from "../types";
 
 import ImageGrid from "./ImageGrid";
 
-interface Props {
+type Props = {
   locale: string;
   locales: { [index: string]: Locale };
   records: Images.Record[];

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

@@ -0,0 +1,25 @@
+type Props = {
+  label: string;
+  icon: string;
+  className: string;
+  onClick: (evt: React.MouseEvent) => void;
+};
+
+export default function Button({ label, icon, className, onClick }: Props) {
+  const iconClass = "fa-solid fa-" + icon + " icon";
+
+  const preventDrag = (evt: React.MouseEvent) => {
+    evt.stopPropagation();
+  };
+
+  return (
+    <button
+      type="button"
+      className={className}
+      onClick={onClick}
+      onMouseDown={preventDrag}>
+      <i className={iconClass} />
+      {label}
+    </button>
+  );
+}

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

@@ -0,0 +1,34 @@
+import * as Tree from "./tree";
+import { visibleChildNodes } from "./usePageTree";
+import usePageTreeContext from "./usePageTreeContext";
+
+type Props = {
+  id: Tree.Id;
+};
+
+export default function CollapseArrow({ id }: Props) {
+  const { state, dispatch } = usePageTreeContext();
+  const node = state.nodes[id];
+  const classNames = ["collapse fa-solid fa-caret-right"];
+
+  classNames.push(node.collapsed ? "collapsed" : "open");
+
+  const handleClick = (evt: React.MouseEvent) => {
+    evt.stopPropagation();
+    dispatch({ type: "setCollapsed", id: id, payload: !node.collapsed });
+  };
+
+  const preventDrag = (evt: React.MouseEvent | React.TouchEvent) => {
+    evt.stopPropagation();
+  };
+
+  if (!("root" in node) && visibleChildNodes(state, id).length > 0) {
+    return (
+      <i
+        className={classNames.join(" ")}
+        onMouseDown={preventDrag}
+        onClick={handleClick}
+      />
+    );
+  }
+}

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

@@ -0,0 +1,21 @@
+import * as Tree from "./tree";
+import { visibleChildNodes } from "./usePageTree";
+import usePageTreeContext from "./usePageTreeContext";
+
+type Props = {
+  id: Tree.Id;
+};
+
+export default function CollapsedLabel({ id }: Props) {
+  const { state } = usePageTreeContext();
+  const node = state.nodes[id];
+  const count = visibleChildNodes(state, id).length;
+
+  if (node.collapsed && count > 0) {
+    return (
+      <span className="collapsed-label">
+        ({count} {count == 1 ? "item" : "items"})
+      </span>
+    );
+  }
+}

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

@@ -0,0 +1,68 @@
+import { useState } from "react";
+
+import * as Tree from "./tree";
+import { updatePage } from "./usePageTree";
+import usePageTreeContext from "./usePageTreeContext";
+import Button from "./Button";
+
+type Props = {
+  id: Tree.Id;
+};
+
+export default function EditPageName({ id }: Props) {
+  const { state, dispatch } = usePageTreeContext();
+  const { dir, locale } = state;
+  const node = state.nodes[id];
+  const page = node.record;
+  const [name, setName] = useState(page.blocks.name[locale]);
+
+  const handleCancel = () => {
+    if ("id" in page && page.id) {
+      dispatch({ type: "update", id: id, payload: { editing: false } });
+    } else {
+      dispatch({ type: "remove", id: id });
+    }
+  };
+
+  const handleChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
+    setName(evt.target.value);
+  };
+
+  const handleSubmit = (evt: React.FormEvent) => {
+    evt.preventDefault();
+    updatePage(state, id, dispatch, {
+      blocks: {
+        ...page.blocks,
+        name: { ...page.blocks.name, [locale]: name }
+      },
+      editing: false
+    });
+  };
+
+  return (
+    <div className="page edit">
+      <i className="fa-regular fa-file icon"></i>
+      <form className="edit-name" onSubmit={handleSubmit}>
+        <input
+          className="tight"
+          type="text"
+          value={name}
+          dir={dir}
+          lang={locale}
+          autoFocus
+          onChange={handleChange}
+        />
+        <button className="save primary" type="submit">
+          <i className="fa-solid fa-cloud icon"></i>
+          Save
+        </button>
+        <Button
+          label="Cancel"
+          className="cancel"
+          icon="ban"
+          onClick={handleCancel}
+        />
+      </form>
+    </div>
+  );
+}