Try different inline text editing

locale/cs/LC_MESSAGES/djangojs.po

@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2024-03-04 23:22+0000\n"
+"POT-Creation-Date: 2024-03-06 13:34+0000\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <[email protected]>\n"
@@ -28,8 +28,7 @@ msgstr ""
 msgid "Homepage"
 msgstr "Domů"
 
-#, javascript-format
-msgid "Could not create site: %s"
+msgid "Could not update site: {err}"
 msgstr ""
 
 msgid "Create Site"
@@ -38,8 +37,7 @@ msgstr ""
 msgid "Available websites"
 msgstr ""
 
-#, javascript-format
-msgid "Could not update site: %s"
+msgid "No sites yet"
 msgstr ""
 
 msgid "Site name"
@@ -57,7 +55,7 @@ msgstr ""
 msgid "Available regions"
 msgstr ""
 
-msgid "Cancel"
+msgid "Close"
 msgstr ""
 
 msgid "Saving"
@@ -66,8 +64,5 @@ msgstr ""
 msgid "Save changes"
 msgstr ""
 
-msgid "Edit title"
-msgstr ""
-
 msgid "Preview"
 msgstr "Náhled"

package.json

@@ -27,6 +27,7 @@
     "react-bootstrap": "^2.10.1",
     "react-contenteditable": "^3.3.7",
     "react-dom": "^18.2.0",
+    "react-edit-text": "^5.1.1",
     "react-redux": "^9.1.0",
     "sanitize-html": "^2.12.1",
     "sass": "^1.43.4",

tumbs/static/js/cms/components/CreateWebsiteButton.js

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { useDispatch } from "react-redux";
-import { _, interpolate } from "../i18n";
+import { _ } from "../i18n";
 import { actions as websitesActions } from "../slices/websites";
 import { actions as alertsActions } from "../slices/alerts";
 import { apiRequest } from "../network";
@@ -36,7 +36,10 @@ const CreateWebsiteButton = () => {
       .catch((err) => {
         setStatus("error");
         dispatch(
-          alertsActions.addAlert({ content: interpolate(_("Could not create site: %s"), err), severity: "danger" }),
+          alertsActions.addAlert({
+            content: _('Could not create site: "{err}"').supplant({ err: String(err) }),
+            severity: "danger",
+          }),
         );
         // TODO: notify Sentry
       });

tumbs/static/js/cms/components/UpdateWebsiteDialog.js

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import * as R from "ramda";
 import { useSelector, useDispatch } from "react-redux";
-import { _, interpolate } from "../i18n";
+import { _ } from "../i18n";
 import { actions as alertsActions } from "../slices/alerts";
 import { actions as updateWebsiteActions } from "../slices/updateWebsiteDialog";
 import { actions as websitesActions } from "../slices/websites";
@@ -39,18 +39,21 @@ const UpdateWebsiteDialog = ({ website }) => {
       .catch((err) => {
         setStatus("error");
         dispatch(
-          alertsActions.addAlert({ content: interpolate(_("Could not update site: %s"), err), severity: "danger" }),
+          alertsActions.addAlert({
+            content: _('Could not update site: "{err}"').supplant({ err: String(err) }),
+            severity: "danger",
+          }),
         );
         // TODO: notify Sentry
         hide();
       });
   };
 
   return (
-    <Offcanvas show={visible} onHide={hide} placement="end">
+    <Offcanvas show={visible} onHide={hide} placement="end" aria-labelledby="updateWebsiteLabel">
       <Form onSubmit={handleSubmit}>
         <Offcanvas.Header closeButton>
-          <Offcanvas.Title>Edit Site</Offcanvas.Title>
+          <Offcanvas.Title id="updateWebsiteLabel">Edit Site</Offcanvas.Title>
         </Offcanvas.Header>
 
         <Offcanvas.Body>

tumbs/static/js/cms/components/WebsiteNameEditor.js

@@ -1,29 +1,24 @@
 import React, { useState } from "react";
 import * as R from "ramda";
 import { useDispatch } from "react-redux";
-import { _, interpolate } from "../i18n";
+import { _ } from "../i18n";
 import { actions as websitesActions } from "../slices/websites";
 import { actions as alertsActions } from "../slices/alerts";
 import { apiRequest } from "../network";
-import Form from "react-bootstrap/Form";
-import InputGroup from "react-bootstrap/InputGroup";
-import Button from "react-bootstrap/Button";
+import { EditText } from "react-edit-text";
 
 const WebsiteNameEditor = ({ website }) => {
   const dispatch = useDispatch();
   const [status, setStatus] = useState("initial");
   let isLoading = status === "loading";
-  let isEditing = ["editing", "loading"].includes(status);
 
-  const startEditing = () => setStatus("editing");
-  const stopEditing = () => setStatus("initial");
+  const handleSubmit = ({ value, previousValue }) => {
+    if (value === previousValue) return;
 
-  const handleSubmit = (e) => {
-    e.preventDefault();
     setStatus("loading");
 
     apiRequest("update_website", {
-      payload: R.assoc("name", e.target.name.value, website),
+      payload: R.assoc("name", value, website),
       args: { website_id: website.id },
     })
       .then((data) => {
@@ -33,52 +28,23 @@ const WebsiteNameEditor = ({ website }) => {
       .catch((err) => {
         setStatus("error");
         dispatch(
-          alertsActions.addAlert({ content: interpolate(_("Could not update site: %s"), err), severity: "danger" }),
+          alertsActions.addAlert({
+            content: _('Could not update site: "{err}"').supplant({ err: String(err) }),
+            severity: "danger",
+          }),
         );
         // TODO: notify Sentry
       });
   };
 
   return (
-    <>
-      {isEditing ? (
-        <Form onSubmit={handleSubmit}>
-          <InputGroup>
-            <Form.Control
-              name="name"
-              defaultValue={website.name}
-              disabled={isLoading}
-              autoFocus
-              placeholder={_("Site name")}
-              aria-label={_("Site name")}
-            />
-            <Button variant="outline-secondary" disabled={isLoading} onClick={stopEditing} title={_("Cancel")}>
-              <i className="bi-x-circle" />
-            </Button>
-            <Button
-              variant="outline-secondary"
-              type="submit"
-              disabled={isLoading}
-              title={isLoading ? _("Saving") : _("Save changes")}
-            >
-              {isLoading ? <i className="spinner-grow spinner-grow-sm" /> : <i className="bi-floppy text-success" />}
-            </Button>
-          </InputGroup>
-        </Form>
-      ) : (
-        <>
-          <h3>{website.name}</h3>
-          <Button
-            variant="light"
-            onClick={startEditing}
-            className="button-icon button-start-editing"
-            title={_("Edit title")}
-          >
-            <i className="bi-pencil" />
-          </Button>
-        </>
-      )}
-    </>
+    <EditText
+      defaultValue={website.name}
+      name="name"
+      onSave={handleSubmit}
+      readonly={isLoading}
+      className="h3 content-editable"
+    />
   );
 };
 

tumbs/static/js/cms/i18n.js

@@ -1,3 +1,2 @@
 export const _ = window.gettext;
 export const gettext = window.gettext;
-export const interpolate = window.interpolate;

tumbs/static/js/cms/network.js

@@ -1,18 +1,11 @@
 import * as R from "ramda";
 import { ENDPOINTS } from "./store";
 
-const interpolate = (str, o) => {
-  return str.replace(/{([^{}]*)}/g, function (a, b) {
-    const r = o[b];
-    return typeof r === "string" || typeof r === "number" ? r : a;
-  });
-};
-
 export const apiRequest = (endpoint, { args = {}, payload = {}, init = {} }) => {
   const { uri, method } = ENDPOINTS[endpoint];
 
   return fetch(
-    interpolate(uri, args),
+    uri.supplant(args),
     R.mergeRight(
       {
         method: method,

tumbs/static/js/project.js

@@ -1 +1,8 @@
-import '../sass/project.scss';
+import "../sass/project.scss";
+
+String.prototype.supplant = function (o) {
+  return this.replace(/{([^{}]*)}/g, (a, b) => {
+    const r = o[b];
+    return typeof r === "string" || typeof r === "number" ? r : a;
+  });
+};

tumbs/static/sass/project.scss

@@ -27,10 +27,6 @@
     padding: .2rem;
   }
 
-  .button-start-editing {
-    margin-left: -1rem;
-  }
-
   .button-settings {
     margin-left: auto;
   }