pages_core 3.14.0 → 3.15.0

data/app/javascript/components/PageForm/Options.tsx

@@ -0,0 +1,180 @@
+import React, { useState, ChangeEvent } from "react";
+
+import * as PageEditor from "../../types/PageEditor";
+import * as Pages from "../../types/Pages";
+import LabelledField from "../LabelledField";
+import DateTimeSelect from "../DateTimeSelect";
+import { errorsOn } from "./usePage";
+
+interface OptionsProps {
+  state: PageEditor.State;
+  dispatch: (action: PageEditor.Action) => void;
+  authors: Pages.Author[];
+  statuses: Pages.StatusLabels;
+}
+
+export default function Options(props: OptionsProps) {
+  const { state, dispatch, authors, statuses } = props;
+
+  const { page, locale, templates } = state;
+
+  const [showAdvanced, setShowAdvanced] = useState(false);
+
+  const published = page.status == 2;
+  const autopublish = published && page.published_at > new Date();
+  const url = page.urls[locale];
+
+  const handleChange =
+    (attr: string) =>
+    (evt: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLSelectElement>) => {
+      dispatch({ type: "update", payload: { [attr]: evt.target.value } });
+    };
+
+  const handleChecked =
+    (attr: string) => (evt: ChangeEvent<HTMLInputElement>) => {
+      dispatch({ type: "update", payload: { [attr]: evt.target.checked } });
+    };
+
+  const changePublishedAt = (value: Date) => {
+    dispatch({ type: "update", payload: { published_at: value } });
+  };
+
+  const toggleAdvanced = (evt: React.MouseEvent) => {
+    evt.preventDefault();
+    setShowAdvanced(!showAdvanced);
+  };
+
+  return (
+    <div className="page-options">
+      <LabelledField
+        htmlFor="page_status"
+        label="Status"
+        errors={errorsOn(page, "status")}>
+        <select
+          id="page_status"
+          name="page[status]"
+          onChange={handleChange("status")}
+          value={page.status}>
+          {Object.keys(statuses).map((id) => (
+            <option key={id} value={id}>
+              {statuses[id]}
+            </option>
+          ))}
+        </select>
+      </LabelledField>
+      {published && (
+        <div>
+          <LabelledField label="Date" errors={errorsOn(page, "published_at")}>
+            <DateTimeSelect
+              name={"page[published_at]"}
+              onChange={changePublishedAt}
+              value={page.published_at}
+            />
+          </LabelledField>
+          {autopublish && <p>This page will publish later</p>}
+        </div>
+      )}
+      <LabelledField
+        htmlFor="page_user_id"
+        label="Author"
+        errors={errorsOn(page, "user_id")}>
+        <select
+          id="page_user_id"
+          name="page[user_id]"
+          onChange={handleChange("user_id")}
+          value={page.user_id}>
+          {authors.map((u) => (
+            <option key={u[1]} value={u[1]}>
+              {u[0]}
+            </option>
+          ))}
+        </select>
+      </LabelledField>
+      <LabelledField label="Pin to top">
+        <label className="check-box">
+          <input
+            name="page[pinned]"
+            type="checkbox"
+            onChange={handleChecked("pinned")}
+            checked={page.pinned}
+          />{" "}
+          Make post featured
+        </label>
+      </LabelledField>
+      <LabelledField
+        htmlFor="page_template"
+        label="Template"
+        errors={errorsOn(page, "template")}>
+        <select
+          id="page_template"
+          name="page[template]"
+          onChange={handleChange("template")}
+          value={page.template}>
+          {templates.map((t) => (
+            <option key={t.template_name} value={t.template_name}>
+              {t.name}
+            </option>
+          ))}
+        </select>
+      </LabelledField>
+      <p>
+        <a href="#" onClick={toggleAdvanced}>
+          Advanced options
+        </a>
+      </p>
+      {showAdvanced && (
+        <React.Fragment>
+          <LabelledField label="Subpages">
+            <label className="check-box">
+              <input
+                name="page[feed_enabled]"
+                type="checkbox"
+                onChange={handleChecked("feed_enabled")}
+                checked={page.feed_enabled}
+              />{" "}
+              RSS feed enabled
+            </label>
+            <label className="check-box">
+              <input
+                name="page[news_page]"
+                type="checkbox"
+                onChange={handleChecked("news_page")}
+                checked={page.news_page}
+              />{" "}
+              Show in news
+            </label>
+          </LabelledField>
+          <LabelledField
+            htmlFor="page_unique_name"
+            label="Unique name"
+            errors={errorsOn(page, "unique_name")}>
+            <input
+              type="text"
+              id="page_unique_name"
+              name="page[unique_name]"
+              value={page.unique_name}
+              onChange={handleChange("unique_name")}
+            />
+          </LabelledField>
+          <LabelledField
+            htmlFor="page_redirect_to"
+            label="Redirect"
+            errors={errorsOn(page, "redirect_to")}>
+            <input
+              type="text"
+              id="page_redirect_to"
+              name="page[redirect_to]"
+              value={page.redirect_to}
+              onChange={handleChange("redirect_to")}
+            />
+          </LabelledField>
+        </React.Fragment>
+      )}
+      {url && (
+        <LabelledField label="Page link">
+          <a href={url}>{url}</a>
+        </LabelledField>
+      )}
+    </div>
+  );
+}

data/app/javascript/components/PageForm/PageDescription.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+
+import * as PageEditor from "../../types/PageEditor";
+import * as Pages from "../../types/Pages";
+
+import LocaleLinks from "./LocaleLinks";
+
+interface PageDescriptionProps {
+  state: PageEditor.State;
+  dispatch: (action: PageEditor.Action) => void;
+  children: React.ReactNode;
+}
+
+function editLink(locale: string, page: Pages.Ancestor | Pages.Resource) {
+  return (
+    <a href={`/admin/${locale}/pages/${page.id}/edit`}>
+      {pageName(locale, page)}
+    </a>
+  );
+}
+
+function pageName(locale: string, page: Pages.Ancestor | Pages.Resource) {
+  if ("name" in page) {
+    return page.name[locale];
+  }
+  return page.blocks.name[locale] || <i>Untitled</i>;
+}
+
+export default function PageDescription(props: PageDescriptionProps) {
+  const { state, dispatch, children } = props;
+  const { locale, page } = state;
+
+  return (
+    <div className="page-description with_content_tabs">
+      <LocaleLinks state={state} dispatch={dispatch} />
+      <h3>
+        {page.ancestors.map((p) => (
+          <React.Fragment key={p.id}>
+            {editLink(locale, p)}
+            {" » "}
+          </React.Fragment>
+        ))}
+        {page.id ? editLink(locale, page) : "New Page"}
+      </h3>
+      {children}
+    </div>
+  );
+}

data/app/javascript/components/PageForm/PathSegment.tsx

@@ -0,0 +1,65 @@
+import React, { ChangeEvent } from "react";
+
+import * as PageEditor from "../../types/PageEditor";
+import * as Pages from "../../types/Pages";
+import { LocalizedValue } from "../../types";
+
+import { errorsOn } from "./usePage";
+import LabelledField from "../LabelledField";
+
+interface Props {
+  state: PageEditor.State;
+  dispatch: (action: PageEditor.Action) => void;
+}
+
+function missingPathSegment(ancestors: Pages.Ancestor[], locale: string) {
+  for (let i = 0; i < ancestors.length; i++) {
+    if (!ancestors[i].path_segment[locale]) {
+      return ancestors[i];
+    }
+  }
+  return null;
+}
+
+export default function PathSegment(props: Props) {
+  const { state, dispatch } = props;
+  const { page, locale } = state;
+
+  const value = (page.path_segment as LocalizedValue)[locale];
+
+  const handleChange = (evt: ChangeEvent<HTMLInputElement>) => {
+    dispatch({ type: "update", payload: { path_segment: evt.target.value } });
+  };
+
+  const editAncestor = missingPathSegment(page.ancestors, locale);
+
+  if (editAncestor) {
+    const editUrl = `/admin/${locale}/pages/${editAncestor.id}/edit#metadata`;
+    return (
+      <LabelledField label="Path segment">
+        <p className="description">
+          Unable to add a path segment to this page, please add one to{" "}
+          <a href={editUrl}>this page&apos;s ancestor</a> first.
+        </p>
+      </LabelledField>
+    );
+  }
+
+  return (
+    <LabelledField
+      htmlFor="page_path_segment"
+      label="Path segment"
+      description="Only alpanumeric characters and dashes are allowed."
+      errors={errorsOn(page, "path_segment")}>
+      <input
+        type="text"
+        id="page_path_segment"
+        name="page[path_segment]"
+        lang={state.locale}
+        dir="ltr"
+        onChange={handleChange}
+        value={value}
+      />
+    </LabelledField>
+  );
+}

data/app/javascript/components/PageForm/TabPanel.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+interface TabPanelProps {
+  active: boolean;
+  children: React.ReactNode;
+}
+
+export default function TabPanel(props: TabPanelProps) {
+  const { active, children } = props;
+
+  const classNames = ["content-tab"];
+  if (!active) {
+    classNames.push("hidden");
+  }
+
+  return (
+    <div className={classNames.join(" ")} role="tabpanel">
+      {children}
+    </div>
+  );
+}

data/app/javascript/components/PageForm/Tabs.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+
+import * as PageEditor from "../../types/PageEditor";
+
+interface Props {
+  tab: string;
+  tabs: PageEditor.Tab[];
+  setTab: (tab: string) => void;
+}
+
+export default function Tabs(props: Props) {
+  const { tab, tabs, setTab } = props;
+
+  const handleTabChange = (tab: PageEditor.Tab) => (evt: React.MouseEvent) => {
+    evt.preventDefault();
+    setTab(tab.id);
+  };
+
+  return (
+    <ul className="content-tabs" role="tablist">
+      {tabs.map((t) => (
+        <li key={t.id} className={t.id == tab ? "current" : ""}>
+          {!t.enabled && t.name}
+          {t.enabled && (
+            <a href={`#${t.id}`} onClick={handleTabChange(t)}>
+              {t.name}
+            </a>
+          )}
+        </li>
+      ))}
+    </ul>
+  );
+}

data/app/javascript/components/PageForm/UnconfiguredContent.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+
+import * as PageEditor from "../../types/PageEditor";
+import { MaybeLocalizedValue } from "../../types";
+import { blockValue, errorsOn, unconfiguredBlocks } from "./usePage";
+
+import Block from "./Block";
+
+interface Props {
+  state: PageEditor.State;
+  dispatch: (action: PageEditor.Action) => void;
+}
+
+export default function UnconfiguredContent(props: Props) {
+  const { state, dispatch } = props;
+
+  const { page, locale, inputDir } = state;
+
+  const handleChange = (attr: string) => (value: MaybeLocalizedValue) => {
+    dispatch({ type: "updateBlocks", payload: { [attr]: value } });
+  };
+
+  return (
+    <React.Fragment>
+      <p>
+        This page has additional content fields not enabled by the selected
+        template.
+      </p>
+      {unconfiguredBlocks(state).map((b) => (
+        <Block
+          key={b.name}
+          block={b}
+          errors={errorsOn(page, b.name)}
+          dir={inputDir}
+          lang={locale}
+          onChange={handleChange(b.name)}
+          value={blockValue(state, b)}
+        />
+      ))}
+    </React.Fragment>
+  );
+}

data/app/javascript/components/PageForm/pageParams.ts

@@ -0,0 +1,95 @@
+import * as Attachments from "../../types/Attachments";
+import * as Drag from "../../types/Drag";
+import * as PageEditor from "../../types/PageEditor";
+import * as Images from "../../types/Images";
+import * as Tags from "../../types/Tags";
+
+interface Options {
+  files: Attachments.State;
+  images: Images.GridState;
+  tags: Tags.State;
+}
+
+function dates(state: PageEditor.State) {
+  if (state.datesEnabled) {
+    return {
+      all_day: state.page.all_day,
+      starts_at: state.page.starts_at,
+      ends_at: state.page.ends_at
+    };
+  } else {
+    return {
+      all_day: false,
+      starts_at: null,
+      ends_at: null
+    };
+  }
+}
+
+function pageFiles(state: Attachments.State) {
+  const files = state.collection.draggables
+    .filter((r) => r !== "Files")
+    .map((r: Drag.Draggable<Attachments.Record>, i: number) => {
+      const a = r.record;
+      return { id: a.id, attachment_id: a.attachment.id, position: i + 1 };
+    });
+  const deleted = state.deleted.map((a) => {
+    return { id: a.id, attachment_id: a.attachment.id, _destroy: "true" };
+  });
+  return [...files, ...deleted];
+}
+
+function pageImages(state: Images.GridState) {
+  const primary = state.primary.draggables
+    .filter((r) => r !== "Files")
+    .map((r: Drag.Draggable<Images.Record>, i: number) => {
+      const pi = r.record;
+      return {
+        id: pi.id,
+        image_id: pi.image.id,
+        primary: true,
+        position: i + 1
+      };
+    });
+  const images = state.images.draggables
+    .filter((r) => r !== "Files")
+    .map((r: Drag.Draggable<Images.Record>, i: number) => {
+      const pi = r.record;
+      return {
+        id: pi.id,
+        image_id: pi.image.id,
+        primary: false,
+        position: primary.length + i + 1
+      };
+    });
+
+  const deleted = state.deleted.map((i) => {
+    return { id: i.id, image_id: i.image.id, _destroy: "true" };
+  });
+  return [...primary, ...images, ...deleted];
+}
+
+export default function pageParams(state: PageEditor.State, options: Options) {
+  const { files, images, tags } = options;
+  const { page } = state;
+
+  return {
+    ...dates(state),
+    ...page.blocks,
+    status: page.status,
+    published_at: page.published_at,
+    pinned: page.pinned,
+    template: page.template,
+    unique_name: page.unique_name,
+    feed_enabled: page.feed_enabled,
+    news_page: page.news_page,
+    user_id: page.user_id,
+    redirect_to: page.redirect_to,
+    serialized_tags: JSON.stringify(tags.enabled),
+    path_segment: page.path_segment,
+    meta_image_id: page.meta_image.image && page.meta_image.image.id,
+    parent_page_id: page.parent_page_id,
+    page_files_attributes: pageFiles(files),
+    page_images_attributes: pageImages(images)
+  };
+}

data/app/javascript/components/PageForm/preview.ts

@@ -0,0 +1,23 @@
+import { csrfToken } from "../../lib/request";
+
+function buildForm(url: string, body: Record<string, string>) {
+  const form = document.createElement("form");
+  form.action = url;
+  form.method = "POST";
+  form.target = "_blank";
+  for (const [name, value] of Object.entries(body)) {
+    const input = document.createElement("input");
+    input.type = "hidden";
+    input.name = name;
+    input.value = value;
+    form.appendChild(input);
+  }
+  return form;
+}
+
+export function openPreview(url: string, body: Record<string, string>) {
+  const form = buildForm(url, { authenticity_token: csrfToken(), ...body });
+  document.body.appendChild(form);
+  form.submit();
+  document.body.removeChild(form);
+}

data/app/javascript/components/PageForm/usePage.ts

@@ -0,0 +1,169 @@
+import { useReducer } from "react";
+
+import * as PageEditor from "../../types/PageEditor";
+import * as Pages from "../../types/Pages";
+import * as Template from "../../types/Template";
+import { LocalizedValue, MaybeLocalizedValue } from "../../types";
+
+export function blockValue(
+  state: PageEditor.State,
+  block: Template.Block
+): string {
+  if (block.localized) {
+    const value: LocalizedValue =
+      (state.page.blocks[block.name] as LocalizedValue) || {};
+
+    return value[state.locale] || "";
+  } else {
+    return (state.page.blocks[block.name] as string) || "";
+  }
+}
+
+export function errorsOn(page: Pages.Resource, attribute: string): string[] {
+  return page.errors
+    .filter((e) => e.attribute === attribute)
+    .map((e) => e.message);
+}
+
+export function unconfiguredBlocks(state: PageEditor.State): Template.Block[] {
+  const allBlocks: Record<string, Template.Block> = state.templates
+    .flatMap((t) => t.blocks)
+    .reduce((bs, b) => ({ [b.name]: b, ...bs }), {});
+
+  const anyValue = (v: MaybeLocalizedValue) => {
+    if (typeof v === "string") {
+      return v ? true : false;
+    } else {
+      return Object.values(v).filter((v) => v).length > 0;
+    }
+  };
+
+  const hasValue = Object.keys(allBlocks).filter((k) => {
+    const value = state.page.blocks[k] || "";
+    return anyValue(value);
+  });
+
+  const enabled = state.templateConfig.blocks.map((b) => b.name);
+
+  return hasValue
+    .filter((b) => enabled.indexOf(b) === -1)
+    .map((n) => allBlocks[n]);
+}
+
+function parseDate(str: string): Date | null {
+  if (!str) {
+    return null;
+  } else if (typeof str === "string") {
+    return new Date(str);
+  } else {
+    return str;
+  }
+}
+
+function derivedState(state: PageEditor.State): PageEditor.State {
+  const { locale, locales, page, templates } = state;
+  return {
+    ...state,
+    inputDir: (locales && locales[locale] && locales[locale].dir) || "ltr",
+    templateConfig: templates.filter(
+      (t) => t.template_name === page.template
+    )[0]
+  };
+}
+
+function parsedDates(page: Pages.SerializedResource) {
+  return {
+    published_at: parseDate(page.published_at),
+    starts_at: parseDate(page.starts_at),
+    ends_at: parseDate(page.ends_at)
+  };
+}
+
+function localizedAttributes(templates: Template.Config[]): string[] {
+  const allBlocks = (t: Template.Config): Template.Block[] => {
+    return [...t.blocks, ...t.metadata_blocks];
+  };
+
+  const blockNames = templates
+    .map(allBlocks)
+    .reduce((acc, val) => acc.concat(val), [])
+    .filter((b) => b.localized)
+    .map((b) => b.name)
+    .filter((value, index, array) => array.indexOf(value) === index);
+
+  return ["path_segment", ...blockNames];
+}
+
+function prepare(
+  state: PageEditor.State<Pages.SerializedResource>
+): PageEditor.State {
+  const page = { ...state.page, ...parsedDates(state.page) };
+  return { ...state, page: page, datesEnabled: page.starts_at ? true : false };
+}
+
+function reducer(
+  state: PageEditor.State,
+  action: PageEditor.Action
+): PageEditor.State {
+  const { type, payload } = action;
+  switch (type) {
+    case "setPage":
+      return prepare({ ...state, page: payload });
+    case "setDatesEnabled":
+      return { ...state, datesEnabled: payload };
+    case "setLocale":
+      return { ...state, locale: payload };
+    case "update":
+      return updatePage(state, payload);
+    case "updateBlocks":
+      return updatePageBlocks(state, payload);
+    default:
+      return state;
+  }
+}
+
+function updateLocalized<T>(
+  state: PageEditor.State,
+  obj: T,
+  attributes: Partial<T>
+): T {
+  const { locale, templates } = state;
+  const nextObj = {};
+
+  Object.keys(attributes).forEach((attr: string) => {
+    const value = attributes[attr] as MaybeLocalizedValue;
+    if (localizedAttributes(templates).indexOf(attr) !== -1) {
+      nextObj[attr] = { ...obj[attr], [locale]: value } as LocalizedValue;
+    } else {
+      nextObj[attr] = value;
+    }
+  });
+
+  return { ...obj, ...nextObj };
+}
+
+function updatePageBlocks(
+  state: PageEditor.State,
+  attributes: Partial<Pages.Blocks>
+): PageEditor.State {
+  const { page } = state;
+
+  return {
+    ...state,
+    page: { ...page, blocks: updateLocalized(state, page.blocks, attributes) }
+  };
+}
+
+function updatePage(
+  state: PageEditor.State,
+  attributes: Partial<Pages.Resource>
+): PageEditor.State {
+  return { ...state, page: updateLocalized(state, state.page, attributes) };
+}
+
+export default function usePage(
+  initialState: PageEditor.State<Pages.SerializedResource>
+): [PageEditor.State, (action: PageEditor.Action) => void] {
+  const [state, dispatch] = useReducer(reducer, prepare(initialState));
+  return [derivedState(state), dispatch];
+}