pages_core 3.12.3 → 3.12.5

data/app/javascript/components/Attachments/Attachment.tsx

@@ -8,22 +8,22 @@ import { AttachmentResource, Locale } from "../../types";
 import { useDraggable, Draggable } from "../drag";
 
 interface Record {
-  id: number | null,
-  attachment: AttachmentResource,
-  uploading: boolean
+  id: number | null;
+  attachment: AttachmentResource;
+  uploading: boolean;
 }
 
 interface AttachmentProps {
-  attributeName: string,
-  placeholder: boolean,
-  draggable: { record: Record },
-  locale: string,
-  locales: { [index: string]: Locale },
-  deleteRecord: () => void,
-  showEmbed: boolean,
-  position: number,
-  onUpdate: (localizations: Record<string, Record<string, string>>) => void,
-  startDrag: (evt: Event, draggable: Draggable) => void
+  attributeName: string;
+  placeholder: boolean;
+  draggable: { record: Record };
+  locale: string;
+  locales: { [index: string]: Locale };
+  deleteRecord: () => void;
+  showEmbed: boolean;
+  position: number;
+  onUpdate: (localizations: Record<string, Record<string, string>>) => void;
+  startDrag: (evt: Event, draggable: Draggable) => void;
 }
 
 export default function Attachment(props: AttachmentProps) {
@@ -70,7 +70,8 @@ export default function Attachment(props: AttachmentProps) {
         attachment={attachment}
         locale={locale}
         locales={locales}
-        onUpdate={props.onUpdate} />
+        onUpdate={props.onUpdate}
+      />
     );
   };
 
@@ -90,44 +91,46 @@ export default function Attachment(props: AttachmentProps) {
   }
 
   return (
-    <div className={classes.join(" ")}
-         {...listeners}>
-      <input name={`${attributeName}[id]`}
-             type="hidden" value={record.id || ""} />
-      <input name={`${attributeName}[attachment_id]`}
-             type="hidden" value={(attachment && attachment.id) || ""} />
-      <input name={`${attributeName}[position]`}
-             type="hidden" value={props.position} />
-      {!uploading &&
-       <div className="actions">
-         <button onClick={editAttachment}>
-           Edit
-         </button>
-         {props.showEmbed && (
-           <button onClick={copyEmbed}>
-             Embed
-           </button>
-         )}
-         {props.deleteRecord && (
-           <button onClick={deleteRecord}>
-             Remove
-           </button>
-         )}
-       </div>
-      }
-    {attachment &&
-     <div className="attachment-info">
-       <h3>
-         <i className={`fa-solid fa-${icon} icon`} />
-         {name() || <em>Untitled</em>}<br />
-       </h3>
-       {!uploading &&
-        <a href={attachment.url}
-           rel="noreferrer"
-           target="_blank">{attachment.filename}</a>}
-       {!uploading && description() &&
-        <p dir={localeDir}>{description()}</p>}
-     </div>}
+    <div className={classes.join(" ")} {...listeners}>
+      <input
+        name={`${attributeName}[id]`}
+        type="hidden"
+        value={record.id || ""}
+      />
+      <input
+        name={`${attributeName}[attachment_id]`}
+        type="hidden"
+        value={(attachment && attachment.id) || ""}
+      />
+      <input
+        name={`${attributeName}[position]`}
+        type="hidden"
+        value={props.position}
+      />
+      {!uploading && (
+        <div className="actions">
+          <button onClick={editAttachment}>Edit</button>
+          {props.showEmbed && <button onClick={copyEmbed}>Embed</button>}
+          {props.deleteRecord && <button onClick={deleteRecord}>Remove</button>}
+        </div>
+      )}
+      {attachment && (
+        <div className="attachment-info">
+          <h3>
+            <i className={`fa-solid fa-${icon} icon`} />
+            {name() || <em>Untitled</em>}
+            <br />
+          </h3>
+          {!uploading && (
+            <a href={attachment.url} rel="noreferrer" target="_blank">
+              {attachment.filename}
+            </a>
+          )}
+          {!uploading && description() && (
+            <p dir={localeDir}>{description()}</p>
+          )}
+        </div>
+      )}
     </div>
   );
 }

data/app/javascript/components/Attachments/AttachmentEditor.tsx

@@ -6,10 +6,10 @@ import { AttachmentResource, Locale } from "../../types";
 import { putJson } from "../../lib/request";
 
 interface AttachmentEditorProps {
-  attachment: AttachmentResource,
-  locale: string,
-  locales: { [index: string]: Locale },
-  onUpdate: (localizations: Record<string, Record<string, string>>) => void
+  attachment: AttachmentResource;
+  locale: string;
+  locales: { [index: string]: Locale };
+  onUpdate: (localizations: Record<string, Record<string, string>>) => void;
 }
 
 export default function AttachmentEditor(props: AttachmentEditorProps) {
@@ -18,19 +18,19 @@ export default function AttachmentEditor(props: AttachmentEditorProps) {
   const [locale, setLocale] = useState(props.locale);
   const [localizations, setLocalizations] = useState({
     name: attachment.name || {},
-    description: attachment.description || {},
+    description: attachment.description || {}
   });
 
   const notice = useToastStore((state) => state.notice);
   const closeModal = useModalStore((state) => state.close);
 
-  const updateLocalization = (name: "name" | "description") => (evt: ChangeEvent<HTMLInputElement>) => {
-    setLocalizations({
-      ...localizations,
-      [name]: { ...localizations[name],
-                [locale]: evt.target.value }
-    });
-  };
+  const updateLocalization =
+    (name: "name" | "description") => (evt: ChangeEvent<HTMLInputElement>) => {
+      setLocalizations({
+        ...localizations,
+        [name]: { ...localizations[name], [locale]: evt.target.value }
+      });
+    };
 
   const copyEmbedCode = (evt: Event) => {
     evt.preventDefault();
@@ -59,13 +59,12 @@ export default function AttachmentEditor(props: AttachmentEditorProps) {
       <form>
         {props.locales && Object.keys(locales).length > 1 && (
           <div className="field">
-            <label>
-              Locale
-            </label>
-            <select name="locale"
-                    value={locale}
-                    onChange={e => setLocale(e.target.value)}>
-              {Object.keys(locales).map(key => (
+            <label>Locale</label>
+            <select
+              name="locale"
+              value={locale}
+              onChange={(e) => setLocale(e.target.value)}>
+              {Object.keys(locales).map((key) => (
                 <option key={`locale-${key}`} value={key}>
                   {locales[key].name}
                 </option>
@@ -75,47 +74,43 @@ export default function AttachmentEditor(props: AttachmentEditorProps) {
         )}
         <div className="field">
           <label>Name</label>
-          <input type="text"
-                 className="name"
-                 lang={locale}
-                 dir={inputDir}
-                 value={localizations.name[locale] || ""}
-                 onChange={updateLocalization("name")} />
+          <input
+            type="text"
+            className="name"
+            lang={locale}
+            dir={inputDir}
+            value={localizations.name[locale] || ""}
+            onChange={updateLocalization("name")}
+          />
         </div>
         <div className="field">
           <label>Description</label>
-          <textarea className="description"
-                    value={localizations.description[locale] || ""}
-                    lang={locale}
-                    dir={inputDir}
-                    onChange={updateLocalization("description")} />
+          <textarea
+            className="description"
+            value={localizations.description[locale] || ""}
+            lang={locale}
+            dir={inputDir}
+            onChange={updateLocalization("description")}
+          />
         </div>
         <div className="field embed-code">
-          <label>
-            Embed code
-          </label>
-          <input type="text"
-                 value={`[attachment:${attachment.id}]`}
-                 disabled={true} />
-          {copySupported() && (
-            <button onClick={copyEmbedCode}>
-              Copy
-            </button>
-          )}
+          <label>Embed code</label>
+          <input
+            type="text"
+            value={`[attachment:${attachment.id}]`}
+            disabled={true}
+          />
+          {copySupported() && <button onClick={copyEmbedCode}>Copy</button>}
         </div>
         <div className="field">
           <label>File</label>
-          <a href={attachment.url}
-             rel="noreferrer"
-             target="_blank">{attachment.filename}</a>
+          <a href={attachment.url} rel="noreferrer" target="_blank">
+            {attachment.filename}
+          </a>
         </div>
         <div className="buttons">
-          <button onClick={save}>
-            Save
-          </button>
-          <button onClick={closeModal}>
-            Cancel
-          </button>
+          <button onClick={save}>Save</button>
+          <button onClick={closeModal}>Cancel</button>
         </div>
       </form>
     </div>

data/app/javascript/components/Attachments/Placeholder.tsx

@@ -2,8 +2,7 @@ import React from "react";
 
 export default function Placeholder() {
   return (
-    <div className="attachment drop-placeholder"
-         key="file-placeholder">
+    <div className="attachment drop-placeholder" key="file-placeholder">
       Upload files here
     </div>
   );

data/app/javascript/components/Attachments.jsx

@@ -5,10 +5,12 @@ import Placeholder from "./Attachments/Placeholder";
 import FileUploadButton from "./FileUploadButton";
 import { post } from "../lib/request";
 
-import { createDraggable,
-         draggedOrder,
-         useDragCollection,
-         useDragUploader } from "./drag";
+import {
+  createDraggable,
+  draggedOrder,
+  useDragCollection,
+  useDragUploader
+} from "./drag";
 
 function filenameToName(str) {
   return str.replace(/\.[\w\d]+$/, "").replace(/_/g, " ");
@@ -16,18 +18,20 @@ function filenameToName(str) {
 
 export default function Attachments(props) {
   const collection = useDragCollection(props.records);
-  const locales = props.locales && props.locales.length > 0 ?
-        Object.keys(props.locales) : [props.locale];
+  const locales =
+    props.locales && props.locales.length > 0
+      ? Object.keys(props.locales)
+      : [props.locale];
   const [deleted, setDeleted] = useState([]);
 
   const uploadAttachment = (file) => {
     let name = {};
-    locales.forEach((l) => name[l] = file.name);
+    locales.forEach((l) => (name[l] = file.name));
 
-    const draggable = createDraggable(
-      { attachment: { filename: file.name, name: name },
-        uploading: true }
-    );
+    const draggable = createDraggable({
+      attachment: { filename: file.name, name: name },
+      uploading: true
+    });
 
     let data = new FormData();
 
@@ -36,14 +40,15 @@ export default function Attachments(props) {
       data.append(`attachment[name][${l}]`, filenameToName(file.name));
     });
 
-    post("/admin/attachments.json", data)
-      .then(json => {
-        collection.dispatch({
-          type: "update",
-          payload: { ...draggable,
-                     record: { attachment: json, uploading: false } }
-        });
+    post("/admin/attachments.json", data).then((json) => {
+      collection.dispatch({
+        type: "update",
+        payload: {
+          ...draggable,
+          record: { attachment: json, uploading: false }
+        }
       });
+    });
 
     return draggable;
   };
@@ -51,7 +56,7 @@ export default function Attachments(props) {
   const receiveFiles = (files) => {
     collection.dispatch({
       type: "append",
-      payload: files.map(f => uploadAttachment(f))
+      payload: files.map((f) => uploadAttachment(f))
     });
   };
 
@@ -62,17 +67,21 @@ export default function Attachments(props) {
     });
     collection.dispatch({
       type: "insertFiles",
-      payload: files.map(f => uploadAttachment(f))
+      payload: files.map((f) => uploadAttachment(f))
     });
   };
 
-  const [dragState,
-         dragStart,
-         listeners] = useDragUploader([collection], dragEnd);
+  const [dragState, dragStart, listeners] = useDragUploader(
+    [collection],
+    dragEnd
+  );
 
   const position = (record) => {
-    return [...collection.draggables.map(d => d.record),
-            ...deleted].indexOf(record) + 1;
+    return (
+      [...collection.draggables.map((d) => d.record), ...deleted].indexOf(
+        record
+      ) + 1
+    );
   };
 
   const attrName = (record) => {
@@ -102,21 +111,23 @@ export default function Attachments(props) {
     const { dragging } = dragState;
 
     if (draggable === "Files") {
-      return (<Placeholder key="placeholder" />);
+      return <Placeholder key="placeholder" />;
     }
 
     return (
-      <Attachment key={draggable.handle}
-                  draggable={draggable}
-                  locale={props.locale}
-                  locales={props.locales}
-                  showEmbed={props.showEmbed}
-                  startDrag={dragStart}
-                  position={position(draggable.record)}
-                  onUpdate={update(draggable)}
-                  deleteRecord={remove(draggable)}
-                  attributeName={attrName(draggable.record)}
-                  placeholder={dragging && dragging == draggable} />
+      <Attachment
+        key={draggable.handle}
+        draggable={draggable}
+        locale={props.locale}
+        locales={props.locales}
+        showEmbed={props.showEmbed}
+        startDrag={dragStart}
+        position={position(draggable.record)}
+        onUpdate={update(draggable)}
+        deleteRecord={remove(draggable)}
+        attributeName={attrName(draggable.record)}
+        placeholder={dragging && dragging == draggable}
+      />
     );
   };
 
@@ -128,30 +139,31 @@ export default function Attachments(props) {
   }
 
   return (
-    <div className={classes.join(" ")}
-         ref={collection.ref}
-         {...listeners}>
-      <div className="files">
-        {dragOrder.map(d => attachment(d))}
-      </div>
+    <div className={classes.join(" ")} ref={collection.ref} {...listeners}>
+      <div className="files">{dragOrder.map((d) => attachment(d))}</div>
       <div className="deleted">
-        {deleted.map(r =>
+        {deleted.map((r) => (
           <span className="deleted-attachment" key={r.id}>
-            <input name={`${attrName(r)}[id]`}
-                   type="hidden"
-                   value={r.id} />
-            <input name={`${attrName(r)}[attachment_id]`}
-                   type="hidden"
-                   value={(r.attachment && r.attachment.id) || ""} />
-            <input name={`${attrName(r)}[_destroy]`}
-                   type="hidden"
-                   value={true} />
-          </span>)}
+            <input name={`${attrName(r)}[id]`} type="hidden" value={r.id} />
+            <input
+              name={`${attrName(r)}[attachment_id]`}
+              type="hidden"
+              value={(r.attachment && r.attachment.id) || ""}
+            />
+            <input
+              name={`${attrName(r)}[_destroy]`}
+              type="hidden"
+              value={true}
+            />
+          </span>
+        ))}
       </div>
       <div className="drop-target">
-        <FileUploadButton multiple={true}
-                          multiline={true}
-                          callback={receiveFiles} />
+        <FileUploadButton
+          multiple={true}
+          multiline={true}
+          callback={receiveFiles}
+        />
       </div>
     </div>
   );