pages_core 3.13.0 → 3.15.0

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

@@ -0,0 +1,54 @@
+import React from "react";
+
+import * as PageEditor from "../../types/PageEditor";
+import * as Tags from "../../types/Tags";
+import { MaybeLocalizedValue } from "../../types";
+
+import { blockValue, errorsOn } from "./usePage";
+import LabelledField from "../LabelledField";
+import { default as TagEditor } from "../TagEditor/Editor";
+import Block from "./Block";
+import Dates from "./Dates";
+
+interface Props {
+  state: PageEditor.State;
+  dispatch: (action: PageEditor.Action) => void;
+  tagsState: Tags.State;
+  tagsDispatch: (action: Tags.Action) => void;
+}
+
+export default function Content(props: Props) {
+  const { state, dispatch, tagsState, tagsDispatch } = props;
+
+  const { page, locale, inputDir, templateConfig } = state;
+
+  const handleChange = (attr: string) => (value: MaybeLocalizedValue) => {
+    dispatch({ type: "updateBlocks", payload: { [attr]: value } });
+  };
+
+  return (
+    <React.Fragment>
+      {templateConfig.blocks.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)}
+        />
+      ))}
+      {templateConfig.dates && <Dates state={state} dispatch={dispatch} />}
+      {templateConfig.tags && (
+        <LabelledField label="Tags">
+          <TagEditor
+            name="page[serialized_tags]"
+            state={tagsState}
+            dispatch={tagsDispatch}
+          />
+        </LabelledField>
+      )}
+    </React.Fragment>
+  );
+}

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

@@ -0,0 +1,66 @@
+import React from "react";
+
+import * as PageEditor from "../../types/PageEditor";
+
+import DateRangeSelect from "../DateRangeSelect";
+
+interface Props {
+  state: PageEditor.State;
+  dispatch: (action: PageEditor.Action) => void;
+}
+
+export default function Dates(props: Props) {
+  const { state, dispatch } = props;
+  const { datesEnabled, page } = state;
+
+  const toggleAllDay = () => {
+    dispatch({ type: "update", payload: { all_day: !page.all_day } });
+  };
+
+  const toggleDatesEnabled = () => {
+    dispatch({ type: "setDatesEnabled", payload: !datesEnabled });
+  };
+
+  const setDate = (attr: "starts_at" | "ends_at") => (date: Date) => {
+    dispatch({ type: "update", payload: { [attr]: date } });
+  };
+
+  return (
+    <div className="page-dates field">
+      <input
+        type="hidden"
+        name="page[all_day]"
+        value={datesEnabled && page.all_day ? "1" : "0"}
+      />
+      <label>Dates</label>
+      <div className="toggles">
+        <label className="has-dates-toggle">
+          <input
+            type="checkbox"
+            checked={datesEnabled}
+            onChange={toggleDatesEnabled}
+          />
+          Enabled
+        </label>
+        <label className={!datesEnabled && "disabled"}>
+          <input
+            type="checkbox"
+            disabled={!datesEnabled}
+            checked={page.all_day}
+            onChange={toggleAllDay}
+          />
+          All day event
+        </label>
+      </div>
+      <DateRangeSelect
+        objectName="page"
+        startsAt={page.starts_at}
+        setStartsAt={setDate("starts_at")}
+        endsAt={page.ends_at}
+        setEndsAt={setDate("ends_at")}
+        disabled={!datesEnabled}
+        disableTime={page.all_day}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,28 @@
+import React from "react";
+
+import * as Attachments from "../../types/Attachments";
+import { Locale } from "../../types";
+
+import List from "../Attachments/List";
+
+interface Props {
+  locale: string;
+  locales: { [index: string]: Locale };
+  state: Attachments.State;
+}
+
+export default function Files(props: Props) {
+  const { locale, locales, state } = props;
+
+  return (
+    <div className="page-files">
+      <List
+        attribute="page[page_files_attributes]"
+        showEmbed={true}
+        locale={locale}
+        locales={locales}
+        state={state}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,41 @@
+import React from "react";
+
+import { csrfToken } from "../../lib/request";
+import * as PageEditor from "../../types/PageEditor";
+
+interface FormProps {
+  state: PageEditor.State;
+  children: React.ReactNode;
+}
+
+function pageUrl(state: PageEditor.State): string {
+  if (state.page.id) {
+    return `/admin/${state.locale}/pages/${state.page.id}`;
+  } else {
+    return `/admin/${state.locale}/pages`;
+  }
+}
+
+export default function Form(props: FormProps) {
+  const { state, children } = props;
+  const { page } = state;
+
+  return (
+    <form
+      className="edit-page main-wrapper"
+      method="post"
+      acceptCharset="UTF-8"
+      action={pageUrl(state)}>
+      {page.id && (
+        <input type="hidden" name="_method" value="put" autoComplete="off" />
+      )}
+      <input
+        type="hidden"
+        autoComplete="off"
+        name="authenticity_token"
+        value={csrfToken()}
+      />
+      {children}
+    </form>
+  );
+}

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

@@ -0,0 +1,28 @@
+import React from "react";
+
+import { GridState } from "../../types/Images";
+import { Locale } from "../../types";
+
+import Grid from "../ImageGrid/Grid";
+
+interface Props {
+  locale: string;
+  locales: { [index: string]: Locale };
+  state: GridState;
+}
+
+export default function Images(props: Props) {
+  return (
+    <div className="page-images">
+      <Grid
+        attribute="page[page_images_attributes]"
+        primaryAttribute="page[image_id]"
+        enablePrimary={true}
+        showEmbed={true}
+        locale={props.locale}
+        locales={props.locales}
+        state={props.state}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,36 @@
+import React from "react";
+
+import * as PageEditor from "../../types/PageEditor";
+
+interface Props {
+  state: PageEditor.State;
+  dispatch: (action: PageEditor.Action) => void;
+}
+
+export default function LocaleLinks(props: Props) {
+  const { state, dispatch } = props;
+  const { locale, locales } = state;
+
+  const handleClick = (newLocale: string) => (evt: React.MouseEvent) => {
+    evt.preventDefault();
+    dispatch({ type: "setLocale", payload: newLocale });
+  };
+
+  if (!locales) {
+    return "";
+  }
+
+  return (
+    <div className="links">
+      {Object.keys(locales).map((l) => (
+        <a
+          key={l}
+          className={locale == l ? "current" : ""}
+          href="#"
+          onClick={handleClick(l)}>
+          {locales[l].name}
+        </a>
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,67 @@
+import React from "react";
+
+import * as PageEditor from "../../types/PageEditor";
+import * as Pages from "../../types/Pages";
+import { MaybeLocalizedValue } from "../../types";
+
+import { blockValue, errorsOn } from "./usePage";
+import Block from "./Block";
+import PathSegment from "./PathSegment";
+import LabelledField from "../LabelledField";
+import ImageUploader from "../ImageUploader";
+
+interface Props {
+  state: PageEditor.State;
+  dispatch: (action: PageEditor.Action) => void;
+}
+
+export default function Metadata(props: Props) {
+  const { state, dispatch } = props;
+
+  const { page, locale, locales, inputDir, templateConfig } = state;
+
+  const handleChange = (attr: string) => (value: MaybeLocalizedValue) => {
+    dispatch({ type: "updateBlocks", payload: { [attr]: value } });
+  };
+
+  const handleMetaImage = (value: Pages.MetaImage) => {
+    dispatch({ type: "update", payload: { meta_image: value } });
+  };
+
+  return (
+    <React.Fragment>
+      <PathSegment state={state} dispatch={dispatch} />
+      <LabelledField
+        htmlFor="page_meta_image_id"
+        label="Image"
+        description={
+          "Image displayed when sharing on social media. " +
+          "Will fall back to the primary image if absent. " +
+          "Recommended size is at least 1200x630."
+        }
+        errors={errorsOn(page, "meta_image_id")}>
+        <ImageUploader
+          attr="page[meta_image_id]"
+          locale={locale}
+          locales={locales}
+          image={page.meta_image.image}
+          src={page.meta_image.src}
+          onChange={handleMetaImage}
+          width={250}
+          caption={false}
+        />
+      </LabelledField>
+      {templateConfig.metadata_blocks.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/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>
+  );
+}