pages_core 3.14.0 → 3.15.1

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];
+}

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

@@ -0,0 +1,46 @@
+import { useState } from "react";
+
+import * as PageEditor from "../../types/PageEditor";
+import { unconfiguredBlocks } from "./usePage";
+
+function tabsList(state: PageEditor.State): PageEditor.Tab[] {
+  const { templates, templateConfig } = state;
+  const tabs: PageEditor.Tab[] = [
+    { id: "content", name: "Content", enabled: true }
+  ];
+  if (templates.filter((t) => t.images).length > 0) {
+    tabs.push({ id: "images", name: "Images", enabled: templateConfig.images });
+  }
+  if (templates.filter((t) => t.files).length > 0) {
+    tabs.push({ id: "files", name: "Files", enabled: templateConfig.files });
+  }
+  tabs.push({ id: "metadata", name: "Metadata", enabled: true });
+  if (unconfiguredBlocks(state).length > 0) {
+    tabs.push({
+      id: "unconfigured-content",
+      name: "Unconfigured content",
+      enabled: true
+    });
+  }
+  return tabs;
+}
+
+function initialTab(tabs: PageEditor.Tab[]): string {
+  const tabExpression = /#(.*)$/;
+  if (document.location.toString().match(tabExpression)) {
+    const id = document.location.toString().match(tabExpression)[1];
+    const matchingTab = tabs.filter((t) => t.id == id)[0];
+    if (matchingTab) {
+      return matchingTab.id;
+    }
+  }
+  return tabs[0].id;
+}
+
+export default function useTabs(
+  state: PageEditor.State
+): [PageEditor.Tab[], string, (tab: string) => void] {
+  const tabs = tabsList(state);
+  const [tab, setTab] = useState<string>(initialTab(tabs));
+  return [tabs, tab, setTab];
+}

data/app/javascript/components/PageForm.tsx

@@ -0,0 +1,169 @@
+import React, { useEffect } from "react";
+
+import { putJson, postJson } from "../lib/request";
+import useToastStore from "../stores/useToastStore";
+import * as Pages from "../types/Pages";
+import * as Template from "../types/Template";
+import { Locale } from "../types";
+
+import { openPreview } from "./PageForm/preview";
+import useAttachments from "./Attachments/useAttachments";
+import useImageGrid from "./ImageGrid/useImageGrid";
+import useTags from "./TagEditor/useTags";
+import usePage from "./PageForm/usePage";
+import useTabs from "./PageForm/useTabs";
+import pageParams from "./PageForm/pageParams";
+import Content from "./PageForm/Content";
+import UnconfiguredContent from "./PageForm/UnconfiguredContent";
+import Metadata from "./PageForm/Metadata";
+import Form from "./PageForm/Form";
+import PageDescription from "./PageForm/PageDescription";
+import Options from "./PageForm/Options";
+import Tabs from "./PageForm/Tabs";
+import TabPanel from "./PageForm/TabPanel";
+import Files from "./PageForm/Files";
+import Images from "./PageForm/Images";
+
+interface 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({
+    locales: props.locales,
+    locale: props.locale,
+    page: props.page,
+    templates: props.templates
+  });
+  const { page, locale, locales } = state;
+
+  const filesState = useAttachments(page.page_files);
+  const imagesState = useImageGrid(page.page_images, true);
+  const [tagsState, tagsDispatch] = useTags(
+    page.tags_and_suggestions,
+    page.enabled_tags
+  );
+  const [tabs, tab, setTab] = useTabs(state);
+
+  const errorToast = useToastStore((state) => state.error);
+  const noticeToast = useToastStore((state) => state.notice);
+
+  const params = () => {
+    return pageParams(state, {
+      files: filesState,
+      images: imagesState,
+      tags: tagsState
+    });
+  };
+
+  useEffect(() => {
+    const parentParam = page.parent_page_id
+      ? `?parent=${page.parent_page_id}`
+      : "";
+    const pageUrl =
+      `/admin/${locale}/pages/` +
+      (page.id ? `${page.id}/edit` : `new${parentParam}`) +
+      `#${tab}`;
+    if (history) {
+      history.replaceState(null, "", pageUrl);
+    }
+  }, [page.id, locale, tab]);
+
+  const handlePreview = (evt: React.MouseEvent) => {
+    evt.preventDefault();
+    openPreview(`/${locale}/pages/preview`, {
+      page_id: `${page.id}`,
+      preview_page: JSON.stringify(params())
+    });
+  };
+
+  const clearDeletedObjects = () => {
+    filesState.setDeleted([]);
+    imagesState.setDeleted([]);
+  };
+
+  const handleSubmit = (evt: React.MouseEvent) => {
+    evt.preventDefault();
+    let method = postJson;
+    let url = `/admin/${locale}/pages.json`;
+    const data = {
+      page: pageParams(state, {
+        files: filesState,
+        images: imagesState,
+        tags: tagsState
+      })
+    };
+
+    if (page.id) {
+      method = putJson;
+      url = `/admin/${locale}/pages/${page.id}.json`;
+    }
+
+    method(url, data)
+      .then((response: Pages.SerializedResource) => {
+        dispatch({ type: "setPage", payload: response });
+        if (response.errors && response.errors.length > 0) {
+          errorToast("A validation error prevented the page from being saved.");
+        } else {
+          clearDeletedObjects();
+          noticeToast("Your changes were saved");
+        }
+      })
+      .catch(() => {
+        errorToast("An error occured while saving your changes.");
+      });
+  };
+
+  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>
+          </div>
+        </div>
+      </main>
+      <aside className="sidebar">
+        <Options
+          state={state}
+          dispatch={dispatch}
+          authors={props.authors}
+          statuses={props.statuses}
+        />
+      </aside>
+    </Form>
+  );
+}

data/app/javascript/components/PageImages.tsx

@@ -1,19 +1,17 @@
 import React from "react";
-import { ImageResource, Locale } from "../types";
-import ImageGrid from "./ImageGrid";
 
-interface PageImage {
-  id: number | null;
-  image: ImageResource;
-}
+import * as Images from "../types/Images";
+import { Locale } from "../types";
+
+import ImageGrid from "./ImageGrid";
 
-interface PageImagesProps {
+interface Props {
   locale: string;
   locales: { [index: string]: Locale };
-  records: PageImage[];
+  records: Images.Record[];
 }
 
-export default function PageImages(props: PageImagesProps) {
+export default function PageImages(props: Props) {
   return (
     <div className="page-images">
       <ImageGrid