pages_core 3.14.0 → 3.15.0

data/app/javascript/components/ImageGrid/useImageGrid.ts

@@ -0,0 +1,26 @@
+import { useState } from "react";
+
+import * as Images from "../../types/Images";
+
+import { useDragCollection } from "../drag";
+
+export default function useImageGrid(
+  records: Images.Record[],
+  enablePrimary = false
+): Images.GridState {
+  const primaryRecords = enablePrimary
+    ? records.filter((r) => r.primary).slice(0, 1)
+    : [];
+  const imageRecords = records.filter((r) => primaryRecords.indexOf(r) === -1);
+
+  const primary = useDragCollection(primaryRecords);
+  const images = useDragCollection(imageRecords);
+  const [deleted, setDeleted] = useState<Images.Record[]>([]);
+
+  return {
+    primary: primary,
+    images: images,
+    deleted: deleted,
+    setDeleted: setDeleted
+  };
+}

data/app/javascript/components/ImageGrid.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+import * as Images from "../types/Images";
+import useImageGrid from "./ImageGrid/useImageGrid";
+import Grid from "./ImageGrid/Grid";
+
+interface Props extends Images.GridOptions {
+  records: Images.Record[];
+}
+
+export default function ImageGrid(props: Props) {
+  const state = useImageGrid(props.records, props.showEmbed);
+
+  return <Grid state={state} {...props} />;
+}

data/app/javascript/components/ImageUploader.tsx

@@ -1,21 +1,28 @@
-import React, { useState } from "react";
-import EditableImage from "./EditableImage";
-import FileUploadButton from "./FileUploadButton";
+import React, { DragEvent, MouseEvent, useState } from "react";
+
 import useToastStore from "../stores/useToastStore";
-import { ImageResource, Locale } from "../types";
 import { post } from "../lib/request";
+import * as Images from "../types/Images";
+import { Locale } from "../types";
 
-type ImageResponse = ImageResource | { status: "error"; error: string };
+import EditableImage from "./EditableImage";
+import FileUploadButton from "./FileUploadButton";
 
-interface ImageUploaderProps {
+interface Props {
   locale: string;
   locales: { [index: string]: Locale };
-  image: ImageResource;
+  image: Images.Resource;
   src: string;
   width: number;
   caption: boolean;
   attr: string;
-  alternative: string;
+  alternative?: string;
+  onChange?: (state: State) => void;
+}
+
+interface State {
+  image?: Images.Resource;
+  src?: string;
 }
 
 function getFiles(dt: DataTransfer): File[] {
@@ -34,14 +41,23 @@ function getFiles(dt: DataTransfer): File[] {
   return files;
 }
 
-export default function ImageUploader(props: ImageUploaderProps) {
+export default function ImageUploader(props: Props) {
   const [uploading, setUploading] = useState(false);
   const [dragover, setDragover] = useState(false);
-  const [image, setImage] = useState(props.image);
-  const [src, setSrc] = useState(props.src);
+  const [state, setState] = useState<State>({
+    image: props.image,
+    src: props.src
+  });
+  const { image, src } = props.onChange ? props : state;
+
   const error = useToastStore((state) => state.error);
 
-  const handleDragOver = (evt: Event) => {
+  const update = (image: Images.Resource | null, src?: string) => {
+    const handler = props.onChange || setState;
+    handler({ image: image, src: src || null });
+  };
+
+  const handleDragOver = (evt: DragEvent) => {
     evt.preventDefault();
     setDragover(true);
   };
@@ -50,7 +66,7 @@ export default function ImageUploader(props: ImageUploaderProps) {
     setDragover(false);
   };
 
-  const handleDragEnd = (evt: Event) => {
+  const handleDragEnd = (evt: DragEvent) => {
     if ("dataTransfer" in evt) {
       if ("items" in evt.dataTransfer && "remove" in evt.dataTransfer.items) {
         for (let i = 0; i < evt.dataTransfer.items.length; i++) {
@@ -63,7 +79,7 @@ export default function ImageUploader(props: ImageUploaderProps) {
     setDragover(false);
   };
 
-  const handleDrop = (evt: Event) => {
+  const handleDrop = (evt: DragEvent) => {
     let files: File[] = [];
     if ("dataTransfer" in evt) {
       files = getFiles(evt.dataTransfer);
@@ -74,10 +90,9 @@ export default function ImageUploader(props: ImageUploaderProps) {
     }
   };
 
-  const handleRemove = (evt: Event) => {
+  const handleRemove = (evt: MouseEvent) => {
     evt.preventDefault();
-    setImage(null);
-    setSrc(null);
+    update(null);
   };
 
   const receiveFiles = (files: File[]) => {
@@ -108,8 +123,7 @@ export default function ImageUploader(props: ImageUploaderProps) {
 
     const data = new FormData();
 
-    setImage(null);
-    setSrc(null);
+    update(null);
     setDragover(false);
     setUploading(true);
 
@@ -118,13 +132,12 @@ export default function ImageUploader(props: ImageUploaderProps) {
       data.append(`image[alternative][${l}]`, props.alternative || "");
     });
 
-    void post("/admin/images.json", data).then((response: ImageResponse) => {
+    void post("/admin/images.json", data).then((response: Images.Response) => {
       setUploading(false);
       if ("status" in response && response.status === "error") {
         error(`Error uploading image: ${response.error}`);
       } else if ("thumbnail_url" in response) {
-        setSrc(response.thumbnail_url);
-        setImage(response);
+        update(response, response.thumbnail_url);
       }
     });
   };

data/app/javascript/components/LabelledField.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+
+interface LabelledFieldProps {
+  label: string;
+  children: React.ReactNode;
+  htmlFor?: string;
+  description?: string;
+  errors?: string[];
+}
+
+export default function LabelledField(props: LabelledFieldProps) {
+  const { htmlFor, description, label, errors, children } = props;
+
+  const classNames = ["field"];
+  if (errors && errors.length > 0) {
+    classNames.push("field-with-errors");
+  }
+
+  return (
+    <div className={classNames.join(" ")}>
+      <label htmlFor={htmlFor}>
+        {label}
+        {errors && (
+          <React.Fragment>
+            {" "}
+            <span className="error">{errors[errors.length - 1]}</span>
+          </React.Fragment>
+        )}
+      </label>
+      {description && <p className="description">{description}</p>}
+      {children}
+    </div>
+  );
+}

data/app/javascript/components/Modal.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { MouseEvent, useEffect } from "react";
 
 import useModalStore from "../stores/useModalStore";
 
@@ -6,7 +6,7 @@ export default function Modal() {
   const component = useModalStore((state) => state.component);
   const close = useModalStore((state) => state.close);
 
-  const handleClose = (evt: Event) => {
+  const handleClose = (evt: KeyboardEvent | MouseEvent) => {
     evt.stopPropagation();
     evt.preventDefault();
     close();

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

@@ -0,0 +1,81 @@
+import React, { ChangeEvent } from "react";
+
+import * as Template from "../../types/Template";
+
+import LabelledField from "../LabelledField";
+import RichTextArea from "../RichTextArea";
+
+interface Props {
+  block: Template.Block;
+  errors: string[];
+  onChange: (value: string) => void;
+  lang: string;
+  dir: string;
+  value: string;
+}
+
+export default function Block(props: Props) {
+  const { block, errors, onChange, lang, dir, value } = props;
+
+  const handleChange = (
+    evt: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLSelectElement>
+  ) => {
+    onChange(evt.target.value);
+  };
+
+  const id = `page_${block.name}`;
+
+  const commonOptions = {
+    id: id,
+    name: `page[${block.name}]`,
+    value: value
+  };
+
+  const textFieldOptions = {
+    ...commonOptions,
+    className: ["rich", block.class].join(" ").trim(),
+    lang: lang,
+    dir: dir,
+    placeholder: block.placeholder
+  };
+
+  let field: React.ReactNode;
+  if (block.type == "select") {
+    const options = block.options;
+
+    // Ensure the current value is part of the options
+    if (options.map((o) => o[1]).indexOf(value) === -1) {
+      options.push([value, value]);
+    }
+
+    field = (
+      <select onChange={handleChange} {...commonOptions}>
+        {options.map((opt) => (
+          <option key={opt[1]} value={opt[1]}>
+            {opt[0]}
+          </option>
+        ))}
+      </select>
+    );
+  } else if (block.size == "field") {
+    field = <input type="text" onChange={handleChange} {...textFieldOptions} />;
+  } else {
+    field = (
+      <RichTextArea
+        onChange={onChange}
+        rows={block.size == "large" ? 15 : 5}
+        {...textFieldOptions}
+      />
+    );
+  }
+
+  return (
+    <LabelledField
+      htmlFor={id}
+      label={block.title}
+      description={block.description}
+      errors={errors}>
+      {field}
+    </LabelledField>
+  );
+}

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